refector viewport to use signals

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -43,7 +43,6 @@
   }: MiniMapProps = $props();
 
   let store = useStore();
-  const { viewport } = store;
 
   let nodes = $derived(store.nodes);
 
@@ -58,10 +57,10 @@
 
   // TODO: simplify this
   let viewBB = $derived({
-    x: -$viewport.x / $viewport.zoom,
-    y: -$viewport.y / $viewport.zoom,
-    width: store.width / $viewport.zoom,
-    height: store.height / $viewport.zoom
+    x: -store.viewport.x / store.viewport.zoom,
+    y: -store.viewport.y / store.viewport.zoom,
+    width: store.width / store.viewport.zoom,
+    height: store.height / store.viewport.zoom
   });
   let boundingRect = $derived(
     store.nodeLookup.size > 0
@@ -102,8 +101,8 @@
         ? maskStrokeWidth * viewScale
         : undefined}
       use:interactive={{
+        store,
         panZoom: store.panZoom,
-        viewport: store.viewport,
         getViewScale,
         translateExtent: store.translateExtent,
         width: store.width,

packages/svelte/src/lib/plugins/Minimap/interactive.ts

@@ -1,14 +1,9 @@
-import { get, type Writable } from 'svelte/store';
-import {
-  XYMinimap,
-  type PanZoomInstance,
-  type Viewport,
-  type XYMinimapUpdate
-} from '@xyflow/system';
+import { XYMinimap, type PanZoomInstance, type XYMinimapUpdate } from '@xyflow/system';
+import type { SvelteFlowStore } from '$lib/store/types';
 
 export type UseInteractiveParams = {
   panZoom: PanZoomInstance;
-  viewport: Writable<Viewport>;
+  store: SvelteFlowStore;
   getViewScale: () => number;
 } & XYMinimapUpdate;
 
@@ -17,7 +12,7 @@ export default function interactive(domNode: Element, params: UseInteractivePara
     domNode,
     panZoom: params.panZoom,
     getTransform: () => {
-      const viewport = get(params.viewport);
+      const { viewport } = params.store;
       return [viewport.x, viewport.y, viewport.zoom];
     },
     getViewScale: params.getViewScale