fix(bg): dont cut off dots closes #1088

example/src/Overview/index.tsx

@@ -192,7 +192,7 @@ const OverviewFlow = () => {
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />
-      <Background color="#aaa" gap={16} />
+      <Background color="#aaa" gap={20} size={1} />
     </ReactFlow>
   );
 };

src/additional-components/Background/index.tsx

@@ -36,7 +36,7 @@ const Background: FC<BackgroundProps> = ({
 
   const isLines = variant === BackgroundVariant.Lines;
   const bgColor = color ? color : defaultColors[variant];
-  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
+  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * scale, bgColor);
 
   return (
     <svg

src/additional-components/Background/utils.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string): React.ReactElement => {
-  return <path stroke={stroke} strokeWidth={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`}  />;
+  return <path stroke={stroke} strokeWidth={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />;
 };
 
 export const createGridDotsPath = (size: number, fill: string): React.ReactElement => {
-  return <circle cx={size / 2} cy={size / 2} r={size} fill={fill} />;
+  return <circle cx={size} cy={size} r={size} fill={fill} />;
 };