Merge pull request #2906 from wbkd/feat/custom-minimap-nodes

feat: add prop to render custom node inside minimap

packages/minimap/src/MiniMap.tsx

@@ -55,6 +55,9 @@ function MiniMap({
   nodeClassName = '',
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
+  // We need to rename the prop to be `CapitalCase` so that JSX will render it as
+  // a component properly. 
+  nodeComponent: NodeComponent = MiniMapNode,
   maskColor = 'rgb(240, 240, 240, 0.6)',
   maskStrokeColor = 'none',
   maskStrokeWidth = 1,
@@ -181,7 +184,7 @@ function MiniMap({
           const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
 
           return (
-            <MiniMapNode
+            <NodeComponent
               key={node.id}
               x={x}
               y={y}

packages/minimap/src/MiniMapNode.tsx

@@ -1,23 +1,7 @@
 import { memo } from 'react';
-import type { CSSProperties, MouseEvent } from 'react';
+import type { MiniMapNodeProps } from './types';
 import cc from 'classcat';
 
-interface MiniMapNodeProps {
-  id: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  borderRadius: number;
-  className: string;
-  color: string;
-  shapeRendering: string;
-  strokeColor: string;
-  strokeWidth: number;
-  style?: CSSProperties;
-  onClick?: (event: MouseEvent, id: string) => void;
-}
-
 const MiniMapNode = ({
   id,
   x,

packages/minimap/src/types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { HTMLAttributes, MouseEvent } from 'react';
+import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
 
 export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
@@ -10,6 +10,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
   nodeBorderRadius?: number;
   nodeStrokeWidth?: number;
+  nodeComponent?: ComponentType<MiniMapNodeProps>;
   maskColor?: string;
   maskStrokeColor?: string;
   maskStrokeWidth?: number;
@@ -20,3 +21,19 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   zoomable?: boolean;
   ariaLabel?: string | null;
 };
+
+export interface MiniMapNodeProps {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  borderRadius: number;
+  className: string;
+  color: string;
+  shapeRendering: string;
+  strokeColor: string;
+  strokeWidth: number;
+  style?: CSSProperties;
+  onClick?: (event: MouseEvent, id: string) => void;
+}