diff --git a/src/components/map/MapEditor.js b/src/components/map/MapEditor.js
index a6b97de..fc28d1e 100644
--- a/src/components/map/MapEditor.js
+++ b/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 (
-
-
+ {showGridControls && }
+ {showGridControls && (
+
+ )}
+ {gridChanged && (
+
+
+
+ )}
+ setShowGridControls(!showGridControls)}
+ bg="overlay"
+ sx={{ borderRadius: "50%", position: "absolute", bottom: 0, right: 0 }}
+ m={2}
+ p="6px"
+ >
+ {showGridControls ? : }
+
);
}
diff --git a/src/components/map/MapGridEditor.js b/src/components/map/MapGridEditor.js
index 1deb98e..fdb69ab 100644
--- a/src/components/map/MapGridEditor.js
+++ b/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) {
diff --git a/src/icons/GridOffIcon.js b/src/icons/GridOffIcon.js
new file mode 100644
index 0000000..a1287c2
--- /dev/null
+++ b/src/icons/GridOffIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function GridOffIcon() {
+ return (
+
+ );
+}
+
+export default GridOffIcon;
diff --git a/src/icons/GridOnIcon.js b/src/icons/GridOnIcon.js
new file mode 100644
index 0000000..1796b30
--- /dev/null
+++ b/src/icons/GridOnIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function GridOnIcon() {
+ return (
+
+ );
+}
+
+export default GridOnIcon;