From 9fa5347f00099c107fbd040d9133895667e24db3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 14 Apr 2021 10:11:36 +0200
Subject: [PATCH] fix(bg): dont cut off dots closes #1088

---
 example/src/Overview/index.tsx                 | 2 +-
 src/additional-components/Background/index.tsx | 2 +-
 src/additional-components/Background/utils.tsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx
index c35eeb2a..b6250a69 100644
--- a/example/src/Overview/index.tsx
+++ b/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>
   );
 };
diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx
index 9e8661da..c5543e49 100644
--- a/src/additional-components/Background/index.tsx
+++ b/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
diff --git a/src/additional-components/Background/utils.tsx b/src/additional-components/Background/utils.tsx
index d16fdfc8..3063614f 100644
--- a/src/additional-components/Background/utils.tsx
+++ b/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} />;
 };