Merge pull request #3430 from wbkd/svelte-flow-auto-pan

feat(svelte) add autoPanOnConnect autoPanOnNodeDrag props

examples/svelte/src/routes/overview/+page.svelte

@@ -159,6 +159,8 @@
 		event.detail.event.preventDefault();
 		console.log('on node contextmenu', event);
 	}}
+	autoPanOnConnect
+	autoPanOnNodeDrag
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

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,

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

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

@@ -49,6 +49,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   panOnScroll?: boolean;
   panOnDrag?: boolean | number[];
   onlyRenderVisibleElements?: boolean;
+  autoPanOnConnect?: boolean;
+  autoPanOnNodeDrag?: boolean;
 
   class?: string;
   style?: string;

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

@@ -59,6 +59,8 @@ export type UpdatableStoreProps = {
   elementsSelectable?: UnwrapWritable<SvelteFlowStore['elementsSelectable']>;
   onlyRenderVisibleElements?: UnwrapWritable<SvelteFlowStore['onlyRenderVisibleElements']>;
   isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
+  autoPanOnConnect?: UnwrapWritable<SvelteFlowStore['autoPanOnConnect']>;
+  autoPanOnNodeDrag?: UnwrapWritable<SvelteFlowStore['autoPanOnNodeDrag']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {

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

@@ -59,6 +59,7 @@ export const getInitialStore = () => ({
   nodeExtent: writable<CoordinateExtent>(infiniteExtent),
   translateExtent: writable<CoordinateExtent>(infiniteExtent),
   autoPanOnNodeDrag: writable<boolean>(true),
+  autoPanOnConnect: writable<boolean>(true),
   fitViewOnInit: writable<boolean>(false),
   fitViewOnInitDone: writable<boolean>(false),
   panZoom: writable<PanZoomInstance | null>(null),