@fusion.dev/helix-map 0.110.5 → 0.111.0

package/dist/connect-map/connect-map.d.ts

@@ -249,7 +249,12 @@ export interface MapLayerSpec {
     points: MapPlace[];
 }
 /**
- * The stretch of the world some places cover, and their middle.
+ * The stretch of the world some places cover, and their middle, with at least
+ * `least` degrees either side where they cover less than that.
+ *
+ * **No least reach for a cluster that was pressed**, which is framed to come
+ * apart: widened to half a kilometer, a cluster of places a street apart was
+ * framed as far out as it already was, and pressing it never opened it.
  *
  * **One pass rather than `Math.max(...lats)`**, which spreads every place into
  * an argument list and throws past about 65,000 of them in Safari: a points
@@ -261,7 +266,7 @@ export interface MapLayerSpec {
  * to the globe, and their middle landed at 0. The bounds may run past 180 as
  * a result, which both renderers draw.
  */
-export declare const reachOf: (places: readonly MapPlace[]) => {
+export declare const reachOf: (places: readonly MapPlace[], least?: number) => {
     bounds: MapBounds;
     middle: MapPlace;
 };

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

@@ -27,9 +27,30 @@ 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) => {
+export const reachOf = (places, least = 0) => {
     const first = places[0]?.lng ?? 0;
     let north = -90;
     let south = 90;
@@ -48,11 +69,11 @@ export const reachOf = (places) => {
     }
     const count = Math.max(places.length, 1);
     const across = ((lngs / count + 540) % 360) - 180;
-    if (north - south < LEAST_REACH && east - west < LEAST_REACH) {
-        north += LEAST_REACH;
-        south -= LEAST_REACH;
-        east += LEAST_REACH;
-        west -= LEAST_REACH;
+    if (north - south < least && east - west < least) {
+        north += least;
+        south -= least;
+        east += least;
+        west -= least;
     }
     return {
         bounds: { northEast: { lat: north, lng: east }, southWest: { lat: south, lng: west } },
@@ -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);
@@ -931,7 +952,7 @@ export const connectMap = (frame, driver, options = {}) => {
             if (places.length === 0) {
                 return;
             }
-            driver.fit(reachOf(places).bounds, options.padding ?? 48, options.animate === false ? null : motionOf(frame, 'travel'));
+            driver.fit(reachOf(places, LEAST_REACH).bounds, options.padding ?? 48, options.animate === false ? null : motionOf(frame, 'travel'));
         },
     };
 };

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.111.0",
   "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.111.0",
+    "@fusion.dev/helix-icons": "0.111.0",
     "@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.111.0",
+    "@fusion.dev/helix-testing": "0.111.0",
     "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "@types/bun": "^1.3.0",
     "@types/leaflet": "^1.9.20",