From bdafef6dd6b5399e0d552452ef63c52c5061d38b Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Sun, 22 Sep 2024 19:15:23 +0800
Subject: feat: make utils stable when user is managing

---
 src/Layout.mjs | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'src/Layout.mjs')

diff --git a/src/Layout.mjs b/src/Layout.mjs
index d0fde0f..23588a1 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -157,9 +157,24 @@ export class Overlay extends Layout {
         .finished
         .finally(() => this.addDraggable(wrapper))
 
+      // 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.removeAttribute('style')
+      }
+
       // Close button
       wrapper.querySelector('#close').onclick = () => {
         wrapper.classList.add('hide')
+        utils.removeAttribute('style')
       }
       // Plus/Minus font-size of content
       wrapper.querySelector('#plus-font-size').onclick = () => {
-- 
cgit v1.2.3-70-g09d2