Merge pull request #4411 from xyflow/autoPanSpeed

variable autoPanSpeed

.changeset/small-suits-attack.md

@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/system': patch
+---
+
+add autoPanSpeed prop/option

packages/react/src/components/Handle/index.tsx

@@ -139,6 +139,7 @@ function HandleComponent(
         isValidConnection: isValidConnection || currentStore.isValidConnection,
         getTransform: () => store.getState().transform,
         getFromHandle: () => store.getState().connection.fromHandle,
+        autoPanSpeed: currentStore.autoPanSpeed,
       });
     }
 

packages/react/src/components/StoreUpdater/index.tsx

@@ -66,6 +66,7 @@ const reactFlowFieldsToTrack = [
   'nodeDragThreshold',
   'onBeforeDelete',
   'debug',
+  'autoPanSpeed',
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];

packages/react/src/container/ReactFlow/index.tsx

@@ -129,6 +129,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     disableKeyboardA11y = false,
     autoPanOnConnect,
     autoPanOnNodeDrag,
+    autoPanSpeed,
     connectionRadius,
     isValidConnection,
     onError,
@@ -269,6 +270,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           rfId={rfId}
           autoPanOnConnect={autoPanOnConnect}
           autoPanOnNodeDrag={autoPanOnNodeDrag}
+          autoPanSpeed={autoPanSpeed}
           onError={onError}
           connectionRadius={connectionRadius}
           isValidConnection={isValidConnection}

packages/react/src/store/initialState.ts

@@ -112,6 +112,7 @@ const getInitialState = ({
     ariaLiveMessage: '',
     autoPanOnConnect: true,
     autoPanOnNodeDrag: true,
+    autoPanSpeed: 15,
     connectionRadius: 20,
     onError: devWarn,
     isValidConnection: undefined,

packages/react/src/types/component-props.ts

@@ -471,6 +471,10 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @default true
    */
   autoPanOnConnect?: boolean;
+  /** The speed at which the viewport pans while dragging a node or a selection box.
+   * @default 15
+   */
+  autoPanSpeed?: number;
   /** You can enable this prop to automatically pan the viewport while making a new connection.
    * @default true
    */

packages/react/src/types/store.ts

@@ -139,6 +139,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   ariaLiveMessage: string;
   autoPanOnConnect: boolean;
   autoPanOnNodeDrag: boolean;
+  autoPanSpeed: number;
   connectionRadius: number;
 
   isValidConnection?: IsValidConnection<EdgeType>;

packages/system/src/utils/general.ts

@@ -31,17 +31,22 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
  */
 const calcAutoPanVelocity = (value: number, min: number, max: number): number => {
   if (value < min) {
-    return clamp(Math.abs(value - min), 1, 50) / 50;
+    return clamp(Math.abs(value - min), 1, min) / min;
   } else if (value > max) {
-    return -clamp(Math.abs(value - max), 1, 50) / 50;
+    return -clamp(Math.abs(value - max), 1, min) / min;
   }
 
   return 0;
 };
 
-export const calcAutoPan = (pos: XYPosition, bounds: Dimensions): number[] => {
-  const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20;
-  const yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20;
+export const calcAutoPan = (
+  pos: XYPosition,
+  bounds: Dimensions,
+  speed: number = 15,
+  distance: number = 40
+): number[] => {
+  const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance) * speed;
+  const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance) * speed;
 
   return [xMovement, yMovement];
 };

packages/system/src/xydrag/XYDrag.ts

@@ -61,6 +61,7 @@ type StoreItems<OnNodeDrag> = {
   onSelectionDrag?: OnSelectionDrag;
   onSelectionDragStop?: OnSelectionDrag;
   updateNodePositions: UpdateNodePositions;
+  autoPanSpeed?: number;
 };
 
 export type XYDragParams<OnNodeDrag> = {
@@ -69,6 +70,7 @@ export type XYDragParams<OnNodeDrag> = {
   onDrag?: OnDrag;
   onDragStop?: OnDrag;
   onNodeMouseDown?: (id: string) => void;
+  autoPanSpeed?: number;
 };
 
 export type XYDragInstance = {
@@ -198,11 +200,11 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         return;
       }
 
-      const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds);
+      const { transform, panBy, autoPanSpeed } = getStoreItems();
+
+      const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
 
       if (xMovement !== 0 || yMovement !== 0) {
-        const { transform, panBy } = getStoreItems();
-
         lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
         lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
 

packages/system/src/xyhandle/XYHandle.ts

@@ -44,6 +44,7 @@ function onPointerDown(
     updateConnection,
     getTransform,
     getFromHandle,
+    autoPanSpeed,
   }: OnPointerDownParams
 ) {
   // when xyflow is used inside a shadow root we can't use document
@@ -78,7 +79,7 @@ function onPointerDown(
     if (!autoPanOnConnect || !containerBounds) {
       return;
     }
-    const [x, y] = calcAutoPan(position, containerBounds);
+    const [x, y] = calcAutoPan(position, containerBounds, autoPanSpeed);
 
     panBy({ x, y });
     autoPanId = requestAnimationFrame(autoPan);

packages/system/src/xyhandle/types.ts

@@ -35,6 +35,7 @@ export type OnPointerDownParams = {
   onReconnectEnd?: (evt: MouseEvent | TouchEvent) => void;
   getTransform: () => Transform;
   getFromHandle: () => Handle | null;
+  autoPanSpeed?: number;
 };
 
 export type IsValidParams = {