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

Added map control submenus for brush color and erase all

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-20 11:56:56 +10:00
parent 27d3903e66
commit f5d1cdf60f
4 changed files with 189 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Map.js
View File

@ -43,14 +43,19 @@ function Map({
*/
const [selectedTool, setSelectedTool] = useState("pan");
const [brushColor, setBrushColor] = useState("black");
const [drawnShapes, setDrawnShapes] = useState([]);
function handleShapeAdd(shape) {
onMapDraw({ type: "add", shape });
onMapDraw({ type: "add", shapes: [shape] });
}
function handleShapeRemove(shapeId) {
onMapDraw({ type: "remove", shapeId });
onMapDraw({ type: "remove", shapeIds: [shapeId] });
}
function handleShapeRemoveAll() {
onMapDraw({ type: "remove", shapeIds: drawnShapes.map((s) => s.id) });
}
// Replay the draw actions and convert them to shapes for the map drawing
@ -59,10 +64,12 @@ function Map({
for (let i = 0; i <= drawActionIndex; i++) {
const action = drawActions[i];
if (action.type === "add") {
shapesById[action.shape.id] = action.shape;
for (let shape of action.shapes) {
shapesById[shape.id] = shape;
}
}
if (action.type === "remove") {
shapesById = omit(shapesById, [action.shapeId]);
shapesById = omit(shapesById, action.shapeIds);
}
}
setDrawnShapes(Object.values(shapesById));
@ -267,6 +274,7 @@ function Map({
shapes={drawnShapes}
onShapeAdd={handleShapeAdd}
onShapeRemove={handleShapeRemove}
brushColor={brushColor}
/>
{mapTokens}
</Box>
@ -280,6 +288,9 @@ function Map({
onRedo={onMapDrawRedo}
undoDisabled={drawActionIndex < 0}
redoDisabled={drawActionIndex === drawActions.length - 1}
brushColor={brushColor}
onBrushColorChange={setBrushColor}
onEraseAll={handleShapeRemoveAll}
/>
</Box>
<ProxyToken

228
src/components/MapControls.js
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Flex, Box, IconButton } from "theme-ui";
import { Flex, Box, IconButton, Button } from "theme-ui";
import AddMapButton from "./AddMapButton";
import ExpandMoreIcon from "../icons/ExpandMoreIcon";
@ -9,6 +9,10 @@ import EraseToolIcon from "../icons/EraseToolIcon";
import UndoIcon from "../icons/UndoIcon";
import RedoIcon from "../icons/RedoIcon";
import colors, { colorOptions } from "../helpers/colors";
import MapMenu from "./MapMenu";
function MapControls({
onMapChange,
onToolChange,
@ -18,9 +22,85 @@ function MapControls({
onRedo,
undoDisabled,
redoDisabled,
brushColor,
onBrushColorChange,
onEraseAll,
}) {
const [isExpanded, setIsExpanded] = useState(false);
const subMenus = {
brush: (
<Box sx={{ width: "104px" }} p={1}>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
}}
>
{colorOptions.map((color) => (
<Box
key={color}
sx={{
width: "25%",
paddingTop: "25%",
borderRadius: "50%",
transform: "scale(0.75)",
backgroundColor: colors[color],
cursor: "pointer",
}}
onClick={() => onBrushColorChange(color)}
>
{brushColor === color && (
<Box
sx={{
width: "100%",
height: "100%",
border: "2px solid white",
position: "absolute",
top: 0,
borderRadius: "50%",
}}
/>
)}
</Box>
))}
</Box>
</Box>
),
erase: (
<Box p={1}>
<Button
variant="secondary"
onClick={() => {
onEraseAll();
setCurrentSubmenu({});
}}
>
Erase All
</Button>
</Box>
),
};
const [currentSubmenu, setCurrentSubmenu] = useState(null);
const [currentSubmenuOptions, setCurrentSubmenuOptions] = useState({});
function handleToolClick(event, tool) {
if (tool !== selectedTool) {
onToolChange(tool);
} else if (subMenus[tool]) {
const toolRect = event.target.getBoundingClientRect();
setCurrentSubmenu(tool);
setCurrentSubmenuOptions({
// Align the right of the submenu to the left of the tool and center vertically
left: `${toolRect.left - 4}px`,
top: `${toolRect.bottom - toolRect.height / 2}px`,
style: { transform: "translate(-100%, -50%)" },
});
}
}
const divider = (
<Box
my={2}
@ -29,82 +109,94 @@ function MapControls({
></Box>
);
return (
<Flex
p={2}
sx={{
position: "absolute",
top: 0,
right: 0,
flexDirection: "column",
alignItems: "center",
}}
>
<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>
<Box
<>
<Flex
p={2}
sx={{
position: "absolute",
top: 0,
right: 0,
flexDirection: "column",
alignItems: "center",
display: isExpanded ? "flex" : "none",
}}
>
<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")}
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",
}}
>
<PanToolIcon />
<ExpandMoreIcon />
</IconButton>
<IconButton
aria-label="Brush Tool"
title="Brush Tool"
onClick={() => onToolChange("brush")}
sx={{ color: selectedTool === "brush" ? "primary" : "text" }}
disabled={disabledTools.includes("brush")}
<Box
sx={{
flexDirection: "column",
alignItems: "center",
display: isExpanded ? "flex" : "none",
}}
>
<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>
<AddMapButton onMapChange={onMapChange} />
{divider}
<IconButton
aria-label="Pan Tool"
title="Pan Tool"
onClick={(e) => handleToolClick(e, "pan")}
sx={{ color: selectedTool === "pan" ? "primary" : "text" }}
disabled={disabledTools.includes("pan")}
>
<PanToolIcon />
</IconButton>
<IconButton
aria-label="Brush Tool"
title="Brush Tool"
onClick={(e) => handleToolClick(e, "brush")}
sx={{ color: selectedTool === "brush" ? "primary" : "text" }}
disabled={disabledTools.includes("brush")}
>
<BrushToolIcon />
</IconButton>
<IconButton
aria-label="Erase Tool"
title="Erase Tool"
onClick={(e) => handleToolClick(e, "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>
<MapMenu
isOpen={!!currentSubmenu}
onRequestClose={() => {
setCurrentSubmenu(null);
setCurrentSubmenuOptions({});
}}
{...currentSubmenuOptions}
>
{currentSubmenu && subMenus[currentSubmenu]}
</MapMenu>
</>
);
}

14
src/components/MapDrawing.js
View File

@ -2,6 +2,8 @@ import React, { useRef, useEffect, useState } from "react";
import simplify from "simplify-js";
import shortid from "shortid";
import colors from "../helpers/colors";
function MapDrawing({
width,
height,
@ -9,6 +11,7 @@ function MapDrawing({
shapes,
onShapeAdd,
onShapeRemove,
brushColor,
}) {
const canvasRef = useRef();
const containerRef = useRef();
@ -70,7 +73,11 @@ function MapDrawing({
if (selectedTool === "brush") {
if (brushPoints.length > 0) {
const simplifiedPoints = simplify(brushPoints, 0.001);
onShapeAdd({ id: shortid.generate(), points: simplifiedPoints });
onShapeAdd({
id: shortid.generate(),
points: simplifiedPoints,
color: brushColor,
});
setBrushPoints([]);
}
}
@ -118,11 +125,11 @@ function MapDrawing({
hoveredShape = shape;
}
}
drawPath(path, "#000000", context);
drawPath(path, colors[shape.color], context);
}
if (selectedTool === "brush" && brushPoints.length > 0) {
const path = pointsToPath(brushPoints);
drawPath(path, "#000000", context);
drawPath(path, colors[brushColor], context);
}
if (hoveredShape) {
const path = pointsToPath(hoveredShape.points);
@ -138,6 +145,7 @@ function MapDrawing({
isDrawing,
selectedTool,
brushPoints,
brushColor,
]);
return (

3
src/components/MapMenu.js
View File

@ -10,6 +10,7 @@ function MapMenu({
bottom,
right,
children,
style,
}) {
function handleModalContent(node) {
if (node) {
@ -49,6 +50,7 @@ function MapMenu({
padding: 0,
borderRadius: "4px",
border: "none",
...style,
},
}}
contentRef={handleModalContent}
@ -64,6 +66,7 @@ MapMenu.defaultProps = {
left: "initial",
right: "initial",
bottom: "initial",
style: {},
};
export default MapMenu;