alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Selection not working twice in a row

Browse Source
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent bf2c77fb59
commit ec0f3ef0e4
4 changed files with 67 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/components/NodesSelection/NodesSelection.vue
+21 -20
View File
@@ -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
+22 -7
View File
@@ -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 {
package/src/container/SelectionPane/SelectionPane.vue
+2 -2
View File
@@ -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}`"
package/src/store/actions.ts
+22 -14
View File
@@ -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,