feat(core): add autoPanSpeed prop (#1535)

* feat(core): add `autoPanSpeed` prop

* chore(changeset): add

Author: bcakmakoglu

.changeset/good-turtles-accept.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Add `autoPanSpeed` prop. Allows specifying at what speed the pane moves when auto-panning via node-drag, selection-drag or connection-drag

packages/core/src/composables/useDrag.ts

@@ -46,6 +46,7 @@ export function useDrag(params: UseDragParams) {
     nodeDragThreshold,
     viewport,
     autoPanOnNodeDrag,
+    autoPanSpeed,
     nodesDraggable,
     panBy,
     findNode,
@@ -132,7 +133,7 @@ export function useDrag(params: UseDragParams) {
       return
     }
 
-    const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds)
+    const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed.value)
 
     if (xMovement !== 0 || yMovement !== 0) {
       const nextPos = {

packages/core/src/composables/useHandle.ts

@@ -56,6 +56,7 @@ export function useHandle({
     connectionClickStartHandle,
     nodesConnectable,
     autoPanOnConnect,
+    autoPanSpeed,
     findNode,
     panBy,
     startConnection,
@@ -120,7 +121,7 @@ export function useHandle({
           return
         }
 
-        const [xMovement, yMovement] = calcAutoPan(connectionPosition, containerBounds)
+        const [xMovement, yMovement] = calcAutoPan(connectionPosition, containerBounds, autoPanSpeed.value)
 
         panBy({ x: xMovement, y: yMovement })
         autoPanId = requestAnimationFrame(autoPan)

packages/core/src/store/state.ts

@@ -109,6 +109,7 @@ export function useState(): State {
 
     autoPanOnNodeDrag: true,
     autoPanOnConnect: true,
+    autoPanSpeed: 15,
 
     disableKeyboardA11y: false,
     ariaLiveMessage: '',

packages/core/src/types/flow.ts

@@ -223,6 +223,7 @@ export interface FlowProps {
 
   autoPanOnConnect?: boolean
   autoPanOnNodeDrag?: boolean
+  autoPanSpeed?: number
 }
 
 /**

packages/core/src/types/store.ts

@@ -149,6 +149,11 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
 
   autoPanOnConnect: boolean
   autoPanOnNodeDrag: boolean
+  /**
+   * The speed at which the viewport pans while dragging a node or a selection box.
+   * @default 15
+   */
+  autoPanSpeed: number
 
   disableKeyboardA11y: boolean
 

packages/core/src/utils/autopan.ts

@@ -5,17 +5,24 @@ import { clamp } from './graph'
 // when the mouse is close to the edge of the canvas
 function calcAutoPanVelocity(value: number, min: number, max: number) {
   if (value < min) {
-    return clamp(Math.abs(value - min), 1, 50) / 50
-  } else if (value > max) {
-    return -clamp(Math.abs(value - max), 1, 50) / 50
+    return clamp(Math.abs(value - min), 1, min) / min
+  }
+
+  if (value > max) {
+    return -clamp(Math.abs(value - max), 1, min) / min
   }
 
   return 0
 }
 
-export function calcAutoPan(pos: XYPosition, bounds: Dimensions) {
-  const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20
-  const yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20
+export function calcAutoPan(
+  pos: XYPosition,
+  bounds: Dimensions,
+  speed = 15,
+  distance = 40,
+): [xMovement: number, yMovement: number] {
+  const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance) * speed
+  const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance) * speed
 
   return [xMovement, yMovement]
 }