@pauloricca/spagbol 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # Spagbol
 
-An extensible graph editor extracted from the interaction patterns in Teia and visual-visual. This repository is independent of both applications. Teia now consumes the complete shared canvas/controller through a patch codec and domain bindings; visual-visual remains unchanged.
+An extensible graph editor extracted from the interaction patterns in Teia and visual-visual. This repository is independent of both applications. Teia now consumes the complete shared canvas/controller through a patch codec and domain bindings; Visual Visual consumes the shared canvas/controller through its shader patch codec and domain bindings.
 
 Spagbol owns graph editing and presentation. Consumers own their node catalogues, node bodies, execution, persistence services, assets and runtime observations. There is no audio engine, shader compiler, MIDI access or server client in the package.
 
@@ -8,7 +8,7 @@ Spagbol owns graph editing and presentation. Consumers own their node catalogues
 
 `@pauloricca/spagbol` contains the complete graph model, registries, atomic edits, undo/redo, graph transformations, nesting, areas, observations and codecs together with the extensible React canvas, node frames/ports and controls. All public model and UI symbols come from the same entry point. Import `@pauloricca/spagbol/styles.css` explicitly.
 
-The package is version `0.1.0`, licensed under [MIT](LICENSE). React/React DOM 19 and React Flow 12.11 are peer dependencies. Source remains organised into internal `src/core` and `src/react` modules, with a single build, version and tarball. This is an initial implementation, not a claim of complete Teia interaction parity.
+The package is version `0.1.1`, licensed under [MIT](LICENSE). React/React DOM 19 and React Flow 12.11 are peer dependencies. Source remains organised into internal `src/core` and `src/react` modules, with a single build, version and tarball. This is an initial implementation, not a claim of complete Teia interaction parity.
 
 ## Docker development
 
@@ -329,3 +329,11 @@ npm install @pauloricca/spagbol @xyflow/react react react-dom
 Import `@pauloricca/spagbol/styles.css` once and mount `SpagbolCanvas` in a sized container, as above. Applications should declare the released npm version in their manifest and commit the registry-backed lockfile. The bundled example intentionally uses a local tarball so edits can be tested before a release.
 
 For updates, change the version first (for example `npm version patch --no-git-tag-version`), rerun the checks and dry run, then publish again. Commit the manifest/lockfile through your normal release workflow. Published name/version pairs cannot be reused. Local example preparation reads the package version to select its tarball. See [npm publish](https://docs.npmjs.com/cli/v11/commands/npm-publish/).
+
+## Node drag previews
+
+Ordinary node movement is presented as transient canvas geometry. The immutable editor document keeps its previous positions until drop, when all moved nodes are committed as one layout edit and one undo entry. Escape, pointer cancellation, or controller cancellation discards the preview. Numeric controls still publish live value previews through the controller's gesture API. Hosts observing document changes should expect a layout change at drop rather than on each pointer movement.
+
+## 0.1.1
+
+Node dragging now previews native canvas positions and commits one document edit on drop. This removes per-pointer graph cloning, validation and redundant controlled-position updates. Selection subscriptions are scoped to the affected node, port or cable. Sliders and numeric controls retain live value updates and grouped undo. Escape, pointer cancellation, multi-selection and Alt duplication are covered by regression checks. See [the performance investigation](docs/node-drag-performance.md) for measurements and behavior details.

package/dist/react/SpagbolCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpagbolCanvas.d.ts","sourceRoot":"","sources":["../../src/react/SpagbolCanvas.tsx"],"names":[],"mappings":"AAGA,OAAO,EAyBL,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAQL,KAAK,UAAU,EAEf,KAAK,WAAW,EAChB,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,4BAA4B,CAAC;AA4CpC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAClD,oFAAoF;IACpF,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,gBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,WAAW,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACpC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACrE,wEAAwE;IACxE,YAAY,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,MAAM,CAAC,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC3C,mFAAmF;IACnF,SAAS,CAAC,EAAE,KAAK,GAAG;QAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,4BAA4B,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAetD"}
+{"version":3,"file":"SpagbolCanvas.d.ts","sourceRoot":"","sources":["../../src/react/SpagbolCanvas.tsx"],"names":[],"mappings":"AAIA,OAAO,EAyBL,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAQL,KAAK,UAAU,EAEf,KAAK,WAAW,EAChB,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,4BAA4B,CAAC;AA4CpC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAClD,oFAAoF;IACpF,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,gBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,WAAW,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACpC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACrE,wEAAwE;IACxE,YAAY,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,MAAM,CAAC,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC3C,mFAAmF;IACnF,SAAS,CAAC,EAAE,KAAK,GAAG;QAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,4BAA4B,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAetD"}

package/dist/react/SpagbolCanvas.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { previewNodePositions, applyNodePositions } from "./nodeDrag.js";
 import { createPortal } from "react-dom";
 import { SpagbolCanvasLinkControls } from "./SpagbolCanvasLinkControls.js";
 import { SpagbolCanvasFlow } from "./SpagbolCanvasFlow.js";
@@ -13,6 +14,7 @@ import { rememberMeasurements, reuseFlowPresentations, stationaryReconnectEdge,
 import { duplicateDragPresentation, } from "./duplicateDrag.js";
 import { translateExtentForVisibleContent, clampViewportToTranslateExtent, infiniteCanvasExtent, } from "./viewport.js";
 import { anchorFlowId, areaFlowId, linkPath, nodeFlowId, parseHandle, sourceHandle, targetHandle, } from "./geometry.js";
+const emptyFlowNodes = [];
 const emptyViews = Object.freeze({});
 const emptyPresentations = Object.freeze({});
 const defaultFeatures = { compact: true, nestedGraphs: true, panels: true, areas: true, linkProperties: true };
@@ -163,8 +165,8 @@ const SpagbolCanvasLink = memo(function SpagbolCanvasLink(props) {
     const flow = useReactFlow();
     const viewport = useViewport();
     const [controlsVisible, setControlsVisible] = useState(false);
-    const selection = useEditorSelector(editor, snapshot => snapshot.selection);
-    const showControls = props.selected && selection.linkIds.length === 1 && editor.editing && !connecting && !props.data?.virtual;
+    const selectedLinkId = useEditorSelector(editor, snapshot => snapshot.selection.linkIds.length === 1 ? snapshot.selection.linkIds[0] : undefined);
+    const showControls = props.selected && selectedLinkId === props.id && editor.editing && !connecting && !props.data?.virtual;
     useEffect(() => {
         if (!showControls) {
             setControlsVisible(false);
@@ -206,7 +208,9 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
     const flow = useReactFlow();
     const flowStore = useStoreApi();
     const nodesInitialized = useNodesInitialized();
-    const flowNodes = useStore((state) => state.nodes);
+    // Only cable-property anchors need live native geometry. Subscribing to every
+    // position change otherwise causes redundant full-canvas renders during drags.
+    const flowNodes = useStore((state) => features.linkProperties ? state.nodes : emptyFlowNodes);
     // Measurements are canvas state, not saved graph data. Retaining them keeps
     // React Flow from hiding/reinitializing every node on each drag preview frame.
     const measuredSizes = useRef(new Map());
@@ -244,10 +248,24 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
     const [reconnectOriginal, setReconnectOriginal] = useState(null);
     const duplicate = useRef(null);
     const [duplicatePreview, setDuplicatePreview] = useState(null);
-    const cancelledDuplicate = useRef(false);
+    const cancelledNodeDrag = useRef(false);
+    // Position previews belong to the canvas, not the persistent document. A drag
+    // commits once, avoiding whole-document edits/validation on every pointer move.
+    const nodeDrag = useRef(null);
+    const [positionRevision, setPositionRevision] = useState(0);
+    const clearNodeDrag = () => {
+        nodeDrag.current = null;
+        // Force a controlled refresh on cancellation, even though the saved position
+        // never changed: React Flow currently holds the transient pointer position.
+        setPositionRevision(value => value + 1);
+    };
     useEffect(() => {
+        if (!snapshot.gesture && nodeDrag.current) {
+            cancelledNodeDrag.current = true;
+            clearNodeDrag();
+        }
         if (!snapshot.gesture && duplicate.current) {
-            cancelledDuplicate.current = true;
+            cancelledNodeDrag.current = true;
             duplicate.current = null;
             setDuplicatePreview(null);
         }
@@ -283,7 +301,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             const area = editor.graph.areas.find(area => area.id === id);
             if (!area)
                 return;
-            cancelledDuplicate.current = false;
+            cancelledNodeDrag.current = false;
             const fragment = copyFragment(editor.graph, [], [id]);
             duplicate.current = { namespace: createId('preview'), fragment, nodeId: '', origin: area.position, positions: new Map(fragment.nodes.map(node => [node.id, node.position])), areaPositions: new Map(fragment.areas.map(area => [area.id, area.position])), external };
             setDuplicatePreview(duplicate.current);
@@ -391,7 +409,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         ...renderGraph.nodes.map((node) => ({
             id: nodeFlowId(node.id),
             type: "spagbolNode",
-            position: node.position,
+            position: nodeDrag.current?.get(node.id) ?? node.position,
             selected: snapshot.selection.nodeIds.includes(node.id),
             hidden: collapsed.nodes.has(node.id),
             draggable: editor.editing && views[node.kind]?.draggable !== false &&
@@ -407,6 +425,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             deletable: false,
             dragHandle: ".spagbol-canvas-drag-handle",
             data: {
+                positionRevision,
                 node: duplicatePresentation?.originalNodes.get(node.id) ?? node,
                 projected: collapsed.projected.has(node.id),
                 stationaryOriginal: duplicatePresentation?.originalNodes.has(node.id),
@@ -426,6 +445,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         })),
     ], [
         renderGraph,
+        positionRevision,
         duplicatePresentation,
         snapshot.selection,
         snapshot.mode,
@@ -483,6 +503,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         collapsed,
         flow,
         measurementKey,
+        measurementRevision,
         settledViewport.zoom,
         editorSize,
         props.panBounds,
@@ -758,8 +779,14 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             setDuplicatePreview(next);
             return;
         }
-        if (cancelledDuplicate.current)
+        if (cancelledNodeDrag.current)
             return;
+        if (positions.length && nodeDrag.current) {
+            const next = previewNodePositions(nodeDrag.current, positions);
+            if (next !== nodeDrag.current)
+                nodeDrag.current = next;
+            return;
+        }
         if (positions.length)
             editor.edit("Move nodes", "layout", (graph) => {
                 for (const change of positions)
@@ -892,8 +919,10 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             return;
         const command = event.metaKey || event.ctrlKey, key = event.key.toLowerCase();
         if (key === "escape") {
-            if (duplicate.current)
-                cancelledDuplicate.current = true;
+            if (duplicate.current || nodeDrag.current)
+                cancelledNodeDrag.current = true;
+            if (nodeDrag.current)
+                clearNodeDrag();
             duplicate.current = null;
             setDuplicatePreview(null);
             editor.cancelGesture();
@@ -1045,8 +1074,10 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                 if (event.currentTarget.hasPointerCapture(event.pointerId))
                     event.currentTarget.releasePointerCapture(event.pointerId);
             }, onPointerCancel: () => {
-                if (duplicate.current)
-                    cancelledDuplicate.current = true;
+                if (duplicate.current || nodeDrag.current)
+                    cancelledNodeDrag.current = true;
+                if (nodeDrag.current)
+                    clearNodeDrag();
                 duplicate.current = null;
                 setDuplicatePreview(null);
                 setDrawing(null);
@@ -1064,8 +1095,10 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                     }, onNodeDragStart: (event, node) => {
                         if (!node.data.node)
                             return;
-                        cancelledDuplicate.current = false;
+                        cancelledNodeDrag.current = false;
                         editor.beginGesture(event.altKey ? "Duplicate nodes" : "Move nodes");
+                        if (!event.altKey)
+                            nodeDrag.current = new Map();
                         if (event.altKey) {
                             const selection = editor.getSnapshot().selection;
                             const ids = selection.nodeIds.includes(node.data.node.id)
@@ -1084,11 +1117,14 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                             setDuplicatePreview(duplicate.current);
                         }
                     }, onNodeDragStop: (_event, node) => {
+                        const positions = nodeDrag.current;
+                        if (positions)
+                            clearNodeDrag();
                         const current = duplicate.current;
                         duplicate.current = null;
                         setDuplicatePreview(null);
-                        if (cancelledDuplicate.current) {
-                            cancelledDuplicate.current = false;
+                        if (cancelledNodeDrag.current) {
+                            cancelledNodeDrag.current = false;
                             editor.cancelGesture();
                             editor.select(editor.getSnapshot().selection);
                             return;
@@ -1108,6 +1144,8 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                                 return;
                             }
                         }
+                        if (positions?.size)
+                            editor.edit("Move nodes", "layout", graph => applyNodePositions(graph, positions));
                         editor.commitGesture();
                     }, onConnectStart: (_event, params) => {
                         setRevealedNodeId(params.nodeId?.startsWith("node:") ? params.nodeId.slice(5) : null);