@woosh/meep-engine 3.16.0 → 3.17.0

package/editor/view/node-graph/NodeGraphEditorView.d.ts

@@ -28,8 +28,14 @@ export class NodeGraphEditorView extends View {
      *        type the menu places, so a node arrives ready to compile rather than to repair
      * @param {boolean} [readOnly] show the graph without offering to change it; see
      *        {@link NodeGraphView}. Turns off the add-node menu and the editing shortcuts too.
+     * @param {NodeGraphClipboard} [clipboard] what `Ctrl+C` writes and `Ctrl+V` reads. A host with
+     *        several canvases over one document passes one to all of them, so a copy taken in one
+     *        pastes in the next; on its own, a canvas gets one of its own and copies to itself.
+     * @param {function(NodeInstance):boolean} [copyable] whether a node may be had a second of, for
+     *        a host with types that exist once per graph. See
+     *        {@link node_graph_fragment_from_nodes}.
      */
-    constructor({ graph, nodeRegistry, visual, camera, actions, actionProcessor, parameterViewFactory, portDataType, minimap, library, readOnly }: NodeGraph);
+    constructor({ graph, nodeRegistry, visual, camera, actions, actionProcessor, parameterViewFactory, portDataType, minimap, library, readOnly, clipboard, copyable }: NodeGraph);
     /**
      * @readonly
      */
@@ -43,6 +49,17 @@ export class NodeGraphEditorView extends View {
      * @type {ActionProcessor}
      */
     actionProcessor: ActionProcessor<any, any>;
+    /**
+     * What a copy is written to and a paste read from. Shared with the host's other canvases
+     * when it supplied one.
+     *
+     * @type {NodeGraphClipboard}
+     */
+    clipboard: NodeGraphClipboard;
+    /**
+     * @type {function(NodeInstance):boolean}
+     */
+    copyable: (arg0: NodeInstance) => boolean;
     /**
      *
      * @type {NodeGraphSelection}
@@ -181,11 +198,52 @@ export class NodeGraphEditorView extends View {
      *          queues, so nothing has been removed on return
      */
     deleteSelection(): Promise<any>;
+    /**
+     * Take a copy of the selected nodes, and of every wire they hold whole.
+     *
+     * Reading, not editing, so a read-only canvas offers it: opening one of a library's own groups
+     * to take a copy of what is inside it is the point of being able to open them.
+     *
+     * @returns {boolean} whether anything was copied. A selection with nothing copyable in it leaves
+     *          the clipboard alone rather than emptying it, which is the one outcome an author
+     *          asking for a copy certainly did not want.
+     */
+    copySelection(): boolean;
+    /**
+     * Put what was copied into this graph, in the middle of what the author is looking at.
+     *
+     * Where a paste lands is the one decision here. It goes to the middle of the view rather than
+     * back where it was copied from, for the same reason a node added from the menu with no position
+     * does: what arrives has to be somewhere the author can see it, and the place it was copied from
+     * may be a long way off screen — a copy taken in one phase and pasted in the other has no
+     * meaningful "back where it was" at all. The arrangement inside the fragment is kept exactly; it
+     * is the whole of it that moves. A repeat paste of the same content steps aside by
+     * {@link NODE_GRAPH_PASTE_STEP} so that copies do not hide each other.
+     *
+     * @returns {Promise<NodeInstance[]>} the nodes that landed, once the timeline has applied them;
+     *          empty when there was nothing on the clipboard
+     * @throws if this canvas is read-only
+     */
+    paste(): Promise<NodeInstance[]>;
+    /**
+     * A second of everything selected, beside the originals.
+     *
+     * Beside rather than in the middle of the view, which is where {@link #paste} puts things: a
+     * duplicate is a second of something the author is already looking at, and centring it would
+     * take it away from the thing it is a second of. The clipboard is not touched — `Ctrl+D` is not
+     * a copy, and it must not cost the author whatever they had copied earlier.
+     *
+     * @returns {Promise<NodeInstance[]>} the new nodes; empty when nothing selected could be had a
+     *          second of
+     * @throws if this canvas is read-only
+     */
+    duplicateSelection(): Promise<NodeInstance[]>;
     cameraContainAll(): void;
     #private;
 }
 import View from "../../../src/view/View.js";
 import { ActionProcessor } from "../../../src/core/process/undo/ActionProcessor.js";
+import { NodeGraphClipboard } from "./NodeGraphClipboard.js";
 import { NodeGraphSelection } from "./NodeGraphSelection.js";
 import { NodeGraphCamera } from "./NodeGraphView.js";
 import { NodeDescriptionVisualRegistry } from "../../../src/core/model/node-graph/visual/NodeDescriptionVisualRegistry.js";

package/editor/view/node-graph/NodeGraphEditorView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeGraphEditorView.d.ts","sourceRoot":"","sources":["../../../../editor/view/node-graph/NodeGraphEditorView.js"],"names":[],"mappings":"AA4CA;IAyBI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,0JAiOC;IAvRD;;OAEG;IACH,iBAWE;IAuDE;;OAEG;IACH,UAFU,OAAO,CAEO;IAExB;;;OAGG;IACH,2CAAsC;IAEtC;;;OAGG;IACH,WAFU,kBAAkB,CAEa;IAEzC;;;OAGG;IACH,QAFU,eAAe,CAEL;IACpB;;;OAGG;IACH,4BAAoB;IAEpB;;;OAGG;IACH,iBAAkB;IAElB,mBAAuC;IAYvC;;;OAGG;IACH,gBAFU,6BAA6B,CAEH;IAepC;;OAEG;IACH,WAFU,aAAa,CAEG;IA2E1B;;;;;;;;OAQG;IACH,SAFU,oBAAoB,GAAC,IAAI,CAEhB;IA4BnB;;;;;OAKG;IACH,YAFU,uBAAuB,GAAC,IAAI,CAEhB;IAEtB;;;;;;;;;;OAUG;IACH,aAFU,qBAAqB,GAAC,IAAI,CAEb;IAgF3B;;;;;;;;;;;;;;;OAeG;IACH;QAP4B,CAAC,GAAlB,MAAM;QACW,CAAC,GAAlB,MAAM;QACW,UAAU,GAA3B,MAAM;QAC6B,QAAQ;QAC7B,IAAI;QAChB,qBAAqB,CAuBjC;IAED;;;;;;;;;;;;OAYG;IACH,eAWC;IAED;;;;;;;;;OASG;IACH,4BAFa,OAAO,CAInB;IAED;;;;;;;;;;;;;OAaG;IACH;QAN4B,CAAC,GAAlB,MAAM;QACW,CAAC,GAAlB,MAAM;QACW,UAAU,GAA3B,MAAM;QACJ,qBAAqB,CA6BjC;IAED;;;OAGG;IACH,0BAFa,OAAO,CAQnB;IAED;;;;;OAKG;IACH,gCA8BC;IAED,yBAuDC;;CACJ;iBAtmBgB,2BAA2B;gCAHZ,mDAAmD;mCAOhD,yBAAyB;gCAFb,oBAAoB;8CAS5D,4EAA4E;8BATpC,oBAAoB;qCAC9B,2BAA2B;wCAexB,8BAA8B;oBALlD,mCAAmC"}
+{"version":3,"file":"NodeGraphEditorView.d.ts","sourceRoot":"","sources":["../../../../editor/view/node-graph/NodeGraphEditorView.js"],"names":[],"mappings":"AAmDA;IAyBI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,+KAiSC;IA7VD;;OAEG;IACH,iBAWE;IA+DE;;OAEG;IACH,UAFU,OAAO,CAEO;IAExB;;;OAGG;IACH,2CAAsC;IAEtC;;;;;OAKG;IACH,WAFU,kBAAkB,CAEF;IAE1B;;OAEG;IACH,kCAFiC,OAAO,CAEA;IAExC;;;OAGG;IACH,WAFU,kBAAkB,CAEa;IAEzC;;;OAGG;IACH,QAFU,eAAe,CAEL;IACpB;;;OAGG;IACH,4BAAoB;IAEpB;;;OAGG;IACH,iBAAkB;IAElB,mBAAuC;IAYvC;;;OAGG;IACH,gBAFU,6BAA6B,CAEH;IAepC;;OAEG;IACH,WAFU,aAAa,CAEG;IA4H1B;;;;;;;;OAQG;IACH,SAFU,oBAAoB,GAAC,IAAI,CAEhB;IA4BnB;;;;;OAKG;IACH,YAFU,uBAAuB,GAAC,IAAI,CAEhB;IAEtB;;;;;;;;;;OAUG;IACH,aAFU,qBAAqB,GAAC,IAAI,CAEb;IAgF3B;;;;;;;;;;;;;;;OAeG;IACH;QAP4B,CAAC,GAAlB,MAAM;QACW,CAAC,GAAlB,MAAM;QACW,UAAU,GAA3B,MAAM;QAC6B,QAAQ;QAC7B,IAAI;QAChB,qBAAqB,CAwBjC;IAED;;;;;;;;;;;;OAYG;IACH,eAWC;IAED;;;;;;;;;OASG;IACH,4BAFa,OAAO,CAInB;IAED;;;;;;;;;;;;;OAaG;IACH;QAN4B,CAAC,GAAlB,MAAM;QACW,CAAC,GAAlB,MAAM;QACW,UAAU,GAA3B,MAAM;QACJ,qBAAqB,CA6BjC;IAED;;;OAGG;IACH,0BAFa,OAAO,CAQnB;IAED;;;;;OAKG;IACH,gCA8BC;IAED;;;;;;;;;OASG;IACH,iBAJa,OAAO,CAmBnB;IAED;;;;;;;;;;;;;;OAcG;IACH,SAJa,QAAQ,cAAc,CAAC,CAiCnC;IAED;;;;;;;;;;;OAWG;IACH,sBAJa,QAAQ,cAAc,CAAC,CAqBnC;IA+DD,yBAuDC;;CACJ;iBAz1BgB,2BAA2B;gCAHZ,mDAAmD;mCA4B5E,yBAAyB;mCArBG,yBAAyB;gCAFb,oBAAoB;8CAS5D,4EAA4E;8BATpC,oBAAoB;qCAC9B,2BAA2B;wCAexB,8BAA8B;oBALlD,mCAAmC"}

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

@@ -21,8 +21,15 @@ import Vector2 from "../../../src/core/geom/Vector2.js";
 import ButtonView from "../../../src/view/elements/button/ButtonView.js";
 import EmptyView from "../../../src/view/elements/EmptyView.js";
 import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
-import { ConnectionCreateAction } from "./actions/ConnectionCreateAction.js";
+import { connection_bind_actions } from "./actions/connection_bind_actions.js";
 import { NodeGraphSearchMenuView } from "./NodeGraphSearchMenuView.js";
+import { ConnectionCreateAction } from "./actions/ConnectionCreateAction.js";
+import {
+    NODE_GRAPH_PASTE_STEP,
+    NodeGraphClipboard,
+    node_graph_fragment_centre,
+    node_graph_fragment_from_nodes,
+} from "./NodeGraphClipboard.js";
 
 /**
  * Whether a port could take a value of this type, knowing nothing about the graph's domain: the same
@@ -96,6 +103,12 @@ export class NodeGraphEditorView extends View {
      *        type the menu places, so a node arrives ready to compile rather than to repair
      * @param {boolean} [readOnly] show the graph without offering to change it; see
      *        {@link NodeGraphView}. Turns off the add-node menu and the editing shortcuts too.
+     * @param {NodeGraphClipboard} [clipboard] what `Ctrl+C` writes and `Ctrl+V` reads. A host with
+     *        several canvases over one document passes one to all of them, so a copy taken in one
+     *        pastes in the next; on its own, a canvas gets one of its own and copies to itself.
+     * @param {function(NodeInstance):boolean} [copyable] whether a node may be had a second of, for
+     *        a host with types that exist once per graph. See
+     *        {@link node_graph_fragment_from_nodes}.
      */
     constructor({
                     graph,
@@ -108,7 +121,9 @@ export class NodeGraphEditorView extends View {
                     portDataType = undefined,
                     minimap = true,
                     library = undefined,
-                    readOnly = false
+                    readOnly = false,
+                    clipboard = new NodeGraphClipboard(),
+                    copyable = undefined
                 }) {
         super();
 
@@ -123,6 +138,19 @@ export class NodeGraphEditorView extends View {
          */
         this.actionProcessor = actionProcessor;
 
+        /**
+         * What a copy is written to and a paste read from. Shared with the host's other canvases
+         * when it supplied one.
+         *
+         * @type {NodeGraphClipboard}
+         */
+        this.clipboard = clipboard;
+
+        /**
+         * @type {function(NodeInstance):boolean}
+         */
+        this.copyable = copyable ?? (() => true);
+
         /**
          *
          * @type {NodeGraphSelection}
@@ -230,11 +258,60 @@ export class NodeGraphEditorView extends View {
                 event.stopPropagation();
 
                 actionProcessor.undo();
-            } else if (event.keyCode === KeyCodes.y) {
+
+                return;
+            }
+
+            if (event.keyCode === KeyCodes.y) {
                 event.preventDefault();
                 event.stopPropagation();
 
                 actionProcessor.redo();
+
+                return;
+            }
+
+            // The clipboard's three want Ctrl and nothing else. `AltGr` is `Ctrl+Alt` on a European
+            // keyboard, so a canvas that answered that combination would copy every time an author
+            // typed one of the characters behind it; and `Ctrl+Shift+C` belongs to the browser.
+            if (event.shiftKey || event.altKey) {
+                return;
+            }
+
+            // Copying reads the graph, so a locked group body offers it: taking a copy of something
+            // out of one of the library's own groups and putting it in a graph of your own is the
+            // point of being able to open them. Putting something *into* one is not.
+            if (event.keyCode === KeyCodes.c) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                this.copySelection();
+
+                return;
+            }
+
+            if (readOnly) {
+                return;
+            }
+
+            // `Ctrl+D` is the browser's bookmark shortcut, so it is swallowed whether or not there
+            // is anything selected to duplicate — leaving it through on an empty selection would
+            // mean the canvas sometimes bookmarked the page instead.
+            if (event.keyCode === KeyCodes.d) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                this.duplicateSelection()
+                    .catch(e => console.error("could not duplicate the selection", e));
+
+                return;
+            }
+
+            if (event.keyCode === KeyCodes.v) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                this.paste().catch(e => console.error("could not paste", e));
             }
         });
 
@@ -419,12 +496,13 @@ export class NodeGraphEditorView extends View {
         const outgoing = endpoint.port.direction === PortDirection.Out;
 
         // `addNode` marked the timeline and has not marked it again, so this joins the same step
-        await this.actionProcessor.do(new ConnectionCreateAction(
+        await this.actionProcessor.doMany(connection_bind_actions(
             this.graph,
             outgoing ? endpoint.instance.id : node.id,
             outgoing ? endpoint.port.id : port.id,
             outgoing ? node.id : endpoint.instance.id,
-            outgoing ? port.id : endpoint.port.id
+            outgoing ? port.id : endpoint.port.id,
+            this.visual
         ));
 
         return node;
@@ -562,6 +640,171 @@ export class NodeGraphEditorView extends View {
         await this.actionProcessor.doMany(actions);
     }
 
+    /**
+     * Take a copy of the selected nodes, and of every wire they hold whole.
+     *
+     * Reading, not editing, so a read-only canvas offers it: opening one of a library's own groups
+     * to take a copy of what is inside it is the point of being able to open them.
+     *
+     * @returns {boolean} whether anything was copied. A selection with nothing copyable in it leaves
+     *          the clipboard alone rather than emptying it, which is the one outcome an author
+     *          asking for a copy certainly did not want.
+     */
+    copySelection() {
+        const fragment = node_graph_fragment_from_nodes({
+            graph: this.graph,
+            visual: this.visual,
+            nodes: this.selection.nodes.asArray(),
+            copyable: this.copyable,
+        });
+
+        if (fragment === null) {
+            return false;
+        }
+
+        this.clipboard.write(fragment);
+
+        return true;
+    }
+
+    /**
+     * Put what was copied into this graph, in the middle of what the author is looking at.
+     *
+     * Where a paste lands is the one decision here. It goes to the middle of the view rather than
+     * back where it was copied from, for the same reason a node added from the menu with no position
+     * does: what arrives has to be somewhere the author can see it, and the place it was copied from
+     * may be a long way off screen — a copy taken in one phase and pasted in the other has no
+     * meaningful "back where it was" at all. The arrangement inside the fragment is kept exactly; it
+     * is the whole of it that moves. A repeat paste of the same content steps aside by
+     * {@link NODE_GRAPH_PASTE_STEP} so that copies do not hide each other.
+     *
+     * @returns {Promise<NodeInstance[]>} the nodes that landed, once the timeline has applied them;
+     *          empty when there was nothing on the clipboard
+     * @throws if this canvas is read-only
+     */
+    async paste() {
+        if (this.readOnly) {
+            throw new Error("This graph is read-only, so nothing can be pasted into it.");
+        }
+
+        const clipboard = this.clipboard;
+
+        const fragment = clipboard.read();
+
+        if (fragment === null) {
+            return [];
+        }
+
+        const centre = node_graph_fragment_centre(fragment);
+        const target = this.viewCentreInGraphSpace();
+
+        const step = clipboard.pastes * NODE_GRAPH_PASTE_STEP;
+
+        // before the placing rather than after it: the timeline queues, so two pastes issued in one
+        // tick — which is what holding Ctrl+V down is — would otherwise both read the same count and
+        // land on top of each other
+        clipboard.notePaste();
+
+        return this.#placeFragment(
+            fragment,
+            target.x - centre.x + step,
+            target.y - centre.y + step,
+            'paste'
+        );
+    }
+
+    /**
+     * A second of everything selected, beside the originals.
+     *
+     * Beside rather than in the middle of the view, which is where {@link #paste} puts things: a
+     * duplicate is a second of something the author is already looking at, and centring it would
+     * take it away from the thing it is a second of. The clipboard is not touched — `Ctrl+D` is not
+     * a copy, and it must not cost the author whatever they had copied earlier.
+     *
+     * @returns {Promise<NodeInstance[]>} the new nodes; empty when nothing selected could be had a
+     *          second of
+     * @throws if this canvas is read-only
+     */
+    async duplicateSelection() {
+        if (this.readOnly) {
+            throw new Error("This graph is read-only, so nothing in it can be duplicated.");
+        }
+
+        const fragment = node_graph_fragment_from_nodes({
+            graph: this.graph,
+            visual: this.visual,
+            nodes: this.selection.nodes.asArray(),
+            copyable: this.copyable,
+        });
+
+        if (fragment === null) {
+            return [];
+        }
+
+        return this.#placeFragment(fragment, NODE_GRAPH_PASTE_STEP, NODE_GRAPH_PASTE_STEP, 'duplicate');
+    }
+
+    /**
+     * Build a fragment into this graph, offset, as one undoable step, and leave it selected.
+     *
+     * Two batches under one mark, because the wires need ids the creates have not handed out yet —
+     * the same shape an ungrouping has, and for the same reason. What is selected afterwards is what
+     * just arrived, so it can be dragged into place without being hunted for first.
+     *
+     * @param {import("./NodeGraphClipboard.js").NodeGraphFragment} fragment
+     * @param {number} offset_x graph-space
+     * @param {number} offset_y graph-space
+     * @param {string} label what the step is called on the timeline
+     * @returns {Promise<NodeInstance[]>}
+     */
+    async #placeFragment(fragment, offset_x, offset_y, label) {
+        const graph = this.graph;
+        const visual = this.visual;
+
+        // A canvas draws a node in a box generated from its type, and throws when it has none — so a
+        // fragment carrying a type this canvas has never drawn would fail from inside the timeline,
+        // half-way through a step. Which is reachable: the clipboard is shared between canvases, and
+        // a host's canvases need not have been built from the same set of types. Generating a box is
+        // arithmetic over port and parameter counts, keyed by the description, so telling a registry
+        // about a type it already knows costs nothing.
+        for (const record of fragment.nodes) {
+            this.visualRegistry.generate(record.description);
+        }
+
+        const creates = fragment.nodes.map(record => new NodeCreateAction(
+            graph,
+            visual,
+            this.visualRegistry,
+            record.description,
+            record.x + offset_x,
+            record.y + offset_y,
+            // cloned again on the way out: one fragment pasted twice must not hand both copies the
+            // same parameter objects, nor either of them the clipboard's
+            structuredClone(record.parameters)
+        ));
+
+        this.actionProcessor.mark(label);
+
+        await this.actionProcessor.doMany(creates);
+
+        const nodes = creates.map(create => create.node);
+
+        const wires = fragment.connections.map(wire => new ConnectionCreateAction(
+            graph,
+            nodes[wire.from].id,
+            wire.fromPort,
+            nodes[wire.to].id,
+            wire.toPort
+        ));
+
+        // `mark` has not been called again, so this joins the same step
+        wires.push(new SelectionSetAction(this.selection, nodes.map(node => node.id), []));
+
+        await this.actionProcessor.doMany(wires);
+
+        return nodes;
+    }
+
     cameraContainAll() {
         /**
          *

package/editor/view/node-graph/NodeGraphView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeGraphView.d.ts","sourceRoot":"","sources":["../../../../editor/view/node-graph/NodeGraphView.js"],"names":[],"mappings":";AAyGA;IA4GI;;;;;;;;;;;;;;;;;;;OAmBG;IACH,gJA8cC;IA7kBD,mBAAmC;IAEnC;;;;;;;;;OASG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAQ,CAAC,CAET;IAmBtB;;;OAGG;IACH,qBAFmB,yBAAyB,cAE/B;IAEb;;OAEG;IACH,iBA0DE;IAEF;;;;OAIG;IACH,mBAFU,OAAO,CAEA;IAmCb;;;OAGG;IACH,2CAAsC;IAMtC;;;OAGG;IACH,QAFU,eAAe,CAEL;IAEpB;;;OAGG;IACH,iBAAkB;IAElB;;;OAGG;IACH,4BAAoB;IAEpB;;;OAGG;IACH,WAFU,kBAAkB,CAEF;IAma9B;;;;;;;;;OASG;IACH,oBAFa,IAAI,CAgBhB;IAED;;;;;;;;OAQG;IACH,gBAFa,IAAI,CAMhB;IAED;;;;;;;;OAQG;IACH,cAFa,OAAO,CAInB;IAgBD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,gCAFa,IAAI,CA+NhB;IAED;;;;;;;;OAQG;IACH,0BAHW,KAAK,GACH,MAAM,EAAE,CAwBpB;IAED;;;;;;;;;;;OAWG;IACH,gCAHW,KAAK,GACH,MAAM,EAAE,CAsBpB;IAED;;;;;;;;;;OAUG;IACH,6BAJW,KAAK,SACL,UAAU,GAAC,YAAY,GACrB,IAAI,CAgDhB;IAED;;;;OAIG;IACH,wBAHW,OAAO,GACL,aAAW,IAAI,CAiC3B;IAED;;;;;;;OAOG;IACH,4BAJW,MAAM,GAAC,IAAI,gBACX,MAAM,GAAC,IAAI,SACX,UAAU,GAAC,YAAY,QA8CjC;IAGD;;;;;;;OAOG;IACH,wDAFa,OAAO,CAcnB;IAED;;;;;;;;;OASG;IACH,+CAFa,oBAAoB,CAYhC;IAED;;;;;;OAMG;IACH,oBALW,wBAAwB,QACxB,oBAAoB,iCAEpB,OAAO,QA+DjB;IAED;;;;OAIG;IACH,mCAHW,yBAAyB,UACzB,OAAO,QAiBjB;IAeD;;;;OAIG;IACH,kCAHW,OAAO,UACP,OAAO,QAIjB;IAED;;;;OAIG;IACH,kCAHW,OAAO,UACP,OAAO,QAIjB;;CACJ;iBAn3CgB,2BAA2B;yBAInB,eAAe;0CAIE,sEAAsE;gCAChF,mDAAmD;gCACnD,sBAAsB;mCACnB,yBAAyB;kBAQ1C,yCAAyC;oBAjBvC,mCAAmC;qCAgBlB,mEAAmE"}
+{"version":3,"file":"NodeGraphView.d.ts","sourceRoot":"","sources":["../../../../editor/view/node-graph/NodeGraphView.js"],"names":[],"mappings":";AA0GA;IA4GI;;;;;;;;;;;;;;;;;;;OAmBG;IACH,gJAyhBC;IAxpBD,mBAAmC;IAEnC;;;;;;;;;OASG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAQ,CAAC,CAET;IAmBtB;;;OAGG;IACH,qBAFmB,yBAAyB,cAE/B;IAEb;;OAEG;IACH,iBA0DE;IAEF;;;;OAIG;IACH,mBAFU,OAAO,CAEA;IAmCb;;;OAGG;IACH,2CAAsC;IAMtC;;;OAGG;IACH,QAFU,eAAe,CAEL;IAEpB;;;OAGG;IACH,iBAAkB;IAElB;;;OAGG;IACH,4BAAoB;IAEpB;;;OAGG;IACH,WAFU,kBAAkB,CAEF;IA8e9B;;;;;;;;;OASG;IACH,oBAFa,IAAI,CAgBhB;IAED;;;;;;;;OAQG;IACH,gBAFa,IAAI,CAMhB;IAED;;;;;;;;OAQG;IACH,cAFa,OAAO,CAInB;IAgBD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,gCAFa,IAAI,CA+NhB;IAED;;;;;;;;OAQG;IACH,0BAHW,KAAK,GACH,MAAM,EAAE,CAwBpB;IAED;;;;;;;;;;;OAWG;IACH,gCAHW,KAAK,GACH,MAAM,EAAE,CAsBpB;IAED;;;;;;;;;;OAUG;IACH,6BAJW,KAAK,SACL,UAAU,GAAC,YAAY,GACrB,IAAI,CAgDhB;IAED;;;;OAIG;IACH,wBAHW,OAAO,GACL,aAAW,IAAI,CAiC3B;IAED;;;;;;;OAOG;IACH,4BAJW,MAAM,GAAC,IAAI,gBACX,MAAM,GAAC,IAAI,SACX,UAAU,GAAC,YAAY,QA8CjC;IAGD;;;;;;;OAOG;IACH,wDAFa,OAAO,CAcnB;IAED;;;;;;;;;OASG;IACH,+CAFa,oBAAoB,CAYhC;IAED;;;;;;OAMG;IACH,oBALW,wBAAwB,QACxB,oBAAoB,iCAEpB,OAAO,QA+DjB;IAED;;;;OAIG;IACH,mCAHW,yBAAyB,UACzB,OAAO,QAiBjB;IAeD;;;;OAIG;IACH,kCAHW,OAAO,UACP,OAAO,QAIjB;IAED;;;;OAIG;IACH,kCAHW,OAAO,UACP,OAAO,QAIjB;;CACJ;iBA/7CgB,2BAA2B;yBAInB,eAAe;0CAIE,sEAAsE;gCAChF,mDAAmD;gCACnD,sBAAsB;mCACnB,yBAAyB;kBAS1C,yCAAyC;oBAlBvC,mCAAmC;qCAiBlB,mEAAmE"}

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

@@ -13,7 +13,8 @@ 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";
@@ -299,7 +300,20 @@ export class NodeGraphView extends View {
              *
              * @type {boolean}
              */
-            consumed: false
+            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, {
@@ -340,12 +354,25 @@ export class NodeGraphView extends View {
                                     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
@@ -362,8 +389,10 @@ export class NodeGraphView extends View {
 
                                 const endpoint = tempConnection.endpoint;
                                 const consumed = tempConnection.consumed;
+                                const detached = tempConnection.detached;
 
                                 tempConnection.enabled = false;
+                                tempConnection.detached = null;
 
                                 requestRedraw();
 
@@ -373,6 +402,15 @@ export class NodeGraphView extends View {
                                     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));
+                                }
+
                                 const anchor = tempConnection.anchor;
 
                                 self.transformPointGraph2Canvas(anchor, v2_pointer);
@@ -443,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);
+                                    }
                                 }
                             }
                         });
@@ -598,6 +663,13 @@ export class NodeGraphView extends View {
             //draw connections: a wire carries what comes out of its source
             graph.connections.forEach(connection => {
 
+                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,
                     this.resolveConnectionPath(connection),
@@ -690,6 +762,10 @@ export class NodeGraphView extends View {
         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, requestRedraw);
         this.bindSignal(selection.connections.on.removed, requestRedraw);

package/editor/view/node-graph/actions/connection_bind_actions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Bind an input to a source, taking off whatever that input was already holding.
+ *
+ * An input takes one wire. A second one dropped on it is an author saying what should feed it,
+ * not asking for a merge the graph has no rule for — so the wire that was there comes off in the
+ * same gesture, and on the same step of the timeline. That an editor can never leave an input with
+ * two sources is the point: a graph loaded from a file may be in that state and is reported for it,
+ * but no gesture on the canvas can put one there.
+ *
+ * Returned rather than performed, so a caller in the middle of a larger step — a node and its first
+ * wire, say — can fold them into it. {@link ActionProcessor#doMany} applies them in order.
+ *
+ * @param {NodeGraph} graph
+ * @param {number} sourceNode
+ * @param {number} sourcePort
+ * @param {number} targetNode
+ * @param {number} targetPort input port; what is already bound to it is unbound first
+ * @param {NodeGraphVisualData} [visual] source of the removed wires' paths; without it the paths are
+ *        left alone, which is what a caller with no visual data wants
+ * @returns {Action[]}
+ */
+export function connection_bind_actions(graph: NodeGraph, sourceNode: number, sourcePort: number, targetNode: number, targetPort: number, visual?: NodeGraphVisualData): Action[];
+//# sourceMappingURL=connection_bind_actions.d.ts.map

package/editor/view/node-graph/actions/connection_bind_actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection_bind_actions.d.ts","sourceRoot":"","sources":["../../../../../editor/view/node-graph/actions/connection_bind_actions.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,sEARW,MAAM,cACN,MAAM,cACN,MAAM,cACN,MAAM,iCAGJ,QAAQ,CAgBpB"}

package/editor/view/node-graph/actions/connection_bind_actions.js

@@ -0,0 +1,39 @@
+import { ConnectionCreateAction } from "./ConnectionCreateAction.js";
+import { ConnectionDeleteAction } from "./ConnectionDeleteAction.js";
+
+/**
+ * Bind an input to a source, taking off whatever that input was already holding.
+ *
+ * An input takes one wire. A second one dropped on it is an author saying what should feed it,
+ * not asking for a merge the graph has no rule for — so the wire that was there comes off in the
+ * same gesture, and on the same step of the timeline. That an editor can never leave an input with
+ * two sources is the point: a graph loaded from a file may be in that state and is reported for it,
+ * but no gesture on the canvas can put one there.
+ *
+ * Returned rather than performed, so a caller in the middle of a larger step — a node and its first
+ * wire, say — can fold them into it. {@link ActionProcessor#doMany} applies them in order.
+ *
+ * @param {NodeGraph} graph
+ * @param {number} sourceNode
+ * @param {number} sourcePort
+ * @param {number} targetNode
+ * @param {number} targetPort input port; what is already bound to it is unbound first
+ * @param {NodeGraphVisualData} [visual] source of the removed wires' paths; without it the paths are
+ *        left alone, which is what a caller with no visual data wants
+ * @returns {Action[]}
+ */
+export function connection_bind_actions(graph, sourceNode, sourcePort, targetNode, targetPort, visual = undefined) {
+    const target = graph.getConnectionEndpoint(targetNode, targetPort);
+
+    const actions = [];
+
+    // off before on, so the graph is never holding an input with two sources — not even between two
+    // actions of one step, where anything watching it would see one
+    for (const connection of target === undefined ? [] : target.inConnections) {
+        actions.push(new ConnectionDeleteAction(graph, connection, visual));
+    }
+
+    actions.push(new ConnectionCreateAction(graph, sourceNode, sourcePort, targetNode, targetPort));
+
+    return actions;
+}

package/editor/view/particles/effect/ParticleCodeEditorView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticleCodeEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleCodeEditorView.js"],"names":[],"mappings":"AAgDA;IA2DI;;;OAGG;IACH;QAFyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;OA6G9F;IAxGG,mBAAuC;IAIvC;;OAEG;IACH,QAFU,OAAO,qDAAqD,EAAE,sBAAsB,CAE1E;IAmGxB;;OAEG;IACH,wBAYC;IAED;;;;OAIG;IACH,gBAsCC;IAwGD;;;OAGG;IACH,iBAFW,MAAM,QAahB;IAsBD;;OAEG;IACH,eAyBC;IAcD,eAcC;;CACJ;iBA5dgB,8BAA8B"}
+{"version":3,"file":"ParticleCodeEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleCodeEditorView.js"],"names":[],"mappings":"AAgDA;IA2DI;;;OAGG;IACH;QAFyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;OA6G9F;IAxGG,mBAAuC;IAIvC;;OAEG;IACH,QAFU,OAAO,qDAAqD,EAAE,sBAAsB,CAE1E;IAmGxB;;OAEG;IACH,wBAYC;IAED;;;;OAIG;IACH,gBAsCC;IAyGD;;;OAGG;IACH,iBAFW,MAAM,QAahB;IAsBD;;OAEG;IACH,eAyBC;IAcD,eAcC;;CACJ;iBA7dgB,8BAA8B"}

package/editor/view/particles/effect/ParticleCodeEditorView.js

@@ -283,9 +283,10 @@ export class ParticleCodeEditorView extends View {
     /**
      * What the optimizer did, in the two numbers that decide whether it was worth it.
      *
-     * Instructions are what the VM steps through and registers are what limits how much of an effect
-     * fits at all (see `PARTICLE_VM_REGISTER_SLOTS`), so those are the pair. Blank when the box is
-     * not ticked: there is nothing to compare a program against itself with.
+     * Instructions are what the VM steps through and registers are what decides which interpreter
+     * runs it: past `PARTICLE_VM_FAST_REGISTER_SLOTS` the whole system falls back to the wide VM,
+     * which works and is far slower. So those are the pair. Blank when the box is not ticked: there
+     * is nothing to compare a program against itself with.
      *
      * @param {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectCompilation} compilation
      */