fix(viewport): make onViewportChange prop dynamic #4579

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

@@ -5,6 +5,7 @@ import {
   type CoordinateExtent,
   type OnPanZoom,
   type PanZoomInstance,
+  type Transform,
   type Viewport
 } from '@xyflow/system';
 
@@ -36,6 +37,7 @@ type ZoomParams = {
   userSelectionActive: boolean;
   lib: string;
   paneClickDistance: number;
+  onTransformChange: (transform: Transform) => void;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
@@ -57,8 +59,6 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     translateExtent,
     viewport: initialViewport,
     paneClickDistance,
-    onTransformChange: (transform) =>
-      viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] }),
     onDraggingChange: dragging.set
   });
   const currentViewport = panZoomInstance.getViewport();

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { PanOnScrollMode } from '@xyflow/system';
+  import { onMount } from 'svelte';
+  import { PanOnScrollMode, type Transform } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
-  import { onMount } from 'svelte';
 
   type $$Props = ZoomProps;
 
@@ -39,6 +39,9 @@
   $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
   $: _panOnScroll = $panActivationKeyPressed || panOnScroll;
 
+  const onTransformChange = (transform: Transform) =>
+    viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] });
+
   onMount(() => {
     $viewportInitialized = true;
   });
@@ -70,7 +73,8 @@
     userSelectionActive: !!$selectionRect,
     translateExtent: $translateExtent,
     lib: $lib,
-    paneClickDistance
+    paneClickDistance,
+    onTransformChange
   }}
 >
   <slot />