@expofp/floorplan 0.0.0-experimental.2632d13

package/dist/esm/components/Map/booth-by-xy.js

@@ -0,0 +1,128 @@
+import { Box, Polygon, Rect } from '@expofp/geometry';
+import { getTrianglesFromFpPaths } from '../../data/svg';
+import { boothStore, layersStore } from '../../store';
+import { LayersMode } from '../../store/LayerStore';
+import { eventScopedValue } from '../../tools/event-scoped-cache.js';
+import logger from '../../tools/logger';
+import { planReaction } from '../../utils/plan-reactions.js';
+/**
+ * The bucketed hit-test index of the live plan's booths. Per event: it is
+ * rebuilt by the reaction `bindBoothHitTest` arms, but between a destroy and
+ * the next plan's first recalculation it would otherwise answer pointer queries
+ * with the previous event's booths (ADR-0011).
+ */
+const index = eventScopedValue(() => ({
+    segments: [],
+    segmentToHitAreas: new Map(),
+    prevSegment: null,
+    boothsWithPaths: [],
+}));
+function calculate() {
+    const booths = boothStore.booths.filter((booth) => booth.visible && booth.rect && booth.rect.size.width > 0 && booth.rect.size.height > 0);
+    const state = index();
+    state.segments = [];
+    state.prevSegment = null;
+    state.segmentToHitAreas = new Map();
+    // Filtered once here so the empty-floor early return below also clears stale polygon hit-targets.
+    state.boothsWithPaths = booths.filter((booth) => booth.paths);
+    if (!booths.length)
+        return;
+    // A rotated booth's hit shape is an oriented Rect matching the rendered outline; its AABB
+    // (`oriented.bounds`) pokes past the unrotated rect, so we bucket on that AABB. Unrotated booths
+    // reuse their own rect as both the hit shape and the bucket box (no Rect, no second allocation).
+    // Fold the union of those bucket AABBs in the same pass: a rotated booth on the edge pokes past the
+    // unrotated bounds, and a point there must still land in a segment or it becomes unhittable.
+    const hitAreas = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const booth of booths) {
+        const oriented = booth.rotate
+            ? new Rect(booth.rect.center, booth.rect.size, booth.rotate)
+            : null;
+        const bounds = oriented ? oriented.bounds : booth.rect;
+        hitAreas.push({ booth, shape: oriented ?? booth.rect, bounds });
+        if (bounds.min.x < minX)
+            minX = bounds.min.x;
+        if (bounds.min.y < minY)
+            minY = bounds.min.y;
+        if (bounds.max.x > maxX)
+            maxX = bounds.max.x;
+        if (bounds.max.y > maxY)
+            maxY = bounds.max.y;
+    }
+    const superSegment = Box.fromMinMax({ x: minX, y: minY }, { x: maxX, y: maxY });
+    const parts = 2; // 4 segments
+    const segmentWidth = Math.ceil(superSegment.size.width / parts);
+    const segmentHeight = Math.ceil(superSegment.size.height / parts);
+    for (let col = 0; col < parts; col++) {
+        for (let row = 0; row < parts; row++) {
+            const startX = superSegment.min.x + col * segmentWidth;
+            const startY = superSegment.min.y + row * segmentHeight;
+            const segm = new Box(startX, startY, segmentWidth, segmentHeight);
+            state.segments.push(segm);
+            state.segmentToHitAreas.set(segm, hitAreas.filter((area) => segm.intersects(area.bounds)));
+        }
+    }
+    logger.log('hover segmentToHitAreas', state.segmentToHitAreas);
+}
+/**
+ * Starts keeping the hit-test index current with the live plan's stores; the reaction is disposed
+ * with the plan.
+ *
+ * Called from the instance wiring (`floorplan.ready`) rather than run at module scope: the reaction
+ * belongs to one plan, and this module sits inside the store <-> components import cycle — `reaction`
+ * reads its expression the moment it is created, and at module scope that is `boothStore` still in
+ * its temporal dead zone. One binding serves both map modes; the MapLibre path resolves outdoor-PoI
+ * booths through this index too. `fireImmediately` buckets whatever the plan has already loaded.
+ */
+export function bindBoothHitTest() {
+    planReaction(() => [boothStore.booths, layersStore.loaded, layersStore.visible], () => calculate(), { fireImmediately: true });
+}
+function getLastBoothsFromClientXy(clientX, clientY) {
+    const state = index();
+    const pt = { x: clientX, y: clientY };
+    let segm;
+    if (state.prevSegment && state.prevSegment.containsPoint(pt)) {
+        segm = state.prevSegment;
+    }
+    else {
+        segm = state.segments.find((segment) => segment.containsPoint(pt));
+    }
+    // find segment first
+    if (segm) {
+        state.prevSegment = segm;
+    }
+    const hitAreas = segm ? state.segmentToHitAreas.get(segm) : undefined;
+    if (hitAreas) {
+        // Filter to visible booths up front: a booth can turn invisible after calculate() bucketed it,
+        // and an invisible booth sitting on top must not mask a visible one under the same point.
+        const found = hitAreas.filter((area) => area.booth.visible && area.shape.containsPoint(pt));
+        if (found.length) {
+            // pick the smallest one by true footprint area (booth.rect is the unrotated box)
+            const best = found.length > 1
+                ? found.sort((left, right) => left.booth.rect.area - right.booth.rect.area)[0]
+                : found[0];
+            return best.booth;
+        }
+    }
+    // If the point is not found in a segment, we check for polygonal areas
+    for (const booth of state.boothsWithPaths) {
+        if (!booth.visible)
+            continue;
+        for (const path of booth.paths) {
+            for (const triangle of getTrianglesFromFpPaths(path.index, layersStore.mode !== LayersMode.Default ? booth.layer.name : '')) {
+                // triangle is number[][] where each entry is [x, y]; convert to Point2Like for Polygon
+                const corners = triangle.map((vertex) => ({ x: vertex[0], y: vertex[1] }));
+                if (Polygon.fromConvexRing(corners).containsPoint(pt)) {
+                    return booth;
+                }
+            }
+        }
+    }
+    return null;
+}
+export default function getBoothIdFromClientXy(clientX, clientY) {
+    return getLastBoothsFromClientXy(clientX, clientY);
+}

package/dist/esm/components/Map/camera-events.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A camera-movement signal for the parts of the SDK that are not components.
+ *
+ * Reported once a movement has come to rest — the same signal the imperative renderer published as
+ * `navigation:change` — and the kiosk setup screen listens to know the operator has framed a new home
+ * view, whether they dragged the plan or pressed the zoom buttons. Both views produce it: `MapCamera`
+ * on the plan, `useKioskCameraEvents` on the MapLibre map. Deliberately minimal: no payload, because
+ * every consumer reads what it needs (`mapCamera().state()`) at the moment it cares — which is why
+ * the movement has to be over by the time this fires.
+ * @param listener - Called after each camera movement settles, while subscribed.
+ * @returns An unsubscribe function.
+ */
+export declare function onCameraMoved(listener: () => void): () => void;
+/**
+ * Reports that the camera has finished moving. Called by whichever view is mounted — the plan's
+ * camera or the map's; nothing else should.
+ */
+export declare function notifyCameraMoved(): void;
+//# sourceMappingURL=camera-events.d.ts.map

package/dist/esm/components/Map/camera-events.js

@@ -0,0 +1,26 @@
+/**
+ * A camera-movement signal for the parts of the SDK that are not components.
+ *
+ * Reported once a movement has come to rest — the same signal the imperative renderer published as
+ * `navigation:change` — and the kiosk setup screen listens to know the operator has framed a new home
+ * view, whether they dragged the plan or pressed the zoom buttons. Both views produce it: `MapCamera`
+ * on the plan, `useKioskCameraEvents` on the MapLibre map. Deliberately minimal: no payload, because
+ * every consumer reads what it needs (`mapCamera().state()`) at the moment it cares — which is why
+ * the movement has to be over by the time this fires.
+ * @param listener - Called after each camera movement settles, while subscribed.
+ * @returns An unsubscribe function.
+ */
+export function onCameraMoved(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+/**
+ * Reports that the camera has finished moving. Called by whichever view is mounted — the plan's
+ * camera or the map's; nothing else should.
+ */
+export function notifyCameraMoved() {
+    for (const listener of listeners)
+        listener();
+}
+/** Who is listening for camera movement. */
+const listeners = new Set();

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

@@ -0,0 +1,48 @@
+import { type CameraAPI, type CameraState } from '@expofp/renderer';
+/** The plan's camera, as the parts of the SDK that live outside React reach it. */
+export interface MapCameraHandle {
+    /** Moving the camera. */
+    readonly api: CameraAPI;
+    /** Reading where it is, at the moment of asking. */
+    state(): CameraState;
+}
+/** What the mounted map holds, and hands the handle below a live view of. */
+export interface MountedCamera {
+    /** The camera commands, as the renderer last handed them over. */
+    api: CameraAPI;
+    /** The camera reader, likewise. */
+    state: () => CameraState;
+}
+/**
+ * Wraps the map's live camera in a handle whose identity never changes.
+ *
+ * The renderer's hooks return a fresh object on every render, deliberately — it memoizes nothing, so
+ * that the cost of a settled identity is paid by whoever knows how often they render. That is this
+ * map: it reads them through a ref, and hands out this one object for the life of the mount, so
+ * nothing outside React ever holds a stale command.
+ * @param camera - A live view of what the mounted map holds.
+ * @returns The handle to publish.
+ */
+export declare function createMapCamera(camera: {
+    readonly current: MountedCamera;
+}): MapCameraHandle;
+/**
+ * Publishes the plan's camera, for as long as the map is on screen.
+ *
+ * The same inversion {@link setMarkerResolver} performs, and for the same reason: the renderer's
+ * camera is reached through hooks, which only resolve inside a component mounted under
+ * `<Renderer>` — and that is deliberate, since it is what stops anything touching the camera
+ * before the canvas exists. The SDK's own methods, the kiosk store and the route store are not
+ * components and cannot hold a hook, so `MapCamera` hands the camera out here once it is safe.
+ * @param camera - The camera; omitted to unpublish it as the map unmounts.
+ */
+export declare function setMapCamera(camera?: MapCameraHandle): void;
+/**
+ * The plan's camera, if the map is on screen.
+ *
+ * Absent before the canvas has mounted, and in MapLibre mode, where the map is unmounted entirely
+ * and the imperative renderer drives the embed instead.
+ * @returns The camera, or `undefined`.
+ */
+export declare function mapCamera(): MapCameraHandle | undefined;
+//# sourceMappingURL=camera.d.ts.map

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

@@ -0,0 +1,43 @@
+/**
+ * Wraps the map's live camera in a handle whose identity never changes.
+ *
+ * The renderer's hooks return a fresh object on every render, deliberately — it memoizes nothing, so
+ * that the cost of a settled identity is paid by whoever knows how often they render. That is this
+ * map: it reads them through a ref, and hands out this one object for the life of the mount, so
+ * nothing outside React ever holds a stale command.
+ * @param camera - A live view of what the mounted map holds.
+ * @returns The handle to publish.
+ */
+export function createMapCamera(camera) {
+    return {
+        get api() {
+            return camera.current.api;
+        },
+        state: () => camera.current.state(),
+    };
+}
+/**
+ * Publishes the plan's camera, for as long as the map is on screen.
+ *
+ * The same inversion {@link setMarkerResolver} performs, and for the same reason: the renderer's
+ * camera is reached through hooks, which only resolve inside a component mounted under
+ * `<Renderer>` — and that is deliberate, since it is what stops anything touching the camera
+ * before the canvas exists. The SDK's own methods, the kiosk store and the route store are not
+ * components and cannot hold a hook, so `MapCamera` hands the camera out here once it is safe.
+ * @param camera - The camera; omitted to unpublish it as the map unmounts.
+ */
+export function setMapCamera(camera) {
+    published = camera;
+}
+/**
+ * The plan's camera, if the map is on screen.
+ *
+ * Absent before the canvas has mounted, and in MapLibre mode, where the map is unmounted entirely
+ * and the imperative renderer drives the embed instead.
+ * @returns The camera, or `undefined`.
+ */
+export function mapCamera() {
+    return published;
+}
+/** The camera the mounted map published, if there is one. */
+let published;

package/dist/esm/components/Map/drawing/config/BoothDrawerBase.d.ts

@@ -0,0 +1,8 @@
+import { Booth } from '../../../../store/BoothStore';
+import BoothShape from './BoothShape';
+export declare abstract class BoothDrawerBaseWithoutPainter {
+    protected readonly booth: Booth;
+    protected readonly boothShape: BoothShape;
+    constructor(booth: Booth);
+}
+//# sourceMappingURL=BoothDrawerBase.d.ts.map

package/dist/esm/components/Map/drawing/config/BoothDrawerBase.js

@@ -0,0 +1,8 @@
+import BoothShape from './BoothShape';
+// TODO: get rid of BoothDrawerBaseWithoutPainter
+export class BoothDrawerBaseWithoutPainter {
+    constructor(booth) {
+        this.booth = booth;
+        this.boothShape = BoothShape.get(booth);
+    }
+}

package/dist/esm/components/Map/drawing/config/BoothShape.d.ts

@@ -0,0 +1,7 @@
+import { Booth } from '../../../../store/BoothStore';
+export default class BoothShape {
+    selectBgAnimationPart: number;
+    constructor(booth: Booth);
+    static get(b: Booth): BoothShape;
+}
+//# sourceMappingURL=BoothShape.d.ts.map

package/dist/esm/components/Map/drawing/config/BoothShape.js

@@ -0,0 +1,76 @@
+import { __decorate } from "tslib";
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import { easeQuadInOut } from 'd3-ease';
+import { observable, reaction } from 'mobx';
+import data from '../../../../data';
+import { registerPlanDisposer } from '../../../../plan-lifecycle.js';
+import { eventScopedCache } from '../../../../tools/event-scoped-cache.js';
+import { selectionAnimationPart } from './selection-style.js';
+// Keyed by the live plan's booths — a plain Map would hand the next event's
+// drawing code shapes wrapped around the previous event's booths (ADR-0011).
+const shapes = eventScopedCache();
+// shared booth object with its lifecycle
+export default class BoothShape {
+    constructor(booth) {
+        this.selectBgAnimationPart = 0;
+        //var bgSelected = (t) => (this.selectBgAnimationPart = easeQuadInOut(t));
+        animateProp(() => booth.selected, (t) => (this.selectBgAnimationPart = selectionAnimationPart(data.selectionStyle, booth.selected, easeQuadInOut(t))), 1000, 8, true);
+    }
+    static get(b) {
+        let p = shapes().get(b);
+        if (!p) {
+            p = new BoothShape(b);
+            shapes().set(b, p);
+        }
+        return p;
+    }
+}
+__decorate([
+    observable
+], BoothShape.prototype, "selectBgAnimationPart", void 0);
+function animateProp(val, setter, duration, iterations, reversable) {
+    const func = reversable ? reversableT : plainT;
+    if (iterations % 2 === 1) {
+        iterations++;
+    }
+    // Disposed with the plan: the reaction reads the booth it animates, so an
+    // undisposed one keeps a dead event's booth (and its store) alive.
+    registerPlanDisposer(reaction(val, () => {
+        if (val()) {
+            const animationStart = performance.now();
+            const maxTime = animationStart + iterations * duration;
+            const drawFrame = () => {
+                if (!val())
+                    return;
+                if (performance.now() >= maxTime) {
+                    // explicitly complete with the final color, without this call-animation ends not exactly at final color( (~0.98.. or ~0.99..)
+                    setter(1);
+                    return;
+                }
+                setter(func(animationStart, duration));
+                window.requestAnimationFrame(drawFrame);
+            };
+            drawFrame();
+        }
+        else {
+            setter(0);
+        }
+    }, { fireImmediately: true }));
+    function plainT(start, length) {
+        const now = performance.now();
+        const part = (now - start) % length;
+        // part will be 0 - duration(almost)
+        return part / 1000;
+    }
+    function reversableT(start, length) {
+        const now = performance.now();
+        const part = (now - start) % (length * 2);
+        // part will be 0 - duration almost
+        const partN = part - length;
+        // partN is -duration to + duration (almost) in ms
+        const tN = partN / 1000;
+        // tN = [-duration, duration] in sec
+        // length/1000 will be = 1 only then length is 1000 ms; if duration will have changes, this formula reflects it
+        return 1 - Math.abs(Math.abs(tN) - length / 1000) / (length / 1000);
+    }
+}

package/dist/esm/components/Map/drawing/config/TextFitter.d.ts

@@ -0,0 +1,11 @@
+import { type FontSizeFactor } from '../../../../engine/defs';
+export default class TextFitter {
+    private readonly maxMultilineFontSize;
+    private readonly baseFontSize;
+    private readonly fontSizes;
+    private readonly ctx;
+    private readonly spaceWidth;
+    constructor(fontFunc: (fontSize: number) => string, fontSizes: number[], maxMultilineFontSize: number);
+    getStepsForRect(text: string, width: number, height: number): FontSizeFactor[];
+}
+//# sourceMappingURL=TextFitter.d.ts.map

package/dist/esm/components/Map/drawing/config/TextFitter.js

@@ -0,0 +1,174 @@
+const canvas = document.createElement('canvas').getContext('2d');
+export default class TextFitter {
+    // pass fontsizes and maxmulti in CSS pixels, which is what the text is drawn in
+    constructor(fontFunc, fontSizes, maxMultilineFontSize) {
+        this.baseFontSize = this.maxMultilineFontSize = maxMultilineFontSize;
+        this.fontSizes = fontSizes;
+        this.ctx = canvas;
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'alphabetic';
+        this.ctx.font = fontFunc(this.baseFontSize);
+        this.spaceWidth = this.ctx.measureText(' ').width;
+    }
+    getStepsForRect(text, width, height) {
+        const words = text.split(/\s+/);
+        const blocks = words.map((w) => this.ctx.measureText(w).width);
+        const res = [];
+        let minFactor = Infinity;
+        let minRows = 0;
+        for (const fontSize of this.fontSizes) {
+            const lineHeight = fontSize;
+            const factor = fontSize / this.baseFontSize;
+            const sBlocks = blocks.map((b) => b * factor);
+            const sSpaceWidth = this.spaceWidth * factor;
+            const widths = getLinesSizes(sBlocks, sSpaceWidth, fontSize > this.maxMultilineFontSize ? 1 : Infinity).filter((w) => w);
+            for (let i = 0; i < widths.length; i++) {
+                const w = widths[i];
+                const minWidth = w;
+                const rows = i + 1;
+                const minHeight = lineHeight * rows;
+                const factorW = minWidth / width;
+                const factorH = minHeight / height;
+                const factor = Math.max(factorH, factorW);
+                if (factor > minFactor || rows < minRows)
+                    continue;
+                minFactor = factor;
+                minRows = rows;
+                const lineSetsPossible = getPossibleLineSetsForWidth(w, rows, sBlocks, sSpaceWidth);
+                const lineSetBest = selectBestLines(lineSetsPossible, sBlocks, sSpaceWidth);
+                if (!lineSetBest)
+                    continue;
+                const lines = lineIndicesToLines(lineSetBest, words);
+                res.push({
+                    scaleFactor: factor, // minimum value to fit
+                    value: fontSize,
+                    lines,
+                });
+            }
+        }
+        return res;
+    }
+}
+// utility context-less functions
+function getLinesSizes(blocks, spaceWidth, maxLines) {
+    const res = [];
+    let prevLongestLine = 0;
+    let prevLines = 1;
+    let width = Infinity;
+    let lineWidths;
+    while ((lineWidths = getLineWidthsForMaxWidth(width, blocks, spaceWidth)) &&
+        lineWidths.length <= maxLines) {
+        if (prevLines !== lineWidths.length) {
+            // here we'll come starting with prevLines == 1 and lineWidths.length >= 2
+            res[prevLines - 1] = prevLongestLine;
+        }
+        prevLines = lineWidths.length;
+        prevLongestLine = Math.max(...lineWidths);
+        width = prevLongestLine - 1;
+    }
+    res[prevLines - 1] = prevLongestLine;
+    return res;
+    // 183 - min width for 1 line
+    // 72 - min width for 2 lines
+    // 36 - 3 lines
+    // everythin smaller than 36 doesn't fit anything
+}
+function getLineWidthsForMaxWidth(maxWidth, blocks, spaceWidth) {
+    const lines = [];
+    let currentLineWidth = 0;
+    let currentLineIndex = -1;
+    function startNewLine() {
+        currentLineIndex++;
+        currentLineWidth = 0;
+    }
+    startNewLine();
+    for (const b of blocks) {
+        const supposedWidth = currentLineWidth + (currentLineWidth > 0 ? spaceWidth : 0) + b;
+        if (supposedWidth > maxWidth) {
+            // item doesn't fit
+            if (b > maxWidth)
+                return null;
+            startNewLine();
+            currentLineWidth = b;
+        }
+        else {
+            currentLineWidth = supposedWidth;
+        }
+        lines[currentLineIndex] = currentLineWidth;
+    }
+    return lines;
+}
+function getPossibleLineSetsForWidth(maxWidth, lineCount, blocks, spaceWidth) {
+    return getLineSets(lineCount, 0);
+    // recursive function, returns array of arrays of lines
+    function getLineSets(linesLeft, from) {
+        // if (linesLeft === 0) return [];
+        const lines = getLines(from);
+        const resSets = [];
+        for (const line of lines) {
+            const newFrom = from + line.length;
+            if (newFrom >= blocks.length) {
+                // ended here. no other blocks
+                resSets.push([line]);
+                break;
+            }
+            if (linesLeft > 0) {
+                const vars = getLineSets(linesLeft - 1, newFrom);
+                for (const v of vars) {
+                    if (v.length !== linesLeft - 1)
+                        continue;
+                    resSets.push([line, ...v]);
+                }
+            }
+        }
+        return resSets;
+    }
+    // plain function, returns array of lines
+    function getLines(from) {
+        if (from >= blocks.length)
+            throw new Error('From exceed blocks length');
+        const varyWords = [0, -1];
+        let width = 0;
+        let taken = 0;
+        while (blocks.length > from + taken &&
+            (width += (taken > 0 ? spaceWidth : 0) + blocks[from + taken]) &&
+            width / maxWidth < 1.001 // was width <= maxWidth
+        ) {
+            taken++;
+        }
+        return varyWords
+            .map((v) => taken + v)
+            .filter((len) => len > 0)
+            .map((len) => createRange(from, len));
+        // function createRange(start, length) {
+        //     return Array(length)
+        //         .fill(0)
+        //         .map((_, idx) => start + idx);
+        // }
+        function createRange(start, length) {
+            const c = Array(length);
+            while (length--) {
+                c[length] = length + start;
+            }
+            return c;
+        }
+    }
+}
+function selectBestLines(lineSets, blocks, spaceWidth) {
+    const vars = lineSets.map((ll) => {
+        const widths = ll.map((line) => line.map((i) => blocks[i]).reduce((a, v, i) => a + (i > 0 ? spaceWidth : 0) + v), 0);
+        const dd = standardDeviation(widths);
+        return { ll, dd };
+    });
+    vars.sort((a, b) => a.dd - b.dd);
+    return vars.map((r) => r.ll)[0];
+}
+function standardDeviation(array) {
+    const n = array.length;
+    const mean = array.reduce((a, b) => a + b) / n;
+    return Math.sqrt(array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n);
+}
+function lineIndicesToLines(lineSet, words) {
+    return lineSet.map((line) => line.map((i) => words[i]).reduce((a, v, i) => a + (i > 0 ? ' ' : '') + v), '');
+    // ["line1", "line2"]
+}