feat(react/svelte): controlled viewport (#3461)

* feat(react): controlled viewport

* refactor(react): cleanup viewport

* feat(svelte): two way data binding for viewport, cleanup transform <> viewport stuff

* refactor(svelte): viewport stuff

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

@@ -43,7 +43,7 @@
   const defaultHeight = 150;
   const {
     nodes,
-    transform,
+    viewport,
     width: containerWidth,
     height: containerHeight,
     flowId,
@@ -59,10 +59,10 @@
   const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
 
   $: viewBB = {
-    x: -$transform[0] / $transform[2],
-    y: -$transform[1] / $transform[2],
-    width: $containerWidth / $transform[2],
-    height: $containerHeight / $transform[2]
+    x: -$viewport.x / $viewport.zoom,
+    y: -$viewport.y / $viewport.zoom,
+    width: $containerWidth / $viewport.zoom,
+    height: $containerHeight / $viewport.zoom
   };
   $: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
   $: elementWidth = width ?? defaultWidth;
@@ -100,7 +100,7 @@
       style:--minimap-mask-stroke-width-props={maskStrokeWidth}
       use:interactive={{
         panZoom: $panZoom,
-        transform,
+        viewport,
         getViewScale,
         translateExtent: $translateExtent,
         width: $containerWidth,

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

@@ -2,13 +2,13 @@ import { get, type Writable } from 'svelte/store';
 import {
   XYMinimap,
   type PanZoomInstance,
-  type Transform,
+  type Viewport,
   type XYMinimapUpdate
 } from '@xyflow/system';
 
 export type UseInteractiveParams = {
   panZoom: PanZoomInstance;
-  transform: Writable<Transform>;
+  viewport: Writable<Viewport>;
   getViewScale: () => number;
 } & XYMinimapUpdate;
 
@@ -16,7 +16,10 @@ export default function interactive(domNode: Element, params: UseInteractivePara
   const minimap = XYMinimap({
     domNode,
     panZoom: params.panZoom,
-    getTransform: () => get(params.transform),
+    getTransform: () => {
+      const viewport = get(params.viewport);
+      return [viewport.x, viewport.y, viewport.zoom];
+    },
     getViewScale: params.getViewScale
   });