@bian-womp/spark-workbench 0.3.42 → 0.3.44

package/lib/cjs/index.cjs

@@ -5846,6 +5846,13 @@ function useKeyboardShortcutToast() {
 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();
     React.useEffect(() => {
         if (!overlayRef.current)
             return;
@@ -5865,56 +5872,190 @@ const SelectionBoundOverlay = ({ selection, rfInstance, viewportTick }) => {
             window.removeEventListener("scroll", scrollHandler, true);
         };
     }, [viewportTick]);
-    const selectionBounds = React.useMemo(() => {
+    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();
+            return;
+        }
+        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) {
-            return null;
+            setBounds(null);
+            return;
         }
-        let bounds = 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 (!bounds) {
-                bounds = {
-                    left: relativeLeft,
-                    top: relativeTop,
-                    right: relativeRight,
-                    bottom: relativeBottom,
-                };
+        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);
+                }
             }
-            else {
-                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);
+            setBounds(calculatedBounds);
+            // Continue the animation loop
+            if (isActive) {
+                animationFrameId = requestAnimationFrame(updateBounds);
             }
-        }
-        return bounds;
+        };
+        // Start the animation loop
+        animationFrameId = requestAnimationFrame(updateBounds);
+        return () => {
+            isActive = false;
+            if (animationFrameId !== null) {
+                cancelAnimationFrame(animationFrameId);
+            }
+        };
     }, [selection.nodes, rfInstance, viewportTick, parentRect]);
-    if (!selectionBounds || selection.nodes.length < 2) {
+    if (!bounds || selection.nodes.length < 2) {
         return jsxRuntime.jsx("div", { ref: overlayRef, style: { display: "none" } });
     }
-    const { left, top, right, bottom } = selectionBounds;
+    const { left, top, right, bottom } = bounds;
     const width = right - left;
     const height = bottom - top;
-    return (jsxRuntime.jsx("div", { ref: overlayRef, style: {
+    return (jsxRuntime.jsx("div", { ref: overlayRef, onMouseDown: handleMouseDown, style: {
             position: "absolute",
             left: `${left}px`,
             top: `${top}px`,
             width: `${width}px`,
             height: `${height}px`,
-            border: "1px dashed #0ea5e9",
-            pointerEvents: "none",
+            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",
         } }));
 };