From f5461d9adbfe890c3a3e55b1902ee2b22577148c Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Wed, 23 Oct 2024 23:47:05 +0800
Subject: feat: add menu/end-of-leader-line dynamically

---
 src/dumbyUtils.mjs |  1 +
 src/dumbymap.mjs   | 39 ++++++++++++++++++++-------------------
 2 files changed, 21 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 2f64e38..214e44f 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -419,6 +419,7 @@ export const dragForAnchor = (container, range, endOfLeaderLine) => {
     geoLink.classList.remove('drag')
     positionObserver.disconnect()
     line.remove()
+    endOfLeaderLine.remove()
 
     const map = document.elementFromPoint(e.clientX, e.clientY)
       .closest('.mapclay[data-render="fulfilled"]')
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 706a4fe..5cca952 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -522,22 +522,9 @@ export const generateMaps = (container, {
         }, mapDelay,
       )
     }
-    target.renderMap()
+    target.renderMap(configList)
   }
 
-  /** MENU: Prepare Context Menu */
-  const menu = document.createElement('div')
-  menu.classList.add('menu', 'dumby-menu')
-  menu.style.display = 'none'
-  menu.onclick = (e) => {
-    const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu')
-    if (keepMenu) return
-
-    menu.style.display = 'none'
-  }
-  container.appendChild(menu)
-  window.menu = menu
-
   /** MENU: Menu Items for Context Menu */
   container.oncontextmenu = e => {
     const map = e.target.closest('.mapclay')
@@ -545,6 +532,17 @@ export const generateMaps = (container, {
     if (!block && !map) return
     e.preventDefault()
 
+    /** MENU: Prepare Context Menu */
+    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
+
+      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;`
@@ -580,7 +578,8 @@ export const generateMaps = (container, {
 
   /** MENU: Event Handler when clicking outside of Context Manu */
   const actionOutsideMenu = e => {
-    if (menu.style.display === 'none') return
+    const menu = container.querySelector('.dumby-menu')
+    if (!menu) return
     const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu')
     if (keepMenu) return
 
@@ -591,7 +590,7 @@ export const generateMaps = (container, {
       e.clientY < rect.top ||
       e.clientY > rect.top + rect.height
     ) {
-      menu.style.display = 'none'
+      menu.remove()
     }
   }
   document.addEventListener('click', actionOutsideMenu)
@@ -600,9 +599,6 @@ export const generateMaps = (container, {
   )
 
   /** MOUSE: Drag/Drop on map for new GeoLink */
-  const pointByArrow = document.createElement('div')
-  pointByArrow.className = 'point-by-arrow'
-  container.appendChild(pointByArrow)
   container.ondragstart = () => false
   container.onmousedown = (e) => {
     // Check should start drag event for GeoLink
@@ -615,6 +611,10 @@ export const generateMaps = (container, {
     const mouseInRange = e.clientX < rect.right && e.clientX > rect.left && e.clientY < rect.bottom && e.clientY > rect.top
     if (!mouseInRange) return
 
+    const pointByArrow = document.createElement('div')
+    pointByArrow.className = 'point-by-arrow'
+    container.appendChild(pointByArrow)
+
     const timer = setTimeout(() => {
       utils.dragForAnchor(container, range, pointByArrow)
     }, 300)
@@ -629,6 +629,7 @@ export const generateMaps = (container, {
     container.onmousemove(e)
     container.onmouseup = () => {
       clearTimeout(timer)
+      pointByArrow.remove()
       container.onmouseup = null
       container.onmousemove = null
     }
-- 
cgit v1.2.3-70-g09d2