alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): use event target for Handle pointer down events (#1924)

Browse Source 
* 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>
This commit is contained in:
Braks
2025-08-12 18:07:59 +02:00
parent c2aad1e43b
commit 299a04531e
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/rude-suns-refuse.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": minor
---
Use event target for `<Handle>` components to determine the "clicked" handle, avoiding calls to `getElementFromPoint and allowing "detached" handles

4
packages/core/src/composables/useHandle.ts
View File

@@ -85,8 +85,9 @@ export function useHandle({
// when vue-flow is used inside a shadow root we can't use document // when vue-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement) 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)) const node = findNode(toValue(nodeId))
let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
@@ -100,7 +101,6 @@ export function useHandle({
let autoPanId = 0 let autoPanId = 0
const { x, y } = getEventPosition(event) const { x, y } = getEventPosition(event)
const clickedHandle = doc?.elementFromPoint(x, y)
const handleType = getHandleType(toValue(edgeUpdaterType), clickedHandle) const handleType = getHandleType(toValue(edgeUpdaterType), clickedHandle)
const containerBounds = vueFlowRef.value?.getBoundingClientRect() const containerBounds = vueFlowRef.value?.getBoundingClientRect()