@woosh/meep-engine 2.156.0 → 2.157.0

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

@@ -1,135 +1,211 @@
-import { noop } from "../../../src/core/function/noop.js";
-import Vector2 from "../../../src/core/geom/Vector2.js";
-import { NodeParameterDataType } from "../../../src/core/model/node-graph/node/parameter/NodeParameterDataType.js";
-import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
-import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
-import LabelView from "../../../src/view/common/LabelView.js";
-import EmptyView from "../../../src/view/elements/EmptyView.js";
-import View from "../../../src/view/View.js";
-import DatGuiController from "../ecs/components/DatGuiController.js";
-import { PortView } from "./PortView.js";
-
-export class NodeView extends View {
-    /**
-     *
-     * @param {NodeInstance} node
-     * @param {NodeVisualData} visual
-     * @param {NodeGraphVisualData} visualData
-     * @param {boolean} enableDrag
-     * @param {function(PortView, Port)} portCreationCallback
-     */
-    constructor({ node, visual, visualData, enableDrag = true, portCreationCallback = noop }) {
-        super();
-
-        /**
-         *
-         * @type {NodeInstance}
-         */
-        this.node = node;
-        /**
-         *
-         * @type {NodeVisualData}
-         */
-        this.visual = visual;
-
-        this.el = document.createElement('div');
-
-        this.addClass('ui-node-view');
-
-        const vPorts = new EmptyView({
-            classList: ['ports']
-        });
-
-        const nodeDescription = node.description;
-        const vName = new LabelView(nodeDescription.name, {
-            classList: ['name']
-        });
-
-        const v2_prev_position = new Vector2();
-
-        const self = this;
-
-        if (enableDrag) {
-            const draggableAspect = new DraggableAspect({
-                el: this.el,
-                dragStart(p) {
-                    v2_prev_position.copy(p);
-                },
-                drag(position, origin, delta) {
-                    const p = delta.clone();
-
-                    const scale = new Vector2(1, 1);
-
-                    self.computeGlobalScale(scale);
-
-                    p.divide(scale);
-
-                    // p.add(v2_origin);
-
-                    visual.dimensions.position.add(p);
-                }
-            });
-            this.on.linked.add(draggableAspect.start, draggableAspect);
-            this.on.unlinked.add(draggableAspect.stop, draggableAspect);
-        }
-
-        //create parameters
-
-        const vParamContainer = new EmptyView({ classList: ['parameters-container'] });
-
-        const vParams = new DatGuiController({ classList: ['parameters'] });
-        vParamContainer.addChild(vParams);
-
-        nodeDescription.parameters.forEach(param => {
-            const id = param.id;
-
-            const type = param.type;
-
-            let controller = null;
-
-            if (type === NodeParameterDataType.Number) {
-                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
-            } else if (type === NodeParameterDataType.String) {
-                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
-            } else if (type === NodeParameterDataType.Boolean) {
-                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
-            }
-
-            controller.name(param.name);
-            controller.onChange((v) => {
-                node.setParameterValue(id, v);
-            });
-        });
-
-
-        this.addChild(vParamContainer);
-
-        this.addChild(vName);
-
-        this.addChild(vPorts);
-
-        nodeDescription.getPorts().forEach(port => {
-
-            const portVisualData = visual.getPort(port.id);
-
-            const portView = new PortView({ port, visual: portVisualData, visualData });
-
-            portCreationCallback(portView, port);
-
-            vPorts.addChild(portView);
-
-        });
-
-        this.setClass('has-inputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.In));
-        this.setClass('has-outputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.Out));
-
-        this.on.linked.add(this.update, this);
-        this.bindSignal(visual.dimensions.position.onChanged, this.update, this);
-        this.bindSignal(visual.dimensions.size.onChanged, this.update, this);
-    }
-
-    update() {
-        this.position.copy(this.visual.dimensions.position);
-        this.size.copy(this.visual.dimensions.size);
-    }
-}
+import { noop } from "../../../src/core/function/noop.js";
+import Vector2 from "../../../src/core/geom/Vector2.js";
+import ObservedBoolean from "../../../src/core/model/ObservedBoolean.js";
+import { NodeParameterDataType } from "../../../src/core/model/node-graph/node/parameter/NodeParameterDataType.js";
+import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
+import { objectKeyByValue } from "../../../src/core/model/object/objectKeyByValue.js";
+import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+import { CheckboxView } from "../../../src/view/elements/CheckboxView.js";
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import View from "../../../src/view/View.js";
+import { NumberController } from "../ecs/components/common/NumberController.js";
+import { TextController } from "../ecs/components/common/TextController.js";
+import { PortView } from "./PortView.js";
+
+/**
+ * Default parameter write path, sets the value directly on the node instance.
+ * Editors supply a callback that routes the write through their action timeline instead.
+ * @param {NodeInstance} node
+ * @param {string} parameterId
+ * @param {*} value
+ */
+function default_parameter_set(node, parameterId, value) {
+    node.setParameterValue(parameterId, value);
+}
+
+export class NodeView extends View {
+    /**
+     *
+     * @param {NodeInstance} node
+     * @param {NodeVisualData} visual
+     * @param {NodeGraphVisualData} visualData
+     * @param {boolean} enableDrag
+     * @param {function(PortView, Port)} portCreationCallback
+     * @param {function(NodeInstance, string, *)} [parameterSetCallback] invoked when the user commits a parameter edit
+     */
+    constructor({
+                    node,
+                    visual,
+                    visualData,
+                    enableDrag = true,
+                    portCreationCallback = noop,
+                    parameterSetCallback = default_parameter_set
+                }) {
+        super();
+
+        /**
+         *
+         * @type {NodeInstance}
+         */
+        this.node = node;
+        /**
+         *
+         * @type {NodeVisualData}
+         */
+        this.visual = visual;
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-node-view');
+
+        const vPorts = new EmptyView({
+            classList: ['ports']
+        });
+
+        const nodeDescription = node.description;
+        const vName = new LabelView(nodeDescription.name, {
+            classList: ['name']
+        });
+
+        const self = this;
+
+        if (enableDrag) {
+            const draggableAspect = new DraggableAspect({
+                el: this.el,
+                drag(position, origin, delta) {
+                    const p = delta.clone();
+
+                    const scale = new Vector2(1, 1);
+
+                    self.computeGlobalScale(scale);
+
+                    p.divide(scale);
+
+                    visual.dimensions.position.add(p);
+                }
+            });
+            this.on.linked.add(draggableAspect.start, draggableAspect);
+            this.on.unlinked.add(draggableAspect.stop, draggableAspect);
+        }
+
+        //create parameters
+
+        const vParamContainer = new EmptyView({ classList: ['parameters-container'] });
+
+        const vParams = new EmptyView({ classList: ['parameters'] });
+        vParamContainer.addChild(vParams);
+
+        // parameter edits must not start node drags or text-selection pans
+        vParams.el.addEventListener('pointerdown', e => e.stopPropagation());
+
+        /**
+         *
+         * @param {NodeParameterDescription} param
+         * @returns {View}
+         */
+        function buildParameterRow(param) {
+            const parameterId = String(param.id);
+            const type = param.type;
+
+            const vRow = new EmptyView({ classList: ['parameter-row'] });
+
+            vRow.addChild(new LabelView(param.name, { classList: ['name'] }));
+
+            /**
+             * Commit an edit. Comparing against the current value both filters no-ops and
+             * breaks the model -> control -> commit echo cycle.
+             * @param {*} value
+             */
+            function commit(value) {
+                if (node.getParameterValue(parameterId) === value) {
+                    return;
+                }
+
+                parameterSetCallback(node, parameterId, value);
+            }
+
+            let vControl;
+
+            if (type === NodeParameterDataType.Number) {
+                const ctrl = new NumberController({ value: node.getParameterValue(parameterId) });
+
+                // commit when editing concludes, not per keystroke
+                ctrl.el.addEventListener('change', () => commit(ctrl.value.getValue()));
+
+                vRow.bindSignal(node.on.parameterChanged, (id, value) => {
+                    if (String(id) === parameterId) {
+                        ctrl.value.set(value);
+                    }
+                });
+
+                vControl = ctrl;
+            } else if (type === NodeParameterDataType.String) {
+                const ctrl = new TextController({ value: node.getParameterValue(parameterId) });
+
+                ctrl.el.addEventListener('change', () => commit(ctrl.value.getValue()));
+
+                vRow.bindSignal(node.on.parameterChanged, (id, value) => {
+                    if (String(id) === parameterId) {
+                        ctrl.value.set(value);
+                    }
+                });
+
+                vControl = ctrl;
+            } else if (type === NodeParameterDataType.Boolean) {
+                const observed = new ObservedBoolean(node.getParameterValue(parameterId) === true);
+
+                observed.onChanged.add(v => commit(v));
+
+                vRow.bindSignal(node.on.parameterChanged, (id, value) => {
+                    if (String(id) === parameterId) {
+                        observed.set(value === true);
+                    }
+                });
+
+                vControl = new CheckboxView({ value: observed });
+            } else {
+                throw new Error(`Unsupported parameter type '${objectKeyByValue(NodeParameterDataType, type)}' of parameter '${param.name}' (node '${nodeDescription.name}')`);
+            }
+
+            vRow.addChild(vControl);
+
+            return vRow;
+        }
+
+        nodeDescription.parameters.forEach(param => {
+            vParams.addChild(buildParameterRow(param));
+        });
+
+
+        this.addChild(vParamContainer);
+
+        this.addChild(vName);
+
+        this.addChild(vPorts);
+
+        nodeDescription.getPorts().forEach(port => {
+
+            const portVisualData = visual.getPort(port.id);
+
+            const portView = new PortView({ port, visual: portVisualData, visualData });
+
+            portCreationCallback(portView, port);
+
+            vPorts.addChild(portView);
+
+        });
+
+        this.setClass('has-inputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.In));
+        this.setClass('has-outputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.Out));
+
+        this.on.linked.add(this.update, this);
+        this.bindSignal(visual.dimensions.position.onChanged, this.update, this);
+        this.bindSignal(visual.dimensions.size.onChanged, this.update, this);
+    }
+
+    update() {
+        this.position.copy(this.visual.dimensions.position);
+        this.size.copy(this.visual.dimensions.size);
+    }
+}

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

@@ -0,0 +1,53 @@
+import { Action } from "../../../../src/core/process/undo/Action.js";
+
+/**
+ * Create a connection between two ports of a node graph.
+ * Self-contained: captures everything it needs, the processor context is not used,
+ * so the action works under any {@link ActionProcessor} instance.
+ */
+export class ConnectionCreateAction extends Action {
+    /**
+     *
+     * @param {NodeGraph} graph
+     * @param {number} sourceNode
+     * @param {number} sourcePort
+     * @param {number} targetNode
+     * @param {number} targetPort
+     */
+    constructor(graph, sourceNode, sourcePort, targetNode, targetPort) {
+        super();
+
+        /**
+         *
+         * @type {NodeGraph}
+         */
+        this.graph = graph;
+
+        this.sourceNode = sourceNode;
+        this.sourcePort = sourcePort;
+        this.targetNode = targetNode;
+        this.targetPort = targetPort;
+
+        /**
+         * Created connection, retained so that REDO restores the same identity
+         * @type {Connection|null}
+         */
+        this.connection = null;
+    }
+
+    async apply() {
+        const graph = this.graph;
+
+        if (this.connection === null) {
+            const id = graph.createConnection(this.sourceNode, this.sourcePort, this.targetNode, this.targetPort);
+
+            this.connection = graph.getConnection(id);
+        } else {
+            graph.addConnection(this.connection);
+        }
+    }
+
+    async revert() {
+        this.graph.deleteConnection(this.connection.id);
+    }
+}

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

@@ -0,0 +1,36 @@
+import { Action } from "../../../../src/core/process/undo/Action.js";
+
+/**
+ * Delete a connection from a node graph.
+ * Holds onto the connection object so that revert restores it with the same identity.
+ */
+export class ConnectionDeleteAction extends Action {
+    /**
+     *
+     * @param {NodeGraph} graph
+     * @param {Connection} connection
+     */
+    constructor(graph, connection) {
+        super();
+
+        /**
+         *
+         * @type {NodeGraph}
+         */
+        this.graph = graph;
+
+        /**
+         *
+         * @type {Connection}
+         */
+        this.connection = connection;
+    }
+
+    async apply() {
+        this.graph.deleteConnection(this.connection.id);
+    }
+
+    async revert() {
+        this.graph.addConnection(this.connection);
+    }
+}

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

@@ -0,0 +1,88 @@
+import { Action } from "../../../../src/core/process/undo/Action.js";
+
+/**
+ * Delete a node from a node graph, together with its attached connections and visual data.
+ * Everything removed is retained so that revert restores the exact same objects and IDs.
+ */
+export class NodeDeleteAction extends Action {
+    /**
+     *
+     * @param {NodeGraph} graph
+     * @param {NodeGraphVisualData} visual
+     * @param {number} nodeId
+     */
+    constructor(graph, visual, nodeId) {
+        super();
+
+        /**
+         *
+         * @type {NodeGraph}
+         */
+        this.graph = graph;
+
+        /**
+         *
+         * @type {NodeGraphVisualData}
+         */
+        this.visual = visual;
+
+        /**
+         *
+         * @type {number}
+         */
+        this.nodeId = nodeId;
+
+        /**
+         *
+         * @type {NodeInstance|null}
+         */
+        this.node = null;
+
+        /**
+         *
+         * @type {NodeVisualData|undefined}
+         */
+        this.nodeVisual = undefined;
+
+        /**
+         * Connections that were attached at the time of deletion
+         * @type {Connection[]}
+         */
+        this.connections = [];
+    }
+
+    async apply() {
+        const graph = this.graph;
+        const nodeId = this.nodeId;
+
+        this.node = graph.getNodeSafe(nodeId);
+        this.nodeVisual = this.visual.getNode(nodeId);
+
+        // capture attached connections before deleteNode cascades into them
+        const connection_ids = [];
+        graph.getConnectionsAttachedToNode(nodeId, connection_ids);
+
+        this.connections = connection_ids.map(id => graph.getConnection(id));
+
+        graph.deleteNode(nodeId);
+
+        // node IDs are pooled, stale visual data must not leak onto an unrelated future node
+        this.visual.removeNode(nodeId);
+    }
+
+    async revert() {
+        const graph = this.graph;
+
+        // visual data goes first: re-adding the node triggers view construction, which
+        // would otherwise regenerate fresh visual data and detach from the restored one
+        if (this.nodeVisual !== undefined) {
+            this.visual.addNode(this.nodeId, this.nodeVisual);
+        }
+
+        graph.addNode(this.node);
+
+        for (const connection of this.connections) {
+            graph.addConnection(connection);
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+import { Action } from "../../../../src/core/process/undo/Action.js";
+
+/**
+ * Set a parameter value on a node instance.
+ * The previous value is captured on first application so that revert restores it.
+ */
+export class NodeParameterSetAction extends Action {
+    /**
+     *
+     * @param {NodeInstance} node
+     * @param {string} parameterId
+     * @param {*} value
+     */
+    constructor(node, parameterId, value) {
+        super();
+
+        /**
+         *
+         * @type {NodeInstance}
+         */
+        this.node = node;
+
+        /**
+         *
+         * @type {string}
+         */
+        this.parameterId = parameterId;
+
+        this.value = value;
+
+        this.oldValue = undefined;
+
+        /**
+         * @private
+         * @type {boolean}
+         */
+        this.__captured = false;
+    }
+
+    async apply() {
+        if (!this.__captured) {
+            this.oldValue = this.node.getParameterValue(this.parameterId);
+            this.__captured = true;
+        }
+
+        this.node.setParameterValue(this.parameterId, this.value);
+    }
+
+    async revert() {
+        this.node.setParameterValue(this.parameterId, this.oldValue);
+    }
+}

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

@@ -0,0 +1,41 @@
+import { Action } from "../../../../src/core/process/undo/Action.js";
+
+/**
+ * @typedef {Object} NodeMoveEntry
+ * @property {NodeVisualData} visual
+ * @property {Vector2} from position before the move
+ * @property {Vector2} to position after the move
+ */
+
+/**
+ * Move one or more nodes of a node graph.
+ * Built at the end of a drag gesture: the live drag writes positions directly,
+ * the action records the net change for the timeline.
+ */
+export class NodesMoveAction extends Action {
+    /**
+     *
+     * @param {NodeMoveEntry[]} entries
+     */
+    constructor(entries) {
+        super();
+
+        /**
+         *
+         * @type {NodeMoveEntry[]}
+         */
+        this.entries = entries;
+    }
+
+    async apply() {
+        for (const entry of this.entries) {
+            entry.visual.dimensions.position.copy(entry.to);
+        }
+    }
+
+    async revert() {
+        for (const entry of this.entries) {
+            entry.visual.dimensions.position.copy(entry.from);
+        }
+    }
+}

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

@@ -0,0 +1,60 @@
+import { Action } from "../../../../src/core/process/undo/Action.js";
+
+/**
+ * Replace the contents of a node graph selection.
+ * The previous selection is snapshotted on first application so that revert restores it,
+ * following the convention of the ECS editor where selection changes are part of the timeline.
+ */
+export class SelectionSetAction extends Action {
+    /**
+     *
+     * @param {NodeGraphSelection} selection
+     * @param {number[]} nodes node IDs to select
+     * @param {number[]} connections connection IDs to select
+     */
+    constructor(selection, nodes, connections) {
+        super();
+
+        /**
+         *
+         * @type {NodeGraphSelection}
+         */
+        this.selection = selection;
+
+        /**
+         *
+         * @type {number[]}
+         */
+        this.nodes = nodes;
+
+        /**
+         *
+         * @type {number[]}
+         */
+        this.connections = connections;
+
+        /**
+         *
+         * @type {NodeGraphSelection|null}
+         */
+        this.oldState = null;
+    }
+
+    async apply() {
+        const selection = this.selection;
+
+        if (this.oldState === null) {
+            this.oldState = selection.clone();
+        }
+
+        selection.nodes.reset();
+        selection.nodes.addAll(this.nodes);
+
+        selection.connections.reset();
+        selection.connections.addAll(this.connections);
+    }
+
+    async revert() {
+        this.selection.copy(this.oldState);
+    }
+}