feat(layout): keep handle be active when on drag

Even if cursor is not hovering handle element

2 files changed, 12 insertions, 8 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index c81225f..746dda2 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -78,7 +78,7 @@ export class Overlay extends Layout {
       draggablePart.onmouseup = (e) => {
         if (e.button === 1) {
           // Hide block with middle click
-          draggableBlock.setAttribute("data-hide", "true")
+          draggableBlock.setAttribute("data-state", "hide")
         }
       }
 
@@ -95,7 +95,7 @@ export class Overlay extends Layout {
 
       // Close button
       draggableBlock.querySelector('#close').onclick = () => {
-          draggableBlock.setAttribute("data-hide", "true")
+          draggableBlock.setAttribute("data-state", "hide")
       }
       // Plus/Minus font-size of content
       draggableBlock.querySelector('#plus-font-size').onclick = () => {
@@ -106,12 +106,16 @@ export class Overlay extends Layout {
         const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
         block.style.fontSize = `${fontSize - 0.1}rem`
       }
+
+      // FIXME use pure CSS to hide utils
       const utils = draggableBlock.querySelector('.utils')
       draggableInstance.onDragStart = () => {
         utils.style.opacity = 0
+        draggableBlock.setAttribute('data-state', 'on-drag')
       }
       draggableInstance.onDragEnd = () => {
         utils.style = ''
+        draggableBlock.removeAttribute('data-state')
       }
 
       // Reposition draggable instance when resized
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index b2e73ab..fb3b76e 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -330,14 +330,15 @@
     display: none;
   }
 
-  &[data-hide="true"] {
+  &[data-state="hide"] {
     animation: fade-out 0.3s;
 
     opacity: 0;
     visibility: hidden;
   }
 
-  &:has(.draggable:hover, .utils:hover) {
+  &:has(.draggable:hover, .utils:hover),
+  &[data-state="on-drag"] {
     .dumby-block {
       color: gray;
 
@@ -347,8 +348,6 @@
     .handle {
       background: #e1e1e1;
 
-      /* border-bottom: solid gray; */
-
       transform: unset;
     }
 
@@ -362,11 +361,12 @@
 
       font-size: 1.5rem;
 
-      transition: opacity 1s linear;
       gap: 6px;
-      animation: fade-in 1.5s;
+      animation: fade-in 1s;
       padding-left: 1rem;
 
+      transition: opacity 0.5s;
+
       > * {
         padding: 0.2rem 0.4rem;