From ac2e2d5f0ac0e753e2a15243f51bec3e45440474 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 24 Nov 2021 12:41:19 +0100
Subject: [PATCH] refactor: remove updateNodePosDiff from node selection

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../NodesSelection/NodesSelection.vue         | 46 ++++++-------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index 8babcab9..fd0f7ec5 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { FlowElements, GraphNode } from '../../types'
-import { getRectOfNodes, isGraphNode } from '../../utils'
+import { FlowElements } from '../../types'
+import { getRectOfNodes } from '../../utils'
 
 interface NodesSelectionProps {
   selectedElements: FlowElements
@@ -11,46 +11,30 @@ interface NodesSelectionProps {
 const store = useStore()
 
 const props = defineProps<NodesSelectionProps>()
-const selectedNodes: GraphNode[] = props.selectedElements ? props.selectedElements.filter(isGraphNode) : []
-
-const selectedNodesBBox = getRectOfNodes(selectedNodes)
-
+const selectedNodesBBox = getRectOfNodes(store.getSelectedNodes)
 const innerStyle = {
   width: `${selectedNodesBBox.width}px`,
   height: `${selectedNodesBBox.height}px`,
   top: `${selectedNodesBBox.y}px`,
   left: `${selectedNodesBBox.x}px`,
 }
-
-const onStart: DraggableEventListener = ({ event }) => {
-  const nodes = selectedNodes
-  store.hooks.selectionDragStart.trigger({ event, nodes })
-}
-
+const onStart: DraggableEventListener = ({ event }) =>
+  store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
 const onDrag: DraggableEventListener = ({ event, data }) => {
-  const nodes = selectedNodes
-  store.hooks.selectionDrag.trigger({ event, nodes })
-  store.updateNodePosDiff({
-    diff: {
-      x: data.deltaX,
-      y: data.deltaY,
-    },
-    isDragging: true,
+  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
+  store.getSelectedNodes.forEach((node) => {
+    node.position = {
+      x: node.position.x + data.deltaX,
+      y: node.position.y + data.deltaY,
+    }
+    node.__vf.isDragging = true
   })
 }
-
 const onStop: DraggableEventListener = ({ event }) => {
-  const nodes = selectedNodes
-  store.hooks.selectionDragStop.trigger({ event, nodes })
-  store.updateNodePosDiff({
-    isDragging: false,
-  })
-}
-
-const onContextMenu = (event: MouseEvent) => {
-  const nodes = selectedNodes
-  store.hooks.selectionContextMenu.trigger({ event, nodes })
+  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
+  store.getSelectedNodes.forEach((node) => (node.__vf.isDragging = false))
 }
+const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
 
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 </script>