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

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} />
 

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
 

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}

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;

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;