From 4065354c109a30947dfc9801e498113297c6ea1f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 12:04:38 +0100
Subject: [PATCH] refactor(store): add selectednodesbbox back to state

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/NodesSelection/NodesSelection.vue | 15 ++++++++-------
 src/store/state.ts                               |  1 +
 src/types/store.ts                               |  3 ++-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index a6f4b1b9..a2902abf 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -9,13 +9,14 @@ interface Props {
 }
 const store = useStore()
 const props = defineProps<Props>()
-const selectedNodesBBox = getRectOfNodes(props.nodes)
-const innerStyle = {
-  width: `${selectedNodesBBox.width}px`,
-  height: `${selectedNodesBBox.height}px`,
-  top: `${selectedNodesBBox.y}px`,
-  left: `${selectedNodesBBox.x}px`,
-}
+const selectedNodesBBox = computed(() => getRectOfNodes(props.nodes))
+const innerStyle = computed(() => ({
+  width: `${selectedNodesBBox.value.width}px`,
+  height: `${selectedNodesBBox.value.height}px`,
+  top: `${selectedNodesBBox.value.y}px`,
+  left: `${selectedNodesBBox.value.x}px`,
+}))
+watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
 const onStart: DraggableEventListener = ({ event }) => store.hooks.selectionDragStart.trigger({ event, nodes: props.nodes })
 const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
   store.hooks.selectionDrag.trigger({ event, nodes: props.nodes })
diff --git a/src/store/state.ts b/src/store/state.ts
index 60b29224..4a28f927 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -62,6 +62,7 @@ export const initialState = (): FlowState => ({
 
   nodesSelectionActive: false,
   selectionActive: false,
+  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
 
   defaultMarkerColor: '#b1b1b7',
   connectionLineStyle: {},
diff --git a/src/types/store.ts b/src/types/store.ts
index 106f6387..63b8b95f 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -1,6 +1,6 @@
 import { ComputedRef, ToRefs } from 'vue'
 import { UnwrapNestedRefs } from '@vue/reactivity'
-import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, SnapGrid, Transform, XYPosition } from './flow'
+import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, Transform, XYPosition } from './flow'
 import { HandleType, EdgeComponent, NodeComponent, NodeTypes, EdgeTypes } from './components'
 import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
 import { Edge, GraphEdge } from './edge'
@@ -31,6 +31,7 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'>
   onlyRenderVisibleElements: boolean
   defaultPosition: [number, number]
 
+  selectedNodesBbox: Rect
   selectedNodes: GraphNode[]
   selectedEdges: GraphEdge[]
   nodesSelectionActive: boolean