From 14f13987693ff3733bf6167fbfc3c70f1b6864bf Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Thu, 24 Oct 2024 12:14:50 +0800
Subject: feat: add menu items for setting marker type

---
 src/MenuItem.mjs   | 36 ++++++++++++++++++++++++++++++++++++
 src/dumbyUtils.mjs |  6 +++---
 src/dumbymap.mjs   |  9 ++++++++-
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 74b01d5..874c829 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,4 +1,5 @@
 import { shiftByWindow } from './utils.mjs'
+import * as utils from './dumbyUtils.mjs'
 
 /**
  * @typedef {Object} RefLink
@@ -426,3 +427,38 @@ export const addRefLink = (cm, refLinks) =>
       })
     }),
   })
+
+/**
+ * setGeoLinkTypeItem.
+ *
+ * @param {HTMLAnchorElement} link
+ * @param {String} text
+ * @param {String} type
+ */
+export const setGeoLinkTypeItem = ({ link, text, type }) => {
+  const params = new URLSearchParams(link.search)
+  return new Item({
+    text,
+    onclick: () => {
+      params.set('type', type)
+      link.search = params
+      utils.removeLeaderLines(link)
+      utils.getMarkersFromMaps(link)
+        .forEach(marker => marker.remove())
+      utils.getMarkersFromMaps(link)
+    },
+  })
+}
+
+/**
+ * setGeoLinkType.
+ *
+ * @param {HTMLAnchorElement} link
+ */
+export const setGeoLinkType = (link) => new Folder({
+  text: 'Marker Type',
+  items: [
+    setGeoLinkTypeItem({ link, text: 'Pin', type: 'pin' }),
+    setGeoLinkTypeItem({ link, text: 'Circle', type: 'circle' }),
+  ],
+})
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 42a51bc..8fe23eb 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -93,7 +93,8 @@ export function removeBlockFocus () {
  * @param {HTMLAnchorElement} link
  * @return {HTMLElement[]} markers
  */
-const getMarkersFromMaps = link => {
+export const getMarkersFromMaps = link => {
+  const params = new URLSearchParams(link.search)
   const maps = Array.from(
     link.closest('.Dumby')
       .querySelectorAll('.mapclay[data-render="fulfilled"]'),
@@ -107,7 +108,7 @@ const getMarkersFromMaps = link => {
       const marker = map.querySelector(`.marker[data-xy="${lonLat}"]`) ??
         renderer.addMarker({
           xy: lonLat,
-          type: link.type,
+          type: params.get('type') ?? null,
         })
       marker.dataset.xy = lonLat
       marker.title = new URLSearchParams(link.search).get('xy') ?? lonLat
@@ -167,7 +168,6 @@ export const createGeoLink = (link) => {
   link.classList.remove('not-geolink')
   // TODO refactor as data attribute
   link.targets = params.get('id')?.split(',') ?? null
-  link.type = params.get('type') ?? null
   link.title = 'Left-Click to move Camera, Middle-Click to clean anchor'
 
   link.lines = []
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 6e5bc38..4d6657f 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -555,9 +555,16 @@ export const generateMaps = (container, {
       if (geoLink.classList.contains('from-text')) {
         menu.appendChild(new menuItem.Item({
           text: 'Delete',
-          onclick: () => geoLink.replaceWith(document.createTextNode(geoLink.textContent)),
+          onclick: () => {
+            utils.getMarkersFromMaps(geoLink)
+              .forEach(m => m.remove())
+            geoLink.replaceWith(
+              document.createTextNode(geoLink.textContent),
+            )
+          },
         }))
       }
+      menu.appendChild(menuItem.setGeoLinkType(geoLink))
       return
     }
 
-- 
cgit v1.2.3-70-g09d2