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"