From 8539731a8acba83a5b39b41e1745d75bd5e25ae1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Jul 2024 18:58:04 +0200
Subject: [PATCH] fix(core): dispatch click if drag move was attempted (#1534)

* fix(core): dispatch click if drag move was attempted

* chore(core): cleanup
---
 .changeset/moody-apricots-rhyme.md               |  5 +++++
 .../core/src/components/Nodes/NodeWrapper.ts     |  2 +-
 packages/core/src/composables/useDrag.ts         | 16 ++++++++--------
 3 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/moody-apricots-rhyme.md

diff --git a/.changeset/moody-apricots-rhyme.md b/.changeset/moody-apricots-rhyme.md
new file mode 100644
index 00000000..43b18fab
--- /dev/null
+++ b/.changeset/moody-apricots-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Dispatch click if drag move was attempted and threshold was not crossed, ignoring any movement that's too small to be considered a drag at all
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
index 9fb09dc0..9c443ea4 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.ts
+++ b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -130,7 +130,7 @@ const NodeWrapper = defineComponent({
         emit.dragStop(event)
       },
       onClick(event) {
-        emit.click({ node, event })
+        onSelectNode(event)
       },
     })
 
diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index 89024a7f..c84f8f5e 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -73,7 +73,6 @@ 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
@@ -218,9 +217,6 @@ export function useDrag(params: UseDragParams) {
       if (distance > nodeDragThreshold.value) {
         startDrag(event, nodeEl)
       }
-
-      // we have to ignore very small movements as they would be picked up as regular clicks even though a potential drag might have been registered as well
-      dragAborted = distance >= 0.5 && distance < nodeDragThreshold.value
     }
 
     // skip events without movement
@@ -234,10 +230,15 @@ export function useDrag(params: UseDragParams) {
 
   const eventEnd = (event: UseDragEvent) => {
     if (!dragStarted) {
-      // 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) {
+      const pointerPos = getPointerPosition(event)
+
+      const x = pointerPos.xSnapped - (lastPos.x ?? 0)
+      const y = pointerPos.ySnapped - (lastPos.y ?? 0)
+      const distance = Math.sqrt(x * x + y * y)
+
+      // dispatch a click event if the node was attempted to be dragged but the threshold was not exceeded
+      if (distance !== 0 && distance <= nodeDragThreshold.value) {
         onClick?.(event.sourceEvent)
-        dragAborted = false
       }
 
       return
@@ -246,7 +247,6 @@ export function useDrag(params: UseDragParams) {
     dragging.value = false
     autoPanStarted = false
     dragStarted = false
-    dragAborted = false
 
     cancelAnimationFrame(autoPanId)