refactor: getMarkersFromMaps

Make arugments more general, not only GeoLink

3 files changed, 39 insertions, 27 deletions

diff --git a/src/Link.mjs b/src/Link.mjs
index 92aaacf..7678f3a 100644
--- a/src/Link.mjs
+++ b/src/Link.mjs
@@ -53,7 +53,7 @@ export const GeoLink = (link) => {
   link.lines = []
 
   // Hover link for LeaderLine
-  link.onmouseover = () => getMarkersFromMaps(link)
+  link.onmouseover = () => getMarkersByGeoLink(link)
     .filter(isAnchorVisible)
     .forEach(anchor => {
       const labelText = new URL(link).searchParams.get('text') ?? link.textContent
@@ -78,7 +78,7 @@ export const GeoLink = (link) => {
   link.onclick = (event) => {
     event.preventDefault()
     removeLeaderLines(link)
-    getMarkersFromMaps(link).forEach(marker => {
+    getMarkersByGeoLink(link).forEach(marker => {
       const map = marker.closest('.mapclay')
       map.scrollIntoView({ behavior: 'smooth' })
       updateMapCameraByMarker([
@@ -93,7 +93,7 @@ export const GeoLink = (link) => {
     if (e.which !== 2) return
     e.preventDefault()
     removeLeaderLines(link)
-    getMarkersFromMaps(link)
+    getMarkersByGeoLink(link)
       .forEach(marker => marker.remove())
   }
 
@@ -101,44 +101,56 @@ export const GeoLink = (link) => {
 }
 
 /**
- * GeoLink: getMarkersFromMaps. Get marker elements by GeoLink
+ * GeoLink: getMarkersFromMaps. Get marker elements from maps
  *
- * @param {GeoLink} link
+ * @param {Number[]} xy - xy values of marker
+ * @param {string} options.type - type of marker
+ * @param {string} options.title - title of marker
+ * @param {Function} options.filter - filter of map elements
  * @return {HTMLElement[]} markers
  */
-export const getMarkersFromMaps = (link) => {
-  const params = new URLSearchParams(link.search)
+export const getMarkersFromMaps = (xy, { type = 'pin', title, filter = () => true }) => {
   const maps = Array.from(
-    link.closest('.Dumby')
+    document.querySelector('.Dumby')
       .querySelectorAll('.mapclay[data-render="fulfilled"]'),
   )
   return maps
-    .filter(map => link.targets ? link.targets.includes(map.id) : true)
+    .filter(filter)
     .map(map => {
       const renderer = map.renderer
-      const lonLat = [Number(link.dataset.lon), Number(link.dataset.lat)]
-      const type = params.get('type') ?? 'pin'
       const svg = markers[type]
       const element = document.createElement('div')
       element.style.cssText = `width: ${svg.size[0]}px; height: ${svg.size[1]}px;`
       element.innerHTML = svg.html
 
-      const marker = map.querySelector(`.marker[data-xy="${lonLat}"]`) ??
-        renderer.addMarker({
-          xy: lonLat,
-          element,
-          type,
-          anchor: svg.anchor,
-          size: svg.size,
-        })
-      marker.dataset.xy = lonLat
-      marker.title = link.textContent
+      const marker = map.querySelector(`.marker[data-xy="${xy}"]`) ??
+        renderer.addMarker({ xy, element, type, anchor: svg.anchor, size: svg.size })
+      marker.dataset.xy = xy
+      marker.title = title
 
       return marker
     })
 }
 
 /**
+ * GeoLink: getMarkersByGeoLink. Get marker elements by GeoLink
+ *
+ * @param {GeoLink} link
+ * @return {HTMLElement[]} markers
+ */
+export const getMarkersByGeoLink = (link) => {
+  const params = new URLSearchParams(link.search)
+  const type = params.get('type') ?? 'pin'
+  const lonLat = [Number(link.dataset.lon), Number(link.dataset.lat)]
+
+  return getMarkersFromMaps(lonLat, {
+    type,
+    title: link.textContent,
+    filter: map => !link.targets || link.targets.includes(map.id),
+  })
+}
+
+/**
  * DocLink: append DocLink features onto anchor element
  * @param {HTMLAnchorElement} link
  * @return {DocLink}
@@ -213,7 +225,7 @@ const isAnchorVisible = anchor => {
  * @param {Number[]} xy
  * @return {Function} function
  */
-const updateMapCameraByMarker = lonLat => marker => {
+export const updateMapCameraByMarker = lonLat => marker => {
   const renderer = marker.closest('.mapclay')?.renderer
   renderer.updateCamera({ center: lonLat }, true)
 }
diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 13dbc44..84a1405 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -439,9 +439,9 @@ export const setGeoLinkTypeItem = ({ link, type, ...others }) => {
       params.set('type', type)
       link.search = params
       removeLeaderLines(link)
-      getMarkersFromMaps(link)
+      getMarkersByGeoLink(link)
         .forEach(marker => marker.remove())
-      getMarkersFromMaps(link)
+      getMarkersByGeoLink(link)
     },
   })
 }
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 9bc1da7..77f3515 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -6,7 +6,7 @@ import MarkdownItInjectLinenumbers from 'markdown-it-inject-linenumbers'
 import * as mapclay from 'mapclay'
 import { onRemove, animateRectTransition, throttle, debounce, shiftByWindow } from './utils'
 import { Layout, SideBySide, Overlay, Sticky } from './Layout'
-import { GeoLink, DocLink, getMarkersFromMaps } from './Link.mjs'
+import { GeoLink, DocLink, getMarkersByGeoLink } from './Link.mjs'
 import * as utils from './dumbyUtils'
 import * as menuItem from './MenuItem'
 import PlainModal from 'plain-modal'
@@ -584,7 +584,7 @@ export const generateMaps = (container, {
         menu.appendChild(menuItem.Item({
           innerHTML: '<strong style="color: red;">DELETE</strong>',
           onclick: () => {
-            getMarkersFromMaps(geoLink)
+            getMarkersByGeoLink(geoLink)
               .forEach(m => m.remove())
             geoLink.replaceWith(
               document.createTextNode(geoLink.textContent),
@@ -595,7 +595,7 @@ export const generateMaps = (container, {
         menu.appendChild(menuItem.Item({
           innerHTML: '<strong style="color: red;">DELETE</strong>',
           onclick: () => {
-            getMarkersFromMaps(geoLink)
+            getMarkersByGeoLink(geoLink)
               .forEach(m => m.remove())
 
             const sibling = [