From f150c87997ad7b8696a36760156513e748bdd2c8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 14 Aug 2023 16:22:36 +0200
Subject: [PATCH] feat(minimap): add offsetScale and selected class name

---
 packages/react/src/additional-components/MiniMap/MiniMap.tsx | 5 +++--
 .../react/src/additional-components/MiniMap/MiniMapNode.tsx  | 3 ++-
 .../react/src/additional-components/MiniMap/MiniMapNodes.tsx | 1 +
 packages/react/src/additional-components/MiniMap/types.ts    | 2 ++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
index 86212934..9109a910 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx
+++ b/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;
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
index 9cec5d20..5fe70462 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/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}
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index b4311013..21bb8fc5 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/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}
diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts
index 870cbf0b..323374cf 100644
--- a/packages/react/src/additional-components/MiniMap/types.ts
+++ b/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;
 };