From 17aecaacfffba3fe0f27809ab48f43d7dbf1b7c4 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Sat, 19 Oct 2024 20:45:38 +0800
Subject: fix(CSS): display of utils in draggable-block

* remove trivial implementation for case about font resizing, to make
  hover works
* add rules for dragging
---
 src/Layout.mjs       | 22 ++--------------------
 src/css/dumbymap.css | 15 ++++++++-------
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/Layout.mjs b/src/Layout.mjs
index 04acc3d..8c6a8ea 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -125,15 +125,12 @@ const addDraggable = (element, { snap, left, top } = {}) => {
   })
 
   // FIXME use pure CSS to hide utils
-  const utils = element.querySelector('.utils')
   draggable.onDragStart = () => {
-    if (utils) utils.style.display = 'none'
-    element.classList.add('drag')
+    element.classList.add('dragging')
   }
 
   draggable.onDragEnd = () => {
-    if (utils) utils.style = ''
-    element.classList.remove('drag')
+    element.classList.remove('dragging')
     element.style.zIndex = '9000'
   }
 
@@ -244,24 +241,9 @@ export class Overlay extends Layout {
         },
       }))
 
-      // Trivial case:
-      // This hack make sure utils remains at the same place even when wrapper resized
-      // Prevent DOMRect changes when user clicking plus/minus button many times
-      const utils = wrapper.querySelector('.utils')
-      utils.onmouseover = () => {
-        const { left, top } = utils.getBoundingClientRect()
-        utils.style.cssText = `visibility: visible; z-index: 9000; position: fixed; transition: unset; left: ${left}px; top: ${top}px;`
-        document.body.appendChild(utils)
-      }
-      utils.onmouseout = () => {
-        wrapper.appendChild(utils)
-        utils.style.cssText = ''
-      }
-
       // Close button
       wrapper.querySelector('#close').onclick = () => {
         block.classList.remove('focus')
-        utils.style.cssText = ''
       }
       // Plus/Minus font-size of content
       wrapper.querySelector('#plus-font-size').onclick = () => {
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index cc2d1ef..dd50f2b 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -416,7 +416,6 @@ root {
   transition:
     visibility .3s ease-out,
     opacity .3s ease-out;
-
   visibility: hidden;
   opacity: 0;
 
@@ -554,7 +553,14 @@ root {
     transform: translate(0, -0.6rem);
   }
 
-  &.drag,
+  &:not(.dragging):has(.draggable-part:hover) {
+    .utils {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.dragging,
   &:has(.draggable-part:hover) {
     .handle {
       background: #e1e1e1;
@@ -562,11 +568,6 @@ root {
       transform: unset;
     }
 
-    .utils {
-      visibility: visible;
-      opacity: 1;
-    }
-
     > *:not(.draggable-part, .utils) {
       color: gray;
 
-- 
cgit v1.2.3-70-g09d2