Added map grid edit toggle and reset buttons

src/components/map/MapEditor.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Box } from "theme-ui";
+import { Box, IconButton } from "theme-ui";
 import { Stage, Layer, Image } from "react-konva";
 import ReactResizeDetector from "react-resize-detector";
 
@@ -9,6 +9,10 @@ import useStageInteraction from "../../helpers/useStageInteraction";
 
 import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
 
+import ResetMapIcon from "../../icons/ResetMapIcon";
+import GridOnIcon from "../../icons/GridOnIcon";
+import GridOffIcon from "../../icons/GridOffIcon";
+
 import MapGrid from "./MapGrid";
 import MapGridEditor from "./MapGridEditor";
 
@@ -87,6 +91,15 @@ function MapEditor({ map, onSettingsChange }) {
     });
   }
 
+  function handleMapReset() {
+    onSettingsChange("grid", {
+      ...map.grid,
+      inset: { topLeft: { x: 0, y: 0 }, bottomRight: { x: 1, y: 1 } },
+    });
+  }
+
+  const [showGridControls, setShowGridControls] = useState(true);
+
   const mapInteraction = {
     stageScale,
     stageWidth,
@@ -96,6 +109,12 @@ function MapEditor({ map, onSettingsChange }) {
     mapHeight,
   };
 
+  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;
+
   return (
     <Box
       sx={{
@@ -104,6 +123,7 @@ function MapEditor({ map, onSettingsChange }) {
         cursor: "move",
         touchAction: "none",
         outline: "none",
+        position: "relative",
       }}
       bg="muted"
       ref={containerRef}
@@ -121,12 +141,39 @@ function MapEditor({ map, onSettingsChange }) {
           <Layer ref={mapLayerRef}>
             <Image image={mapImageSource} width={mapWidth} height={mapHeight} />
             <MapInteractionProvider value={mapInteraction}>
-              <MapGrid map={map} strokeWidth={0.5} />
-              <MapGridEditor map={map} onGridChange={handleGridChange} />
+              {showGridControls && <MapGrid map={map} strokeWidth={0.5} />}
+              {showGridControls && (
+                <MapGridEditor map={map} onGridChange={handleGridChange} />
+              )}
             </MapInteractionProvider>
           </Layer>
         </Stage>
       </ReactResizeDetector>
+      {gridChanged && (
+        <IconButton
+          title="Reset Grid"
+          aria-label="Reset Grid"
+          onClick={handleMapReset}
+          bg="overlay"
+          sx={{ borderRadius: "50%", position: "absolute", bottom: 0, left: 0 }}
+          m={2}
+        >
+          <ResetMapIcon />
+        </IconButton>
+      )}
+      <IconButton
+        title={showGridControls ? "Hide Grid Controls" : "Show Grid Controls"}
+        aria-label={
+          showGridControls ? "Hide Grid Controls" : "Show Grid Controls"
+        }
+        onClick={() => setShowGridControls(!showGridControls)}
+        bg="overlay"
+        sx={{ borderRadius: "50%", position: "absolute", bottom: 0, right: 0 }}
+        m={2}
+        p="6px"
+      >
+        {showGridControls ? <GridOnIcon /> : <GridOffIcon />}
+      </IconButton>
     </Box>
   );
 }