diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index e1c8f73..4b31a7b 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -40,8 +40,8 @@ function Map({
}) {
const { tokensById } = useContext(TokenDataContext);
- const gridX = map && map.gridX;
- const gridY = map && map.gridY;
+ const gridX = map && map.grid.size.x;
+ const gridY = map && map.grid.size.y;
const gridSizeNormalized = {
x: gridX ? 1 / gridX : 0,
y: gridY ? 1 / gridY : 0,
diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.js
index b968e47..f809f61 100644
--- a/src/components/map/MapGrid.js
+++ b/src/components/map/MapGrid.js
@@ -22,8 +22,8 @@ function MapGrid({ map, gridSize }) {
const mapSource = useDataSource(mapSourceMap, defaultMapSources);
const [mapImage, mapLoadingStatus] = useImage(mapSource);
- const gridX = map && map.gridX;
- const gridY = map && map.gridY;
+ const gridX = map && map.grid.size.x;
+ const gridY = map && map.grid.size.y;
const { mapWidth, mapHeight } = useContext(MapInteractionContext);
diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js
index 01233de..4f1fa3e 100644
--- a/src/components/map/MapSettings.js
+++ b/src/components/map/MapSettings.js
@@ -35,6 +35,17 @@ function MapSettings({
}
}
+ function handleGridSizeChange(event, dimension) {
+ const value = parseInt(event.target.value);
+ onSettingsChange("grid", {
+ ...map.grid,
+ size: {
+ ...map.grid.size,
+ [dimension]: value,
+ },
+ });
+ }
+
function getMapSize() {
let size = 0;
if (map.quality === "original") {
@@ -57,10 +68,8 @@ function MapSettings({
- onSettingsChange("gridX", parseInt(e.target.value))
- }
+ value={`${(map && map.grid.size.x) || 0}`}
+ onChange={(e) => handleGridSizeChange(e, "x")}
disabled={mapEmpty || map.type === "default"}
min={1}
my={1}
@@ -71,10 +80,8 @@ function MapSettings({
- onSettingsChange("gridY", parseInt(e.target.value))
- }
+ value={`${(map && map.grid.size.y) || 0}`}
+ onChange={(e) => handleGridSizeChange(e, "y")}
disabled={mapEmpty || map.type === "default"}
min={1}
my={1}
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index 61915a3..5b014ac 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -68,7 +68,7 @@ function MapTiles({
canEdit={
isSelected && selectMode === "single" && selectedMaps.length === 1
}
- badges={[`${map.gridX}x${map.gridY}`]}
+ badges={[`${map.grid.size.x}x${map.grid.size.y}`]}
/>
);
}
diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index 77877d1..0eab316 100644
--- a/src/components/map/MapToken.js
+++ b/src/components/map/MapToken.js
@@ -86,7 +86,10 @@ function MapToken({
x: tokenGroup.x() + tokenGroup.width() / 2,
y: tokenGroup.y() + tokenGroup.height() / 2,
};
- const gridSize = { x: mapWidth / map.gridX, y: mapHeight / map.gridY };
+ const gridSize = {
+ x: mapWidth / map.grid.size.x,
+ y: mapHeight / map.grid.size.y,
+ };
const gridSnap = Vector2.roundTo(position, gridSize);
const gridDistance = Vector2.length(Vector2.subtract(gridSnap, position));
const minGrid = Vector2.min(gridSize);
diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js
index fe81c14..92488de 100644
--- a/src/contexts/MapDataContext.js
+++ b/src/contexts/MapDataContext.js
@@ -45,7 +45,6 @@ export function MapDataProvider({ children }) {
// Emulate the time increasing to avoid sort errors
created: Date.now() + i,
lastModified: Date.now() + i,
- gridType: "grid",
showGrid: false,
snapToGrid: true,
group: "default",
diff --git a/src/database.js b/src/database.js
index d2c92e1..9af1e57 100644
--- a/src/database.js
+++ b/src/database.js
@@ -206,7 +206,7 @@ function loadVersions(db) {
token.lastUsed = token.lastModified;
});
});
- // v1.6.0 - Added map grouping
+ // v1.6.0 - Added map grouping and grid scale and offset
db.version(13)
.stores({})
.upgrade((tx) => {
@@ -215,6 +215,15 @@ function loadVersions(db) {
.toCollection()
.modify((map) => {
map.group = "";
+ map.grid = {
+ size: { x: map.gridX, y: map.gridY },
+ scale: { x: 1, y: 1 },
+ offset: { x: 0, y: 0 },
+ type: "square",
+ };
+ delete map.gridX;
+ delete map.gridY;
+ delete map.gridType;
});
});
// v1.6.0 - Added token grouping
diff --git a/src/maps/index.js b/src/maps/index.js
index 8f1bbbf..d008524 100644
--- a/src/maps/index.js
+++ b/src/maps/index.js
@@ -21,8 +21,12 @@ export const mapSources = {
export const maps = Object.keys(mapSources).map((key) => ({
key,
name: Case.capital(key),
- gridX: 22,
- gridY: 22,
+ grid: {
+ size: { x: 22, y: 22 },
+ scale: { x: 1, y: 1 },
+ offset: { x: 0, y: 0 },
+ type: "square",
+ },
width: 1024,
height: 1024,
type: "default",
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index 86edd84..d7ace9d 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -21,8 +21,6 @@ import AuthContext from "../contexts/AuthContext";
const defaultMapSize = 22;
const defaultMapProps = {
// Grid type
- // TODO: add support for hex horizontal and hex vertical
- gridType: "grid",
showGrid: false,
snapToGrid: true,
quality: "original",
@@ -167,8 +165,12 @@ function SelectMapModal({
resolutions,
name,
type: "file",
- gridX: fileGridX,
- gridY: fileGridY,
+ grid: {
+ size: { x: fileGridX, y: fileGridY },
+ scale: { x: 1, y: 1 },
+ offset: { x: 0, y: 0 },
+ type: "square",
+ },
width: image.width,
height: image.height,
id: shortid.generate(),