refactor(react): use vanilla helpers for zoom and pan

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

@@ -33,6 +33,9 @@
   export let deleteKey: $$Props['deleteKey'] = undefined;
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
+  export let onMoveStart: $$Props['onMoveStart'] = undefined;
+  export let onMove: $$Props['onMove'] = undefined;
+  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -111,7 +114,7 @@
   {...$$restProps}
 >
   <KeyHandler {selectionKey} {deleteKey} />
-  <Zoom {initialViewport}>
+  <Zoom {initialViewport} {onMoveStart} {onMove} {onMoveEnd}>
     <Pane on:pane:click>
       <Viewport>
         <EdgeRenderer on:edge:click />

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

@@ -6,7 +6,10 @@ import type {
   OnConnectStartParams,
   Viewport,
   SelectionMode,
-  SnapGrid
+  SnapGrid,
+  OnMoveStart,
+  OnMove,
+  OnMoveEnd
 } from '@reactflow/system';
 
 import type {
@@ -43,6 +46,10 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   connectionLineType?: ConnectionLineType;
   isValidConnection?: IsValidConnection;
 
+  onMoveStart?: OnMoveStart;
+  onMove?: OnMove;
+  onMoveEnd?: OnMoveEnd;
+
   'on:node:click'?: CustomEvent<Node>;
   'on:node:mouseenter'?: CustomEvent<Node>;
   'on:node:mousemove'?: CustomEvent<Node>;