From 7c360bb5c177036b68a6a7a7c6e3eab1353e2f89 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 25 Apr 2022 18:45:43 +0200
Subject: [PATCH] feat: Add mouse over events for minimap nodes

---
 .../additional-components/MiniMap/MiniMap.vue | 25 +++++++++++++++----
 .../MiniMap/MiniMapNode.ts                    |  3 +--
 packages/vue-flow/src/store/hooks.ts          |  3 +++
 packages/vue-flow/src/types/hooks.ts          |  3 +++
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
index 816ca9f0..fd771e67 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
+++ b/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"
diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts b/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts
index 4d21df13..1d38753c 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts
+++ b/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
diff --git a/packages/vue-flow/src/store/hooks.ts b/packages/vue-flow/src/store/hooks.ts
index 807ddb2a..87171ed0 100644
--- a/packages/vue-flow/src/store/hooks.ts
+++ b/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(),
diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/vue-flow/src/types/hooks.ts
index 695528e0..62aed93b 100644
--- a/packages/vue-flow/src/types/hooks.ts
+++ b/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