diff --git a/.changeset/hip-files-hunt.md b/.changeset/hip-files-hunt.md
new file mode 100644
index 00000000..aaef60ff
--- /dev/null
+++ b/.changeset/hip-files-hunt.md
@@ -0,0 +1,5 @@
+---
+"@xyflow/svelte": minor
+---
+
+Pass a custom `nodeComponent` to Svelteflow's Minimap
diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 1db10784..0ebe84e9 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -7,6 +7,7 @@
'add-node-on-drop',
'color-mode',
'custom-connection-line',
+ 'custom-minimap',
'customnode',
'dagre',
'detached-handle',
diff --git a/examples/svelte/src/routes/examples/custom-minimap/+page.svelte b/examples/svelte/src/routes/examples/custom-minimap/+page.svelte
new file mode 100644
index 00000000..1e9c96ca
--- /dev/null
+++ b/examples/svelte/src/routes/examples/custom-minimap/+page.svelte
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte b/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte
new file mode 100644
index 00000000..082b13bc
--- /dev/null
+++ b/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte
@@ -0,0 +1,22 @@
+
+
+
\ No newline at end of file
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index ac346066..d2fb8263 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/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)}
diff --git a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
index a2700b82..1eb4cdeb 100644
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -1,5 +1,7 @@
-
+{#if nodeComponent}
+ {@const CustomComponent = nodeComponent}
+
+
+{:else}
+
+{/if}
diff --git a/packages/svelte/src/lib/plugins/Minimap/types.ts b/packages/svelte/src/lib/plugins/Minimap/types.ts
index dd6903de..550191ed 100644
--- a/packages/svelte/src/lib/plugins/Minimap/types.ts
+++ b/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;
/** Color of the mask representing viewport */
maskColor?: string;
/** Stroke color of the mask representing viewport */