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;