diff --git a/src/components/map/Map.js b/src/components/map/Map.js index 28e07a6..39fc9f6 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -49,14 +49,9 @@ function Map({ const [selectedToolId, setSelectedToolId] = useState("pan"); const [toolSettings, setToolSettings] = useState({ fog: { type: "polygon", useEdgeSnapping: false, useFogCut: false }, - brush: { - color: "darkGray", - type: "stroke", - useBlending: false, - }, - shape: { + drawing: { color: "red", - type: "rectangle", + type: "brush", useBlending: true, }, }); @@ -189,33 +184,27 @@ function Map({ const disabledControls = []; if (!allowMapDrawing) { - disabledControls.push("brush"); - disabledControls.push("shape"); - disabledControls.push("erase"); + disabledControls.push("drawing"); } if (!map) { disabledControls.push("pan"); } - if (mapShapes.length === 0) { - disabledControls.push("erase"); - } if (!allowFogDrawing) { disabledControls.push("fog"); } - const disabledSettings = { fog: [], brush: [], shape: [], erase: [] }; + const disabledSettings = { fog: [], drawing: [] }; + if (mapShapes.length === 0) { + disabledSettings.drawing.push("erase"); + } if (!mapState || mapState.mapDrawActionIndex < 0) { - disabledSettings.brush.push("undo"); - disabledSettings.shape.push("undo"); - disabledSettings.erase.push("undo"); + disabledSettings.drawing.push("undo"); } if ( !mapState || mapState.mapDrawActionIndex === mapState.mapDrawActions.length - 1 ) { - disabledSettings.brush.push("redo"); - disabledSettings.shape.push("redo"); - disabledSettings.erase.push("redo"); + disabledSettings.drawing.push("redo"); } if (!mapState || mapState.fogDrawActionIndex < 0) { disabledSettings.fog.push("undo"); diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js index 93c2a25..0c75af7 100644 --- a/src/components/map/MapControls.js +++ b/src/components/map/MapControls.js @@ -7,15 +7,11 @@ import Divider from "../Divider"; import SelectMapButton from "./SelectMapButton"; import FogToolSettings from "./controls/FogToolSettings"; -import BrushToolSettings from "./controls/BrushToolSettings"; -import ShapeToolSettings from "./controls/ShapeToolSettings"; -import EraseToolSettings from "./controls/EraseToolSettings"; +import DrawingToolSettings from "./controls/DrawingToolSettings"; import PanToolIcon from "../../icons/PanToolIcon"; import FogToolIcon from "../../icons/FogToolIcon"; import BrushToolIcon from "../../icons/BrushToolIcon"; -import ShapeToolIcon from "../../icons/ShapeToolIcon"; -import EraseToolIcon from "../../icons/EraseToolIcon"; import ExpandMoreIcon from "../../icons/ExpandMoreIcon"; function MapContols({ @@ -45,26 +41,14 @@ function MapContols({ title: "Fog Tool", SettingsComponent: FogToolSettings, }, - brush: { + drawing: { id: "brush", icon: , title: "Brush Tool", - SettingsComponent: BrushToolSettings, - }, - shape: { - id: "shape", - icon: , - title: "Shape Tool", - SettingsComponent: ShapeToolSettings, - }, - erase: { - id: "erase", - icon: , - title: "Erase tool", - SettingsComponent: EraseToolSettings, + SettingsComponent: DrawingToolSettings, }, }; - const tools = ["pan", "fog", "brush", "shape", "erase"]; + const tools = ["pan", "fog", "drawing"]; const sections = [ { diff --git a/src/components/map/MapDrawing.js b/src/components/map/MapDrawing.js index 3974981..9fb49b8 100644 --- a/src/components/map/MapDrawing.js +++ b/src/components/map/MapDrawing.js @@ -29,11 +29,18 @@ function MapDrawing({ const [isBrushDown, setIsBrushDown] = useState(false); const [erasingShapes, setErasingShapes] = useState([]); - const shouldHover = selectedToolId === "erase"; - const isEditing = - selectedToolId === "brush" || - selectedToolId === "shape" || - selectedToolId === "erase"; + const shouldHover = + selectedToolSettings && selectedToolSettings.type === "erase"; + const isEditing = selectedToolId === "drawing"; + const isBrush = + selectedToolSettings && + (selectedToolSettings.type === "brush" || + selectedToolSettings.type === "paint"); + const isShape = + selectedToolSettings && + (selectedToolSettings.type === "rectangle" || + selectedToolSettings.type === "circle" || + selectedToolSettings.type === "triangle"); const handleBrushUp = useCallback(() => { setIsBrushDown(false); @@ -58,15 +65,15 @@ function MapDrawing({ blend: selectedToolSettings && selectedToolSettings.useBlending, id: shortid.generate(), }; - if (selectedToolId === "brush") { + if (isBrush) { setDrawingShape({ type: "path", - pathType: selectedToolSettings.type, + pathType: selectedToolSettings.type === "brush" ? "stroke" : "fill", data: { points: [brushPosition] }, - strokeWidth: selectedToolSettings.type === "stroke" ? 1 : 0, + strokeWidth: selectedToolSettings.type === "brush" ? 1 : 0, ...commonShapeData, }); - } else if (selectedToolId === "shape") { + } else if (isShape) { setDrawingShape({ type: "shape", shapeType: selectedToolSettings.type, @@ -86,7 +93,7 @@ function MapDrawing({ gridSize, shapes ); - if (selectedToolId === "brush") { + if (isBrush) { setDrawingShape((prevShape) => { const prevPoints = prevShape.data.points; if ( @@ -108,7 +115,7 @@ function MapDrawing({ data: { points: simplified }, }; }); - } else if (selectedToolId === "shape") { + } else if (isShape) { setDrawingShape((prevShape) => ({ ...prevShape, data: getUpdatedShapeData( @@ -122,11 +129,11 @@ function MapDrawing({ } function endShape() { - if (selectedToolId === "brush" && drawingShape) { + if (isBrush && drawingShape) { if (drawingShape.data.points.length > 1) { onShapeAdd(drawingShape); } - } else if (selectedToolId === "shape" && drawingShape) { + } else if (isShape && drawingShape) { onShapeAdd(drawingShape); } setDrawingShape(null); @@ -156,6 +163,8 @@ function MapDrawing({ shapes, drawingShape, handleBrushUp, + isBrush, + isShape, ] ); diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js index 6e20aa5..56494b2 100644 --- a/src/components/map/MapInteraction.js +++ b/src/components/map/MapInteraction.js @@ -172,8 +172,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) { case "pan": return "move"; case "fog": - case "brush": - case "shape": + case "drawing": return "crosshair"; default: return "default"; diff --git a/src/components/map/controls/BrushToolSettings.js b/src/components/map/controls/BrushToolSettings.js deleted file mode 100644 index 5e2c1b9..0000000 --- a/src/components/map/controls/BrushToolSettings.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react"; -import { Flex } from "theme-ui"; - -import ColorControl from "./ColorControl"; -import AlphaBlendToggle from "./AlphaBlendToggle"; -import RadioIconButton from "./RadioIconButton"; - -import BrushStrokeIcon from "../../../icons/BrushStrokeIcon"; -import BrushFillIcon from "../../../icons/BrushFillIcon"; - -import UndoButton from "./UndoButton"; -import RedoButton from "./RedoButton"; - -import Divider from "../../Divider"; - -function BrushToolSettings({ - settings, - onSettingChange, - onToolAction, - disabledActions, -}) { - return ( - - onSettingChange({ color })} - /> - - onSettingChange({ type: "stroke" })} - isSelected={settings.type === "stroke"} - > - - - onSettingChange({ type: "fill" })} - isSelected={settings.type === "fill"} - > - - - - onSettingChange({ useBlending })} - /> - - onToolAction("mapUndo")} - disabled={disabledActions.includes("undo")} - /> - onToolAction("mapRedo")} - disabled={disabledActions.includes("redo")} - /> - - ); -} - -export default BrushToolSettings; diff --git a/src/components/map/controls/DrawingToolSettings.js b/src/components/map/controls/DrawingToolSettings.js new file mode 100644 index 0000000..349def6 --- /dev/null +++ b/src/components/map/controls/DrawingToolSettings.js @@ -0,0 +1,104 @@ +import React from "react"; +import { Flex, IconButton } from "theme-ui"; + +import ColorControl from "./ColorControl"; +import AlphaBlendToggle from "./AlphaBlendToggle"; +import RadioIconButton from "./RadioIconButton"; + +import BrushIcon from "../../../icons/BrushToolIcon"; +import BrushFillIcon from "../../../icons/BrushPaintIcon"; +import BrushRectangleIcon from "../../../icons/BrushRectangleIcon"; +import BrushCircleIcon from "../../../icons/BrushCircleIcon"; +import BrushTriangleIcon from "../../../icons/BrushTriangleIcon"; +import EraseAllIcon from "../../../icons/EraseAllIcon"; +import EraseIcon from "../../../icons/EraseToolIcon"; + +import UndoButton from "./UndoButton"; +import RedoButton from "./RedoButton"; + +import Divider from "../../Divider"; + +function DrawingToolSettings({ + settings, + onSettingChange, + onToolAction, + disabledActions, +}) { + return ( + + onSettingChange({ color })} + /> + + onSettingChange({ type: "brush" })} + isSelected={settings.type === "brush"} + > + + + onSettingChange({ type: "paint" })} + isSelected={settings.type === "paint"} + > + + + onSettingChange({ type: "rectangle" })} + isSelected={settings.type === "rectangle"} + > + + + onSettingChange({ type: "circle" })} + isSelected={settings.type === "circle"} + > + + + onSettingChange({ type: "triangle" })} + isSelected={settings.type === "triangle"} + > + + + + onSettingChange({ type: "erase" })} + isSelected={settings.type === "erase"} + disabled={disabledActions.includes("erase")} + > + + + onToolAction("eraseAll")} + disabled={disabledActions.includes("erase")} + > + + + + onSettingChange({ useBlending })} + /> + + onToolAction("mapUndo")} + disabled={disabledActions.includes("undo")} + /> + onToolAction("mapRedo")} + disabled={disabledActions.includes("redo")} + /> + + ); +} + +export default DrawingToolSettings; diff --git a/src/components/map/controls/EraseToolSettings.js b/src/components/map/controls/EraseToolSettings.js deleted file mode 100644 index c41b117..0000000 --- a/src/components/map/controls/EraseToolSettings.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { Flex, IconButton } from "theme-ui"; - -import EraseAllIcon from "../../../icons/EraseAllIcon"; - -import UndoButton from "./UndoButton"; -import RedoButton from "./RedoButton"; - -import Divider from "../../Divider"; - -function EraseToolSettings({ onToolAction, disabledActions }) { - return ( - - onToolAction("eraseAll")} - > - - - - onToolAction("mapUndo")} - disabled={disabledActions.includes("undo")} - /> - onToolAction("mapRedo")} - disabled={disabledActions.includes("redo")} - /> - - ); -} - -export default EraseToolSettings; diff --git a/src/components/map/controls/ShapeToolSettings.js b/src/components/map/controls/ShapeToolSettings.js deleted file mode 100644 index cd388b7..0000000 --- a/src/components/map/controls/ShapeToolSettings.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; -import { Flex } from "theme-ui"; - -import ColorControl from "./ColorControl"; -import AlphaBlendToggle from "./AlphaBlendToggle"; -import RadioIconButton from "./RadioIconButton"; - -import ShapeRectangleIcon from "../../../icons/ShapeRectangleIcon"; -import ShapeCircleIcon from "../../../icons/ShapeCircleIcon"; -import ShapeTriangleIcon from "../../../icons/ShapeTriangleIcon"; - -import UndoButton from "./UndoButton"; -import RedoButton from "./RedoButton"; - -import Divider from "../../Divider"; - -function ShapeToolSettings({ - settings, - onSettingChange, - onToolAction, - disabledActions, -}) { - return ( - - onSettingChange({ color })} - /> - - onSettingChange({ type: "rectangle" })} - isSelected={settings.type === "rectangle"} - > - - - onSettingChange({ type: "circle" })} - isSelected={settings.type === "circle"} - > - - - onSettingChange({ type: "triangle" })} - isSelected={settings.type === "triangle"} - > - - - - onSettingChange({ useBlending })} - /> - - onToolAction("mapUndo")} - disabled={disabledActions.includes("undo")} - /> - onToolAction("mapRedo")} - disabled={disabledActions.includes("redo")} - /> - - ); -} - -export default ShapeToolSettings; diff --git a/src/helpers/drawing.js b/src/helpers/drawing.js index 0ff64d0..93becb4 100644 --- a/src/helpers/drawing.js +++ b/src/helpers/drawing.js @@ -12,7 +12,12 @@ export function getBrushPositionForTool( shapes ) { let position = brushPosition; - if (tool === "shape") { + if ( + tool === "drawing" && + (toolSettings.type === "rectangle" || + toolSettings.type === "circle" || + toolSettings.type === "triangle") + ) { const snapped = Vector2.roundTo(position, gridSize); const minGrid = Vector2.min(gridSize); const distance = Vector2.length(Vector2.subtract(snapped, position)); diff --git a/src/icons/ShapeCircleIcon.js b/src/icons/BrushCircleIcon.js similarity index 84% rename from src/icons/ShapeCircleIcon.js rename to src/icons/BrushCircleIcon.js index c393782..b4cf4ed 100644 --- a/src/icons/ShapeCircleIcon.js +++ b/src/icons/BrushCircleIcon.js @@ -1,6 +1,6 @@ import React from "react"; -function ShapeCircleIcon() { +function BrushCircleIcon() { return ( - - - - - - ); -} - -export default ShapeToolIcon;