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>

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,