fix: edges not selected on user selection

This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent da2e95a517
commit 271d793327
3 changed files with 8 additions and 11 deletions
@@ -23,7 +23,7 @@ const rect = ref<Rect>(initialRect())
const reset = () => { const reset = () => {
rect.value = initialRect() rect.value = initialRect()
store.selectionActive = false store.userSelectionActive = false
prevNodes.value = 0 prevNodes.value = 0
prevEdges.value = 0 prevEdges.value = 0
} }
@@ -40,12 +40,12 @@ const onMouseDown = (event: MouseEvent) => {
y: mousePos.y, y: mousePos.y,
draw: true, draw: true,
} }
store.selectionActive = true store.userSelectionActive = true
store.nodesSelectionActive = false store.nodesSelectionActive = false
} }
const onMouseMove = (event: MouseEvent) => { const onMouseMove = (event: MouseEvent) => {
if (!store.selectionActive) return if (!store.userSelectionActive) return
const mousePos = getMousePosition(event) const mousePos = getMousePosition(event)
if (!mousePos) return if (!mousePos) return
@@ -42,8 +42,8 @@ useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
}) })
useKeyPress(store.selectionKeyCode, (keyPressed) => { useKeyPress(store.selectionKeyCode, (keyPressed) => {
store.selectionActive = if (store.userSelectionActive && keyPressed) return
store.selectionActive === true && keyPressed ? true : keyPressed && (store.selectionActive || store.elementsSelectable) store.userSelectionActive = keyPressed && store.elementsSelectable
}) })
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -53,11 +53,8 @@ export default {
} }
</script> </script>
<template> <template>
<UserSelection v-if="store.selectionActive" :key="`user-selection-${id}`" /> <UserSelection v-if="store.userSelectionActive" :key="`user-selection-${id}`" />
<NodesSelection <NodesSelection v-if="store.nodesSelectionActive" :key="`nodes-selection-${id}`" />
v-if="store.getSelectedNodes.length && !store.selectionActive && store.nodesSelectionActive"
:key="`nodes-selction-${id}`"
/>
<div <div
:key="`flow-pane-${id}`" :key="`flow-pane-${id}`"
class="vue-flow__pane vue-flow__container" class="vue-flow__pane vue-flow__container"
+1 -1
View File
@@ -175,7 +175,7 @@ export default (state: State, getters: ComputedGetters): Actions => {
let changedEdges: EdgeChange[] let changedEdges: EdgeChange[]
if (state.multiSelectionActive) changedEdges = selectedEdgesIds.map((nodeId) => createSelectionChange(nodeId, true)) 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) if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges)
} }