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

refactor: remove updateNodePosDiff from node selection

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-25 15:21:36 +01:00
parent 729ae4c902
commit ac2e2d5f0a
1 changed files with 15 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NodesSelection/NodesSelection.vue
+15 -31
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Draggable, DraggableEventListener } from '@braks/revue-draggable' import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
import { useStore } from '../../composables' import { useStore } from '../../composables'
import { FlowElements, GraphNode } from '../../types' import { FlowElements } from '../../types'
import { getRectOfNodes, isGraphNode } from '../../utils' import { getRectOfNodes } from '../../utils'
interface NodesSelectionProps { interface NodesSelectionProps {
selectedElements: FlowElements selectedElements: FlowElements
@@ -11,46 +11,30 @@ interface NodesSelectionProps {
const store = useStore() const store = useStore()
const props = defineProps<NodesSelectionProps>() const props = defineProps<NodesSelectionProps>()
const selectedNodes: GraphNode[] = props.selectedElements ? props.selectedElements.filter(isGraphNode) : [] const selectedNodesBBox = getRectOfNodes(store.getSelectedNodes)
const selectedNodesBBox = getRectOfNodes(selectedNodes)
const innerStyle = { const innerStyle = {
width: `${selectedNodesBBox.width}px`, width: `${selectedNodesBBox.width}px`,
height: `${selectedNodesBBox.height}px`, height: `${selectedNodesBBox.height}px`,
top: `${selectedNodesBBox.y}px`, top: `${selectedNodesBBox.y}px`,
left: `${selectedNodesBBox.x}px`, left: `${selectedNodesBBox.x}px`,
} }
const onStart: DraggableEventListener = ({ event }) =>
const onStart: DraggableEventListener = ({ event }) => { store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
const nodes = selectedNodes
store.hooks.selectionDragStart.trigger({ event, nodes })
}
const onDrag: DraggableEventListener = ({ event, data }) => { const onDrag: DraggableEventListener = ({ event, data }) => {
const nodes = selectedNodes store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
store.hooks.selectionDrag.trigger({ event, nodes }) store.getSelectedNodes.forEach((node) => {
store.updateNodePosDiff({ node.position = {
diff: { x: node.position.x + data.deltaX,
x: data.deltaX, y: node.position.y + data.deltaY,
y: data.deltaY, }
}, node.__vf.isDragging = true
isDragging: true,
}) })
} }
const onStop: DraggableEventListener = ({ event }) => { const onStop: DraggableEventListener = ({ event }) => {
const nodes = selectedNodes store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
store.hooks.selectionDragStop.trigger({ event, nodes }) store.getSelectedNodes.forEach((node) => (node.__vf.isDragging = false))
store.updateNodePosDiff({
isDragging: false,
})
}
const onContextMenu = (event: MouseEvent) => {
const nodes = selectedNodes
store.hooks.selectionContextMenu.trigger({ event, nodes })
} }
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 transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
</script> </script>