114 lines
3.1 KiB
JavaScript
114 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import { Line, Group, RegularPolygon } from "react-konva";
|
|
|
|
import { getStrokeWidth } from "../helpers/drawing";
|
|
import {
|
|
getCellSize,
|
|
getCellLocation,
|
|
gridClipFunction,
|
|
shouldClipCell,
|
|
} from "../helpers/grid";
|
|
|
|
function Grid({ grid, strokeWidth, width, height, stroke }) {
|
|
if (!grid?.size.x || !grid?.size.y) {
|
|
return null;
|
|
}
|
|
|
|
const gridSizeNormalized = {
|
|
x: (grid.inset.bottomRight.x - grid.inset.topLeft.x) / grid.size.x,
|
|
y: (grid.inset.bottomRight.y - grid.inset.topLeft.y) / grid.size.y,
|
|
};
|
|
|
|
const insetWidth = (grid.inset.bottomRight.x - grid.inset.topLeft.x) * width;
|
|
const insetHeight =
|
|
(grid.inset.bottomRight.y - grid.inset.topLeft.y) * height;
|
|
|
|
const offsetX = grid.inset.topLeft.x * width * -1;
|
|
const offsetY = grid.inset.topLeft.y * height * -1;
|
|
|
|
const cellSize = getCellSize(grid, insetWidth, insetHeight);
|
|
|
|
const shapes = [];
|
|
if (grid.type === "square") {
|
|
for (let x = 1; x < grid.size.x; x++) {
|
|
shapes.push(
|
|
<Line
|
|
key={`grid_x_${x}`}
|
|
points={[x * cellSize.width, 0, x * cellSize.width, insetHeight]}
|
|
stroke={stroke}
|
|
strokeWidth={getStrokeWidth(
|
|
strokeWidth,
|
|
gridSizeNormalized,
|
|
width,
|
|
height
|
|
)}
|
|
opacity={0.5}
|
|
offsetX={offsetX}
|
|
offsetY={offsetY}
|
|
/>
|
|
);
|
|
}
|
|
for (let y = 1; y < grid.size.y; y++) {
|
|
shapes.push(
|
|
<Line
|
|
key={`grid_y_${y}`}
|
|
points={[0, y * cellSize.height, insetWidth, y * cellSize.height]}
|
|
stroke={stroke}
|
|
strokeWidth={getStrokeWidth(
|
|
strokeWidth,
|
|
gridSizeNormalized,
|
|
width,
|
|
height
|
|
)}
|
|
opacity={0.5}
|
|
offsetX={offsetX}
|
|
offsetY={offsetY}
|
|
/>
|
|
);
|
|
}
|
|
} else if (grid.type === "hexVertical" || grid.type === "hexHorizontal") {
|
|
// Start at -1 to overshoot the bounds of the grid to ensure all lines are drawn
|
|
for (let x = -1; x < grid.size.x; x++) {
|
|
for (let y = -1; y < grid.size.y; y++) {
|
|
const cellLocation = getCellLocation(grid, x, y, cellSize);
|
|
shapes.push(
|
|
<Group
|
|
key={`grid_${x}_${y}`}
|
|
clipFunc={
|
|
shouldClipCell(grid, x, y) &&
|
|
((context) => gridClipFunction(context, grid, x, y, cellSize))
|
|
}
|
|
x={cellLocation.x}
|
|
y={cellLocation.y}
|
|
offsetX={offsetX}
|
|
offsetY={offsetY}
|
|
>
|
|
<RegularPolygon
|
|
sides={6}
|
|
radius={cellSize.radius}
|
|
stroke={stroke}
|
|
strokeWidth={getStrokeWidth(
|
|
strokeWidth,
|
|
gridSizeNormalized,
|
|
width,
|
|
height
|
|
)}
|
|
opacity={0.5}
|
|
rotation={grid.type === "hexVertical" ? 0 : 90}
|
|
/>
|
|
</Group>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
return <Group>{shapes}</Group>;
|
|
}
|
|
|
|
Grid.defaultProps = {
|
|
strokeWidth: 0.1,
|
|
stroke: "white",
|
|
};
|
|
|
|
export default Grid;
|