@woosh/meep-engine 2.155.0 → 2.157.0

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

@@ -1,453 +1,669 @@
-import { clamp } from "../../../src/core/math/clamp.js";
-import { lerp } from "../../../src/core/math/lerp.js";
-import { max2 } from "../../../src/core/math/max2.js";
-import { min2 } from "../../../src/core/math/min2.js";
-import View from "../../../src/view/View.js";
-import { AutoCanvasView } from "../ecs/components/common/AutoCanvasView.js";
-import Vector2 from "../../../src/core/geom/Vector2.js";
-import Vector1 from "../../../src/core/geom/Vector1.js";
-import ListView from "../../../src/view/common/ListView.js";
-import { NodeView } from "./NodeView.js";
-import List from "../../../src/core/collection/list/List.js";
-import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
-import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
-import { NodeInstancePortReference } from "../../../src/core/model/node-graph/node/NodeInstancePortReference.js";
-
-export class NodeGraphCamera {
-    constructor() {
-        this.position = new Vector2();
-        /**
-         *
-         * @type {Vector1}
-         */
-        this.scale = new Vector1(1);
-    }
-}
-
-const v2 = new Vector2();
-
-const CONNECTION_WIDTH = 3;
-const PORT_BEND_OFFSET_X = 100;
-
-export class NodeGraphView extends View {
-    /**
-     *
-     * @param {NodeGraph} graph
-     * @param {NodeGraphVisualData} visual
-     * @param {NodeGraphCamera} camera
-     * @param {NodeDescriptionVisualRegistry} nodeVisualRegistry
-     */
-    constructor({ graph, visual, camera, nodeVisualRegistry }) {
-        super();
-
-        /**
-         *
-         * @type {NodeGraphCamera}
-         */
-        this.camera = camera;
-
-        /**
-         *
-         * @type {NodeGraph}
-         */
-        this.graph = graph;
-
-        /**
-         *
-         * @type {NodeGraphVisualData}
-         */
-        this.visual = visual;
-
-        /**
-         *
-         * @type {List<number>}
-         */
-        this.selection = new List();
-
-        this.el = document.createElement('div');
-
-        this.addClass('ui-node-graph-view');
-
-        const tempConnection = {
-            enabled: false,
-            anchor: new Vector2(),
-            endpoint: null
-        };
-
-        const vBlockCanvas = new ListView(graph.nodes, {
-            classList: ['block-canvas'],
-            /**
-             *
-             * @param {NodeInstance} node
-             * @returns {View}
-             */
-            elementFactory(node) {
-                let nodeVisualData = visual.getNode(node.id);
-
-                if (nodeVisualData === undefined) {
-                    const vd0 = nodeVisualRegistry.get(node.description.id);
-
-                    if (vd0 === undefined) {
-                        throw new Error(`Node (name='${node.description.name}', id=${node.description.id}) not found in registry`);
-                    }
-
-                    const vd1 = vd0.clone();
-
-                    vd1.id = node.id;
-
-                    visual.addNode(node.id, vd1);
-
-                    nodeVisualData = vd1;
-                }
-
-                const nodeView = new NodeView({
-                    node,
-                    visual: nodeVisualData,
-                    visualData: visual,
-                    portCreationCallback(portView, port) {
-
-                        const draggableAspect = new DraggableAspect({
-                            el: portView.el,
-                            dragStart(p) {
-
-                                const endpoint = new NodeInstancePortReference();
-
-                                endpoint.set(node, port);
-
-                                tempConnection.enabled = true;
-                                tempConnection.endpoint = endpoint;
-
-                            },
-                            dragEnd() {
-                                tempConnection.enabled = false;
-
-                                vConnectionCanvas.render();
-                            },
-                            drag(p, o) {
-                                const scale = camera.scale.getValue();
-                                tempConnection.anchor.set(
-                                    (p.x / scale + camera.position.x),
-                                    (p.y / scale + camera.position.y)
-                                );
-
-                                vConnectionCanvas.render();
-                            }
-                        });
-
-                        draggableAspect.getPointer().on.up.add(() => {
-                            //pointer released above the port
-
-                            if (tempConnection.enabled) {
-                                /**
-                                 *
-                                 * @type {NodeInstancePortReference}
-                                 */
-                                const endpoint = tempConnection.endpoint;
-
-                                const endpointPort = endpoint.port;
-
-                                if (endpointPort === port) {
-                                    //can't connect port to itself
-                                    return;
-                                }
-
-                                if (endpointPort.direction === port.direction) {
-                                    //can't connect ports of teh same directionality
-                                    return;
-                                }
-
-                                const dataType = endpointPort.dataType;
-
-                                //check that the port types match
-                                if (port.dataType === dataType) {
-
-                                    if (endpointPort.direction === PortDirection.Out) {
-                                        graph.createConnection(endpoint.instance.id, endpointPort.id, node.id, port.id);
-                                    } else {
-                                        graph.createConnection(node.id, port.id, endpoint.instance.id, endpointPort.id);
-                                    }
-
-                                }
-                            }
-                        });
-
-                        portView.on.linked.add(draggableAspect.start, draggableAspect);
-                        portView.on.unlinked.add(draggableAspect.stop, draggableAspect);
-
-                    }
-                });
-
-                nodeView.bindSignal(nodeView.position.onChanged, vConnectionCanvas.render, vConnectionCanvas);
-
-                return nodeView;
-            }
-        });
-
-        this.addChild(vBlockCanvas);
-
-
-        //create canvas to draw connections on
-        const vConnectionCanvas = new AutoCanvasView({
-            classList: ['connection-canvas']
-        });
-
-        const v2_source = new Vector2();
-        const v2_target = new Vector2();
-
-        /**
-         *
-         * @param {CanvasRenderingContext2D} ctx
-         * @param width
-         * @param height
-         */
-        vConnectionCanvas.draw = (ctx, width, height) => {
-            ctx.clearRect(0, 0, width, height);
-
-            ctx.lineWidth = max2(1, CONNECTION_WIDTH * camera.scale.getValue());
-            ctx.lineCap = 'round';
-
-            //draw connections
-            graph.connections.forEach(connection => {
-
-
-                const source = connection.source;
-                const target = connection.target;
-
-                this.getEndpointGraphPosition(source, v2_source);
-
-                this.getEndpointGraphPosition(target, v2_target);
-
-
-                this.drawConnection(ctx, v2_source, v2_target, source.port.dataType);
-
-            });
-
-            //draw temp connection
-
-            if (tempConnection.enabled) {
-                /**
-                 *
-                 * @type {NodeInstancePortReference}
-                 */
-                const endpoint = tempConnection.endpoint;
-
-                this.getEndpointGraphPosition(endpoint, v2_source);
-                const dataType = endpoint.port.dataType;
-                if (endpoint.port.direction === PortDirection.Out) {
-                    this.drawConnection(ctx, v2_source, tempConnection.anchor, dataType);
-                } else {
-                    this.drawConnection(ctx, tempConnection.anchor, v2_source, dataType);
-                }
-            }
-        };
-
-        this.addChild(vConnectionCanvas);
-
-        this.size.onChanged.add((x, y) => {
-            vConnectionCanvas.size.set(x, y);
-        });
-
-        function onCameraChange() {
-            const scale = camera.scale.getValue();
-            const p = camera.position;
-
-            vBlockCanvas.scale.setScalar(scale);
-            vBlockCanvas.position.set(-p.x * scale, -p.y * scale);
-
-            vConnectionCanvas.render();
-        }
-
-        this.initializeNavigationControls();
-
-        this.on.linked.add(onCameraChange);
-        this.bindSignal(camera.position.onChanged, onCameraChange);
-        this.bindSignal(camera.scale.onChanged, onCameraChange);
-    }
-
-    initializeNavigationControls() {
-        const cameraPosition = new Vector2();
-        const camera = this.camera;
-
-        const canvasSize = this.size;
-
-        const draggableAspect = new DraggableAspect({
-            el: this.el,
-            dragStart() {
-                cameraPosition.copy(camera.position)
-            },
-            drag(p, o) {
-                const d = o.clone();
-
-                d.sub(p);
-                d.multiplyScalar(1 / camera.scale.getValue());
-
-                d.add(cameraPosition);
-
-                camera.position.copy(d);
-            }
-        });
-
-        draggableAspect.getPointer().on.wheel.add((delta, position) => {
-            const scaleDelta = -delta.y / 20;
-            const oldScale = camera.scale.getValue();
-
-
-            const v = (1 + scaleDelta) * oldScale;
-            const newScale = clamp(v, .03, 4);
-
-            const actualScaleDelta = newScale / oldScale - 1;
-
-            camera.scale.set(newScale);
-
-
-            const canvasSizeInGraphSpace = new Vector2();
-            canvasSizeInGraphSpace.copy(canvasSize);
-            canvasSizeInGraphSpace.divideScalar(newScale);
-
-            const selectionSizeDelta = new Vector2();
-            selectionSizeDelta.copy(canvasSizeInGraphSpace);
-            selectionSizeDelta.multiplyScalar(actualScaleDelta);
-
-            const graphCameraPosition = new Vector2();
-            this.transformPointGraph2Canvas(camera.position, graphCameraPosition);
-
-
-            const localOffset = position.clone().sub(graphCameraPosition);
-
-            const normalizedOffset = localOffset.clone();
-            normalizedOffset.divide(canvasSize);
-
-            const positionDelta = selectionSizeDelta.clone();
-            positionDelta._multiply(normalizedOffset.x, normalizedOffset.y);
-
-            camera.position.add(positionDelta);
-        });
-
-        this.on.linked.add(draggableAspect.start, draggableAspect);
-        this.on.unlinked.add(draggableAspect.stop, draggableAspect);
-
-    }
-
-
-    /**
-     *
-     * @param x0
-     * @param y0
-     * @param x1
-     * @param y1
-     * @returns {boolean}
-     */
-    isGraphAABBVisible(x0, y0, x1, y1) {
-
-        const scale = this.camera.scale.getValue();
-        const cp = this.camera.position;
-
-        //transform graph-space to canvas-space
-        const _x0 = (x0 - cp.x) * scale;
-        const _y0 = (y0 - cp.y) * scale;
-        const _x1 = (x1 - cp.x) * scale;
-        const _y1 = (y1 - cp.y) * scale;
-
-        return _x0 < this.size.x && _x1 > 0 && _y0 < this.size.y && _y1 > 0;
-    }
-
-    /**
-     *
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {Vector2} source
-     * @param {Vector2} target
-     * @param {BinaryDataType} dataType
-     */
-    drawConnection(ctx, source, target, dataType) {
-        //check that the connection is visible
-        const cw_2 = (CONNECTION_WIDTH / 2);
-
-        const x0 = min2(source.x, target.x) - (cw_2 + PORT_BEND_OFFSET_X);
-        const y0 = min2(source.y, target.y) - cw_2;
-        const x1 = max2(source.x, target.x) + cw_2 + PORT_BEND_OFFSET_X;
-        const y1 = max2(source.y, target.y) + cw_2;
-
-        if (!this.isGraphAABBVisible(x0, y0, x1, y1)) {
-            //connection is not visible, don't draw
-            return;
-        }
-
-        const cameraScale = this.camera.scale.getValue();
-
-        const alpha = clamp(lerp(0, 1, cameraScale * CONNECTION_WIDTH), 0, 1);
-
-        const dataColor = this.visual.getDataColor(dataType.id);
-        ctx.strokeStyle = `rgba(${dataColor.r * 255}, ${dataColor.g * 255}, ${dataColor.b * 255}, ${alpha})`;
-
-        ctx.beginPath();
-
-        this.transformPointGraph2Canvas(source, v2);
-
-        ctx.moveTo(v2.x, v2.y);
-
-        const cp1x = v2.x + PORT_BEND_OFFSET_X * cameraScale;
-        const cp1y = v2.y;
-
-        this.transformPointGraph2Canvas(target, v2);
-
-
-        const cp2x = v2.x - PORT_BEND_OFFSET_X * cameraScale;
-        const cp2y = v2.y;
-
-        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, v2.x, v2.y);
-
-        ctx.stroke();
-    }
-
-    /**
-     *
-     * @param {NodeInstancePortReference} endpoint
-     * @param {Vector2} output
-     */
-    getEndpointGraphPosition(endpoint, output) {
-        const instance = endpoint.instance;
-
-        const nodeVisualData = this.visual.getNode(instance.id);
-
-        const nodePosition = nodeVisualData.dimensions.position;
-
-        const portVisualData = nodeVisualData.getPort(endpoint.port.id);
-
-        const portPosition = portVisualData.position;
-
-        const x = nodePosition.x + portPosition.x;
-        const y = nodePosition.y + portPosition.y;
-
-        output.set(x, y);
-    }
-
-    /**
-     * Convert point from Graph coordinate space to Canvas coordinate space
-     * @param {Vector2} input
-     * @param {Vector2} output
-     */
-    transformPointGraph2Canvas(input, output) {
-        const scale = this.camera.scale.getValue();
-        const p = this.camera.position;
-
-        const x = (input.x - p.x) * scale;
-        const y = (input.y - p.y) * scale;
-
-        output.set(x, y);
-    }
-
-    /**
-     * Convert point from Canvas coordinate space to Graph coordinate space
-     * @param {Vector2} input
-     * @param {Vector2} output
-     */
-    transformPointCanvas2Graph(input, output) {
-        const scale = this.camera.scale.getValue();
-        const p = this.camera.position;
-
-        const x = (input.x / scale) + p.x;
-        const y = (input.y / scale) + p.y;
-
-        output.set(x, y);
-    }
-}
+import { clamp } from "../../../src/core/math/clamp.js";
+import { max2 } from "../../../src/core/math/max2.js";
+import View from "../../../src/view/View.js";
+import { AutoCanvasView } from "../ecs/components/common/AutoCanvasView.js";
+import Vector2 from "../../../src/core/geom/Vector2.js";
+import ListView from "../../../src/view/common/ListView.js";
+import { NodeView } from "./NodeView.js";
+import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
+import { readPositionFromMouseEvent } from "../../../src/engine/input/devices/PointerDevice.js";
+import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
+import { NodeInstancePortReference } from "../../../src/core/model/node-graph/node/NodeInstancePortReference.js";
+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 { 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";
+
+export { NodeGraphCamera } from "./NodeGraphCamera.js";
+
+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_bezier = new Float64Array(8);
+
+const CONNECTION_WIDTH = 3;
+
+/**
+ * Canvas-side wire hit tolerance, kept constant for the user at any zoom level
+ * @type {number}
+ */
+const CONNECTION_HIT_TOLERANCE_PX = 6;
+
+/**
+ *
+ * @param {number[]} array
+ * @param {number} value
+ */
+function array_toggle(array, value) {
+    const i = array.indexOf(value);
+
+    if (i === -1) {
+        array.push(value);
+    } else {
+        array.splice(i, 1);
+    }
+}
+
+export class NodeGraphView extends View {
+    /**
+     *
+     * @param {NodeGraph} graph
+     * @param {NodeGraphVisualData} visual
+     * @param {NodeGraphCamera} camera
+     * @param {NodeDescriptionVisualRegistry} nodeVisualRegistry
+     * @param {ActionProcessor} [actionProcessor] timeline that all graph edits are routed through
+     * @param {NodeGraphSelection} [selection]
+     */
+    constructor({
+                    graph,
+                    visual,
+                    camera,
+                    nodeVisualRegistry,
+                    actionProcessor = new ActionProcessor({}),
+                    selection = new NodeGraphSelection()
+                }) {
+        super();
+
+        /**
+         *
+         * @type {ActionProcessor}
+         */
+        this.actionProcessor = actionProcessor;
+
+        /**
+         *
+         * @type {NodeGraphCamera}
+         */
+        this.camera = camera;
+
+        /**
+         *
+         * @type {NodeGraph}
+         */
+        this.graph = graph;
+
+        /**
+         *
+         * @type {NodeGraphVisualData}
+         */
+        this.visual = visual;
+
+        /**
+         *
+         * @type {NodeGraphSelection}
+         */
+        this.selection = selection;
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-node-graph-view');
+
+        const self = this;
+
+        const tempConnection = {
+            enabled: false,
+            anchor: new Vector2(),
+            endpoint: null
+        };
+
+        const vBlockCanvas = new ListView(graph.nodes, {
+            classList: ['block-canvas'],
+            /**
+             *
+             * @param {NodeInstance} node
+             * @returns {View}
+             */
+            elementFactory(node) {
+                const nodeVisualData = visual.ensureNode(node, nodeVisualRegistry);
+
+                const nodeView = new NodeView({
+                    node,
+                    visual: nodeVisualData,
+                    visualData: visual,
+                    // dragging is editor behavior: managed here so moves land on the action timeline
+                    enableDrag: false,
+                    parameterSetCallback(n, parameterId, value) {
+                        actionProcessor.mark('set parameter');
+                        actionProcessor.do(new NodeParameterSetAction(n, parameterId, value));
+                    },
+                    portCreationCallback(portView, port) {
+
+                        const draggableAspect = new DraggableAspect({
+                            el: portView.el,
+                            dragStart(p) {
+
+                                const endpoint = new NodeInstancePortReference();
+
+                                endpoint.set(node, port);
+
+                                tempConnection.enabled = true;
+                                tempConnection.endpoint = endpoint;
+
+                            },
+                            dragEnd() {
+                                tempConnection.enabled = false;
+
+                                vConnectionCanvas.render();
+                            },
+                            drag(p, o, delta, event) {
+                                // the anchor lives in graph space, derive it from the cursor position over this view
+                                readPositionFromMouseEvent(v2_pointer, event, self.el);
+
+                                self.transformPointCanvas2Graph(v2_pointer, tempConnection.anchor);
+
+                                vConnectionCanvas.render();
+                            }
+                        });
+
+                        draggableAspect.getPointer().on.up.add(() => {
+                            //pointer released above the port
+
+                            if (tempConnection.enabled) {
+                                /**
+                                 *
+                                 * @type {NodeInstancePortReference}
+                                 */
+                                const endpoint = tempConnection.endpoint;
+
+                                const endpointPort = endpoint.port;
+
+                                if (endpointPort === port) {
+                                    //can't connect port to itself
+                                    return;
+                                }
+
+                                if (endpointPort.direction === port.direction) {
+                                    //can't connect ports of the same directionality
+                                    return;
+                                }
+
+                                const dataType = endpointPort.dataType;
+
+                                //check that the port types match
+                                if (port.dataType === dataType) {
+
+                                    let source_node, source_port, target_node, target_port;
+
+                                    if (endpointPort.direction === PortDirection.Out) {
+                                        source_node = endpoint.instance.id;
+                                        source_port = endpointPort.id;
+                                        target_node = node.id;
+                                        target_port = port.id;
+                                    } else {
+                                        source_node = node.id;
+                                        source_port = port.id;
+                                        target_node = endpoint.instance.id;
+                                        target_port = endpointPort.id;
+                                    }
+
+                                    const source_ref = graph.getConnectionEndpoint(source_node, source_port);
+                                    const target_ref = graph.getConnectionEndpoint(target_node, target_port);
+
+                                    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(
+                                            graph,
+                                            source_node, source_port,
+                                            target_node, target_port
+                                        ));
+                                    }
+
+                                }
+                            }
+                        });
+
+                        portView.on.linked.add(draggableAspect.start, draggableAspect);
+                        portView.on.unlinked.add(draggableAspect.stop, draggableAspect);
+
+                    }
+                });
+
+                nodeView.bindSignal(nodeView.position.onChanged, vConnectionCanvas.render, vConnectionCanvas);
+
+                // selection state is reflected as a CSS class
+                function updateSelectionClass() {
+                    nodeView.setClass('selected', selection.containsNode(node.id));
+                }
+
+                nodeView.bindSignal(selection.nodes.on.added, updateSelectionClass);
+                nodeView.bindSignal(selection.nodes.on.removed, updateSelectionClass);
+                nodeView.on.linked.add(updateSelectionClass);
+
+                const dragScale = new Vector2(1, 1);
+
+                /**
+                 * Nodes being moved by the current drag gesture
+                 * @type {{visual:NodeVisualData, from:Vector2}[]}
+                 */
+                let dragEntries = [];
+
+                const nodeDrag = new DraggableAspect({
+                    el: nodeView.el,
+                    dragStart() {
+                        dragEntries = [];
+
+                        if (selection.containsNode(node.id)) {
+                            // dragging a selected node moves the entire selection
+                            selection.nodes.forEach(id => {
+                                const nv = visual.getNode(id);
+
+                                if (nv !== undefined) {
+                                    dragEntries.push({ visual: nv, from: nv.dimensions.position.clone() });
+                                }
+                            });
+                        } else {
+                            dragEntries.push({ visual: nodeVisualData, from: nodeVisualData.dimensions.position.clone() });
+                        }
+                    },
+                    drag(position, origin, delta) {
+                        const p = delta.clone();
+
+                        nodeView.computeGlobalScale(dragScale);
+
+                        p.divide(dragScale);
+
+                        for (const entry of dragEntries) {
+                            entry.visual.dimensions.position.add(p);
+                        }
+                    },
+                    dragEnd() {
+                        const moved = dragEntries.filter(entry => !entry.visual.dimensions.position.equals(entry.from));
+
+                        if (moved.length === 0) {
+                            //no net movement
+                            return;
+                        }
+
+                        // nodes are already at their final positions, the action records the
+                        // net change so the gesture lands on the timeline as a single entry
+                        actionProcessor.mark(moved.length === 1 ? 'move node' : 'move nodes');
+                        actionProcessor.do(new NodesMoveAction(moved.map(entry => ({
+                            visual: entry.visual,
+                            from: entry.from,
+                            to: entry.visual.dimensions.position.clone()
+                        }))));
+                    }
+                });
+
+                // selection follows the press, the typical convention: a drag that
+                // starts on an unselected node moves just that node once selected
+                nodeDrag.getPointer().on.down.add((p, event) => {
+                    if (event.ctrlKey || event.shiftKey || !selection.containsNode(node.id)) {
+                        self.applySelectionClick(node.id, null, event);
+                    }
+                });
+
+                nodeView.on.linked.add(nodeDrag.start, nodeDrag);
+                nodeView.on.unlinked.add(nodeDrag.stop, nodeDrag);
+
+                return nodeView;
+            }
+        });
+
+        // scale about the top-left corner, regardless of what layout size the element ends up with
+        vBlockCanvas.transformOrigin.set(0, 0);
+
+        this.addChild(vBlockCanvas);
+
+
+        //create canvas to draw connections on
+        const vConnectionCanvas = new AutoCanvasView({
+            classList: ['connection-canvas']
+        });
+
+        const v2_source = new Vector2();
+        const v2_target = new Vector2();
+
+        /**
+         *
+         * @param {CanvasRenderingContext2D} ctx
+         * @param width
+         * @param height
+         */
+        vConnectionCanvas.draw = (ctx, width, height) => {
+            ctx.clearRect(0, 0, width, height);
+
+            ctx.lineCap = 'round';
+
+            //draw connections
+            graph.connections.forEach(connection => {
+
+
+                const source = connection.source;
+                const target = connection.target;
+
+                this.getEndpointGraphPosition(source, v2_source);
+
+                this.getEndpointGraphPosition(target, v2_target);
+
+
+                this.drawConnection(ctx, v2_source, v2_target, source.port.dataType, selection.containsConnection(connection.id));
+
+            });
+
+            //draw temp connection
+
+            if (tempConnection.enabled) {
+                /**
+                 *
+                 * @type {NodeInstancePortReference}
+                 */
+                const endpoint = tempConnection.endpoint;
+
+                this.getEndpointGraphPosition(endpoint, v2_source);
+                const dataType = endpoint.port.dataType;
+                if (endpoint.port.direction === PortDirection.Out) {
+                    this.drawConnection(ctx, v2_source, tempConnection.anchor, dataType);
+                } else {
+                    this.drawConnection(ctx, tempConnection.anchor, v2_source, dataType);
+                }
+            }
+        };
+
+        this.addChild(vConnectionCanvas);
+
+        this.size.onChanged.add((x, y) => {
+            vConnectionCanvas.size.set(x, y);
+        });
+
+        function onCameraChange() {
+            const scale = camera.scale.getValue();
+            const p = camera.position;
+
+            vBlockCanvas.scale.setScalar(scale);
+            vBlockCanvas.position.set(-p.x * scale, -p.y * scale);
+
+            vConnectionCanvas.render();
+        }
+
+        this.initializeNavigationControls();
+
+        this.on.linked.add(onCameraChange);
+        this.bindSignal(camera.position.onChanged, onCameraChange);
+        this.bindSignal(camera.scale.onChanged, onCameraChange);
+
+        // 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);
+
+        // selected wires are drawn highlighted
+        this.bindSignal(selection.connections.on.added, vConnectionCanvas.render, vConnectionCanvas);
+        this.bindSignal(selection.connections.on.removed, vConnectionCanvas.render, vConnectionCanvas);
+    }
+
+    initializeNavigationControls() {
+        const cameraPosition = new Vector2();
+        const camera = this.camera;
+
+        const draggableAspect = new DraggableAspect({
+            el: this.el,
+            dragStart() {
+                cameraPosition.copy(camera.position)
+            },
+            drag(p, o) {
+                const d = o.clone();
+
+                d.sub(p);
+                d.multiplyScalar(1 / camera.scale.getValue());
+
+                d.add(cameraPosition);
+
+                camera.position.copy(d);
+            }
+        });
+
+        draggableAspect.getPointer().on.wheel.add((delta, position) => {
+            const oldScale = camera.scale.getValue();
+
+            camera.zoomAt(position, (1 - delta.y / 20) * oldScale);
+        });
+
+        // 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();
+
+        draggableAspect.getPointer().on.tap.add((position, event) => {
+            this.transformPointCanvas2Graph(position, tapPoint);
+
+            const connection = this.findConnectionAt(tapPoint);
+
+            this.applySelectionClick(null, connection !== null ? connection.id : null, event);
+        });
+
+        this.on.linked.add(draggableAspect.start, draggableAspect);
+        this.on.unlinked.add(draggableAspect.stop, draggableAspect);
+
+    }
+
+    /**
+     * Find the connection nearest to a graph-space point, within hit tolerance
+     * @param {Vector2} point graph-space point
+     * @returns {Connection|null}
+     */
+    findConnectionAt(point) {
+        let best = null;
+        let best_distance = CONNECTION_HIT_TOLERANCE_PX / this.camera.scale.getValue();
+
+        const connections = this.graph.connections;
+        const n = connections.length;
+
+        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);
+
+            wire_bounds(wire_aabb, v2_hit_source.x, v2_hit_source.y, v2_hit_target.x, v2_hit_target.y);
+
+            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
+            ) {
+                //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
+            );
+
+            if (distance < best_distance) {
+                best_distance = distance;
+                best = connection;
+            }
+        }
+
+        return best;
+    }
+
+    /**
+     * Apply a click-selection gesture following the typical editor conventions:
+     * plain click replaces the selection, CTRL toggles the element, SHIFT adds it,
+     * plain click over nothing clears.
+     * @param {number|null} nodeId clicked node, if any
+     * @param {number|null} connectionId clicked connection, if any
+     * @param {MouseEvent|PointerEvent} event source of modifier key state
+     */
+    applySelectionClick(nodeId, connectionId, event) {
+        const selection = this.selection;
+
+        const ctrl = event.ctrlKey;
+        const shift = event.shiftKey;
+
+        const hasTarget = nodeId !== null || connectionId !== null;
+
+        let nodes = selection.nodes.asArray().slice();
+        let connections = selection.connections.asArray().slice();
+
+        if (ctrl && hasTarget) {
+
+            if (nodeId !== null) {
+                array_toggle(nodes, nodeId);
+            } else {
+                array_toggle(connections, connectionId);
+            }
+
+        } else if (shift && hasTarget) {
+
+            if (nodeId !== null && !nodes.includes(nodeId)) {
+                nodes.push(nodeId);
+            } else if (connectionId !== null && !connections.includes(connectionId)) {
+                connections.push(connectionId);
+            }
+
+        } else if (!ctrl && !shift) {
+
+            nodes = nodeId !== null ? [nodeId] : [];
+            connections = connectionId !== null ? [connectionId] : [];
+
+        } else {
+            // modifier click over empty space, selection unchanged
+            return;
+        }
+
+        if (selection.matches(nodes, connections)) {
+            // no change, keep the timeline clean
+            return;
+        }
+
+        this.actionProcessor.mark('select');
+        this.actionProcessor.do(new SelectionSetAction(selection, nodes, connections));
+    }
+
+
+    /**
+     *
+     * @param x0
+     * @param y0
+     * @param x1
+     * @param y1
+     * @returns {boolean}
+     */
+    isGraphAABBVisible(x0, y0, x1, y1) {
+
+        const scale = this.camera.scale.getValue();
+        const cp = this.camera.position;
+
+        //transform graph-space to canvas-space
+        const _x0 = (x0 - cp.x) * scale;
+        const _y0 = (y0 - cp.y) * scale;
+        const _x1 = (x1 - cp.x) * scale;
+        const _y1 = (y1 - cp.y) * scale;
+
+        return _x0 < this.size.x && _x1 > 0 && _y0 < this.size.y && _y1 > 0;
+    }
+
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Vector2} source
+     * @param {Vector2} target
+     * @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);
+
+        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
+        )) {
+            //connection is not visible, don't draw
+            return;
+        }
+
+        const cameraScale = this.camera.scale.getValue();
+        const cameraPosition = this.camera.position;
+
+        const alpha = clamp(cameraScale * CONNECTION_WIDTH, 0, 1);
+
+        wire_to_bezier(wire_bezier, source.x, source.y, target.x, target.y);
+
+        //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.beginPath();
+
+        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]
+        );
+
+        if (selected) {
+            ctx.lineWidth = max2(1, (CONNECTION_WIDTH + 4) * cameraScale);
+            ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
+
+            ctx.stroke();
+        }
+
+        const dataColor = this.visual.getDataColor(dataType.id);
+
+        ctx.lineWidth = max2(1, CONNECTION_WIDTH * cameraScale);
+        ctx.strokeStyle = `rgba(${dataColor.r * 255}, ${dataColor.g * 255}, ${dataColor.b * 255}, ${alpha})`;
+
+        ctx.stroke();
+    }
+
+    /**
+     *
+     * @param {NodeInstancePortReference} endpoint
+     * @param {Vector2} output
+     */
+    getEndpointGraphPosition(endpoint, output) {
+        const instance = endpoint.instance;
+
+        const nodeVisualData = this.visual.getNode(instance.id);
+
+        const nodePosition = nodeVisualData.dimensions.position;
+
+        const portVisualData = nodeVisualData.getPort(endpoint.port.id);
+
+        const portPosition = portVisualData.position;
+
+        const x = nodePosition.x + portPosition.x;
+        const y = nodePosition.y + portPosition.y;
+
+        output.set(x, y);
+    }
+
+    /**
+     * Convert point from Graph coordinate space to Canvas coordinate space
+     * @param {Vector2} input
+     * @param {Vector2} output
+     */
+    transformPointGraph2Canvas(input, output) {
+        this.camera.graphToCanvas(input, output);
+    }
+
+    /**
+     * Convert point from Canvas coordinate space to Graph coordinate space
+     * @param {Vector2} input
+     * @param {Vector2} output
+     */
+    transformPointCanvas2Graph(input, output) {
+        this.camera.canvasToGraph(input, output);
+    }
+}