From f9671b1ec4c58d32e2b46e8fa2dd244b1ccf4a47 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 29 Apr 2022 12:23:48 +0200
Subject: [PATCH] refactor(store,selection)!: Remove selectedNodesBbox from
 store

# What's changed?

* Remove selectedNodesBbox from store state
* Will be handled internally by NodesSelection component
---
 .../NodesSelection/NodesSelection.vue          | 18 +++++++-----------
 packages/vue-flow/src/store/state.ts           |  1 -
 packages/vue-flow/src/types/store.ts           |  1 -
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue b/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue
index c17fcb9e..6a64e9cc 100644
--- a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue
+++ b/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue
@@ -4,7 +4,7 @@ import { getRectOfNodes } from '../../utils'
 
 const { emits, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, updateNodePosition, noPanClassName } = $(useVueFlow())
 
-const el = templateRef<HTMLDivElement>('el', null)
+const el = ref()
 
 useDrag({
   el,
@@ -12,8 +12,8 @@ useDrag({
     emits.selectionDragStart({ event: event.sourceEvent, nodes: getSelectedNodes })
   },
   onDrag(event, { dx, dy }) {
-    emits.selectionDrag({ event: event.sourceEvent, nodes: getSelectedNodes })
     updateNodePosition({ diff: { x: dx, y: dy } })
+    emits.selectionDrag({ event: event.sourceEvent, nodes: getSelectedNodes })
   },
   onStop(event) {
     emits.selectionDragStop({ event: event.sourceEvent, nodes: getSelectedNodes })
@@ -29,14 +29,6 @@ const innerStyle = computed(() => ({
   left: `${selectedNodesBBox.x}px`,
 }))
 
-const transform = computed(() => `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`)
-
-watch($$(selectedNodesBBox), (v) => {
-  setState({
-    selectedNodesBbox: v,
-  })
-})
-
 const onContextMenu = (event: MouseEvent) => emits.selectionContextMenu({ event, nodes: getSelectedNodes })
 </script>
 
@@ -47,7 +39,11 @@ export default {
 </script>
 
 <template>
-  <div class="vue-flow__nodesselection vue-flow__container" :class="noPanClassName" :style="{ transform }">
+  <div
+    class="vue-flow__nodesselection vue-flow__container"
+    :class="noPanClassName"
+    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
+  >
     <div ref="el" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
   </div>
 </template>
diff --git a/packages/vue-flow/src/store/state.ts b/packages/vue-flow/src/store/state.ts
index 47937fdc..e1f532c6 100644
--- a/packages/vue-flow/src/store/state.ts
+++ b/packages/vue-flow/src/store/state.ts
@@ -73,7 +73,6 @@ const defaultState = (): State => ({
 
   nodesSelectionActive: false,
   userSelectionActive: false,
-  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
 
   defaultMarkerColor: '#b1b1b7',
   connectionLineStyle: {},
diff --git a/packages/vue-flow/src/types/store.ts b/packages/vue-flow/src/types/store.ts
index cd0a086d..75d41071 100644
--- a/packages/vue-flow/src/types/store.ts
+++ b/packages/vue-flow/src/types/store.ts
@@ -58,7 +58,6 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   onlyRenderVisibleElements: boolean
   defaultPosition: [number, number]
 
-  selectedNodesBbox: Rect
   nodesSelectionActive: boolean
   userSelectionActive: boolean
   multiSelectionActive: boolean