@bian-womp/spark-workbench 0.3.27 → 0.3.29

package/lib/cjs/index.cjs

@@ -2760,11 +2760,11 @@ function toReactFlow(def, positions, sizes, registry, opts) {
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
     // Build a map of valid handles per node up-front and cache handle data
     const validHandleMap = {};
-    const nodeHandlesCache = {};
     for (const n of def.nodes) {
-        const handles = computeEffectiveHandles(n, registry);
-        nodeHandlesCache[n.nodeId] = handles;
-        const { inputs, outputs } = handles;
+        const { inputs, outputs } = opts.handles[n.nodeId] || {
+            inputs: {},
+            outputs: {},
+        };
         const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
         const outputOrder = Object.keys(outputs);
         validHandleMap[n.nodeId] = {
@@ -2822,7 +2822,11 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             });
     };
     const nodes = def.nodes.map((n) => {
-        const { inputs: inputSource, outputs: outputSource } = nodeHandlesCache[n.nodeId];
+        const effectiveHandles = opts.handles[n.nodeId] || {
+            inputs: {},
+            outputs: {},
+        };
+        const { inputs: inputSource, outputs: outputSource } = effectiveHandles;
         const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
         const customSize = sizes?.[n.nodeId];
         const sizeOverrides = customSize
@@ -2855,6 +2859,7 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             params: n.params,
             inputHandles,
             outputHandles,
+            handles: opts.handles[n.nodeId],
             inputConnected: Object.fromEntries(inputHandles.map((h) => [
                 h.id,
                 !!connectedInputs[n.nodeId]?.has(h.id),
@@ -2866,7 +2871,10 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             initialWidth: initialGeom.width,
             initialHeight: initialGeom.height,
             inputValues: opts.inputs?.[n.nodeId],
-            inputDefaults: opts.inputDefaults?.[n.nodeId],
+            inputDefaults: {
+                ...opts.handles?.[n.nodeId]?.inputDefaults,
+                ...opts.inputDefaults?.[n.nodeId],
+            },
             outputValues: opts.outputs?.[n.nodeId],
             handleMetadata,
             status: opts.nodeStatus?.[n.nodeId],
@@ -2916,8 +2924,8 @@ function toReactFlow(def, positions, sizes, registry, opts) {
                     : undefined;
         const edgeTypeId = e.typeId || undefined;
         // Get handle type information from cached handles
-        const sourceHandles = nodeHandlesCache[e.source.nodeId];
-        const targetHandles = nodeHandlesCache[e.target.nodeId];
+        const sourceHandles = opts.handles[e.source.nodeId];
+        const targetHandles = opts.handles[e.target.nodeId];
         const sourceNode = def.nodes.find((n) => n.nodeId === e.source.nodeId);
         const targetNode = def.nodes.find((n) => n.nodeId === e.target.nodeId);
         const sourceHandleTypeId = sourceHandles?.outputs[e.source.handle]
@@ -3943,6 +3951,13 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
             offRunnerStatus();
         };
     }, [runner]);
+    const handlesMap = React.useMemo(() => {
+        const out = {};
+        for (const n of wb.def.nodes) {
+            out[n.nodeId] = computeEffectiveHandles(n, wb.registry);
+        }
+        return out;
+    }, [wb, wb.def, graphTick, wb.registry, registryVersion]);
     // Def and IO values
     const inputsMap = React.useMemo(() => runner.getInputs(wb.def), [runner, wb, wb.def, valuesTick]);
     const inputDefaultsMap = React.useMemo(() => runner.getInputDefaults(wb.def), [runner, wb, wb.def, valuesTick]);
@@ -3951,8 +3966,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of wb.def.nodes) {
-            const effectiveHandles = computeEffectiveHandles(n, wb.registry);
-            const outputsDecl = effectiveHandles.outputs;
+            const outputsDecl = handlesMap[n.nodeId]?.outputs ?? {};
             const handles = Object.keys(outputsDecl);
             const cur = {};
             for (const h of handles) {
@@ -3965,7 +3979,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                 out[n.nodeId] = cur;
         }
         return out;
-    }, [wb, wb.def, outputsMap, wb.registry, registryVersion]);
+    }, [wb, wb.def, outputsMap, handlesMap]);
     // Initialize nodes and derive invalidated status from persisted metadata
     React.useEffect(() => {
         const workbenchRuntimeState = wb.getRuntimeState() ?? { nodes: {} };
@@ -4738,6 +4752,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         nodeStatus,
         edgeStatus,
         valuesTick,
+        handlesMap,
         inputsMap,
         inputDefaultsMap,
         outputsMap,
@@ -4788,6 +4803,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         removeSystemError,
         removeRegistryError,
         removeInputValidationError,
+        handlesMap,
         inputsMap,
         inputDefaultsMap,
         outputsMap,
@@ -5298,24 +5314,31 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { wb, registryVersion, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
+    const { wb, registryVersion, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, handlesMap, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
     const globalValidationIssues = validationGlobal;
     const selectedNode = wb.def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedEdge = wb.def.edges.find((e) => e.id === selectedEdgeId);
-    // Use computeEffectiveHandles to merge registry defaults with dynamically resolved handles
+    // Use precomputed handles map from context
     const effectiveHandles = selectedNode
-        ? computeEffectiveHandles(selectedNode, wb.registry)
-        : { inputs: {}, outputs: {}};
+        ? handlesMap[selectedNode.nodeId] ?? {
+            inputs: {},
+            outputs: {},
+            inputDefaults: {},
+        }
+        : { inputs: {}, outputs: {}, inputDefaults: {} };
     const inputHandles = Object.entries(effectiveHandles.inputs)
         .filter(([k]) => !sparkGraph.isInputPrivate(effectiveHandles.inputs, k))
         .map(([k]) => k);
     const outputHandles = Object.keys(effectiveHandles.outputs);
     const nodeInputsRaw = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
     const nodeInputsDefaults = selectedNodeId
-        ? inputDefaultsMap[selectedNodeId] ?? {}
+        ? {
+            ...effectiveHandles.inputDefaults,
+            ...inputDefaultsMap[selectedNodeId],
+        }
         : {};
     // Keep defaults separate for placeholder use (don't merge into nodeInputs)
     const nodeInputs = nodeInputsRaw;
@@ -5877,7 +5900,7 @@ const SelectionBoundOverlay = ({ selection, rfInstance, viewportTick }) => {
 
 const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
     const { showValues, toString, toElement, getDefaultNodeSize, reactFlowProps, } = props;
-    const { wb, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
+    const { wb, handlesMap, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     const [historyState, setHistoryState] = React.useState(wb.getHistory());
@@ -5943,6 +5966,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
     };
     // Expose imperative API
     const rfInstanceRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => ({
         fitView: () => {
             try {
@@ -5992,14 +6016,13 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         });
         return () => off();
     }, [wb]);
-    // Memoize customData to prevent unnecessary recomputations
-    const customData = React.useMemo(() => wb.getCustomData(), [wb]);
     const rfData = React.useMemo(() => {
         const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
             showValues,
             inputs: inputsMap,
             inputDefaults: inputDefaultsMap,
             outputs: outputsMap,
+            handles: handlesMap,
             resolveNodeType,
             toString,
             toElement,
@@ -6011,7 +6034,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
             selectedEdgeIds: new Set(selection.edges),
             getDefaultNodeSize,
             ui,
-            customData,
+            customData: wb.getCustomData(),
         });
         // Retain references for unchanged items
         const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
@@ -6107,8 +6130,8 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         inputsMap,
         inputDefaultsMap,
         outputsMap,
+        handlesMap,
         valuesTick,
-        registryVersion,
         toString,
         toElement,
         nodeStatus,
@@ -6117,7 +6140,6 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         edgeValidation,
         resolveNodeType,
         selection,
-        customData,
         ui,
         getDefaultNodeSize,
         wb,
@@ -6350,8 +6372,14 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         if (!enableKeyboardShortcuts)
             return;
         const handleKeyDown = async (e) => {
-            // Ignore if typing in input/textarea
+            // Check if target is inside WorkbenchCanvas container
             const target = e.target;
+            if (!containerRef.current ||
+                !(containerRef.current.contains(target) ||
+                    containerRef.current == target)) {
+                return;
+            }
+            // Ignore if typing in input/textarea
             if (target.tagName === "INPUT" ||
                 target.tagName === "TEXTAREA" ||
                 target.isContentEditable) {
@@ -6525,7 +6553,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         return () => off();
     }, [wb]);
     const { onInit: userOnInit, ...restReactFlowProps } = reactFlowProps || {};
-    return (jsxRuntime.jsxs("div", { className: "w-full h-full relative overflow-hidden", onContextMenu: onContextMenu, children: [jsxRuntime.jsxs(react.ReactFlowProvider, { children: [jsxRuntime.jsxs(react.ReactFlow, { ...restReactFlowProps, nodes: rfData.nodes, edges: rfData.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: "w-full h-full relative overflow-hidden", tabIndex: 0, onContextMenu: onContextMenu, children: [jsxRuntime.jsxs(react.ReactFlowProvider, { children: [jsxRuntime.jsxs(react.ReactFlow, { ...restReactFlowProps, nodes: rfData.nodes, edges: rfData.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
                             rfInstanceRef.current = inst;
                             const savedViewport = wb.getViewport();
                             if (savedViewport) {
@@ -6547,13 +6575,17 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
 const WorkbenchCanvas = WorkbenchCanvasComponent;
 
 function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
-    const { wb, registryVersion, runner, selectedNodeId, runAutoLayout, runMode, setRunMode, isRunning, } = useWorkbenchContext();
+    const { wb, registryVersion, runner, selectedNodeId, handlesMap, runAutoLayout, runMode, setRunMode, isRunning, } = useWorkbenchContext();
     const [transportStatus, setTransportStatus] = React.useState({
         state: "local",
     });
     const selectedNode = wb.def.nodes.find((n) => n.nodeId === selectedNodeId);
     const effectiveHandles = selectedNode
-        ? computeEffectiveHandles(selectedNode, wb.registry)
+        ? handlesMap[selectedNode.nodeId] ?? {
+            inputs: {},
+            outputs: {},
+            inputDefaults: {},
+        }
         : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = React.useState(example ?? "");
     const isGraphRunning = isRunning();