Merge pull request #3029 from wbkd/fix/autopan

fix(autopan): respect translate contraints

.changeset/strange-geckos-shake.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fix(autopan): only update nodes when transform change happen

packages/core/src/hooks/useDrag/index.ts

@@ -119,8 +119,9 @@ function useDrag({
           lastPos.current.x = (lastPos.current.x ?? 0) - xMovement / transform[2];
           lastPos.current.y = (lastPos.current.y ?? 0) - yMovement / transform[2];
 
-          updateNodes(lastPos.current as XYPosition);
-          panBy({ x: xMovement, y: yMovement });
+          if (panBy({ x: xMovement, y: yMovement })) {
+            updateNodes(lastPos.current as XYPosition);
+          }
         }
         autoPanId.current = requestAnimationFrame(autoPan);
       };

packages/core/src/store/index.ts

@@ -252,11 +252,11 @@ const createRFStore = () =>
         nodeInternals: new Map(nodeInternals),
       });
     },
-    panBy: (delta: XYPosition) => {
+    panBy: (delta: XYPosition): boolean => {
       const { transform, width, height, d3Zoom, d3Selection, translateExtent } = get();
 
       if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
-        return;
+        return false;
       }
 
       const nextTransform = zoomIdentity.translate(transform[0] + delta.x, transform[1] + delta.y).scale(transform[2]);
@@ -268,6 +268,13 @@ const createRFStore = () =>
 
       const constrainedTransform = d3Zoom?.constrain()(nextTransform, extent, translateExtent);
       d3Zoom.transform(d3Selection, constrainedTransform);
+
+      const transformChanged =
+        transform[0] !== constrainedTransform.x ||
+        transform[1] !== constrainedTransform.y ||
+        transform[2] !== constrainedTransform.k;
+
+      return transformChanged;
     },
     cancelConnection: () =>
       set({

packages/core/src/types/general.ts

@@ -252,7 +252,7 @@ export type ReactFlowActions = {
   cancelConnection: () => void;
   reset: () => void;
   triggerNodeChanges: (changes: NodeChange[]) => void;
-  panBy: (delta: XYPosition) => void;
+  panBy: (delta: XYPosition) => boolean;
 };
 
 export type ReactFlowState = ReactFlowStore & ReactFlowActions;