@fusion.dev/helix-map 0.110.5 → 0.110.6

package/dist/connect-map/connect-map.js

@@ -27,6 +27,27 @@ const fanOut = (count, spacing) => {
 const sameNames = (had, names) => (had?.length ?? 0) === names.length && names.every((name, at) => had?.[at] === name);
 const isMarker = (node) => node?.isMapMarker === true;
 const isPosition = (node) => node?.isMapPosition === true;
+const placeOn = (element, properties) => {
+    if (element.place) {
+        element.place(properties);
+        return;
+    }
+    for (const [name, value] of Object.entries(properties)) {
+        if (value === undefined) {
+            element.style.removeProperty(name);
+        }
+        else {
+            element.style.setProperty(name, value);
+        }
+    }
+};
+const UNPLACED_POSITION = {
+    '--_map-position-heading': undefined,
+    '--_map-position-pitch': undefined,
+    '--_map-position-radius': undefined,
+    '--_map-position-x': undefined,
+    '--_map-position-y': undefined,
+};
 const METERS_PER_DEGREE = 111_320;
 const LEAST_REACH = 0.005;
 export const reachOf = (places) => {
@@ -579,8 +600,10 @@ export const connectMap = (frame, driver, options = {}) => {
                 if (member.fanned !== true) {
                     member.fanned = true;
                 }
-                member.style.setProperty('--_map-marker-leg', `${Math.hypot(offset.x, offset.y)}px`);
-                member.style.setProperty('--_map-marker-leg-angle', `${Math.atan2(-offset.y, -offset.x)}rad`);
+                placeOn(member, {
+                    '--_map-marker-leg': `${Math.hypot(offset.x, offset.y)}px`,
+                    '--_map-marker-leg-angle': `${Math.atan2(-offset.y, -offset.x)}rad`,
+                });
                 placing.push({
                     at: { x: center.x + offset.x, y: center.y + offset.y },
                     marker: member,
@@ -591,8 +614,7 @@ export const connectMap = (frame, driver, options = {}) => {
         for (const marker of markers()) {
             if (!fan.has(marker) && marker.fanned === true) {
                 marker.fanned = false;
-                marker.style.removeProperty('--_map-marker-leg');
-                marker.style.removeProperty('--_map-marker-leg-angle');
+                placeOn(marker, { '--_map-marker-leg': undefined, '--_map-marker-leg-angle': undefined });
             }
         }
         for (const one of standing) {
@@ -636,8 +658,7 @@ export const connectMap = (frame, driver, options = {}) => {
         }
         placing.push(...hidden.map(({ at, marker, reach }) => ({ at, marker, reach })));
         for (const { at, marker, reach } of placing) {
-            marker.style.setProperty('--_map-marker-x', `${at.x}px`);
-            marker.style.setProperty('--_map-marker-y', `${at.y}px`);
+            placeOn(marker, { '--_map-marker-x': `${at.x}px`, '--_map-marker-y': `${at.y}px` });
             if (reach !== undefined) {
                 const ahead = rtl ? at.x : width - at.x;
                 const behind = rtl ? width - at.x : at.x;
@@ -666,9 +687,7 @@ export const connectMap = (frame, driver, options = {}) => {
                 continue;
             }
             if (driver.behind?.({ lat: position.lat, lng: position.lng })) {
-                for (const name of ['heading', 'pitch', 'radius', 'x', 'y']) {
-                    position.style.removeProperty(`--_map-position-${name}`);
-                }
+                placeOn(position, UNPLACED_POSITION);
                 continue;
             }
             const at = project({ lat: position.lat, lng: position.lng });
@@ -681,11 +700,13 @@ export const connectMap = (frame, driver, options = {}) => {
                             (METERS_PER_DEGREE * Math.cos((position.lat * Math.PI) / 180)),
                 })
                 : at;
-            position.style.setProperty('--_map-position-x', `${at.x}px`);
-            position.style.setProperty('--_map-position-y', `${at.y}px`);
-            position.style.setProperty('--_map-position-heading', `${headingOf({ heading: position.heading, lat: position.lat, lng: position.lng }, at)}deg`);
-            position.style.setProperty('--_map-position-radius', `${Math.hypot(edge.x - at.x, edge.y - at.y)}px`);
-            position.style.setProperty('--_map-position-pitch', `${pitch}deg`);
+            placeOn(position, {
+                '--_map-position-heading': `${headingOf({ heading: position.heading, lat: position.lat, lng: position.lng }, at)}deg`,
+                '--_map-position-pitch': `${pitch}deg`,
+                '--_map-position-radius': `${Math.hypot(edge.x - at.x, edge.y - at.y)}px`,
+                '--_map-position-x': `${at.x}px`,
+                '--_map-position-y': `${at.y}px`,
+            });
         }
         for (const [layer, found] of seen) {
             const walk = found.map(({ place, ...one }) => ({ ...one, ...project(place) }));
@@ -865,8 +886,12 @@ export const connectMap = (frame, driver, options = {}) => {
             frame.removeEventListener('pointerdown', handleFanDown);
             frame.removeEventListener('click', handleFanPress);
             for (const marker of markers()) {
-                marker.style.removeProperty('--_map-marker-x');
-                marker.style.removeProperty('--_map-marker-y');
+                placeOn(marker, {
+                    '--_map-marker-leg': undefined,
+                    '--_map-marker-leg-angle': undefined,
+                    '--_map-marker-x': undefined,
+                    '--_map-marker-y': undefined,
+                });
                 if (marker.gatheredBy !== undefined) {
                     marker.gatheredBy = undefined;
                 }
@@ -882,16 +907,12 @@ export const connectMap = (frame, driver, options = {}) => {
                 if (marker.side === 'start') {
                     marker.side = 'end';
                 }
-                marker.style.removeProperty('--_map-marker-leg');
-                marker.style.removeProperty('--_map-marker-leg-angle');
             }
             for (const layer of seen.keys()) {
                 layer.walk = [];
             }
             for (const position of positions()) {
-                for (const name of ['heading', 'pitch', 'radius', 'x', 'y']) {
-                    position.style.removeProperty(`--_map-position-${name}`);
-                }
+                placeOn(position, UNPLACED_POSITION);
             }
             frame.removeEventListener(HelixMapPanEvent.eventName, handlePan);
             frame.removeEventListener(HelixMapZoomEvent.eventName, handleZoom);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-map",
   "description": "Connects the Helix Map frame to a map renderer: MapLibre, Leaflet, or a driver of your own.",
-  "version": "0.110.5",
+  "version": "0.110.6",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -43,14 +43,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.110.5",
-    "@fusion.dev/helix-icons": "0.110.5",
+    "@fusion.dev/helix-core": "0.110.6",
+    "@fusion.dev/helix-icons": "0.110.6",
     "@mapbox/vector-tile": "^3.0.0",
     "pbf": "^5.1.2"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.110.5",
-    "@fusion.dev/helix-testing": "0.110.5",
+    "@fusion.dev/helix-headless": "0.110.6",
+    "@fusion.dev/helix-testing": "0.110.6",
     "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "@types/bun": "^1.3.0",
     "@types/leaflet": "^1.9.20",