@graview/react 0.1.28 → 0.1.30

package/dist/ribbons-layer.d.ts

@@ -0,0 +1,56 @@
+import type { AnySchema } from "@graview/core";
+import type { InterpolatedLayout } from "@graview/layout";
+import { type ReactElement } from "react";
+import { type Point } from "./ribbons.js";
+import "./provider.js";
+/**
+ * THE RELATIONS FROM ALTITUDE: one ribbon per relation between two
+ * districts, as wide as the links along it, the short way along the
+ * ground between them so it never crosses a third district (`routeOnTheGround`)
+ * — and saying what it is when
+ * pointed at: "146 features → 14 areas, the part it lives in".
+ *
+ * At rest every ribbon is drawn and no record has a line of its own. With a
+ * district chosen only its relations stay. With a record chosen none do:
+ * the record's own links are drawn instead (`RecordLinks`), and a ribbon
+ * under them would say the same thing twice in two manners.
+ *
+ * Drawn at origin zero and moved by one translate, as the ground is, so a
+ * pan moves it with the plots it runs between.
+ */
+export interface RibbonsProps {
+    readonly frame: InterpolatedLayout;
+    readonly width: number;
+    readonly height: number;
+    readonly pan: Point;
+    readonly store: {
+        readonly schema: AnySchema;
+        readonly graph: {
+            allEdges(): Iterable<{
+                readonly kind: string;
+                readonly from: string;
+                readonly to: string;
+            }>;
+            getNode(id: string): {
+                readonly kind: string;
+            } | undefined;
+        };
+    };
+    /** The graph's version: the relations are counted again when it changes. */
+    readonly graphVersion: unknown;
+    readonly selection: readonly string[];
+    readonly view: {
+        readonly overview?: boolean | undefined;
+        readonly focusId: string | null;
+        readonly beside?: boolean;
+    };
+    /** A relation the Key or the panel is asking about. */
+    readonly emphasis: string | null;
+    readonly hiddenKinds: ReadonlySet<string>;
+    /** Whether the kit draws a relation at all: one it keeps quiet has no ribbon. */
+    readonly drawn: (edge: string) => boolean;
+}
+export declare function Ribbons({ frame, width, height, pan, store, graphVersion: nodes, selection, view, emphasis, hiddenKinds, drawn: kitDraws }: RibbonsProps): ReactElement | null;
+/** How far a point is from a polyline, in the same coordinates. */
+export declare function distanceTo(points: readonly Point[], x: number, y: number): number;
+//# sourceMappingURL=ribbons-layer.d.ts.map

package/dist/ribbons-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ribbons-layer.d.ts","sourceRoot":"","sources":["../src/ribbons-layer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAyD,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAuF,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAC/H,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC;IAMpB,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE;YAAE,QAAQ,IAAI,QAAQ,CAAC;gBAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;gBAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;aAAE,CAAC,CAAC;YAAC,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG;gBAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;aAAE,GAAG,SAAS,CAAA;SAAE,CAAA;KAAE,CAAC;IAC5N,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACvH,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CAC3C;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,YAAY,GAAG,IAAI,CAsK7K;AAGD,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAYjF"}

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"}