diff --git a/.changeset/giant-pears-agree.md b/.changeset/giant-pears-agree.md new file mode 100644 index 00000000..bf762196 --- /dev/null +++ b/.changeset/giant-pears-agree.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Prevent duplicate node click event by checking if drag was actually aborted before emitting node-click diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index 54b45bc7..9fb09dc0 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -120,14 +120,17 @@ const NodeWrapper = defineComponent({ disabled: () => !isDraggable.value, selectable: isSelectable, dragHandle: () => node.dragHandle, - onStart(args) { - emit.dragStart(args) + onStart(event) { + emit.dragStart(event) }, - onDrag(args) { - emit.drag(args) + onDrag(event) { + emit.drag(event) }, - onStop(args) { - emit.dragStop(args) + onStop(event) { + emit.dragStop(event) + }, + onClick(event) { + emit.click({ node, event }) }, }) diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts index ad3a9969..7e56e9cd 100644 --- a/packages/core/src/composables/useDrag.ts +++ b/packages/core/src/composables/useDrag.ts @@ -18,9 +18,10 @@ import { useGetPointerPosition, useVueFlow } from '.' export type UseDragEvent = D3DragEvent interface UseDragParams { - onStart: (args: Omit) => void - onDrag: (event: Omit) => void - onStop: (event: Omit) => void + onStart: (event: NodeDragEvent) => void + onDrag: (event: NodeDragEvent) => void + onStop: (event: NodeDragEvent) => void + onClick?: (event: MouseEvent) => void el: Ref disabled?: MaybeRefOrGetter selectable?: MaybeRefOrGetter @@ -57,7 +58,7 @@ export function useDrag(params: UseDragParams) { emits, } = useVueFlow() - const { onStart, onDrag, onStop, el, disabled, id, selectable, dragHandle } = params + const { onStart, onDrag, onStop, onClick, el, disabled, id, selectable, dragHandle } = params const dragging = ref(false) @@ -71,6 +72,7 @@ export function useDrag(params: UseDragParams) { let mousePosition: XYPosition = { x: 0, y: 0 } let dragEvent: MouseEvent | null = null let dragStarted = false + let dragAborted = false let autoPanId = 0 let autoPanStarted = false @@ -223,15 +225,17 @@ export function useDrag(params: UseDragParams) { mousePosition = getEventPosition(event.sourceEvent, containerBounds!) updateNodes(pointerPos) + } else { + dragAborted = true } } const eventEnd = (event: UseDragEvent) => { if (!dragStarted) { - const node = findNode(id) - - if (node) { - emits.nodeClick({ node, event: event.sourceEvent }) + // if the node was dragged without any movement, and we're not dragging a selection, we want to emit the node-click event + if (dragAborted && onClick) { + onClick?.(event.sourceEvent) + dragAborted = false } return @@ -240,6 +244,8 @@ export function useDrag(params: UseDragParams) { dragging.value = false autoPanStarted = false dragStarted = false + dragAborted = false + cancelAnimationFrame(autoPanId) if (dragItems.length) {