@expofp/floorplan 0.0.0-experimental.cf063fc

package/dist/esm/components/Map/traffic/useBuildRoute.js

@@ -0,0 +1,359 @@
+import { lineIntersection } from '@expofp/geometry';
+import { update, } from '@expofp/renderer';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { mapCamera } from '../camera';
+import { circleCanvasCssSize, createCircleCanvas, getBounds } from '../drawing/config/canvases';
+import { setPlanClickListener } from '../pointer';
+import { BUILD_ROUTE_DOTS, BUILD_ROUTE_LINES } from './trafficLayers';
+import { UpdateQueue } from './UpdateQueue';
+const lightness = 49;
+const POINT_COLOR = `hsl(257, 76%, ${lightness}%)`;
+const POINT_ACCENT_COLOR = `hsl(339.903, 82%, ${lightness}%)`;
+const LINE_COLOR = `hsl(257, 76%, ${Math.round(lightness * 1.82)}%)`;
+const POINT_RADIUS = 4;
+/** The CSS size both point icons are drawn at; the canvas's backing store is not the size. */
+const POINT_CSS_SIZE = circleCanvasCssSize(POINT_RADIUS);
+const LINE_WIDTH = POINT_RADIUS;
+const UNDO_KEY = 'U';
+const APPLY_SMOOTHING_KEY = 'R';
+const APPLY_SIMPLIFICATION_KEY = 'S';
+const PREVIEW_KEY = 'P';
+class BuildRouteManager {
+    constructor() {
+        this._state = [[]];
+        this.index = 0;
+        this.pointHashSet = new Set();
+        this.locked = false;
+        this.storageKey = 'expofp_build_route_state';
+        this._selected = 0;
+    }
+    get points() {
+        return this._state[this.index];
+    }
+    set points(value) {
+        this._state.push(value);
+        this.setIndex();
+        this.save();
+    }
+    setIndex() {
+        this.index = Math.max(this._state.length - 1, 0);
+    }
+    genPointHash(point) {
+        return `${point.x},${point.y}`;
+    }
+    add(point) {
+        const hash = this.genPointHash(point);
+        if (this.pointHashSet.has(hash)) {
+            return;
+        }
+        this.pointHashSet.add(hash);
+        this.points = [...this.points, point];
+    }
+    undo() {
+        if (!this.index) {
+            return;
+        }
+        this._state.pop();
+        this.setIndex();
+        this.save();
+        this.select(this.points.length - 1);
+    }
+    execute(fn) {
+        try {
+            if (this.locked) {
+                return;
+            }
+            this.locked = true;
+            fn();
+        }
+        finally {
+            requestAnimationFrame(() => {
+                this.locked = false;
+            });
+        }
+    }
+    log(msg, fontSize = 12) {
+        console.log(`%c${msg}`, `color: black; font-size: ${fontSize}px; background: LemonChiffon;`);
+    }
+    instruct() {
+        this.log(`How to Build a Route:
+Add Point: Click on the map.
+Apply Smoothing: Press ${APPLY_SMOOTHING_KEY}.
+Apply Simplification: Press ${APPLY_SIMPLIFICATION_KEY}.
+Undo: Press ${UNDO_KEY}.
+Enable/Disable Preview: Press ${PREVIEW_KEY}.
+`, 16);
+    }
+    applyChaikinSmoothing(points, iterations, addPoints) {
+        let smoothedPoints;
+        if (addPoints >= 1 && points.length >= 2) {
+            smoothedPoints = [points[0]];
+            for (let i = 1; i < points.length; i++) {
+                const prev = points[i - 1];
+                const current = points[i];
+                for (let j = 1; j <= addPoints; j++) {
+                    const t = j / (addPoints + 1);
+                    smoothedPoints.push({
+                        x: prev.x + (current.x - prev.x) * t,
+                        y: prev.y + (current.y - prev.y) * t,
+                    });
+                }
+                smoothedPoints.push(current);
+            }
+        }
+        else {
+            smoothedPoints = points.slice();
+        }
+        for (let i = 0; i < iterations; i++) {
+            if (smoothedPoints.length < 2)
+                break;
+            const temp = [{ ...smoothedPoints[0] }];
+            for (let j = 1; j < smoothedPoints.length; j++) {
+                const prev = smoothedPoints[j - 1];
+                const current = smoothedPoints[j];
+                temp.push({
+                    x: 0.75 * prev.x + 0.25 * current.x,
+                    y: 0.75 * prev.y + 0.25 * current.y,
+                });
+                temp.push({
+                    x: 0.25 * prev.x + 0.75 * current.x,
+                    y: 0.25 * prev.y + 0.75 * current.y,
+                });
+            }
+            temp.push({ ...smoothedPoints[smoothedPoints.length - 1] });
+            smoothedPoints = temp;
+        }
+        return smoothedPoints;
+    }
+    applySmoothing() {
+        if (this.points.length < 3) {
+            return;
+        }
+        this.points = this.applyChaikinSmoothing(this.points, 1, 0);
+        this.select(this.points.length - 1);
+    }
+    save() {
+        try {
+            if (this.points.length) {
+                sessionStorage.setItem(this.storageKey, JSON.stringify(this.points));
+            }
+            else {
+                sessionStorage.removeItem(this.storageKey);
+            }
+        }
+        catch (err) {
+            console.warn(err);
+        }
+    }
+    restore() {
+        try {
+            const rawData = sessionStorage.getItem(this.storageKey);
+            if (!rawData) {
+                return;
+            }
+            const points = JSON.parse(rawData);
+            if (!Array.isArray(points)) {
+                return;
+            }
+            points.forEach((point) => this.add(point));
+            this.select(this.points.length - 1);
+        }
+        catch (err) {
+            console.warn(err);
+        }
+    }
+    topologyPreservingSimplify(points, epsilon) {
+        if (points.length <= 2)
+            return points.map((p) => ({ ...p }));
+        const perpendicularDistance = (point, lineStart, lineEnd) => {
+            const x = point.x, y = point.y;
+            const x1 = lineStart.x, y1 = lineStart.y;
+            const x2 = lineEnd.x, y2 = lineEnd.y;
+            const numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
+            const denominator = Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2);
+            return numerator / (denominator || 1e-10);
+        };
+        const segmentsIntersect = (a1, a2, b1, b2) => {
+            const r = lineIntersection({ p0: a1, p1: a2 }, { p0: b1, p1: b2 });
+            return r !== null && r.onLine1 && r.onLine2;
+        };
+        const keep = new Array(points.length).fill(false);
+        keep[0] = keep[keep.length - 1] = true;
+        const simplified = [];
+        const simplifySection = (startIdx, endIdx) => {
+            if (endIdx <= startIdx + 1)
+                return;
+            const start = points[startIdx];
+            const end = points[endIdx];
+            let maxDist = 0;
+            let maxIdx = 0;
+            for (let i = startIdx + 1; i < endIdx; i++) {
+                const dist = perpendicularDistance(points[i], start, end);
+                if (dist > maxDist) {
+                    maxDist = dist;
+                    maxIdx = i;
+                }
+            }
+            if (maxDist > epsilon) {
+                const newPoint = points[maxIdx];
+                let isValid = true;
+                for (let i = 0; i < simplified.length - 1; i++) {
+                    if (segmentsIntersect(simplified[i], simplified[i + 1], start, newPoint) ||
+                        segmentsIntersect(simplified[i], simplified[i + 1], newPoint, end)) {
+                        isValid = false;
+                        break;
+                    }
+                }
+                if (isValid) {
+                    keep[maxIdx] = true;
+                    simplifySection(startIdx, maxIdx);
+                    simplifySection(maxIdx, endIdx);
+                }
+            }
+        };
+        simplifySection(0, points.length - 1);
+        return points.filter((_, idx) => keep[idx]);
+    }
+    applySimplification() {
+        this.points = this.topologyPreservingSimplify(this.points, 0.5);
+        this.select(this.points.length - 1);
+    }
+    get selected() {
+        return this._selected;
+    }
+    select(index) {
+        this._selected = Math.max(0, Math.min(index, this.points.length - 1));
+    }
+}
+export function useBuildRoute({ enabled, scene }) {
+    const previewRef = useRef(false);
+    const ptScaleRef = useRef(1);
+    const iconCanvas = useMemo(() => createCircleCanvas(POINT_RADIUS, POINT_COLOR), []);
+    const iconAccentCanvas = useMemo(() => createCircleCanvas(POINT_RADIUS, POINT_ACCENT_COLOR), []);
+    const buildRouteManager = useMemo(() => new BuildRouteManager(), []);
+    const updateQueueRef = useRef(new UpdateQueue());
+    const layers = useMemo(() => {
+        if (!scene)
+            return {};
+        const allLayers = scene.rootLayer.children;
+        const linesLayer = allLayers.find((c) => c.name === BUILD_ROUTE_LINES);
+        const pointsLayer = allLayers.find((c) => c.name === BUILD_ROUTE_DOTS);
+        return { linesLayer, pointsLayer };
+    }, [scene]);
+    const draw = useCallback(() => {
+        if (!layers || !iconCanvas || !iconAccentCanvas)
+            return;
+        const { linesLayer, pointsLayer } = layers;
+        if (!linesLayer || !pointsLayer)
+            return;
+        const points = buildRouteManager.points;
+        const preview = previewRef.current;
+        if (preview) {
+            pointsLayer.children.length = 0;
+        }
+        else {
+            pointsLayer.children = points.map(({ x, y }, i) => {
+                const source = i == buildRouteManager.selected ? iconAccentCanvas : iconCanvas;
+                return {
+                    source,
+                    bounds: getBounds(x, y, POINT_CSS_SIZE, POINT_CSS_SIZE, ptScaleRef.current),
+                };
+            });
+        }
+        const lines = [];
+        for (let i = 1; i < points.length; i++) {
+            const p0 = points[i - 1];
+            const p1 = points[i];
+            lines.push({
+                points: { p0, p1 },
+                color: preview ? POINT_COLOR : LINE_COLOR,
+                width: LINE_WIDTH,
+            });
+        }
+        if (lines.length) {
+            linesLayer.children = lines;
+        }
+        else {
+            linesLayer.children.length = 0;
+        }
+        updateQueueRef.current.add(() => update(pointsLayer, linesLayer));
+        buildRouteManager.instruct();
+        buildRouteManager.log(JSON.stringify(buildRouteManager.points));
+    }, [buildRouteManager, layers, iconCanvas, iconAccentCanvas]);
+    const handleKeyUp = useCallback((event) => {
+        const eventKey = event.key.toUpperCase();
+        buildRouteManager.execute(() => {
+            switch (eventKey) {
+                case UNDO_KEY:
+                    event.preventDefault();
+                    buildRouteManager.undo();
+                    previewRef.current = false;
+                    draw();
+                    break;
+                case APPLY_SMOOTHING_KEY:
+                    event.preventDefault();
+                    buildRouteManager.applySmoothing();
+                    previewRef.current = false;
+                    draw();
+                    break;
+                case APPLY_SIMPLIFICATION_KEY:
+                    event.preventDefault();
+                    buildRouteManager.applySimplification();
+                    previewRef.current = false;
+                    draw();
+                    break;
+                case PREVIEW_KEY:
+                    event.preventDefault();
+                    previewRef.current = !previewRef.current;
+                    draw();
+                    break;
+            }
+        });
+    }, [buildRouteManager, draw]);
+    const handleScale = useCallback((pixelSize) => {
+        ptScaleRef.current = pixelSize;
+        const { pointsLayer } = layers;
+        if (!pointsLayer)
+            return [];
+        const updates = [];
+        buildRouteManager.execute(() => {
+            const points = pointsLayer.children;
+            for (const point of points) {
+                point.bounds = getBounds(point.bounds.center.x, point.bounds.center.y, POINT_CSS_SIZE, POINT_CSS_SIZE, ptScaleRef.current);
+                updates.push(point);
+            }
+        });
+        return updates;
+    }, [layers, buildRouteManager]);
+    const handleClick = useCallback((point) => {
+        buildRouteManager.execute(() => {
+            buildRouteManager.add({ x: point.x, y: point.y });
+            buildRouteManager.select(buildRouteManager.points.length - 1);
+            draw();
+        });
+    }, [buildRouteManager, draw]);
+    useEffect(() => {
+        if (!enabled || !layers?.pointsLayer)
+            return;
+        const { pointsLayer } = layers;
+        ptScaleRef.current = mapCamera()?.state().pixelSize ?? 1;
+        buildRouteManager.execute(() => {
+            buildRouteManager.restore();
+            draw();
+        });
+        // The renderer re-sizes the authored dots as the plan zooms; registration also delivers the
+        // real pixel size before the first paint. Clicks arrive through the plan-click seam the
+        // pointer path exposes, exactly as the kiosk's do.
+        pointsLayer.onScale = ({ pixelSize }) => handleScale(pixelSize);
+        const updateQueue = updateQueueRef.current;
+        updateQueue.add(() => update(pointsLayer));
+        setPlanClickListener(handleClick);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('keyup', handleKeyUp);
+            setPlanClickListener();
+            pointsLayer.onScale = undefined;
+            updateQueue.destroy();
+        };
+    }, [enabled, layers, buildRouteManager, draw, handleClick, handleScale, handleKeyUp]);
+}

package/dist/esm/components/Map/traffic/useManageTraffic.d.ts

@@ -0,0 +1,10 @@
+import { type SceneDef } from '@expofp/renderer';
+export interface ManageTrafficParams {
+    permission: boolean;
+    /** The scene whose traffic layers this fills; `config-all` pre-creates them in it. */
+    scene: SceneDef | undefined;
+    dataJsonUrl: string;
+    websocketUrl: string;
+}
+export declare function useManageTraffic({ permission, scene, dataJsonUrl, websocketUrl, }: ManageTrafficParams): void;
+//# sourceMappingURL=useManageTraffic.d.ts.map