From 6b7e72b06c51912ccee49471fb84cfccb4fb4086 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Thu, 21 Sep 2023 12:59:56 +0200
Subject: [PATCH] feat(svelte) add autoPanOnConnect autoPanOnNodeDrag props

---
 examples/svelte/src/routes/overview/+page.svelte            | 2 ++
 packages/svelte/src/lib/components/Handle/Handle.svelte     | 5 +++--
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte   | 6 +++++-
 packages/svelte/src/lib/container/SvelteFlow/types.ts       | 2 ++
 packages/svelte/src/lib/container/SvelteFlow/utils.ts       | 2 ++
 packages/svelte/src/lib/store/initial-store.ts              | 1 +
 6 files changed, 15 insertions(+), 3 deletions(-)

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
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
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<HTMLDivElement> & {
   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<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) {
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<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),