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/SvelteFlow/SvelteFlow.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import cc from 'classcat';
+  import { PanOnScrollMode, type CoordinateExtent, type Viewport } from '@reactflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
-  import { Viewport } from '$lib/container/Viewport';
+  import { Viewport as ViewportComponent } from '$lib/container/Viewport';
   import { NodeRenderer } from '$lib/container/NodeRenderer';
   import { EdgeRenderer } from '$lib/container/EdgeRenderer';
   import { UserSelection } from '$lib/components/UserSelection';
@@ -14,6 +15,7 @@
   import { Attribution } from '$lib/components/Attribution';
   import { useStore } from '$lib/store';
   import type { SvelteFlowProps } from './types';
+    import type { EdgeTypes, NodeTypes } from '$lib/types';
 
   type $$Props = SvelteFlowProps;
 
@@ -21,7 +23,7 @@
   export let fitView: $$Props['fitView'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: $$Props['initialViewport'] = undefined;
+  export let initialViewport: Viewport = { x:0, y: 0, zoom: 1 };
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
@@ -37,6 +39,15 @@
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
+  export let translateExtent: $$Props['translateExtent'] = undefined;
+  export let panOnScrollMode: PanOnScrollMode = PanOnScrollMode.Free;
+  export let preventScrolling: boolean = true;
+  export let zoomOnScroll: boolean = true;
+  export let zoomOnDoubleClick: boolean = true;
+  export let zoomOnPinch: boolean = true;
+  export let panOnScroll: boolean = false;
+  export let panOnDrag: boolean | number[] = true;
+
   export let defaultMarkerColor = '#b1b1b7';
 
   export let style: $$Props['style'] = undefined;
@@ -53,6 +64,15 @@
     store.height.set(height);
     store.domNode.set(domNode);
 
+    updateStore({
+      nodeTypes,
+      edgeTypes,
+      minZoom,
+      maxZoom,
+      translateExtent,
+      fitView
+    });
+
     return () => {
       store.reset();
     }
@@ -81,7 +101,14 @@
     })
   }
 
-  $: {
+  function updateStore({ nodeTypes, edgeTypes, minZoom, maxZoom, translateExtent, fitView }: {
+    nodeTypes?: NodeTypes,
+    edgeTypes?: EdgeTypes,
+    minZoom?: number,
+    maxZoom?: number,
+    translateExtent?: CoordinateExtent,
+    fitView?: boolean
+  }) {
     if (nodeTypes !== undefined) {
      store.setNodeTypes(nodeTypes);
     }
@@ -98,10 +125,23 @@
       store.setMaxZoom(maxZoom);
     }
 
+    if (translateExtent !== undefined) {
+      store.setTranslateExtent(translateExtent)
+    }
+
     if (fitView !== undefined) {
       store.fitViewOnInit.set(fitView);
     }
   }
+
+  $: updateStore({
+    nodeTypes,
+    edgeTypes,
+    minZoom,
+    maxZoom,
+    translateExtent,
+    fitView
+  })
 </script>
 
 <div
@@ -114,9 +154,21 @@
   {...$$restProps}
 >
   <KeyHandler {selectionKey} {deleteKey} />
-  <Zoom {initialViewport} {onMoveStart} {onMove} {onMoveEnd}>
+  <Zoom
+    {initialViewport}
+    {onMoveStart}
+    {onMove}
+    {onMoveEnd}
+    {panOnScrollMode}
+    {preventScrolling}
+    {zoomOnScroll}
+    {zoomOnDoubleClick}
+    {zoomOnPinch}
+    {panOnScroll}
+    {panOnDrag}
+  >
     <Pane on:pane:click>
-      <Viewport>
+      <ViewportComponent>
         <EdgeRenderer on:edge:click />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
@@ -130,7 +182,7 @@
           on:connect:end
         />
         <NodeSelection />
-      </Viewport>
+      </ViewportComponent>
       <UserSelection />
     </Pane>
   </Zoom>

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

@@ -9,7 +9,9 @@ import type {
   SnapGrid,
   OnMoveStart,
   OnMove,
-  OnMoveEnd
+  OnMoveEnd,
+  CoordinateExtent,
+  PanOnScrollMode
 } from '@reactflow/system';
 
 import type {
@@ -39,6 +41,14 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   nodesDraggable?: boolean;
   nodesConnectable?: boolean;
   elementsSelectable?: boolean;
+  translateExtent?: CoordinateExtent;
+  panOnScrollMode?: PanOnScrollMode;
+  preventScrolling?: boolean;
+  zoomOnScroll?: boolean;
+  zoomOnDoubleClick?: boolean;
+  zoomOnPinch?: boolean;
+  panOnScroll?: boolean;
+  panOnDrag?: boolean | number[];
 
   class?: string;
   style?: string;