Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix triangle drawing with hexes

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-02-13 10:00:30 +11:00
parent 85270859bb
commit c6d87baf99
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map/MapDrawing.js
View File

@ -125,7 +125,9 @@ function MapDrawing({
prevShape.shapeType, prevShape.shapeType,
prevShape.data, prevShape.data,
brushPosition, brushPosition,
gridCellNormalizedSize gridCellNormalizedSize,
mapWidth,
mapHeight
), ),
})); }));
} }

32
src/helpers/drawing.js
View File

@ -113,7 +113,7 @@ export function getDefaultShapeData(type, brushPosition) {
* @param {Vector2} cellSize * @param {Vector2} cellSize
* @returns {Vector2} * @returns {Vector2}
*/ */
export function getGridScale(cellSize) { export function getGridCellRatio(cellSize) {
if (cellSize.x < cellSize.y) { if (cellSize.x < cellSize.y) {
return { x: cellSize.y / cellSize.x, y: 1 }; return { x: cellSize.y / cellSize.x, y: 1 };
} else if (cellSize.y < cellSize.x) { } else if (cellSize.y < cellSize.x) {
@ -135,19 +135,21 @@ export function getUpdatedShapeData(
type, type,
data, data,
brushPosition, brushPosition,
gridCellNormalizedSize gridCellNormalizedSize,
mapWidth,
mapHeight
) { ) {
const gridScale = getGridScale(gridCellNormalizedSize);
if (type === "line") { if (type === "line") {
return { return {
points: [data.points[0], { x: brushPosition.x, y: brushPosition.y }], points: [data.points[0], { x: brushPosition.x, y: brushPosition.y }],
}; };
} else if (type === "circle") { } else if (type === "circle") {
const gridRatio = getGridCellRatio(gridCellNormalizedSize);
const dif = Vector2.subtract(brushPosition, { const dif = Vector2.subtract(brushPosition, {
x: data.x, x: data.x,
y: data.y, y: data.y,
}); });
const scaled = Vector2.multiply(dif, gridScale); const scaled = Vector2.multiply(dif, gridRatio);
const distance = Vector2.length(scaled); const distance = Vector2.length(scaled);
return { return {
...data, ...data,
@ -161,12 +163,15 @@ export function getUpdatedShapeData(
height: dif.y, height: dif.y,
}; };
} else if (type === "triangle") { } else if (type === "triangle") {
// Convert to absolute coordinates
const mapSize = { x: mapWidth, y: mapHeight };
const brushPositionPixel = Vector2.multiply(brushPosition, mapSize);
const points = data.points; const points = data.points;
const dif = Vector2.subtract(brushPosition, points[0]); const startPixel = Vector2.multiply(points[0], mapSize);
// Scale the distance by the grid scale then unscale before adding const dif = Vector2.subtract(brushPositionPixel, startPixel);
const scaled = Vector2.multiply(dif, gridScale); const length = Vector2.length(dif);
const length = Vector2.length(scaled); const direction = Vector2.normalize(dif);
const direction = Vector2.normalize(scaled);
// Get the angle for a triangle who's width is the same as it's length // Get the angle for a triangle who's width is the same as it's length
const angle = Math.atan(length / 2 / (length === 0 ? 1 : length)); const angle = Math.atan(length / 2 / (length === 0 ? 1 : length));
const sideLength = length / Math.cos(angle); const sideLength = length / Math.cos(angle);
@ -174,14 +179,15 @@ export function getUpdatedShapeData(
const leftDir = Vector2.rotateDirection(direction, toDegrees(angle)); const leftDir = Vector2.rotateDirection(direction, toDegrees(angle));
const rightDir = Vector2.rotateDirection(direction, -toDegrees(angle)); const rightDir = Vector2.rotateDirection(direction, -toDegrees(angle));
const leftDirUnscaled = Vector2.divide(leftDir, gridScale); // Convert back to normalized coordinates
const rightDirUnscaled = Vector2.divide(rightDir, gridScale); const leftDirNorm = Vector2.divide(leftDir, mapSize);
const rightDirNorm = Vector2.divide(rightDir, mapSize);
return { return {
points: [ points: [
points[0], points[0],
Vector2.add(Vector2.multiply(leftDirUnscaled, sideLength), points[0]), Vector2.add(Vector2.multiply(leftDirNorm, sideLength), points[0]),
Vector2.add(Vector2.multiply(rightDirUnscaled, sideLength), points[0]), Vector2.add(Vector2.multiply(rightDirNorm, sideLength), points[0]),
], ],
}; };
} }