From 11ff731337c6823e74821d06457972c6d0528c34 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 31 Oct 2024 17:09:51 +0800 Subject: refactor: getMarkersFromMaps Make arugments more general, not only GeoLink --- src/Link.mjs | 56 ++++++++++++++++++++++++++++++++++---------------------- src/MenuItem.mjs | 4 ++-- src/dumbymap.mjs | 6 +++--- 3 files changed, 39 insertions(+), 27 deletions(-) (limited to 'src') 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,43 +101,55 @@ 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 @@ -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: 'DELETE', 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: 'DELETE', onclick: () => { - getMarkersFromMaps(geoLink) + getMarkersByGeoLink(geoLink) .forEach(m => m.remove()) const sibling = [ -- cgit v1.2.3-70-g09d2