Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 3761x 3761x 3761x 3761x 3761x 3761x 3761x 3761x 3761x 3761x 148501x 3761x 136555x 3761x 285056x | import { KonvaNodeComponent, Layer, Line } from "react-konva";
export function Gridlines({
x,
y,
w,
h,
zoom,
spacing,
color,
}: {
x: number;
y: number;
w: number;
h: number;
zoom: number;
spacing: number;
color: string;
}) {
// Bounding box of visible area on the canvas
const minX = -x / zoom;
const minY = -y / zoom;
const maxX = (w - x) / zoom;
const maxY = (h - y) / zoom;
// Start the grid 10* spacing away from the visible area, to account for dragging
const startX = minX - (minX % spacing) - spacing * 10;
const startY = minY - (minY % spacing) - spacing * 10;
const endX = maxX + (maxX % spacing) + spacing * 10;
const endY = maxY + (maxY % spacing) + spacing * 10;
const lines: number[][] = [];
for (let i = startX; i < endX; i += spacing) {
lines.push([i, startY, i, endY]);
}
for (let i = startY; i < endY; i += spacing) {
lines.push([startX, i, endX, i]);
}
return (
<Layer>
{lines.map((line, i) => (
<Line key={i} points={line} stroke={color} strokeWidth={1} />
))}
</Layer>
);
}
|