Added map control submenus for brush color and erase all

src/components/Map.js

@@ -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

src/components/MapControls.js

@@ -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>
+    </>
   );
 }
 

src/components/MapDrawing.js

@@ -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 (

src/components/MapMenu.js

@@ -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;