From 9fd819764767a72538139bf0838fe708ac5df3de Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 23 Apr 2025 19:46:08 +0200 Subject: [PATCH 1/3] fix(core): subtract container bounds when getting pointer position Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/composables/useGetPointerPosition.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/core/src/composables/useGetPointerPosition.ts b/packages/core/src/composables/useGetPointerPosition.ts index 6715b22c7..c78fde5ec 100644 --- a/packages/core/src/composables/useGetPointerPosition.ts +++ b/packages/core/src/composables/useGetPointerPosition.ts @@ -9,17 +9,21 @@ import type { UseDragEvent } from './useDrag' * @internal */ export function useGetPointerPosition() { - const { viewport, snapGrid, snapToGrid } = useVueFlow() + const { viewport, snapGrid, snapToGrid, vueFlowRef } = useVueFlow() // returns the pointer position projected to the VF coordinate system return (event: UseDragEvent | MouseTouchEvent) => { + const containerBounds = vueFlowRef.value?.getBoundingClientRect() ?? null const evt = isUseDragEvent(event) ? event.sourceEvent : event const { x, y } = getEventPosition(evt) - const pointerPos = pointToRendererPoint({ x, y }, viewport.value) + const pointerPos = pointToRendererPoint( + { x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) }, + viewport.value, + ) const { x: xSnapped, y: ySnapped } = snapToGrid.value ? snapPosition(pointerPos, snapGrid.value) : pointerPos - // we need the snapped position in order to be able to skip unnecessary drag events + // we need the snapped position to be able to skip unnecessary drag events return { xSnapped, ySnapped, From 3734718f9a5d187579650d48dd9f8777c66d6951 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 23 Apr 2025 19:46:44 +0200 Subject: [PATCH 2/3] chore(changeset): add Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/great-jokes-arrive.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/great-jokes-arrive.md diff --git a/.changeset/great-jokes-arrive.md b/.changeset/great-jokes-arrive.md new file mode 100644 index 000000000..97debef0a --- /dev/null +++ b/.changeset/great-jokes-arrive.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Subtract container bounds when calculating pointer position. From a4173b8ffac280ee04561c3b0515850405cebfee Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 23 Apr 2025 20:16:29 +0200 Subject: [PATCH 3/3] chore: cleanup Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/composables/useGetPointerPosition.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/core/src/composables/useGetPointerPosition.ts b/packages/core/src/composables/useGetPointerPosition.ts index c78fde5ec..4104befc9 100644 --- a/packages/core/src/composables/useGetPointerPosition.ts +++ b/packages/core/src/composables/useGetPointerPosition.ts @@ -13,14 +13,11 @@ export function useGetPointerPosition() { // returns the pointer position projected to the VF coordinate system return (event: UseDragEvent | MouseTouchEvent) => { - const containerBounds = vueFlowRef.value?.getBoundingClientRect() ?? null + const containerBounds = vueFlowRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 } const evt = isUseDragEvent(event) ? event.sourceEvent : event - const { x, y } = getEventPosition(evt) - const pointerPos = pointToRendererPoint( - { x: x - (containerBounds?.left ?? 0), y: y - (containerBounds?.top ?? 0) }, - viewport.value, - ) + const { x, y } = getEventPosition(evt, containerBounds as DOMRect) + const pointerPos = pointToRendererPoint({ x, y }, viewport.value) const { x: xSnapped, y: ySnapped } = snapToGrid.value ? snapPosition(pointerPos, snapGrid.value) : pointerPos // we need the snapped position to be able to skip unnecessary drag events