From 271d7933274ba3f4cc6fd711ebf352a4deeb74b2 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 25 Mar 2022 18:07:48 +0100
Subject: [PATCH] fix: edges not selected on user selection

---
 src/components/UserSelection/UserSelection.vue |  6 +++---
 src/container/SelectionPane/SelectionPane.vue  | 11 ++++-------
 src/store/actions.ts                           |  2 +-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index d447edc7..e4c5feda 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/src/components/UserSelection/UserSelection.vue
@@ -23,7 +23,7 @@ const rect = ref<Rect>(initialRect())
 
 const reset = () => {
   rect.value = initialRect()
-  store.selectionActive = false
+  store.userSelectionActive = false
   prevNodes.value = 0
   prevEdges.value = 0
 }
@@ -40,12 +40,12 @@ const onMouseDown = (event: MouseEvent) => {
     y: mousePos.y,
     draw: true,
   }
-  store.selectionActive = true
+  store.userSelectionActive = true
   store.nodesSelectionActive = false
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!store.selectionActive) return
+  if (!store.userSelectionActive) return
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index a82b1c10..d35e73c2 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/src/container/SelectionPane/SelectionPane.vue
@@ -42,8 +42,8 @@ useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
 })
 
 useKeyPress(store.selectionKeyCode, (keyPressed) => {
-  store.selectionActive =
-    store.selectionActive === true && keyPressed ? true : keyPressed && (store.selectionActive || store.elementsSelectable)
+  if (store.userSelectionActive && keyPressed) return
+  store.userSelectionActive = keyPressed && store.elementsSelectable
 })
 </script>
 <script lang="ts">
@@ -53,11 +53,8 @@ export default {
 }
 </script>
 <template>
-  <UserSelection v-if="store.selectionActive" :key="`user-selection-${id}`" />
-  <NodesSelection
-    v-if="store.getSelectedNodes.length && !store.selectionActive && store.nodesSelectionActive"
-    :key="`nodes-selction-${id}`"
-  />
+  <UserSelection v-if="store.userSelectionActive" :key="`user-selection-${id}`" />
+  <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selection-${id}`" />
   <div
     :key="`flow-pane-${id}`"
     class="vue-flow__pane vue-flow__container"
diff --git a/src/store/actions.ts b/src/store/actions.ts
index e01854d7..48a603b0 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -175,7 +175,7 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
     let changedEdges: EdgeChange[]
     if (state.multiSelectionActive) changedEdges = selectedEdgesIds.map((nodeId) => createSelectionChange(nodeId, true))
-    else changedEdges = getSelectionChanges(state.nodes, selectedEdgesIds)
+    else changedEdges = getSelectionChanges(state.edges, selectedEdgesIds)
 
     if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges)
   }