@fusion.dev/helix-map 0.115.0 → 0.117.0

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

@@ -42,6 +42,15 @@ export interface MapDriver {
      * `:state(ready)`.
      */
     ready?(done: () => void): () => void;
+    /**
+     * Which gestures the renderer takes from the page, as the frame's
+     * `gestures` decides. `free` is what the renderer did before it was told
+     * otherwise. `cooperative` leaves the wheel and one finger to the page and
+     * takes the wheel with Ctrl or ⌘, and two fingers. `off` takes none, while a
+     * map waiting to be pressed has not been. The frame tells the reader what
+     * passed to the page, so hide the renderer's own message where it has one.
+     */
+    gestures?(mode: 'cooperative' | 'free' | 'off'): void;
     /**
      * The element the renderer made focusable, which the connector takes out of
      * the tab order while connected so the frame's region is the one stop.

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

@@ -792,8 +792,21 @@ export const connectMap = (frame, driver, options = {}) => {
             queueMicrotask(flush);
         }
     };
+    let gestured = 'free';
+    const tellGestures = () => {
+        const mode = frame.gestureMode ?? 'free';
+        if (mode !== gestured) {
+            gestured = mode;
+            driver.gestures?.(mode);
+        }
+    };
+    tellGestures();
     const handlePartChange = (event) => {
         const { kind } = event.detail;
+        if (kind === 'gestures') {
+            tellGestures();
+            return;
+        }
         if (kind === 'menu') {
             drawPreviews();
             return;
@@ -905,6 +918,9 @@ export const connectMap = (frame, driver, options = {}) => {
             clearTimeout(looking);
             stopWaiting?.();
             frame.drawn?.(false);
+            if (gestured !== 'free') {
+                driver.gestures?.('free');
+            }
             stopTheming?.();
             styled.disconnect();
             children.disconnect();

package/dist/leaflet/leaflet-driver.d.ts

@@ -21,6 +21,12 @@ export interface LeafletAttribution {
     };
     remove(): unknown;
 }
+/** One of Leaflet's gesture handlers, as far as the driver switches it. */
+export interface LeafletHandler {
+    disable(): unknown;
+    enable(): unknown;
+    enabled(): boolean;
+}
 /**
  * The part of a Leaflet `Map` the driver uses, so this package imports no
  * renderer and a page brings whichever version it has.
@@ -58,6 +64,22 @@ export interface LeafletMap {
     } | undefined;
     /** How far the view is zoomed in. */
     getZoom?(): number;
+    /** The wheel's zoom, one of the handlers a frame's `gestures` switches. */
+    scrollWheelZoom?: LeafletHandler | undefined;
+    /** Dragging the map, by a mouse or one finger. */
+    dragging?: LeafletHandler | undefined;
+    /** Two fingers zooming the map. */
+    touchZoom?: LeafletHandler | undefined;
+    /** The place under a pointer, which a zoom with the wheel is made round. */
+    mouseEventToLatLng?(event: MouseEvent): {
+        lat: number;
+        lng: number;
+    };
+    /** Zooms keeping a place where it is on screen. */
+    setZoomAround?(latlng: {
+        lat: number;
+        lng: number;
+    }, zoom: number): unknown;
     zoomIn(delta?: number, options?: {
         animate?: boolean;
     }): unknown;

package/dist/leaflet/leaflet-driver.js

@@ -1,4 +1,5 @@
 const animation = (motion) => motion ? { animate: true, duration: motion.duration / 1000 } : { animate: false };
+const gestureState = new WeakMap();
 export const leafletDriver = (map, shapes) => ({
     credits(changed) {
         const control = map.attributionControl;
@@ -38,6 +39,53 @@ export const leafletDriver = (map, shapes) => ({
         });
     },
     focusTarget: () => map.getContainer(),
+    gestures: (mode) => {
+        const handlers = { drag: map.dragging, scroll: map.scrollWheelZoom, touch: map.touchZoom };
+        const state = gestureState.get(map) ?? {
+            had: {
+                drag: handlers.drag?.enabled() ?? false,
+                scroll: handlers.scroll?.enabled() ?? false,
+                touch: handlers.touch?.enabled() ?? false,
+            },
+        };
+        gestureState.set(map, state);
+        const finger = typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches;
+        const want = mode === 'free'
+            ? state.had
+            : mode === 'cooperative'
+                ? { drag: !finger, scroll: false, touch: true }
+                : { drag: false, scroll: false, touch: false };
+        for (const name of ['drag', 'scroll', 'touch']) {
+            const handler = handlers[name];
+            if (handler && handler.enabled() !== want[name]) {
+                if (want[name]) {
+                    handler.enable();
+                }
+                else {
+                    handler.disable();
+                }
+            }
+        }
+        const box = map.getContainer();
+        if (state.wheel) {
+            box.removeEventListener('wheel', state.wheel);
+            state.wheel = undefined;
+        }
+        if (mode === 'cooperative' && map.mouseEventToLatLng && map.setZoomAround && map.getZoom) {
+            state.wheel = (event) => {
+                if (!(event.ctrlKey || event.metaKey)) {
+                    return;
+                }
+                event.preventDefault();
+                const at = map.mouseEventToLatLng?.(event);
+                const zoom = map.getZoom?.();
+                if (at && zoom !== undefined) {
+                    map.setZoomAround?.(at, zoom - Math.sign(event.deltaY) * 0.5);
+                }
+            };
+            box.addEventListener('wheel', state.wheel, { passive: false });
+        }
+    },
     onView: (moved) => {
         map.on('move zoom resize', moved);
         return () => {

package/dist/maplibre/maplibre-driver.d.ts

@@ -105,6 +105,12 @@ interface MapLibreAnimation {
     duration?: number;
     easing?: (t: number) => number;
 }
+/** One of MapLibre's gesture handlers, as far as the driver switches it. */
+export interface MapLibreHandler {
+    disable(): unknown;
+    enable(): unknown;
+    isEnabled(): boolean;
+}
 /**
  * The part of a MapLibre `Map` the driver uses, so this package imports no
  * renderer and a page brings whichever version it has.
@@ -123,6 +129,14 @@ export interface MapLibreMap {
     isSourceLoaded?(id: string): boolean;
     /** The canvas, which MapLibre makes focusable. */
     getCanvas(): HTMLElement;
+    /** The wheel's zoom, one of the handlers a frame's `gestures` switches. */
+    scrollZoom?: MapLibreHandler;
+    /** Dragging the map, by a mouse or one finger. */
+    dragPan?: MapLibreHandler;
+    /** Two fingers zooming and turning the map. */
+    touchZoomRotate?: MapLibreHandler;
+    /** MapLibre's own cooperative gestures: Ctrl or ⌘ with the wheel, and two fingers. */
+    cooperativeGestures?: MapLibreHandler;
     /** The middle of the view, which a map-type picture is drawn around. */
     getCenter?(): {
         lat: number;

package/dist/maplibre/maplibre-driver.js

@@ -287,6 +287,7 @@ const answerImages = (holder) => {
     return () => holder.off?.('styleimagemissing', missing);
 };
 const PICTURE = { height: 90, width: 120 };
+const originalGestures = new WeakMap();
 export const mapLibreDriver = (map) => ({
     bearing: () => map.getBearing(),
     behind: ({ lat, lng }) => (map.transform ?? map._camera?.transform)?.isLocationOccluded?.({ lat, lng }) === true,
@@ -323,6 +324,38 @@ export const mapLibreDriver = (map) => ({
         ], { ...animation(motion), padding });
     },
     focusTarget: () => map.getCanvas(),
+    gestures: (mode) => {
+        const handlers = {
+            cooperative: map.cooperativeGestures,
+            drag: map.dragPan,
+            scroll: map.scrollZoom,
+            touch: map.touchZoomRotate,
+        };
+        const had = (originalGestures.get(map) ??
+            Object.fromEntries(Object.entries(handlers).map(([name, handler]) => [name, handler?.isEnabled() ?? false])));
+        originalGestures.set(map, had);
+        const want = mode === 'free'
+            ? had
+            : mode === 'cooperative'
+                ? { cooperative: true, drag: true, scroll: true, touch: true }
+                : { cooperative: false, drag: false, scroll: false, touch: false };
+        for (const [name, handler] of Object.entries(handlers)) {
+            if (handler && handler.isEnabled() !== want[name]) {
+                if (want[name]) {
+                    handler.enable();
+                }
+                else {
+                    handler.disable();
+                }
+            }
+        }
+        const screen = map
+            .getContainer()
+            .querySelector('.maplibregl-cooperative-gesture-screen');
+        if (screen) {
+            screen.style.display = 'none';
+        }
+    },
     labels: (shown) => {
         const heard = bared.has(map);
         bared.set(map, !shown);

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.115.0",
+  "version": "0.117.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.115.0",
-    "@fusion.dev/helix-icons": "0.115.0",
+    "@fusion.dev/helix-core": "0.117.0",
+    "@fusion.dev/helix-icons": "0.117.0",
     "@mapbox/vector-tile": "^3.0.0",
     "pbf": "^5.1.2"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.115.0",
-    "@fusion.dev/helix-testing": "0.115.0",
+    "@fusion.dev/helix-headless": "0.117.0",
+    "@fusion.dev/helix-testing": "0.117.0",
     "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "@types/bun": "^1.3.0",
     "@types/leaflet": "^1.9.20",