fix: edges not selected on user selection
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user