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

fix(examples): interaction example firing events wrong

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-24 00:21:52 +01:00
parent f5dcd5108c
commit f4559398f6
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
examples/Interaction/InteractionExample.vue
View File

@@ -22,16 +22,7 @@ const initialElements: Elements = [
{ id: 'e1-3', source: '1', target: '3' },
]
const onNodeDragStart = ({ node }) => console.log('drag start', node)
const onNodeDragStop = ({ node }) => console.log('drag stop', node)
const onElementClick = ({ element }) => console.log('click', element)
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event)
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event)
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event)
const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform)
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const isSelectable = ref(false)
const isDraggable = ref(false)
@@ -45,6 +36,15 @@ const paneMoveable = ref(true)
const captureZoomClick = ref(false)
const captureZoomScroll = ref(false)
const captureElementClick = ref(false)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onNodeDragStart = ({ node }) => console.log('drag start', node)
const onNodeDragStop = ({ node }) => console.log('drag stop', node)
const onElementClick = ({ element }) => (captureElementClick.value ? console.log('click', element) : undefined)
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event)
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event)
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event)
const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform)
</script>
<template>
<VueFlow
@@ -59,12 +59,12 @@ const captureElementClick = ref(false)
:zoom-on-double-click="zoomOnDoubleClick"
:pane-moveable="paneMoveable"
@connect="onConnect"
@element-click="captureElementClick ? onElementClick : undefined"
@element-click="onElementClick"
@node-drag-start="onNodeDragStart"
@node-drag-stop="onNodeDragStop"
@pane-click="captureZoomClick ? onPaneClick : undefined"
@pane-scroll="captureZoomScroll ? onPaneScroll : undefined"
@pane-context-menu="captureZoomClick ? onPaneContextMenu : undefined"
@pane-click="(e) => (captureZoomClick ? onPaneClick(e) : undefined)"
@pane-scroll="(e) => (captureZoomScroll ? onPaneScroll(e) : undefined)"
@pane-context-menu="(e) => (captureZoomClick ? onPaneContextMenu(e) : undefined)"
@move-end="onMoveEnd"
>
<MiniMap />