Added grid scale and offset to maps and refactored into grid object

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,

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);
 

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({
           <Input
             type="number"
             name="gridX"
-            value={`${(map && map.gridX) || 0}`}
-            onChange={(e) =>
-              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({
           <Input
             type="number"
             name="gridY"
-            value={`${(map && map.gridY) || 0}`}
-            onChange={(e) =>
-              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}

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}`]}
       />
     );
   }

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);

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",

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

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",

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(),