feat(nodes): add connected edges to node mouse events

# What's changed?

* Add `NodeMouseEvent` interface
* Add `EdgeMouseEvent` interface
* Add `connectedEdges` to node mouse events

packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { GraphNode, MiniMapNodeFunc, ShapeRendering } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
-import { getBoundsofRects, getRectOfNodes } from '../../utils'
+import { getBoundsofRects, getConnectedEdges, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
 import MiniMapNode from './MiniMapNode'
 
@@ -21,7 +21,7 @@ const window = useWindow()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { viewport, dimensions, hooks, getNodes } = $(useVueFlow())
+const { edges, viewport, dimensions, hooks, getNodes } = $(useVueFlow())
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 
@@ -83,11 +83,11 @@ const d = controlledComputed($$(viewBox), () => {
 })
 
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  hooks.miniMapNodeClick.trigger({ event, node })
+  hooks.miniMapNodeClick.trigger({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  hooks.miniMapNodeDoubleClick.trigger({ event, node })
+  hooks.miniMapNodeDoubleClick.trigger({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 }
 </script>
 
@@ -117,8 +117,8 @@ export default {
       :stroke-color="nodeStrokeColorFunc(node)"
       :stroke-width="nodeStrokeWidth"
       :shape-rendering="shapeRendering"
-      @click="(e: MouseEvent) => onNodeClick(e, node)"
+      @click="onNodeClick($event, node)"
-      @dbl-click="(e: MouseEvent) => onNodeDblClick(e, node)"
+      @dblclick="onNodeDblClick($event, node)"
     >
       <slot
         :id="node.id"

packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts

@@ -30,7 +30,7 @@ const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
       strokeWidth,
       shapeRendering,
       onClick: (e: MouseEvent) => emit('click', e),
-      onDblClick: (e: MouseEvent) => emit('dbl-click', e),
+      onDblClick: (e: MouseEvent) => emit('dblclick', e),
     }),
     slots?.default?.(),
   ]
@@ -39,6 +39,6 @@ const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
 MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
 
 // @todo add mouseover events
-MiniMapNode.emits = ['click', 'dbl-click']
+MiniMapNode.emits = ['click', 'dblclick']
 
 export default MiniMapNode

packages/vue-flow/src/components/Nodes/NodeWrapper.vue

@@ -4,7 +4,7 @@ import type { CSSProperties } from 'vue'
 import { useVueFlow } from '../../composables'
 import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
-import { getHandleBounds, getXYZPos } from '../../utils'
+import { getConnectedEdges, getHandleBounds, getXYZPos } from '../../utils'
 
 const { id, type, name, node, draggable, selectable, connectable, snapGrid } = defineProps<{
   id: string
@@ -20,6 +20,7 @@ const { id, type, name, node, draggable, selectable, connectable, snapGrid } = d
 provide(NodeId, id)
 
 const {
+  edges,
   viewport,
   noDragClassName,
   noPanClassName,
@@ -128,19 +129,19 @@ onUnmounted(() => {
 
 const onMouseEnter = (event: MouseEvent) => {
   if (!node.dragging) {
-    emits.nodeMouseEnter({ event, node })
+    emits.nodeMouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) })
   }
 }
 
 const onMouseMove = (event: MouseEvent) => {
   if (!node.dragging) {
-    emits.nodeMouseMove({ event, node })
+    emits.nodeMouseMove({ event, node, connectedEdges: getConnectedEdges([node], edges) })
   }
 }
 
 const onMouseLeave = (event: MouseEvent) => {
   if (!node.dragging) {
-    emits.nodeMouseLeave({ event, node })
+    emits.nodeMouseLeave({ event, node, connectedEdges: getConnectedEdges([node], edges) })
   }
 }
 
@@ -148,10 +149,12 @@ const onContextMenu = (event: MouseEvent) => {
   emits.nodeContextMenu({
     event,
     node,
+    connectedEdges: getConnectedEdges([node], edges),
   })
 }
 
-const onDoubleClick = (event: MouseEvent) => emits.nodeDoubleClick({ event, node })
+const onDoubleClick = (event: MouseEvent) =>
+  emits.nodeDoubleClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 
 const onSelectNode = (event: MouseEvent) => {
   if (!draggable) {
@@ -162,13 +165,13 @@ const onSelectNode = (event: MouseEvent) => {
 
       if (!node.selected) addSelectedNodes([node])
     }
-    emits.nodeClick({ event, node })
+    emits.nodeClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
   }
 }
 
 onDragStart(({ event }) => {
   addSelectedNodes([])
-  emits.nodeDragStart({ event, node })
+  emits.nodeDragStart({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 
   if (selectNodesOnDrag && selectable) {
     setState({
@@ -187,7 +190,7 @@ onDragStart(({ event }) => {
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
   updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: true })
-  emits.nodeDrag({ event, node })
+  emits.nodeDrag({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 })
 
 onDragStop(({ event, data: { deltaX, deltaY } }) => {
@@ -197,11 +200,11 @@ onDragStop(({ event, data: { deltaX, deltaY } }) => {
     if (selectable && !selectNodesOnDrag && !node.selected) {
       addSelectedNodes([node])
     }
-    emits.nodeClick({ event, node })
+    emits.nodeClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
     return
   }
   updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: false })
-  emits.nodeDragStop({ event, node })
+  emits.nodeDragStop({ event, node, connectedEdges: getConnectedEdges([node], edges) })
 })
 
 const getClass = computed(() => {

packages/vue-flow/src/types/hooks.ts

@@ -8,20 +8,36 @@ import type { Connection, OnConnectStartParams } from './connection'
 import type { FlowTransform } from './zoom'
 import type { EdgeChange, NodeChange } from './changes'
 
+export interface NodeMouseEvent {
+  event: MouseTouchEvent
+  node: GraphNode
+  connectedEdges: GraphEdge[]
+}
+
+export interface EdgeMouseEvent {
+  event: MouseEvent
+  edge: GraphEdge
+}
+
+export interface EdgeUpdateEvent {
+  edge: GraphEdge
+  connection: Connection
+}
+
 export interface FlowEvents {
   nodesChange: NodeChange[]
   edgesChange: EdgeChange[]
-  nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
+  nodeDoubleClick: NodeMouseEvent
-  nodeClick: { event: MouseTouchEvent; node: GraphNode }
+  nodeClick: NodeMouseEvent
-  nodeMouseEnter: { event: MouseEvent; node: GraphNode }
+  nodeMouseEnter: NodeMouseEvent
-  nodeMouseMove: { event: MouseEvent; node: GraphNode }
+  nodeMouseMove: NodeMouseEvent
-  nodeMouseLeave: { event: MouseEvent; node: GraphNode }
+  nodeMouseLeave: NodeMouseEvent
-  nodeContextMenu: { event: MouseEvent; node: GraphNode }
+  nodeContextMenu: NodeMouseEvent
-  nodeDragStart: { event: MouseTouchEvent; node: GraphNode }
+  nodeDragStart: NodeMouseEvent
-  nodeDrag: { event: MouseTouchEvent; node: GraphNode }
+  nodeDrag: NodeMouseEvent
-  nodeDragStop: { event: MouseTouchEvent; node: GraphNode }
+  nodeDragStop: NodeMouseEvent
-  miniMapNodeClick: { event: MouseTouchEvent; node: GraphNode }
+  miniMapNodeClick: NodeMouseEvent
-  miniMapNodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
+  miniMapNodeDoubleClick: NodeMouseEvent
   connect: Connection
   connectStart: {
     event: MouseEvent
@@ -39,15 +55,15 @@ export interface FlowEvents {
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  edgeContextMenu: { event: MouseEvent; edge: GraphEdge }
+  edgeContextMenu: EdgeMouseEvent
-  edgeMouseEnter: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseEnter: EdgeMouseEvent
-  edgeMouseMove: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseMove: EdgeMouseEvent
-  edgeMouseLeave: { event: MouseEvent; edge: GraphEdge }
+  edgeMouseLeave: EdgeMouseEvent
-  edgeDoubleClick: { event: MouseEvent; edge: GraphEdge }
+  edgeDoubleClick: EdgeMouseEvent
-  edgeClick: { event: MouseEvent; edge: GraphEdge }
+  edgeClick: EdgeMouseEvent
-  edgeUpdateStart: { event: MouseEvent; edge: GraphEdge }
+  edgeUpdateStart: EdgeMouseEvent
-  edgeUpdate: { edge: GraphEdge; connection: Connection }
+  edgeUpdate: EdgeUpdateEvent
-  edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge }
+  edgeUpdateEnd: EdgeMouseEvent
 }
 
 export type FlowHooks = Readonly<{