@fusion.dev/helix-map 0.113.0 → 0.114.0

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

@@ -33,9 +33,13 @@ export interface MapDriver {
         stop(): void;
     };
     /**
-     * Calls `done` once the renderer has drawn its view with its tiles, and
-     * returns what stops the waiting. What takes a snapshot drawn on the server
-     * away; without it, the snapshot stays under the renderer's drawing.
+     * Calls `done` once the renderer has drawn its view whole, with every tile
+     * it needs and the ground where there is terrain, and returns what stops the
+     * waiting. Leave the frame's own shapes out, since a route that animates is
+     * redrawn every frame and would never count as drawn. What takes a snapshot
+     * drawn on the server away and sends the frame's `helix-map-ready`; without
+     * it, the snapshot stays under the renderer's drawing and the frame is never
+     * `:state(ready)`.
      */
     ready?(done: () => void): () => void;
     /**

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

@@ -726,23 +726,23 @@ export const connectMap = (frame, driver, options = {}) => {
         snapshot.style.display = 'none';
     };
     const snapshots = [...frame.querySelectorAll(':scope > [data-helix-map-snapshot]')];
-    const stopWaiting = snapshots.length > 0
-        ? driver.ready?.(() => {
-            const motion = motionOf(frame, 'step');
-            for (const snapshot of snapshots) {
-                if (!motion || typeof snapshot.animate !== 'function') {
-                    away(snapshot);
-                    continue;
-                }
-                snapshot
-                    .animate([{ opacity: 1 }, { opacity: 0 }], {
-                    duration: motion.duration,
-                    easing: `linear(${Array.from({ length: 13 }, (_, step) => motion.easing(step / 12).toFixed(3)).join(', ')})`,
-                })
-                    .finished.then(() => away(snapshot), () => away(snapshot));
+    const stopWaiting = driver.ready?.(() => {
+        place();
+        frame.drawn?.();
+        const motion = motionOf(frame, 'step');
+        for (const snapshot of snapshots) {
+            if (!motion || typeof snapshot.animate !== 'function') {
+                away(snapshot);
+                continue;
             }
-        })
-        : undefined;
+            snapshot
+                .animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: motion.duration,
+                easing: `linear(${Array.from({ length: 13 }, (_, step) => motion.easing(step / 12).toFixed(3)).join(', ')})`,
+            })
+                .finished.then(() => away(snapshot), () => away(snapshot));
+        }
+    });
     let live = true;
     let placing = false;
     let drawing = false;
@@ -876,6 +876,7 @@ export const connectMap = (frame, driver, options = {}) => {
             stopViewing?.();
             clearTimeout(looking);
             stopWaiting?.();
+            frame.drawn?.(false);
             stopTheming?.();
             styled.disconnect();
             children.disconnect();

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

@@ -101,6 +101,11 @@ export interface MapLibreMap {
     loaded?(): boolean;
     /** Whether the style has loaded: `true`, and anything else is not yet. MapLibre 6 types it loosely. */
     isStyleLoaded?(): unknown;
+    /**
+     * Whether one source has every tile the view needs, once the view has asked
+     * for them; a source no shown layer draws from has nothing to wait for.
+     */
+    isSourceLoaded?(id: string): boolean;
     /** The canvas, which MapLibre makes focusable. */
     getCanvas(): HTMLElement;
     /** The middle of the view, which a map-type picture is drawn around. */

package/dist/maplibre/maplibre-driver.js

@@ -1056,30 +1056,68 @@ export const mapLibreDriver = (map) => ({
         return { x, y };
     },
     ready: (done) => {
-        if (map.loaded?.() && map.areTilesLoaded?.()) {
-            done();
-            return () => undefined;
+        if (!map.isSourceLoaded) {
+            if (map.loaded?.() && map.areTilesLoaded?.()) {
+                done();
+                return () => undefined;
+            }
+            let finished = false;
+            const finish = () => {
+                if (!finished) {
+                    finished = true;
+                    map.off('load', finish);
+                    map.off('render', drawn);
+                    done();
+                }
+            };
+            const drawn = () => {
+                if (map.isStyleLoaded?.() === true && map.areTilesLoaded?.() === true) {
+                    finish();
+                }
+            };
+            map.on('load', finish);
+            map.on('render', drawn);
+            return () => {
+                map.off('load', finish);
+                map.off('render', drawn);
+            };
         }
-        let finished = false;
-        const finish = () => {
-            if (finished) {
-                return;
+        let tiled;
+        const read = () => {
+            const sources = map.getStyle()?.sources;
+            tiled = sources
+                ? Object.entries(sources)
+                    .filter(([, source]) => source.type !== 'geojson')
+                    .map(([id]) => id)
+                : undefined;
+        };
+        const whole = () => {
+            if (tiled === undefined) {
+                read();
             }
-            finished = true;
-            stop();
+            return tiled?.every((id) => map.isSourceLoaded?.(id) === true) === true;
+        };
+        if (whole()) {
             done();
+            return () => undefined;
+        }
+        const restyled = () => {
+            tiled = undefined;
         };
-        const drawn = () => {
-            if (map.isStyleLoaded?.() === true && map.areTilesLoaded?.() === true) {
-                finish();
+        const heard = () => {
+            if (whole()) {
+                stop();
+                done();
             }
         };
         const stop = () => {
-            map.off('load', finish);
-            map.off('render', drawn);
+            map.off('styledata', restyled);
+            map.off('render', heard);
+            map.off('idle', heard);
         };
-        map.on('load', finish);
-        map.on('render', drawn);
+        map.on('styledata', restyled);
+        map.on('render', heard);
+        map.on('idle', heard);
         return stop;
     },
     rotate: ({ by, to }, motion) => {

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