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

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
+      <MiniMapNode
-        :name="`node-${node.type}`"
         :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"
+          :selected="node.selected"
-          :class="nodeClassNameFunc(node)"
+          :dragging="node.dragging"
-          :color="nodeColorFunc(node)"
-          :border-radius="props.nodeBorderRadius"
-          :stroke-color="nodeStrokeColorFunc(node)"
-          :stroke-width="props.nodeStrokeWidth"
-          :shape-rendering="shapeRendering"
         />
-      </slot>
+      </MiniMapNode>
     </template>
     <path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
   </svg>

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>

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'

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 MiniMapNodeFunc2<Data = ElementData> = (node: GraphNode<Data>) => string
-type MiniMapNodeFunc3<Data = ElementData> = (node: Node<Data> | GraphNode<Data>) => string
+type MiniMapNodeFunc3<Data = ElementData> = (node: GraphNode<Data>) => string
 
 export type ShapeRendering = CSSProperties['shapeRendering']