@bian-womp/spark-workbench 0.2.55 → 0.2.57

package/lib/esm/index.js

@@ -30,13 +30,6 @@ class DefaultUIExtensionRegistry {
         }
         return result;
     }
-    registerIconProvider(provider) {
-        this.iconProvider = provider;
-        return this;
-    }
-    getIconProvider() {
-        return this.iconProvider;
-    }
     // React Flow renderers
     registerConnectionLineRenderer(renderer) {
         this.connectionLineRenderer = renderer;
@@ -80,6 +73,35 @@ class DefaultUIExtensionRegistry {
     getNodeContextMenuRenderer() {
         return this.nodeContextMenuRenderer;
     }
+    // Layout function overrides
+    registerEstimateNodeSize(override) {
+        this.estimateNodeSizeOverride = override;
+        return this;
+    }
+    getEstimateNodeSize() {
+        return this.estimateNodeSizeOverride;
+    }
+    registerCreateHandleBounds(override) {
+        this.createHandleBoundsOverride = override;
+        return this;
+    }
+    getCreateHandleBounds() {
+        return this.createHandleBoundsOverride;
+    }
+    registerCreateHandleLayout(override) {
+        this.createHandleLayoutOverride = override;
+        return this;
+    }
+    getCreateHandleLayout() {
+        return this.createHandleLayoutOverride;
+    }
+    registerLayoutNode(override) {
+        this.layoutNodeOverride = override;
+        return this;
+    }
+    getLayoutNode() {
+        return this.layoutNodeOverride;
+    }
 }
 
 class AbstractWorkbench {
@@ -1412,7 +1434,8 @@ function summarizeDeep(value) {
 
 // Shared UI constants for node layout to keep mapping and rendering in sync
 const NODE_HEADER_HEIGHT_PX = 24;
-const NODE_ROW_HEIGHT_PX = 22;
+const NODE_ROW_HEIGHT_PX = 18;
+const HANDLE_SIZE_PX = 12;
 
 function computeEffectiveHandles(node, registry) {
     const desc = registry.nodes.get(node.typeId);
@@ -1439,53 +1462,105 @@ function estimateNodeSize(args) {
     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 };
+    return { width, height };
 }
-function layoutNode(args) {
-    const { node, registry, showValues, overrides } = args;
+/**
+ * Calculate the Y position for handle layout (center of row).
+ * Used for positioning handles in React Flow.
+ */
+function getHandleLayoutY(rowIndex) {
+    return (NODE_HEADER_HEIGHT_PX +
+        rowIndex * NODE_ROW_HEIGHT_PX +
+        NODE_ROW_HEIGHT_PX / 2);
+}
+/**
+ * Calculate the Y position for handle bounds (top + centering offset).
+ * Used for hit-testing and edge routing.
+ */
+function getHandleBoundsY(rowIndex) {
+    return (NODE_HEADER_HEIGHT_PX +
+        rowIndex * NODE_ROW_HEIGHT_PX +
+        (NODE_ROW_HEIGHT_PX - HANDLE_SIZE_PX) / 2 +
+        1);
+}
+/**
+ * Calculate the X position for handle bounds based on position and node width.
+ */
+function getHandleBoundsX(position, nodeWidth) {
+    if (position === Position.Left) {
+        return -HANDLE_SIZE_PX / 2 + 1;
+    }
+    else {
+        return nodeWidth - HANDLE_SIZE_PX / 2 - 1;
+    }
+}
+/**
+ * Create handle bounds object for hit-testing/edge routing.
+ */
+function createHandleBounds(args) {
+    return {
+        id: args.id,
+        type: args.type,
+        position: args.position,
+        x: getHandleBoundsX(args.position, args.nodeWidth),
+        y: getHandleBoundsY(args.rowIndex),
+        width: HANDLE_SIZE_PX,
+        height: HANDLE_SIZE_PX,
+    };
+}
+/**
+ * Create handle layout object for React Flow rendering.
+ */
+function createHandleLayout(args) {
+    return {
+        id: args.id,
+        type: args.type,
+        position: args.position,
+        y: getHandleLayoutY(args.rowIndex),
+    };
+}
+function layoutNode(args, overrides) {
+    const { node, registry, showValues, overrides: sizeOverrides } = args;
     const { inputs, outputs } = computeEffectiveHandles(node, registry);
     const inputOrder = Object.keys(inputs).filter((k) => !isInputPrivate(inputs, k));
     const outputOrder = Object.keys(outputs);
-    const { width, height } = estimateNodeSize({
+    const estimateNodeSizeFn = overrides?.estimateNodeSize ?? estimateNodeSize;
+    const createHandleBoundsFn = overrides?.createHandleBounds ?? createHandleBounds;
+    const createHandleLayoutFn = overrides?.createHandleLayout ?? createHandleLayout;
+    const { width, height } = estimateNodeSizeFn({
         node,
         registry,
         showValues,
-        overrides,
+        overrides: sizeOverrides,
     });
-    const HEADER = NODE_HEADER_HEIGHT_PX;
-    const ROW = NODE_ROW_HEIGHT_PX;
     const handles = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleBoundsFn({
             id,
             type: "target",
             position: Position.Left,
-            x: 0,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: i,
+            nodeWidth: width,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleBoundsFn({
             id,
             type: "source",
             position: Position.Right,
-            x: width - 1,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: i,
+            nodeWidth: width,
         })),
     ];
     const handleLayout = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleLayoutFn({
             id,
             type: "target",
             position: Position.Left,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleLayoutFn({
             id,
             type: "source",
             position: Position.Right,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
     ];
     return { width, height, inputOrder, outputOrder, handles, handleLayout };
@@ -1774,15 +1849,32 @@ function toReactFlow(def, positions, registry, opts) {
     // 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 nodes = def.nodes.map((n) => {
         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,
-        });
+        // If layoutNode is overridden, use it directly; otherwise use default with internal overrides
+        const geom = layoutNodeOverride
+            ? layoutNodeOverride({
+                node: n,
+                registry,
+                showValues: opts.showValues,
+                overrides: overrideSize,
+            })
+            : layoutNode({
+                node: n,
+                registry,
+                showValues: opts.showValues,
+                overrides: overrideSize,
+            }, {
+                estimateNodeSize: estimateNodeSizeFn,
+                createHandleBounds: createHandleBoundsFn,
+                createHandleLayout: createHandleLayoutFn,
+            });
         const inputHandles = geom.inputOrder.map((id) => ({
             id,
             typeId: getInputTypeId(inputSource, id),
@@ -1800,20 +1892,22 @@ function toReactFlow(def, positions, registry, opts) {
         const baseRightCount = geom.outputOrder.length;
         const extraInputs = Array.from(missingInputsByNode[n.nodeId] || []);
         const extraOutputs = Array.from(missingOutputsByNode[n.nodeId] || []);
-        const HEADER = NODE_HEADER_HEIGHT_PX;
-        const ROW = NODE_ROW_HEIGHT_PX;
         const extraHandleLayoutLeft = extraInputs.map((id, i) => ({
-            id,
-            type: "target",
-            position: Position.Left,
-            y: HEADER + (baseLeftCount + i) * ROW + ROW / 2,
+            ...createHandleLayoutFn({
+                id,
+                type: "target",
+                position: Position.Left,
+                rowIndex: baseLeftCount + i,
+            }),
             missing: true,
         }));
         const extraHandleLayoutRight = extraOutputs.map((id, i) => ({
-            id,
-            type: "source",
-            position: Position.Right,
-            y: HEADER + (baseRightCount + i) * ROW + ROW / 2,
+            ...createHandleLayoutFn({
+                id,
+                type: "source",
+                position: Position.Right,
+                rowIndex: baseRightCount + i,
+            }),
             missing: true,
         }));
         const handleLayout = [
@@ -1822,23 +1916,19 @@ function toReactFlow(def, positions, registry, opts) {
             ...extraHandleLayoutRight,
         ];
         // Precompute handle bounds (including missing) so edges can render immediately
-        const missingBoundsLeft = extraInputs.map((id, i) => ({
+        const missingBoundsLeft = extraInputs.map((id, i) => createHandleBoundsFn({
             id,
             type: "target",
             position: Position.Left,
-            x: 0,
-            y: HEADER + (baseLeftCount + i) * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: baseLeftCount + i,
+            nodeWidth: geom.width,
         }));
-        const missingBoundsRight = extraOutputs.map((id, i) => ({
+        const missingBoundsRight = extraOutputs.map((id, i) => createHandleBoundsFn({
             id,
             type: "source",
             position: Position.Right,
-            x: geom.width - 1,
-            y: HEADER + (baseRightCount + i) * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: baseRightCount + i,
+            nodeWidth: geom.width,
         }));
         const handles = [
             ...geom.handles,
@@ -1849,7 +1939,7 @@ function toReactFlow(def, positions, registry, opts) {
         const baseRows = Math.max(baseLeftCount, baseRightCount);
         const newRows = Math.max(baseLeftCount + extraInputs.length, baseRightCount + extraOutputs.length);
         const initialWidth = geom.width;
-        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * ROW;
+        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * NODE_ROW_HEIGHT_PX;
         return {
             id: n.nodeId,
             data: {
@@ -1985,7 +2075,7 @@ function getHandleClassName(args) {
     else {
         borderColor = "!border-gray-500 dark:!border-gray-400";
     }
-    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
+    return cx("!w-3 !h-3 !bg-white/50 !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
 }
 
 function generateTimestamp() {
@@ -3057,7 +3147,7 @@ function NodeHandleItem({ kind, id, type, position, y, isConnectable, className,
                     textOverflow: "ellipsis",
                 }, children: renderLabel({ kind, id }) }))] }));
 }
-function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray-600", outputClassName = "!w-2 !h-2 !bg-gray-600", getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
+function NodeHandles({ data, isConnectable, getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
     const layout = data.handleLayout ?? [];
     const byId = React.useMemo(() => {
         const m = new Map();
@@ -3088,28 +3178,26 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 const placed = byId.get(`target:${h.id}`) ?? byId.get(h.id);
                 const position = placed?.position ?? Position.Left;
                 const y = placed?.y;
-                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ??
-                    inputClassName;
+                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ?? "";
                 return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
             }), missingInputs.map((h) => {
                 const key = `missing-input:${h.id}`;
                 const position = h.position ?? Position.Left;
                 const y = h.y;
                 const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500";
-                return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
+                return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, key));
             }), (data.outputHandles ?? []).map((h) => {
                 const placed = byId.get(`source:${h.id}`) ?? byId.get(h.id);
                 const position = placed?.position ?? Position.Right;
                 const y = placed?.y;
-                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ??
-                    outputClassName;
-                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
+                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ?? "";
+                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
             }), missingOutputs.map((h) => {
                 const key = `missing-output:${h.id}`;
                 const position = h.position ?? Position.Right;
                 const y = h.y;
                 const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500 !rounded-none wb-nodrag wb-nowheel";
-                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
+                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, key));
             })] }));
 }
 
@@ -3138,7 +3226,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         status,
         validation,
     });
-    return (jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", containerBorder), style: {
+    return (jsxs("div", { className: cx("rounded-lg bg-white/50 !dark:bg-stone-900", containerBorder), style: {
             position: "relative",
             minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
             minHeight: typeof data.renderHeight === "number" ? data.renderHeight : undefined,
@@ -3517,6 +3605,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, runner, engineKind, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
+    const [registryVersion, setRegistryVersion] = useState(0);
     // Keep stable references for nodes/edges to avoid unnecessary updates
     const prevNodesRef = useRef([]);
     const prevEdgesRef = useRef([]);
@@ -3642,6 +3731,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             selectedNodeIds: new Set(sel.nodes),
             selectedEdgeIds: new Set(sel.edges),
             getDefaultNodeSize,
+            ui,
         });
         // Retain references for unchanged items
         const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
@@ -3787,7 +3877,13 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const onCloseNodeMenu = useCallback(() => {
         setNodeMenuOpen(false);
     }, []);
-    const nodeIds = useMemo(() => Array.from(registry.nodes.keys()), [registry]);
+    useEffect(() => {
+        const off = runner.on("registry", () => {
+            setRegistryVersion((v) => v + 1);
+        });
+        return () => off();
+    }, [runner]);
+    const nodeIds = useMemo(() => Array.from(registry.nodes.keys()), [registry, registryVersion]);
     const defaultContextMenuHandlers = useMemo(() => ({
         onAddNode: addNodeAt,
         onClose: onCloseMenu,
@@ -4390,5 +4486,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
     return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
-export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, download, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getHandleClassName, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, createHandleBounds, createHandleLayout, download, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map