Fix errors with fog disappearing on zoom and crashing on zooming out

src/components/map/MapFog.js

@@ -428,11 +428,21 @@ function MapFog({
     const canvas = fogGroup.getChildren()[0].getCanvas();
     const pixelRatio = canvas.pixelRatio || 1;
 
+    // Constrain fog buffer to the map resolution
+    const fogRect = fogGroup.getClientRect();
+    const maxMapSize = Math.max(map.width, map.height);
+    const maxFogSize =
+      Math.max(fogRect.width, fogRect.height) / debouncedStageScale;
+    const maxPixelRatio = maxMapSize / maxFogSize;
+
     fogGroup.cache({
-      pixelRatio: Math.min(debouncedStageScale * pixelRatio, 20),
+      pixelRatio: Math.min(
+        Math.max(debouncedStageScale * pixelRatio, 1),
+        maxPixelRatio
+      ),
     });
     fogGroup.getLayer().draw();
-  }, [fogShapes, editable, active, debouncedStageScale, mapWidth]);
+  }, [fogShapes, editable, active, debouncedStageScale, mapWidth, map]);
 
   return (
     <Group>

src/components/map/MapToken.js

@@ -192,14 +192,22 @@ function MapToken({
       tokenWidth > 0 &&
       tokenHeight > 0
     ) {
+      const maxImageSize = Math.max(token.width, token.height);
+      const maxTokenSize = Math.max(tokenWidth, tokenHeight);
+      // Constrain image buffer to original image size
+      const maxRatio = maxImageSize / maxTokenSize;
+
       image.cache({
-        pixelRatio: debouncedStageScale * pixelRatio,
+        pixelRatio: Math.min(
+          Math.max(debouncedStageScale * pixelRatio, 1),
+          maxRatio
+        ),
       });
       image.drawHitFromCache();
       // Force redraw
       image.getLayer().draw();
     }
-  }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus]);
+  }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus, token]);
 
   // Animate to new token positions if edited by others
   const tokenX = tokenState.x * mapWidth;