@expofp/offline 0.0.0-experimental.2d6c681

package/dist/lib/generate-offline-map-data.js

@@ -0,0 +1,343 @@
+import { Box, projectLocalToGps } from '@expofp/geometry';
+import debug from 'debug';
+import { resolveMapTheme } from './map-theme.js';
+import { createOfflineMapStyle, OFFLINE_GLYPH_FONTSTACK } from './offline-map-style.js';
+const log = debug('efp:offline:generate-offline-map-data');
+const MAPS_BASE_PATH = 'maps/';
+const MAP_STYLE_PATH = `${MAPS_BASE_PATH}style.json`;
+const MAP_PMTILES_PATH = `${MAPS_BASE_PATH}basemap.pmtiles`;
+const MAP_PMTILES_STYLE_URL = './basemap.pmtiles';
+// Pannable-bounds padding for the offline tile region — sized off the viewport at
+// max zoom-out (not the canvas span), so a small area map is extended enough to be
+// seen fully when zoomed out, while a large one only gets a rotation margin. The
+// online runtime pans freely (no maxBounds), so this only bounds how far out
+// offline tiles are pre-generated; a safety factor keeps that region comfortably
+// covered across screen sizes and out to the panned edges.
+const MAP_MAX_ZOOM_OUT = 14;
+const MERCATOR_M_PER_PX_Z0 = 78271.5168;
+const M_PER_DEG_LAT = 110540;
+const OFFLINE_REF_VIEWPORT_W = 3840;
+const OFFLINE_REF_VIEWPORT_H = 2160;
+const MAP_BOUNDS_MIN_PADDING_FRACTION = 0.05;
+const OFFLINE_PADDING_SAFETY = 1.5;
+const DEFAULT_MAP_SOURCE_BASE = 'https://build.protomaps.com';
+const DEFAULT_MAP_SOURCE_LOOKBACK_DAYS = 7;
+// Protomaps ships one sprite per palette; the icons are baked light-on-dark or
+// dark-on-light, so the sprite has to follow the theme. (The `white` set this
+// replaced was white-on-white against the light basemap.)
+const PROTOMAPS_SPRITE_BASE = 'https://protomaps.github.io/basemaps-assets/sprites/v4';
+const PROTOMAPS_FONT_BASE = 'https://protomaps.github.io/basemaps-assets/fonts';
+const MAP_GLYPHS_STYLE_URL = './fonts/{fontstack}/{range}.pbf';
+const GLYPH_RANGES = createGlyphRanges(0, 8447);
+const tempDirExitCleanups = new Map();
+export function generateOfflineMapData(options) {
+    const maplibre = {
+        styleUrl: `./${MAP_STYLE_PATH}`,
+        offline: true,
+    };
+    // The drawing decides the palette and the drawing is frozen inside the
+    // archive, so the theme is resolved once here and baked into the style —
+    // the runtime has no basis to re-decide it offline.
+    const theme = deriveMapTheme(options.fpSvgContext);
+    log('Resolved offline basemap theme', theme);
+    async function* files() {
+        const bbox = derivePaddedVenueBbox(options.fpSvgContext);
+        log('Extracting PMTiles for bbox', bbox.join(','));
+        const pmtilesFile = await extractPmtiles(options.mapSource, bbox, options.signal);
+        try {
+            yield {
+                url: pmtilesFile.url,
+                targetFilePath: MAP_PMTILES_PATH,
+            };
+            yield {
+                text: JSON.stringify(createOfflineMapStyle({
+                    theme,
+                    tiles: MAP_PMTILES_STYLE_URL,
+                    sprite: `./sprites/${spriteName(theme)}`,
+                    glyphs: MAP_GLYPHS_STYLE_URL,
+                }), null, 2),
+                targetFilePath: MAP_STYLE_PATH,
+            };
+            yield* getSpriteAssets(theme);
+            yield* getGlyphAssets();
+        }
+        finally {
+            await cleanupTempDir(pmtilesFile.tempDir);
+        }
+    }
+    return { files: files(), maplibre };
+}
+export async function validateOfflineMapOptions(options, signal) {
+    let mapSource = options.mapSource;
+    if (!mapSource) {
+        console.log('Looking for latest Protomaps map source...');
+        mapSource = await resolveDefaultMapSource(signal);
+    }
+    await assertValidMapSource(mapSource);
+    console.log(`Using map source ${mapSource}`);
+    await assertPmtilesCliAvailable(signal);
+    return { ...options, mapSource };
+}
+/** An offline map applies only when the (already-loaded) drawing is geo-referenced. */
+export async function inferOfflineMapOptions(fpSvgContext, options, signal) {
+    const fpGeo = fpSvgContext.__fpGeo;
+    if (!fpGeo?.properties?.config)
+        return undefined;
+    return {
+        ...(await validateOfflineMapOptions(options ?? {}, signal)),
+        fpSvgContext,
+    };
+}
+async function resolveDefaultMapSource(signal) {
+    for (let dayOffset = 0; dayOffset < DEFAULT_MAP_SOURCE_LOOKBACK_DAYS; dayOffset++) {
+        const source = createDefaultMapSource(dayOffset);
+        const response = await fetch(source, { method: 'HEAD', signal });
+        if (response.ok)
+            return source;
+        if (response.status !== 404) {
+            throw new Error(`Unable to check default offline map source ${source}: HTTP ${response.status}`);
+        }
+    }
+    throw new Error(`Could not find a default Protomaps PMTiles build from the last ${DEFAULT_MAP_SOURCE_LOOKBACK_DAYS} days. Specify --debug-map-source explicitly.`);
+}
+function createDefaultMapSource(dayOffset) {
+    const date = new Date();
+    date.setUTCDate(date.getUTCDate() - dayOffset);
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(date.getUTCDate()).padStart(2, '0');
+    return `${DEFAULT_MAP_SOURCE_BASE}/${year}${month}${day}.pmtiles`;
+}
+function derivePaddedVenueBbox(ctx) {
+    const fpGeo = ctx.__fpGeo;
+    const config = fpGeo?.properties?.config;
+    if (!config) {
+        throw new Error('Offline map generation requires fpGeo.properties.config.');
+    }
+    const mapBounds = deriveMapBoundsRect(ctx);
+    const [anchorA, anchorB] = geoAnchors(config);
+    const corners = [
+        [mapBounds.min.x, mapBounds.min.y],
+        [mapBounds.max.x, mapBounds.min.y],
+        [mapBounds.max.x, mapBounds.max.y],
+        [mapBounds.min.x, mapBounds.max.y],
+    ].map(([x, y]) => {
+        const { lat, lng } = projectLocalToGps({ x, y }, anchorA, anchorB);
+        return [lng, lat];
+    });
+    if (!corners.every(([lng, lat]) => Number.isFinite(lng) && Number.isFinite(lat))) {
+        throw new Error('Offline map generation produced invalid map GPS bounds.');
+    }
+    const lngs = corners.map(([lng]) => lng);
+    const lats = corners.map(([, lat]) => lat);
+    const minLng = Math.min(...lngs);
+    const maxLng = Math.max(...lngs);
+    const minLat = Math.min(...lats);
+    const maxLat = Math.max(...lats);
+    const centerLat = (minLat + maxLat) / 2;
+    const cosLat = Math.max(0.01, Math.cos((centerLat * Math.PI) / 180));
+    const mPerDegLng = 111320 * cosLat;
+    // Work in metres (Mercator is isotropic in metres). Content span = canvas AABB.
+    const contentW = (maxLng - minLng) * mPerDegLng;
+    const contentH = (maxLat - minLat) * M_PER_DEG_LAT;
+    // Viewport span at max zoom-out, for a generous reference screen.
+    const mPerPx = (MERCATOR_M_PER_PX_Z0 * cosLat) / 2 ** MAP_MAX_ZOOM_OUT;
+    const viewW = OFFLINE_REF_VIEWPORT_W * mPerPx;
+    const viewH = OFFLINE_REF_VIEWPORT_H * mPerPx;
+    // That viewport rotated by the view bearing has a larger axis-aligned footprint.
+    const bearing = config.bearing ?? 0;
+    const c = Math.abs(Math.cos((bearing * Math.PI) / 180));
+    const s = Math.abs(Math.sin((bearing * Math.PI) / 180));
+    const viewRotW = viewW * c + viewH * s;
+    const viewRotH = viewW * s + viewH * c;
+    // Same rule as online (extend small / constant for large / floor), times safety.
+    const padW = Math.max((viewRotW - contentW) / 2, (viewRotW - viewW) / 2, viewW * MAP_BOUNDS_MIN_PADDING_FRACTION) * OFFLINE_PADDING_SAFETY;
+    const padH = Math.max((viewRotH - contentH) / 2, (viewRotH - viewH) / 2, viewH * MAP_BOUNDS_MIN_PADDING_FRACTION) * OFFLINE_PADDING_SAFETY;
+    const lngPadding = padW / mPerDegLng;
+    const latPadding = padH / M_PER_DEG_LAT;
+    return [minLng - lngPadding, minLat - latPadding, maxLng + lngPadding, maxLat + latPadding];
+}
+// The offline map extent — the whole SVG canvas, NOT the fit box: the full
+// viewBox unioned with the explicit authored area (`__viewbox` / `rect#VIEWBOX`).
+// Basing this on the
+// authored area alone would, for a small venue `__viewbox`, preload only the
+// venue's tiles and leave the rest of the pannable area blank offline.
+function deriveMapBoundsRect(ctx) {
+    const fpSvg = ctx.__fp;
+    const viewBox = typeof fpSvg === 'string' ? getSvgViewBox(fpSvg) : null;
+    const explicit = deriveExplicitArea(ctx, fpSvg);
+    if (viewBox && explicit)
+        return Box.fromUnion(viewBox, explicit);
+    if (viewBox)
+        return viewBox;
+    if (explicit)
+        return explicit;
+    throw new Error('Offline map generation could not derive the map bounds (no SVG viewBox or VIEWBOX rect).');
+}
+// The explicit author-drawn area, if any: the `__viewbox` global or a
+// `<rect id="VIEWBOX">` element. Null when neither is present.
+function deriveExplicitArea(ctx, fpSvg) {
+    const viewboxObj = ctx.__viewbox;
+    if (viewboxObj) {
+        return new Box(viewboxObj.x, viewboxObj.y, viewboxObj.width, viewboxObj.height);
+    }
+    if (typeof fpSvg === 'string') {
+        const viewboxRect = getSvgRectById(fpSvg, 'VIEWBOX');
+        if (viewboxRect)
+            return viewboxRect;
+    }
+    return null;
+}
+function getSvgViewBox(svg) {
+    const match = /\bviewBox\s*=\s*["']([^"']+)["']/i.exec(svg);
+    if (!match)
+        return null;
+    const [x, y, w, h] = match[1]
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    if (![x, y, w, h].every(Number.isFinite))
+        return null;
+    return new Box(x, y, w, h);
+}
+function getSvgRectById(svg, id) {
+    const rectMatch = new RegExp(`<rect\\b(?=[^>]*\\bid=["']${id}["'])[^>]*/?>`, 'i').exec(svg);
+    if (!rectMatch)
+        return null;
+    const rect = rectMatch[0];
+    const x = Number(getSvgAttribute(rect, 'x') ?? 0);
+    const y = Number(getSvgAttribute(rect, 'y') ?? 0);
+    const w = Number(getSvgAttribute(rect, 'width'));
+    const h = Number(getSvgAttribute(rect, 'height'));
+    if (![x, y, w, h].every(Number.isFinite))
+        return null;
+    return new Box(x, y, w, h);
+}
+function getSvgAttribute(element, name) {
+    return new RegExp(`\\b${name}\\s*=\\s*["']([^"']+)["']`, 'i').exec(element)?.[1];
+}
+async function assertPmtilesCliAvailable(signal) {
+    try {
+        await runPmtiles(['version'], signal);
+    }
+    catch (error) {
+        if (signal?.aborted)
+            throw error;
+        throw new Error(`Offline map extraction requires the pmtiles CLI. Install it with "brew install pmtiles" and try again.`, { cause: error });
+    }
+}
+async function assertValidMapSource(mapSource) {
+    const source = mapSource.trim();
+    if (!source || source !== mapSource || source.startsWith('-')) {
+        throw new Error('Offline map --debug-map-source must be an http(s)/file URL or absolute path.');
+    }
+    const path = await import('node:path');
+    if (path.isAbsolute(source) || path.win32.isAbsolute(source))
+        return;
+    try {
+        const url = new URL(source);
+        if (url.protocol === 'https:' || url.protocol === 'http:' || url.protocol === 'file:')
+            return;
+    }
+    catch {
+        // Fall through to the consistent validation error below.
+    }
+    throw new Error('Offline map --debug-map-source must be an http(s)/file URL or absolute path.');
+}
+async function extractPmtiles(mapSource, bbox, signal) {
+    const { mkdtemp } = await import('node:fs/promises');
+    const { tmpdir } = await import('node:os');
+    const path = await import('node:path');
+    const { pathToFileURL } = await import('node:url');
+    throwIfAborted(signal);
+    const tempDir = await mkdtemp(path.join(tmpdir(), 'expofp-offline-map-'));
+    await registerTempDirExitCleanup(tempDir);
+    const targetPath = path.join(tempDir, 'basemap.pmtiles');
+    try {
+        throwIfAborted(signal);
+        await runPmtiles(['extract', mapSource, targetPath, `--bbox=${bbox.join(',')}`], signal);
+        return { url: pathToFileURL(targetPath), tempDir };
+    }
+    catch (error) {
+        await cleanupTempDir(tempDir);
+        throw error;
+    }
+}
+async function cleanupTempDir(tempDir) {
+    const { rm } = await import('node:fs/promises');
+    tempDirExitCleanups.get(tempDir)?.();
+    tempDirExitCleanups.delete(tempDir);
+    await rm(tempDir, { recursive: true, force: true });
+}
+async function registerTempDirExitCleanup(tempDir) {
+    if (typeof process === 'undefined' || !process.versions?.node)
+        return;
+    const { rmSync } = await import('node:fs');
+    const cleanup = () => rmSync(tempDir, { recursive: true, force: true });
+    tempDirExitCleanups.set(tempDir, () => process.removeListener('exit', cleanup));
+    process.once('exit', cleanup);
+}
+function throwIfAborted(signal) {
+    if (!signal?.aborted)
+        return;
+    throw signal.reason instanceof Error ? signal.reason : new Error('Operation aborted.');
+}
+async function runPmtiles(args, signal) {
+    const { execFile } = await import('node:child_process');
+    await new Promise((resolvePromise, reject) => {
+        execFile('pmtiles', args, { signal }, (error, stdout, stderr) => {
+            if (stdout)
+                log(stdout.trim());
+            if (stderr)
+                log(stderr.trim());
+            if (error) {
+                // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+                reject(error);
+                return;
+            }
+            resolvePromise();
+        });
+    });
+}
+function deriveMapTheme(ctx) {
+    const fpGeo = ctx.__fpGeo;
+    const fpSettings = ctx.__fpSettings;
+    return resolveMapTheme(fpGeo?.properties?.config?.style, fpSettings?.backgroundColor);
+}
+function spriteName(theme) {
+    return `protomaps-${theme}`;
+}
+function* getSpriteAssets(theme) {
+    const source = `${PROTOMAPS_SPRITE_BASE}/${theme}`;
+    const targetBase = `${MAPS_BASE_PATH}sprites/${spriteName(theme)}`;
+    yield { url: new URL(`${source}.json`), targetFilePath: `${targetBase}.json` };
+    yield { url: new URL(`${source}.png`), targetFilePath: `${targetBase}.png` };
+    yield { url: new URL(`${source}@2x.json`), targetFilePath: `${targetBase}@2x.json` };
+    yield { url: new URL(`${source}@2x.png`), targetFilePath: `${targetBase}@2x.png` };
+}
+function* getGlyphAssets() {
+    const encodedFontstack = encodeURIComponent(OFFLINE_GLYPH_FONTSTACK);
+    for (const range of GLYPH_RANGES) {
+        yield {
+            url: new URL(`${PROTOMAPS_FONT_BASE}/${encodedFontstack}/${range}.pbf`),
+            targetFilePath: `${MAPS_BASE_PATH}fonts/${OFFLINE_GLYPH_FONTSTACK}/${range}.pbf`,
+        };
+    }
+}
+function createGlyphRanges(min, max) {
+    const ranges = [];
+    for (let start = min; start <= max; start += 256) {
+        ranges.push(`${start}-${start + 255}`);
+    }
+    return ranges;
+}
+// Builds the two-anchor affine bridge (p0 -> anchor a, p2 -> anchor b) used to
+// project the SVG-area corners into GPS. All GeoConfig parsing / SVG extraction /
+// anchor validation stays at the callsite; only the pure projection math lives in
+// @expofp/geometry's geo module.
+function geoAnchors(config) {
+    return [
+        { local: { x: config.p0.x, y: config.p0.y }, geo: { lat: config.p0.lat, lng: config.p0.lng } },
+        { local: { x: config.p2.x, y: config.p2.y }, geo: { lat: config.p2.lat, lng: config.p2.lng } },
+    ];
+}

package/dist/lib/generate-runtime-files-data.d.ts

@@ -0,0 +1,5 @@
+import { type LocalDataFetch } from './types.js';
+export declare function generateRuntimeFilesData(runtimeBaseUrl: string): AsyncGenerator<LocalDataFetch, {
+    entry: string;
+}, void>;
+//# sourceMappingURL=generate-runtime-files-data.d.ts.map

package/dist/lib/generate-runtime-files-data.js

@@ -0,0 +1,16 @@
+import { importJson } from '@expofp/utils';
+import debug from 'debug';
+const log = debug('efp:offline:generate-runtime-files-data');
+export async function* generateRuntimeFilesData(runtimeBaseUrl) {
+    const bundleJsonUrl = new URL('bundle.json', runtimeBaseUrl).href;
+    const bundleJson = await importJson(bundleJsonUrl);
+    log(`Generating runtime files from ${bundleJsonUrl}, ${bundleJson.files.length} files found`);
+    const basePath = 'runtime/';
+    for (const file of bundleJson.files) {
+        yield {
+            url: new URL(file.file, runtimeBaseUrl),
+            targetFilePath: `${basePath}${file.file}`,
+        };
+    }
+    return { entry: `./${basePath}${bundleJson.entry}` };
+}

package/dist/lib/map-theme.d.ts

@@ -0,0 +1,15 @@
+import { type MapTheme } from '@expofp/schema';
+/**
+ * The palette implied by the drawing's background color — the fallback for
+ * drawings that predate `__fpGeo.properties.config.style`.
+ *
+ * `'none'` is a real authored value and is not a parseable color, so it and
+ * anything else unparseable resolve to the light palette.
+ */
+export declare function deriveMapThemeFromBackground(backgroundColor: string | undefined): MapTheme;
+/**
+ * Resolve the basemap palette: the one the drawing declares in its geo config,
+ * else the one its background color implies.
+ */
+export declare function resolveMapTheme(drawingTheme: MapTheme | undefined, backgroundColor: string | undefined): MapTheme;
+//# sourceMappingURL=map-theme.d.ts.map

package/dist/lib/map-theme.js

@@ -0,0 +1,48 @@
+import Color from 'color';
+/**
+ * Which basemap palette a drawing is authored for.
+ *
+ * A deliberate duplicate of the floorplan's
+ * `components/Maplibre/utils/map-theme.ts`. The two must agree: online the SDK
+ * resolves the palette at runtime, offline the generator resolves it once and
+ * bakes the answer into the archived style, and a drawing must not change
+ * appearance just because it was taken offline.
+ *
+ * The background-color fallback below is on its way out; when it goes, both
+ * copies collapse to reading the declared style and this file loses its only
+ * non-trivial logic.
+ */
+/**
+ * Below this HSL lightness (0–100) a background counts as dark. Matches the
+ * floorplan's threshold — see the note there on why HSL and not WCAG luminance.
+ */
+const DARK_BACKGROUND_LIGHTNESS = 50;
+function isMapTheme(value) {
+    return value === 'light' || value === 'dark';
+}
+/**
+ * The palette implied by the drawing's background color — the fallback for
+ * drawings that predate `__fpGeo.properties.config.style`.
+ *
+ * `'none'` is a real authored value and is not a parseable color, so it and
+ * anything else unparseable resolve to the light palette.
+ */
+export function deriveMapThemeFromBackground(backgroundColor) {
+    if (!backgroundColor || backgroundColor === 'none')
+        return 'light';
+    try {
+        return Color(backgroundColor).lightness() < DARK_BACKGROUND_LIGHTNESS ? 'dark' : 'light';
+    }
+    catch {
+        return 'light';
+    }
+}
+/**
+ * Resolve the basemap palette: the one the drawing declares in its geo config,
+ * else the one its background color implies.
+ */
+export function resolveMapTheme(drawingTheme, backgroundColor) {
+    if (isMapTheme(drawingTheme))
+        return drawingTheme;
+    return deriveMapThemeFromBackground(backgroundColor);
+}

package/dist/lib/offline-map-style.d.ts

@@ -0,0 +1,51 @@
+import { type MapTheme } from '@expofp/schema';
+import { type Flavor } from '@protomaps/basemaps';
+/** The one font stack every label in {@link createOfflineMapStyle} asks for. */
+export declare const OFFLINE_GLYPH_FONTSTACK = "Noto Sans Regular";
+/**
+ * The Protomaps flavor recolored to CARTO Positron.
+ *
+ * `pois` is deliberately absent: it is optional, and leaving it out drops the
+ * colored POI icon layers entirely — the CARTO styles show no POI icons, so
+ * emitting them would be the loudest departure from the online look.
+ */
+export declare const POSITRON_FLAVOR: Flavor;
+/**
+ * The Protomaps flavor recolored to CARTO Dark Matter.
+ *
+ * Dark Matter tints no landuse at all — its parks, landcover and residential
+ * blocks are all painted the background color — so every land field here
+ * collapses onto {@link DARK_MATTER_BACKGROUND}. That is the intended look, not
+ * an omission.
+ */
+export declare const DARK_MATTER_FLAVOR: Flavor;
+export interface OfflineMapStyleOptions {
+    /** Basemap palette the drawing is authored for. */
+    theme: MapTheme;
+    /** Tile source URL, relative to the style document. */
+    tiles: string;
+    /** Sprite base URL, relative to the style document. */
+    sprite: string;
+    /** Glyph template URL, relative to the style document. */
+    glyphs: string;
+}
+/**
+ * Build the offline style document.
+ *
+ * URLs stay relative to the style so the archive is relocatable; the SDK
+ * absolutizes them at load time (see `MapLibreConfigSchema`).
+ */
+export declare function createOfflineMapStyle(options: OfflineMapStyleOptions): {
+    version: number;
+    sources: {
+        protomaps: {
+            type: string;
+            attribution: string;
+            url: string;
+        };
+    };
+    sprite: string;
+    glyphs: string;
+    layers: LayerSpecification[];
+};
+//# sourceMappingURL=offline-map-style.d.ts.map