@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Maplibre/MaplibreWrapper.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { prepareDebug, Renderer, } from '@expofp/renderer';
+import { addProtocol, Map as MaplibreMap, } from 'maplibre-gl';
+import { Protocol } from 'pmtiles';
+import { useEffect, useRef, useState } from 'react';
+import { uiState } from '../../store';
+import { CollapsedAttributionControl } from './CollapsedAttributionControl.js';
+import { ExpofpLogoControl } from './ExpofpLogoControl.js';
+import { registerPmtilesArchive } from './utils/pmtiles-range-fallback';
+import { createStyleTransform } from './utils/resolve-map-style';
+// customAttribution replaces MapLibre's default credit, so re-add its link.
+// ExpoFP isn't listed: ExpofpLogoControl shows the logo right beside it.
+const MAPLIBRE_ATTRIBUTION = '<a href="https://maplibre.org/" target="_blank">MapLibre</a>';
+export const MAP_DIM_LAYER_ID = 'expofp-map-dim';
+const MAP_DIM_SOURCE_ID = 'expofp-map-dim-source';
+const EXPOFP_CUSTOM_LAYER_ID = '3d-expofp';
+let pmtilesProtocol = null;
+const ENGLISH_LABEL_FIELD = [
+    'coalesce',
+    ['get', 'name:en'],
+    ['get', 'name_en'],
+    ['get', 'name:latin'],
+    ['get', 'name'],
+];
+const MAP_DIM_GEOJSON = {
+    type: 'Feature',
+    geometry: {
+        type: 'Polygon',
+        coordinates: [
+            [
+                [-180, -85],
+                [180, -85],
+                [180, 85],
+                [-180, 85],
+                [-180, -85],
+            ],
+        ],
+    },
+    properties: {},
+};
+function isProjectionMatrix(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const length = value.length;
+    if (typeof length !== 'number' || length < 16)
+        return false;
+    const firstValue = value[0];
+    return typeof firstValue === 'number' && Number.isFinite(firstValue);
+}
+function getProjectionMatrix(args) {
+    if (isProjectionMatrix(args))
+        return Array.from(args);
+    const payload = args;
+    const mainMatrix = payload?.defaultProjectionData?.mainMatrix;
+    if (isProjectionMatrix(mainMatrix))
+        return Array.from(mainMatrix);
+    console.warn('Maplibre custom layer received an unsupported projection matrix payload.', args);
+    return null;
+}
+function referencesNameField(value) {
+    if (typeof value === 'string')
+        return value.includes('name');
+    if (Array.isArray(value))
+        return value.some((item) => referencesNameField(item));
+    if (!value || typeof value !== 'object')
+        return false;
+    return Object.values(value).some((item) => referencesNameField(item));
+}
+function shouldForceEnglishLabel(layer) {
+    if (layer.type !== 'symbol' || !layer.id || !layer.layout)
+        return false;
+    return referencesNameField(layer.layout['text-field']);
+}
+function applyEnglishLabels(map) {
+    const style = map.getStyle();
+    for (const layer of style.layers ?? []) {
+        if (!shouldForceEnglishLabel(layer))
+            continue;
+        map.setLayoutProperty(layer.id, 'text-field', ENGLISH_LABEL_FIELD);
+    }
+}
+function ensurePmtilesProtocol() {
+    if (pmtilesProtocol)
+        return pmtilesProtocol;
+    const protocol = new Protocol();
+    pmtilesProtocol = protocol;
+    try {
+        addProtocol('pmtiles', protocol.tile);
+    }
+    catch (error) {
+        console.warn('Maplibre PMTiles protocol registration failed.', error);
+    }
+    return protocol;
+}
+/**
+ * A pure, state-agnostic React component that renders a Maplibre map
+ * with the ExpoFP floorplan embedded via CustomLayerInterface.
+ *
+ * The floorplan draws through the ordinary `<Renderer>` in external mode: the custom layer hands
+ * over the map's WebGL context when MapLibre creates it, repaint demand becomes
+ * `map.triggerRepaint()`, and every frame the map draws forwards its projection matrix to the
+ * renderer's subscribed draw. There is no update pump: the renderer asks the host for frames
+ * itself, through the same demand channel its own canvas would use.
+ *
+ * This component does NOT import MobX or any application state.
+ * All state synchronization is done externally via the onMapReady callback.
+ */
+export default function MaplibreWrapper({ sceneDef, geoConfig, tileSource, mapOptions, debug, onMapReady, onMapDimLayerReady, onMapLoadError, onPointerMissed, children, }) {
+    const containerRef = useRef(null);
+    const [external, setExternal] = useState();
+    const onMapReadyRef = useRef(onMapReady);
+    const onMapDimLayerReadyRef = useRef(onMapDimLayerReady);
+    const onMapLoadErrorRef = useRef(onMapLoadError);
+    const initialPropsRef = useRef({ geoConfig, tileSource, mapOptions, debug });
+    useEffect(() => {
+        onMapReadyRef.current = onMapReady;
+        onMapDimLayerReadyRef.current = onMapDimLayerReady;
+        onMapLoadErrorRef.current = onMapLoadError;
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return undefined;
+        const { geoConfig, tileSource, mapOptions, debug } = initialPropsRef.current;
+        let cancelled = false;
+        let cleanup;
+        const boot = () => {
+            const pmtiles = ensurePmtilesProtocol();
+            const cameraOptions = geoConfig.bounds
+                ? {
+                    bounds: geoConfig.bounds,
+                    fitBoundsOptions: {
+                        padding: geoConfig.fitPadding,
+                        bearing: geoConfig.bearing,
+                    },
+                }
+                : {
+                    center: geoConfig.center,
+                    zoom: geoConfig.zoom,
+                };
+            // The style is applied via setStyle() below (after the handlers are wired).
+            // An offline archive is served by whatever the host embeds the SDK in, and
+            // not all of those honour Range requests — see RangeTolerantSource.
+            const styleTransform = createStyleTransform(tileSource.style, tileSource.offline ? (url) => registerPmtilesArchive(pmtiles, url) : undefined, tileSource.restyle);
+            const map = new MaplibreMap({
+                container,
+                ...cameraOptions,
+                bearing: geoConfig.bearing,
+                // No pitch: the map opens top down, and the caller tilts it to the venue's angle once the
+                // map goes idle. That is what makes the opening tilt visible. Every field below goes
+                // straight through, `undefined` included, so MapLibre's own default applies where the
+                // caller named nothing.
+                maxPitch: mapOptions?.maxPitch,
+                minZoom: mapOptions?.minZoom,
+                maxZoom: mapOptions?.maxZoom,
+                maxBounds: mapOptions?.maxBounds,
+                // Added below, after the logo it shares the corner with.
+                attributionControl: false,
+                // Never auto-snap to north: a venue's bearing is its correct orientation,
+                // and the default 7° snap silently rotates near-north venues to north when
+                // a pan/rotate gesture ends. Keep free rotation, just drop the snap.
+                bearingSnap: 0,
+                // Turn the map from sideways drag alone, always in the same direction. MapLibre's default
+                // reads the pointer against the map center: above the center line it reverses the turn, and
+                // it swings the map around the center once a drag starts more than 100px away
+                // (`generateMouseRotationHandler`). Both make a drag to the right turn the map one way in
+                // the top half and the other way in the bottom. Google Maps and Mapbox do neither, and this
+                // option turns both off.
+                aroundCenter: false,
+                // The tilt gesture, by mouse and by touch, read once here and fixed for the map's
+                // lifetime. `pitchWithRotate` is the half of the drag handler MapLibre lets you switch off
+                // on its own, and `touchPitch` is its two-finger counterpart. Neither reaches the camera
+                // commands, so a host may still open the map at an angle, and move it later, with both off.
+                //
+                // Only the tilt. Mouse turn and mouse tilt are one drag handler in MapLibre and only the
+                // tilt half has a switch of its own, so turning the map cannot be switched off without
+                // taking tilt by mouse with it. That trade is not worth making, so the turn is left on.
+                pitchWithRotate: uiState.pitchEnabled,
+                touchPitch: uiState.pitchEnabled,
+                canvasContextAttributes: { antialias: true },
+            });
+            // Logo first, so it ends up in the corner — see ExpofpLogoControl. The
+            // attribution loads collapsed to its "(i)" button; (i) toggles it, a
+            // drag collapses it.
+            map.addControl(new ExpofpLogoControl());
+            map.addControl(new CollapsedAttributionControl(MAPLIBRE_ATTRIBUTION));
+            if (geoConfig.zoomAdjustment) {
+                map.jumpTo({ zoom: map.getZoom() + geoConfig.zoomAdjustment });
+            }
+            // Dev-only console handle for driving the camera while debugging
+            // (bearing/pitch/zoom experiments); stripped from production builds.
+            if (import.meta.env.DEV) {
+                window.__efpMaplibreMap = map;
+            }
+            map.once('error', (event) => {
+                if (map.isStyleLoaded())
+                    return;
+                onMapLoadErrorRef.current?.(event?.error ?? event);
+            });
+            // The basemap's POI symbol layers reference sprite icons (e.g. "atm",
+            // "office") that the OpenFreeMap sprite doesn't include. MapLibre logs a
+            // warning per missing image; register a transparent 1x1 placeholder so the
+            // icon slot stays empty (its layout was already iconless) without the spam.
+            const handleStyleImageMissing = (event) => {
+                const id = event?.id;
+                if (!id || map.hasImage(id))
+                    return;
+                map.addImage(id, { width: 1, height: 1, data: new Uint8Array(4) });
+            };
+            map.on('styleimagemissing', handleStyleImageMissing);
+            // The frame bridge between the custom layer and the renderer's external mount: the renderer
+            // subscribes its per-frame draw through `onFrame`, and each frame the map draws hands that
+            // draw the map's combined projection matrix. No update pump anymore: the renderer spreads
+            // queued def updates over frames it asks for itself — demand lands on `triggerRepaint`
+            // through its invalidate — so the external-mode starvation the old pump worked around
+            // (EFP-5718: thousands of queued defs waiting for someone to touch the map) has nothing
+            // left to starve.
+            let draw;
+            const requestFrame = () => map.triggerRepaint();
+            const customLayer = {
+                id: EXPOFP_CUSTOM_LAYER_ID,
+                type: 'custom',
+                renderingMode: '3d',
+                onAdd(_, gl) {
+                    if (cancelled)
+                        return;
+                    setExternal({
+                        gl,
+                        requestFrame,
+                        onFrame: (subscribed) => {
+                            draw = subscribed;
+                            requestFrame();
+                            return () => {
+                                if (draw === subscribed)
+                                    draw = undefined;
+                            };
+                        },
+                    });
+                    onMapReadyRef.current?.(map, requestFrame);
+                },
+                render(glOrArgs, args) {
+                    const projectionMatrix = getProjectionMatrix(args ?? glOrArgs);
+                    if (projectionMatrix)
+                        draw?.(projectionMatrix);
+                    // With debug on, ask for the next frame from inside this one. That turns the map's
+                    // repaint-on-demand into a continuous loop, which is what the standalone renderer does
+                    // with `frameloop: 'always'`. The debug panels need it: a frame time or a GPU-memory
+                    // figure that only updates when something moves looks frozen.
+                    if (debug)
+                        requestFrame();
+                },
+            };
+            const handleStyleLoad = () => {
+                applyEnglishLabels(map);
+                if (!map.getSource(MAP_DIM_SOURCE_ID)) {
+                    map.addSource(MAP_DIM_SOURCE_ID, {
+                        type: 'geojson',
+                        data: MAP_DIM_GEOJSON,
+                    });
+                }
+                if (!map.getLayer(MAP_DIM_LAYER_ID)) {
+                    map.addLayer({
+                        id: MAP_DIM_LAYER_ID,
+                        type: 'fill',
+                        source: MAP_DIM_SOURCE_ID,
+                        paint: {
+                            'fill-color': '#000000',
+                            'fill-opacity': 0,
+                            'fill-opacity-transition': { duration: 0, delay: 0 },
+                        },
+                    });
+                }
+                onMapDimLayerReadyRef.current?.(map);
+                map.addLayer(customLayer);
+            };
+            map.on('style.load', handleStyleLoad);
+            map.setStyle(tileSource.style, styleTransform ? { transformStyle: styleTransform } : undefined);
+            cleanup = () => {
+                map.off('style.load', handleStyleLoad);
+                map.off('styleimagemissing', handleStyleImageMissing);
+                map.remove();
+            };
+        };
+        // With debug on, the debug chunk must instrument context creation before the map creates its
+        // context — the coordination `prepareDebug` exists for. The renderer unmounts before this
+        // cleanup runs (child effects tear down first), so the map outlives the plan drawn on it.
+        if (debug) {
+            void prepareDebug().then(() => {
+                if (!cancelled)
+                    boot();
+            });
+        }
+        else {
+            boot();
+        }
+        return () => {
+            cancelled = true;
+            cleanup?.();
+            setExternal(undefined);
+        };
+    }, []);
+    return (_jsx("div", { ref: containerRef, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+        }, children: external && (_jsx(Renderer, { ...external, scene: sceneDef, debug: debug, onPointerMissed: onPointerMissed, children: children })) }));
+}

package/dist/esm/components/Maplibre/maplibre-recovery.d.ts

@@ -0,0 +1,4 @@
+export declare function recoverFromMaplibreLoadError(maplibreStore: {
+    deactivateMaplibre(): void;
+}, error: unknown): void;
+//# sourceMappingURL=maplibre-recovery.d.ts.map

package/dist/esm/components/Maplibre/maplibre-recovery.js

@@ -0,0 +1,4 @@
+export function recoverFromMaplibreLoadError(maplibreStore, error) {
+    console.warn('Maplibre map failed to load; falling back to floorplan mode.', error);
+    maplibreStore.deactivateMaplibre();
+}

package/dist/esm/components/Maplibre/styles/mapbox-streets-bright.d.ts

@@ -0,0 +1,3 @@
+import type { StyleSpecification } from 'maplibre-gl';
+export declare const mapboxStreetsBrightStyle: StyleSpecification;
+//# sourceMappingURL=mapbox-streets-bright.d.ts.map