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/components/NodeSelection/NodeSelection.svelte

@@ -5,7 +5,8 @@
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
 
-  const { selectionRectMode, nodes, transform, snapGrid, updateNodePositions } = useStore();
+  const store = useStore();
+  const { selectionRectMode, nodes } = store;
 
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: rect = getRectOfNodes(selectedNodes);
@@ -15,7 +16,7 @@
   <div
     class="selection-wrapper nopan"
     style={`width: ${rect.width}px; height: ${rect.height}px; transform: translate(${rect.x}px, ${rect.y}px)`}
-    use:drag={{ nodes, snapGrid, transform, updateNodePositions }}
+    use:drag={{ disabled: false, store }}
   />
   <Selection
     isVisible={$selectionRectMode === 'nodes'}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -31,7 +31,8 @@
   let className: string = '';
   export { className as class };
 
-  const { nodes, transform, nodeTypes, snapGrid, updateNodePositions, addSelectedNodes } = useStore();
+  const store = useStore();
+  const { nodes, nodeTypes, addSelectedNodes } = store;
 
   let nodeRef: HTMLDivElement;
   const nodeTypeValid = !!$nodeTypes[type!];
@@ -74,7 +75,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  use:drag={{ nodeId: id, nodes, snapGrid, transform, updateNodePositions }}
+  use:drag={{ nodeId: id, isSelectable: selectable, disabled: false, handleSelector: undefined, noDragClassName: 'nodrag', store }}
   bind:this={nodeRef}
   data-id={id}
   class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}