@woosh/meep-engine 3.15.0 → 3.16.0

package/editor/view/node-graph/NodeGraphMinimapView.js

@@ -0,0 +1,859 @@
+import { frameThrottle } from "../../../src/core/function/frameThrottle.js";
+import AABB2 from "../../../src/core/geom/2d/aabb/AABB2.js";
+import Vector2 from "../../../src/core/geom/Vector2.js";
+import { clamp } from "../../../src/core/math/clamp.js";
+import { min2 } from "../../../src/core/math/min2.js";
+import ObservedBoolean from "../../../src/core/model/ObservedBoolean.js";
+import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
+import { readPositionFromMouseEvent } from "../../../src/engine/input/devices/PointerDevice.js";
+import ButtonView from "../../../src/view/elements/button/ButtonView.js";
+import View from "../../../src/view/View.js";
+import { AutoCanvasView } from "../ecs/components/common/AutoCanvasView.js";
+
+/**
+ * The whole graph at a glance, with a box around the part being looked at.
+ *
+ * A node graph outgrows its viewport almost immediately, and from inside one there is no way to
+ * tell whether the nodes off the left edge are three or three hundred, or which direction the rest
+ * of the graph is in. This answers both, and moves the camera when it is clicked.
+ *
+ * ## Why it is not part of the graph view
+ *
+ * Because it is a second, cheaper drawing of the same model — nodes as filled boxes, none of the
+ * DOM the real one is made of — and because a host that does not want one should not have to carry
+ * it. It reads a {@link NodeGraphView} and writes one thing back, the camera position; that is the
+ * whole contract.
+ *
+ * ## What it draws from
+ *
+ * The visual data, which is where a node's drawn box and a wire's route both end up, so what is on
+ * the map is what is on the canvas rather than a sketch of it. The wires in particular are the
+ * routes the layout found, resolved through the graph view's own
+ * {@link NodeGraphView#resolveConnectionPath} — the same call the real canvas draws from, so a wire
+ * that goes the long way around a node goes the long way around it here too. A map that drew a
+ * straight line from every source to every target would show a tangle the graph does not have, and
+ * the one question a map has to answer is what the graph looks like.
+ *
+ * Nothing is read out of the DOM, and where every wire goes is worked out once and kept — see
+ * {@link #buildWires} — so moving the camera costs a repaint and no arithmetic.
+ *
+ * ## Collapsing
+ *
+ * A map is worth its corner of the canvas most of the time and not all of the time, so it folds
+ * away to its own button. {@link #collapsed} is the state and is public: a host that wants to
+ * remember it across sessions, or keep two maps of the same graph in step, drives it from there.
+ */
+
+/**
+ * How much space is left around the graph inside the map, as a fraction of the smaller side. A
+ * graph drawn out to the frame reads as a graph that continues past it.
+ *
+ * @type {number}
+ */
+const MAP_PADDING = 0.06;
+
+/**
+ * Smallest a node is drawn, px. Below a pixel or so a node stops being visible at all, and a map
+ * that goes blank when the graph gets big is a map that quits exactly when it becomes useful.
+ *
+ * @type {number}
+ */
+const NODE_MIN_SIZE = 2;
+
+/**
+ * Side of the button the map folds away to, px. Matches the controls in the action bar below it,
+ * which is what it sits in a column with once the map is gone.
+ *
+ * @type {number}
+ */
+const COLLAPSED_SIZE = 26;
+
+const v2_pointer = new Vector2();
+const v2_graph = new Vector2();
+
+/**
+ * One segment's cubic bezier control polygon: `[x0,y0, cx1,cy1, cx2,cy2, x1,y1]`. Refilled per
+ * segment while the wire cache is being built, and read out again before the next segment fills it.
+ *
+ * @type {Float64Array}
+ */
+const wire_bezier = new Float64Array(8);
+
+export class NodeGraphMinimapView extends View {
+    /**
+     * The graph-space rectangle currently mapped onto the whole of this view — everything the map
+     * shows, and what {@link #updateTransform} derives the transform from.
+     *
+     * @readonly
+     * @type {AABB2}
+     */
+    bounds = new AABB2();
+
+    /**
+     * Whether the map is folded away to its button.
+     *
+     * Public and observable rather than a method, because it is state a host has opinions about —
+     * two maps of one graph that disagree about being open are two maps too many.
+     *
+     * @readonly
+     * @type {ObservedBoolean}
+     */
+    collapsed = new ObservedBoolean(false);
+
+    /**
+     * The graph-to-map transform, as map pixels per graph unit and the map-space point graph zero
+     * lands on: `map = graph * scale + translate`, the same in both axes.
+     *
+     * Stated this way rather than as bounds plus a letterboxing offset because these three numbers
+     * *are* the transform, and the cached wires are graph-space geometry waiting to have it applied.
+     * Set by {@link #updateTransform}.
+     *
+     * @type {number}
+     */
+    #scale = 1;
+
+    /**
+     * @type {number}
+     */
+    #translate_x = 0;
+
+    /**
+     * @type {number}
+     */
+    #translate_y = 0;
+
+    /**
+     * The size the map is drawn at when it is open, kept while it is folded away so that opening it
+     * again gives back the map that was there rather than a default one.
+     *
+     * @type {Vector2}
+     */
+    #open_size = new Vector2();
+
+    /**
+     * @type {AutoCanvasView}
+     */
+    #canvas;
+
+    /**
+     * The colours to draw with, read from the stylesheet once rather than on every repaint.
+     *
+     * `getComputedStyle` is the only way to reach a custom property, and it resolves style to
+     * answer. A repaint happens on every frame of a camera drag — during which the graph's own
+     * canvas is being transformed, so style *is* dirty — and asking four times a frame would make
+     * a map that costs a style recalculation to move the camera past.
+     *
+     * Only filled once linked: before that the element is not in a document, `getComputedStyle`
+     * answers with nothing, and a cache filled then would pin the map to the fallbacks for good and
+     * ignore whatever the host's theme says.
+     *
+     * @type {{wire: string, node: string, selected: string, viewport: string}|null}
+     */
+    #palette = null;
+
+    /**
+     * The wires, in graph space, as cubic segments: two control points and an end point each, six
+     * numbers, laid end to end across every wire. A segment's start is the previous one's end, or —
+     * for the first of a wire — that wire's entry in {@link #wire_starts}.
+     *
+     * Graph space rather than map space, so that nothing about where the camera is or how far it is
+     * zoomed can spoil this. See {@link #buildWires}.
+     *
+     * @type {Float64Array}
+     */
+    #wire_segments = new Float64Array(0);
+
+    /**
+     * Where each wire's run of segments begins, x then y, in graph space.
+     * @type {Float64Array}
+     */
+    #wire_starts = new Float64Array(0);
+
+    /**
+     * How many segments each wire contributes, in the order of {@link #wire_starts}.
+     * @type {Int32Array}
+     */
+    #wire_runs = new Int32Array(0);
+
+    /**
+     * How many wires the three buffers above describe, or -1 when they describe nothing — which is
+     * what says the cache has to be rebuilt.
+     * @type {number}
+     */
+    #wire_count = -1;
+
+    /**
+     * {@link #render}, at most once a frame. See {@link #requestRender}.
+     * @type {function()}
+     */
+    #request_render;
+
+    /**
+     * Signals of individual nodes' geometry, re-subscribed whenever the node set changes. A node
+     * being dragged or re-measured changes nothing the graph itself announces, and a map that did
+     * not follow it would be wrong for as long as nobody added a node.
+     *
+     * @type {Array<{signal: Signal, handler: function}>}
+     */
+    #node_bindings = [];
+
+    /**
+     * @param {object} options
+     * @param {NodeGraphView} options.graphView the view this is a map of; its camera is what a click
+     *        here moves, and its size is what the frame on the map is the size of
+     * @param {number} [options.width] px, while open
+     * @param {number} [options.height] px, while open
+     * @param {boolean} [options.collapsed] start folded away
+     */
+    constructor({ graphView, width = 176, height = 116, collapsed = false }) {
+        super();
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-node-graph-minimap-view');
+
+        /**
+         * @type {NodeGraphView}
+         */
+        this.graphView = graphView;
+
+        this.#open_size.set(width, height);
+
+        this.#request_render = frameThrottle(this.render, this);
+
+        const canvas = new AutoCanvasView({ classList: ['map'] });
+
+        canvas.draw = (ctx, w, h) => this.#draw(ctx, w, h);
+
+        this.#canvas = canvas;
+
+        this.addChild(canvas);
+
+        // The canvas is sized from the model rather than from a resize observer: this view's size is
+        // a decision, not a measurement, and waiting for an observer to report it back would leave
+        // the map blank for a frame every time it is shown.
+        this.size.onChanged.add((x, y) => canvas.size.set(x, y));
+
+        const vToggle = new ButtonView({
+            action: () => this.collapsed.invert(),
+            classList: ['toggle']
+        });
+
+        // the control is a glyph drawn by the stylesheet, so this is the only thing that says what
+        // it does — to a screen reader, and to a pointer that rests on it
+        vToggle.el.setAttribute('title', "Minimap");
+        vToggle.el.setAttribute('aria-label', "Toggle minimap");
+
+        this.addChild(vToggle);
+
+        // the starting state is taken before anything is listening, so what follows is the one
+        // application of it rather than a second one after the signal's
+        this.collapsed.set(collapsed);
+        this.collapsed.onChanged.add(this.#applyCollapsed, this);
+
+        this.#applyCollapsed();
+
+        const camera = graphView.camera;
+
+        this.bindSignal(camera.position.onChanged, this.requestRender, this);
+        this.bindSignal(camera.scale.onChanged, this.requestRender, this);
+
+        // the frame drawn on the map is the size of the viewport, in graph units
+        this.bindSignal(graphView.size.onChanged, this.requestRender, this);
+
+        // a selected node is drawn in the accent colour here as well as on the canvas, and a
+        // highlight that only catches up when something else happens to repaint is worse than none
+        this.bindSignal(graphView.selection.nodes.on.added, this.requestRender, this);
+        this.bindSignal(graphView.selection.nodes.on.removed, this.requestRender, this);
+
+        const graph = graphView.graph;
+
+        // a node's visual data exists by the time its view does, not by the time the graph announces
+        // it — which is why this watches the view rather than the graph for additions
+        this.bindSignal(graphView.on.nodeViewAdded, this.#watchNodes, this);
+        this.bindSignal(graph.on.nodeRemoved, this.#watchNodes, this);
+
+        // a wire arriving or leaving changes the picture rather than just where it is looked at
+        this.bindSignal(graph.on.connectionAdded, this.invalidate, this);
+        this.bindSignal(graph.on.connectionRemoved, this.invalidate, this);
+
+        this.on.linked.add(this.#watchNodes, this);
+        this.on.unlinked.add(this.#unwatchNodes, this);
+
+        // forgotten rather than re-read: there is no cascade to read from once the element is out
+        // of the document, and a host that re-themes between takedown and next link should get the
+        // new colours rather than the old ones
+        this.on.unlinked.add(() => { this.#palette = null; });
+
+        this.#initializeNavigation();
+    }
+
+    /**
+     * Ask to be redrawn, at most once a frame.
+     *
+     * What every signal this view listens to goes through, because one gesture is many changes:
+     * dragging a selection of forty nodes moves forty positions per pointer event, and each of the
+     * first thirty-nine would otherwise throw away the wire cache and rebuild it for a picture the
+     * fortieth replaces before anybody sees it.
+     *
+     * {@link #render} is still there for the caller that needs the map correct *now* rather than
+     * before the next frame — unfolding it, and any test that wants to look at what was drawn.
+     *
+     * @returns {void}
+     */
+    requestRender() {
+        this.#request_render();
+    }
+
+    /**
+     * Redraw, now. Cheap by construction — off data already in memory, onto a bitmap a couple of
+     * hundred pixels across.
+     */
+    render() {
+        if (this.collapsed.getValue()) {
+            // nothing on screen to redraw. #draw declines as well, for the repaints that come from
+            // the canvas being resized rather than through here
+            return;
+        }
+
+        // at the size this view decided on, not the one an observer last reported: the map of a
+        // phase that is not on screen still has to be right the moment it is
+        this.#canvas.renderAt(this.size.x, this.size.y);
+    }
+
+    /**
+     * Fold the map away, or bring it back.
+     *
+     * @param {boolean} [collapsed] toggles when left out
+     */
+    setCollapsed(collapsed = !this.collapsed.getValue()) {
+        this.collapsed.set(collapsed);
+    }
+
+    /**
+     * Where a graph-space point falls on the map.
+     *
+     * The transform is worked out per call — see {@link #updateTransform} for why it is not cached
+     * — so a caller mapping many points in a row is asking for it many times over.
+     *
+     * @param {Vector2} input graph space
+     * @param {Vector2} output view space, px from this view's top-left corner
+     */
+    graphToMinimap(input, output) {
+        this.updateTransform();
+
+        output.set(
+            input.x * this.#scale + this.#translate_x,
+            input.y * this.#scale + this.#translate_y
+        );
+    }
+
+    /**
+     * Which graph-space point a place on the map stands for. The inverse of
+     * {@link #graphToMinimap}, and what a click on the map means.
+     *
+     * @param {Vector2} input view space, px from this view's top-left corner
+     * @param {Vector2} output graph space
+     */
+    minimapToGraph(input, output) {
+        this.updateTransform();
+
+        output.set(
+            (input.x - this.#translate_x) / this.#scale,
+            (input.y - this.#translate_y) / this.#scale
+        );
+    }
+
+    /**
+     * Point the camera at a graph-space position, putting it in the middle of the viewport.
+     *
+     * The camera holds the top-left corner of what it can see, and what a person clicking a map
+     * means is "put this in front of me" — so the conversion is here rather than in every caller.
+     *
+     * @param {Vector2} position graph space
+     */
+    centreCameraOn(position) {
+        const graphView = this.graphView;
+        const camera = graphView.camera;
+
+        const scale = camera.scale.getValue();
+
+        camera.position.set(
+            position.x - (graphView.size.x / 2) / scale,
+            position.y - (graphView.size.y / 2) / scale
+        );
+    }
+
+    /**
+     * Work out what part of the graph the map is currently showing, and where that lands in it.
+     *
+     * Recomputed rather than cached: everything it depends on — where the nodes are, how big they
+     * are, where the camera is — changes under an author's hands, and a stale frame would put the
+     * viewport box somewhere the viewport is not.
+     */
+    updateTransform() {
+        const bounds = this.bounds;
+
+        bounds.setNegativelyInfiniteBounds();
+
+        this.graphView.visual.computeBoundingBox(bounds);
+
+        if (bounds.x0 > bounds.x1 || bounds.y0 > bounds.y1) {
+            // an empty graph has no extent to show; the viewport below gives the map something to be
+            bounds.set(0, 0, 0, 0);
+        }
+
+        // The viewport is part of what is mapped, so that panning away from an empty region still
+        // shows where the camera has got to rather than pinning its box to an edge.
+        const camera = this.graphView.camera;
+        const camera_scale = camera.scale.getValue();
+
+        bounds._expandToFit(
+            camera.position.x,
+            camera.position.y,
+            camera.position.x + this.graphView.size.x / camera_scale,
+            camera.position.y + this.graphView.size.y / camera_scale
+        );
+
+        // the map is drawn at the size it is open at, whether or not it is open: a host asking where
+        // a node is on the map while it is folded away gets the answer it will have when it opens
+        const width = this.#open_size.x;
+        const height = this.#open_size.y;
+
+        const padding = min2(width, height) * MAP_PADDING;
+
+        const usable_width = Math.max(1, width - padding * 2);
+        const usable_height = Math.max(1, height - padding * 2);
+
+        // a graph one node wide has no extent in one axis; dividing by it would take the scale to
+        // infinity and put every node in the same place
+        const bounds_width = Math.max(1e-3, bounds.width);
+        const bounds_height = Math.max(1e-3, bounds.height);
+
+        const scale = min2(usable_width / bounds_width, usable_height / bounds_height);
+
+        this.#scale = scale;
+
+        // the letterboxing that keeps a wide graph from being stretched into a tall map, folded into
+        // the translation along with the bounds' own origin
+        this.#translate_x = (width - bounds_width * scale) / 2 - bounds.x0 * scale;
+        this.#translate_y = (height - bounds_height * scale) / 2 - bounds.y0 * scale;
+    }
+
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} width
+     * @param {number} height
+     */
+    #draw(ctx, width, height) {
+        ctx.clearRect(0, 0, width, height);
+
+        if (this.collapsed.getValue()) {
+            // folding the map is a resize of its canvas, and a resize is a repaint — one that does
+            // not come through #render and so is not stopped by its guard. There is nothing on
+            // screen to draw on.
+            return;
+        }
+
+        this.updateTransform();
+
+        const scale = this.#scale;
+        const translate_x = this.#translate_x;
+        const translate_y = this.#translate_y;
+
+        const graphView = this.graphView;
+        const visual = graphView.visual;
+        const selection = graphView.selection;
+
+        const palette = this.#readPalette();
+
+        /**
+         * @param {number} x graph space
+         * @returns {number}
+         */
+        const map_x = x => x * scale + translate_x;
+
+        /**
+         * @param {number} y graph space
+         * @returns {number}
+         */
+        const map_y = y => y * scale + translate_y;
+
+        // Wires first, from the cache: see #buildWires for what is in it and when it is rebuilt.
+        ctx.strokeStyle = palette.wire;
+        ctx.lineWidth = 1;
+
+        ctx.beginPath();
+
+        this.#replayWires(ctx, scale, translate_x, translate_y);
+
+        ctx.stroke();
+
+        for (const [id, node] of visual.nodes) {
+            const dimensions = node.dimensions;
+
+            ctx.fillStyle = selection.containsNode(id) ? palette.selected : palette.node;
+
+            ctx.fillRect(
+                map_x(dimensions.position.x),
+                map_y(dimensions.position.y),
+                Math.max(NODE_MIN_SIZE, dimensions.size.x * scale),
+                Math.max(NODE_MIN_SIZE, dimensions.size.y * scale)
+            );
+        }
+
+        // and the frame, last, so it is never drawn under a node
+        const camera = graphView.camera;
+        const camera_scale = camera.scale.getValue();
+
+        const view_x = map_x(camera.position.x);
+        const view_y = map_y(camera.position.y);
+        const view_width = (graphView.size.x / camera_scale) * scale;
+        const view_height = (graphView.size.y / camera_scale) * scale;
+
+        ctx.strokeStyle = palette.viewport;
+        ctx.lineWidth = 1;
+
+        // half-pixel offsets: a one-pixel stroke on an integer boundary straddles two pixels and
+        // comes out grey and two wide
+        ctx.strokeRect(
+            Math.round(view_x) + 0.5,
+            Math.round(view_y) + 0.5,
+            Math.max(1, Math.round(view_width) - 1),
+            Math.max(1, Math.round(view_height) - 1)
+        );
+    }
+
+    /**
+     * Put the wires into the path the caller has open, rebuilding the cache first if it no longer
+     * describes this graph.
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} scale map pixels per graph unit
+     * @param {number} translate_x where graph zero lands, map space
+     * @param {number} translate_y
+     */
+    #replayWires(ctx, scale, translate_x, translate_y) {
+        this.#buildWires();
+
+        const segments = this.#wire_segments;
+        const starts = this.#wire_starts;
+        const runs = this.#wire_runs;
+
+        let at = 0;
+
+        for (let wire = 0; wire < this.#wire_count; wire++) {
+            ctx.moveTo(
+                starts[wire * 2] * scale + translate_x,
+                starts[wire * 2 + 1] * scale + translate_y
+            );
+
+            const run = runs[wire];
+
+            for (let segment = 0; segment < run; segment++) {
+                // The transform is affine, so a curve is transformed by transforming its control
+                // polygon — the same trick the real canvas uses to draw these under the camera. Six
+                // multiply-adds a segment, which is what makes it worth doing here instead of
+                // baking it into what is kept.
+                ctx.bezierCurveTo(
+                    segments[at] * scale + translate_x, segments[at + 1] * scale + translate_y,
+                    segments[at + 2] * scale + translate_x, segments[at + 3] * scale + translate_y,
+                    segments[at + 4] * scale + translate_x, segments[at + 5] * scale + translate_y
+                );
+
+                at += 6;
+            }
+        }
+    }
+
+    /**
+     * Work out where every wire goes on the map, and keep it.
+     *
+     * This is the expensive half of a repaint and none of it changes when the camera moves. Finding
+     * a wire's path means resolving its route against where its ports are now (see
+     * {@link NodeGraphView#resolveConnectionPath}), then converting each Hermite segment to a
+     * Bézier one — per segment, per wire, and a graph worth having a map of has hundreds of both.
+     * The map is a picture of the whole graph, and moving the camera does not move the graph.
+     *
+     * So the result is kept **in graph space**, and {@link #replayWires} applies the transform on
+     * the way out. That is six multiply-adds a segment, next to nothing beside what it saves — and
+     * it is what makes this immune to the camera. Keeping map-space geometry instead would have to
+     * be thrown away whenever the transform changed, which is every pan once the viewport is wider
+     * than the graph, since the mapped bounds include the viewport.
+     *
+     * What does throw it away:
+     *
+     * - a wire added or removed, a node added, removed, moved, resized or re-measured, through the
+     *   signals this view already listens to,
+     * - and anything else that rewrites the routes without touching a node — re-routing a graph in
+     *   place — which is the caller's to declare, through {@link #invalidate}.
+     *
+     * Node boxes are not cached: a box is a `fillRect` with no arithmetic behind it, and its colour
+     * depends on the selection, which changes under an author's hands.
+     */
+    #buildWires() {
+        if (this.#wire_count >= 0) {
+            return;
+        }
+
+        const graphView = this.graphView;
+        const visual = graphView.visual;
+
+        let wires = 0;
+        let at = 0;
+
+        graphView.graph.connections.forEach(connection => {
+            if (
+                visual.getNode(connection.source.instance.id) === undefined
+                || visual.getNode(connection.target.instance.id) === undefined
+            ) {
+                // a connection whose nodes have not been given visual data yet — nothing to draw it
+                // between, and the graph view is about to build both
+                return;
+            }
+
+            const path = graphView.resolveConnectionPath(connection);
+
+            const count = path.segment_count;
+
+            if (count === 0) {
+                return;
+            }
+
+            this.#wire_segments = grow_f64(this.#wire_segments, at + count * 6);
+            this.#wire_starts = grow_f64(this.#wire_starts, wires * 2 + 2);
+            this.#wire_runs = grow_i32(this.#wire_runs, wires + 1);
+
+            const segments = this.#wire_segments;
+
+            for (let segment = 0; segment < count; segment++) {
+                path.write_segment_bezier(wire_bezier, 0, segment);
+
+                if (segment === 0) {
+                    this.#wire_starts[wires * 2] = wire_bezier[0];
+                    this.#wire_starts[wires * 2 + 1] = wire_bezier[1];
+                }
+
+                // the segment's own start is dropped: it is where the last one ended
+                segments[at] = wire_bezier[2];
+                segments[at + 1] = wire_bezier[3];
+                segments[at + 2] = wire_bezier[4];
+                segments[at + 3] = wire_bezier[5];
+                segments[at + 4] = wire_bezier[6];
+                segments[at + 5] = wire_bezier[7];
+
+                at += 6;
+            }
+
+            this.#wire_runs[wires] = count;
+
+            wires++;
+        });
+
+        this.#wire_count = wires;
+    }
+
+    /**
+     * Forget where the wires go, and ask to be drawn again knowing better.
+     *
+     * Called for itself by everything this view can see happening. What it cannot see is a graph
+     * whose wires were re-routed without any node moving — {@link NodeGraphVisualData#route} over an
+     * arrangement somebody is happy with — so a caller that does that says so here.
+     *
+     * The repaint comes with it rather than being a second call, because there is no reason to say
+     * a map is wrong and not want it put right, and a map left marked wrong is a map showing the old
+     * wires until something unrelated happens to repaint it. It is a request, so forty of these in
+     * one gesture are forty field writes and one repaint.
+     *
+     * @returns {void}
+     */
+    invalidate() {
+        this.#wire_count = -1;
+
+        this.requestRender();
+    }
+
+    /**
+     * The colours to draw with. Read from the cascade the first time they are wanted from a linked
+     * view, and kept from then on: see {@link #palette}. A host that re-themes the editor while it
+     * is on screen gets the new colours on the next relink, which is what a theme switch is.
+     *
+     * @returns {{wire: string, node: string, selected: string, viewport: string}}
+     */
+    #readPalette() {
+        if (this.#palette !== null) {
+            return this.#palette;
+        }
+
+        const style = getComputedStyle(this.el);
+
+        const palette = {
+            wire: read_style(style, '--meep-minimap-wire', 'rgba(120, 132, 150, 0.55)'),
+            node: read_style(style, '--meep-minimap-node', 'rgba(198, 206, 218, 0.75)'),
+            selected: read_style(style, '--meep-accent', '#2d7dd2'),
+            viewport: read_style(style, '--meep-minimap-viewport', 'rgba(255, 255, 255, 0.85)'),
+        };
+
+        if (this.isLinked) {
+            this.#palette = palette;
+        }
+
+        return palette;
+    }
+
+    /**
+     * Reflect {@link #collapsed} onto the view: the map's own box, and what is drawn in it.
+     */
+    #applyCollapsed() {
+        const collapsed = this.collapsed.getValue();
+
+        this.setClass('collapsed', collapsed);
+
+        this.#canvas.visible = !collapsed;
+
+        if (collapsed) {
+            this.size.set(COLLAPSED_SIZE, COLLAPSED_SIZE);
+        } else {
+            this.size.copy(this.#open_size);
+
+            // the map has been out of date for as long as it was folded away — every signal it
+            // listens to has been returning early
+            this.render();
+        }
+    }
+
+    /**
+     * Click or drag anywhere on the map to bring that part of the graph into view.
+     */
+    #initializeNavigation() {
+        // The gesture is on the canvas rather than on this view, so that the collapse button — which
+        // is a sibling of it, not a child — is a button and not a corner of the map.
+        const surface = this.#canvas.el;
+
+        const jump = event => {
+            readPositionFromMouseEvent(v2_pointer, event, surface);
+
+            // a press that left the map mid-drag is not a request to look at the void beyond the graph
+            v2_pointer.set(
+                clamp(v2_pointer.x, 0, this.size.x),
+                clamp(v2_pointer.y, 0, this.size.y)
+            );
+
+            this.minimapToGraph(v2_pointer, v2_graph);
+
+            this.centreCameraOn(v2_graph);
+        };
+
+        const draggable = new DraggableAspect({
+            el: surface,
+            drag: (position, origin, delta, event) => jump(event),
+        });
+
+        // a single click is a jump too, and the drag aspect only reports movement
+        draggable.getPointer().on.down.add((position, event) => jump(event));
+
+        this.on.linked.add(draggable.start, draggable);
+        this.on.unlinked.add(draggable.stop, draggable);
+    }
+
+    /**
+     * Follow the geometry of exactly the nodes that exist now.
+     */
+    #watchNodes() {
+        this.#unwatchNodes();
+
+        for (const node of this.graphView.visual.nodes.values()) {
+            for (const signal of [node.dimensions.position.onChanged, node.dimensions.size.onChanged]) {
+                // a node that moves takes its ports with it, and a wire meets a port
+                this.#watchGeometry(signal, () => this.invalidate());
+            }
+        }
+
+        // A node can be re-measured into the same box with a port somewhere else in it — a control
+        // that reflowed without changing what it occupies. The box says nothing about that, and
+        // the wire ends where the port is, so this is the other half of the same fact.
+        for (const nodeView of this.graphView.nodeViews.values()) {
+            this.#watchGeometry(nodeView.on.measured, changed => {
+                if (changed) {
+                    this.invalidate();
+                }
+            });
+        }
+
+        this.invalidate();
+    }
+
+    /**
+     * Listen to one signal for as long as the node set it belongs to stands.
+     *
+     * @param {Signal} signal
+     * @param {function} handler
+     */
+    #watchGeometry(signal, handler) {
+        this.bindSignal(signal, handler);
+
+        this.#node_bindings.push({ signal, handler });
+    }
+
+    #unwatchNodes() {
+        for (const binding of this.#node_bindings) {
+            this.unbindSignal(binding.signal, binding.handler);
+        }
+
+        this.#node_bindings.length = 0;
+    }
+}
+
+/**
+ * `array`, or a bigger one holding what it held, with room for at least `needed` values.
+ *
+ * Doubling rather than fitting exactly: a graph gains wires one at a time, and a buffer that grew by
+ * one each time would copy itself once per wire.
+ *
+ * @param {Float64Array} array
+ * @param {number} needed
+ * @returns {Float64Array}
+ */
+function grow_f64(array, needed) {
+    if (array.length >= needed) {
+        return array;
+    }
+
+    const grown = new Float64Array(Math.max(needed, array.length * 2, 64));
+
+    grown.set(array);
+
+    return grown;
+}
+
+/**
+ * @param {Int32Array} array
+ * @param {number} needed
+ * @returns {Int32Array}
+ */
+function grow_i32(array, needed) {
+    if (array.length >= needed) {
+        return array;
+    }
+
+    const grown = new Int32Array(Math.max(needed, array.length * 2, 32));
+
+    grown.set(array);
+
+    return grown;
+}
+
+/**
+ * A theme token's value, or the fallback where the host has not defined one. `getComputedStyle` is
+ * the only way to read a custom property, and jsdom returns nothing for one it has no cascade for.
+ *
+ * @param {CSSStyleDeclaration} style
+ * @param {string} property
+ * @param {string} fallback
+ * @returns {string}
+ */
+function read_style(style, property, fallback) {
+    const value = style.getPropertyValue(property).trim();
+
+    return value !== "" ? value : fallback;
+}