refector viewport to use signals

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -45,7 +45,7 @@
     children
   }: PaneProps = $props();
 
-  const { viewport, nodes, edges } = store;
+  const { nodes, edges } = store;
 
   // svelte-ignore non_reactive_update
   let container: HTMLDivElement;
@@ -131,7 +131,7 @@
     selectedNodes = getNodesInside(
       store.nodeLookup,
       nextUserSelectRect,
-      [$viewport.x, $viewport.y, $viewport.zoom],
+      [store.viewport.x, store.viewport.y, store.viewport.zoom],
       store.selectionMode === SelectionMode.Partial,
       true
     );

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
   import { onMount, getContext, setContext } from 'svelte';
   import cc from 'classcat';
   import { PanOnScrollMode } from '@xyflow/system';
@@ -79,12 +78,9 @@
     props,
     container
   });
-  const { viewport } = store;
-  const initialViewport = props.initialViewport ?? get(viewport);
 
   store.syncNodeStores(props.nodes);
   store.syncEdgeStores(props.edges);
-  store.syncViewport(props.viewport);
 
   const providerContext = getContext<ProviderContext>(key);
   if (providerContext) {
@@ -128,7 +124,6 @@
   />
   <Zoom
     {store}
-    {initialViewport}
     {onMoveStart}
     {onMove}
     {onMoveEnd}
@@ -142,7 +137,7 @@
     {paneClickDistance}
   >
     <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
-      <ViewportComponent viewport={$viewport}>
+      <ViewportComponent {store}>
         <EdgeRenderer
           {store}
           {onedgeclick}

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import type { Viewport } from '@xyflow/system';
+  import type { SvelteFlowStore } from '$lib/store/types';
   import type { Snippet } from 'svelte';
 
-  let { viewport, children }: { viewport: Viewport; children: Snippet } = $props();
+  let { store, children }: { store: SvelteFlowStore; children: Snippet } = $props();
 </script>
 
 <div
   class="svelte-flow__viewport xyflow__viewport"
-  style="transform: translate({viewport.x}px, {viewport.y}px) scale({viewport.zoom})"
+  style="transform: translate({store.viewport.x}px, {store.viewport.y}px) scale({store.viewport
+    .zoom})"
 >
   {@render children()}
 </div>

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -8,7 +8,6 @@
 
   let {
     store,
-    initialViewport = { x: 0, y: 0, zoom: 1 },
     onMoveStart,
     onMove,
     onMoveEnd,
@@ -27,7 +26,10 @@
   let panOnScrollActive = $derived(store.panActivationKeyPressed || panOnScroll);
 
   const onTransformChange = (transform: Transform) =>
-    store.viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] });
+    (store.viewport = { x: transform[0], y: transform[1], zoom: transform[2] });
+
+  // We extract the initial value by destructuring
+  const { viewport: initialViewport } = store;
 
   onMount(() => {
     store.viewportInitialized = true;

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

@@ -1,10 +1,9 @@
 import type { SvelteFlowStore } from '$lib/store/types';
-import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system';
+import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 
 export type ZoomProps = {
   store: SvelteFlowStore;
-  initialViewport?: Viewport;
   panOnScrollMode: PanOnScrollMode;
   onMove?: OnMove;
   onMoveStart?: OnMoveStart;