Merge pull request #5510 from xyflow/pr-5498

Add panOnScrollSpeed prop

.changeset/clean-toes-argue.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Add missing props autoPanSpeed and panOnScrollSpeed

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -122,6 +122,7 @@
         connectionMode: store.connectionMode,
         lib: 'svelte',
         autoPanOnConnect: store.autoPanOnConnect,
+        autoPanSpeed: store.autoPanSpeed,
         flowId: store.flowId,
         isValidConnection: isValidConnection ?? store.isValidConnection,
         updateConnection: store.updateConnection,

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -59,6 +59,7 @@
     zoomOnDoubleClick = true,
     zoomOnPinch = true,
     panOnScroll = false,
+    panOnScrollSpeed = 0.5,
     panOnDrag = true,
     selectionOnDrag = true,
     connectionLineComponent,
@@ -152,6 +153,7 @@
     {zoomOnDoubleClick}
     {zoomOnPinch}
     {panOnScroll}
+    {panOnScrollSpeed}
     {panOnDrag}
     {paneClickDistance}
     {onmovestart}

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -94,6 +94,8 @@
     noPanClass,
     noWheelClass,
     ariaLabelConfig,
+    autoPanSpeed,
+    panOnScrollSpeed,
     ...divAttributes
   } = $derived(rest);
   /* eslint-enable @typescript-eslint/no-unused-vars */

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -239,6 +239,11 @@ export type SvelteFlowProps<
      * @default true
      */
     nodesDraggable?: boolean;
+    /**
+     * The speed at which the viewport pans while dragging a node or a selection box.
+     * @default 15
+     */
+    autoPanSpeed?: number;
     /**
      * When `true`, the viewport will pan when a node is focused.
      * @default true
@@ -305,6 +310,12 @@ export type SvelteFlowProps<
      * @default false
      */
     panOnScroll?: boolean;
+    /**
+     * Controls how fast viewport should be panned on scroll.
+     * Use together with `panOnScroll` prop.
+     * @default 0.5
+     */
+    panOnScrollSpeed?: number;
     /**
      * This prop is used to limit the direction of panning when panOnScroll is enabled.
      * The "free" option allows panning in any direction.

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
-  import { PanOnScrollMode, type PanZoomInstance, type Transform } from '@xyflow/system';
+  import { type PanZoomInstance, type Transform } from '@xyflow/system';
 
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
@@ -7,14 +7,15 @@
 
   let {
     store = $bindable(),
-    panOnScrollMode = PanOnScrollMode.Free,
+    panOnScrollMode,
-    preventScrolling = true,
+    preventScrolling,
-    zoomOnScroll = true,
+    zoomOnScroll,
-    zoomOnDoubleClick = true,
+    zoomOnDoubleClick,
-    zoomOnPinch = true,
+    zoomOnPinch,
-    panOnDrag = true,
+    panOnDrag,
-    panOnScroll = false,
+    panOnScroll,
-    paneClickDistance = 1,
+    panOnScrollSpeed,
+    paneClickDistance,
     onmovestart,
     onmove,
     onmoveend,
@@ -58,8 +59,8 @@
     zoomOnPinch,
     panOnScroll: panOnScrollActive,
     panOnDrag: panOnDragActive,
-    panOnScrollSpeed: 0.5,
+    panOnScrollSpeed,
-    panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
+    panOnScrollMode,
     zoomActivationKeyPressed: store.zoomActivationKeyPressed,
     preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
     noPanClassName: store.noPanClass,

packages/svelte/src/lib/container/Zoom/types.ts

@@ -6,6 +6,7 @@ import type { Snippet } from 'svelte';
 export type ZoomProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
   store: SvelteFlowStore<NodeType, EdgeType>;
   panOnScrollMode: PanOnScrollMode;
+  panOnScrollSpeed: number;
   preventScrolling: boolean;
   zoomOnScroll: boolean;
   zoomOnDoubleClick: boolean;

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -286,6 +286,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     autoPanOnNodeDrag: boolean = $derived(signals.props.autoPanOnNodeDrag ?? true);
     autoPanOnConnect: boolean = $derived(signals.props.autoPanOnConnect ?? true);
     autoPanOnNodeFocus: boolean = $derived(signals.props.autoPanOnNodeFocus ?? true);
+    autoPanSpeed: number = $derived(signals.props.autoPanSpeed ?? 15);
     connectionDragThreshold: number = $derived(signals.props.connectionDragThreshold ?? 1);
 
     fitViewQueued: boolean = signals.props.fitView ?? false;