refactor(core): add onBeforeTransform arg to panBy action

.changeset/light-pots-float.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Limit auto-pan when dragging a node by translate extent, so nodes cannot be dragged infinitely into the background.

packages/core/src/composables/useDrag.ts

@@ -55,6 +55,7 @@ function useDrag(params: UseDragParams) {
 
   let autoPanId = $ref(0)
   let autoPanStarted = $ref(false)
+  let previousTransform = $ref<XYPosition>({ x: 0, y: 0 })
 
   const getPointerPosition = useGetPointerPosition()
 
@@ -79,7 +80,7 @@ function useDrag(params: UseDragParams) {
         n.parentNode ? findNode(n.parentNode) : undefined,
       )
 
-      // we want to make sure that we only fire a change event when there is a changes
+      // we want to make sure that we only fire a change event when there is a change
       hasChange = hasChange || n.position.x !== computedPosition.x || n.position.y !== computedPosition.y
 
       n.position = computedPosition
@@ -114,12 +115,21 @@ function useDrag(params: UseDragParams) {
     const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds)
 
     if (xMovement !== 0 || yMovement !== 0) {
-      lastPos.x = (lastPos.x ?? 0) - xMovement / viewport.zoom
-      lastPos.y = (lastPos.y ?? 0) - yMovement / viewport.zoom
-
-      updateNodes(lastPos as XYPosition)
+      const nextPos = {
+        x: (lastPos.x ?? 0) - xMovement / viewport.zoom,
+        y: (lastPos.y ?? 0) - yMovement / viewport.zoom,
+      }
 
-      panBy({ x: xMovement, y: yMovement })
+      panBy({ x: xMovement, y: yMovement }, (transform) => {
+        if (
+          Math.round(transform.x) !== Math.round(previousTransform.x) ||
+          Math.round(transform.y) !== Math.round(previousTransform.y)
+        ) {
+          updateNodes(nextPos)
+          previousTransform = transform
+          lastPos = nextPos
+        }
+      })
     }
 
     autoPanId = requestAnimationFrame(autoPan)

packages/core/src/store/actions.ts

@@ -629,7 +629,7 @@ export function useActions(
     return partiallyVisible || overlappingArea >= Number(nodeOrRect.width) * Number(nodeOrRect.height)
   }
 
-  const panBy: Actions['panBy'] = (delta) => {
+  const panBy: Actions['panBy'] = (delta, onBeforeTransform) => {
     const { viewport, dimensions, d3Zoom, d3Selection, translateExtent } = state
 
     if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
@@ -645,6 +645,8 @@ export function useActions(
 
     const constrainedTransform = d3Zoom.constrain()(nextTransform, extent, translateExtent)
 
+    onBeforeTransform?.(constrainedTransform)
+
     d3Zoom.transform(d3Selection, constrainedTransform)
   }
 

packages/core/src/types/store.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
 import type { KeyFilter } from '@vueuse/core'
+import type { ZoomTransform } from 'd3-zoom'
 import type {
   Dimensions,
   ElementData,
@@ -269,7 +270,7 @@ export interface Actions extends ViewportFunctions {
   /** check if a node is intersecting with a defined area */
   isNodeIntersecting: IsNodeIntersecting
   /** pan the viewport */
-  panBy: (delta: XYPosition) => void
+  panBy: (delta: XYPosition, onBeforeTransform?: (transform: ZoomTransform) => void) => void
 
   /** reset state to defaults */
   $reset: () => void