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

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -43,22 +43,20 @@
     edges,
     transform,
     dragging,
+    elementsSelectable,
     selectionRect,
     selectionRectMode,
     selectionKeyPressed,
+    selectionMode,
     resetSelectedElements,
-    selectionMode
   } = useStore();
 
-  // @todo take from props
-  const elementsSelectable = true;
-
   let container: HTMLDivElement;
   let containerBounds: DOMRect | null = null;
   let selectedNodes: Node[] = [];
 
   $: isSelecting = $selectionKeyPressed;
-  $: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');
+  $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
 
   function onClick(event: MouseEvent) {
     dispatch('pane:click', event);

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>;

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

@@ -1,18 +1,33 @@
-<script lang="ts">
-  import { get } from 'svelte/store';
-  import type { Viewport } from '@reactflow/system';
-  
+<script lang="ts"> 
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
+  import type { ZoomProps } from './types';
 
-  export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
+  type $$Props = ZoomProps; 
 
-  const { transform, d3, selectionKeyPressed, selectionRectMode, minZoom, maxZoom } = useStore();
+  export let initialViewport: $$Props['initialViewport'] = undefined;
+  export let onMoveStart: $$Props['onMoveStart'] = undefined;
+  export let onMove: $$Props['onMove'] = undefined;
+  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
 
+  const { transform, d3, selectionKeyPressed, selectionRectMode, minZoom, maxZoom, dragging } = useStore();
+  
+  $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
   $: selecting = $selectionKeyPressed || $selectionRectMode === 'user';
 </script>
 
-<div class="svelte-flow__zoom" use:zoom={{ transform, d3, selecting, minZoom: get(minZoom), maxZoom: get(maxZoom), initialViewport }}>
+<div class="svelte-flow__zoom" use:zoom={{
+  transform,
+  d3,
+  selecting,
+  minZoom: $minZoom,
+  maxZoom: $maxZoom,
+  initialViewport: viewPort,
+  dragging,
+  onMoveStart,
+  onMove,
+  onMoveEnd
+}}>
   <slot />
 </div>
 

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

@@ -0,0 +1,8 @@
+import type { OnMove, OnMoveStart, OnMoveEnd, Viewport } from '@reactflow/system';
+
+export type ZoomProps = {
+  initialViewport?: Viewport;
+  onMove?: OnMove;
+  onMoveStart?: OnMoveStart;
+  onMoveEnd?: OnMoveEnd;
+};