feat(Minimap): add nodeComponent prop

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -27,6 +27,7 @@
     nodeClass = '',
     nodeBorderRadius = 5,
     nodeStrokeWidth = 2,
+    nodeComponent,
     bgColor,
     maskColor,
     maskStrokeColor,
@@ -127,6 +128,7 @@
             y={node.internals.positionAbsolute.y}
             {...nodeDimesions}
             selected={node.selected}
+            nodeComponent={nodeComponent}
             color={nodeColorFunc?.(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { ClassValue } from 'svelte/elements';
+  import type { Component } from 'svelte';
+  import type { MiniMapNodeProps } from './types';
 
   let {
     x,
@@ -12,7 +14,8 @@
     strokeColor,
     strokeWidth = 2,
     selected,
-    class: className
+    class: className,
+    nodeComponent
   }: {
     x: number;
     y: number;
@@ -25,20 +28,39 @@
     strokeWidth?: number;
     selected?: boolean;
     class?: ClassValue;
+    nodeComponent?: Component<MiniMapNodeProps>;
   } = $props();
 </script>
 
-<rect
-  class={['svelte-flow__minimap-node', className]}
-  class:selected
-  {x}
-  {y}
-  rx={borderRadius}
-  ry={borderRadius}
-  {width}
-  {height}
-  style:fill={color}
-  style:stroke={strokeColor}
-  style:stroke-width={strokeWidth}
-  shape-rendering={shapeRendering}
-/>
+{#if nodeComponent}
+  {@const CustomComponent = nodeComponent}
+  
+  <CustomComponent 
+    {x}
+    {y}
+    {width}
+    {height}
+    {borderRadius}
+    class={className}
+    {color}
+    {shapeRendering}
+    {strokeColor}
+    {strokeWidth}
+    {selected}
+  />
+{:else}
+  <rect
+    class={['svelte-flow__minimap-node', className]}
+    class:selected
+    {x}
+    {y}
+    rx={borderRadius}
+    ry={borderRadius}
+    {width}
+    {height}
+    style:fill={color}
+    style:stroke={strokeColor}
+    style:stroke-width={strokeWidth}
+    shape-rendering={shapeRendering}
+  />
+{/if}

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -1,9 +1,29 @@
 import type { PanelPosition } from '@xyflow/system';
 import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+import type { Component } from 'svelte';
 import type { Node } from '$lib/types';
 
 export type GetMiniMapNodeAttribute = (node: Node) => string;
 
+/**
+ * The props that are passed to the MiniMapNode component
+ *
+ * @public
+ */
+export type MiniMapNodeProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  borderRadius?: number;
+  class?: ClassValue;
+  color?: string;
+  shapeRendering?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  selected?: boolean;
+};
+
 export type MiniMapProps = {
   /** Background color of minimap */
   bgColor?: string;
@@ -17,6 +37,8 @@ export type MiniMapProps = {
   nodeBorderRadius?: number;
   /** Stroke width of nodes on the minimap */
   nodeStrokeWidth?: number;
+  /** A custom component to render the nodes in the minimap. This component must render an SVG element! */
+  nodeComponent?: Component<MiniMapNodeProps>;
   /** Color of the mask representing viewport */
   maskColor?: string;
   /** Stroke color of the mask representing viewport */