variable autoPanSpeed

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>;