feat(minimap): add offsetScale and selected class name

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -58,7 +58,8 @@ function MiniMap({
   zoomable = false,
   ariaLabel = 'React Flow mini map',
   inversePan,
-  zoomStep,
+  zoomStep = 10,
+  offsetScale = 5,
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
@@ -70,7 +71,7 @@ function MiniMap({
   const viewScale = Math.max(scaledWidth, scaledHeight);
   const viewWidth = viewScale * elementWidth;
   const viewHeight = viewScale * elementHeight;
-  const offset = 5 * viewScale;
+  const offset = offsetScale * viewScale;
   const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
   const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
   const width = viewWidth + offset * 2;

packages/react/src/additional-components/MiniMap/MiniMapNode.tsx

@@ -16,6 +16,7 @@ function MiniMapNode({
   className,
   borderRadius,
   shapeRendering,
+  selected,
   onClick,
 }: MiniMapNodeProps) {
   const { background, backgroundColor } = style || {};
@@ -23,7 +24,7 @@ function MiniMapNode({
 
   return (
     <rect
-      className={cc(['react-flow__minimap-node', className])}
+      className={cc(['react-flow__minimap-node', { selected }, className])}
       x={x}
       y={y}
       rx={borderRadius}

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -47,6 +47,7 @@ function MiniMapNodes({
             width={node.width!}
             height={node.height!}
             style={node.style}
+            selected={!!node.selected}
             className={nodeClassNameFunc(node)}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}

packages/react/src/additional-components/MiniMap/types.ts

@@ -24,6 +24,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   ariaLabel?: string | null;
   inversePan?: boolean;
   zoomStep?: number;
+  offsetScale?: number;
 };
 
 export type MiniMapNodes = Pick<
@@ -46,5 +47,6 @@ export type MiniMapNodeProps = {
   strokeColor: string;
   strokeWidth: number;
   style?: CSSProperties;
+  selected: boolean;
   onClick?: (event: MouseEvent, id: string) => void;
 };