@fusion.dev/helix-map 0.110.3 → 0.110.4

package/dist/snapshot/camera.js

@@ -29,7 +29,8 @@ export const cameraOf = (view) => {
         },
         toWorld: ([sx, sy]) => {
             const x = sx - view.width / 2;
-            const y = sy - view.height / 2;
+            const horizon = tilt > 0 ? -distance / Math.tan(tilt) : -Infinity;
+            const y = Math.max(sy - view.height / 2, horizon * 0.95);
             const toward = (y * distance) / (distance * Math.cos(tilt) + y * Math.sin(tilt));
             const across = (x * (distance - toward * Math.sin(tilt))) / distance;
             return [

package/dist/snapshot/snapshot.d.ts

@@ -47,6 +47,8 @@ export declare const widthAt: ([[z0, w0], [z1, w1]]: readonly [readonly [number,
 export interface SnapshotOptions {
     /** The fetch the tiles are asked for with, where a server has its own, such as one that caches. */
     fetch?: typeof fetch | undefined;
+    /** How long each request may take, in milliseconds, before the snapshot is given up. 3000 by default. */
+    timeout?: number | undefined;
     /** A TileJSON URL for vector tiles in the OpenMapTiles schema: the one given to `mapLibreStyle`. OpenFreeMap's by default. */
     tiles?: string | undefined;
 }
@@ -68,7 +70,11 @@ export interface SnapshotOptions {
  * toward a token in OKLab, so it is drawn in whichever theme the page is in,
  * light or dark, and changes with it.
  *
- * Resolves to an empty string where the tiles cannot be read, which a page
- * renders as nothing.
+ * **Whole or nothing.** Resolves to an empty string where any tile the view
+ * needs cannot be read in time, or the view is not numbers, which a page
+ * renders as nothing and the renderer then draws. A snapshot with a tile
+ * missing looks finished and is not, and one that waited on a slow server
+ * held the page: each request is given `timeout` milliseconds. A tile the
+ * server says it does not have, a 404, is drawn empty, as the sea is.
  */
-export declare const mapSnapshot: (view: MapView, options?: SnapshotOptions) => Promise<string>;
+export declare const mapSnapshot: (asked: MapView, options?: SnapshotOptions) => Promise<string>;

package/dist/snapshot/snapshot.js

@@ -152,8 +152,33 @@ const simplified = (points) => {
 const OPENFREEMAP = 'https://tiles.openfreemap.org/planet';
 const MOST_TILES = 40;
 const MARGIN = 16;
-export const mapSnapshot = async (view, options = {}) => {
-    const get = options.fetch ?? fetch;
+export const mapSnapshot = async (asked, options = {}) => {
+    const view = {
+        bearing: Number(asked.bearing ?? 0),
+        center: { lat: Number(asked.center?.lat), lng: Number(asked.center?.lng) },
+        height: Math.round(Number(asked.height)),
+        pitch: Number(asked.pitch ?? 0),
+        width: Math.round(Number(asked.width)),
+        zoom: Number(asked.zoom),
+    };
+    if (![view.bearing, view.center.lat, view.center.lng, view.pitch, view.zoom].every(Number.isFinite) ||
+        !(view.width > 0 && view.height > 0)) {
+        return '';
+    }
+    const wait = options.timeout ?? 3000;
+    const get = (url) => {
+        const control = new AbortController();
+        let timer;
+        return Promise.race([
+            (options.fetch ?? fetch)(url, { signal: control.signal }),
+            new Promise((_, refuse) => {
+                timer = setTimeout(() => {
+                    control.abort();
+                    refuse(new Error(`${url} took longer than ${wait} ms`));
+                }, wait);
+            }),
+        ]).finally(() => clearTimeout(timer));
+    };
     const tiles = await get(options.tiles ?? OPENFREEMAP)
         .then((response) => (response.ok ? response.json() : undefined))
         .catch(() => undefined);
@@ -179,7 +204,7 @@ export const mapSnapshot = async (view, options = {}) => {
         const wanted = [];
         for (let x = Math.min(...xs); x <= Math.max(...xs); x++) {
             for (let y = Math.max(0, Math.min(...ys)); y <= Math.min(count - 1, Math.max(...ys)); y++) {
-                wanted.push([((x % count) + count) % count, y]);
+                wanted.push([x, y]);
             }
         }
         return wanted;
@@ -235,18 +260,32 @@ export const mapSnapshot = async (view, options = {}) => {
         }
         return path;
     };
+    let whole = true;
+    const count = 2 ** depth;
     await Promise.all(wanted.map(async (at) => {
         const url = template
             .replace('{z}', String(depth))
-            .replace('{x}', String(at[0]))
+            .replace('{x}', String(((at[0] % count) + count) % count))
             .replace('{y}', String(at[1]));
         const bytes = await get(url)
-            .then((response) => (response.ok ? response.arrayBuffer() : undefined))
+            .then((response) => response.ok
+            ? response.arrayBuffer()
+            : response.status === 404
+                ? new ArrayBuffer(0)
+                : undefined)
             .catch(() => undefined);
         if (!bytes) {
+            whole = false;
             return;
         }
-        const tile = new VectorTile(new PbfReader(new Uint8Array(bytes)));
+        try {
+            drawTile(new VectorTile(new PbfReader(new Uint8Array(bytes))), at);
+        }
+        catch {
+            whole = false;
+        }
+    }));
+    function drawTile(tile, at) {
         for (const layer of shown) {
             const source = tile.layers[layer.source];
             if (!source) {
@@ -267,7 +306,10 @@ export const mapSnapshot = async (view, options = {}) => {
                 }
             }
         }
-    }));
+    }
+    if (!whole) {
+        return '';
+    }
     const body = shown
         .map((layer) => {
         const paths = drawn.get(layer.id) ?? [];
@@ -276,7 +318,8 @@ export const mapSnapshot = async (view, options = {}) => {
         }
         const color = colorOf(layer);
         return layer.kind === 'fill'
-            ? `<path fill-rule="evenodd" style="fill:${color}" d="${paths.join('')}"/>`
+            ?
+                `<path style="fill:${color}" d="${paths.join('')}"/>`
             : `<path style="fill:none;stroke:${color};stroke-width:${+widthAt(layer.width ?? [
                 [0, 1],
                 [1, 1],

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