73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import { Line, Group } from "react-konva";
|
|
|
|
import { getStrokeWidth } from "../helpers/drawing";
|
|
|
|
function Grid({ gridX, gridY, gridInset, strokeWidth, width, height, stroke }) {
|
|
if (!gridX || !gridY) {
|
|
return null;
|
|
}
|
|
|
|
const gridSizeNormalized = {
|
|
x: (gridInset.bottomRight.x - gridInset.topLeft.x) / gridX,
|
|
y: (gridInset.bottomRight.y - gridInset.topLeft.y) / gridY,
|
|
};
|
|
|
|
const insetWidth = (gridInset.bottomRight.x - gridInset.topLeft.x) * width;
|
|
const insetHeight = (gridInset.bottomRight.y - gridInset.topLeft.y) * height;
|
|
|
|
const lineSpacingX = insetWidth / gridX;
|
|
const lineSpacingY = insetHeight / gridY;
|
|
|
|
const offsetX = gridInset.topLeft.x * width * -1;
|
|
const offsetY = gridInset.topLeft.y * height * -1;
|
|
|
|
const lines = [];
|
|
for (let x = 1; x < gridX; x++) {
|
|
lines.push(
|
|
<Line
|
|
key={`grid_x_${x}`}
|
|
points={[x * lineSpacingX, 0, x * lineSpacingX, insetHeight]}
|
|
stroke={stroke}
|
|
strokeWidth={getStrokeWidth(
|
|
strokeWidth,
|
|
gridSizeNormalized,
|
|
width,
|
|
height
|
|
)}
|
|
opacity={0.5}
|
|
offsetX={offsetX}
|
|
offsetY={offsetY}
|
|
/>
|
|
);
|
|
}
|
|
for (let y = 1; y < gridY; y++) {
|
|
lines.push(
|
|
<Line
|
|
key={`grid_y_${y}`}
|
|
points={[0, y * lineSpacingY, insetWidth, y * lineSpacingY]}
|
|
stroke={stroke}
|
|
strokeWidth={getStrokeWidth(
|
|
strokeWidth,
|
|
gridSizeNormalized,
|
|
width,
|
|
height
|
|
)}
|
|
opacity={0.5}
|
|
offsetX={offsetX}
|
|
offsetY={offsetY}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <Group>{lines}</Group>;
|
|
}
|
|
|
|
Grid.defaultProps = {
|
|
strokeWidth: 0.1,
|
|
gridInset: { topLeft: { x: 0, y: 0 }, bottomRight: { x: 1, y: 1 } },
|
|
stroke: "white",
|
|
};
|
|
|
|
export default Grid;
|