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

refactor(background): use repeating inline svg as bg pattern #356

Browse Source
This commit is contained in:
moklick
2020-07-25 15:06:58 +02:00
parent 3da7efae35
commit 0d2bdf7ce8
3 changed files with 22 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Background/utils.ts
+8 -32
View File
@@ -1,37 +1,13 @@
export const createGridLinesPath = (
width: number,
height: number,
xOffset: number,
yOffset: number,
gap: number
): string => {
const lineCountX = Math.ceil(width / gap) + 1;
const lineCountY = Math.ceil(height / gap) + 1;
export const createGridLinesPath = (xOffset: number, yOffset: number, scaledGap: number): string => {
const x = xOffset < 0 ? scaledGap + xOffset : xOffset;
const y = yOffset < 0 ? scaledGap + yOffset : yOffset;
const xValues = Array.from({ length: lineCountX }, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
const yValues = Array.from({ length: lineCountY }, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
return [...xValues, ...yValues].join(' ');
return `M${x} 0 V${scaledGap} M0 ${y} H${scaledGap}`;
};
export const createGridDotsPath = (
width: number,
height: number,
xOffset: number,
yOffset: number,
gap: number,
size: number
): string => {
const lineCountX = Math.ceil(width / gap) + 1;
const lineCountY = Math.ceil(height / gap) + 1;
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;
const values = Array.from({ length: lineCountX }, (_, col) => {
const x = col * gap + xOffset;
return Array.from({ length: lineCountY }, (_, row) => {
const y = row * gap + yOffset;
return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
}).join(' ');
});
return values.join(' ');
return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
};