@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Map/viewport.d.ts

@@ -0,0 +1,63 @@
+import { type ViewportAPI } from '@expofp/renderer';
+import { type FloorPlanGetCoordsEvent } from '../../types';
+/**
+ * What the mounted map holds, and hands the handle below a live view of.
+ *
+ * The renderer's conversions themselves, unwrapped: unlike the camera, there is nothing to publish
+ * here *besides* them — no reader to pair with the commands — so the handle is the same shape as
+ * what it forwards to.
+ */
+export interface MountedViewport {
+    /** The conversions, as the renderer last handed them over. */
+    api: ViewportAPI;
+}
+/**
+ * Wraps the map's live coordinate conversions in a handle whose identity never changes.
+ *
+ * The same inversion `createMapCamera` performs, and for the same reason: the renderer's hooks
+ * return a fresh object on every render — they memoize nothing, so that the cost of a settled
+ * identity is paid by whoever knows how often they render. That is this map, which reads them
+ * through a ref and hands out this one object for the life of the mount.
+ * @param viewport - A live view of what the mounted map holds.
+ * @returns The handle to publish.
+ */
+export declare function createMapViewport(viewport: {
+    readonly current: MountedViewport;
+}): ViewportAPI;
+/**
+ * Publishes the plan's coordinate conversions, for as long as the map is on screen.
+ *
+ * The same inversion `setMapCamera` performs: the renderer's viewport is reached through a
+ * hook, which only resolves inside a component mounted under `<Renderer>` — deliberately, since that
+ * is what stops anything measuring the plan before the canvas exists. The SDK's own methods and the
+ * kiosk store are not components and cannot hold a hook, so the map hands the conversions out here
+ * once it is safe.
+ * @param viewport - The conversions; omitted to unpublish them as the map unmounts.
+ */
+export declare function setMapViewport(viewport?: ViewportAPI): void;
+/**
+ * The plan's coordinate conversions, if the plan is on screen.
+ *
+ * Absent only before the canvas has mounted. Present in MapLibre mode as much as on the standalone
+ * plan: the conversions read the scene's space and the camera three draws with, and in external mode
+ * that camera is the one MapLibre's matrix is decomposed onto — so `canvasToPlan` casts its ray
+ * through the venue exactly as it does when this renderer owns the camera.
+ * @returns The conversions, or `undefined`.
+ */
+export declare function mapViewport(): ViewportAPI | undefined;
+/**
+ * What the middle of the canvas is looking at, which is what the SDK's `getCenterCoordinates`
+ * reports.
+ *
+ * The canvas center rather than the camera's own target, and the two are not the same point: a
+ * `visibleRect` moves where the camera looks without moving the canvas under it. This is what the
+ * imperative map converted through `viewport.canvasToSvg`.
+ *
+ * Shared by both views. Each passes the canvas it owns — the plan's own, or the one MapLibre draws
+ * on — and the answer comes back in plan coordinates either way, so the SDK's method means the same
+ * thing in map mode as on the plan.
+ * @param canvas - The canvas the plan is drawn on, once it has mounted.
+ * @returns The plan coordinates, and the floor they are on.
+ */
+export declare function centerCoordinates(canvas: HTMLCanvasElement | null): FloorPlanGetCoordsEvent;
+//# sourceMappingURL=viewport.d.ts.map

package/dist/esm/components/Map/viewport.js

@@ -0,0 +1,82 @@
+import store from '../../store';
+import { LayerMode } from '../../store/LayerStore';
+/**
+ * Wraps the map's live coordinate conversions in a handle whose identity never changes.
+ *
+ * The same inversion `createMapCamera` performs, and for the same reason: the renderer's hooks
+ * return a fresh object on every render — they memoize nothing, so that the cost of a settled
+ * identity is paid by whoever knows how often they render. That is this map, which reads them
+ * through a ref and hands out this one object for the life of the mount.
+ * @param viewport - A live view of what the mounted map holds.
+ * @returns The handle to publish.
+ */
+export function createMapViewport(viewport) {
+    return {
+        canvasToPlan: (point) => viewport.current.api.canvasToPlan(point),
+        planToCanvas: (point) => viewport.current.api.planToCanvas(point),
+        isVisible: (point) => viewport.current.api.isVisible(point),
+    };
+}
+/**
+ * Publishes the plan's coordinate conversions, for as long as the map is on screen.
+ *
+ * The same inversion `setMapCamera` performs: the renderer's viewport is reached through a
+ * hook, which only resolves inside a component mounted under `<Renderer>` — deliberately, since that
+ * is what stops anything measuring the plan before the canvas exists. The SDK's own methods and the
+ * kiosk store are not components and cannot hold a hook, so the map hands the conversions out here
+ * once it is safe.
+ * @param viewport - The conversions; omitted to unpublish them as the map unmounts.
+ */
+export function setMapViewport(viewport) {
+    published = viewport;
+}
+/**
+ * The plan's coordinate conversions, if the plan is on screen.
+ *
+ * Absent only before the canvas has mounted. Present in MapLibre mode as much as on the standalone
+ * plan: the conversions read the scene's space and the camera three draws with, and in external mode
+ * that camera is the one MapLibre's matrix is decomposed onto — so `canvasToPlan` casts its ray
+ * through the venue exactly as it does when this renderer owns the camera.
+ * @returns The conversions, or `undefined`.
+ */
+export function mapViewport() {
+    return published;
+}
+/** The conversions the mounted map published, if there are any. */
+let published;
+/**
+ * What the middle of the canvas is looking at, which is what the SDK's `getCenterCoordinates`
+ * reports.
+ *
+ * The canvas center rather than the camera's own target, and the two are not the same point: a
+ * `visibleRect` moves where the camera looks without moving the canvas under it. This is what the
+ * imperative map converted through `viewport.canvasToSvg`.
+ *
+ * Shared by both views. Each passes the canvas it owns — the plan's own, or the one MapLibre draws
+ * on — and the answer comes back in plan coordinates either way, so the SDK's method means the same
+ * thing in map mode as on the plan.
+ * @param canvas - The canvas the plan is drawn on, once it has mounted.
+ * @returns The plan coordinates, and the floor they are on.
+ */
+export function centerCoordinates(canvas) {
+    const viewport = mapViewport();
+    if (!canvas || !viewport)
+        throw new Error('Canvas not ready');
+    const point = viewport.canvasToPlan({
+        x: canvas.clientWidth / 2,
+        y: canvas.clientHeight / 2,
+    });
+    // A tilted camera can look past the plan entirely, and the middle of the canvas is then above its
+    // horizon. Nothing sensible to report, and a made-up coordinate would be worse than saying so.
+    if (!point)
+        throw new Error('The camera is not looking at the plan');
+    // A multi-venue plan shows several floors at once — the outdoor level plus each venue's active
+    // one — so the first visible floor is the outdoor level wherever the camera looks. Inside a
+    // building, the floor under the point is that venue's active level (the YAH app saves this `z`
+    // with every QR code it places).
+    const venue = store.venueStore.venueAt(point);
+    if (venue)
+        return { x: point.x, y: point.y, z: venue.activeLevel.layer.name };
+    const activeLayer = store.layerStore.visible.find((layer) => layer.mode === LayerMode.TurnedOff || layer.mode === LayerMode.TurnedOn);
+    return { x: point.x, y: point.y, z: activeLayer?.name || null };
+}

package/dist/esm/components/Map/with-kiosk.d.ts

@@ -0,0 +1,11 @@
+import { Box } from '@expofp/geometry';
+/**
+ * The box to frame, widened to keep the kiosk in view when it stands on the floor being shown.
+ *
+ * Shared by both views, like `framingRect()`: the route's own bounds stop at the walkway nearest
+ * the kiosk, so without this the kiosk and the trail leading from it fall outside the frame.
+ * @param rect - What was asked for, in plan units.
+ * @returns The box to frame.
+ */
+export declare function withKiosk(rect: Box): Box;
+//# sourceMappingURL=with-kiosk.d.ts.map

package/dist/esm/components/Map/with-kiosk.js

@@ -0,0 +1,25 @@
+import { Box } from '@expofp/geometry';
+import store, { uiState } from '../../store';
+import { areLayersEnabled } from '../../utils/areLayersEnabled.js';
+/**
+ * The box to frame, widened to keep the kiosk in view when it stands on the floor being shown.
+ *
+ * Shared by both views, like `framingRect()`: the route's own bounds stop at the walkway nearest
+ * the kiosk, so without this the kiosk and the trail leading from it fall outside the frame.
+ * @param rect - What was asked for, in plan units.
+ * @returns The box to frame.
+ */
+export function withKiosk(rect) {
+    const kiosk = uiState.kioskData;
+    if (!kiosk)
+        return rect;
+    // The kiosk's own floor against the one on screen, which `currentRouteLayer` tracks with or
+    // without a route. Judged by the route's start floor instead, a route between two booths on
+    // another floor stretched the frame to a kiosk that was not even drawn.
+    const sameFloor = areLayersEnabled()
+        ? kiosk.z === store.routeStore.currentRouteLayer?.name
+        : true;
+    if (!sameFloor)
+        return rect;
+    return Box.fromUnion(rect, new Box(kiosk.x, kiosk.y, 1, 1));
+}

package/dist/esm/components/MapControlsContainer.d.ts

@@ -0,0 +1,3 @@
+declare const MapControlsContainer: import("react").FunctionComponent<object>;
+export default MapControlsContainer;
+//# sourceMappingURL=MapControlsContainer.d.ts.map

package/dist/esm/components/MapControlsContainer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MapControls } from '@expofp/ui';
+import classNames from 'classnames';
+import { observer, useLocalStore } from 'mobx-react-lite';
+import store, { layersStore, uiState } from '../store';
+import { LayerMode, LayersMode } from '../store/LayerStore';
+import { remsToPixels } from '../utils';
+import { t } from '../utils/i18n';
+/**
+ * Moves the camera on the visitor's say-so, and tells the kiosk's idle timer they are still there.
+ *
+ * The plan reports the visitor's own hand on the camera (`MapCamera`), which a button press is not —
+ * and the timer must not hear a command, or the idle reset's own restore would re-arm the timer it
+ * had just fired. So the press says it, here, where it is known to be a press.
+ * @param move - What the button does.
+ */
+function moveCamera(move) {
+    window.__resett?.();
+    move();
+}
+const MapControlsContainer = observer(() => {
+    const s = useLocalStore(() => ({
+        get className() {
+            return classNames({
+                controls: true,
+                container: true,
+                '-ready': true,
+                [uiState.responsiveClass]: true,
+            });
+        },
+        get style() {
+            return {
+                [uiState.rtl ? 'left' : 'right']: uiState.overlayPosition === 'left'
+                    ? uiState.overlayCollapsed
+                        ? remsToPixels(0.9)
+                        : (uiState.kiosk ? 10 : 0) + remsToPixels(0.7) + 'px'
+                    : '10px',
+                bottom: uiState.kiosk ? remsToPixels(4) : remsToPixels(9.6),
+            };
+        },
+        get layers() {
+            return layersStore.layers
+                .filter((l) => l.mode !== LayerMode.AlwaysHidden && l.mode !== LayerMode.AlwaysVisible)
+                .map((l) => ({ id: l.name, name: l.description }))
+                .concat([])
+                .reverse();
+        },
+        get visible() {
+            return layersStore.layers.filter((l) => l.visible).map((l) => l.name);
+        },
+    }));
+    return (_jsx(MapControls, { className: s.className, style: s.style, title: t('Map controls'), findLocationLabel: t('Find your location'), zoomInLabel: t('Zoom In'), zoomOutLabel: t('Zoom Out'), viewModeLabel: t('View switch'), fitToScreenLabel: t('Fit to screen'), layersLabel: t('Layers'), onFindLocation: () => store.routeStore.findLocation(), onZoomIn: () => moveCamera(() => uiState.zoomIn()), onZoomOut: () => moveCamera(() => uiState.zoomOut()), onFitToScreen: () => moveCamera(() => uiState.fitBounds()), onViewModeSwitch: () => store.maplibreStore.activateMaplibre(), showModeSwitch: store.maplibreStore.maplibreEnabled && !store.maplibreStore.hideModeSwitchButton, isMap3d: store.maplibreStore.isMap3d, showFindLocation: store.routeStore.canFindLocation && !uiState.setKioskModeEnabled, layersActiveItems: s.visible, layersList: layersStore.mode === LayersMode.CheckBox ? s.layers : undefined, onChangeLayers: (layer) => {
+            const target = layersStore.layers.find((l) => l.name === layer);
+            if (target)
+                layersStore.updateVisibility(layer, !target.visible);
+        } }));
+});
+export default MapControlsContainer;

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

@@ -0,0 +1,12 @@
+import { AttributionControl, type Map as MaplibreMap } from 'maplibre-gl';
+/**
+ * MapLibre's compact attribution, but collapsed to its "(i)" button from the
+ * start: MapLibre opens it on add and only collapses it on the first drag.
+ * Clicking "(i)" expands the credits inline, or on the mobile layout opens
+ * them as a popover (see ExpofpLogoControl.scss).
+ */
+export declare class CollapsedAttributionControl extends AttributionControl {
+    constructor(customAttribution: string);
+    onAdd(map: MaplibreMap): HTMLElement;
+}
+//# sourceMappingURL=CollapsedAttributionControl.d.ts.map

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

@@ -0,0 +1,19 @@
+import { AttributionControl } from 'maplibre-gl';
+/**
+ * MapLibre's compact attribution, but collapsed to its "(i)" button from the
+ * start: MapLibre opens it on add and only collapses it on the first drag.
+ * Clicking "(i)" expands the credits inline, or on the mobile layout opens
+ * them as a popover (see ExpofpLogoControl.scss).
+ */
+export class CollapsedAttributionControl extends AttributionControl {
+    constructor(customAttribution) {
+        super({ compact: true, customAttribution });
+    }
+    onAdd(map) {
+        const container = super.onAdd(map);
+        // MapLibre adds this class once, when it first switches to compact; the
+        // container is then in the same state a drag would leave it in.
+        container.classList.remove('maplibregl-compact-show');
+        return container;
+    }
+}

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

@@ -0,0 +1,20 @@
+import './ExpofpLogoControl.scss';
+import { type ControlPosition, type IControl } from 'maplibre-gl';
+/**
+ * The "Made with ExpoFP" logo as a MapLibre control, so it shares the
+ * bottom-right corner with the attribution instead of being an overlay drawn
+ * on top of it.
+ *
+ * Add it before the attribution control: MapLibre puts each new bottom control
+ * in front of the earlier ones, which leaves the logo after the attribution in
+ * the DOM. The stylesheet lays the corner out as one row in DOM order, so the
+ * logo stays in the corner while the attribution expands and collapses beside
+ * it.
+ */
+export declare class ExpofpLogoControl implements IControl {
+    private container;
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    getDefaultPosition(): ControlPosition;
+}
+//# sourceMappingURL=ExpofpLogoControl.d.ts.map

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

@@ -0,0 +1,39 @@
+import './ExpofpLogoControl.scss';
+import baseRuntimeUrl from '../../tools/base-runtime-url.js';
+import { buildExpofpUrl, UTM_CAMPAIGNS } from '../../tools/expofpUrl.js';
+import { t } from '../../utils/i18n.js';
+/**
+ * The "Made with ExpoFP" logo as a MapLibre control, so it shares the
+ * bottom-right corner with the attribution instead of being an overlay drawn
+ * on top of it.
+ *
+ * Add it before the attribution control: MapLibre puts each new bottom control
+ * in front of the earlier ones, which leaves the logo after the attribution in
+ * the DOM. The stylesheet lays the corner out as one row in DOM order, so the
+ * logo stays in the corner while the attribution expands and collapses beside
+ * it.
+ */
+export class ExpofpLogoControl {
+    onAdd() {
+        const link = document.createElement('a');
+        link.className = 'maplibregl-ctrl efp-map-logo';
+        link.href = buildExpofpUrl(UTM_CAMPAIGNS.SUBDOMAIN_LOGO);
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+        const image = document.createElement('img');
+        image.className = 'efp-map-logo__image';
+        image.src = `${baseRuntimeUrl}expofp-overlay.png`;
+        image.alt = t('Made with ExpoFP');
+        image.crossOrigin = 'anonymous';
+        link.append(image);
+        this.container = link;
+        return link;
+    }
+    onRemove() {
+        this.container?.remove();
+        this.container = undefined;
+    }
+    getDefaultPosition() {
+        return 'bottom-right';
+    }
+}

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

@@ -0,0 +1,18 @@
+import { type MaplibreViewMode } from '../../store/MaplibreStore';
+/**
+ * Main MobX adapter component that bridges application state to the
+ * state-agnostic MaplibreWrapper.
+ *
+ * The embed renders through the ordinary `<Renderer>` in external mode, so everything the
+ * standalone map wires through defs works identically here: picking through the layers' own
+ * handlers, label re-layout through `onScale`, counter-rotation through `onRoll` measured off the
+ * map's matrix every frame — no rotate listeners, no scale registries, no roll sync. Reused
+ * renderer config modules still read singleton stores internally, and MaplibreWrapper reads
+ * `uiState.pitchEnabled` for the tilt gesture; everything else reaches it as props.
+ */
+interface MaplibreAdapterProps {
+    viewMode: MaplibreViewMode;
+}
+declare const MaplibreAdapter: import("react").FunctionComponent<MaplibreAdapterProps>;
+export default MaplibreAdapter;
+//# sourceMappingURL=MaplibreAdapter.d.ts.map