diff --git a/.changeset/clean-toes-argue.md b/.changeset/clean-toes-argue.md new file mode 100644 index 00000000..1d7276cc --- /dev/null +++ b/.changeset/clean-toes-argue.md @@ -0,0 +1,5 @@ +--- +'@xyflow/svelte': patch +--- + +Add missing props autoPanSpeed and panOnScrollSpeed diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index b04a20fc..eb52320e 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/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, diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 9b039558..d16a3890 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/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} diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte index 57608967..88ba9f1a 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte +++ b/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 */ diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 5cd4b740..0fbd4b18 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/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. diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte index 9c159c99..70971e46 100644 --- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte +++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte @@ -1,5 +1,5 @@