Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added undo and redo and map control validation

Browse Source
This commit is contained in:
Mitchell McCaffrey
2020-04-19 13:33:31 +10:00
parent 1f20959940
commit 24de41fee7
4 changed files with 213 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/MapControls.js
View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { Flex, Box, IconButton } from "theme-ui";
import AddMapButton from "./AddMapButton";
@@ -13,9 +13,14 @@ function MapControls({
onMapChange,
onToolChange,
selectedTool,
disabledTools,
onUndo,
onRedo,
undoDisabled,
redoDisabled,
}) {
const [isExpanded, setIsExpanded] = useState(false);
const divider = (
<Box
my={2}
@@ -34,42 +39,71 @@ function MapControls({
alignItems: "center",
}}
>
<IconButton aria-label="Expand More" title="Expand More">
<IconButton
aria-label={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
title={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
onClick={() => setIsExpanded(!isExpanded)}
sx={{
transform: `rotate(${isExpanded ? "0" : "180deg"})`,
display: "block",
}}
>
<ExpandMoreIcon />
</IconButton>
<AddMapButton onMapChange={onMapChange} />
{divider}
<IconButton
aria-label="Pan Tool"
title="Pan Tool"
onClick={() => onToolChange("pan")}
sx={{ color: selectedTool === "pan" ? "primary" : "text" }}
<Box
sx={{
flexDirection: "column",
alignItems: "center",
display: isExpanded ? "flex" : "none",
}}
>
<PanToolIcon />
</IconButton>
<IconButton
aria-label="Brush Tool"
title="Brush Tool"
onClick={() => onToolChange("brush")}
sx={{ color: selectedTool === "brush" ? "primary" : "text" }}
>
<BrushToolIcon />
</IconButton>
<IconButton
aria-label="Erase Tool"
title="Erase Tool"
onClick={() => onToolChange("erase")}
sx={{ color: selectedTool === "erase" ? "primary" : "text" }}
>
<EraseToolIcon />
</IconButton>
{divider}
<IconButton aria-label="Undo" title="Undo">
<UndoIcon />
</IconButton>
<IconButton aria-label="Redo" title="Redo">
<RedoIcon />
</IconButton>
<AddMapButton onMapChange={onMapChange} />
{divider}
<IconButton
aria-label="Pan Tool"
title="Pan Tool"
onClick={() => onToolChange("pan")}
sx={{ color: selectedTool === "pan" ? "primary" : "text" }}
disabled={disabledTools.includes("pan")}
>
<PanToolIcon />
</IconButton>
<IconButton
aria-label="Brush Tool"
title="Brush Tool"
onClick={() => onToolChange("brush")}
sx={{ color: selectedTool === "brush" ? "primary" : "text" }}
disabled={disabledTools.includes("brush")}
>
<BrushToolIcon />
</IconButton>
<IconButton
aria-label="Erase Tool"
title="Erase Tool"
onClick={() => onToolChange("erase")}
sx={{ color: selectedTool === "erase" ? "primary" : "text" }}
disabled={disabledTools.includes("erase")}
>
<EraseToolIcon />
</IconButton>
{divider}
<IconButton
aria-label="Undo"
title="Undo"
onClick={() => onUndo()}
disabled={undoDisabled}
>
<UndoIcon />
</IconButton>
<IconButton
aria-label="Redo"
title="Redo"
onClick={() => onRedo()}
disabled={redoDisabled}
>
<RedoIcon />
</IconButton>
</Box>
</Flex>
);
}