@expofp/floorplan 0.0.0-experimental.2d6c681

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

@@ -0,0 +1,643 @@
+import { lineAngle, pointDistance, Rect } from '@expofp/geometry';
+import { update, } from '@expofp/renderer';
+import { useEffect, useRef } from 'react';
+// TODO: Isolate the code from this function
+import baseRuntimeUrl from '../../../tools/base-runtime-url';
+import { loadImage } from '../../../utils/loadImage';
+import { mapCamera } from '../camera';
+import { createCanvas, createImageCanvas, getBounds, imageCanvasCssSize, } from '../drawing/config/canvases';
+import { getRouteLayerRegex, getRouteStopLayerRegex, TRAFFIC_VEHICLES } from './trafficLayers';
+import { UpdateQueue } from './UpdateQueue';
+const LINE_WIDTH = 2;
+const STATION_ICON_RADIUS = LINE_WIDTH * 3.5;
+const VEHICLE_ICON_SIZE = LINE_WIDTH * 12;
+const VEHICLE_FINERY_ICON_SIZE = VEHICLE_ICON_SIZE * 0.7;
+const MAX_PTSCALE = 8;
+const TEARDROP_LINE_WIDTH = 2;
+const TEARDROP_TIP_LENGTH_FACTOR = 0.6;
+const TEARDROP_SHADOW_PADDING = 8;
+const VEHICLE_DATA_MESSAGE_TYPE = 'transport_locations';
+const MAX_DISTANCE = 150;
+const DEFAULT_COLOR = '#a4aab6';
+const DEFAULT_RECONNECT_DELAY = 1000;
+const DEFAULT_HIDE_INACTIVE_VEHICLE_DELAY = 20000;
+const MIN_ANIMATION_TIME = 500;
+export function useManageTraffic({ permission, scene, dataJsonUrl, websocketUrl, }) {
+    const scaleRef = useRef(1);
+    const vehiclesRef = useRef(new Map());
+    const stopAnimationsMapRef = useRef(new Map());
+    const socketRef = useRef(null);
+    const handleSocketMessageRef = useRef(null);
+    // Stamped when a socket session starts; the gap between two messages paces the animation.
+    const lastTimeRef = useRef(0);
+    const animationTimeRef = useRef(1);
+    const updateQueueRef = useRef(new UpdateQueue());
+    const routeMapRef = useRef(new Map());
+    const reconnectDelayRef = useRef(DEFAULT_RECONNECT_DELAY);
+    const hideVehicleMapRef = useRef(new Map());
+    const hideVehicleIntervalRef = useRef(undefined);
+    useEffect(() => {
+        // Without the busRoutes flag nothing below may run: no routes fetch, no `online` listener and
+        // no socket to routes-api (#1621).
+        if (!permission || !scene)
+            return;
+        // The socket outlives this effect unless it is closed explicitly: Blink
+        // holds an open WebSocket as a GC root ("pending activities"), so one left
+        // behind roots this closure — the scene, its layers, and the booths they
+        // draw — for the life of the page, long after the plan is destroyed
+        // (ADR-0011). `disposed` also stops the `onclose` reconnect from building
+        // a fresh socket after teardown.
+        let disposed = false;
+        let reconnectTimer;
+        const allLayers = scene.rootLayer.children;
+        // Read once per run: these refs hold the same objects for the hook's lifetime, and reading
+        // `.current` from the cleanup is what `exhaustive-deps` warns about.
+        const stopAnimationsMap = stopAnimationsMapRef.current;
+        const vehiclesMap = vehiclesRef.current;
+        const updateQueue = updateQueueRef.current;
+        async function init() {
+            try {
+                let data;
+                try {
+                    const resp = await fetch(dataJsonUrl, {
+                        method: 'GET',
+                        headers: { 'Content-Type': 'application/json' },
+                    });
+                    // No bus routes for this plan: server returns 204 No Content (current),
+                    // or 404 (legacy). Either is a successful "nothing to draw" — bail
+                    // silently before attempting to parse a body that isn't JSON.
+                    if (!resp.ok || resp.status === 204) {
+                        return;
+                    }
+                    data = (await resp.json());
+                }
+                catch (err) {
+                    console.warn('useManageTraffic failed to get JSON', err);
+                }
+                // The plan can be destroyed while any of this effect's awaits are in
+                // flight. Everything below builds the layer graph and starts timers,
+                // so without this the teardown that already ran has nothing left to
+                // clean up and the new timer roots the dead plan (ADR-0011).
+                if (disposed)
+                    return;
+                if (!data || data.disabled || data.error) {
+                    return;
+                }
+                // Seeded from the camera when the map publishes one; the vehicles layer's own layout rule
+                // below corrects it the moment the layer registers.
+                scaleRef.current = calcScale(mapCamera()?.state().pixelSize ?? 1);
+                const routeColorMap = new Map(data.routes.map(({ id, color }) => [id, color]));
+                const stopIcons = new Map();
+                routeColorMap.forEach((color) => {
+                    stopIcons.set(color, drawStation({ radius: STATION_ICON_RADIUS, color, scale: window.devicePixelRatio }));
+                });
+                const routeLayerRegex = getRouteLayerRegex();
+                const routeLayers = allLayers.filter((l) => routeLayerRegex.test(l.name));
+                const stopLayerRegex = getRouteStopLayerRegex();
+                const stopLayers = allLayers.filter((l) => stopLayerRegex.test(l.name));
+                data.routes
+                    .slice(0, routeLayers.length)
+                    .forEach(({ id, color, path, stops, hiddenPoints }, i) => {
+                    routeMapRef.current.set(id, path);
+                    const routeLayer = routeLayers[i];
+                    if (routeLayer) {
+                        const hiddenPointsMap = new Map(hiddenPoints?.map((p) => [genHiddenPointId(p), p]) ?? []);
+                        for (let i = 1; i < path.length; i++) {
+                            const p0 = path[i - 1];
+                            const p1 = path[i];
+                            if (hiddenPointsMap.has(genHiddenPointId(p0)) ||
+                                hiddenPointsMap.has(genHiddenPointId(p1))) {
+                                continue;
+                            }
+                            // renderer lines take their endpoints as a LineLike, not the imperative
+                            // renderer's two-element array.
+                            routeLayer.children.push({
+                                points: { p0, p1 },
+                                color,
+                                width: LINE_WIDTH,
+                            });
+                        }
+                        if (routeLayer.children.length) {
+                            updateQueue.add(() => update(routeLayer));
+                        }
+                    }
+                    const stopLayer = stopLayers[i];
+                    const stopIcon = stopIcons.get(color);
+                    if (stopLayer && stopIcon && stops?.length) {
+                        stops.forEach((point) => {
+                            stopLayer.children.push({
+                                source: stopIcon,
+                                bounds: getBounds(point.x, point.y, ...iconSize(stopIcon), scaleRef.current),
+                            });
+                        });
+                        if (stopLayer.children.length) {
+                            updateQueue.add(() => update(stopLayer));
+                        }
+                    }
+                });
+                const vehiclesLayer = allLayers.find((c) => c.name === TRAFFIC_VEHICLES);
+                if (!vehiclesLayer) {
+                    console.warn(`useManageTraffic: the scene has no "${TRAFFIC_VEHICLES}" layer`);
+                    return;
+                }
+                const vehicleIcons = new Map();
+                // Stops and vehicles hold their on-screen size, so the vehicles layer declares the rule
+                // that re-bounds all of them — one rule for the whole subsystem, run by the renderer as
+                // the plan zooms and once at registration, which is what replaces the imperative
+                // `viewport:ptscale` listener and its priming frame.
+                vehiclesLayer.onScale = ({ pixelSize }) => {
+                    scaleRef.current = calcScale(pixelSize);
+                    const changed = [];
+                    for (const stopLayer of stopLayers) {
+                        const stops = stopLayer.children;
+                        for (const stop of stops) {
+                            // Every icon in this subsystem is drawn on a canvas, so each source is a canvas.
+                            // `ImageSource` also covers a `Blob`, which holds bytes and reports no pixel size,
+                            // and the cast states the narrower type that this code always holds.
+                            const icon = stop.source;
+                            stop.bounds = getBounds(stop.bounds.center.x, stop.bounds.center.y, ...iconSize(icon), scaleRef.current, stop.bounds.rotation);
+                            changed.push(stop);
+                        }
+                    }
+                    for (const vehicle of vehiclesRef.current.values()) {
+                        // A canvas again, for the same reason as the stop icons above.
+                        const icon = vehicle.source;
+                        vehicle.bounds = getBounds(vehicle.bounds.center.x, vehicle.bounds.center.y, ...iconSize(icon), scaleRef.current, vehicle.bounds.rotation);
+                        changed.push(vehicle);
+                    }
+                    return changed;
+                };
+                updateQueue.add(() => update(vehiclesLayer));
+                routeColorMap.forEach((color, id) => {
+                    vehicleIcons.set(id, drawTeardrop({
+                        id,
+                        width: VEHICLE_ICON_SIZE,
+                        height: VEHICLE_ICON_SIZE,
+                        color,
+                        scale: window.devicePixelRatio,
+                    }));
+                });
+                const defaultVehicleIcon = drawTeardrop({
+                    id: 'orphan',
+                    width: VEHICLE_ICON_SIZE,
+                    height: VEHICLE_ICON_SIZE,
+                    color: DEFAULT_COLOR,
+                    scale: window.devicePixelRatio,
+                });
+                let vehicleFineryIcon = null;
+                try {
+                    const vehicleFineryImg = await loadImage(`${baseRuntimeUrl}icons/bus-white.svg`);
+                    if (disposed)
+                        return;
+                    vehicleFineryIcon = createImageCanvas(vehicleFineryImg, VEHICLE_FINERY_ICON_SIZE, VEHICLE_FINERY_ICON_SIZE, window.devicePixelRatio);
+                    const { width, height } = imageCanvasCssSize(vehicleFineryImg, VEHICLE_FINERY_ICON_SIZE, VEHICLE_FINERY_ICON_SIZE);
+                    iconCssSizes.set(vehicleFineryIcon, [width, height]);
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                handleSocketMessageRef.current = (event) => {
+                    try {
+                        // The wire shape is not validated: a malformed message fails inside this `try` and is
+                        // logged, as it always was.
+                        const message = JSON.parse(event.data);
+                        if (message.type !== VEHICLE_DATA_MESSAGE_TYPE) {
+                            return;
+                        }
+                        const now = event.timeStamp || performance.now();
+                        animationTimeRef.current = Math.round(now - lastTimeRef.current);
+                        lastTimeRef.current = now;
+                        const animationTime = Math.max(animationTimeRef.current ?? MIN_ANIMATION_TIME, MIN_ANIMATION_TIME);
+                        const vehicleLayerChildren = vehiclesLayer.children;
+                        let hasNewVehicles = false;
+                        message.data.forEach(({ id, x, y, route_id, hidden }) => {
+                            if (stopAnimationsMap.has(id)) {
+                                stopAnimationsMap.get(id)?.();
+                                stopAnimationsMap.delete(id);
+                            }
+                            const vehicle = vehiclesMap.get(id);
+                            const vehicleFinery = vehiclesMap.get(getFineryId(id)) ?? null;
+                            if (hidden && vehicle && vehicleFinery) {
+                                vehicle.hidden = true;
+                                vehicleFinery.hidden = true;
+                                updateQueue.add(() => update(vehicle, vehicleFinery));
+                                return;
+                            }
+                            hideVehicleMapRef.current.set(id, performance.now());
+                            if (!vehicle) {
+                                const vehicleIcon = vehicleIcons.get(route_id) ?? defaultVehicleIcon;
+                                const newVehicle = {
+                                    source: vehicleIcon,
+                                    bounds: getBounds(x, y, ...iconSize(vehicleIcon), scaleRef.current, 0),
+                                };
+                                vehiclesMap.set(id, newVehicle);
+                                if (vehicleFineryIcon) {
+                                    const fineryId = getFineryId(id);
+                                    const newVehicleFinery = {
+                                        source: vehicleFineryIcon,
+                                        bounds: getBounds(x, y, ...iconSize(vehicleFineryIcon), scaleRef.current, 0),
+                                    };
+                                    keepFineryUpright(newVehicleFinery);
+                                    vehicleFineryIcon.setAttribute('id', fineryId);
+                                    vehiclesMap.set(fineryId, newVehicleFinery);
+                                    vehicleLayerChildren.push(newVehicle, newVehicleFinery);
+                                }
+                                else {
+                                    vehicleLayerChildren.push(newVehicle);
+                                }
+                                hasNewVehicles = true;
+                                return;
+                            }
+                            const from = vehicle.bounds.center;
+                            const to = { x, y };
+                            const path = getPathSegment(from, to, routeMapRef.current.get(route_id));
+                            const distance = path.reduce((sum, point, index) => {
+                                if (index === 0)
+                                    return sum;
+                                return sum + calcDistance(path[index - 1], point);
+                            }, 0);
+                            if (distance >= MAX_DISTANCE || document.hidden) {
+                                moveVehicle({
+                                    updateQueue,
+                                    vehicle,
+                                    vehicleFinery,
+                                    x,
+                                    y,
+                                    scale: scaleRef.current,
+                                    angle: calcAngle(vehicle.bounds.center, { x, y }),
+                                });
+                            }
+                            else {
+                                const stopAnimation = animateAlongPath(path, animationTime, (pos) => {
+                                    moveVehicle({
+                                        updateQueue,
+                                        vehicle,
+                                        vehicleFinery,
+                                        x: pos.x,
+                                        y: pos.y,
+                                        scale: scaleRef.current,
+                                        angle: pos.angle,
+                                    });
+                                });
+                                stopAnimationsMap.set(id, stopAnimation);
+                            }
+                        });
+                        if (hasNewVehicles) {
+                            updateQueue.add(() => update(vehiclesLayer));
+                        }
+                    }
+                    catch (err) {
+                        console.error('handleSocketMessage', err);
+                    }
+                };
+                lastTimeRef.current = performance.now();
+                connect();
+                window.addEventListener('online', handleOnline);
+                startHideVehicleInterval(data.config
+                    ? (Number(data.config.vehicle_inactive_interval) || 20) * 1000
+                    : DEFAULT_HIDE_INACTIVE_VEHICLE_DELAY);
+            }
+            catch (err) {
+                console.warn(err);
+            }
+        }
+        init();
+        function connect() {
+            if (disposed ||
+                socketRef.current?.readyState === WebSocket.OPEN ||
+                socketRef.current?.readyState === WebSocket.CONNECTING) {
+                return;
+            }
+            socketRef.current = new WebSocket(websocketUrl);
+            socketRef.current.onmessage = handleSocketMessageRef.current;
+            socketRef.current.onopen = () => {
+                reconnectDelayRef.current = DEFAULT_RECONNECT_DELAY;
+            };
+            socketRef.current.onclose = () => {
+                if (disposed || !navigator.onLine) {
+                    return;
+                }
+                reconnectTimer = window.setTimeout(connect, reconnectDelayRef.current);
+                const thirtySeconds = 30000;
+                reconnectDelayRef.current = Math.min(reconnectDelayRef.current * 2, thirtySeconds);
+            };
+        }
+        function handleOnline() {
+            connect();
+        }
+        function startHideVehicleInterval(hideInactiveVehicleDelay) {
+            clearInterval(hideVehicleIntervalRef.current);
+            if (disposed)
+                return;
+            hideVehicleIntervalRef.current = window.setInterval(() => {
+                const performanceNow = performance.now();
+                const hidden = [];
+                const result = [];
+                hideVehicleMapRef.current.forEach((timeout, id) => {
+                    if (performanceNow - timeout < hideInactiveVehicleDelay) {
+                        return;
+                    }
+                    const vehicle = vehiclesMap.get(id);
+                    if (vehicle) {
+                        vehicle.hidden = true;
+                        result.push(vehicle);
+                        hidden.push(id);
+                    }
+                    const fineryId = getFineryId(id);
+                    const vehicleFinery = vehiclesMap.get(fineryId);
+                    if (vehicleFinery) {
+                        vehicleFinery.hidden = true;
+                        result.push(vehicleFinery);
+                        hidden.push(fineryId);
+                    }
+                });
+                if (result.length) {
+                    updateQueue.add(() => update(...result));
+                }
+                hidden.forEach((id) => hideVehicleMapRef.current.delete(id));
+            }, hideInactiveVehicleDelay);
+        }
+        return () => {
+            disposed = true;
+            clearTimeout(reconnectTimer);
+            // Handlers first: `close()` fires `onclose`, which would otherwise
+            // schedule the reconnect that rebuilds the root this is undoing.
+            const socket = socketRef.current;
+            if (socket) {
+                socket.onopen = null;
+                socket.onmessage = null;
+                socket.onclose = null;
+                socket.close();
+                socketRef.current = null;
+            }
+            handleSocketMessageRef.current = null;
+            const vehiclesLayer = allLayers.find((c) => c.name === TRAFFIC_VEHICLES);
+            if (vehiclesLayer)
+                vehiclesLayer.onScale = undefined;
+            stopAnimationsMap.forEach((func) => func?.());
+            stopAnimationsMap.clear();
+            vehiclesMap.clear();
+            updateQueue.destroy();
+            window.removeEventListener('online', handleOnline);
+            clearInterval(hideVehicleIntervalRef.current);
+        };
+    }, [permission, scene, dataJsonUrl, websocketUrl]);
+}
+/**
+ * The CSS size an icon in this subsystem is drawn at. Not the canvas's `width` and `height`: those
+ * are its backing store, in the device pixels it was rasterized at, which says how crisp the icon is
+ * and nothing about how big.
+ * @param icon - An icon made by one of the creators below.
+ * @returns Its CSS width and height.
+ */
+function iconSize(icon) {
+    const size = iconCssSizes.get(icon);
+    if (!size)
+        throw new Error('useManageTraffic: an icon was drawn without a recorded CSS size');
+    return size;
+}
+/**
+ * The CSS size of a station icon of this radius.
+ * @param radius - The station's radius in CSS pixels.
+ * @returns The width and height, which are equal.
+ */
+function stationCssSize(radius) {
+    return radius * 2;
+}
+/**
+ * The CSS size of a teardrop icon: the drop, its stroke, its tip and the padding its shadow needs.
+ * The drop is drawn turned a quarter, so the canvas is wider than the icon is tall.
+ * @param width - The drop's width in CSS pixels.
+ * @param height - The drop's height in CSS pixels.
+ * @returns The canvas's width and height.
+ */
+function teardropCssSize(width, height) {
+    const tipLength = height * TEARDROP_TIP_LENGTH_FACTOR;
+    const padding = TEARDROP_SHADOW_PADDING * 2;
+    return [
+        height + TEARDROP_LINE_WIDTH + tipLength / 2 + padding,
+        width + tipLength + TEARDROP_LINE_WIDTH + padding,
+    ];
+}
+function calcScale(ptscale) {
+    return Math.min(ptscale || 1, MAX_PTSCALE);
+}
+function calcAngle(p0, p1) {
+    return lineAngle(p0, p1);
+}
+function drawStation({ radius, scale, color, }) {
+    const size = Math.ceil(radius * 2 * scale);
+    const canvas = createCanvas(size, size, scale);
+    iconCssSizes.set(canvas, [stationCssSize(radius), stationCssSize(radius)]);
+    const ctx = canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = false;
+    const center = size / 2;
+    const middleRadius = radius * 0.78;
+    const innerRadius = radius * 0.33;
+    ctx.translate(center, center);
+    ctx.scale(scale, scale);
+    ctx.beginPath();
+    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(0, 0, middleRadius, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(0, 0, innerRadius, 0, 2 * Math.PI);
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fill();
+    return canvas;
+}
+function drawTeardrop({ id, width, height, color, scale, }) {
+    const lineWidth = TEARDROP_LINE_WIDTH * scale;
+    const halfWidth = (width / 2) * scale;
+    const scaledHeight = height * scale;
+    const tipLengthFactor = TEARDROP_TIP_LENGTH_FACTOR;
+    const tipWidthFactor = 0.01;
+    const tipLength = scaledHeight * tipLengthFactor;
+    const dropHeightBeforeRotation = scaledHeight;
+    const shadowPadding = TEARDROP_SHADOW_PADDING * scale;
+    const canvasWidth = dropHeightBeforeRotation + lineWidth + tipLength / 2 + shadowPadding * 2;
+    const canvasHeight = halfWidth * 2 + tipLength + lineWidth + shadowPadding * 2;
+    const canvas = createCanvas(canvasWidth, canvasHeight, scale);
+    iconCssSizes.set(canvas, teardropCssSize(width, height));
+    canvas.setAttribute('id', id);
+    const ctx = canvas.getContext('2d');
+    const cx = canvasWidth / 2;
+    const cy = canvasHeight / 2;
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(-Math.PI / 2);
+    ctx.translate(-cx, -cy);
+    const x = cx;
+    const y = cy - dropHeightBeforeRotation / 2 + halfWidth;
+    const tipY = y + tipLength;
+    ctx.shadowColor = 'rgba(16, 24, 40, 0.2)';
+    ctx.shadowBlur = shadowPadding / 2;
+    ctx.beginPath();
+    ctx.arc(x, y, halfWidth, Math.PI, 0, false);
+    ctx.bezierCurveTo(x + halfWidth, y + scaledHeight * 0.3, x + tipWidthFactor * halfWidth, tipY, x, tipY);
+    ctx.bezierCurveTo(x - tipWidthFactor * halfWidth, tipY, x - halfWidth, y + scaledHeight * 0.3, x - halfWidth, y);
+    ctx.closePath();
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.strokeStyle = '#FFFFFF';
+    ctx.lineWidth = lineWidth;
+    ctx.stroke();
+    ctx.restore();
+    return canvas;
+}
+function calcDistance(a, b) {
+    return pointDistance(a, b);
+}
+function getFineryId(id) {
+    return `${id}_finery`;
+}
+/**
+ * Declares the bus glyph's camera-roll rule, which keeps it upright on screen in either view: the
+ * renderer runs it as the glyph registers and on every roll change. The glyph turns to the plan's
+ * exact roll, so an unchanged roll is the only no-op.
+ * @param vehicleFinery - The bus glyph.
+ */
+function keepFineryUpright(vehicleFinery) {
+    vehicleFinery.onRoll = ({ roll }) => {
+        const { bounds } = vehicleFinery;
+        if (roll === bounds.rotation)
+            return undefined;
+        // `rotate` adds a delta, so subtract the current turn.
+        bounds.rotate(roll - bounds.rotation, bounds);
+        return [vehicleFinery];
+    };
+}
+function moveVehicle({ updateQueue, vehicle, vehicleFinery, x, y, scale, angle, }) {
+    // A canvas again, for the same reason as the icons in the layer's `onScale` rule.
+    const icon = vehicle.source;
+    vehicle.bounds = getBounds(x, y, ...iconSize(icon), scale, angle);
+    vehicle.hidden = false;
+    if (vehicleFinery) {
+        // The bus glyph only moves: the layer's `onScale` sizes it and its own `onRoll` turns it,
+        // where the teardrop under it turns with the route.
+        const { size, rotation, elevation } = vehicleFinery.bounds;
+        vehicleFinery.bounds = new Rect({ x, y }, size, rotation, elevation);
+        vehicleFinery.hidden = false;
+        updateQueue.add(() => update(vehicleFinery, vehicle));
+    }
+    else {
+        updateQueue.add(() => update(vehicle));
+    }
+}
+function interpolate(a, b, t) {
+    return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+}
+function findNearestSegment(point, path) {
+    let minDist = Infinity;
+    let best = { index: 0, t: 0 };
+    for (let i = 0; i < path.length - 1; i++) {
+        const a = path[i], b = path[i + 1];
+        const dx = b.x - a.x, dy = b.y - a.y;
+        const len2 = dx * dx + dy * dy;
+        const t = len2 ? ((point.x - a.x) * dx + (point.y - a.y) * dy) / len2 : 0;
+        const clampedT = Math.max(0, Math.min(1, t));
+        const proj = interpolate(a, b, clampedT);
+        const dist = calcDistance(point, proj);
+        if (dist < minDist) {
+            minDist = dist;
+            best = { index: i, t: clampedT };
+        }
+    }
+    return best;
+}
+function buildStraightLine(start, end, step) {
+    const distance = calcDistance(start, end);
+    const numPoints = Math.max(2, Math.ceil(distance / step) + 1);
+    const line = [];
+    for (let i = 0; i < numPoints; i++) {
+        const t = i / (numPoints - 1);
+        const point = interpolate(start, end, t);
+        line.push(point);
+    }
+    return line;
+}
+function getPathSegment(from, to, path) {
+    if (!path || !path.length) {
+        return buildStraightLine(from, to, 10);
+    }
+    const fromPos = findNearestSegment(from, path);
+    const toPos = findNearestSegment(to, path);
+    const segment = [];
+    const pushPoint = (p) => segment.push(p);
+    if (fromPos.index + 1 < path.length) {
+        pushPoint(interpolate(path[fromPos.index], path[fromPos.index + 1], fromPos.t));
+    }
+    else {
+        pushPoint(path[fromPos.index]);
+    }
+    for (let i = fromPos.index + 1; i <= toPos.index && i < path.length; i++) {
+        pushPoint(path[i]);
+    }
+    if (toPos.index + 1 < path.length) {
+        pushPoint(interpolate(path[toPos.index], path[toPos.index + 1], toPos.t));
+    }
+    else {
+        pushPoint(path[toPos.index]);
+    }
+    return segment;
+}
+function animateAlongPath(path, duration, onUpdate, onComplete) {
+    if (path.length < 2) {
+        return () => {
+            // Nothing was started, so there is nothing to stop.
+        };
+    }
+    let startTime = null;
+    let requestId;
+    const segmentLengths = [];
+    let totalLength = 0;
+    for (let i = 0; i < path.length - 1; i++) {
+        const len = pointDistance(path[i], path[i + 1]);
+        segmentLengths.push(len);
+        totalLength += len;
+    }
+    const animate = (time) => {
+        if (!startTime)
+            startTime = time;
+        const elapsed = time - startTime;
+        const t = Math.min(elapsed / duration, 1);
+        const distanceAlongPath = t * totalLength;
+        let distAccum = 0;
+        let segmentIndex = 0;
+        while (segmentIndex < segmentLengths.length &&
+            distAccum + segmentLengths[segmentIndex] < distanceAlongPath) {
+            distAccum += segmentLengths[segmentIndex];
+            segmentIndex++;
+        }
+        if (segmentIndex >= segmentLengths.length)
+            segmentIndex = segmentLengths.length - 1;
+        const segStart = path[segmentIndex];
+        const segEnd = path[Math.min(segmentIndex + 1, path.length - 1)];
+        const segLength = segmentLengths[segmentIndex] || 0;
+        const segT = segLength === 0 ? 0 : (distanceAlongPath - distAccum) / segLength;
+        const x = segStart.x + (segEnd.x - segStart.x) * segT;
+        const y = segStart.y + (segEnd.y - segStart.y) * segT;
+        const angle = lineAngle(segStart, segEnd);
+        onUpdate({ x, y, angle });
+        if (t < 1) {
+            requestId = requestAnimationFrame(animate);
+        }
+        else if (onComplete) {
+            onComplete();
+        }
+    };
+    requestId = requestAnimationFrame(animate);
+    return () => {
+        if (requestId)
+            cancelAnimationFrame(requestId);
+    };
+}
+function genHiddenPointId(p) {
+    return `${p.x},${p.y}`;
+}
+/** The CSS size each icon canvas is drawn at, recorded by the creators that made it. */
+const iconCssSizes = new WeakMap();