From 405cc77d0b8e7e864137ba9f485c47e4f1fb07af Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Thu, 24 Oct 2024 01:02:45 +0800
Subject: feat: improve menu element

* add observer for display and position, in case no menu item inside
* remove all existing menus when oncontextmenu
---
 src/css/dumbymap.css |  2 +-
 src/dumbymap.mjs     | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 8dfe90d..8ba0887 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -171,7 +171,7 @@ pre:has(.mapclay) {
 }
 
 .menu {
-  display: block;
+  display: none;
   overflow: visible;
   width: fit-content;
   min-width: 10rem;
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 8b9a2a6..2f2b67f 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -527,25 +527,27 @@ export const generateMaps = (container, {
 
   /** MENU: Menu Items for Context Menu */
   container.oncontextmenu = e => {
+    container.querySelectorAll('.dumby-menu').forEach(m => m.remove())
     const map = e.target.closest('.mapclay')
     const block = e.target.closest('.dumby-block')
     if (!block && !map) return
     e.preventDefault()
 
-    /** MENU: Prepare Context Menu */
+    // Add menu element
     const menu = document.createElement('div')
     menu.classList.add('menu', 'dumby-menu')
     menu.onclick = (e) => {
-      const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu')
-      if (keepMenu) return
-
+      if (e.target.closest('.keep-menu')) return
       menu.remove()
     }
-    container.body.appendChild(menu)
-
-    menu.replaceChildren()
-    menu.style.display = 'block'
-    menu.style.cssText = `left: ${e.clientX - menu.offsetParent.offsetLeft + 10}px; top: ${e.clientY - menu.offsetParent.offsetTop + 5}px;`
+    container.appendChild(menu)
+    new MutationObserver(() => {
+      menu.style.display = 'block'
+      menu.style.left = (e.clientX - menu.offsetParent.offsetLeft + 10) + 'px'
+      menu.style.top = (e.clientY - menu.offsetParent.offsetTop + 5) + 'px'
+      clearTimeout(menu.timer)
+    }).observe(menu, { childList: true })
+    menu.timer = setTimeout(() => menu.remove(), 100)
 
     // Menu Items for map
     if (map?.renderer?.results) {
-- 
cgit v1.2.3-70-g09d2