@woosh/meep-engine 3.15.0 → 3.17.0

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

@@ -1,3 +1,4 @@
+import { frameThrottle } from "../../../src/core/function/frameThrottle.js";
 import { clamp } from "../../../src/core/math/clamp.js";
 import { max2 } from "../../../src/core/math/max2.js";
 import View from "../../../src/view/View.js";
@@ -12,11 +13,19 @@ import { NodeInstancePortReference } from "../../../src/core/model/node-graph/no
 import { ActionProcessor } from "../../../src/core/process/undo/ActionProcessor.js";
 import { NodeGraphCamera } from "./NodeGraphCamera.js";
 import { NodeGraphSelection } from "./NodeGraphSelection.js";
-import { ConnectionCreateAction } from "./actions/ConnectionCreateAction.js";
+import { connection_bind_actions } from "./actions/connection_bind_actions.js";
+import { ConnectionDeleteAction } from "./actions/ConnectionDeleteAction.js";
 import { NodeParameterSetAction } from "./actions/NodeParameterSetAction.js";
 import { NodesMoveAction } from "./actions/NodesMoveAction.js";
 import { SelectionSetAction } from "./actions/SelectionSetAction.js";
-import { wire_bounds, wire_distance_to_point, wire_to_bezier } from "./connection_wire_geometry.js";
+import Signal from "../../../src/core/events/signal/Signal.js";
+import { wire_build_direct, wire_resolve_path } from "./connection_wire_geometry.js";
+import { ConnectionVisualData } from "../../../src/core/model/node-graph/visual/ConnectionVisualData.js";
+import AABB2 from "../../../src/core/geom/2d/aabb/AABB2.js";
+import { aabb2_contains } from "../../../src/core/geom/2d/aabb/aabb2_contains.js";
+import { aabb2_intersects_aabb2 } from "../../../src/core/geom/2d/aabb/aabb2_intersects_aabb2.js";
+import { min2 } from "../../../src/core/math/min2.js";
+import EmptyView from "../../../src/view/elements/EmptyView.js";
 
 export { NodeGraphCamera } from "./NodeGraphCamera.js";
 
@@ -25,9 +34,20 @@ const v2_pointer = new Vector2();
 const v2_hit_source = new Vector2();
 const v2_hit_target = new Vector2();
 
-const wire_aabb = new Float64Array(4);
+const wire_aabb = new AABB2();
 const wire_bezier = new Float64Array(8);
 
+/**
+ * Path of a wire that has no route of its own — one being dragged out of a port, one whose node has
+ * been moved since the graph was last laid out, or every wire in a graph that never has been.
+ *
+ * One instance, refilled per wire: it is used and finished with inside a single draw or hit test.
+ *
+ * @type {ConnectionVisualData}
+ */
+const direct_wire = new ConnectionVisualData();
+
+
 const CONNECTION_WIDTH = 3;
 
 /**
@@ -36,6 +56,39 @@ const CONNECTION_WIDTH = 3;
  */
 const CONNECTION_HIT_TOLERANCE_PX = 6;
 
+/**
+ * Mouse buttons, as {@link MouseEvent#button} numbers them.
+ * @enum {number}
+ */
+const MOUSE_BUTTON = {
+    LEFT: 0,
+    MIDDLE: 1,
+    RIGHT: 2
+};
+
+/**
+ * How far the pointer may travel between a press and its release for the gesture to still count as
+ * a click rather than a drag, in canvas pixels.
+ *
+ * One number answers it for every button, and that is what keeps the canvas's background gestures
+ * out of each other's way: a press that stays put is a click — select, or ask for the menu — and one
+ * that moves is a drag — pan, or pull a selection box. Neither happens by accident, because a hand
+ * steady enough to have clicked never travels this far.
+ *
+ * @type {number}
+ */
+const CANVAS_CLICK_TOLERANCE_PX = 5;
+
+/**
+ * What a drag over the canvas background is doing.
+ * @enum {number}
+ */
+const CanvasDrag = {
+    None: 0,
+    Pan: 1,
+    Marquee: 2
+};
+
 /**
  *
  * @param {number[]} array
@@ -54,6 +107,111 @@ function array_toggle(array, value) {
 export class NodeGraphView extends View {
     el = document.createElement('div');
 
+    /**
+     * The view of each node currently on the canvas, by node id.
+     *
+     * A host that wants to decorate a node — mark it as carrying an error, flash it, badge it —
+     * needs to find its view, and reaching into the child list to do it depends on how this view
+     * happens to be assembled. Kept in step with the node list rather than rebuilt on demand.
+     *
+     * @readonly
+     * @type {Map<number, NodeView>}
+     */
+    nodeViews = new Map();
+
+    /**
+     * Nodes whose view has not yet recorded its drawn geometry — see {@link NodeView#measure}.
+     *
+     * Until this is empty, what the visual data holds for those nodes is the registry's estimate of
+     * how big they are, which is no basis for arranging a graph.
+     *
+     * @type {Set<number>}
+     */
+    #unmeasured = new Set();
+
+    /**
+     * Ask for the wires to be drawn again, at most once a frame. Set up in the constructor, where
+     * the canvas it repaints is; see the note there.
+     * @type {function()}
+     */
+    #requestRedraw;
+
+    /**
+     * The type a port carries on a particular node instance. See the constructor.
+     * @type {function(NodeInstancePortReference):DataType}
+     */
+    portDataType;
+
+    /**
+     * @readonly
+     */
+    on = {
+        ...this.on,
+
+        /**
+         * A node's view has been built and is in {@link nodeViews}. Carries `(NodeInstance, NodeView)`.
+         *
+         * A host that decorates node views cannot do it off the graph's own `nodeAdded`: a view's
+         * own bindings are linked before its children's, so a host bound to that signal runs before
+         * this view's list has built anything. This one fires when the view exists, by construction.
+         *
+         * @readonly
+         * @type {Signal<NodeInstance, NodeView>}
+         */
+        nodeViewAdded: new Signal(),
+
+        /**
+         * Every node on the canvas has recorded its drawn geometry, so the visual data describes
+         * the graph as it actually looks rather than as the registry guessed it would.
+         *
+         * What an automatic layout waits for: see {@link NodeGraphEditorView#layout}.
+         *
+         * @readonly
+         * @type {Signal}
+         */
+        measured: new Signal(),
+
+        /**
+         * The canvas itself was right-clicked — not a node, not a port. Carries the point, in this
+         * view's own pixels and in graph space, and the release that ended the gesture.
+         *
+         * Raised when a right press is released without having travelled, rather than off the DOM's
+         * own `contextmenu`: browsers disagree about when that one fires — on the press on some
+         * platforms, on the release on others — and a canvas that pans with the right button cannot
+         * have half of them opening a menu in the middle of the pan. The browser's own menu is
+         * suppressed either way, by this element's pointer device.
+         *
+         * The gesture a host turns into "add a node here": see
+         * {@link NodeGraphEditorView}'s search menu. Announced rather than acted on because what a
+         * canvas offers is the host's business, and this view has no library to offer.
+         *
+         * @readonly
+         * @type {Signal<{x: number, y: number, graph_x: number, graph_y: number, event: MouseEvent}>}
+         */
+        canvasContextMenu: new Signal(),
+
+        /**
+         * A wire being dragged out of a port was let go over open canvas rather than over another
+         * port. Carries the port it came from and where it was dropped.
+         *
+         * The other half of the same idea: a wire that reaches nothing is an author saying what they
+         * want next and where it goes, and a host that can finish the thought — by offering the types
+         * that could take the wire and connecting the one that is picked — turns a failed gesture
+         * into two steps of authoring at once.
+         *
+         * @readonly
+         * @type {Signal<{endpoint: NodeInstancePortReference, x: number, y: number, graph_x: number, graph_y: number}>}
+         */
+        connectionDropped: new Signal()
+    };
+
+    /**
+     * Whether the graph can be edited through this view. See the constructor.
+     * @readonly
+     * @type {boolean}
+     */
+    readOnly = false;
+
     /**
      *
      * @param {NodeGraph} graph
@@ -62,6 +220,17 @@ export class NodeGraphView extends View {
      * @param {NodeDescriptionVisualRegistry} nodeVisualRegistry
      * @param {ActionProcessor} [actionProcessor] timeline that all graph edits are routed through
      * @param {NodeGraphSelection} [selection]
+     * @param {function({node: NodeInstance, commit: function(string, *)}):View|null} [parameterViewFactory]
+     *        see {@link NodeView}; passed through unchanged, so a host's controls reach every node
+     * @param {function(NodeInstancePortReference):DataType} [portDataType]
+     *        the type a port carries on a particular node instance, which is what its marker is
+     *        coloured by and what a wire out of it is drawn in. The declared type by default. A
+     *        host whose ports are typed by what is wired into them — where an `add` is as wide as
+     *        its inputs — supplies one, and calls {@link #refreshPortTypes} when its answers change.
+     * @param {boolean} [readOnly] show the graph without offering to change it: no wiring, no
+     *        dragging, no parameter edits. What a host drilling into a graph it does not own — a
+     *        locked node group — shows. Selection and the camera still work, because looking around
+     *        is not editing.
      */
     constructor({
                     graph,
@@ -69,7 +238,10 @@ export class NodeGraphView extends View {
                     camera,
                     nodeVisualRegistry,
                     actionProcessor = new ActionProcessor({}),
-                    selection = new NodeGraphSelection()
+                    selection = new NodeGraphSelection(),
+                    parameterViewFactory = undefined,
+                    portDataType = endpoint => endpoint.port.dataType,
+                    readOnly = false
                 }) {
         super();
 
@@ -79,6 +251,10 @@ export class NodeGraphView extends View {
          */
         this.actionProcessor = actionProcessor;
 
+        this.readOnly = readOnly;
+
+        this.portDataType = portDataType;
+
         /**
          *
          * @type {NodeGraphCamera}
@@ -105,12 +281,39 @@ export class NodeGraphView extends View {
 
         this.addClass('ui-node-graph-view');
 
+        this.setClass('read-only', readOnly);
+
         const self = this;
 
         const tempConnection = {
             enabled: false,
             anchor: new Vector2(),
-            endpoint: null
+            endpoint: null,
+
+            /**
+             * Whether some port has already dealt with the drop that is ending this drag.
+             *
+             * A port's own pointer-up runs while the wire is still live and before the drag's, both
+             * being listeners for the same event on the way from the port to the window — so by the
+             * time the drag ends, this says whether the wire found a home. Without it there is no
+             * telling a wire dropped on open canvas from one dropped onto a port that refused it.
+             *
+             * @type {boolean}
+             */
+            consumed: false,
+
+            /**
+             * The wire this gesture picked up, when it began on an input that already had one.
+             *
+             * Dragging out of a bound input is that wire being moved rather than a second one being
+             * made, so the gesture continues from the source it came from and this is what is on
+             * the end of it. It is not taken off the graph until the drop says where it is going —
+             * a gesture that ends on a port that refuses it, or on the port it started from, has to
+             * leave the graph as it found it — so while the drag runs it is only hidden.
+             *
+             * @type {Connection|null}
+             */
+            detached: null
         };
 
         const vBlockCanvas = new ListView(graph.nodes, {
@@ -130,27 +333,95 @@ export class NodeGraphView extends View {
                     // dragging is editor behavior: managed here so moves land on the action timeline
                     enableDrag: false,
                     parameterSetCallback(n, parameterId, value) {
+                        if (readOnly) {
+                            // the controls are drawn — a locked graph is still worth reading — but
+                            // nothing an author does in one reaches the model
+                            return;
+                        }
+
                         actionProcessor.mark('set parameter');
                         actionProcessor.do(new NodeParameterSetAction(n, parameterId, value));
                     },
+                    parameterViewFactory,
                     portCreationCallback(portView, port) {
+                        // what this port carries on this node, where that is not what it declares
+                        portView.setDataType(self.portDataType(node.getEndpoint(port.id)));
 
                         const draggableAspect = new DraggableAspect({
                             el: portView.el,
-                            dragStart(p) {
+                            dragStart(p, event) {
+                                if (self.readOnly) {
+                                    return;
+                                }
+
+                                // An input holds one wire, so a drag out of a bound one is that
+                                // wire being taken hold of: what is on the end of the gesture is
+                                // its source, and where it is let go decides what it feeds — or
+                                // whether it feeds anything, which is how one is pulled off.
+                                const held = port.direction === PortDirection.In
+                                    ? node.getEndpoint(port.id).inConnections[0] ?? null
+                                    : null;
 
                                 const endpoint = new NodeInstancePortReference();
 
-                                endpoint.set(node, port);
+                                if (held === null) {
+                                    endpoint.set(node, port);
+                                } else {
+                                    endpoint.set(held.source.instance, held.source.port);
+                                }
 
                                 tempConnection.enabled = true;
+                                tempConnection.consumed = false;
+                                tempConnection.detached = held;
                                 tempConnection.endpoint = endpoint;
 
+                                // The wire is drawn from here to the anchor, and a gesture that ends
+                                // before the first move would otherwise be drawn to — and dropped
+                                // at — wherever the previous one finished.
+                                readPositionFromMouseEvent(v2_pointer, event, self.el);
+
+                                self.transformPointCanvas2Graph(v2_pointer, tempConnection.anchor);
                             },
                             dragEnd() {
+                                if (!tempConnection.enabled) {
+                                    return;
+                                }
+
+                                const endpoint = tempConnection.endpoint;
+                                const consumed = tempConnection.consumed;
+                                const detached = tempConnection.detached;
+
                                 tempConnection.enabled = false;
+                                tempConnection.detached = null;
+
+                                requestRedraw();
+
+                                if (consumed) {
+                                    // some port took the drop, and has already made or refused the
+                                    // connection; there is nothing left of the gesture to report
+                                    return;
+                                }
+
+                                if (detached !== null) {
+                                    // A wire taken off an input and let go over nothing is a wire
+                                    // removed. Its own step: what the host makes of the drop below
+                                    // — a menu that may be dismissed — is a separate decision, and
+                                    // the removal stands whichever way that goes.
+                                    actionProcessor.mark('disconnect');
+                                    actionProcessor.do(new ConnectionDeleteAction(graph, detached, visual));
+                                }
 
-                                vConnectionCanvas.render();
+                                const anchor = tempConnection.anchor;
+
+                                self.transformPointGraph2Canvas(anchor, v2_pointer);
+
+                                self.on.connectionDropped.send1({
+                                    endpoint,
+                                    x: v2_pointer.x,
+                                    y: v2_pointer.y,
+                                    graph_x: anchor.x,
+                                    graph_y: anchor.y,
+                                });
                             },
                             drag(p, o, delta, event) {
                                 // the anchor lives in graph space, derive it from the cursor position over this view
@@ -158,7 +429,7 @@ export class NodeGraphView extends View {
 
                                 self.transformPointCanvas2Graph(v2_pointer, tempConnection.anchor);
 
-                                vConnectionCanvas.render();
+                                requestRedraw();
                             }
                         });
 
@@ -166,6 +437,10 @@ export class NodeGraphView extends View {
                             //pointer released above the port
 
                             if (tempConnection.enabled) {
+                                // whatever happens below, the wire has met a port and its fate is
+                                // decided here rather than on open canvas
+                                tempConnection.consumed = true;
+
                                 /**
                                  *
                                  * @type {NodeInstancePortReference}
@@ -206,19 +481,46 @@ export class NodeGraphView extends View {
                                     const source_ref = graph.getConnectionEndpoint(source_node, source_port);
                                     const target_ref = graph.getConnectionEndpoint(target_node, target_port);
 
+                                    const detached = tempConnection.detached;
+
+                                    if (
+                                        detached !== null
+                                        && detached.source === source_ref
+                                        && detached.target === target_ref
+                                    ) {
+                                        // a wire picked up and put back where it came from: the
+                                        // gesture did nothing, and leaving it alone is what makes
+                                        // that true — nothing reaches the timeline
+                                        return;
+                                    }
+
                                     const duplicate = source_ref.connections.some(
                                         c => c.source === source_ref && c.target === target_ref
                                     );
 
-                                    if (!duplicate) {
-                                        actionProcessor.mark('create connection');
-                                        actionProcessor.do(new ConnectionCreateAction(
+                                    const actions = duplicate
+                                        ? []
+                                        : connection_bind_actions(
                                             graph,
                                             source_node, source_port,
-                                            target_node, target_port
-                                        ));
+                                            target_node, target_port,
+                                            visual
+                                        );
+
+                                    if (detached !== null) {
+                                        // the wire this gesture is holding now feeds somewhere
+                                        // else, so it comes off where it was — one step, because
+                                        // it was one gesture
+                                        actions.unshift(new ConnectionDeleteAction(graph, detached, visual));
                                     }
 
+                                    if (actions.length > 0) {
+                                        actionProcessor.mark(detached === null
+                                            ? 'create connection'
+                                            : 'move connection');
+
+                                        actionProcessor.doMany(actions);
+                                    }
                                 }
                             }
                         });
@@ -229,7 +531,20 @@ export class NodeGraphView extends View {
                     }
                 });
 
-                nodeView.bindSignal(nodeView.position.onChanged, vConnectionCanvas.render, vConnectionCanvas);
+                nodeView.bindSignal(nodeView.position.onChanged, requestRedraw);
+
+                // A node reports where the browser put its ports, and the wires are drawn to those
+                // points — so a node that has just been measured, or re-measured because its
+                // content changed, is a node whose wires no longer meet it.
+                self.#unmeasured.add(node.id);
+
+                nodeView.bindSignal(nodeView.on.measured, changed => {
+                    if (changed) {
+                        requestRedraw();
+                    }
+
+                    self.#markMeasured(node.id);
+                });
 
                 // selection state is reflected as a CSS class
                 function updateSelectionClass() {
@@ -253,6 +568,13 @@ export class NodeGraphView extends View {
                     dragStart() {
                         dragEntries = [];
 
+                        if (readOnly) {
+                            // an empty entry list makes the rest of the gesture a no-op, and the
+                            // aspect still exists so a node keeps swallowing pointer gestures the
+                            // canvas underneath would otherwise read as a pan
+                            return;
+                        }
+
                         if (selection.containsNode(node.id)) {
                             // dragging a selected node moves the entire selection
                             selection.nodes.forEach(id => {
@@ -307,6 +629,10 @@ export class NodeGraphView extends View {
                 nodeView.on.linked.add(nodeDrag.start, nodeDrag);
                 nodeView.on.unlinked.add(nodeDrag.stop, nodeDrag);
 
+                self.nodeViews.set(node.id, nodeView);
+
+                self.on.nodeViewAdded.send2(node, nodeView);
+
                 return nodeView;
             }
         });
@@ -322,7 +648,6 @@ export class NodeGraphView extends View {
         });
 
         const v2_source = new Vector2();
-        const v2_target = new Vector2();
 
         /**
          *
@@ -335,17 +660,22 @@ export class NodeGraphView extends View {
 
             ctx.lineCap = 'round';
 
-            //draw connections
+            //draw connections: a wire carries what comes out of its source
             graph.connections.forEach(connection => {
 
-                const source = connection.source;
-                const target = connection.target;
-
-                this.getEndpointGraphPosition(source, v2_source);
-
-                this.getEndpointGraphPosition(target, v2_target);
+                if (connection === tempConnection.detached) {
+                    // in hand rather than on the graph: it is drawn below, running to the cursor.
+                    // Still on the graph because where it ends up is the drop's to decide, and one
+                    // that lands back where it started has to leave no trace.
+                    return;
+                }
 
-                this.drawConnection(ctx, v2_source, v2_target, source.port.dataType, selection.containsConnection(connection.id));
+                this.drawConnection(
+                    ctx,
+                    this.resolveConnectionPath(connection),
+                    this.portDataType(connection.source),
+                    selection.containsConnection(connection.id)
+                );
 
             });
 
@@ -359,17 +689,38 @@ export class NodeGraphView extends View {
                 const endpoint = tempConnection.endpoint;
 
                 this.getEndpointGraphPosition(endpoint, v2_source);
-                const dataType = endpoint.port.dataType;
+
+                const dataType = this.portDataType(endpoint);
+
+                const anchor = tempConnection.anchor;
+
                 if (endpoint.port.direction === PortDirection.Out) {
-                    this.drawConnection(ctx, v2_source, tempConnection.anchor, dataType);
+                    wire_build_direct(direct_wire, v2_source.x, v2_source.y, anchor.x, anchor.y);
                 } else {
-                    this.drawConnection(ctx, tempConnection.anchor, v2_source, dataType);
+                    wire_build_direct(direct_wire, anchor.x, anchor.y, v2_source.x, v2_source.y);
                 }
+
+                this.drawConnection(ctx, direct_wire, dataType);
             }
         };
 
         this.addChild(vConnectionCanvas);
 
+        /**
+         * Ask for the wires to be drawn again.
+         *
+         * At most once a frame, because one gesture is many changes. Dragging a selection of forty
+         * nodes moves forty positions per pointer event, and each of those is a wire repaint that
+         * the thirty-nine after it make obsolete — forty full canvases where the screen can only
+         * show one. Everything that repaints the wires goes through here rather than calling the
+         * canvas, so there is one answer to how often that happens.
+         *
+         * @type {function()}
+         */
+        const requestRedraw = frameThrottle(vConnectionCanvas.render, vConnectionCanvas);
+
+        this.#requestRedraw = requestRedraw;
+
         this.size.onChanged.add((x, y) => {
             vConnectionCanvas.size.set(x, y);
         });
@@ -381,66 +732,485 @@ export class NodeGraphView extends View {
             vBlockCanvas.scale.setScalar(scale);
             vBlockCanvas.position.set(-p.x * scale, -p.y * scale);
 
-            vConnectionCanvas.render();
+            requestRedraw();
         }
 
         this.initializeNavigationControls();
 
+        // A node view cannot measure itself when it is linked: the view framework links a child
+        // before putting its element in the document (see View#addChild), so at that moment the
+        // node has no layout box to read. By the time this fires every one of them is in place.
+        //
+        // Nodes added later — from a palette, from an undo — are in that same position and are
+        // caught by their own resize observer instead, on the browser's next rendering step.
+        this.on.linked.add(this.measureNodes, this);
+
         this.on.linked.add(onCameraChange);
         this.bindSignal(camera.position.onChanged, onCameraChange);
         this.bindSignal(camera.scale.onChanged, onCameraChange);
 
+        // node ids are pooled, so a view left behind by a deleted node would be handed out for an
+        // unrelated future one
+        this.bindSignal(graph.on.nodeRemoved, node => {
+            this.nodeViews.delete(node.id);
+
+            // a node nobody will ever draw again is not one the canvas is still waiting on
+            this.#markMeasured(node.id);
+        });
+
         // wires are drawn from graph state, repaint when the structure changes
-        this.bindSignal(graph.on.connectionAdded, vConnectionCanvas.render, vConnectionCanvas);
-        this.bindSignal(graph.on.connectionRemoved, vConnectionCanvas.render, vConnectionCanvas);
+        this.bindSignal(graph.on.connectionAdded, requestRedraw);
+        this.bindSignal(graph.on.connectionRemoved, requestRedraw);
+
+        // connection ids are pooled the way node ids are, so a wire that is gone must not leave its
+        // selection behind for an unrelated future one to be handed
+        this.bindSignal(graph.on.connectionRemoved, connection => selection.connections.removeOneOf(connection.id));
 
         // selected wires are drawn highlighted
-        this.bindSignal(selection.connections.on.added, vConnectionCanvas.render, vConnectionCanvas);
-        this.bindSignal(selection.connections.on.removed, vConnectionCanvas.render, vConnectionCanvas);
+        this.bindSignal(selection.connections.on.added, requestRedraw);
+        this.bindSignal(selection.connections.on.removed, requestRedraw);
     }
 
+    /**
+     * Ask every port what it carries now, and draw the wires again in the answer's colours.
+     *
+     * For a host that resolves port types per node instance (see `portDataType` in the
+     * constructor): a graph whose types follow its wiring changes its mind about ports far from the
+     * edit — a literal made narrower retypes everything downstream of it — so the host says when,
+     * and every port is asked rather than the ones it can think of.
+     *
+     * @returns {void}
+     */
+    refreshPortTypes() {
+        for (const node of this.graph.getNodes()) {
+            const nodeView = this.nodeViews.get(node.id);
+
+            if (nodeView === undefined) {
+                continue;
+            }
+
+            for (const portView of nodeView.portViews.values()) {
+                portView.setDataType(this.portDataType(node.getEndpoint(portView.port.id)));
+            }
+        }
+
+        this.#requestRedraw();
+    }
+
+    /**
+     * Have every node on the canvas record where the browser has put it.
+     *
+     * The nodes measure themselves as their content changes, so this is not the usual path — it is
+     * how the canvas gets its first measurement, at the one moment it is known that every node is
+     * in the document and none of them has been asked yet.
+     *
+     * @returns {void}
+     */
+    measureNodes() {
+        for (const nodeView of this.nodeViews.values()) {
+            nodeView.measure();
+        }
+    }
+
+    /**
+     * Whether the visual data describes the graph as drawn, rather than as the visual registry
+     * estimated it.
+     *
+     * False while the canvas is not on screen at all: an unlinked view has drawn nothing, and a
+     * node's size is not knowable without drawing it.
+     *
+     * @returns {boolean}
+     */
+    isMeasured() {
+        return this.isLinked && this.#unmeasured.size === 0;
+    }
+
+    /**
+     * @param {number} node_id
+     */
+    #markMeasured(node_id) {
+        if (!this.#unmeasured.delete(node_id)) {
+            //already accounted for
+            return;
+        }
+
+        if (this.#unmeasured.size === 0) {
+            this.on.measured.send0();
+        }
+    }
+
+    /**
+     * Wire up what the canvas background does with the pointer.
+     *
+     * Three gestures want that background — moving the view, pulling a selection box across it, and
+     * asking for the add-node menu — and a canvas that guessed between them would keep getting it
+     * wrong. They are told apart by which button began the gesture, the way graph editors of this
+     * kind have long settled it (Unreal's Blueprint canvas among them):
+     *
+     * | gesture                  | what it does                                          |
+     * |--------------------------|-------------------------------------------------------|
+     * | drag with the left       | pull a selection box; SHIFT adds, CTRL toggles        |
+     * | drag with right, middle  | pan                                                   |
+     * | click with the left      | select what is under the cursor, or clear the selection |
+     * | click with the right     | ask the host for the add-node menu                    |
+     * | wheel                    | zoom about the cursor                                 |
+     *
+     * A click and a drag are the same two events with a different amount of travel in between, so
+     * one tolerance decides which a gesture was — see {@link CANVAS_CLICK_TOLERANCE_PX}. That is how
+     * the right button both pans and opens a menu without ever doing one when the other was meant.
+     *
+     * A press over a node or a port never arrives here: those run pointer devices of their own and
+     * stop it where it is raised, so everything below is about open canvas.
+     *
+     * @returns {void}
+     */
     initializeNavigationControls() {
-        const cameraPosition = new Vector2();
         const camera = this.camera;
 
+        const cameraPosition = new Vector2();
+
+        /**
+         * The selection box, while one is being pulled.
+         *
+         * An element of its own rather than something drawn on the wire canvas: that canvas is under
+         * the nodes, and a box whose far edge vanishes behind one is not showing what it is about to
+         * select.
+         *
+         * @type {EmptyView}
+         */
+        const vMarquee = new EmptyView({ classList: ['marquee'] });
+
+        vMarquee.visible = false;
+
+        this.addChild(vMarquee);
+
+        /**
+         * The canvas gesture in flight.
+         */
+        const gesture = {
+            /**
+             * Which button began it, as {@link MOUSE_BUTTON} numbers them, or -1 between gestures.
+             *
+             * A press that a node or a port swallowed never sets this, so a gesture that was never
+             * the canvas's own is one the canvas stays out of — including the release that ends it,
+             * which does reach here on its way up the tree.
+             *
+             * @type {number}
+             */
+            button: -1,
+            /** where it began, in canvas pixels */
+            origin: new Vector2(),
+            /** whether it has travelled beyond {@link CANVAS_CLICK_TOLERANCE_PX} */
+            travelled: false,
+            /** what its drag is doing, once it has become one */
+            drag: CanvasDrag.None
+        };
+
+        /** graph-space corner the box was pulled from */
+        const marquee_anchor = new Vector2();
+
+        /** graph-space corner the cursor is at */
+        const marquee_head = new Vector2();
+
+        const marquee_region = new AABB2();
+
+        const v2_corner_a = new Vector2();
+        const v2_corner_b = new Vector2();
+
+        const cursor = new Vector2();
+
+        /**
+         * Put the box on screen across its two graph-space corners, and say what letting go of it
+         * there would do.
+         *
+         * @param {MouseEvent} event source of modifier key state
+         */
+        const drawMarquee = (event) => {
+            this.transformPointGraph2Canvas(marquee_anchor, v2_corner_a);
+            this.transformPointGraph2Canvas(marquee_head, v2_corner_b);
+
+            const x0 = min2(v2_corner_a.x, v2_corner_b.x);
+            const y0 = min2(v2_corner_a.y, v2_corner_b.y);
+
+            vMarquee.position.set(x0, y0);
+            vMarquee.size.set(
+                max2(v2_corner_a.x, v2_corner_b.x) - x0,
+                max2(v2_corner_a.y, v2_corner_b.y) - y0
+            );
+
+            // which of the three this is, before it is let go: the modifier that decides is held
+            // where the thing it changes cannot show it
+            vMarquee.setClass('additive', event.shiftKey && !event.ctrlKey);
+            vMarquee.setClass('toggle', event.ctrlKey);
+        };
+
         const draggableAspect = new DraggableAspect({
             el: this.el,
-            dragStart() {
-                cameraPosition.copy(camera.position)
+            dragStart: (position) => {
+                if (gesture.button === MOUSE_BUTTON.LEFT) {
+                    gesture.drag = CanvasDrag.Marquee;
+
+                    // anchored in graph space, so the box stays over the graph it was drawn across
+                    this.transformPointCanvas2Graph(position, marquee_anchor);
+
+                    marquee_head.copy(marquee_anchor);
+                } else if (
+                    gesture.button === MOUSE_BUTTON.RIGHT
+                    || gesture.button === MOUSE_BUTTON.MIDDLE
+                ) {
+                    gesture.drag = CanvasDrag.Pan;
+
+                    cameraPosition.copy(camera.position);
+                } else {
+                    gesture.drag = CanvasDrag.None;
+                }
             },
-            drag(p, o) {
-                const d = o.clone();
+            drag: (position, origin, delta, event) => {
+                if (!gesture.travelled && position.distanceTo(origin) > CANVAS_CLICK_TOLERANCE_PX) {
+                    gesture.travelled = true;
+                }
+
+                if (gesture.drag === CanvasDrag.Pan) {
+                    const d = origin.clone();
+
+                    d.sub(position);
+                    d.multiplyScalar(1 / camera.scale.getValue());
+
+                    d.add(cameraPosition);
+
+                    camera.position.copy(d);
+                } else if (gesture.drag === CanvasDrag.Marquee) {
+                    this.transformPointCanvas2Graph(position, marquee_head);
+
+                    // nothing is shown until the gesture is a drag, or every click would flash a box
+                    vMarquee.visible = gesture.travelled;
 
-                d.sub(p);
-                d.multiplyScalar(1 / camera.scale.getValue());
+                    drawMarquee(event);
+                }
+            },
+            dragEnd: (position, origin, event) => {
+                const drag = gesture.drag;
+
+                gesture.drag = CanvasDrag.None;
+
+                if (drag !== CanvasDrag.Marquee) {
+                    return;
+                }
 
-                d.add(cameraPosition);
+                vMarquee.visible = false;
 
-                camera.position.copy(d);
+                if (!gesture.travelled) {
+                    // a click made with an unsteady hand; the release deals with it as one
+                    return;
+                }
+
+                marquee_region.setBoundsUnordered(
+                    marquee_anchor.x, marquee_anchor.y,
+                    marquee_head.x, marquee_head.y
+                );
+
+                this.applySelectionRegion(marquee_region, event);
             }
         });
 
-        draggableAspect.getPointer().on.wheel.add((delta, position) => {
-            const oldScale = camera.scale.getValue();
+        const pointer = draggableAspect.getPointer();
 
-            camera.zoomAt(position, (1 - delta.y / 20) * oldScale);
+        pointer.on.down.add((position, event) => {
+            if (gesture.button !== -1) {
+                // a second button pressed during a gesture; the one that began it keeps it
+                return;
+            }
+
+            gesture.button = event.button;
+            gesture.origin.copy(position);
+            gesture.travelled = false;
+
+            if (event.button === MOUSE_BUTTON.MIDDLE) {
+                // otherwise the browser answers a middle press with a scroll gesture of its own
+                event.preventDefault();
+            }
         });
 
-        // clicks over the background select wires, or clear the selection
-        // node and port elements stop pointer propagation, so taps here mean open canvas
-        const tapPoint = new Vector2();
+        // A release, and with it the two gestures that are made of not having moved. Both are the
+        // canvas's only if the press was: a release over the canvas ends node drags and port drags
+        // too, and those are already spoken for.
+        pointer.on.up.add((position, event) => {
+            if (event.button !== gesture.button || gesture.travelled) {
+                return;
+            }
+
+            if (event.button === MOUSE_BUTTON.LEFT) {
+                // clicks over the background select wires, or clear the selection
+                this.transformPointCanvas2Graph(position, cursor);
+
+                const connection = this.findConnectionAt(cursor);
 
-        draggableAspect.getPointer().on.tap.add((position, event) => {
-            this.transformPointCanvas2Graph(position, tapPoint);
+                this.applySelectionClick(null, connection !== null ? connection.id : null, event);
+            } else if (event.button === MOUSE_BUTTON.RIGHT) {
+                this.transformPointCanvas2Graph(position, cursor);
 
-            const connection = this.findConnectionAt(tapPoint);
+                this.on.canvasContextMenu.send1({
+                    x: position.x,
+                    y: position.y,
+                    graph_x: cursor.x,
+                    graph_y: cursor.y,
+                    event
+                });
+            }
+        });
 
-            this.applySelectionClick(null, connection !== null ? connection.id : null, event);
+        // the release that closes the gesture, wherever on the page it happens
+        pointer.on.globalUp.add((position, event) => {
+            if (event.button === gesture.button) {
+                gesture.button = -1;
+            }
+        });
+
+        pointer.on.wheel.add((delta, position) => {
+            const oldScale = camera.scale.getValue();
+
+            camera.zoomAt(position, (1 - delta.y / 20) * oldScale);
         });
 
+        // A canvas taken off screen mid-gesture never sees the release that would have ended it, and
+        // one that came back still believing a button was down would ignore the next press.
+        const abandonGesture = () => {
+            gesture.button = -1;
+            gesture.drag = CanvasDrag.None;
+            gesture.travelled = false;
+
+            vMarquee.visible = false;
+        };
+
         this.on.linked.add(draggableAspect.start, draggableAspect);
         this.on.unlinked.add(draggableAspect.stop, draggableAspect);
+        this.on.unlinked.add(abandonGesture);
+    }
+
+    /**
+     * The nodes a graph-space box touches.
+     *
+     * Touches rather than encloses: a box that has to go around whole nodes is a box drawn wider
+     * than the graph, and every editor that offers the gesture takes overlap for that reason.
+     *
+     * @param {AABB2} region graph-space box
+     * @returns {number[]} node ids
+     */
+    findNodesInRegion(region) {
+        const result = [];
+
+        for (const node of this.graph.getNodes()) {
+            const nodeVisual = this.visual.getNode(node.id);
 
+            if (nodeVisual === undefined) {
+                // nothing has been drawn for it, so there is nothing the box could have gone around
+                continue;
+            }
+
+            const box = nodeVisual.dimensions;
+
+            if (aabb2_intersects_aabb2(
+                region.x0, region.y0, region.x1, region.y1,
+                box.x0, box.y0, box.x1, box.y1
+            )) {
+                result.push(node.id);
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * The wires a graph-space box holds whole.
+     *
+     * Whole, unlike the nodes, and for the same reason they are not: a box around a few nodes cuts
+     * across every wire leaving them for elsewhere, and taking those would turn a gesture aimed at
+     * four nodes into half the graph highlighted. A wire the box holds is one whose ports are both
+     * inside it — so its nodes are in the selection too, and the box selects what it looks like it
+     * selects.
+     *
+     * @param {AABB2} region graph-space box
+     * @returns {number[]} connection ids
+     */
+    findConnectionsInRegion(region) {
+        const result = [];
+
+        const connections = this.graph.connections;
+        const n = connections.length;
+
+        for (let i = 0; i < n; i++) {
+            const connection = connections.get(i);
+
+            this.resolveConnectionPath(connection).computeBounds(wire_aabb);
+
+            if (aabb2_contains(
+                region.x0, region.y0, region.x1, region.y1,
+                wire_aabb.x0, wire_aabb.y0, wire_aabb.x1, wire_aabb.y1
+            )) {
+                result.push(connection.id);
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * Apply a rubber-band gesture: what the box went around, met with the selection already there
+     * the way the modifier keys ask — plain replaces, SHIFT adds, CTRL toggles.
+     *
+     * The same three {@link #applySelectionClick} offers, because they are one question asked of
+     * more than one element at a time.
+     *
+     * @param {AABB2} region graph-space box
+     * @param {MouseEvent|PointerEvent} event source of modifier key state
+     * @returns {void}
+     */
+    applySelectionRegion(region, event) {
+        const selection = this.selection;
+
+        const boxed_nodes = this.findNodesInRegion(region);
+        const boxed_connections = this.findConnectionsInRegion(region);
+
+        let nodes, connections;
+
+        if (event.ctrlKey || event.shiftKey) {
+
+            nodes = selection.nodes.asArray().slice();
+            connections = selection.connections.asArray().slice();
+
+            if (event.ctrlKey) {
+
+                boxed_nodes.forEach(id => array_toggle(nodes, id));
+                boxed_connections.forEach(id => array_toggle(connections, id));
+
+            } else {
+
+                boxed_nodes.forEach(id => {
+                    if (!nodes.includes(id)) {
+                        nodes.push(id);
+                    }
+                });
+
+                boxed_connections.forEach(id => {
+                    if (!connections.includes(id)) {
+                        connections.push(id);
+                    }
+                });
+
+            }
+
+        } else {
+            nodes = boxed_nodes;
+            connections = boxed_connections;
+        }
+
+        if (selection.matches(nodes, connections)) {
+            // no change, keep the timeline clean
+            return;
+        }
+
+        this.actionProcessor.mark('select');
+        this.actionProcessor.do(new SelectionSetAction(selection, nodes, connections));
     }
 
     /**
@@ -458,24 +1228,19 @@ export class NodeGraphView extends View {
         for (let i = 0; i < n; i++) {
             const connection = connections.get(i);
 
-            this.getEndpointGraphPosition(connection.source, v2_hit_source);
-            this.getEndpointGraphPosition(connection.target, v2_hit_target);
+            const path = this.resolveConnectionPath(connection);
 
-            wire_bounds(wire_aabb, v2_hit_source.x, v2_hit_source.y, v2_hit_target.x, v2_hit_target.y);
+            path.computeBounds(wire_aabb);
 
             if (
-                point.x < wire_aabb[0] - best_distance || point.x > wire_aabb[2] + best_distance
-                || point.y < wire_aabb[1] - best_distance || point.y > wire_aabb[3] + best_distance
+                point.x < wire_aabb.x0 - best_distance || point.x > wire_aabb.x1 + best_distance
+                || point.y < wire_aabb.y0 - best_distance || point.y > wire_aabb.y1 + best_distance
             ) {
                 //outside the inflated bounds, can't beat the current best
                 continue;
             }
 
-            const distance = wire_distance_to_point(
-                point.x, point.y,
-                v2_hit_source.x, v2_hit_source.y,
-                v2_hit_target.x, v2_hit_target.y
-            );
+            const distance = path.distanceToPoint(point.x, point.y);
 
             if (distance < best_distance) {
                 best_distance = distance;
@@ -563,24 +1328,51 @@ export class NodeGraphView extends View {
         return _x0 < this.size.x && _x1 > 0 && _y0 < this.size.y && _y1 > 0;
     }
 
+    /**
+     * The path a connection is drawn along — its route while that route still meets its ports, and
+     * a plain curve between them otherwise. See {@link wire_resolve_path}.
+     *
+     * The fallback is a shared scratch object, so the result is only valid until this is called
+     * again.
+     *
+     * @param {Connection} connection
+     * @returns {ConnectionVisualData}
+     */
+    resolveConnectionPath(connection) {
+        this.getEndpointGraphPosition(connection.source, v2_hit_source);
+        this.getEndpointGraphPosition(connection.target, v2_hit_target);
+
+        return wire_resolve_path(
+            this.visual.getConnection(connection.id),
+            v2_hit_source.x, v2_hit_source.y,
+            v2_hit_target.x, v2_hit_target.y,
+            direct_wire
+        );
+    }
+
     /**
      *
      * @param {CanvasRenderingContext2D} ctx
-     * @param {Vector2} source
-     * @param {Vector2} target
+     * @param {ConnectionVisualData} path
      * @param {DataType} dataType
      * @param {boolean} [selected] selected wires are drawn with a highlight halo
      */
-    drawConnection(ctx, source, target, dataType, selected = false) {
-        wire_bounds(wire_aabb, source.x, source.y, target.x, target.y);
+    drawConnection(ctx, path, dataType, selected = false) {
+        const segments = path.segment_count;
+
+        if (segments === 0) {
+            return;
+        }
+
+        path.computeBounds(wire_aabb);
 
         const cw_2 = (CONNECTION_WIDTH / 2);
 
         if (!this.isGraphAABBVisible(
-            wire_aabb[0] - cw_2,
-            wire_aabb[1] - cw_2,
-            wire_aabb[2] + cw_2,
-            wire_aabb[3] + cw_2
+            wire_aabb.x0 - cw_2,
+            wire_aabb.y0 - cw_2,
+            wire_aabb.x1 + cw_2,
+            wire_aabb.y1 + cw_2
         )) {
             //connection is not visible, don't draw
             return;
@@ -591,23 +1383,27 @@ export class NodeGraphView extends View {
 
         const alpha = clamp(cameraScale * CONNECTION_WIDTH, 0, 1);
 
-        wire_to_bezier(wire_bezier, source.x, source.y, target.x, target.y);
+        ctx.beginPath();
 
-        //the graph->canvas transform is affine, transforming the control polygon transforms the curve
-        for (let i = 0; i < 8; i += 2) {
-            wire_bezier[i] = (wire_bezier[i] - cameraPosition.x) * cameraScale;
-            wire_bezier[i + 1] = (wire_bezier[i + 1] - cameraPosition.y) * cameraScale;
-        }
+        for (let segment = 0; segment < segments; segment++) {
+            path.write_segment_bezier(wire_bezier, 0, segment);
 
-        ctx.beginPath();
+            //the graph->canvas transform is affine, transforming the control polygon transforms the curve
+            for (let i = 0; i < 8; i += 2) {
+                wire_bezier[i] = (wire_bezier[i] - cameraPosition.x) * cameraScale;
+                wire_bezier[i + 1] = (wire_bezier[i + 1] - cameraPosition.y) * cameraScale;
+            }
 
-        ctx.moveTo(wire_bezier[0], wire_bezier[1]);
+            if (segment === 0) {
+                ctx.moveTo(wire_bezier[0], wire_bezier[1]);
+            }
 
-        ctx.bezierCurveTo(
-            wire_bezier[2], wire_bezier[3],
-            wire_bezier[4], wire_bezier[5],
-            wire_bezier[6], wire_bezier[7]
-        );
+            ctx.bezierCurveTo(
+                wire_bezier[2], wire_bezier[3],
+                wire_bezier[4], wire_bezier[5],
+                wire_bezier[6], wire_bezier[7]
+            );
+        }
 
         if (selected) {
             ctx.lineWidth = max2(1, (CONNECTION_WIDTH + 4) * cameraScale);
@@ -646,6 +1442,19 @@ export class NodeGraphView extends View {
         output.set(x, y);
     }
 
+    unlink() {
+        // The list drops every node view on unlink and rebuilds them on link, so keeping the map
+        // across that would leave entries for views that no longer exist — and for nodes deleted
+        // while unlinked, entries that nothing will ever replace.
+        this.nodeViews.clear();
+
+        // and with them go the measurements they were going to make; the views built on the next
+        // link have to make their own
+        this.#unmeasured.clear();
+
+        super.unlink();
+    }
+
     /**
      * Convert point from Graph coordinate space to Canvas coordinate space
      * @param {Vector2} input