Added grid inset to map snapping

This commit is contained in:
Mitchell McCaffrey 2020-10-09 14:50:51 +11:00
parent f851b01f47
commit e92a9acb5a
4 changed files with 42 additions and 12 deletions

View File

@ -42,9 +42,10 @@ function Map({
const gridX = map && map.grid.size.x;
const gridY = map && map.grid.size.y;
const inset = map && map.grid.inset;
const gridSizeNormalized = {
x: gridX ? 1 / gridX : 0,
y: gridY ? 1 / gridY : 0,
x: gridX ? (inset.bottomRight.x - inset.topLeft.x) / gridX : 0,
y: gridY ? (inset.bottomRight.y - inset.topLeft.y) / gridY : 0,
};
const tokenSizePercent = gridSizeNormalized.x;

View File

@ -40,12 +40,13 @@ function MapGrid({ map, strokeWidth }) {
return null;
}
const gridSizeNormalized = {
x: 1 / gridX,
y: 1 / gridY,
};
const gridInset = map && map.grid.inset;
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) * mapWidth;
const insetHeight =
(gridInset.bottomRight.y - gridInset.topLeft.y) * mapHeight;

View File

@ -82,15 +82,29 @@ function MapToken({
const tokenGroup = event.target;
// Snap to corners of grid
if (map.snapToGrid) {
const offset = Vector2.multiply(map.grid.inset.topLeft, {
x: mapWidth,
y: mapHeight,
});
const position = {
x: tokenGroup.x() + tokenGroup.width() / 2,
y: tokenGroup.y() + tokenGroup.height() / 2,
};
const gridSize = {
x: mapWidth / map.grid.size.x,
y: mapHeight / map.grid.size.y,
x:
(mapWidth *
(map.grid.inset.bottomRight.x - map.grid.inset.topLeft.x)) /
map.grid.size.x,
y:
(mapHeight *
(map.grid.inset.bottomRight.x - map.grid.inset.topLeft.x)) /
map.grid.size.y,
};
const gridSnap = Vector2.roundTo(position, gridSize);
// Transform into offset space, round, then transform back
const gridSnap = Vector2.add(
Vector2.roundTo(Vector2.subtract(position, offset), gridSize),
offset
);
const gridDistance = Vector2.length(Vector2.subtract(gridSnap, position));
const minGrid = Vector2.min(gridSize);
if (gridDistance < minGrid * snappingThreshold) {

View File

@ -14,6 +14,7 @@ export function getBrushPositionForTool(
shapes
) {
let position = brushPosition;
const useGridSnappning =
map.snapToGrid &&
((tool === "drawing" &&
@ -25,13 +26,26 @@ export function getBrushPositionForTool(
if (useGridSnappning) {
// Snap to corners of grid
const gridSnap = Vector2.roundTo(position, gridSize);
// Subtract offset to transform into offset space then add it back transform back
const offset = map.grid.inset.topLeft;
const gridSnap = Vector2.add(
Vector2.roundTo(Vector2.subtract(position, offset), gridSize),
offset
);
const gridDistance = Vector2.length(Vector2.subtract(gridSnap, position));
// Snap to center of grid
// Subtract offset and half size to transform it into offset half space then transform it back
const halfSize = Vector2.multiply(gridSize, 0.5);
const centerSnap = Vector2.add(
Vector2.roundTo(position, gridSize),
Vector2.multiply(gridSize, 0.5)
Vector2.add(
Vector2.roundTo(
Vector2.subtract(Vector2.subtract(position, offset), halfSize),
gridSize
),
halfSize
),
offset
);
const centerDistance = Vector2.length(
Vector2.subtract(centerSnap, position)