fix(core,nodes,edges): allow pointer events if mouse evt listeners exist (#1618)

* fix(core,nodes): allow node pointer events if listener(s) exist

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core,edges): allow edge pointer events if listener(s) exist

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2024-09-16 13:11:49 +02:00
parent a1bfef8016
commit 6338a9db06
3 changed files with 33 additions and 15 deletions
@@ -41,11 +41,12 @@ const EdgeWrapper = defineComponent({
elementsSelectable,
edgesUpdatable,
edgesFocusable,
hooks,
} = useVueFlow()
const edge = computed(() => findEdge(props.id)!)
const hooks = useEdgeHooks(edge.value, emits)
const { emit, on } = useEdgeHooks(edge.value, emits)
const slots = inject(Slots)
@@ -188,7 +189,7 @@ const EdgeWrapper = defineComponent({
updating: mouseOver.value,
selected: edge.value.selected,
animated: edge.value.animated,
inactive: !isSelectable.value,
inactive: !isSelectable.value && !hooks.value.edgeClick.hasListeners(),
},
],
'onClick': onEdgeClick,
@@ -226,7 +227,7 @@ const EdgeWrapper = defineComponent({
labelBgPadding: edge.value.labelBgPadding,
labelBgBorderRadius: edge.value.labelBgBorderRadius,
data: edge.value.data,
events: { ...edge.value.events, ...hooks.on },
events: { ...edge.value.events, ...on },
style: edgeStyle.value,
markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,
@@ -296,11 +297,11 @@ const EdgeWrapper = defineComponent({
}
function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
hooks.emit.update({ event, edge: edge.value, connection })
emit.update({ event, edge: edge.value, connection })
}
function onEdgeUpdateEnd(event: MouseTouchEvent) {
hooks.emit.updateEnd({ event, edge: edge.value })
emit.updateEnd({ event, edge: edge.value })
updating.value = false
}
@@ -316,7 +317,7 @@ const EdgeWrapper = defineComponent({
edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
hooks.emit.updateStart({ event, edge: edge.value })
emit.updateStart({ event, edge: edge.value })
handlePointerDown(event)
}
@@ -336,27 +337,27 @@ const EdgeWrapper = defineComponent({
}
}
hooks.emit.click(data)
emit.click(data)
}
function onEdgeContextMenu(event: MouseEvent) {
hooks.emit.contextMenu({ event, edge: edge.value })
emit.contextMenu({ event, edge: edge.value })
}
function onDoubleClick(event: MouseEvent) {
hooks.emit.doubleClick({ event, edge: edge.value })
emit.doubleClick({ event, edge: edge.value })
}
function onEdgeMouseEnter(event: MouseEvent) {
hooks.emit.mouseEnter({ event, edge: edge.value })
emit.mouseEnter({ event, edge: edge.value })
}
function onEdgeMouseMove(event: MouseEvent) {
hooks.emit.mouseMove({ event, edge: edge.value })
emit.mouseMove({ event, edge: edge.value })
}
function onEdgeMouseLeave(event: MouseEvent) {
hooks.emit.mouseLeave({ event, edge: edge.value })
emit.mouseLeave({ event, edge: edge.value })
}
function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {