feat: add menu item for add marker

* remove code about adding reference link in editor.mjs
* TODO: use local storage to access reference about marker

3 files changed, 68 insertions, 28 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 1d864fd..11ce4be 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,7 +1,7 @@
 import { shiftByWindow } from './utils.mjs'
-/* eslint-disable no-unused-vars */
+import { addMarkerByPoint } from './dumbyUtils.mjs'
+/* eslint-disable-next-line no-unused-vars */
 import { GeoLink, getMarkersFromMaps, removeLeaderLines } from './Link.mjs'
-/* eslint-enable */
 import * as markers from './marker.mjs'
 
 /**
@@ -495,3 +495,31 @@ export const setLeaderLineType = (link) => new Folder({
       },
     })),
 })
+
+/**
+ * addMarker.
+ *
+ * @param {Object} options
+ * @param {HTMLElement} options.map - map element
+ * @param {Number[]} options.point - xy values in pixel
+ * @param {Function} options.isNameValid - check marker name is valid
+ * @param {Function} options.callback
+ */
+export const addMarker = ({
+  map,
+  point,
+  isNameValid = () => true,
+  callback = null,
+}) => new Item({
+  text: 'Add Marker',
+  onclick: () => {
+    let markerName
+    do {
+      markerName = window.prompt(markerName ? 'Name exists' : 'Marker Name')
+    } while (markerName && !isNameValid(markerName))
+    if (markerName === null) return
+
+    const marker = addMarkerByPoint({ point, map })
+    callback?.(marker)
+  },
+})
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 718758b..0d88f80 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -543,10 +543,11 @@ export const generateMaps = (container, {
       menu.remove()
     }
     container.appendChild(menu)
+    const containerRect = container.getBoundingClientRect()
     new window.MutationObserver(() => {
       menu.style.display = 'block'
-      menu.style.left = (e.layerX + 10) + 'px'
-      menu.style.top = (e.layerY + 5) + 'px'
+      menu.style.left = (e.pageX - containerRect.left + 10) + 'px'
+      menu.style.top = (e.pageY - containerRect.top + 5) + 'px'
       clearTimeout(menu.timer)
     }).observe(menu, { childList: true })
     menu.timer = setTimeout(() => menu.remove(), 100)
@@ -575,13 +576,22 @@ export const generateMaps = (container, {
     }
 
     // Menu Items for map
-    if (map?.renderer?.results) {
+    if (map?.dataset?.render === 'fulfilled') {
       const rect = map.getBoundingClientRect()
       const [x, y] = [e.x - rect.left, e.y - rect.top]
       menu.appendChild(menuItem.toggleMapFocus(map))
       menu.appendChild(menuItem.renderResults(dumbymap, map))
-      menu.appendChild(menuItem.getCoordinatesByPixels(map, [x, y]))
-      menu.appendChild(menuItem.restoreCamera(map))
+      menu.appendChild(new menuItem.Folder({
+        text: 'Actions',
+        items: [
+          menuItem.getCoordinatesByPixels(map, [x, y]),
+          menuItem.restoreCamera(map),
+          menuItem.addMarker({
+            point: [e.pageX, e.pageY],
+            map,
+          }),
+        ],
+      }))
     } else {
       // Toggle block focus
       if (block) {
diff --git a/src/editor.mjs b/src/editor.mjs
index f3b812a..b023d1a 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -2,6 +2,7 @@
 import { markdown2HTML, generateMaps } from './dumbymap'
 import { defaultAliases, parseConfigsFromYaml } from 'mapclay'
 import * as menuItem from './MenuItem'
+/* eslint-disable-next-line no-unused-vars */
 import { addMarkerByPoint } from './dumbyUtils.mjs'
 import { shiftByWindow } from './utils.mjs'
 import * as tutorial from './tutorial'
@@ -54,6 +55,7 @@ let refLinks = []
  * @param {CodeMirror} cm - The CodeMirror instance
  * @param {RefLink} refLink - The reference link to append
  */
+/* eslint-disable-next-line no-unused-vars */
 const appendRefLink = (cm, refLink) => {
   editor.dataset.update = 'false'
 
@@ -439,27 +441,27 @@ function menuForEditor (event, menu) {
     menu.appendChild(switchToEditingMode)
   }
 
-  const map = event.target.closest('.mapclay')
-  if (map) {
-    const item = new menuItem.Item({
-      text: 'Add Anchor',
-      onclick: () => {
-        let anchorName
-        do {
-          anchorName = window.prompt(anchorName ? 'Name exists' : 'Name of Anchor')
-        } while (refLinks.find(ref => ref === anchorName))
-        if (anchorName === null) return
-
-        const marker = addMarkerByPoint({ point: [event.clientX, event.clientY], map })
-        const refLink = {
-          ref: anchorName,
-          link: `geo:${marker.dataset.xy.split(',').reverse()}`,
-        }
-        appendRefLink(cm, refLink)
-      },
-    })
-    menu.insertBefore(item, menu.firstChild)
-  }
+  // const map = event.target.closest('.mapclay')
+  // if (map) {
+  //   const item = new menuItem.Item({
+  //     text: 'Add Anchor',
+  //     onclick: () => {
+  //       let anchorName
+  //       do {
+  //         anchorName = window.prompt(anchorName ? 'Name exists' : 'Name of Anchor')
+  //       } while (refLinks.find(ref => ref === anchorName))
+  //       if (anchorName === null) return
+  //
+  //       const marker = addMarkerByPoint({ point: [event.clientX, event.clientY], map })
+  //       const refLink = {
+  //         ref: anchorName,
+  //         link: `geo:${marker.dataset.xy.split(',').reverse()}`,
+  //       }
+  //       appendRefLink(cm, refLink)
+  //     },
+  //   })
+  //   menu.insertBefore(item, menu.firstChild)
+  // }
 }
 
 /**