feat: Add mouse over events for minimap nodes

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

@@ -23,7 +23,7 @@ const window = useWindow()
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { edges, viewport, dimensions, hooks, getNodes } = $(useVueFlow())
+const { edges, viewport, dimensions, emits, getNodes } = $(useVueFlow())
 
 const elementWidth = $computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
@@ -85,11 +85,23 @@ const d = controlledComputed($$(viewBox), () => {
 })
 
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  hooks.miniMapNodeClick.trigger({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+  emits.miniMapNodeClick({ event, node })
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  hooks.miniMapNodeDoubleClick.trigger({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+  emits.miniMapNodeDoubleClick({ event, node })
+}
+
+const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
+  emits.miniMapNodeDoubleClick({ event, node })
+}
+
+const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
+  emits.miniMapNodeDoubleClick({ event, node })
+}
+
+const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
+  emits.miniMapNodeDoubleClick({ event, node })
 }
 </script>
 
@@ -119,8 +131,11 @@ export default {
       :stroke-color="nodeStrokeColorFunc(node)"
       :stroke-width="nodeStrokeWidth"
       :shape-rendering="shapeRendering"
-      @click="onNodeClick($event, node)"
-      @dblclick="onNodeDblClick($event, node)"
+      @click="(e: MouseEvent) => onNodeClick(e, node)"
+      @dblclick="(e: MouseEvent) => onNodeDblClick(e, node)"
+      @mouseenter="(e: MouseEvent) => onNodeMouseEnter(e, node)"
+      @mousemove="(e: MouseEvent) => onNodeMouseMove(e, node)"
+      @mouseleave="(e: MouseEvent) => onNodeMouseLeave(e, node)"
     >
       <slot
         :id="node.id"

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

@@ -38,7 +38,6 @@ const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
 
 MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
 
-// @todo add mouseover events
-MiniMapNode.emits = ['click', 'dblclick']
+MiniMapNode.emits = ['click', 'dbl-click', 'mouseenter', 'mousemove', 'mouseleave']
 
 export default MiniMapNode

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

@@ -15,6 +15,9 @@ export const createHooks = (): FlowHooks => ({
   nodeDragStop: createEventHook(),
   miniMapNodeClick: createEventHook(),
   miniMapNodeDoubleClick: createEventHook(),
+  miniMapNodeMouseEnter: createEventHook(),
+  miniMapNodeMouseMove: createEventHook(),
+  miniMapNodeMouseLeave: createEventHook(),
   connect: createEventHook(),
   connectStart: createEventHook(),
   connectStop: createEventHook(),

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

@@ -38,6 +38,9 @@ export interface FlowEvents {
   nodeDragStop: NodeMouseEvent
   miniMapNodeClick: NodeMouseEvent
   miniMapNodeDoubleClick: NodeMouseEvent
+  miniMapNodeMouseEnter: { event: MouseEvent; node: GraphNode }
+  miniMapNodeMouseMove: { event: MouseEvent; node: GraphNode }
+  miniMapNodeMouseLeave: { event: MouseEvent; node: GraphNode }
   connect: Connection
   connectStart: {
     event: MouseEvent