@bian-womp/spark-workbench 0.1.25 → 0.1.27

package/lib/cjs/index.cjs

@@ -1911,7 +1911,6 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, ref) => {
     const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
-    const ioValues = { inputs: inputsMap, outputs: outputsMap };
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     // Expose imperative API
@@ -1924,7 +1923,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             catch { }
         },
     }));
-    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
+    const { onConnect, onNodesChange: wbOnNodesChange, onEdgesChange: wbOnEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
         const ui = wb.getUI();
@@ -1945,13 +1944,13 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
         return { nodeTypes: types, resolveNodeType: resolver };
         // registry is stable; ui renderers expected to be set up before mount
     }, [wb, registry]);
-    const { nodes, edges } = React.useMemo(() => {
+    const { nodes: computedNodes, edges: computedEdges } = React.useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
-        return toReactFlow(def, wb.getPositions(), registry, {
+        const out = toReactFlow(def, wb.getPositions(), registry, {
             showValues,
-            inputs: ioValues.inputs,
-            outputs: ioValues.outputs,
+            inputs: inputsMap,
+            outputs: outputsMap,
             resolveNodeType,
             toString,
             toElement,
@@ -1962,9 +1961,12 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             selectedNodeIds: new Set(sel.nodes),
             selectedEdgeIds: new Set(sel.edges),
         });
+        console.info(nodeTypes, out);
+        return out;
     }, [
         showValues,
-        ioValues,
+        inputsMap,
+        outputsMap,
         valuesTick,
         toString,
         toElement,
@@ -1972,7 +1974,28 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
         edgeStatus,
         nodeValidation,
         edgeValidation,
+        nodeTypes,
+        resolveNodeType,
     ]);
+    // Local controlled state per requested pattern
+    const [nodes, setNodes] = React.useState(computedNodes);
+    const [edges, setEdges] = React.useState(computedEdges);
+    // Sync from computed graph to local state when source changes
+    React.useEffect(() => {
+        setNodes(computedNodes);
+    }, [computedNodes]);
+    React.useEffect(() => {
+        setEdges(computedEdges);
+    }, [computedEdges]);
+    // Bridge RF changes to both local state and workbench
+    const onNodesChange = React.useCallback((changes) => {
+        setNodes((nds) => ReactFlow.applyNodeChanges(changes, nds));
+        wbOnNodesChange(changes);
+    }, [wbOnNodesChange]);
+    const onEdgesChange = React.useCallback((changes) => {
+        setEdges((eds) => ReactFlow.applyEdgeChanges(changes, eds));
+        wbOnEdgesChange(changes);
+    }, [wbOnEdgesChange]);
     const [menuOpen, setMenuOpen] = React.useState(false);
     const [menuPos, setMenuPos] = React.useState(null);
     const [nodeMenuOpen, setNodeMenuOpen] = React.useState(false);
@@ -2125,7 +2148,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const downloadGraph = React.useCallback(() => {
         try {
             const def = wb.export();
-            const pretty = JSON.stringify(def, null, 2);
+            const inputs = runner.getInputs(def);
+            const payload = { def, inputs };
+            const pretty = JSON.stringify(payload, null, 2);
             const blob = new Blob([pretty], { type: "application/json" });
             const url = URL.createObjectURL(blob);
             const a = document.createElement("a");
@@ -2142,7 +2167,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         catch (err) {
             alert(String(err?.message ?? err));
         }
-    }, [wb]);
+    }, [wb, runner]);
     const hydrateFromBackend = React.useCallback(async (kind, base) => {
         try {
             const transport = kind === "remote-http"
@@ -2292,20 +2317,24 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                 value = Number.isFinite(n) ? n : 0;
                 break;
             }
+            case "base.float[]": {
+                value = parseArray(String(raw), (x) => Number(x));
+                break;
+            }
             case "base.bool": {
                 value = raw === "true" || raw === "1" ? true : false;
                 break;
             }
-            case "base.string": {
-                value = String(raw);
+            case "base.bool[]": {
+                value = parseArray(String(raw), (x) => /^(true|1)$/i.test(x));
                 break;
             }
-            case "base.float[]": {
-                value = parseArray(String(raw), (x) => Number(x));
+            case "base.string": {
+                value = String(raw);
                 break;
             }
-            case "base.bool[]": {
-                value = parseArray(String(raw), (x) => /^(true|1)$/i.test(x));
+            case "base.string[]": {
+                value = parseArray(String(raw), (x) => String(x));
                 break;
             }
             case "base.vec3": {