@bian-womp/spark-workbench 0.3.21 → 0.3.23

package/lib/cjs/index.cjs

@@ -5796,9 +5796,31 @@ function useKeyboardShortcutToast() {
 }
 
 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;
         }
@@ -5808,31 +5830,35 @@ const SelectionBoundOverlay = ({ selection, rfInstance, viewportTick }) => {
             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, viewportTick]);
+    }, [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`,
@@ -6495,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) {