diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 31a8d459..05bc506b 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -159,6 +159,8 @@ event.detail.event.preventDefault(); console.log('on node contextmenu', event); }} + autoPanOnConnect + autoPanOnNodeDrag > diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index d5310923..0108357b 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -40,7 +40,8 @@ addEdge, panBy, cancelConnection, - updateConnection + updateConnection, + autoPanOnConnect } = store; function onPointerDown(event: MouseEvent | TouchEvent) { @@ -56,7 +57,7 @@ nodes: $nodes, connectionMode: $connectionMode, lib: $lib, - autoPanOnConnect: true, + autoPanOnConnect: $autoPanOnConnect, isValidConnection: $isValidConnection, updateConnection, cancelConnection, diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 0b2fac70..a24d7aaa 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -51,6 +51,8 @@ export let zoomOnPinch: boolean = true; export let panOnScroll: boolean = false; export let panOnDrag: boolean | number[] = true; + export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true; + export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true; export let defaultMarkerColor = '#b1b1b7'; @@ -102,7 +104,9 @@ nodesConnectable, elementsSelectable, onlyRenderVisibleElements, - isValidConnection + isValidConnection, + autoPanOnConnect, + autoPanOnNodeDrag }; updateStoreByKeys(store, updatableProps); diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 1c2f6ebb..2e7d8a53 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -49,6 +49,8 @@ export type SvelteFlowProps = DOMAttributes & { panOnScroll?: boolean; panOnDrag?: boolean | number[]; onlyRenderVisibleElements?: boolean; + autoPanOnConnect?: boolean; + autoPanOnNodeDrag?: boolean; class?: string; style?: string; diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts index ce82b5cd..f06a8dab 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts @@ -59,6 +59,8 @@ export type UpdatableStoreProps = { elementsSelectable?: UnwrapWritable; onlyRenderVisibleElements?: UnwrapWritable; isValidConnection?: UnwrapWritable; + autoPanOnConnect?: UnwrapWritable; + autoPanOnNodeDrag?: UnwrapWritable; }; export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) { diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index f7326e4f..bf613085 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -59,6 +59,7 @@ export const getInitialStore = () => ({ nodeExtent: writable(infiniteExtent), translateExtent: writable(infiniteExtent), autoPanOnNodeDrag: writable(true), + autoPanOnConnect: writable(true), fitViewOnInit: writable(false), fitViewOnInitDone: writable(false), panZoom: writable(null),