@expofp/floorplan 0.0.0-experimental.2d6c681

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

@@ -0,0 +1,354 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isLayerDefs } from '@expofp/renderer';
+import Color from 'color';
+import { comparer, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import data from '../../data';
+import { getLayerSvg, getSvgArea, isSvgAreaExplicit } from '../../data/svg.js';
+import { createSceneDef } from '../../engine/defs';
+import store, { uiState } from '../../store';
+import settings from '../../tools/settings';
+import isDebug from '../../utils/is-debug';
+import { fitRectIsFraming, getVenueFitMarginPercent, resolveVenueFitRect, } from '../../utils/scene-bounds';
+import configAll from '../Map/drawing/config/config-all';
+import { loadLayersImages } from '../Map/drawing/config/loadBoothsImages';
+import { MapCursorCoords } from '../Map/MapCursorCoords';
+import { MapViewport } from '../Map/MapViewport';
+import { clearSelection } from '../Map/pointer';
+import { setMapScene } from '../Map/scene';
+import { useBuildRoute } from '../Map/traffic/useBuildRoute';
+import { useManageTraffic } from '../Map/traffic/useManageTraffic';
+import { centerCoordinates } from '../Map/viewport';
+import { recoverFromMaplibreLoadError } from './maplibre-recovery';
+import MaplibreWrapper from './MaplibreWrapper';
+import { executeVenueCameraRequest, useCameraReactions } from './useCameraReactions';
+import { useDimming } from './useDimming';
+import { useJourneyConnector } from './useJourneyConnector';
+import { useKioskCameraEvents } from './useKioskCameraEvents';
+import { useLayerVisibilitySync } from './useLayerVisibilitySync';
+import { usePoiMarkers } from './usePoiMarkers';
+import { useVenueCameraTracking } from './useVenueCameraTracking';
+import { useVenueLayers } from './useVenueLayers';
+import { useWayfindingAndMarkers } from './useWayfindingAndMarkers';
+import { cameraForLocalRect, campusFitPadding, deriveGeoConfig, getLocalRectGeoBounds, getVisibleRectFitPadding, INITIAL_FIT_ZOOM_ADJUSTMENT, } from './utils/geo-config';
+import { applyMapOptions, getTileSource, MAP_MIN_ZOOM } from './utils/map-helpers';
+import { calculateTransformMatrix } from './utils/solver';
+const API_HOST = 'routes-api.expofp.com';
+// Camera restores (the kiosk going back to its home framing after idle) ease
+// rather than cut, so a bystander sees the map travel back.
+const CAMERA_RESTORE_DURATION_MS = 800;
+function createCameraPort(map, venueBearing, getDefaultPitch) {
+    // A kiosk must return home even where the OS asks for reduced motion, hence
+    // `essential` on every move below.
+    return {
+        getCameraState: () => {
+            const center = map.getCenter();
+            return {
+                lng: center.lng,
+                lat: center.lat,
+                zoom: map.getZoom(),
+                bearing: map.getBearing(),
+                pitch: map.getPitch(),
+            };
+        },
+        applyCameraState: (target) => {
+            map.easeTo({
+                center: [target.lng, target.lat],
+                zoom: target.zoom,
+                bearing: target.bearing ?? venueBearing,
+                pitch: target.pitch ?? getDefaultPitch(),
+                duration: CAMERA_RESTORE_DURATION_MS,
+                essential: true,
+            });
+        },
+        resetPitch: () => {
+            const pitch = getDefaultPitch();
+            if (map.getPitch() === pitch)
+                return;
+            // A jump, not an ease: the caller starts a fit animation right after, and
+            // MapLibre lets only one move run — easing here would have the fit cancel
+            // it half-way. Levelling first means the fit then animates from upright.
+            map.jumpTo({ pitch });
+        },
+    };
+}
+function resetLayerRenderCache() {
+    store.poiMarkerStore.clear();
+    runInAction(() => {
+        store.layerStore.layers.forEach((layer) => {
+            layer.configured = false;
+            layer.children = [];
+            layer.loaded = false;
+        });
+        store.layerStore.layersLoaded = false;
+    });
+}
+/** The phone layout: the overlay sheet at the bottom, with the "List" button over the map. */
+const isMobileLayout = () => uiState.overlayPosition === 'bottom';
+const MaplibreAdapter = observer(function MaplibreAdapter({ viewMode }) {
+    const [sceneDef, setSceneDef] = useState(null);
+    const [mapReady, setMapReady] = useState(false);
+    const mapRef = useRef(null);
+    const mapCanvasRef = useRef(null);
+    const configCleanupRef = useRef(null);
+    const repaintRef = useRef(null);
+    const cameraPortRef = useRef(null);
+    // geoConfig is static for the component's lifetime. The parent guarantees
+    // MaplibreAdapter is remounted when the active floorplan/venue changes.
+    const geoConfig = useMemo(() => deriveGeoConfig(), []);
+    // The initial Fit-to-screen target — resolved through the same ladder as the
+    // "Fit to screen" button (authored viewbox → explicit __viewbox → scene).
+    const venueFit = useMemo(() => resolveVenueFitRect({
+        layerViewbox: store.layerStore.viewboxRectangle,
+        explicitArea: isSvgAreaExplicit() ? getSvgArea() : null,
+        layerRectangle: store.layerStore.rectangle,
+        sceneDef,
+        svgArea: getSvgArea(),
+    }), [sceneDef]);
+    // A venue-model plan opens on the whole campus instead — the same rect
+    // "View all venues" flies to — because the ladder above resolves to a union of
+    // per-level authored viewboxes, and on some multi-venue plans those are not
+    // dependable plan-local extents.
+    const campusBounds = store.venueStore.campusBounds;
+    const campusBoundsAuthored = store.venueStore.campusBoundsAuthored;
+    const venueFitRect = campusBounds ?? venueFit.rect;
+    const mapGeoConfig = useMemo(() => {
+        if (!geoConfig)
+            return null;
+        // Bare geometry still wants breathing room; a framing rect is shown as-is.
+        // Same rule as Fit-to-screen, so the two land on the same camera. A campus
+        // rect is the third case: it must land on the framing `viewAllVenues()`
+        // produces, which flies through `fitMapToLocalRect` — so take that call's
+        // padding from the same `campusFitPadding` and drop the proportional margin.
+        const marginPercent = campusBounds || fitRectIsFraming(venueFit.source)
+            ? 0
+            : getVenueFitMarginPercent(venueFitRect, getSvgArea());
+        const fitPadding = getVisibleRectFitPadding(campusBounds ? campusFitPadding(campusBoundsAuthored) : 0);
+        if (marginPercent && uiState.screenSize) {
+            fitPadding.left += uiState.screenSize.width * marginPercent;
+            fitPadding.right += uiState.screenSize.width * marginPercent;
+            fitPadding.top += uiState.screenSize.height * marginPercent;
+            fitPadding.bottom += uiState.screenSize.height * marginPercent;
+        }
+        // Frame the venue ourselves rather than handing MapLibre a `bounds`: its
+        // bounds fit is north-aligned and mis-frames a rotated plan (see
+        // cameraForLocalRect). uiState.screenSize is the same viewport
+        // getVisibleRectFitPadding measures its padding against.
+        const initialCamera = uiState.screenSize
+            ? cameraForLocalRect(venueFitRect, geoConfig.gpsConfig, geoConfig.bearing, { width: uiState.screenSize.width, height: uiState.screenSize.height }, fitPadding)
+            : null;
+        if (initialCamera) {
+            return {
+                center: initialCamera.center,
+                bearing: geoConfig.bearing,
+                zoom: initialCamera.zoom,
+            };
+        }
+        // No viewport to measure against yet — fall back to MapLibre's own bounds
+        // fit, which at least lands in the right place.
+        return {
+            center: geoConfig.center,
+            bearing: geoConfig.bearing,
+            zoom: geoConfig.zoom,
+            bounds: getLocalRectGeoBounds(venueFitRect, geoConfig.gpsConfig),
+            fitPadding,
+            // The campus fit skips the zoom nudge too — it would crop the outermost venues.
+            zoomAdjustment: campusBounds ? 0 : INITIAL_FIT_ZOOM_ADJUSTMENT,
+        };
+    }, [geoConfig, venueFit, venueFitRect, campusBounds, campusBoundsAuthored]);
+    const staticTransform = useMemo(() => {
+        if (!geoConfig)
+            return null;
+        return calculateTransformMatrix(geoConfig.gpsConfig, getLayerSvg()?.getAttribute('units'));
+    }, [geoConfig]);
+    // The venue's pitch, from the same settings the floor plan view reads, flattened out in the 2D
+    // view. Everything else is written once, so the two modes can only differ in pitch. No `maxZoom`
+    // and no `maxBounds`: MapLibre's own defaults are what we want there.
+    const pitch = uiState.mapSettings.pitchdegrees;
+    const maxPitch = uiState.maxPitch;
+    const mapOptions = useMemo(() => {
+        const flat = viewMode === 'map2d';
+        return {
+            pitch: flat ? 0 : pitch,
+            maxPitch: flat ? 0 : maxPitch,
+            minZoom: MAP_MIN_ZOOM,
+        };
+    }, [viewMode, pitch, maxPitch]);
+    const mapOptionsRef = useRef(mapOptions);
+    const tileSource = useMemo(() => getTileSource(), []);
+    // The scene external mode draws, prepared here:
+    // 1. Remove the areamap, so MapLibre is the only map backdrop
+    // 2. Disable the background color (the map provides it)
+    // 3. Apply the static SVG-to-Mercator transform
+    // Every layer object is shared with `sceneDef` — only the root is copied — so everything that
+    // fills layers (wayfinding, traffic, images) reaches the drawn scene whichever handle it holds.
+    const preparedScene = useMemo(() => {
+        if (!sceneDef || !staticTransform)
+            return null;
+        const layers = sceneDef.rootLayer.children;
+        const children = isLayerDefs(layers)
+            ? layers.filter((layer) => layer.name.toLowerCase() !== 'areamap')
+            : layers;
+        return {
+            ...sceneDef,
+            rootLayer: { ...sceneDef.rootLayer, children },
+            background: undefined,
+            staticTransform,
+        };
+    }, [sceneDef, staticTransform]);
+    const preparedSceneRef = useRef(null);
+    useEffect(() => {
+        preparedSceneRef.current = preparedScene;
+    }, [preparedScene]);
+    // Published for the parts of the SDK that are not components — the venue-fit resolution, the
+    // kiosk — for as long as it is the scene on screen; the standalone map publishes its own the
+    // same way.
+    useEffect(() => {
+        if (!preparedScene)
+            return;
+        setMapScene(preparedScene);
+        return () => setMapScene(undefined);
+    }, [preparedScene]);
+    const { mapDimAnimatorRef, venueDimAnimatorRef, applyDimmingTarget, handleMapDimLayerReady } = useDimming(mapRef, preparedSceneRef);
+    // Build the SceneDef using the existing configAll pipeline
+    useEffect(() => {
+        if (!geoConfig)
+            return;
+        let cancelled = false;
+        resetLayerRenderCache();
+        configAll()
+            .then(({ layers, cleanup: onConfigAllCleanup }) => {
+            if (cancelled) {
+                // Mount already torn down (unmount cleanup ran and won't run again) — dispose now.
+                onConfigAllCleanup();
+                return;
+            }
+            configCleanupRef.current = onConfigAllCleanup;
+            const sceneColor = Color(settings.backgroundColor === 'none' ? '#ebebeb' : settings.backgroundColor).string();
+            setSceneDef(createSceneDef(layers, getSvgArea(), sceneColor));
+        })
+            .catch((error) => {
+            if (!cancelled) {
+                console.warn('Maplibre scene configuration failed.', error);
+            }
+        });
+        const mapDimAnimator = mapDimAnimatorRef.current;
+        const venueDimAnimator = venueDimAnimatorRef.current;
+        return () => {
+            cancelled = true;
+            resetLayerRenderCache();
+            configCleanupRef.current?.();
+            configCleanupRef.current = null;
+            if (cameraPortRef.current) {
+                store.maplibreStore.clearCameraPortIfCurrent(cameraPortRef.current);
+                cameraPortRef.current = null;
+            }
+            mapRef.current = null;
+            mapCanvasRef.current = null;
+            repaintRef.current = null;
+            setMapReady(false);
+            mapDimAnimator?.stop();
+            venueDimAnimator?.stop();
+            uiState.sceneDefReady = false;
+        };
+    }, [geoConfig, mapDimAnimatorRef, venueDimAnimatorRef]);
+    // Wire map-level state the moment the custom layer holds the shared context. The scene needs
+    // none of this to draw — labels lay out and counter-rotate through their own def handlers the
+    // moment the renderer measures the map's matrix.
+    const handleMapReady = useCallback((map, requestRepaint) => {
+        mapRef.current = map;
+        mapCanvasRef.current = map.getCanvas();
+        repaintRef.current = requestRepaint;
+        setMapReady(true);
+        // On the mobile layout the attribution's credits open as a popover, above the "List" button
+        // while that shows (see ExpofpLogoControl.scss); one reaction per map, gone with it.
+        const disposeAttributionLayout = reaction(() => ({ popover: isMobileLayout(), listTopPx: uiState.mobileToggleTopPx }), ({ popover, listTopPx }) => {
+            const container = map.getContainer();
+            container.classList.toggle('efp-map-attrib-popover', popover);
+            // Measured from the attribution's box, which sits --app-gap above the map's bottom.
+            if (listTopPx) {
+                container.style.setProperty('--efp-map-attrib-popover-bottom', `calc(${listTopPx + 8}px - var(--app-gap, 10px))`);
+            }
+            else {
+                container.style.removeProperty('--efp-map-attrib-popover-bottom');
+            }
+        }, { equals: comparer.structural, fireImmediately: true });
+        map.once('remove', disposeAttributionLayout);
+        // The opening tilt waits for the map's first idle frame. From here the plan's first build
+        // holds the main thread for as long as the tilt lasts, and an ease started into that work
+        // lands in two or three steps instead of a travel; `idle` is MapLibre's own "drawn, tiles
+        // in, nothing moving" signal. Nothing else waits: every limit this applies is already on the
+        // map from its constructor, and a view-mode switch before then applies through the effect
+        // below.
+        map.once('idle', () => applyMapOptions(map, mapOptionsRef.current));
+        const cameraPort = createCameraPort(map, geoConfig?.bearing ?? map.getBearing(), () => mapOptionsRef.current.pitch ?? 0);
+        cameraPortRef.current = cameraPort;
+        store.maplibreStore.setCameraPort(cameraPort);
+        // `getCenterCoordinates()` on the public API delegates to whatever the mounted view
+        // installed here; only `Map` (the floor plan view) ever did, so in map view the call
+        // fell back to the class method and recursed. The same one-liner as the plan's, over
+        // the canvas MapLibre draws on: `MapViewport` publishes the conversions in this mode
+        // too, so the question is answered the same way in both.
+        store.fp.getCenterCoordinates = () => centerCoordinates(mapCanvasRef.current);
+        applyDimmingTarget({ immediate: true });
+        // Registry-driven, exactly as the standalone map calls it: the images land on the defs
+        // and reach the scene through `update`.
+        void loadLayersImages();
+        store.layerStore.layersLoaded = true;
+        if (store.fp.onFpConfigured)
+            store.fp.onFpConfigured();
+        uiState.sceneDefReady = true;
+        requestRepaint();
+    }, [applyDimmingTarget, geoConfig]);
+    useEffect(() => {
+        mapOptionsRef.current = mapOptions;
+        applyMapOptions(mapRef.current, mapOptions);
+    }, [mapOptions]);
+    // A ?z= deep link can focus a venue before React mounts. Camera reactions
+    // only observe later changes, so consume that pending focus once the map is ready.
+    useEffect(() => {
+        const request = store.venueStore.cameraRequest;
+        if (mapReady && geoConfig && mapRef.current && request) {
+            executeVenueCameraRequest(mapRef.current, geoConfig, request);
+        }
+    }, [geoConfig, mapReady]);
+    // === MobX reactions and event hooks ===
+    // Pointer picking needs no hook of its own: the booth layer's def handlers (declared by
+    // configAll) and the renderer's `onPointerMissed` carry it, exactly as on the standalone map.
+    // Degraded-venue and outdoor-PoI taps are claimed from that seam by their hit-test registries.
+    useKioskCameraEvents(mapReady, mapRef);
+    useWayfindingAndMarkers(preparedScene, mapCanvasRef);
+    // Venue layers before POI markers so pins/contours draw beneath them.
+    useVenueLayers(mapReady, mapRef, geoConfig);
+    usePoiMarkers(mapReady, mapRef, geoConfig);
+    // Last of the native stacks: a journey's connector spans the campus, so it
+    // belongs above the venue and marker artwork it crosses.
+    useJourneyConnector(mapReady, mapRef);
+    useLayerVisibilitySync(preparedScene, mapRef, geoConfig);
+    useCameraReactions(mapRef, geoConfig, preparedScene);
+    useVenueCameraTracking(mapRef, geoConfig, mapReady);
+    useBuildRoute({
+        enabled: store.layerStore.layersLoaded && uiState.buildRoute,
+        scene: preparedScene ?? undefined,
+    });
+    // Bus/transport routing is opt-in (see FloorPlanFlags.busRoutes): without the
+    // flag we skip the routes fetch entirely so plans without transit routes don't
+    // pay for a probe request.
+    const busRoutesEnabled = data.busRoutes ?? false;
+    useManageTraffic({
+        permission: store.layerStore.layersLoaded && busRoutesEnabled,
+        scene: preparedScene ?? undefined,
+        dataJsonUrl: `https://${API_HOST}/v1/routes?expo=${settings.EXPO}`,
+        websocketUrl: `wss://${API_HOST}/locations?expo=${settings.EXPO}`,
+    });
+    const handleMapLoadError = useCallback((error) => {
+        recoverFromMaplibreLoadError(store.maplibreStore, error);
+    }, []);
+    if (!geoConfig || !mapGeoConfig || !staticTransform || !preparedScene) {
+        return null;
+    }
+    const sceneKey = `${mapGeoConfig.center.join(',')}:${mapGeoConfig.bearing}:${mapGeoConfig.zoom}`;
+    return (_jsxs(MaplibreWrapper, { sceneDef: preparedScene, geoConfig: mapGeoConfig, tileSource: tileSource, mapOptions: mapOptions, debug: isDebug, onMapReady: handleMapReady, onMapDimLayerReady: handleMapDimLayerReady, onMapLoadError: handleMapLoadError, onPointerMissed: clearSelection, children: [_jsx(MapViewport, {}), isDebug && _jsx(MapCursorCoords, { canvas: mapCanvasRef })] }, sceneKey));
+});
+export default MaplibreAdapter;

package/dist/esm/components/Maplibre/MaplibreWrapper.d.ts

@@ -0,0 +1,111 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { type PointerMissedEventData, type SceneDef } from '@expofp/renderer';
+import { type LngLatBoundsLike, Map as MaplibreMap, type StyleSpecification } from 'maplibre-gl';
+import { type ReactNode } from 'react';
+export declare const MAP_DIM_LAYER_ID = "expofp-map-dim";
+/**
+ * Configuration for the map tile source.
+ * Abstracted so we can swap between online and offline (PMTiles) later
+ * without touching MaplibreWrapper.
+ */
+export interface TileSourceConfig {
+    /** Maplibre style URL or inline style JSON object */
+    style: string | StyleSpecification;
+    /**
+     * The style and everything it references ship inside the plan archive. Local
+     * hosts serve those files themselves, so PMTiles archives get a source that
+     * tolerates a host without Range support.
+     */
+    offline?: boolean;
+    /**
+     * Edits the loaded style before MapLibre applies it — a palette over a
+     * hosted style, for instance.
+     */
+    restyle?: (style: StyleSpecification) => StyleSpecification;
+}
+export interface CameraPaddingOptions {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+/** Geographic configuration derived from fpGeo.properties */
+export interface GeoConfig {
+    /** Center of the venue in [lng, lat] */
+    center: [number, number];
+    /** Map bearing in degrees */
+    bearing: number;
+    /** Initial zoom level */
+    zoom: number;
+    /** Optional initial bounds. When present, MapLibre computes the initial zoom. */
+    bounds?: LngLatBoundsLike;
+    /** Padding used with initial bounds. */
+    fitPadding?: CameraPaddingOptions;
+    /** Small correction after bounds-based initial fit. */
+    zoomAdjustment?: number;
+}
+/**
+ * The camera policy for a map: every field a caller decides.
+ *
+ * The props take a `Partial` of this, so a caller names only the fields it has decided. What it
+ * leaves out is left off the map's own options and MapLibre's default applies (`maxPitch` 60,
+ * `minZoom` 0, `maxZoom` 22, no bounds). This component defaults nothing itself.
+ */
+export interface MapOptions {
+    /** Where the camera settles once the map is up, in degrees back from top down. */
+    pitch: number;
+    /** How far it may tilt back from top down, in degrees. */
+    maxPitch: number;
+    minZoom: number;
+    maxZoom: number;
+    /** Where the camera may pan. */
+    maxBounds: LngLatBoundsLike;
+}
+export interface MaplibreWrapperProps {
+    /**
+     * The scene to render inside the map, already prepared for external mode by the caller:
+     * MapLibre is the only basemap (no areamap layer), the map paints the background, and the
+     * scene's `staticTransform` places the plan in Mercator.
+     */
+    sceneDef: SceneDef;
+    /** Geographic configuration for map positioning and floorplan locking */
+    geoConfig: GeoConfig;
+    /** Tile source configuration (online style URL for now) */
+    tileSource: TileSourceConfig;
+    /** Map camera constraints and defaults; what is left out takes MapLibre's own default. */
+    mapOptions?: Partial<MapOptions>;
+    /**
+     * Mounts the renderer's debug overlay. Fixed for the wrapper's lifetime: when set, map creation
+     * waits for `prepareDebug()`, so the map's context is created already instrumented and the
+     * GPU-memory panel has figures to show.
+     */
+    debug?: boolean;
+    /**
+     * Called once the map exists and its custom layer received the shared WebGL context — the
+     * moment the caller can wire map-level state: camera port, options, store flags.
+     */
+    onMapReady?: (map: MaplibreMap, requestRepaint: () => void) => void;
+    /** Called when the dim overlay layer is available for paint updates. */
+    onMapDimLayerReady?: (map: MaplibreMap) => void;
+    /** Called when the map style cannot be loaded. */
+    onMapLoadError?: (error: unknown) => void;
+    /** Forwarded to the renderer: a click that reached no layer handler. */
+    onPointerMissed?: (event: PointerMissedEventData) => void;
+    /** Components rendered inside the renderer's tree, under the scene's space. */
+    children?: ReactNode;
+}
+/**
+ * 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, }: MaplibreWrapperProps): import("react").JSX.Element;
+//# sourceMappingURL=MaplibreWrapper.d.ts.map