@bian-womp/spark-workbench 0.3.62 → 0.3.64

package/lib/cjs/index.cjs

@@ -416,8 +416,9 @@ class InMemoryWorkbench extends AbstractWorkbench {
     setViewport(viewport) {
         if (lod.isEqual(this.viewport, viewport))
             return;
+        const init = this.viewport === null;
         this.viewport = { ...viewport };
-        this.emit("graphUiChanged", { change: { type: "viewport" } });
+        this.emit("graphUiChanged", { change: { type: "viewport" }, init });
     }
     getViewport() {
         return this.viewport ? { ...this.viewport } : null;
@@ -1687,7 +1688,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.clientPromise = promise = (async () => {
             // Build client config from backend config
             const clientConfig = this.buildClientConfig(backend);
-            // Wrap custom event handler to intercept flow-viewport events and emit viewport event
+            // Wrap custom event handler to intercept viewport events and emit viewport event
             const wrappedOnCustomEvent = (event) => {
                 const msg = event?.message;
                 if (msg &&
@@ -5890,220 +5891,22 @@ function useKeyboardShortcutToast() {
     return { toast, showToast, hideToast };
 }
 
-const SelectionBoundOverlay = ({ selection, rfInstance, viewportTick }) => {
-    const overlayRef = React.useRef(null);
-    const [parentRect, setParentRect] = React.useState(null);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [bounds, setBounds] = React.useState(null);
-    const dragStateRef = React.useRef(null);
-    const moveListenerRef = React.useRef(null);
-    const upListenerRef = React.useRef(null);
-    React.useRef(null);
-    const { wb } = useWorkbenchContext();
+const selectionActiveSelector = (state) => state.nodesSelectionActive;
+const selectionDragActiveSelector = (state) => state.userSelectionActive;
+const SelectionActiveSync = ({ selection }) => {
+    const store = react.useStoreApi();
+    const currentActive = react.useStore(selectionActiveSelector);
+    const draggingSelection = react.useStore(selectionDragActiveSelector);
+    const active = selection.nodes.length > 1;
     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 cleanupDragListeners = React.useCallback(() => {
-        if (moveListenerRef.current) {
-            window.removeEventListener("mousemove", moveListenerRef.current);
-            moveListenerRef.current = null;
-        }
-        if (upListenerRef.current) {
-            window.removeEventListener("mouseup", upListenerRef.current);
-            upListenerRef.current = null;
-        }
-        dragStateRef.current = null;
-        setIsDragging(false);
-    }, []);
-    React.useEffect(() => cleanupDragListeners, [cleanupDragListeners]);
-    const handleMouseMove = React.useCallback((e) => {
-        if (!rfInstance || !wb || !parentRect)
-            return;
-        const dragState = dragStateRef.current;
-        if (!dragState)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const current = rfInstance.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-        });
-        const dx = current.x - dragState.startFlow.x;
-        const dy = current.y - dragState.startFlow.y;
-        // Update nodes directly via React Flow for immediate visual feedback
-        const nodes = rfInstance.getNodes();
-        const updatedNodes = nodes.map((node) => {
-            if (dragState.initialPositions[node.id]) {
-                const initialPos = dragState.initialPositions[node.id];
-                return {
-                    ...node,
-                    position: {
-                        x: initialPos.x + dx,
-                        y: initialPos.y + dy,
-                    },
-                };
-            }
-            return node;
-        });
-        rfInstance.setNodes(updatedNodes);
-        // Also update workbench state
-        const nextPositions = {};
-        for (const [nodeId, pos] of Object.entries(dragState.initialPositions)) {
-            nextPositions[nodeId] = { x: pos.x + dx, y: pos.y + dy };
-        }
-        if (Object.keys(nextPositions).length) {
-            wb.setPositions(nextPositions, { commit: false });
-        }
-    }, [rfInstance, wb, parentRect]);
-    const handleMouseUp = React.useCallback((e) => {
-        if (!rfInstance || !wb) {
-            cleanupDragListeners();
+        if (draggingSelection)
             return;
+        if (currentActive !== active) {
+            console.log("[SelectionActiveSync] setting active selection to", active);
+            store.setState({ nodesSelectionActive: active });
         }
-        const dragState = dragStateRef.current;
-        if (!dragState) {
-            cleanupDragListeners();
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const current = rfInstance.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-        });
-        const dx = current.x - dragState.startFlow.x;
-        const dy = current.y - dragState.startFlow.y;
-        const nextPositions = {};
-        for (const [nodeId, pos] of Object.entries(dragState.initialPositions)) {
-            nextPositions[nodeId] = { x: pos.x + dx, y: pos.y + dy };
-        }
-        if (Object.keys(nextPositions).length) {
-            wb.setPositions(nextPositions, { commit: true });
-        }
-        cleanupDragListeners();
-    }, [cleanupDragListeners, rfInstance, wb]);
-    const handleMouseDown = React.useCallback((e) => {
-        if (e.button !== 0)
-            return;
-        if (!rfInstance || !wb)
-            return;
-        if (selection.nodes.length < 2)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const startFlow = rfInstance.screenToFlowPosition({
-            x: e.clientX,
-            y: e.clientY,
-        });
-        const positions = wb.getPositions();
-        const initialPositions = {};
-        for (const nodeId of selection.nodes) {
-            const pos = positions[nodeId];
-            if (pos) {
-                initialPositions[nodeId] = pos;
-            }
-        }
-        if (!Object.keys(initialPositions).length)
-            return;
-        dragStateRef.current = { startFlow, initialPositions };
-        setIsDragging(true);
-        moveListenerRef.current = handleMouseMove;
-        upListenerRef.current = handleMouseUp;
-        window.addEventListener("mousemove", handleMouseMove, { passive: false });
-        window.addEventListener("mouseup", handleMouseUp, { passive: false });
-    }, [handleMouseMove, handleMouseUp, rfInstance, selection.nodes, wb]);
-    // Continuous bounds update loop
-    React.useEffect(() => {
-        if (typeof document === "undefined" ||
-            !rfInstance ||
-            !parentRect ||
-            selection.nodes.length < 2) {
-            setBounds(null);
-            return;
-        }
-        let animationFrameId = null;
-        let isActive = true;
-        const updateBounds = () => {
-            if (!isActive)
-                return;
-            let calculatedBounds = null;
-            for (const nodeId of selection.nodes) {
-                const el = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`);
-                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 (!calculatedBounds) {
-                    calculatedBounds = {
-                        left: relativeLeft,
-                        top: relativeTop,
-                        right: relativeRight,
-                        bottom: relativeBottom,
-                    };
-                }
-                else {
-                    calculatedBounds.left = Math.min(calculatedBounds.left, relativeLeft);
-                    calculatedBounds.top = Math.min(calculatedBounds.top, relativeTop);
-                    calculatedBounds.right = Math.max(calculatedBounds.right, relativeRight);
-                    calculatedBounds.bottom = Math.max(calculatedBounds.bottom, relativeBottom);
-                }
-            }
-            setBounds(calculatedBounds);
-            // Continue the animation loop
-            if (isActive) {
-                animationFrameId = requestAnimationFrame(updateBounds);
-            }
-        };
-        // Start the animation loop
-        animationFrameId = requestAnimationFrame(updateBounds);
-        return () => {
-            isActive = false;
-            if (animationFrameId !== null) {
-                cancelAnimationFrame(animationFrameId);
-            }
-        };
-    }, [selection.nodes, rfInstance, viewportTick, parentRect]);
-    if (!bounds || selection.nodes.length < 2) {
-        return jsxRuntime.jsx("div", { ref: overlayRef, style: { display: "none" } });
-    }
-    const { left, top, right, bottom } = bounds;
-    const width = right - left;
-    const height = bottom - top;
-    return (jsxRuntime.jsx("div", { ref: overlayRef, onMouseDown: handleMouseDown, style: {
-            position: "absolute",
-            left: `${left}px`,
-            top: `${top}px`,
-            width: `${width}px`,
-            height: `${height}px`,
-            border: isDragging ? "2px solid #0ea5e9" : "1px dashed #0ea5e9",
-            backgroundColor: isDragging
-                ? "rgba(14, 165, 233, 0.05)"
-                : "transparent",
-            pointerEvents: "auto",
-            cursor: isDragging ? "grabbing" : "move",
-            zIndex: 4,
-            boxSizing: "border-box",
-            transition: isDragging ? "none" : "border 0.1s ease",
-        } }));
+    }, [active, currentActive, draggingSelection, store]);
+    return null;
 };
 
 const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
@@ -6746,10 +6549,6 @@ 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();
@@ -6781,11 +6580,11 @@ const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
                             if (userOnInit) {
                                 userOnInit(inst);
                             }
-                        }, 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: [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, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [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, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
                                 nodeContextMenuHandlers &&
                                 (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, keyboardShortcuts: 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, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: selection, rfInstance: rfInstanceRef.current, viewportTick: selectionOverlayTick })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionActiveSync, { selection: selection })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 const WorkbenchCanvas = WorkbenchCanvasComponent;