feat(minimap): add nodeStrokeWidth option closes #862

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -10,10 +10,22 @@ interface MiniMapNodeProps {
   className: string;
   color: string;
   strokeColor: string;
+  strokeWidth: number;
   style?: CSSProperties;
 }
 
-const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className, borderRadius }: MiniMapNodeProps) => {
+const MiniMapNode = ({
+  x,
+  y,
+  width,
+  height,
+  style,
+  color,
+  strokeColor,
+  strokeWidth,
+  className,
+  borderRadius,
+}: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
 
@@ -28,7 +40,7 @@ const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className
       height={height}
       fill={fill}
       stroke={strokeColor}
-      strokeWidth={2}
+      strokeWidth={strokeWidth}
     />
   );
 };

src/additional-components/MiniMap/index.tsx

@@ -13,6 +13,7 @@ export interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
   nodeStrokeColor?: string | StringFunc;
   nodeClassName?: string | StringFunc;
   nodeBorderRadius?: number;
+  nodeStrokeWidth?: number;
   maskColor?: string;
 }
 
@@ -26,6 +27,7 @@ const MiniMap = ({
   nodeColor = '#fff',
   nodeClassName = '',
   nodeBorderRadius = 5,
+  nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
 }: MiniMapProps) => {
   const containerWidth = useStoreState((s) => s.width);
@@ -83,6 +85,7 @@ const MiniMap = ({
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}
+            strokeWidth={nodeStrokeWidth}
           />
         ))}
       <path

src/style.css

@@ -178,4 +178,8 @@
   z-index: 5;
   bottom: 10px;
   right: 10px;
+
+  &-node {
+    shape-rendering: crispedges;
+  }
 }