From 2a35c65a02c6c8aec6b005ac3e72988f996669c4 Mon Sep 17 00:00:00 2001 From: Ze-Zheng Wu Date: Mon, 1 Sep 2025 20:04:21 +0800 Subject: [PATCH 1/3] fix: node selection instability by using client coordinates for drag threshold --- .changeset/chilly-beans-juggle.md | 5 +++++ packages/system/src/xydrag/XYDrag.ts | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/chilly-beans-juggle.md diff --git a/.changeset/chilly-beans-juggle.md b/.changeset/chilly-beans-juggle.md new file mode 100644 index 00000000..a7811f25 --- /dev/null +++ b/.changeset/chilly-beans-juggle.md @@ -0,0 +1,5 @@ +--- +'@xyflow/system': patch +--- + +Fix node drag threshold behavior across different zoom levels. The drag threshold calculation now uses client coordinates instead of transformed coordinates, ensuring consistent behavior regardless of zoom level. diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index 1da0720d..66afb31c 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -334,8 +334,10 @@ export function XYDrag voi } if (!dragStarted) { - const x = pointerPos.xSnapped - (lastPos.x ?? 0); - const y = pointerPos.ySnapped - (lastPos.y ?? 0); + // Calculate distance in client coordinates for consistent drag threshold behavior across zoom levels + const currentMousePosition = getEventPosition(event.sourceEvent, containerBounds!); + const x = currentMousePosition.x - (mousePosition.x ?? 0); + const y = currentMousePosition.y - (mousePosition.y ?? 0); const distance = Math.sqrt(x * x + y * y); if (distance > nodeDragThreshold) { From 3592651d12169d9b0b679deedd91ec3740a13609 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 2 Sep 2025 10:30:33 +0200 Subject: [PATCH 2/3] shorten patch note --- .changeset/chilly-beans-juggle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/chilly-beans-juggle.md b/.changeset/chilly-beans-juggle.md index a7811f25..64f1c8a0 100644 --- a/.changeset/chilly-beans-juggle.md +++ b/.changeset/chilly-beans-juggle.md @@ -2,4 +2,4 @@ '@xyflow/system': patch --- -Fix node drag threshold behavior across different zoom levels. The drag threshold calculation now uses client coordinates instead of transformed coordinates, ensuring consistent behavior regardless of zoom level. +Fix nodeDragThreshold changing with zoom level From 99c67422a79607f708eb5907732d1b035315f644 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 2 Sep 2025 10:30:49 +0200 Subject: [PATCH 3/3] remove unnecessary check --- packages/system/src/xydrag/XYDrag.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index 66afb31c..c78e1035 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -336,8 +336,8 @@ export function XYDrag voi if (!dragStarted) { // Calculate distance in client coordinates for consistent drag threshold behavior across zoom levels const currentMousePosition = getEventPosition(event.sourceEvent, containerBounds!); - const x = currentMousePosition.x - (mousePosition.x ?? 0); - const y = currentMousePosition.y - (mousePosition.y ?? 0); + const x = currentMousePosition.x - mousePosition.x; + const y = currentMousePosition.y - mousePosition.y; const distance = Math.sqrt(x * x + y * y); if (distance > nodeDragThreshold) {