Added default map inset and grid size heuristic

src/components/map/MapEditor.js

@@ -6,6 +6,7 @@ import ReactResizeDetector from "react-resize-detector";
 import useMapImage from "../../helpers/useMapImage";
 import usePreventOverscroll from "../../helpers/usePreventOverscroll";
 import useStageInteraction from "../../helpers/useStageInteraction";
+import { getMapDefaultInset } from "../../helpers/map";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 
@@ -36,6 +37,13 @@ function MapEditor({ map, onSettingsChange }) {
     mapHeight = map ? stageWidth * (map.height / map.width) : stageHeight;
   }
 
+  const defaultInset = getMapDefaultInset(
+    map.width,
+    map.height,
+    map.grid.size.x,
+    map.grid.size.y
+  );
+
   const stageTranslateRef = useRef({ x: 0, y: 0 });
   const mapLayerRef = useRef();
   const [preventMapInteraction, setPreventMapInteraction] = useState(false);
@@ -94,7 +102,7 @@ function MapEditor({ map, onSettingsChange }) {
   function handleMapReset() {
     onSettingsChange("grid", {
       ...map.grid,
-      inset: { topLeft: { x: 0, y: 0 }, bottomRight: { x: 1, y: 1 } },
+      inset: defaultInset,
     });
   }
 
@@ -110,10 +118,10 @@ function MapEditor({ map, onSettingsChange }) {
   };
 
   const gridChanged =
-    map.grid.inset.topLeft.x !== 0 ||
-    map.grid.inset.topLeft.y !== 0 ||
-    map.grid.inset.bottomRight.x !== 1 ||
-    map.grid.inset.bottomRight.y !== 1;
+    map.grid.inset.topLeft.x !== defaultInset.topLeft.x ||
+    map.grid.inset.topLeft.y !== defaultInset.topLeft.y ||
+    map.grid.inset.bottomRight.x !== defaultInset.bottomRight.x ||
+    map.grid.inset.bottomRight.y !== defaultInset.bottomRight.y;
 
   return (
     <Box

src/components/map/MapSettings.js

@@ -35,13 +35,42 @@ function MapSettings({
     }
   }
 
-  function handleGridSizeChange(event, dimension) {
+  function handleGridSizeXChange(event) {
     const value = parseInt(event.target.value);
+    const gridY = map.grid.size.y;
+
+    let inset = map.grid.inset;
+
+    const gridScale =
+      ((inset.bottomRight.x - inset.topLeft.x) * map.width) / value;
+    inset.bottomRight.y = (gridY * gridScale) / map.height;
+
     onSettingsChange("grid", {
       ...map.grid,
+      inset,
       size: {
         ...map.grid.size,
-        [dimension]: value,
+        x: value,
+      },
+    });
+  }
+
+  function handleGridSizeYChange(event) {
+    const value = parseInt(event.target.value);
+    const gridX = map.grid.size.x;
+
+    let inset = map.grid.inset;
+
+    const gridScale =
+      ((inset.bottomRight.x - inset.topLeft.x) * map.width) / gridX;
+    inset.bottomRight.y = (value * gridScale) / map.height;
+
+    onSettingsChange("grid", {
+      ...map.grid,
+      inset,
+      size: {
+        ...map.grid.size,
+        y: value,
       },
     });
   }
@@ -69,7 +98,7 @@ function MapSettings({
             type="number"
             name="gridX"
             value={`${(map && map.grid.size.x) || 0}`}
-            onChange={(e) => handleGridSizeChange(e, "x")}
+            onChange={handleGridSizeXChange}
             disabled={mapEmpty || map.type === "default"}
             min={1}
             my={1}
@@ -81,7 +110,7 @@ function MapSettings({
             type="number"
             name="gridY"
             value={`${(map && map.grid.size.y) || 0}`}
-            onChange={(e) => handleGridSizeChange(e, "y")}
+            onChange={handleGridSizeYChange}
             disabled={mapEmpty || map.type === "default"}
             min={1}
             my={1}