fix: Selection not working twice in a row

package/src/components/NodesSelection/NodesSelection.vue

@@ -3,40 +3,41 @@ import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 
-const { id, store } = useVueFlow()
+const { store } = useVueFlow()
+
 const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes))
+
 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: store.getSelectedNodes })
-const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
-  nextTick(() => {
-    store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
-    store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
-  })
-}
-const onStop: DraggableEventListener = ({ event }) => {
-  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
-  store.getSelectedNodes.forEach((node) => (node.dragging = false))
-}
-const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
 
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
+
 const scale = controlledComputed(
   () => store.transform[2],
   () => store.transform[2],
 )
 const scaleDebounced = debouncedRef(scale, 5)
 
-const el = templateRef<HTMLDivElement>('el', null)
-onMounted(() => {
-  el.value.click()
-})
+watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
+
+const onStart: DraggableEventListener = ({ event }) =>
+  store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
+
+const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
+  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
+  store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
+}
+
+const onStop: DraggableEventListener = ({ event }) => {
+  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
+  store.getSelectedNodes.forEach((node) => (node.dragging = false))
+}
+
+const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
 </script>
 <script lang="ts">
 export default {
@@ -44,7 +45,7 @@ export default {
 }
 </script>
 <template>
-  <div ref="el" class="vue-flow__nodesselection vue-flow__container" :class="store.noPanClassName" :style="{ transform }">
+  <div class="vue-flow__nodesselection vue-flow__container" :class="store.noPanClassName" :style="{ transform }">
     <DraggableCore
       :grid="store.snapToGrid ? store.snapGrid : undefined"
       :enable-user-select-hack="false"

package/src/components/UserSelection/UserSelection.vue

@@ -19,6 +19,7 @@ const initialRect = () => ({
   y: 0,
   draw: false,
 })
+
 const rect = ref<Rect>(initialRect())
 
 const reset = () => {
@@ -27,6 +28,7 @@ const reset = () => {
   prevNodes.value = 0
   prevEdges.value = 0
 }
+
 const onMouseDown = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
   if (!mousePos) return
@@ -40,12 +42,14 @@ const onMouseDown = (event: MouseEvent) => {
     y: mousePos.y,
     draw: true,
   }
+
   store.userSelectionActive = true
   store.nodesSelectionActive = false
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!store.userSelectionActive) return
+  if (!store.userSelectionActive || !rect.value.draw) return
+
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
@@ -59,18 +63,23 @@ const onMouseMove = (event: MouseEvent) => {
     width: Math.abs(mousePos.x - startX),
     height: Math.abs(mousePos.y - startY),
   }
+
   const selectedNodes = getNodesInside(store.getNodes, rect.value, store.transform)
   const selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
+
   rect.value = nextUserSelectRect
+
   store.addSelectedNodes(selectedNodes)
   store.addSelectedEdges(selectedEdges)
+
   prevNodes.value = selectedNodes.length
   prevEdges.value = selectedEdges.length
 }
 
 const onMouseUp = () => {
   store.nodesSelectionActive = prevNodes.value > 0
-  reset()
+  rect.value = initialRect()
+  store.userSelectionActive = false
 }
 
 const onMouseLeave = () => {
@@ -78,11 +87,17 @@ const onMouseLeave = () => {
   reset()
 }
 
-useEventListener(el, 'mousedown', onMouseDown)
-useEventListener(el, 'mousemove', onMouseMove)
-useEventListener(el, 'click', onMouseUp)
-useEventListener(el, 'mouseup', onMouseUp)
-useEventListener(el, 'mouseleave', onMouseLeave)
+onMounted(() => {
+  useEventListener(el, 'mousedown', onMouseDown)
+  useEventListener(el, 'mousemove', onMouseMove)
+  useEventListener(el, 'click', onMouseUp)
+  useEventListener(el, 'mouseup', onMouseUp)
+  useEventListener(el, 'mouseleave', onMouseLeave)
+})
+
+onBeforeUnmount(() => {
+  reset()
+})
 </script>
 <script lang="ts">
 export default {