Merge pull request #5565 from xyflow/minimapnode-svelte-id

Add node id to MiniMapNodeProps and MiniMapNode in Svelte Flow

.changeset/neat-rules-hammer.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Pass nodeId to MiniMapNode

examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-	let {
-		x,
-		y,
-		width,
-		height,
-		selected,
-	}: {
-		x: number;
-		y: number;
-		width: number;
-		height: number;
-		selected?: boolean;
-	} = $props();
+	import type { MiniMapNodeProps } from '@xyflow/svelte';
+
+	let { id, x, y, width, height, selected }: MiniMapNodeProps = $props();
 </script>
 
 <circle
 	cx={x + width / 2}
 	cy={y + height / 2}
 	r={Math.min(width, height) - 2}
-	fill={selected ? "#ff6b6b" : "#ffcc00"}
+	fill={selected ? '#ff6b6b' : '#ffcc00'}
 />
+<text
+	x={x + width / 2}
+	y={y + height / 2}
+	text-anchor="middle"
+	dominant-baseline="middle"
+	fill="blue"
+	stroke-width="0.5"
+	font-size="100"
+	font-family="Arial, sans-serif"
+	font-weight="bold"
+>
+	{id}
+</text>

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

@@ -121,6 +121,7 @@
         {#if node && nodeHasDimensions(node) && !node.hidden}
           {@const nodeDimesions = getNodeDimensions(node)}
           <MinimapNode
+            id={node.id}
             x={node.internals.positionAbsolute.x}
             y={node.internals.positionAbsolute.y}
             {...nodeDimesions}

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

@@ -4,6 +4,7 @@
   import type { MiniMapNodeProps } from './types';
 
   let {
+    id,
     x,
     y,
     width,
@@ -17,6 +18,7 @@
     class: className,
     nodeComponent
   }: {
+    id: string;
     x: number;
     y: number;
     width: number;
@@ -36,6 +38,7 @@
   {@const CustomComponent = nodeComponent}
 
   <CustomComponent
+    {id}
     {x}
     {y}
     {width}

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

@@ -11,6 +11,7 @@ export type GetMiniMapNodeAttribute = (node: Node) => string;
  * @public
  */
 export type MiniMapNodeProps = {
+  id: string;
   x: number;
   y: number;
   width: number;