alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
moklick
2021-04-14 10:11:36 +02:00
parent d5b84afcc1
commit 9fa5347f00
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/src/Overview/index.tsx
View File

@@ -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>
);
};

2
src/additional-components/Background/index.tsx
View File

@@ -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

4
src/additional-components/Background/utils.tsx
View File

@@ -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} />;
};