@graview/react 0.1.27 → 0.1.29

package/dist/ribbons-layer.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { districtOf, mapChoice, ribbonsOf, ribbonSentence } from "./map-choice.js";
+import { ribbonWidth } from "./ribbon-width.js";
+import { loopPoints, midpointOf, onCanvas, pathOf, routeOnTheGround } from "./ribbons.js";
+import "./provider.js"; // A door: tied to what the page drew first (TIED DOORS, packages/primitives/src/frame.ts).
+export function Ribbons({ frame, width, height, pan, store, graphVersion: nodes, selection, view, emphasis, hiddenKinds, drawn: kitDraws }) {
+    const [pointed, setPointed] = useState(null);
+    const city = frame.city;
+    const kindOf = (id) => store.graph.getNode(id)?.kind;
+    const ribbons = useMemo(() => ribbonsOf(store.graph.allEdges(), (id) => store.graph.getNode(id)?.kind), [store, nodes]);
+    const plots = new Map();
+    for (const node of frame.nodes) {
+        const kind = node.id.startsWith("kind:") ? districtOf(node.id) : null;
+        if (kind !== null && node.plot && Math.round(node.plane) === 2)
+            plots.set(kind, node.plot);
+    }
+    const plotsKey = [...plots].map(([kind, plot]) => `${kind}:${plot.col},${plot.row},${plot.side}`).join(";");
+    const cell = city?.cell ?? 0;
+    const drawable = ribbons.filter((ribbon) => plots.has(ribbon.from) && plots.has(ribbon.to) && !hiddenKinds.has(ribbon.from) && !hiddenKinds.has(ribbon.to) && kitDraws(ribbon.edge));
+    const tilt = city?.tilt ?? 0.5;
+    /*
+     * THE DISTRICTS' NAME CARDS, where they were drawn: a ribbon goes round
+     * them rather than behind them. Measured once the picture has landed, on
+     * the canvas from the city's origin, so a pan moves nothing here.
+     */
+    const [labels, setLabels] = useState([]);
+    const labelsKey = labels.map((box) => `${Math.round(box.x)},${Math.round(box.y)},${Math.round(box.width)},${Math.round(box.height)}`).join(";");
+    const [svg, setSvg] = useState(null);
+    const settled = frame.t >= 1;
+    useLayoutEffect(() => {
+        const ground = svg?.parentElement;
+        if (!ground || !city || !settled)
+            return;
+        const box = ground.getBoundingClientRect();
+        const ox = city.originX + pan.x;
+        const oy = city.originY + pan.y;
+        const found = [...ground.querySelectorAll('[data-graview-view^="kind:"] .graview-kind-face')].flatMap((el) => {
+            const at = el.getBoundingClientRect();
+            return at.width > 0 && at.height > 0 ? [{ x: at.left - box.left - ox, y: at.top - box.top - oy, width: at.width, height: at.height }] : [];
+        });
+        const key = found.map((one) => `${Math.round(one.x)},${Math.round(one.y)},${Math.round(one.width)},${Math.round(one.height)}`).join(";");
+        if (key !== labelsKey)
+            setLabels(found);
+        // Measured again when the plots or the city's scale move the cards.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [svg, settled, plotsKey, cell, tilt]);
+    const routed = useMemo(() => {
+        if (cell === 0)
+            return [];
+        const loops = new Map();
+        const most = Math.max(0, ...drawable.map((ribbon) => ribbon.links));
+        const runs = routeOnTheGround({
+            ribbons: drawable.map((ribbon) => ({ key: ribbon.key, from: ribbon.from, to: ribbon.to, width: ribbonWidth(ribbon.links, most) })),
+            plots,
+            cell,
+            tilt,
+            labels,
+        });
+        return drawable.flatMap((ribbon) => {
+            let points;
+            if (ribbon.from === ribbon.to) {
+                const index = loops.get(ribbon.from) ?? 0;
+                loops.set(ribbon.from, index + 1);
+                points = onCanvas(loopPoints(plots.get(ribbon.from), index), { cell, tilt });
+            }
+            else
+                points = runs.get(ribbon.key);
+            if (!points || points.length < 2)
+                return [];
+            return [{ ribbon, points, d: pathOf(points), middle: midpointOf(points), width: ribbonWidth(ribbon.links, most) }];
+        });
+        // `plotsKey` stands for the plots; `drawable` follows the ribbons and the kit.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cell, tilt, plotsKey, ribbons, kitDraws, hiddenKinds, labelsKey]);
+    /*
+     * POINTED AT, NEVER PRESSED. A ribbon runs up to its districts' curbs,
+     * where their names and controls are, and a hit stroke over it took their
+     * presses. So the ground is listened to instead: a mouse or a pen over
+     * bare ground near a ribbon says it, and anything drawn there — a card,
+     * a control, a panel — keeps the pointer as it always had.
+     */
+    const bands = useRef([]);
+    const at = useRef({ x: 0, y: 0 });
+    at.current = city ? { x: city.originX + pan.x, y: city.originY + pan.y } : { x: 0, y: 0 };
+    useEffect(() => {
+        const ground = svg?.parentElement;
+        if (!ground || typeof window === "undefined")
+            return;
+        let queued = 0;
+        let last = null;
+        const look = () => {
+            queued = 0;
+            const event = last;
+            if (!event)
+                return;
+            const target = event.target;
+            if (event.pointerType === "touch" || event.buttons !== 0 || target?.closest("[data-graview-view], button, a, input, select, textarea, [data-graview-overlay], [data-graview-offstage]")) {
+                setPointed(null);
+                return;
+            }
+            const box = ground.getBoundingClientRect();
+            const x = event.clientX - box.left - at.current.x;
+            const y = event.clientY - box.top - at.current.y;
+            let found = null;
+            let nearest = Infinity;
+            for (const band of bands.current) {
+                const gap = distanceTo(band.points, x, y);
+                if (gap <= band.reach && gap < nearest) {
+                    nearest = gap;
+                    found = band.key;
+                }
+            }
+            setPointed(found);
+        };
+        const move = (event) => {
+            last = event;
+            if (queued === 0)
+                queued = requestAnimationFrame(look);
+        };
+        const leave = () => setPointed(null);
+        ground.addEventListener("pointermove", move, { passive: true });
+        ground.addEventListener("pointerleave", leave);
+        return () => {
+            if (queued !== 0)
+                cancelAnimationFrame(queued);
+            ground.removeEventListener("pointermove", move);
+            ground.removeEventListener("pointerleave", leave);
+        };
+    }, [svg]);
+    if (!city || !view.overview || routed.length === 0)
+        return null;
+    const choice = mapChoice(selection, view, kindOf);
+    // A record's own links say it; an open lens is not drawn over.
+    if (choice.records.length > 0 || choice.lens !== null)
+        return null;
+    const shown = choice.districts.length > 0 ? routed.filter(({ ribbon }) => choice.districts.includes(ribbon.from) || choice.districts.includes(ribbon.to)) : routed;
+    if (shown.length === 0)
+        return null;
+    const asking = emphasis ?? null;
+    const said = shown.find(({ ribbon }) => ribbon.key === pointed);
+    bands.current = shown.map(({ ribbon, points, width: wide }) => ({ key: ribbon.key, points, reach: wide / 2 + 6 }));
+    const origin = { x: city.originX + pan.x, y: city.originY + pan.y };
+    const transform = `translate(${origin.x.toFixed(1)} ${origin.y.toFixed(1)})`;
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { ref: setSvg, className: "graview-ribbons", "aria-hidden": "true", "data-graview-world": "", "data-graview-ribbons": shown.length, width: width, height: height, style: { position: "absolute", left: 0, top: 0, pointerEvents: "none", overflow: "visible" }, children: _jsx("g", { transform: transform, children: shown.map(({ ribbon, d, width: wide }) => {
+                        const lit = pointed === ribbon.key || (asking !== null && asking === ribbon.edge) || choice.districts.length > 0;
+                        const receded = asking !== null && asking !== ribbon.edge;
+                        return (_jsx("g", { className: "graview-ribbon", "data-graview-ribbon": ribbon.edge, "data-graview-from": `kind:${ribbon.from}`, "data-graview-to": `kind:${ribbon.to}`, "data-graview-links": ribbon.links, "data-graview-lit": lit && !receded ? "" : undefined, "data-graview-receded": receded ? "" : undefined, children: _jsx("path", { className: "graview-ribbon-band", d: d, style: { strokeWidth: wide } }) }, ribbon.key));
+                    }) }) }), said ? (
+            /* The words, at the size a person reads, on a solid backing, where the ribbon is pointed at. */
+            _jsx("div", { className: "graview-ribbon-said", "data-graview-world": "", "data-testid": "ribbon-said", role: "status", style: { position: "absolute", left: origin.x + said.middle.x, top: origin.y + said.middle.y, pointerEvents: "none" }, children: ribbonSentence(store.schema, said.ribbon) })) : null] }));
+}
+/** How far a point is from a polyline, in the same coordinates. */
+export function distanceTo(points, x, y) {
+    let nearest = Infinity;
+    for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1];
+        const b = points[i];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const length = dx * dx + dy * dy;
+        const t = length === 0 ? 0 : Math.max(0, Math.min(1, ((x - a.x) * dx + (y - a.y) * dy) / length));
+        nearest = Math.min(nearest, Math.hypot(x - (a.x + t * dx), y - (a.y + t * dy)));
+    }
+    return nearest;
+}
+//# sourceMappingURL=ribbons-layer.js.map

package/dist/ribbons-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ribbons-layer.js","sourceRoot":"","sources":["../src/ribbons-layer.tsx"],"names":[],"mappings":"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"}

package/dist/ribbons.d.ts

@@ -0,0 +1,70 @@
+export { RIBBON_WIDTH, ribbonWidth } from "./ribbon-width.js";
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+export interface PlotLike {
+    readonly col: number;
+    readonly row: number;
+    readonly side: number;
+}
+export interface Lattice {
+    readonly cell: number;
+    /** The tilt the city is seen at (`toIso`): a half by default, more from above. */
+    readonly tilt?: number | undefined;
+}
+/** A box on the canvas, from origin zero: a district's name card the ribbons go round. */
+export interface Box {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/**
+ * WHERE EACH RIBBON RUNS, ON THE GROUND.
+ *
+ * The ground is a lattice, and a line drawn on it runs along one of its two
+ * axes — the diagonals a person sees the grid in. A ribbon leaves its
+ * district from the middle of a curb, runs along the gutters between the
+ * districts on the lattice's own lines, and comes into the other district
+ * at the middle of a curb: never across a district, never behind a
+ * district's name card, and with as few bends as the ground allows — none
+ * or one between neighbors. A stretch another ribbon already runs costs
+ * less, so relations that can share a street do, and those sharing one lie
+ * side by side in it, each its own width apart. Routed on the lattice and
+ * drawn through `toIso`, so it lies on the ground at whatever tilt the city
+ * is seen at.
+ */
+export declare function routeOnTheGround(input: {
+    readonly ribbons: readonly {
+        readonly key: string;
+        readonly from: string;
+        readonly to: string;
+        readonly width: number;
+    }[];
+    readonly plots: ReadonlyMap<string, PlotLike>;
+    readonly cell: number;
+    readonly tilt?: number | undefined;
+    /** The districts' name cards, on the canvas from origin zero. */
+    readonly labels?: readonly Box[];
+}): Map<string, Point[]>;
+/**
+ * A RELATION OF A KIND TO ITSELF — a feature that needs another first —
+ * leaves its district's right-hand curb, runs a short way up the gutter
+ * beside it and comes back in: a loop on the lattice, in the gutter, on the
+ * district it belongs to. Each further one stands a lane further out.
+ */
+export declare function loopPoints(plot: PlotLike, index: number): {
+    col: number;
+    row: number;
+}[];
+/** Lattice points on the canvas, from origin zero. */
+export declare function onCanvas(points: readonly {
+    col: number;
+    row: number;
+}[], city: Lattice): Point[];
+/** A polyline as an SVG path. */
+export declare function pathOf(points: readonly Point[]): string;
+/** The middle of a polyline by length: where a ribbon's words are said. */
+export declare function midpointOf(points: readonly Point[]): Point;
+//# sourceMappingURL=ribbons.d.ts.map

package/dist/ribbons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ribbons.d.ts","sourceRoot":"","sources":["../src/ribbons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAmB9D,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AACD,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,0FAA0F;AAC1F,MAAM,WAAW,GAAG;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAcD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,QAAQ,CAAC,OAAO,EAAE,SAAS;QAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1H,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;CAClC,GAAG,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAqQvB;AAkDD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,CAWxF;AAED,sDAAsD;AACtD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,CAEhG;AAED,iCAAiC;AACjC,wBAAgB,MAAM,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,GAAG,MAAM,CAEvD;AAED,2EAA2E;AAC3E,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,GAAG,KAAK,CAa1D"}

package/dist/ribbons.js

@@ -0,0 +1,400 @@
+import { toIso } from "@graview/core/scene";
+export { RIBBON_WIDTH, ribbonWidth } from "./ribbon-width.js";
+/** The grid a ribbon is routed on: half a lattice cell, so a street can run down the middle of a one-cell gutter. */
+const STEP = 0.5;
+/** How far out from a curb the streets run, in cells, and how near to one no street may come. */
+const OUT = 1;
+const CLEAR = 0.76;
+/** What a bend costs, in cells: enough that a ribbon bends only where it must. */
+const BEND = 3;
+/** How far from every district, in cells, the ground starts to cost more to cross: a ribbon keeps to the streets between districts, not the open ground beyond them. */
+const NEAR = 3;
+/** How much less a stretch another ribbon already runs along costs: ribbons that can share a street do. */
+const SHARED = 0.6;
+/**
+ * WHERE EACH RIBBON RUNS, ON THE GROUND.
+ *
+ * The ground is a lattice, and a line drawn on it runs along one of its two
+ * axes — the diagonals a person sees the grid in. A ribbon leaves its
+ * district from the middle of a curb, runs along the gutters between the
+ * districts on the lattice's own lines, and comes into the other district
+ * at the middle of a curb: never across a district, never behind a
+ * district's name card, and with as few bends as the ground allows — none
+ * or one between neighbors. A stretch another ribbon already runs costs
+ * less, so relations that can share a street do, and those sharing one lie
+ * side by side in it, each its own width apart. Routed on the lattice and
+ * drawn through `toIso`, so it lies on the ground at whatever tilt the city
+ * is seen at.
+ */
+export function routeOnTheGround(input) {
+    const { ribbons, plots, cell } = input;
+    const tilt = input.tilt ?? 0.5;
+    const labels = input.labels ?? [];
+    const all = [...plots.values()];
+    const out = new Map();
+    if (all.length === 0 || cell <= 0)
+        return out;
+    const minCol = Math.min(...all.map((p) => p.col)) - 3;
+    const minRow = Math.min(...all.map((p) => p.row)) - 3;
+    const maxCol = Math.max(...all.map((p) => p.col + p.side)) + 3;
+    const maxRow = Math.max(...all.map((p) => p.row + p.side)) + 3;
+    const width = Math.round((maxCol - minCol) / STEP) + 1;
+    const height = Math.round((maxRow - minRow) / STEP) + 1;
+    const colOf = (i) => minCol + i * STEP;
+    const rowOf = (j) => minRow + j * STEP;
+    const pad = 4;
+    // Whether the name cards are heeded: where they leave no way at all, a ribbon passes under them rather than not at all.
+    let heed = true;
+    const underLabel = (col, row) => {
+        if (!heed)
+            return false;
+        const p = toIso(col, row, cell, tilt);
+        return labels.some((box) => p.x > box.x - pad && p.x < box.x + box.width + pad && p.y > box.y - pad && p.y < box.y + box.height + pad);
+    };
+    // A street keeps a cell clear of every curb, so the ribbons in it lie in the gutter, not on its edge.
+    const onPlot = (col, row) => all.some((p) => col > p.col - CLEAR && col < p.col + p.side + CLEAR && row > p.row - CLEAR && row < p.row + p.side + CLEAR);
+    // Every grid point a ribbon may pass through: off every district, and out from under every name card — or, where they leave no way, off every district.
+    const heeding = new Uint8Array(width * height);
+    const plain = new Uint8Array(width * height);
+    for (let i = 0; i < width; i++) {
+        for (let j = 0; j < height; j++) {
+            const col = colOf(i);
+            const row = rowOf(j);
+            plain[j * width + i] = onPlot(col, row) ? 0 : 1;
+            heeding[j * width + i] = plain[j * width + i] && !underLabel(col, row) ? 1 : 0;
+        }
+    }
+    let free = heeding;
+    // How far each grid point is from the nearest district: past NEAR, every step costs as much again for each cell further.
+    const away = new Float32Array(width * height);
+    for (let i = 0; i < width; i++) {
+        for (let j = 0; j < height; j++) {
+            const col = colOf(i);
+            const row = rowOf(j);
+            away[j * width + i] = Math.min(...all.map((p) => Math.max(0, p.col - col, col - (p.col + p.side), p.row - row, row - (p.row + p.side))));
+        }
+    }
+    // An edge is free when its middle is too: a name card can sit between two grid points.
+    const edgeFree = (i, j, di, dj) => {
+        const col = colOf(i) + (di * STEP) / 2;
+        const row = rowOf(j) + (dj * STEP) / 2;
+        return !onPlot(col, row) && !underLabel(col, row);
+    };
+    /*
+     * The doors of a district: the grid points a cell out from the middle
+     * stretch of each of its four curbs, each with the point on the curb it
+     * steps in to. Not its corners — a ribbon meets a curb, not a point.
+     */
+    const doors = (plot) => {
+        const found = [];
+        const along = (from, side) => {
+            const steps = [];
+            // On the router's grid, so two doors facing each other across a street line up.
+            const margin = Math.min(1, side / 3);
+            for (let t = Math.ceil((from + margin) / STEP - 1e-9) * STEP; t <= from + side - margin + 1e-9; t += STEP)
+                steps.push(t);
+            return steps;
+        };
+        // `out` is the heading that leaves the curb straight: a ribbon meets a curb square on.
+        const add = (col, row, out, curb) => {
+            const i = Math.round((col - minCol) / STEP);
+            const j = Math.round((row - minRow) / STEP);
+            if (i >= 0 && j >= 0 && i < width && j < height && free[j * width + i])
+                found.push({ i, j, out, curb });
+        };
+        for (const row of along(plot.row, plot.side)) {
+            add(plot.col - OUT, row, 1, { col: plot.col, row });
+            add(plot.col + plot.side + OUT, row, 0, { col: plot.col + plot.side, row });
+        }
+        for (const col of along(plot.col, plot.side)) {
+            add(col, plot.row - OUT, 3, { col, row: plot.row });
+            add(col, plot.row + plot.side + OUT, 2, { col, row: plot.row + plot.side });
+        }
+        return found;
+    };
+    const used = new Map();
+    const edgeKey = (i, j, i2, j2) => (i < i2 || (i === i2 && j < j2) ? `${i},${j}-${i2},${j2}` : `${i2},${j2}-${i},${j}`);
+    const DIRS = [
+        [1, 0],
+        [-1, 0],
+        [0, 1],
+        [0, -1],
+    ];
+    const routes = new Map();
+    for (const ribbon of ribbons) {
+        const a = plots.get(ribbon.from);
+        const b = plots.get(ribbon.to);
+        if (!a || !b || a === b)
+            continue;
+        let reached = -1;
+        let starts = [];
+        let goal = new Map();
+        let back = new Int32Array(0);
+        let best = Infinity;
+        /*
+         * Round the name cards where that is a way at all and not a long way
+         * round — on a phone the cards are as big as the streets, and a ribbon
+         * sent out past the window to clear them says less than one passing
+         * under a card. Else, as a street runs under a sign, under them.
+         */
+        const found = [];
+        for (const pass of [true, false]) {
+            reached = -1;
+            best = Infinity;
+            heed = pass;
+            free = pass ? heeding : plain;
+            starts = doors(a);
+            const ends = doors(b);
+            if (starts.length === 0 || ends.length === 0) {
+                found.push({ reached: -1, starts, goal, back, best });
+                continue;
+            }
+            goal = new Map(ends.map((door) => [door.j * width + door.i, door]));
+            const toB = (i, j) => {
+                const col = colOf(i);
+                const row = rowOf(j);
+                return (Math.max(0, b.col - col, col - (b.col + b.side)) + Math.max(0, b.row - row, row - (b.row + b.side))) * SHARED;
+            };
+            // A* over (point, heading): a step costs its length, a bend BEND, a stretch already run less.
+            const states = width * height * 4;
+            const cost = new Float64Array(states).fill(Infinity);
+            back = new Int32Array(states).fill(-1);
+            const heap = new MinHeap();
+            // Leaving square on: a door's state heads out of the curb, so a turn straight after it is a bend.
+            for (const door of starts) {
+                const s = (door.j * width + door.i) * 4 + door.out;
+                cost[s] = 0;
+                heap.push(s, toB(door.i, door.j));
+            }
+            const INTO = [1, 0, 3, 2];
+            while (heap.size > 0) {
+                const f = heap.peekKey();
+                if (f >= best)
+                    break;
+                const s = heap.pop();
+                const node = Math.floor(s / 4);
+                const d = s % 4;
+                const i = node % width;
+                const j = Math.floor(node / width);
+                const door = goal.get(node);
+                if (door) {
+                    // Arriving square on costs nothing more; arriving along the curb is one more bend.
+                    const total = cost[s] + (d === INTO[door.out] ? 0 : BEND);
+                    if (total < best) {
+                        best = total;
+                        reached = s;
+                    }
+                    continue;
+                }
+                for (let nd = 0; nd < 4; nd++) {
+                    const [di, dj] = DIRS[nd];
+                    const i2 = i + di;
+                    const j2 = j + dj;
+                    if (i2 < 0 || j2 < 0 || i2 >= width || j2 >= height || !free[j2 * width + i2] || !edgeFree(i, j, di, dj))
+                        continue;
+                    const step = STEP * (used.has(edgeKey(i, j, i2, j2)) ? SHARED : 1) * (1 + Math.max(0, away[j2 * width + i2] - NEAR)) + (nd === d ? 0 : BEND);
+                    const s2 = (j2 * width + i2) * 4 + nd;
+                    const next = cost[s] + step;
+                    if (next < cost[s2]) {
+                        cost[s2] = next;
+                        back[s2] = s;
+                        heap.push(s2, next + toB(i2, j2));
+                    }
+                }
+            }
+            found.push({ reached, starts, goal, back, best });
+        }
+        heed = true;
+        free = heeding;
+        const [round, under] = found;
+        const chosen = round && round.reached !== -1 && (!under || under.reached === -1 || round.best <= 1.3 * under.best + 2) ? round : under;
+        if (!chosen || chosen.reached === -1)
+            continue;
+        ({ reached, starts, goal, back } = chosen);
+        const cells = [];
+        for (let s = reached; s !== -1; s = back[s]) {
+            const node = Math.floor(s / 4);
+            const last = cells[cells.length - 1];
+            const here = { i: node % width, j: Math.floor(node / width) };
+            if (!last || last.i !== here.i || last.j !== here.j)
+                cells.push(here);
+        }
+        cells.reverse();
+        for (let k = 1; k < cells.length; k++) {
+            const key = edgeKey(cells[k - 1].i, cells[k - 1].j, cells[k].i, cells[k].j);
+            used.set(key, [...(used.get(key) ?? []), ribbon.key]);
+        }
+        const first = starts.find((door) => door.i === cells[0].i && door.j === cells[0].j);
+        const last = goal.get(cells[cells.length - 1].j * width + cells[cells.length - 1].i);
+        routes.set(ribbon.key, { cells, start: first.curb, end: last.curb });
+    }
+    /*
+     * THE BUNDLES. A run's lane is its place among the ribbons sharing the
+     * stretch it runs, in one order for every stretch, so a bundle keeps its
+     * order round a bend; each lane is its ribbon's width apart from the last,
+     * across the run, on the ground.
+     */
+    const widthOf = new Map(ribbons.map((ribbon) => [ribbon.key, ribbon.width]));
+    const order = new Map(ribbons.map((ribbon, index) => [ribbon.key, index]));
+    // How far apart, on the canvas, two runs a cell apart across the ground lie.
+    const pxPerCell = (cell * tilt) / Math.sqrt(1 + tilt * tilt);
+    /*
+     * A STREET IS A LINE OF THE LATTICE, and a ribbon keeps its lane along
+     * the whole of it: every ribbon that runs on a line anywhere is given its
+     * place across it, so one joining or leaving the bundle part way along
+     * moves no other ribbon sideways.
+     */
+    const lineOf = (axis, at) => (axis === "col" ? `r${at.row.toFixed(2)}` : `c${at.col.toFixed(2)}`);
+    const lines = new Map();
+    for (const [key, route] of routes) {
+        for (let k = 1; k < route.cells.length; k++) {
+            const a = route.cells[k - 1];
+            const b = route.cells[k];
+            const line = lineOf(a.i !== b.i ? "col" : "row", { col: colOf(a.i), row: rowOf(a.j) });
+            lines.set(line, (lines.get(line) ?? new Set()).add(key));
+        }
+    }
+    for (const [key, route] of routes) {
+        // The whole way, on the lattice: in from the curb, along the grid, and out to the other curb.
+        const way = [route.start, ...route.cells.map((at) => ({ col: colOf(at.i), row: rowOf(at.j) })), route.end];
+        const gridEdge = (k) => (k >= 2 && k <= route.cells.length ? edgeKey(route.cells[k - 2].i, route.cells[k - 2].j, route.cells[k - 1].i, route.cells[k - 1].j) : null);
+        // The straight runs: where the heading stays the same.
+        const runs = [];
+        for (let k = 1; k < way.length; k++) {
+            const axis = Math.abs(way[k].col - way[k - 1].col) > 1e-9 ? "col" : "row";
+            const open = runs[runs.length - 1];
+            if (open && open.axis === axis)
+                open.to = k;
+            else
+                runs.push({ from: k - 1, to: k, axis });
+        }
+        if (runs.length === 0)
+            continue;
+        const shift = runs.map((run) => {
+            // A stub in from a curb is no street: it stays where it meets the curb.
+            if (!Array.from({ length: run.to - run.from }, (_, n) => gridEdge(run.from + 1 + n)).some((edge) => edge !== null))
+                return 0;
+            const sharing = lines.get(lineOf(run.axis, way[run.from])) ?? new Set();
+            if (!sharing.has(key))
+                return 0;
+            const bundle = [...sharing].sort((x, y) => (order.get(x) ?? 0) - (order.get(y) ?? 0));
+            const total = bundle.reduce((sum, other) => sum + (widthOf.get(other) ?? 2) + 2, 0) - 2;
+            let at = -total / 2;
+            for (const other of bundle) {
+                if (other === key)
+                    return (at + (widthOf.get(other) ?? 2) / 2) / pxPerCell;
+                at += (widthOf.get(other) ?? 2) + 2;
+            }
+            return 0;
+        });
+        // A run along the col axis holds its row and is moved across by changing it, and the other way about; a corner takes one from each.
+        const held = (index) => {
+            const run = runs[index];
+            const at = way[run.from];
+            return run.axis === "col" ? { row: at.row + shift[index] } : { col: at.col + shift[index] };
+        };
+        const merge = (one, other, fallback) => ({ col: one.col ?? other.col ?? fallback.col, row: one.row ?? other.row ?? fallback.row });
+        const points = [merge(held(0), {}, way[0])];
+        for (let index = 0; index + 1 < runs.length; index++)
+            points.push(merge(held(index), held(index + 1), way[runs[index].to]));
+        points.push(merge(held(runs.length - 1), {}, way[way.length - 1]));
+        out.set(key, points.map((p) => toIso(p.col, p.row, cell, tilt)));
+    }
+    return out;
+}
+/** The least-first queue the ground's router takes its next step from. */
+class MinHeap {
+    items = [];
+    keys = [];
+    get size() {
+        return this.items.length;
+    }
+    peekKey() {
+        return this.keys[0] ?? Infinity;
+    }
+    push(item, key) {
+        this.items.push(item);
+        this.keys.push(key);
+        let at = this.items.length - 1;
+        while (at > 0) {
+            const up = (at - 1) >> 1;
+            if (this.keys[up] <= this.keys[at])
+                break;
+            this.swap(at, up);
+            at = up;
+        }
+    }
+    pop() {
+        const top = this.items[0];
+        const lastItem = this.items.pop();
+        const lastKey = this.keys.pop();
+        if (this.items.length > 0) {
+            this.items[0] = lastItem;
+            this.keys[0] = lastKey;
+            let at = 0;
+            for (;;) {
+                const left = 2 * at + 1;
+                const right = left + 1;
+                let least = at;
+                if (left < this.items.length && this.keys[left] < this.keys[least])
+                    least = left;
+                if (right < this.items.length && this.keys[right] < this.keys[least])
+                    least = right;
+                if (least === at)
+                    break;
+                this.swap(at, least);
+                at = least;
+            }
+        }
+        return top;
+    }
+    swap(a, b) {
+        [this.items[a], this.items[b]] = [this.items[b], this.items[a]];
+        [this.keys[a], this.keys[b]] = [this.keys[b], this.keys[a]];
+    }
+}
+/**
+ * A RELATION OF A KIND TO ITSELF — a feature that needs another first —
+ * leaves its district's right-hand curb, runs a short way up the gutter
+ * beside it and comes back in: a loop on the lattice, in the gutter, on the
+ * district it belongs to. Each further one stands a lane further out.
+ */
+export function loopPoints(plot, index) {
+    const out = plot.col + plot.side;
+    const reach = out + 0.25 + 0.22 * Math.max(0, index);
+    const a = plot.row + plot.side * Math.max(0.1, 0.3 - 0.06 * index);
+    const b = plot.row + plot.side * Math.min(0.9, 0.7 + 0.06 * index);
+    return [
+        { col: out, row: a },
+        { col: reach, row: a },
+        { col: reach, row: b },
+        { col: out, row: b },
+    ];
+}
+/** Lattice points on the canvas, from origin zero. */
+export function onCanvas(points, city) {
+    return points.map((p) => toIso(p.col, p.row, city.cell, city.tilt));
+}
+/** A polyline as an SVG path. */
+export function pathOf(points) {
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" ");
+}
+/** The middle of a polyline by length: where a ribbon's words are said. */
+export function midpointOf(points) {
+    if (points.length === 0)
+        return { x: 0, y: 0 };
+    let total = 0;
+    for (let i = 1; i < points.length; i++)
+        total += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+    let left = total / 2;
+    for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1];
+        const b = points[i];
+        const leg = Math.hypot(b.x - a.x, b.y - a.y);
+        if (leg >= left && leg > 0)
+            return { x: a.x + ((b.x - a.x) * left) / leg, y: a.y + ((b.y - a.y) * left) / leg };
+        left -= leg;
+    }
+    return points[points.length - 1];
+}
+//# sourceMappingURL=ribbons.js.map