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

update: use draggablecore for nodes selection

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent f0f68ff63f
commit a76e2cacf4
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NodesSelection/NodesSelection.vue
+14 -18
View File
@@ -1,17 +1,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Draggable, DraggableEventListener } from '@braks/revue-draggable' import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable'
import { useVueFlow } from '../../composables' import { useVueFlow } from '../../composables'
import { getRectOfNodes } from '../../utils' import { getRectOfNodes } from '../../utils'
const { id, store } = useVueFlow() const { id, store } = useVueFlow()
const selectedNodesBBox = getRectOfNodes(store.getSelectedNodes) const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes))
const innerStyle = { const innerStyle = computed(() => ({
width: `${selectedNodesBBox.width}px`, width: `${selectedNodesBBox.value.width}px`,
height: `${selectedNodesBBox.height}px`, height: `${selectedNodesBBox.value.height}px`,
top: `${selectedNodesBBox.y}px`, top: `${selectedNodesBBox.value.y}px`,
left: `${selectedNodesBBox.x}px`, left: `${selectedNodesBBox.value.x}px`,
} }))
store.selectedNodesBbox = selectedNodesBBox watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
const onStart: DraggableEventListener = ({ event }) => const onStart: DraggableEventListener = ({ event }) =>
store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes }) store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => { const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
@@ -24,6 +24,7 @@ const onStop: DraggableEventListener = ({ event }) => {
} }
const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes }) 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( const scale = controlledComputed(
() => store.transform[2], () => store.transform[2],
() => store.transform[2], () => store.transform[2],
@@ -35,8 +36,8 @@ export default {
} }
</script> </script>
<template> <template>
<div :key="`nodesselection-${id}`" class="vue-flow__nodesselection vue-flow__container"> <div class="vue-flow__nodesselection vue-flow__container" :style="{ transform }">
<Draggable <DraggableCore
:grid="store.snapToGrid ? store.snapGrid : undefined" :grid="store.snapToGrid ? store.snapGrid : undefined"
:enable-user-select-hack="false" :enable-user-select-hack="false"
:scale="scale" :scale="scale"
@@ -44,12 +45,7 @@ export default {
@move="onDrag" @move="onDrag"
@stop="onStop" @stop="onStop"
> >
<div <div class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
:key="`vue-flow-nodesselection-rect-${id}`" </DraggableCore>
class="vue-flow__nodesselection-rect"
:style="innerStyle"
@contextmenu="onContextMenu"
/>
</Draggable>
</div> </div>
</template> </template>