@bian-womp/spark-workbench 0.3.20 → 0.3.22

package/lib/cjs/index.cjs

@@ -1215,7 +1215,7 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.engine.on("error", (e) => this.emit("error", e));
         this.engine.on("invalidate", (e) => this.emit("invalidate", e));
         this.engine.on("stats", (e) => this.emit("stats", e));
-        this.engine.launch(opts?.invalidate);
+        this.engine.launch(opts?.invalidate, opts?.runMode, opts?.startPaused);
         const runMode = opts?.runMode ?? "manual";
         this.emit("status", { running: true, runMode });
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
@@ -1363,6 +1363,26 @@ class LocalGraphRunner extends AbstractGraphRunner {
             await this.setExtData(payload.extData);
         }
     }
+    async convertSnapshot(converterConfig, options) {
+        const snapshot = await this.snapshotFull();
+        const converter = sparkGraph.buildValueConverter(converterConfig);
+        const converted = sparkGraph.convertSnapshot(snapshot, converter);
+        await this.applySnapshotFull(converted, {
+            skipBuild: true,
+            dry: options?.dry,
+        });
+        return converted;
+    }
+    async pause() {
+        if (!this.runtime)
+            return;
+        this.runtime.pause();
+    }
+    async resume() {
+        if (!this.runtime)
+            return;
+        this.runtime.resume();
+    }
     hydrate(snapshot, opts) {
         // Hydrate via runtime for exact restore (this emits events on runtime emitter)
         this.runtime?.hydrate({
@@ -1961,6 +1981,23 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             skipBuild: options?.skipBuild,
         });
     }
+    async convertSnapshot(converterConfig, options) {
+        const client = await this.ensureClient();
+        const converted = await client.api.convertSnapshot(converterConfig, {
+            dry: options?.dry,
+        });
+        // Hydrate local cache with converted values
+        this.hydrateValueCache(converted, { dry: options?.dry });
+        return converted;
+    }
+    async pause() {
+        const client = await this.ensureClient();
+        await client.api.pause();
+    }
+    async resume() {
+        const client = await this.ensureClient();
+        await client.api.resume();
+    }
     /**
      * Hydrates the local valueCache from a snapshot and emits value events.
      * This ensures the UI can display inputs/outputs immediately without waiting
@@ -5758,10 +5795,32 @@ function useKeyboardShortcutToast() {
     return { toast, showToast, hideToast };
 }
 
-const SelectionBoundOverlay = ({ selection, rfInstance }) => {
+const SelectionBoundOverlay = ({ selection, rfInstance, viewportTick }) => {
+    const overlayRef = React.useRef(null);
+    const [parentRect, setParentRect] = React.useState(null);
+    React.useEffect(() => {
+        if (!overlayRef.current)
+            return;
+        const parent = overlayRef.current.parentElement;
+        if (!parent)
+            return;
+        const updateRect = () => {
+            setParentRect(parent.getBoundingClientRect());
+        };
+        updateRect();
+        const resizeObserver = new ResizeObserver(updateRect);
+        resizeObserver.observe(parent);
+        const scrollHandler = () => updateRect();
+        window.addEventListener("scroll", scrollHandler, true);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener("scroll", scrollHandler, true);
+        };
+    }, [viewportTick]);
     const selectionBounds = React.useMemo(() => {
         if (typeof document === "undefined" ||
             !rfInstance ||
+            !parentRect ||
             selection.nodes.length < 2) {
             return null;
         }
@@ -5771,31 +5830,35 @@ const SelectionBoundOverlay = ({ selection, rfInstance }) => {
             if (!el)
                 continue;
             const rect = el.getBoundingClientRect();
+            const relativeLeft = rect.left - parentRect.left;
+            const relativeTop = rect.top - parentRect.top;
+            const relativeRight = rect.right - parentRect.left;
+            const relativeBottom = rect.bottom - parentRect.top;
             if (!bounds) {
                 bounds = {
-                    left: rect.left,
-                    top: rect.top,
-                    right: rect.right,
-                    bottom: rect.bottom,
+                    left: relativeLeft,
+                    top: relativeTop,
+                    right: relativeRight,
+                    bottom: relativeBottom,
                 };
             }
             else {
-                bounds.left = Math.min(bounds.left, rect.left);
-                bounds.top = Math.min(bounds.top, rect.top);
-                bounds.right = Math.max(bounds.right, rect.right);
-                bounds.bottom = Math.max(bounds.bottom, rect.bottom);
+                bounds.left = Math.min(bounds.left, relativeLeft);
+                bounds.top = Math.min(bounds.top, relativeTop);
+                bounds.right = Math.max(bounds.right, relativeRight);
+                bounds.bottom = Math.max(bounds.bottom, relativeBottom);
             }
         }
         return bounds;
-    }, [selection.nodes, rfInstance]);
+    }, [selection.nodes, rfInstance, viewportTick, parentRect]);
     if (!selectionBounds || selection.nodes.length < 2) {
-        return null;
+        return jsxRuntime.jsx("div", { ref: overlayRef, style: { display: "none" } });
     }
     const { left, top, right, bottom } = selectionBounds;
     const width = right - left;
     const height = bottom - top;
-    return (jsxRuntime.jsx("div", { style: {
-            position: "fixed",
+    return (jsxRuntime.jsx("div", { ref: overlayRef, style: {
+            position: "absolute",
             left: `${left}px`,
             top: `${top}px`,
             width: `${width}px`,
@@ -6432,6 +6495,10 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
             connectionLineRenderer: ui.getConnectionLineRenderer(),
         };
     }, [ui, uiVersion]);
+    const [selectionOverlayTick, setSelectionOverlayTick] = React.useState(0);
+    const onMove = React.useCallback(() => {
+        setSelectionOverlayTick((t) => t + 1);
+    }, []);
     const onMoveEnd = React.useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
@@ -6454,7 +6521,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
         return () => off();
     }, [wb]);
     const { onInit: userOnInit, ...restReactFlowProps } = reactFlowProps || {};
-    return (jsxRuntime.jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsxRuntime.jsxs(react.ReactFlowProvider, { children: [jsxRuntime.jsxs(react.ReactFlow, { ...restReactFlowProps, nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+    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: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
                             rfInstanceRef.current = inst;
                             const savedViewport = wb.getViewport();
                             if (savedViewport) {
@@ -6463,7 +6530,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                             if (userOnInit) {
                                 userOnInit(inst);
                             }
-                        }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), menuState?.type === "default" &&
+                        }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMove: onMove, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), menuState?.type === "default" &&
                                 (DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
                                         ? { enableKeyboardShortcuts, keyboardShortcuts }
                                         : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
@@ -6471,7 +6538,7 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                                 (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
                                         ? { enableKeyboardShortcuts, keyboardShortcuts }
                                         : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
-                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: selection, rfInstance: rfInstanceRef.current })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: selection, rfInstance: rfInstanceRef.current, viewportTick: selectionOverlayTick })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 const WorkbenchCanvas = WorkbenchCanvasComponent;