Fix node dragging while zooming on a flow that does not occupy whole browser window.

packages/system/src/utils/dom.ts

@@ -5,14 +5,18 @@ export type GetPointerPositionParams = {
   transform: Transform;
   snapGrid?: SnapGrid;
   snapToGrid?: boolean;
+  containerBounds: DOMRect | null;
 };
 
 export function getPointerPosition(
   event: MouseEvent | TouchEvent,
-  { snapGrid = [0, 0], snapToGrid = false, transform }: GetPointerPositionParams
+  { snapGrid = [0, 0], snapToGrid = false, transform, containerBounds }: GetPointerPositionParams
 ): XYPosition & { xSnapped: number; ySnapped: number } {
   const { x, y } = getEventPosition(event);
-  const pointerPos = pointToRendererPoint({ x, y }, transform);
+  const pointerPos = pointToRendererPoint(
+    { x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) },
+    transform
+  );
   const { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
 
   // we need the snapped position in order to be able to skip unnecessary drag events

packages/system/src/xydrag/XYDrag.ts

@@ -257,7 +257,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         onNodeMouseDown?.(nodeId);
       }
 
-      const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+      const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });
       lastPos = pointerPos;
       dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);
 
@@ -281,6 +281,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       .clickDistance(nodeClickDistance)
       .on('start', (event: UseDragEvent) => {
         const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();
+        containerBounds = domNode?.getBoundingClientRect() || null;
 
         abortDrag = false;
 
@@ -288,14 +289,13 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
           startDrag(event);
         }
 
-        const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+        const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });
         lastPos = pointerPos;
-        containerBounds = domNode?.getBoundingClientRect() || null;
         mousePosition = getEventPosition(event.sourceEvent, containerBounds!);
       })
       .on('drag', (event: UseDragEvent) => {
         const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems();
-        const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+        const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });
 
         if (
           (event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) ||