Added checks for zero grid sizes

src/components/map/MapGrid.js

@@ -11,6 +11,8 @@ import { getStrokeWidth } from "../../helpers/drawing";
 import { getImageLightness } from "../../helpers/image";
 
 function MapGrid({ map, strokeWidth }) {
+  const { mapWidth, mapHeight } = useContext(MapInteractionContext);
+
   let mapSourceMap = map;
   // Use lowest resolution for grid lightness
   if (map && map.type === "file" && map.resolutions) {
@@ -22,16 +24,28 @@ function MapGrid({ map, strokeWidth }) {
   const mapSource = useDataSource(mapSourceMap, defaultMapSources);
   const [mapImage, mapLoadingStatus] = useImage(mapSource);
 
+  const [isImageLight, setIsImageLight] = useState(true);
+
+  // When the map changes find the average lightness of its pixels
+  useEffect(() => {
+    if (mapLoadingStatus === "loaded") {
+      setIsImageLight(getImageLightness(mapImage));
+    }
+  }, [mapImage, mapLoadingStatus]);
+
   const gridX = map && map.grid.size.x;
   const gridY = map && map.grid.size.y;
+
+  if (!gridX || !gridY) {
+    return null;
+  }
+
   const gridSizeNormalized = {
-    x: gridX ? 1 / gridX : 0,
+    x: 1 / gridX,
-    y: gridY ? 1 / gridY : 0,
+    y: 1 / gridY,
   };
   const gridInset = map && map.grid.inset;
 
-  const { mapWidth, mapHeight } = useContext(MapInteractionContext);
-
   const insetWidth = (gridInset.bottomRight.x - gridInset.topLeft.x) * mapWidth;
   const insetHeight =
     (gridInset.bottomRight.y - gridInset.topLeft.y) * mapHeight;
@@ -42,15 +56,6 @@ function MapGrid({ map, strokeWidth }) {
   const offsetX = gridInset.topLeft.x * mapWidth * -1;
   const offsetY = gridInset.topLeft.y * mapHeight * -1;
 
-  const [isImageLight, setIsImageLight] = useState(true);
-
-  // When the map changes find the average lightness of its pixels
-  useEffect(() => {
-    if (mapLoadingStatus === "loaded") {
-      setIsImageLight(getImageLightness(mapImage));
-    }
-  }, [mapImage, mapLoadingStatus]);
-
   const lines = [];
   for (let x = 1; x < gridX; x++) {
     lines.push(

src/components/map/MapGridEditor.js

@@ -15,6 +15,24 @@ function MapGridEditor({ map, onGridChange }) {
 
   const mapSize = { x: mapWidth, y: mapHeight };
 
+  function getHandlePositions() {
+    const topLeft = Vector2.multiply(map.grid.inset.topLeft, mapSize);
+    const bottomRight = Vector2.multiply(map.grid.inset.bottomRight, mapSize);
+
+    const size = Vector2.subtract(bottomRight, topLeft);
+    const offset = Vector2.multiply(topLeft, -1);
+
+    return {
+      topLeft,
+      topRight: { x: bottomRight.x, y: topLeft.y },
+      bottomRight,
+      bottomLeft: { x: topLeft.x, y: bottomRight.y },
+      size,
+      offset,
+    };
+  }
+  const handlePositions = getHandlePositions();
+
   const handlePreviousPositionRef = useRef();
 
   function handleScaleCircleDragStart(event) {
@@ -127,23 +145,6 @@ function MapGridEditor({ map, onGridChange }) {
     }
   }
 
-  function getHandlePositions() {
-    const topLeft = Vector2.multiply(map.grid.inset.topLeft, mapSize);
-    const bottomRight = Vector2.multiply(map.grid.inset.bottomRight, mapSize);
-
-    const size = Vector2.subtract(bottomRight, topLeft);
-    const offset = Vector2.multiply(topLeft, -1);
-
-    return {
-      topLeft,
-      topRight: { x: bottomRight.x, y: topLeft.y },
-      bottomRight,
-      bottomLeft: { x: topLeft.x, y: bottomRight.y },
-      size,
-      offset,
-    };
-  }
-
   function getHandleNormalizedPosition(handle) {
     return Vector2.divide({ x: handle.x(), y: handle.y() }, mapSize);
   }
@@ -174,8 +175,6 @@ function MapGridEditor({ map, onGridChange }) {
     strokeWidth: editCircleRadius / 10,
   };
 
-  const handlePositions = getHandlePositions();
-
   return (
     <Group>
       <Rect

src/components/map/MapSettings.js

@@ -36,14 +36,16 @@ function MapSettings({
   }
 
   function handleGridSizeXChange(event) {
-    const value = parseInt(event.target.value);
+    const value = parseInt(event.target.value) || 0;
     const gridY = map.grid.size.y;
 
     let inset = map.grid.inset;
 
-    const gridScale =
+    if (value > 0) {
-      ((inset.bottomRight.x - inset.topLeft.x) * map.width) / value;
+      const gridScale =
-    inset.bottomRight.y = (gridY * gridScale) / map.height;
+        ((inset.bottomRight.x - inset.topLeft.x) * map.width) / value;
+      inset.bottomRight.y = (gridY * gridScale) / map.height;
+    }
 
     onSettingsChange("grid", {
       ...map.grid,
@@ -56,14 +58,16 @@ function MapSettings({
   }
 
   function handleGridSizeYChange(event) {
-    const value = parseInt(event.target.value);
+    const value = parseInt(event.target.value) || 0;
     const gridX = map.grid.size.x;
 
     let inset = map.grid.inset;
 
-    const gridScale =
+    if (value > 0) {
-      ((inset.bottomRight.x - inset.topLeft.x) * map.width) / gridX;
+      const gridScale =
-    inset.bottomRight.y = (value * gridScale) / map.height;
+        ((inset.bottomRight.x - inset.topLeft.x) * map.width) / gridX;
+      inset.bottomRight.y = (value * gridScale) / map.height;
+    }
 
     onSettingsChange("grid", {
       ...map.grid,