From 5125cc7a08dbeb3d85d17cfaac844b4dc027e91d Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Sun, 22 Sep 2024 12:56:44 +0800
Subject: feat(layout): keep handle be active when on drag

Even if cursor is not hovering handle element
---
 src/Layout.mjs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/Layout.mjs')

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
-- 
cgit v1.2.3-70-g09d2