@bian-womp/spark-workbench 0.2.50 → 0.2.52

package/lib/cjs/index.cjs

@@ -103,6 +103,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             nodes: [],
             edges: [],
         };
+        this.viewport = null;
     }
     setRegistry(registry) {
         this.registry = registry;
@@ -260,6 +261,43 @@ class InMemoryWorkbench extends AbstractWorkbench {
             edges: [...this.selection.edges],
         };
     }
+    setViewport(viewport) {
+        this.viewport = { ...viewport };
+    }
+    getViewport() {
+        return this.viewport ? { ...this.viewport } : null;
+    }
+    getUIState() {
+        return {
+            positions: Object.keys(this.positions).length > 0
+                ? { ...this.positions }
+                : undefined,
+            selection: this.selection.nodes.length > 0 || this.selection.edges.length > 0
+                ? {
+                    nodes: [...this.selection.nodes],
+                    edges: [...this.selection.edges],
+                }
+                : undefined,
+            viewport: this.viewport ? { ...this.viewport } : undefined,
+        };
+    }
+    setUIState(ui) {
+        if (!ui)
+            return;
+        if (ui.positions) {
+            this.positions = { ...ui.positions };
+        }
+        if (ui.selection) {
+            this.selection = {
+                nodes: [...ui.selection.nodes],
+                edges: [...ui.selection.edges],
+            };
+            this.emit("selectionChanged", this.selection);
+        }
+        if (ui.viewport) {
+            this.viewport = { ...ui.viewport };
+        }
+    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -342,23 +380,6 @@ class AbstractGraphRunner {
             this.stop();
         }
     }
-    setInput(nodeId, handle, value) {
-        if (!this.stagedInputs[nodeId])
-            this.stagedInputs[nodeId] = {};
-        if (value === undefined) {
-            delete this.stagedInputs[nodeId][handle];
-        }
-        else {
-            this.stagedInputs[nodeId][handle] = value;
-        }
-        if (this.engine) {
-            this.engine.setInput(nodeId, handle, value);
-        }
-        else {
-            // Emit a value event so UI updates even when engine isn't running
-            this.emit("value", { nodeId, handle, value, io: "input" });
-        }
-    }
     triggerExternal(nodeId, event) {
         this.engine?.triggerExternal(nodeId, event);
     }
@@ -1061,6 +1082,10 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             return value;
         }
     }
+    async setExtData(data) {
+        const client = await this.ensureClient();
+        await client.setExtData(data);
+    }
     async snapshotFull() {
         const client = await this.ensureClient();
         try {
@@ -3288,6 +3313,7 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const COLS = 4;
                 const DX = 180;
                 const DY = 160;
+                const nodeIds = [];
                 for (let idx = 0; idx < coercedItems.length; idx++) {
                     const cv = coercedItems[idx];
                     const col = idx % COLS;
@@ -3298,9 +3324,16 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                         params: {},
                         initialInputs: { [elemTarget.inputHandle]: structuredClone(cv) },
                     });
+                    nodeIds.push(newId);
+                }
+                if (nodeIds.length > 0) {
                     runner.update(wb.export());
                     await runner.whenIdle();
-                    runner.setInputs(newId, { [elemTarget.inputHandle]: cv });
+                    for (let idx = 0; idx < coercedItems.length; idx++) {
+                        runner.setInputs(nodeIds[idx], {
+                            [elemTarget.inputHandle]: coercedItems[idx],
+                        });
+                    }
                 }
                 return;
             }
@@ -3621,18 +3654,48 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const addNodeAt = React.useCallback((typeId, pos) => {
         wb.addNode({ typeId, position: pos });
     }, [wb]);
-    React.useCallback((inst) => {
-        rfInstanceRef.current = inst;
-    }, []);
     const onCloseMenu = React.useCallback(() => {
         setMenuOpen(false);
     }, []);
     const onCloseNodeMenu = React.useCallback(() => {
         setNodeMenuOpen(false);
     }, []);
+    const onMoveEnd = React.useCallback(() => {
+        if (rfInstanceRef.current) {
+            const viewport = rfInstanceRef.current.getViewport();
+            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom });
+        }
+    }, [wb]);
+    const viewportRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!rfInstanceRef.current)
+            return;
+        const currentViewport = wb.getViewport();
+        if (currentViewport &&
+            (!viewportRef.current ||
+                viewportRef.current.x !== currentViewport.x ||
+                viewportRef.current.y !== currentViewport.y ||
+                viewportRef.current.zoom !== currentViewport.zoom)) {
+            viewportRef.current = currentViewport;
+            rfInstanceRef.current.setViewport({
+                x: currentViewport.x,
+                y: currentViewport.y,
+                zoom: currentViewport.zoom,
+            });
+        }
+    });
     return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, selectionOnDrag: true, onInit: (inst) => {
                     rfInstanceRef.current = inst;
-                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu }))] }) }) }));
+                    const savedViewport = wb.getViewport();
+                    if (savedViewport) {
+                        viewportRef.current = savedViewport;
+                        inst.setViewport({
+                            x: savedViewport.x,
+                            y: savedViewport.y,
+                            zoom: savedViewport.zoom,
+                        });
+                    }
+                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu }))] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -3722,8 +3785,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.getExamples(defaultExamples);
         return defaultExamples;
     }, [overrides, defaultExamples]);
-    const lastAutoLaunched = React.useRef(undefined);
-    const autoLayoutRan = React.useRef(false);
     const canvasRef = React.useRef(null);
     const uploadInputRef = React.useRef(null);
     const [registryReady, setRegistryReady] = React.useState(() => {
@@ -3748,7 +3809,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             }
         };
         onInit({ wb, runner, setInitialGraph });
-    }, [onInit, wb, runner, runAutoLayout, registry, setRegistry]);
+    }, [onInit, wb, runner]);
     // Expose change callback on graph/value changes
     React.useEffect(() => {
         if (!onChange)
@@ -3883,7 +3944,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                     }
                 }
             }
-            runAutoLayout();
         }
         catch (err) {
             const message = err instanceof Error ? err.message : String(err);
@@ -3894,7 +3954,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             if (uploadInputRef.current)
                 uploadInputRef.current.value = "";
         }
-    }, [wb, runner, runAutoLayout]);
+    }, [wb, runner]);
     const triggerUpload = React.useCallback(() => {
         uploadInputRef.current?.click();
     }, []);
@@ -3936,32 +3996,13 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const d = wb.export();
         if (!d.nodes || d.nodes.length === 0)
             return;
-        if (lastAutoLaunched.current === engine)
-            return;
         try {
             runner.launch(d, { engine: engine });
-            lastAutoLaunched.current = engine;
         }
         catch {
             // ignore
         }
     }, [engine, runner, isGraphRunning, wb, backendKind]);
-    // Registry is automatically fetched by RemoteGraphRunner when it connects
-    // Run auto layout after registry is hydrated (for remote backends)
-    React.useEffect(() => {
-        if (autoLayoutRan.current)
-            return;
-        // Wait for registry to be ready for remote backends
-        if (backendKind !== "local" && !registryReady)
-            return;
-        const cur = wb.export();
-        const positions = wb.getPositions();
-        const allMissing = cur.nodes.every((n) => !positions[n.nodeId]);
-        if (allMissing) {
-            autoLayoutRan.current = true;
-            runAutoLayout();
-        }
-    }, [wb, runAutoLayout, backendKind, registryReady, registry]);
     const baseSetInput = React.useCallback((handle, raw) => {
         if (!selectedNodeId)
             return;
@@ -3971,7 +4012,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return;
         // If raw is undefined, pass it through to delete the input value
         if (raw === undefined) {
-            runner.setInput(selectedNodeId, handle, undefined);
+            runner.setInputs(selectedNodeId, { [handle]: undefined });
             return;
         }
         const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, handle);
@@ -4050,7 +4091,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                 value = raw;
             }
         }
-        runner.setInput(selectedNodeId, handle, value);
+        runner.setInputs(selectedNodeId, { [handle]: value });
     }, [selectedNodeId, def.edges, effectiveHandles, runner]);
     const setInput = React.useMemo(() => {
         if (overrides?.setInput) {