From 184b3004d82806f1b31c94701e75585fb8f2721b Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Fri, 11 Oct 2024 15:01:40 +0800
Subject: feat: implement crs in GeoLink

Now GeoLink has the following format:

geo:<LON>,<LAT>?q=<LON>,<LAT>&xy=<x,y>,crs=<EPSG:CODE>

When calling addMarker or updateCamera, only use [lon,lat] format
---
 src/dumbyUtils.mjs | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

(limited to 'src/dumbyUtils.mjs')

diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 170cb16..2e71ee6 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -1,6 +1,8 @@
 import LeaderLine from 'leader-line'
 import { insideWindow, insideParent } from './utils'
 
+export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/
+
 /**
  * focusNextMap.
  *
@@ -100,11 +102,12 @@ const getMarkersFromMaps = link => {
     .filter(map => link.targets ? link.targets.includes(map.id) : true)
     .map(map => {
       const renderer = map.renderer
-      const markerTitle = `${link.targets ?? 'all'}@${link.xy}`
+      const markerTitle = `${link.targets ?? 'all'}@${link.dataset.xy}`
+      const lonLat = [Number(link.dataset.lon), Number(link.dataset.lat)]
 
       return map.querySelector(`.marker[title="${markerTitle}"]`) ??
         renderer.addMarker({
-          xy: link.xy,
+          xy: lonLat,
           title: markerTitle,
           type: link.type,
         })
@@ -138,21 +141,25 @@ const addLeaderLine = (link, target) => {
  */
 export const createGeoLink = (link) => {
   const url = new URL(link.href)
-  const xyInParams = url.searchParams.get('xy')?.split(',')?.map(Number)
-  const xy = xyInParams ?? url?.href
-    ?.match(/^geo:([-]?[0-9.]+),([-]?[0-9.]+)/)
+  const params = new URLSearchParams(link.search)
+  const xyInParams = params.get('xy')?.split(',')?.map(Number)
+  const [lon, lat] = url.href
+    ?.match(coordPattern)
     ?.splice(1)
     ?.reverse()
     ?.map(Number)
+  const xy = xyInParams ?? [lon, lat]
 
   if (!xy || isNaN(xy[0]) || isNaN(xy[1])) return false
 
   // Geo information in link
-  link.url = url
-  link.xy = xy
+  link.dataset.xy = xy
+  link.dataset.lon = lon
+  link.dataset.lat = lat
   link.classList.add('with-leader-line', 'geolink')
-  link.targets = link.url.searchParams.get('id')?.split(',') ?? null
-  link.type = link.url.searchParams.get('type') ?? null
+  // TODO refactor as data attribute
+  link.targets = params.get('id')?.split(',') ?? null
+  link.type = params.get('type') ?? null
 
   link.lines = []
 
@@ -170,7 +177,11 @@ export const createGeoLink = (link) => {
   link.onclick = (event) => {
     event.preventDefault()
     removeLeaderLines(link)
-    getMarkersFromMaps(link).forEach(updateMapCameraByMarker(link.xy))
+    getMarkersFromMaps(link)
+      .forEach(updateMapCameraByMarker([
+        Number(link.dataset.lon),
+        Number(link.dataset.lat)
+      ]))
   }
   return true
 }
@@ -229,9 +240,9 @@ const removeLeaderLines = link => {
  * @param {Number[]} xy
  * @return {Function} function
  */
-const updateMapCameraByMarker = xy => marker => {
+const updateMapCameraByMarker = lonLat => marker => {
   const renderer = marker.closest('.mapclay')?.renderer
-  renderer.updateCamera({ center: xy }, true)
+  renderer.updateCamera({ center: lonLat }, true)
 }
 
 /**
-- 
cgit v1.2.3-70-g09d2