From f1dce05830d941abe3c707901bb52957cbcb4579 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 8 Feb 2021 18:51:44 +1100
Subject: [PATCH] Fix grid not showing in editor, and width resize

---
 src/components/Grid.js   | 31 ++++++++++++++++---------------
 src/hooks/useDebounce.js |  2 +-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/Grid.js b/src/components/Grid.js
index cea981e..998a759 100644
--- a/src/components/Grid.js
+++ b/src/components/Grid.js
@@ -19,26 +19,27 @@ function Grid({ strokeWidth, stroke }) {
   } = useGrid();
 
   const gridGroupRef = useRef();
-  const { stageScale } = useMapInteraction();
+  const { stageScale, mapWidth } = useMapInteraction();
   const debouncedStageScale = useDebounce(stageScale, 50);
-
   useEffect(() => {
     const gridGroup = gridGroupRef.current;
-    if (gridGroup && grid?.size.x && grid?.size.y) {
+    if (gridGroup && grid?.size.x && grid?.size.y && debouncedStageScale) {
       const gridRect = gridGroup.getClientRect();
-      // 150 pixels per grid cell
-      const maxMapSize = Math.max(grid.size.x, grid.size.y) * 150;
-      const maxGridSize =
-        Math.max(gridRect.width, gridRect.height) / debouncedStageScale;
-      const maxPixelRatio = maxMapSize / maxGridSize;
-      gridGroup.cache({
-        pixelRatio: Math.min(
-          Math.max(debouncedStageScale * 2, 1),
-          maxPixelRatio
-        ),
-      });
+      if (gridRect.width > 0 && gridRect.height > 0) {
+        // 150 pixels per grid cell
+        const maxMapSize = Math.max(grid.size.x, grid.size.y) * 150;
+        const maxGridSize =
+          Math.max(gridRect.width, gridRect.height) / debouncedStageScale;
+        const maxPixelRatio = maxMapSize / maxGridSize;
+        gridGroup.cache({
+          pixelRatio: Math.min(
+            Math.max(debouncedStageScale * 2, 1),
+            maxPixelRatio
+          ),
+        });
+      }
     }
-  }, [grid, debouncedStageScale]);
+  }, [grid, debouncedStageScale, mapWidth]);
 
   if (!grid?.size.x || !grid?.size.y) {
     return null;
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
index 057068c..bf82898 100644
--- a/src/hooks/useDebounce.js
+++ b/src/hooks/useDebounce.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
+  const [debouncedValue, setDebouncedValue] = useState();
 
   useEffect(() => {
     const timeout = setTimeout(() => {