refactor(store): add selectednodesbbox back to state

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/NodesSelection/NodesSelection.vue

@@ -9,13 +9,14 @@ interface Props {
 }
 const store = useStore()
 const props = defineProps<Props>()
-const selectedNodesBBox = getRectOfNodes(props.nodes)
+const selectedNodesBBox = computed(() => getRectOfNodes(props.nodes))
-const innerStyle = {
+const innerStyle = computed(() => ({
-  width: `${selectedNodesBBox.width}px`,
+  width: `${selectedNodesBBox.value.width}px`,
-  height: `${selectedNodesBBox.height}px`,
+  height: `${selectedNodesBBox.value.height}px`,
-  top: `${selectedNodesBBox.y}px`,
+  top: `${selectedNodesBBox.value.y}px`,
-  left: `${selectedNodesBBox.x}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 })

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: {},

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