From ec0f3ef0e428cceafc63da9523128f34aeb46d48 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Apr 2022 10:59:50 +0200
Subject: [PATCH] fix: Selection not working twice in a row

---
 .../NodesSelection/NodesSelection.vue         | 41 ++++++++++---------
 .../UserSelection/UserSelection.vue           | 29 +++++++++----
 .../container/SelectionPane/SelectionPane.vue |  4 +-
 package/src/store/actions.ts                  | 36 +++++++++-------
 4 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/package/src/components/NodesSelection/NodesSelection.vue b/package/src/components/NodesSelection/NodesSelection.vue
index ebda4ca9..121292e1 100644
--- a/package/src/components/NodesSelection/NodesSelection.vue
+++ b/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"
diff --git a/package/src/components/UserSelection/UserSelection.vue b/package/src/components/UserSelection/UserSelection.vue
index e4c5feda..0996bb62 100644
--- a/package/src/components/UserSelection/UserSelection.vue
+++ b/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 {
diff --git a/package/src/container/SelectionPane/SelectionPane.vue b/package/src/container/SelectionPane/SelectionPane.vue
index d35e73c2..2403bfc3 100644
--- a/package/src/container/SelectionPane/SelectionPane.vue
+++ b/package/src/container/SelectionPane/SelectionPane.vue
@@ -41,7 +41,7 @@ useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
   store.multiSelectionActive = keyPressed
 })
 
-useKeyPress(store.selectionKeyCode, (keyPressed) => {
+const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPressed) => {
   if (store.userSelectionActive && keyPressed) return
   store.userSelectionActive = keyPressed && store.elementsSelectable
 })
@@ -53,7 +53,7 @@ export default {
 }
 </script>
 <template>
-  <UserSelection v-if="store.userSelectionActive" :key="`user-selection-${id}`" />
+  <UserSelection v-if="selectionKeyPressed" :key="`user-selection-${id}`" />
   <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selection-${id}`" />
   <div
     :key="`flow-pane-${id}`"
diff --git a/package/src/store/actions.ts b/package/src/store/actions.ts
index a46b0017..6aa991e7 100644
--- a/package/src/store/actions.ts
+++ b/package/src/store/actions.ts
@@ -100,7 +100,7 @@ const createGraphNodes = (nodes: Node[], getNode: Getters['getNode'], currGraphN
 
   graphNodes.forEach((node) => {
     if (node.parentNode && ![...graphNodes, ...currGraphNodes].find((n) => n.id === node.parentNode)) {
-      throw new Error(`Parent node ${node.parentNode} not found`)
+      console.warn(`[vueflow]: Parent node ${node.parentNode} not found`)
     }
 
     if (node.parentNode || parentNodes[node.id]) {
@@ -223,28 +223,35 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
   const setNodes: Actions['setNodes'] = (nodes, extent?: CoordinateExtent) => {
     if (!state.initialized && !nodes.length) return
+    if (!state.nodes) state.nodes = []
     state.nodes = createGraphNodes(nodes, getters.getNode.value, state.nodes, extent ?? state.nodeExtent)
   }
 
   const setEdges: Actions['setEdges'] = (edges) => {
     if (!state.initialized && !edges.length) return
-    state.edges = edges.map((edge) => {
+
+    state.edges = edges.reduce<GraphEdge[]>((res, edge) => {
       const sourceNode = getters.getNode.value(edge.source)!
       const targetNode = getters.getNode.value(edge.target)!
-      if (!sourceNode || typeof sourceNode === 'undefined')
-        console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-      if (!targetNode || typeof targetNode === 'undefined')
-        console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
 
-      return {
+      const missingSource = !sourceNode || typeof sourceNode === 'undefined'
+      const missingTarget = !targetNode || typeof targetNode === 'undefined'
+      if (missingSource) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
+      if (missingTarget) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
+
+      const storedEdge = getters.getEdge.value(edge.id)
+
+      res.push({
         ...parseEdge(edge, {
           ...state.defaultEdgeOptions,
-          ...getters.getEdge.value(edge.id),
+          ...storedEdge,
         }),
         sourceNode,
         targetNode,
-      }
-    })
+      })
+
+      return res
+    }, [])
   }
 
   const setElements: Actions['setElements'] = (elements, extent) => {
@@ -263,10 +270,11 @@ export default (state: State, getters: ComputedGetters): Actions => {
       if (edge) {
         const sourceNode = getters.getNode.value(edge.source)!
         const targetNode = getters.getNode.value(edge.target)!
-        if (!sourceNode || typeof sourceNode === 'undefined')
-          console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
-        if (!targetNode || typeof targetNode === 'undefined')
-          console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
+
+        const missingSource = !sourceNode || typeof sourceNode === 'undefined'
+        const missingTarget = !targetNode || typeof targetNode === 'undefined'
+        if (missingSource) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
+        if (missingTarget) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
 
         state.edges.push({
           ...state.defaultEdgeOptions,