refector viewport to use signals

packages/svelte/src/lib/actions/drag/index.ts

@@ -25,8 +25,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
     onDragStop,
     onNodeMouseDown,
     getStoreItems: () => {
-      const snapGrid = store.snapGrid;
-      const vp = get(store.viewport);
+      const { snapGrid, viewport } = store;
 
       return {
         nodes: get(store.nodes),
@@ -38,7 +37,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
         nodeOrigin: store.nodeOrigin,
         multiSelectionActive: store.multiselectionKeyPressed,
         domNode: store.domNode,
-        transform: [vp.x, vp.y, vp.zoom],
+        transform: [viewport.x, viewport.y, viewport.zoom],
         autoPanOnNodeDrag: store.autoPanOnNodeDrag,
         nodesDraggable: store.nodesDraggable,
         selectNodesOnDrag: store.selectNodesOnDrag,

packages/svelte/src/lib/actions/zoom/index.ts

@@ -1,4 +1,3 @@
-import type { Writable } from 'svelte/store';
 import {
   PanOnScrollMode,
   XYPanZoom,
@@ -10,7 +9,7 @@ import {
 } from '@xyflow/system';
 
 type ZoomParams = {
-  viewport: Writable<Viewport>;
+  viewport: Viewport;
   initialViewport: Viewport;
   minZoom: number;
   maxZoom: number;
@@ -45,11 +44,11 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     minZoom,
     maxZoom,
     initialViewport,
-    viewport,
     translateExtent,
     paneClickDistance,
     setPanZoomInstance,
-    onDraggingChange
+    onDraggingChange,
+    onTransformChange
   } = params;
 
   const panZoomInstance = XYPanZoom({
@@ -61,8 +60,17 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     paneClickDistance,
     onDraggingChange
   });
-  const currentViewport = panZoomInstance.getViewport();
-  viewport.set(currentViewport);
+
+  //TODO: is this neccessary?
+  const viewport = panZoomInstance.getViewport();
+  if (
+    initialViewport.x !== viewport.x ||
+    initialViewport.y !== viewport.y ||
+    initialViewport.zoom !== viewport.zoom
+  ) {
+    onTransformChange([viewport.x, viewport.y, viewport.zoom]);
+  }
+
   setPanZoomInstance(panZoomInstance);
 
   panZoomInstance.update(params);