From 674a65788e85c0f0c38e4dd3aea434173391ebda Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 27 May 2022 21:38:40 +0200
Subject: [PATCH] feat(nodes): implement `useDrag` in `NodesSelection.vue`

---
 .../NodesSelection/NodesSelection.vue           | 17 ++++++++---------
 packages/vue-flow/src/types/store.ts            |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue b/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue
index 6a64e9cc..61858846 100644
--- a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue
+++ b/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) {
-    emits.selectionDragStart({ event: event.sourceEvent, nodes: getSelectedNodes })
+  onStart(event, node, nodes) {
+    emits.selectionDragStart({ event, node, nodes })
   },
-  onDrag(event, { dx, dy }) {
-    updateNodePosition({ diff: { x: dx, y: dy } })
-    emits.selectionDrag({ event: event.sourceEvent, nodes: getSelectedNodes })
+  onDrag(event, node, nodes) {
+    emits.selectionDrag({ event, node, nodes })
   },
-  onStop(event) {
-    emits.selectionDragStop({ event: event.sourceEvent, nodes: getSelectedNodes })
+  onStop(event, node, nodes) {
+    emits.selectionDragStop({ event, node, nodes })
   },
 })
 
diff --git a/packages/vue-flow/src/types/store.ts b/packages/vue-flow/src/types/store.ts
index 108d2d2e..2f9d0c60 100644
--- a/packages/vue-flow/src/types/store.ts
+++ b/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 {