refactor(store,selection)!: Remove selectedNodesBbox from store

# What's changed?

* Remove selectedNodesBbox from store state
* Will be handled internally by NodesSelection component

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>

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

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