refactor(types,flow)!: Use reactivity transform and remove store property

# What's changed?

* Remove store property from usevueflow return value
* All previously available properties are still there, just not nested inside an additional store object to avoid confusion + duplicates
* use reactivity transform to get rid of .value calls

package/src/components/UserSelection/UserSelection.vue

@@ -5,11 +5,11 @@ import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
 
-const { store } = useVueFlow()
+const { userSelectionActive, setState, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } = $(useVueFlow())
 const el = templateRef('user-selection', null)
 
-const prevNodes = ref(0)
-const prevEdges = ref(0)
+let prevNodes = $ref(0)
+let prevEdges = $ref(0)
 const initialRect = () => ({
   width: 0,
   height: 0,
@@ -20,20 +20,23 @@ const initialRect = () => ({
   draw: false,
 })
 
-const rect = ref<Rect>(initialRect())
+let rect = $ref<Rect>(initialRect())
 
 const reset = () => {
-  rect.value = initialRect()
-  store.userSelectionActive = false
-  prevNodes.value = 0
-  prevEdges.value = 0
+  rect = initialRect()
+  prevNodes = 0
+  prevEdges = 0
+
+  setState({
+    userSelectionActive: false,
+  })
 }
 
 const onMouseDown = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  rect.value = {
+  rect = {
     width: 0,
     height: 0,
     startX: mousePos.x,
@@ -43,47 +46,55 @@ const onMouseDown = (event: MouseEvent) => {
     draw: true,
   }
 
-  store.userSelectionActive = true
-  store.nodesSelectionActive = false
+  setState({
+    userSelectionActive: true,
+    nodesSelectionActive: false,
+  })
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!store.userSelectionActive || !rect.value.draw) return
+  if (!userSelectionActive || !rect.draw) return
 
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  const startX = rect.value.startX
-  const startY = rect.value.startY
+  const startX = rect.startX
+  const startY = rect.startY
 
   const nextUserSelectRect: Rect = {
-    ...rect.value,
-    x: mousePos.x < startX ? mousePos.x : rect.value.x,
-    y: mousePos.y < startY ? mousePos.y : rect.value.y,
+    ...rect,
+    x: mousePos.x < startX ? mousePos.x : rect.x,
+    y: mousePos.y < startY ? mousePos.y : rect.y,
     width: Math.abs(mousePos.x - startX),
     height: Math.abs(mousePos.y - startY),
   }
 
-  const selectedNodes = getNodesInside(store.getNodes, rect.value, store.viewport)
-  const selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
+  const selectedNodes = getNodesInside(getNodes, rect, viewport)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges)
 
-  rect.value = nextUserSelectRect
+  rect = nextUserSelectRect
 
-  store.addSelectedNodes(selectedNodes)
-  store.addSelectedEdges(selectedEdges)
+  addSelectedNodes(selectedNodes)
+  addSelectedEdges(selectedEdges)
 
-  prevNodes.value = selectedNodes.length
-  prevEdges.value = selectedEdges.length
+  prevNodes = selectedNodes.length
+  prevEdges = selectedEdges.length
 }
 
 const onMouseUp = () => {
-  store.nodesSelectionActive = prevNodes.value > 0
-  rect.value = initialRect()
-  store.userSelectionActive = false
+  rect = initialRect()
+
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+    userSelectionActive: false,
+  })
 }
 
 const onMouseLeave = () => {
-  store.nodesSelectionActive = false
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+  })
+
   reset()
 }