@bian-womp/spark-workbench 0.1.26 → 0.1.28

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);