feat(utils): add vanilla drag and panzoom (#3108)

* refactor(panzoom): create vanilla helper

* feat(svelte): add interaction example

* refactor(panzoom): cleanup

* Update function-runner.ts

* refactor(panzoom): cleanup

* refactor(panzoom): rename functions

* feat(utils): add vanilla drag helper (#3107)

* feat(utils): add vanilla drag helper

* refactor(drag): cleanup

* refactor(drag): cleanup

* chore(packages): cleanup

* refactor(panzoom): cleanup and simplify

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

@@ -1,32 +1,60 @@
 <script lang="ts"> 
+  import { PanOnScrollMode } from '@reactflow/system';
+
   import { useStore } from '$lib/store';
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
 
   type $$Props = ZoomProps; 
 
-  export let initialViewport: $$Props['initialViewport'] = undefined;
+  export let initialViewport: $$Props['initialViewport'];
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
+  export let panOnScrollMode: $$Props['panOnScrollMode'];
+  export let preventScrolling: $$Props['preventScrolling'];;
+  export let zoomOnScroll: $$Props['zoomOnScroll'];;
+  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];;
+  export let zoomOnPinch: $$Props['zoomOnPinch'];;
+  export let panOnDrag: $$Props['panOnDrag'];
+  export let panOnScroll: $$Props['panOnScroll'];;
 
-  const { transform, d3, selectionKeyPressed, selectionRectMode, minZoom, maxZoom, dragging } = useStore();
+  const {
+    transform,
+    panZoom,
+    selectionKeyPressed,
+    minZoom,
+    maxZoom,
+    dragging,
+    translateExtent
+  } = 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: $minZoom,
   maxZoom: $maxZoom,
   initialViewport: viewPort,
   dragging,
-  onMoveStart,
-  onMove,
-  onMoveEnd
+  panZoom,
+  onPanZoomStart: onMoveStart,
+  onPanZoom: onMove,
+  onPanZoomEnd: onMoveEnd,
+  zoomOnScroll,
+  zoomOnDoubleClick,
+  zoomOnPinch,
+  panOnScroll,
+  panOnDrag,
+  panOnScrollSpeed: 0.5,
+  panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
+  zoomActivationKeyPressed: false,
+  preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
+  noPanClassName: 'nopan',
+  noWheelClassName: 'nowheel',
+  userSelectionActive: $selectionKeyPressed,
+  translateExtent: $translateExtent
 }}>
   <slot />
 </div>

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

@@ -1,8 +1,15 @@
-import type { OnMove, OnMoveStart, OnMoveEnd, Viewport } from '@reactflow/system';
+import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@reactflow/system';
 
 export type ZoomProps = {
-  initialViewport?: Viewport;
+  initialViewport: Viewport;
+  panOnScrollMode: PanOnScrollMode;
   onMove?: OnMove;
   onMoveStart?: OnMoveStart;
   onMoveEnd?: OnMoveEnd;
+  preventScrolling: boolean;
+  zoomOnScroll: boolean;
+  zoomOnDoubleClick: boolean;
+  zoomOnPinch: boolean;
+  panOnScroll: boolean;
+  panOnDrag: boolean | number[];
 };