Fix node resizing while zooming

.changeset/tidy-onions-talk.md

@@ -4,4 +4,4 @@
 '@xyflow/svelte': patch
 ---
 
-Fix node dragging while zooming on flow that does not cover whole browser window.
+Fix node dragging & resizing while zooming on flow that does not cover whole browser window.

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -56,13 +56,14 @@ function ResizeControl({
         domNode: resizeControlRef.current,
         nodeId: id,
         getStoreItems: () => {
-          const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
+          const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, domNode } = store.getState();
           return {
             nodeLookup,
             transform,
             snapGrid,
             snapToGrid,
             nodeOrigin,
+            paneDomNode: domNode,
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -35,7 +35,7 @@
   let className: $$Props['class'] = '';
   export { className as class };
 
-  const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin } = useStore();
+  const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin, domNode } = useStore();
 
   const contextNodeId = getContext<string>('svelteflow__node_id');
   $: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -65,7 +65,8 @@
             transform: [$viewport.x, $viewport.y, $viewport.zoom],
             snapGrid: $snapGrid ?? undefined,
             snapToGrid: !!$snapGrid,
-            nodeOrigin: $nodeOrigin
+            nodeOrigin: $nodeOrigin,
+            paneDomNode: $domNode
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {

packages/system/src/xyresizer/XYResizer.ts

@@ -45,6 +45,7 @@ type XYResizerParams = {
     snapGrid?: [number, number];
     snapToGrid: boolean;
     nodeOrigin: NodeOrigin;
+    paneDomNode: HTMLDivElement | null;
   };
   onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => void;
   onEnd?: () => void;
@@ -109,6 +110,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
     const controlDirection = getControlDirection(controlPosition);
 
     let node: InternalNodeBase | undefined = undefined;
+    let containerBounds: DOMRect | null = null;
     let childNodes: XYResizerChildChange[] = [];
     let parentNode: InternalNodeBase | undefined = undefined; // Needed to fix expandParent
     let parentExtent: CoordinateExtent | undefined = undefined;
@@ -116,14 +118,20 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
 
     const dragHandler = drag<HTMLDivElement, unknown>()
       .on('start', (event: ResizeDragEvent) => {
-        const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
+        const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
         node = nodeLookup.get(nodeId);
 
         if (!node) {
           return;
         }
 
-        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+        containerBounds = paneDomNode?.getBoundingClientRect() ?? null;
+        const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, {
+          transform,
+          snapGrid,
+          snapToGrid,
+          containerBounds,
+        });
 
         prevValues = {
           width: node.measured.width ?? 0,
@@ -178,7 +186,13 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X
       })
       .on('drag', (event: ResizeDragEvent) => {
         const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
-        const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+
+        const pointerPosition = getPointerPosition(event.sourceEvent, {
+          transform,
+          snapGrid,
+          snapToGrid,
+          containerBounds,
+        });
         const childChanges: XYResizerChildChange[] = [];
 
         if (!node) {