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>
   );
 }

src/components/map/MapGridEditor.js

@@ -62,7 +62,7 @@ function MapGridEditor({ map, onGridChange }) {
   const editRectProps = {
     fill: "transparent",
     stroke: "rgba(255, 255, 255, 0.75)",
-    strokeWidth: editCircleRadius / 5,
+    strokeWidth: editCircleRadius / 10,
   };
 
   function getHandleInset(handle) {

src/icons/GridOffIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function GridOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M8 4v.89l2 2V4h4v4h-2.89l2 2H14v.89l2 2V10h4v4h-2.89l2 2H20v.89l2 2V4c0-1.1-.9-2-2-2H5.11l2 2H8zm8 0h3c.55 0 1 .45 1 1v3h-4V4zm6.16 17.88L2.12 1.84c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L2 4.55V20c0 1.1.9 2 2 2h15.45l1.3 1.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.03 0-1.42zM10 12.55L11.45 14H10v-1.45zm-6-6L5.45 8H4V6.55zM8 20H5c-.55 0-1-.45-1-1v-3h4v4zm0-6H4v-4h3.45l.55.55V14zm6 6h-4v-4h3.45l.55.55V20zm2 0v-1.45L17.45 20H16z" />
+    </svg>
+  );
+}
+
+export default GridOffIcon;

src/icons/GridOnIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function GridOnIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H5c-.55 0-1-.45-1-1v-3h4v4zm0-6H4v-4h4v4zm0-6H4V5c0-.55.45-1 1-1h3v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm5 12h-3v-4h4v3c0 .55-.45 1-1 1zm1-6h-4v-4h4v4zm0-6h-4V4h3c.55 0 1 .45 1 1v3z" />
+    </svg>
+  );
+}
+
+export default GridOnIcon;