@bian-womp/spark-workbench 0.2.3 → 0.2.5

package/lib/cjs/index.cjs

@@ -350,6 +350,9 @@ class AbstractGraphRunner {
             this.emit("value", { nodeId, handle, value, io: "input" });
         }
     }
+    triggerExternal(nodeId, event) {
+        this.engine?.triggerExternal(nodeId, event);
+    }
     // Batch update multiple inputs on a node and trigger a single run
     setInputs(nodeId, inputs) {
         if (!inputs)
@@ -667,6 +670,14 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     flush() {
         console.warn("Unsupported operation for remote runner");
     }
+    triggerExternal(nodeId, event) {
+        this.ensureRemoteRunner().then(async (runner) => {
+            try {
+                await runner.getEngine().triggerExternal(nodeId, event);
+            }
+            catch { }
+        });
+    }
     getOutputs(def) {
         const out = {};
         const cache = this.valueCache;
@@ -1111,8 +1122,10 @@ function toReactFlow(def, positions, registry, opts) {
         const HEADER_SIZE = NODE_HEADER_HEIGHT_PX;
         const ROW_SIZE = NODE_ROW_HEIGHT_PX;
         const maxRows = Math.max(inputHandles.length, outputHandles.length);
-        const initialWidth = opts.showValues ? 320 : 240;
-        const initialHeight = HEADER_SIZE + maxRows * ROW_SIZE;
+        // 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;
         // Precompute handle bounds so edges can render immediately without waiting for measurement
         const handles = [
             // Inputs on the left as targets
@@ -1381,8 +1394,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             layers.push(layer);
             q.splice(0, q.length, ...next);
         }
-        const X = 960;
-        const Y = 480;
+        const X = 720;
+        const Y = 600;
         const pos = {};
         layers.forEach((layer, layerIndex) => {
             layer.forEach((id, itemIndex) => {
@@ -1392,6 +1405,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         wb.setPositions(pos);
     }, [wb]);
     const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
+    const triggerExternal = React.useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
     // Subscribe to runner/workbench events
     React.useEffect(() => {
         const add = (source, type) => (payload) => setEvents((prev) => {
@@ -1726,6 +1740,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         flush,
         runAutoLayout,
         updateEdgeType,
+        triggerExternal,
     }), [
         wb,
         runner,
@@ -1753,6 +1768,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         flush,
         runAutoLayout,
         wb,
+        runner,
     ]);
     return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
 }
@@ -2123,10 +2139,10 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
         onClose();
     };
     const renderTree = (tree, path = []) => {
-        const entries = Object.entries(tree.__children).sort((a, b) => a[0].localeCompare(b[0]));
+        const entries = Object.entries(tree?.__children ?? {}).sort((a, b) => a[0].localeCompare(b[0]));
         return (jsxRuntime.jsx("div", { children: entries.map(([key, child]) => {
                 const label = key;
-                const hasChildren = Object.keys(child.__children).length > 0;
+                const hasChildren = !!child?.__children && Object.keys(child.__children).length > 0;
                 const idKey = [...path, key].join(".");
                 if (!hasChildren) {
                     // Leaf: render only the action button, no group header
@@ -2213,7 +2229,7 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
         }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
 }
 
-const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, ref) => {
+const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
     const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
@@ -2316,6 +2332,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             edgeValidation,
             selectedNodeIds: new Set(sel.nodes),
             selectedEdgeIds: new Set(sel.edges),
+            getDefaultNodeSize,
         });
         // Retain references for unchanged items
         const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
@@ -2442,7 +2459,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
     const addNodeAt = (typeId, pos) => {
         wb.addNode({ typeId, position: pos });
     };
-    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, onlyRenderVisibleElements: true, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, onInit: (inst) => (rfInstanceRef.current = inst), children: [jsxRuntime.jsx(react.Background, {}), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }));
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, onlyRenderVisibleElements: true, selectionOnDrag: true, onInit: (inst) => (rfInstanceRef.current = inst), onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -2896,7 +2913,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());