From e178a3ce44e32b8fb1803bc9d211301ca0ad7541 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 13 Apr 2022 21:57:42 +0200
Subject: [PATCH] feat: Add mini map node events

# What's changed?

* Add events for mini map node click & dbl click
* Receives event + node as parameters
---
 package/package.json                          |  2 +-
 .../additional-components/MiniMap/MiniMap.vue | 26 ++++++++++++++++---
 .../MiniMap/MiniMapNode.vue                   |  8 +++++-
 package/src/additional-components/index.ts    |  1 +
 package/src/store/hooks.ts                    |  2 ++
 package/src/types/hooks.ts                    |  2 ++
 6 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/package/package.json b/package/package.json
index cd54c21b..ab98138f 100644
--- a/package/package.json
+++ b/package/package.json
@@ -24,7 +24,7 @@
   "scripts": {
     "prepare": "ts-patch install -s",
     "build": "vite build",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && tsc -p tsconfig.build.json && shx rm -rf tmp && yarn lint:dist",
+    "types": "yarn prepare && vue-tsc --declaration --emitDeclarationOnly && tsc -p tsconfig.build.json && shx rm -rf tmp && yarn lint:dist",
     "typedoc": "typedoc --tsconfig tsconfig.docs.json dist/index.d.ts --out typedocs",
     "theme": "postcss src/style.css -o dist/style.css && postcss src/theme-default.css -o dist/theme-default.css",
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../.gitignore .",
diff --git a/package/src/additional-components/MiniMap/MiniMap.vue b/package/src/additional-components/MiniMap/MiniMap.vue
index 48766d21..4e398b4c 100644
--- a/package/src/additional-components/MiniMap/MiniMap.vue
+++ b/package/src/additional-components/MiniMap/MiniMap.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ShapeRendering, MiniMapNodeFunc } from '../../types'
+import { ShapeRendering, MiniMapNodeFunc, GraphNode } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
@@ -70,6 +70,14 @@ const d = computed(() => {
     h${-viewBB.value.width}z`
   else return ''
 })
+
+const onNodeClick = (event: MouseEvent, node: GraphNode) => {
+  store.hooks.miniMapNodeClick.trigger({ event, node })
+}
+
+const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
+  store.hooks.miniMapNodeDoubleClick.trigger({ event, node })
+}
 </script>
 <script lang="ts">
 export default {
@@ -85,6 +93,7 @@ export default {
   >
     <template v-for="node of store.getNodes" :key="`mini-map-node-${node.id}`">
       <MiniMapNode
+        :id="node.id"
         :position="node.computedPosition"
         :dimensions="node.dimensions"
         :style="node.style"
@@ -94,13 +103,24 @@ export default {
         :stroke-color="nodeStrokeColorFunc(node)"
         :stroke-width="props.nodeStrokeWidth"
         :shape-rendering="shapeRendering"
+        @click="(e) => onNodeClick(e, node)"
+        @dblclick="(e) => onNodeDblClick(e, node)"
       >
         <slot
+          :id="node.id"
           :name="`node-${node.type}`"
-          :position="node.computedPosition"
-          :dimensions="node.dimensions"
+          :parent-node="node.parentNode"
           :selected="node.selected"
           :dragging="node.dragging"
+          :position="node.computedPosition"
+          :dimensions="node.dimensions"
+          :style="node.style"
+          :class="nodeClassNameFunc(node)"
+          :color="nodeColorFunc(node)"
+          :border-radius="props.nodeBorderRadius"
+          :stroke-color="nodeStrokeColorFunc(node)"
+          :stroke-width="props.nodeStrokeWidth"
+          :shape-rendering="shapeRendering"
         />
       </MiniMapNode>
     </template>
diff --git a/package/src/additional-components/MiniMap/MiniMapNode.vue b/package/src/additional-components/MiniMap/MiniMapNode.vue
index 8f8ed4ba..a0b03619 100644
--- a/package/src/additional-components/MiniMap/MiniMapNode.vue
+++ b/package/src/additional-components/MiniMap/MiniMapNode.vue
@@ -5,7 +5,10 @@ import type { MiniMapNodeProps } from '../../types/components'
 const props = withDefaults(defineProps<MiniMapNodeProps>(), {
   shapeRendering: 'geometricPrecision',
 })
-const attrs = useAttrs()
+
+const emit = defineEmits(['click', 'dblClick'])
+
+const attrs: any = useAttrs()
 
 const styles = (attrs.style ?? {}) as CSSProperties
 const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
@@ -19,6 +22,7 @@ export default {
   <rect
     class="vue-flow__minimap-node"
     :class="attrs.class"
+    :style="attrs.style"
     :x="props.position.x"
     :y="props.position.y"
     :rx="props.borderRadius"
@@ -29,6 +33,8 @@ export default {
     :stroke="props.strokeColor"
     :stroke-width="props.strokeWidth"
     :shape-rendering="props.shapeRendering"
+    @click="emit('click')"
+    @dblClick="emit('dblClick')"
   />
   <slot />
 </template>
diff --git a/package/src/additional-components/index.ts b/package/src/additional-components/index.ts
index 23a0de82..057a16d1 100644
--- a/package/src/additional-components/index.ts
+++ b/package/src/additional-components/index.ts
@@ -1,3 +1,4 @@
 export { default as MiniMap } from './MiniMap/MiniMap.vue'
+export { default as MiniMapNode } from './MiniMap/MiniMapNode.vue'
 export { default as Controls } from './Controls/Controls.vue'
 export { default as Background } from './Background/Background.vue'
diff --git a/package/src/store/hooks.ts b/package/src/store/hooks.ts
index 08b7c535..e2614e84 100644
--- a/package/src/store/hooks.ts
+++ b/package/src/store/hooks.ts
@@ -13,6 +13,8 @@ export const createHooks = (): FlowHooks => ({
   nodeDragStart: createEventHook(),
   nodeDrag: createEventHook(),
   nodeDragStop: createEventHook(),
+  miniMapNodeClick: createEventHook(),
+  miniMapNodeDoubleClick: createEventHook(),
   connect: createEventHook(),
   connectStart: createEventHook(),
   connectStop: createEventHook(),
diff --git a/package/src/types/hooks.ts b/package/src/types/hooks.ts
index 98cbee65..8f7ad37f 100644
--- a/package/src/types/hooks.ts
+++ b/package/src/types/hooks.ts
@@ -20,6 +20,8 @@ export interface FlowEvents<NodeData = ElementData, EdgeData = ElementData> {
   nodeDragStart: { event: MouseTouchEvent; node: GraphNode<NodeData> }
   nodeDrag: { event: MouseTouchEvent; node: GraphNode<NodeData> }
   nodeDragStop: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  miniMapNodeClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
+  miniMapNodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
   connect: Connection
   connectStart: {
     event: MouseEvent