feat(nodes): implement useDrag in NodesSelection.vue

packages/vue-flow/src/components/NodesSelection/NodesSelection.vue

@@ -1,22 +1,21 @@
 <script lang="ts" setup>
-import { useVueFlow, useDrag } from '../../composables'
+import { useDrag, useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 
-const { emits, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, updateNodePosition, noPanClassName } = $(useVueFlow())
+const { emits, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, noPanClassName } = $(useVueFlow())
 
 const el = ref()
 
 useDrag({
   el,
-  onStart(event) {
+  onStart(event, node, nodes) {
-    emits.selectionDragStart({ event: event.sourceEvent, nodes: getSelectedNodes })
+    emits.selectionDragStart({ event, node, nodes })
   },
-  onDrag(event, { dx, dy }) {
+  onDrag(event, node, nodes) {
-    updateNodePosition({ diff: { x: dx, y: dy } })
+    emits.selectionDrag({ event, node, nodes })
-    emits.selectionDrag({ event: event.sourceEvent, nodes: getSelectedNodes })
   },
-  onStop(event) {
+  onStop(event, node, nodes) {
-    emits.selectionDragStop({ event: event.sourceEvent, nodes: getSelectedNodes })
+    emits.selectionDragStop({ event, node, nodes })
   },
 })
 

packages/vue-flow/src/types/store.ts

@@ -6,7 +6,7 @@ import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport } from './zoom'
 import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
-import type { EdgeChange, NodeChange, NodeDragItem } from "./changes";
+import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
 import type { HandleType, StartHandle } from './handle'
 
 export interface UpdateNodeDimensionsParams {