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/store/initial-store.ts

@@ -1,14 +1,14 @@
 import { readable, writable } from 'svelte/store';
 import {
   SelectionMode,
-  type D3ZoomInstance,
-  type D3SelectionInstance,
   ConnectionMode,
   ConnectionLineType,
   type SelectionRect,
   type Transform,
   type SnapGrid,
-  type MarkerProps
+  type MarkerProps,
+  type PanZoomInstance,
+  type CoordinateExtent
 } from '@reactflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -27,6 +27,7 @@ import type {
   Node,
   IsValidConnection
 } from '$lib/types';
+import { infiniteExtent } from '@reactflow/utils';
 
 export const initConnectionData = {
   nodeId: null,
@@ -58,12 +59,12 @@ export const initialStoreState = {
   width: writable<number>(500),
   minZoom: writable<number>(0.5),
   maxZoom: writable<number>(2),
+  nodeExtent: writable<CoordinateExtent>(infiniteExtent),
+  translateExtent: writable<CoordinateExtent>(infiniteExtent),
+  autoPanOnNodeDrag: writable<boolean>(true),
   fitViewOnInit: writable<boolean>(false),
   fitViewOnInitDone: writable<boolean>(false),
-  d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
-    zoom: null,
-    selection: null
-  }),
+  panZoom: writable<PanZoomInstance | null>(null),
   snapGrid: writable<SnapGrid | null>(null),
   dragging: writable<boolean>(false),
   selectionRect: writable<SelectionRect | null>(null),
@@ -85,6 +86,7 @@ export const initialStoreState = {
   nodesDraggable: writable<boolean>(true),
   nodesConnectable: writable<boolean>(true),
   elementsSelectable: writable<boolean>(true),
+  selectNodesOnDrag: writable<boolean>(true),
   markers: readable<MarkerProps[]>([]),
   defaultMarkerColor: writable<string>('#b1b1b7')
 };