From 299a04531e20a626494e32ee4d92a1cf5bbda07b Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 12 Aug 2025 18:07:59 +0200 Subject: [PATCH] refactor(core): use event target for Handle pointer down events (#1924) * refactor(core): use event target for Handle pointer down events Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/rude-suns-refuse.md | 5 +++++ packages/core/src/composables/useHandle.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/rude-suns-refuse.md diff --git a/.changeset/rude-suns-refuse.md b/.changeset/rude-suns-refuse.md new file mode 100644 index 00000000..0c539a36 --- /dev/null +++ b/.changeset/rude-suns-refuse.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Use event target for `` components to determine the "clicked" handle, avoiding calls to `getElementFromPoint and allowing "detached" handles diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts index 158b4f39..7d83f181 100644 --- a/packages/core/src/composables/useHandle.ts +++ b/packages/core/src/composables/useHandle.ts @@ -85,8 +85,9 @@ export function useHandle({ // when vue-flow is used inside a shadow root we can't use document const doc = getHostForElement(event.target as HTMLElement) + const clickedHandle = event.currentTarget as HTMLElement | null - if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) { + if (clickedHandle && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) { const node = findNode(toValue(nodeId)) let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid @@ -100,7 +101,6 @@ export function useHandle({ let autoPanId = 0 const { x, y } = getEventPosition(event) - const clickedHandle = doc?.elementFromPoint(x, y) const handleType = getHandleType(toValue(edgeUpdaterType), clickedHandle) const containerBounds = vueFlowRef.value?.getBoundingClientRect()