From 567ce96640ee82ca2146b579999b714dd539fd11 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 13 Apr 2022 20:02:16 +0200
Subject: [PATCH] feat: MiniMapNode slot

# What's changed?

* Add a slot to minimap nodes to allow customizing the node content
* slots receive current node position and dimensions to position elements and selected + dragging params
---
 .../additional-components/MiniMap/MiniMap.vue   | 17 ++++++-----------
 .../MiniMap/MiniMapNode.vue                     |  2 ++
 package/src/additional-components/index.ts      |  3 ---
 package/src/types/components.ts                 |  8 ++++----
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/package/src/additional-components/MiniMap/MiniMap.vue b/package/src/additional-components/MiniMap/MiniMap.vue
index 1ccffa72..48766d21 100644
--- a/package/src/additional-components/MiniMap/MiniMap.vue
+++ b/package/src/additional-components/MiniMap/MiniMap.vue
@@ -84,8 +84,7 @@ export default {
     class="vue-flow__minimap"
   >
     <template v-for="node of store.getNodes" :key="`mini-map-node-${node.id}`">
-      <slot
-        :name="`node-${node.type}`"
+      <MiniMapNode
         :position="node.computedPosition"
         :dimensions="node.dimensions"
         :style="node.style"
@@ -96,18 +95,14 @@ export default {
         :stroke-width="props.nodeStrokeWidth"
         :shape-rendering="shapeRendering"
       >
-        <MiniMapNode
+        <slot
+          :name="`node-${node.type}`"
           :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"
+          :selected="node.selected"
+          :dragging="node.dragging"
         />
-      </slot>
+      </MiniMapNode>
     </template>
     <path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
   </svg>
diff --git a/package/src/additional-components/MiniMap/MiniMapNode.vue b/package/src/additional-components/MiniMap/MiniMapNode.vue
index 8d1c8b94..8f8ed4ba 100644
--- a/package/src/additional-components/MiniMap/MiniMapNode.vue
+++ b/package/src/additional-components/MiniMap/MiniMapNode.vue
@@ -18,6 +18,7 @@ export default {
 <template>
   <rect
     class="vue-flow__minimap-node"
+    :class="attrs.class"
     :x="props.position.x"
     :y="props.position.y"
     :rx="props.borderRadius"
@@ -29,4 +30,5 @@ export default {
     :stroke-width="props.strokeWidth"
     :shape-rendering="props.shapeRendering"
   />
+  <slot />
 </template>
diff --git a/package/src/additional-components/index.ts b/package/src/additional-components/index.ts
index c8374b35..23a0de82 100644
--- a/package/src/additional-components/index.ts
+++ b/package/src/additional-components/index.ts
@@ -1,6 +1,3 @@
-// These components are not used by vue flow directly
-// but the user can add them as children of a vue flow component
-
 export { default as MiniMap } from './MiniMap/MiniMap.vue'
 export { default as Controls } from './Controls/Controls.vue'
 export { default as Background } from './Background/Background.vue'
diff --git a/package/src/types/components.ts b/package/src/types/components.ts
index 23573b97..9d389a52 100644
--- a/package/src/types/components.ts
+++ b/package/src/types/components.ts
@@ -1,6 +1,6 @@
 import { Component, CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
 import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
-import { GraphNode, Node, NodeProps } from './node'
+import { GraphNode, NodeProps } from './node'
 import { EdgeProps } from './edge'
 import { FitViewParams } from './zoom'
 
@@ -62,10 +62,10 @@ export interface ControlEvents {
 }
 
 /** expects a node and returns a color value */
-export type MiniMapNodeFunc<Data = ElementData> = (node: Node<Data> | GraphNode<Data>) => string
+export type MiniMapNodeFunc<Data = ElementData> = (node: GraphNode<Data>) => string
 // hack for vue-type imports
-type MiniMapNodeFunc2<Data = ElementData> = (node: Node<Data> | GraphNode<Data>) => string
-type MiniMapNodeFunc3<Data = ElementData> = (node: Node<Data> | GraphNode<Data>) => string
+type MiniMapNodeFunc2<Data = ElementData> = (node: GraphNode<Data>) => string
+type MiniMapNodeFunc3<Data = ElementData> = (node: GraphNode<Data>) => string
 
 export type ShapeRendering = CSSProperties['shapeRendering']