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 <[email protected]>

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

Signed-off-by: braks <[email protected]>

* chore(changeset): add

Signed-off-by: braks <[email protected]>

---------

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

.changeset/twelve-rules-exist.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Allow node/edge pointer events if mouse event listeners (like `nodeClick` or `edgeClick`) exists.

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -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) {

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -60,6 +60,7 @@ const NodeWrapper = defineComponent({
       elementsSelectable,
       nodesConnectable,
       nodesFocusable,
+      hooks,
     } = useVueFlow()
 
     const nodeElement = ref<HTMLDivElement | null>(null)
@@ -74,6 +75,8 @@ const NodeWrapper = defineComponent({
 
     const { node, parentNode } = useNode(props.id)
 
+    const { emit, on } = useNodeHooks(node, emits)
+
     const isDraggable = toRef(() => (typeof node.draggable === 'undefined' ? nodesDraggable.value : node.draggable))
 
     const isSelectable = toRef(() => (typeof node.selectable === 'undefined' ? elementsSelectable.value : node.selectable))
@@ -82,6 +85,17 @@ const NodeWrapper = defineComponent({
 
     const isFocusable = toRef(() => (typeof node.focusable === 'undefined' ? nodesFocusable.value : node.focusable))
 
+    const hasPointerEvents = toRef(
+      () =>
+        isSelectable.value ||
+        isDraggable.value ||
+        hooks.value.nodeClick.hasListeners() ||
+        hooks.value.nodeDoubleClick.hasListeners() ||
+        hooks.value.nodeMouseEnter.hasListeners() ||
+        hooks.value.nodeMouseMove.hasListeners() ||
+        hooks.value.nodeMouseLeave.hasListeners(),
+    )
+
     const isInit = toRef(() => !!node.dimensions.width && !!node.dimensions.height)
 
     const nodeCmp = computed(() => {
@@ -112,8 +126,6 @@ const NodeWrapper = defineComponent({
       return false
     })
 
-    const { emit, on } = useNodeHooks(node, emits)
-
     const dragging = useDrag({
       id: props.id,
       el: nodeElement,
@@ -266,7 +278,7 @@ const NodeWrapper = defineComponent({
             visibility: isInit.value ? 'visible' : 'hidden',
             zIndex: node.computedPosition.z ?? zIndex.value,
             transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
-            pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
+            pointerEvents: hasPointerEvents.value ? 'all' : 'none',
             ...getStyle.value,
           },
           'tabIndex': isFocusable.value ? 0 : undefined,