From 875e6433bb53e4a3aeef5c7f335a3aa35a851969 Mon Sep 17 00:00:00 2001
From: Moritz Klack <info@moritzklack.com>
Date: Wed, 5 Jun 2024 11:32:04 +0200
Subject: [PATCH] fix(svelte): use user viewport store for init viewport closes
 #4335 (#4338)

* fix(svelte): use user viewport store for init viewport closes #4335

* refactor(svelte): viewport init

* chore(svelte): changelog
---
 .../src/routes/examples/two-way-viewport/Flow.svelte      | 4 ++--
 packages/svelte/CHANGELOG.md                              | 1 +
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 8 +++++---
 packages/svelte/src/lib/container/Zoom/Zoom.svelte        | 2 +-
 packages/svelte/src/lib/container/Zoom/types.ts           | 2 +-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte b/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
index 7aa5a9b4..73d3a073 100644
--- a/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
+++ b/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
@@ -21,7 +21,7 @@
 		{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
 	]);
 	const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
-	const viewport = writable<Viewport>({ x: 0, y: 10, zoom: 1.25 });
+	const viewport = writable<Viewport>({ x: 100, y: 100, zoom: 1.25 });
 
 	const { fitView } = useSvelteFlow();
 
@@ -35,7 +35,7 @@
 	});
 </script>
 
-<SvelteFlow {nodes} {edges} fitView {viewport}>
+<SvelteFlow {nodes} {edges} {viewport}>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 267c7112..2734f257 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -7,6 +7,7 @@
 - add `on:edgemouseenter` and `on:edgemouseleave` event handler
 - fix deselection of edges
 - remove pointer events from panel when user selection is active
+- fix viewport initialization with user viewport 
 
 ## 0.1.3
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index b8986aaa..dea8549f 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -2,7 +2,7 @@
   import { onMount, hasContext } from 'svelte';
   import { get } from 'svelte/store';
   import cc from 'classcat';
-  import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
+  import { ConnectionMode, PanOnScrollMode } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
@@ -28,7 +28,7 @@
   export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
+  export let initialViewport: $$Props['initialViewport'] = undefined;
   export let viewport: $$Props['viewport'] = undefined;
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
@@ -89,6 +89,8 @@
   let clientWidth: number;
   let clientHeight: number;
 
+  const initViewport = $viewport || initialViewport;
+
   const store = hasContext(key)
     ? useStore()
     : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height, fitView });
@@ -203,7 +205,7 @@
     {zoomActivationKey}
   />
   <Zoom
-    {initialViewport}
+    initialViewport={initViewport}
     {onMoveStart}
     {onMove}
     {onMoveEnd}
diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
index 459e73b5..87a39045 100644
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -8,7 +8,7 @@
 
   type $$Props = ZoomProps;
 
-  export let initialViewport: $$Props['initialViewport'];
+  export let initialViewport: $$Props['initialViewport'] = undefined;
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
diff --git a/packages/svelte/src/lib/container/Zoom/types.ts b/packages/svelte/src/lib/container/Zoom/types.ts
index 7967460a..cf2e15cd 100644
--- a/packages/svelte/src/lib/container/Zoom/types.ts
+++ b/packages/svelte/src/lib/container/Zoom/types.ts
@@ -1,7 +1,7 @@
 import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system';
 
 export type ZoomProps = {
-  initialViewport: Viewport;
+  initialViewport?: Viewport;
   panOnScrollMode: PanOnScrollMode;
   onMove?: OnMove;
   onMoveStart?: OnMoveStart;