Merge pull request #1099 from verluci/main

Fixed minimap node borders on Safari, Chrome, etc

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -9,6 +9,7 @@ interface MiniMapNodeProps {
   borderRadius: number;
   className: string;
   color: string;
+  shapeRendering: string;
   strokeColor: string;
   strokeWidth: number;
   style?: CSSProperties;
@@ -25,6 +26,7 @@ const MiniMapNode = ({
   strokeWidth,
   className,
   borderRadius,
+  shapeRendering
 }: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
@@ -41,6 +43,7 @@ const MiniMapNode = ({
       fill={fill}
       stroke={strokeColor}
       strokeWidth={strokeWidth}
+      shapeRendering={shapeRendering}
     />
   );
 };

src/additional-components/MiniMap/index.tsx

@@ -17,6 +17,8 @@ export interface MiniMapProps extends HTMLAttributes<SVGSVGElement> {
   maskColor?: string;
 }
 
+declare const window: any;
+
 const defaultWidth = 200;
 const defaultHeight = 150;
 
@@ -62,6 +64,7 @@ const MiniMap = ({
   const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
   const width = viewWidth + offset * 2;
   const height = viewHeight + offset * 2;
+  const shapeRendering = (typeof window === "undefined" || !!window.chrome) ?  "crispEdges" : "geometricPrecision";
 
   return (
     <svg
@@ -86,6 +89,7 @@ const MiniMap = ({
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}
             strokeWidth={nodeStrokeWidth}
+            shapeRendering={shapeRendering}
           />
         ))}
       <path

src/style.css

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