@bian-womp/spark-workbench 0.2.18 → 0.2.20

package/lib/cjs/index.cjs

@@ -1183,6 +1183,83 @@ function summarizeDeep(value) {
 const NODE_HEADER_HEIGHT_PX = 24;
 const NODE_ROW_HEIGHT_PX = 22;
 
+function computeEffectiveHandles(node, registry) {
+    const desc = registry.nodes.get(node.typeId);
+    const resolved = node.resolvedHandles || {};
+    const inputs = { ...desc?.inputs, ...resolved.inputs };
+    const outputs = { ...desc?.outputs, ...resolved.outputs };
+    const inputDefaults = { ...desc?.inputDefaults, ...resolved.inputDefaults };
+    return { inputs, outputs, inputDefaults };
+}
+function countVisibleHandles(handles) {
+    const inputIds = Object.keys(handles.inputs).filter((k) => !sparkGraph.isInputPrivate(handles.inputs, k));
+    const outputIds = Object.keys(handles.outputs);
+    return { inputsCount: inputIds.length, outputsCount: outputIds.length };
+}
+function estimateNodeSize(args) {
+    const { node, registry, showValues, overrides } = args;
+    const { inputs, outputs } = computeEffectiveHandles(node, registry);
+    // Count only non-private inputs for rows on left
+    const { inputsCount, outputsCount } = countVisibleHandles({
+        inputs,
+        outputs,
+    });
+    const rows = Math.max(inputsCount, outputsCount);
+    const baseWidth = showValues ? 320 : 240;
+    const width = overrides?.width ?? baseWidth;
+    const height = overrides?.height ?? NODE_HEADER_HEIGHT_PX + rows * NODE_ROW_HEIGHT_PX;
+    return { width, height, inputsCount, outputsCount, rowCount: rows };
+}
+function layoutNode(args) {
+    const { node, registry, showValues, overrides } = args;
+    const { inputs, outputs } = computeEffectiveHandles(node, registry);
+    const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
+    const outputOrder = Object.keys(outputs);
+    const { width, height } = estimateNodeSize({
+        node,
+        registry,
+        showValues,
+        overrides,
+    });
+    const HEADER = NODE_HEADER_HEIGHT_PX;
+    const ROW = NODE_ROW_HEIGHT_PX;
+    const handles = [
+        ...inputOrder.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            x: 0,
+            y: HEADER + i * ROW,
+            width: 1,
+            height: ROW + 2,
+        })),
+        ...outputOrder.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            x: width - 1,
+            y: HEADER + i * ROW,
+            width: 1,
+            height: ROW + 2,
+        })),
+    ];
+    const handleLayout = [
+        ...inputOrder.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            y: HEADER + i * ROW + ROW / 2,
+        })),
+        ...outputOrder.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            y: HEADER + i * ROW + ROW / 2,
+        })),
+    ];
+    return { width, height, inputOrder, outputOrder, handles, handleLayout };
+}
+
 function toReactFlow(def, positions, registry, opts) {
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
@@ -1197,54 +1274,31 @@ function toReactFlow(def, positions, registry, opts) {
         connectedInputs[nid].add(hid);
     }
     const nodes = def.nodes.map((n) => {
-        const desc = registry.nodes.get(n.typeId);
-        // Prefer per-node resolved handles when present
-        const resolvedInputs = n.resolvedHandles?.inputs;
-        const resolvedOutputs = n.resolvedHandles?.outputs;
-        const inputSource = resolvedInputs ?? desc?.inputs ?? {};
-        const outputSource = resolvedOutputs ?? desc?.outputs ?? {};
-        const inputHandles = Object.entries(inputSource)
-            .filter(([id]) => !sparkGraph.isInputPrivate(inputSource, id))
-            .map(([id]) => ({ id, typeId: sparkGraph.getInputTypeId(inputSource, id) }));
-        const outputHandles = Object.entries(outputSource).map(([id, typeId]) => ({
+        const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
+        const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
+        const geom = layoutNode({
+            node: n,
+            registry,
+            showValues: opts.showValues,
+            overrides: overrideSize,
+        });
+        const inputHandles = geom.inputOrder.map((id) => ({
+            id,
+            typeId: sparkGraph.getInputTypeId(inputSource, id),
+        }));
+        const outputHandles = geom.outputOrder.map((id) => ({
             id,
-            typeId: formatDeclaredTypeSignature(typeId),
+            typeId: formatDeclaredTypeSignature(outputSource[id]),
         }));
         nodeHandleMap[n.nodeId] = {
             inputs: new Set(inputHandles.map((h) => h.id)),
             outputs: new Set(outputHandles.map((h) => h.id)),
         };
-        // Match DefaultNode sizing heuristics to avoid hidden nodes during re-measure
-        const HEADER_SIZE = NODE_HEADER_HEIGHT_PX;
-        const ROW_SIZE = NODE_ROW_HEIGHT_PX;
-        const maxRows = Math.max(inputHandles.length, outputHandles.length);
-        // Allow external override to dictate initial size
-        const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
-        const initialWidth = overrideSize?.width ?? (opts.showValues ? 320 : 240);
-        const initialHeight = overrideSize?.height ?? HEADER_SIZE + maxRows * ROW_SIZE;
+        // Shared sizing
+        const initialWidth = geom.width;
+        const initialHeight = geom.height;
         // Precompute handle bounds so edges can render immediately without waiting for measurement
-        const handles = [
-            // Inputs on the left as targets
-            ...inputHandles.map((h, i) => ({
-                id: h.id,
-                type: "target",
-                position: react.Position.Left,
-                x: 0,
-                y: HEADER_SIZE + i * ROW_SIZE,
-                width: 1,
-                height: ROW_SIZE + 2,
-            })),
-            // Outputs on the right as sources
-            ...outputHandles.map((h, i) => ({
-                id: h.id,
-                type: "source",
-                position: react.Position.Right,
-                x: initialWidth - 1,
-                y: HEADER_SIZE + i * ROW_SIZE,
-                width: 1,
-                height: ROW_SIZE + 2,
-            })),
-        ];
+        const handles = geom.handles;
         return {
             id: n.nodeId,
             data: {
@@ -1256,20 +1310,7 @@ function toReactFlow(def, positions, registry, opts) {
                     h.id,
                     !!connectedInputs[n.nodeId]?.has(h.id),
                 ])),
-                handleLayout: [
-                    ...inputHandles.map((h, i) => ({
-                        id: h.id,
-                        type: "target",
-                        position: react.Position.Left,
-                        y: HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2,
-                    })),
-                    ...outputHandles.map((h, i) => ({
-                        id: h.id,
-                        type: "source",
-                        position: react.Position.Right,
-                        y: HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2,
-                    })),
-                ],
+                handleLayout: geom.handleLayout,
                 showValues: opts.showValues,
                 renderWidth: initialWidth,
                 renderHeight: initialHeight,
@@ -1468,6 +1509,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     // Auto layout (simple layered layout)
     const runAutoLayout = React.useCallback(() => {
         const cur = wb.export();
+        // Build DAG layers by indegree
         const indegree = {};
         const adj = {};
         for (const n of cur.nodes) {
@@ -1494,14 +1536,36 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             layers.push(layer);
             q.splice(0, q.length, ...next);
         }
-        const X = 720;
-        const Y = 600;
+        // Size-aware placement: columns by layer, stacking nodes vertically in each column
+        // Use the same sizing heuristic as mapping via estimateNodeSize
+        const H_GAP = 160;
+        const V_GAP = 24;
         const pos = {};
-        layers.forEach((layer, layerIndex) => {
-            layer.forEach((id, itemIndex) => {
-                pos[id] = { x: layerIndex * X, y: itemIndex * Y };
-            });
-        });
+        let curX = 0;
+        for (const layer of layers) {
+            // Compute max width in this layer and individual heights
+            let maxWidth = 0;
+            const heights = {};
+            for (const id of layer) {
+                const node = cur.nodes.find((n) => n.nodeId === id);
+                if (!node)
+                    continue;
+                // Prefer showValues sizing similar to node rendering
+                // Lazy import to avoid circular deps at module top
+                const size = estimateNodeSize({ node, registry, showValues: true });
+                heights[id] = size.height;
+                if (size.width > maxWidth)
+                    maxWidth = size.width;
+            }
+            // Place nodes in this column
+            let curY = 0;
+            for (const id of layer) {
+                const h = heights[id] ?? 0;
+                pos[id] = { x: curX, y: curY };
+                curY += h + V_GAP;
+            }
+            curX += maxWidth + H_GAP;
+        }
         wb.setPositions(pos);
     }, [wb]);
     const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
@@ -1597,15 +1661,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             return add("runner", "error")(e);
         });
         const off3 = runner.on("invalidate", (e) => {
-            if (e?.reason === "graph-updated") {
-                setNodeStatus((s) => {
-                    const next = {};
-                    for (const n of wb.export().nodes) {
-                        next[n.nodeId] = { ...s[n.nodeId], invalidated: true };
-                    }
-                    return next;
-                });
-            }
             // After build/update, pull resolved handles and merge in-place (no graphChanged)
             if (e?.reason === "graph-updated" || e?.reason === "graph-built") {
                 refreshResolvedHandles();