@bian-womp/spark-workbench 0.2.86 → 0.2.88

package/lib/cjs/index.cjs

@@ -2190,19 +2190,26 @@ function createHandleLayout(args) {
     };
 }
 function layoutNode(args, overrides) {
-    const { node, registry, showValues, overrides: sizeOverrides } = args;
+    const { node, registry, showValues, overrides: sizeOverrides, missingInputs = [], missingOutputs = [], } = args;
     const { inputs, outputs } = computeEffectiveHandles(node, registry);
     const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
     const outputOrder = Object.keys(outputs);
     const estimateNodeSizeFn = overrides?.estimateNodeSize ?? estimateNodeSize;
     const createHandleBoundsFn = overrides?.createHandleBounds ?? createHandleBounds;
     const createHandleLayoutFn = overrides?.createHandleLayout ?? createHandleLayout;
-    const { width, height } = estimateNodeSizeFn({
+    // Calculate base dimensions
+    const baseRows = Math.max(inputOrder.length, outputOrder.length);
+    const { width: baseWidth, height: baseHeight } = estimateNodeSizeFn({
         node,
         registry,
         showValues,
         overrides: sizeOverrides,
     });
+    // Calculate final dimensions accounting for missing handles
+    const finalRows = Math.max(inputOrder.length + missingInputs.length, outputOrder.length + missingOutputs.length);
+    const width = baseWidth;
+    const height = baseHeight + Math.max(0, finalRows - baseRows) * NODE_ROW_HEIGHT_PX;
+    // Create bounds and layouts for regular handles
     const handles = [
         ...inputOrder.map((id, i) => createHandleBoundsFn({
             id,
@@ -2233,7 +2240,51 @@ function layoutNode(args, overrides) {
             rowIndex: i,
         })),
     ];
-    return { width, height, inputOrder, outputOrder, handles, handleLayout };
+    // Create bounds and layouts for missing handles
+    const missingHandleBounds = [
+        ...missingInputs.map((id, i) => createHandleBoundsFn({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            rowIndex: inputOrder.length + i,
+            nodeWidth: width,
+        })),
+        ...missingOutputs.map((id, i) => createHandleBoundsFn({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            rowIndex: outputOrder.length + i,
+            nodeWidth: width,
+        })),
+    ];
+    const missingHandleLayout = [
+        ...missingInputs.map((id, i) => ({
+            ...createHandleLayoutFn({
+                id,
+                type: "target",
+                position: react.Position.Left,
+                rowIndex: inputOrder.length + i,
+            }),
+            missing: true,
+        })),
+        ...missingOutputs.map((id, i) => ({
+            ...createHandleLayoutFn({
+                id,
+                type: "source",
+                position: react.Position.Right,
+                rowIndex: outputOrder.length + i,
+            }),
+            missing: true,
+        })),
+    ];
+    return {
+        width,
+        height,
+        inputOrder,
+        outputOrder,
+        handles: [...handles, ...missingHandleBounds],
+        handleLayout: [...handleLayout, ...missingHandleLayout],
+    };
 }
 
 function useWorkbenchBridge(wb) {
@@ -2505,10 +2556,13 @@ function toReactFlow(def, positions, sizes, registry, opts) {
     const EDGE_STYLE_MISSING = { stroke: "#f59e0b", strokeWidth: 2 }; // amber-500
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
-    // Build a map of valid handles per node up-front
+    // 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 { inputs, outputs } = computeEffectiveHandles(n, registry);
+        const handles = computeEffectiveHandles(n, registry);
+        nodeHandlesCache[n.nodeId] = handles;
+        const { inputs, outputs } = handles;
         const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
         const outputOrder = Object.keys(outputs);
         validHandleMap[n.nodeId] = {
@@ -2537,87 +2591,36 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             (missingOutputsByNode[srcId] || (missingOutputsByNode[srcId] = new Set())).add(srcHandle);
         }
     }
-    // This map is still used later for certain checks; align with valid handles
-    const nodeHandleMap = {};
-    Object.assign(nodeHandleMap, validHandleMap);
     // Get layout function overrides from UI registry
     const layoutNodeOverride = opts.ui?.getLayoutNode() ?? layoutNode;
     const createHandleBoundsFn = opts.ui?.getCreateHandleBounds() ?? createHandleBounds;
     const createHandleLayoutFn = opts.ui?.getCreateHandleLayout() ?? createHandleLayout;
     const estimateNodeSizeFn = opts.ui?.getEstimateNodeSize() ?? estimateNodeSize;
-    const computeLayout = (node, overrides) => {
+    const computeLayout = (node, overrides, missingInputs, missingOutputs) => {
         return layoutNodeOverride
             ? layoutNodeOverride({
                 node,
                 registry,
                 showValues: opts.showValues,
                 overrides,
+                missingInputs,
+                missingOutputs,
             })
             : layoutNode({
                 node,
                 registry,
                 showValues: opts.showValues,
                 overrides,
+                missingInputs,
+                missingOutputs,
             }, {
                 estimateNodeSize: estimateNodeSizeFn,
                 createHandleBounds: createHandleBoundsFn,
                 createHandleLayout: createHandleLayoutFn,
             });
     };
-    const calculateDimensionsWithMissingHandles = (geom, extraInputs, extraOutputs) => {
-        const baseLeftCount = geom.inputOrder.length;
-        const baseRightCount = geom.outputOrder.length;
-        const baseRows = Math.max(baseLeftCount, baseRightCount);
-        const newRows = Math.max(baseLeftCount + extraInputs.length, baseRightCount + extraOutputs.length);
-        return {
-            baseLeftCount,
-            baseRightCount,
-            baseRows,
-            newRows,
-            width: geom.width,
-            height: geom.height + Math.max(0, newRows - baseRows) * NODE_ROW_HEIGHT_PX,
-        };
-    };
-    const createMissingHandleLayouts = (extraInputs, extraOutputs, baseLeftCount, baseRightCount) => {
-        const left = extraInputs.map((id, i) => ({
-            ...createHandleLayoutFn({
-                id,
-                type: "target",
-                position: react.Position.Left,
-                rowIndex: baseLeftCount + i,
-            }),
-            missing: true,
-        }));
-        const right = extraOutputs.map((id, i) => ({
-            ...createHandleLayoutFn({
-                id,
-                type: "source",
-                position: react.Position.Right,
-                rowIndex: baseRightCount + i,
-            }),
-            missing: true,
-        }));
-        return [...left, ...right];
-    };
-    const createMissingHandleBounds = (extraInputs, extraOutputs, baseLeftCount, baseRightCount, nodeWidth) => {
-        const left = extraInputs.map((id, i) => createHandleBoundsFn({
-            id,
-            type: "target",
-            position: react.Position.Left,
-            rowIndex: baseLeftCount + i,
-            nodeWidth,
-        }));
-        const right = extraOutputs.map((id, i) => createHandleBoundsFn({
-            id,
-            type: "source",
-            position: react.Position.Right,
-            rowIndex: baseRightCount + i,
-            nodeWidth,
-        }));
-        return [...left, ...right];
-    };
     const nodes = def.nodes.map((n) => {
-        const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
+        const { inputs: inputSource, outputs: outputSource } = nodeHandlesCache[n.nodeId];
         const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
         const customSize = sizes?.[n.nodeId];
         const sizeOverrides = customSize
@@ -2625,14 +2628,12 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             : overrideSize;
         const extraInputs = Array.from(missingInputsByNode[n.nodeId] || []);
         const extraOutputs = Array.from(missingOutputsByNode[n.nodeId] || []);
-        const geom = computeLayout(n, sizeOverrides);
-        const finalDims = calculateDimensionsWithMissingHandles(geom, extraInputs, extraOutputs);
-        const renderWidth = customSize?.width ?? finalDims.width;
-        const renderHeight = customSize?.height ?? finalDims.height;
-        const initialGeom = customSize ? computeLayout(n, overrideSize) : geom;
-        const initialDims = customSize
-            ? calculateDimensionsWithMissingHandles(initialGeom, extraInputs, extraOutputs)
-            : finalDims;
+        const geom = computeLayout(n, sizeOverrides, extraInputs, extraOutputs);
+        const renderWidth = customSize?.width ?? geom.width;
+        const renderHeight = customSize?.height ?? geom.height;
+        const initialGeom = customSize
+            ? computeLayout(n, overrideSize, extraInputs, extraOutputs)
+            : geom;
         const inputHandles = geom.inputOrder.map((id) => ({
             id,
             typeId: sparkGraph.getInputTypeId(inputSource, id),
@@ -2641,14 +2642,8 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             id,
             typeId: formatDeclaredTypeSignature(outputSource[id]),
         }));
-        nodeHandleMap[n.nodeId] = {
-            inputs: new Set(inputHandles.map((h) => h.id)),
-            outputs: new Set(outputHandles.map((h) => h.id)),
-        };
-        const missingHandleLayouts = createMissingHandleLayouts(extraInputs, extraOutputs, finalDims.baseLeftCount, finalDims.baseRightCount);
-        const handleLayout = [...geom.handleLayout, ...missingHandleLayouts];
-        const missingHandleBounds = createMissingHandleBounds(extraInputs, extraOutputs, finalDims.baseLeftCount, finalDims.baseRightCount, renderWidth);
-        const handles = [...geom.handles, ...missingHandleBounds];
+        const handleLayout = geom.handleLayout;
+        const handles = geom.handles;
         return {
             id: n.nodeId,
             data: {
@@ -2664,8 +2659,8 @@ function toReactFlow(def, positions, sizes, registry, opts) {
                 showValues: opts.showValues,
                 renderWidth,
                 renderHeight,
-                initialWidth: initialDims.width,
-                initialHeight: initialDims.height,
+                initialWidth: initialGeom.width,
+                initialHeight: initialGeom.height,
                 inputValues: opts.inputs?.[n.nodeId],
                 inputDefaults: opts.inputDefaults?.[n.nodeId],
                 outputValues: opts.outputs?.[n.nodeId],