refactor(background): use background position for positioning dots and lines #356

This commit is contained in:
moklick
2020-07-26 17:12:50 +02:00
parent 0d2bdf7ce8
commit cdfc311942
4 changed files with 18 additions and 26 deletions
+4 -10
View File
@@ -1,13 +1,7 @@
export const createGridLinesPath = (xOffset: number, yOffset: number, scaledGap: number): string => {
const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
return `M${x} 0 V${scaledGap} M0 ${y} H${scaledGap}`;
export const createGridLinesPath = (scaledGap: number, strokeWidth: number, stroke: string): string => {
return `<path stroke="${stroke}" strokeWidth="${strokeWidth}" d="M0 0 V${scaledGap} M0 0 H${scaledGap}" />`;
};
export const createGridDotsPath = (xOffset: number, yOffset: number, scaledGap: number, size: number): string => {
const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
export const createGridDotsPath = (size: number, fill: string): string => {
return `<circle cx="${size}" cy="${size}" r="${size}" fill="${fill}" />`;
};