From d519eba4303e1169fd7c743ad7cc0b20506a4c22 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 26 May 2022 22:22:26 +0200
Subject: [PATCH] feat(vue-flow,components): add mouseover events for minimap
 nodes

---
 .../additional-components/MiniMap/MiniMap.vue | 32 +++++++++++++------
 .../MiniMap/MiniMapNode.ts                    |  5 ++-
 packages/vue-flow/src/types/hooks.ts          |  6 ++--
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
index fd771e67..0b25ae00 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
+++ b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
@@ -16,6 +16,8 @@ const {
   maskColor = 'rgb(240, 242, 243, 0.7)',
 } = defineProps<MiniMapProps>()
 
+const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
+
 const attrs: Record<string, any> = useAttrs()
 
 const window = useWindow()
@@ -85,23 +87,33 @@ const d = controlledComputed($$(viewBox), () => {
 })
 
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  emits.miniMapNodeClick({ event, node })
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  emits.miniMapNodeClick(param)
+  emit('nodeClick', param)
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  emits.miniMapNodeDoubleClick({ event, node })
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  emits.miniMapNodeDoubleClick(param)
+  emit('nodeDblclick', param)
 }
 
 const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
-  emits.miniMapNodeDoubleClick({ event, node })
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  emits.miniMapNodeMouseEnter(param)
+  emit('nodeMouseenter', param)
 }
 
 const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
-  emits.miniMapNodeDoubleClick({ event, node })
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  emits.miniMapNodeMouseMove(param)
+  emit('nodeMousemove', param)
 }
 
 const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
-  emits.miniMapNodeDoubleClick({ event, node })
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  emits.miniMapNodeMouseLeave(param)
+  emit('nodeMouseleave', param)
 }
 </script>
 
@@ -131,11 +143,11 @@ export default {
       :stroke-color="nodeStrokeColorFunc(node)"
       :stroke-width="nodeStrokeWidth"
       :shape-rendering="shapeRendering"
-      @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)"
+      @click="onNodeClick($event, node)"
+      @dblclick="onNodeDblClick($event, node)"
+      @mouseenter="onNodeMouseEnter($event, node)"
+      @mousemove="onNodeMouseMove($event, node)"
+      @mouseleave="onNodeMouseLeave($event, 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 1d38753c..b41dba29 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts
+++ b/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts
@@ -31,6 +31,9 @@ const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
       shapeRendering,
       onClick: (e: MouseEvent) => emit('click', e),
       onDblClick: (e: MouseEvent) => emit('dblclick', e),
+      onMouseenter: (e: MouseEvent) => emit('mouseenter', e),
+      onMousemove: (e: MouseEvent) => emit('mousemove', e),
+      onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
     }),
     slots?.default?.(),
   ]
@@ -38,6 +41,6 @@ const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
 
 MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
 
-MiniMapNode.emits = ['click', 'dbl-click', 'mouseenter', 'mousemove', 'mouseleave']
+MiniMapNode.emits = ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave']
 
 export default MiniMapNode
diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/vue-flow/src/types/hooks.ts
index 62aed93b..14cbd973 100644
--- a/packages/vue-flow/src/types/hooks.ts
+++ b/packages/vue-flow/src/types/hooks.ts
@@ -38,9 +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 }
+  miniMapNodeMouseEnter: NodeMouseEvent
+  miniMapNodeMouseMove: NodeMouseEvent
+  miniMapNodeMouseLeave: NodeMouseEvent
   connect: Connection
   connectStart: {
     event: MouseEvent