diff --git a/src/components/map/MapFog.js b/src/components/map/MapFog.js index a872edd..e76cb37 100644 --- a/src/components/map/MapFog.js +++ b/src/components/map/MapFog.js @@ -60,7 +60,9 @@ function MapFog({ return getBrushPositionForTool( map, getRelativePointerPositionNormalized(mapImage), - map.snapToGrid && toolSettings.type === "polygon", + map.snapToGrid && + (toolSettings.type === "polygon" || + toolSettings.type === "rectangle"), toolSettings.useEdgeSnapping, gridSize, shapes @@ -83,6 +85,25 @@ function MapFog({ visible: true, }); } + if (toolSettings.type === "rectangle") { + setDrawingShape({ + type: "fog", + data: { + points: [ + brushPosition, + brushPosition, + brushPosition, + brushPosition, + ], + holes: [], + }, + strokeWidth: 0.5, + color: toolSettings.useFogCut ? "red" : "black", + blend: false, + id: shortid.generate(), + visible: true, + }); + } setIsBrushDown(true); } @@ -109,10 +130,31 @@ function MapFog({ }; }); } + if (toolSettings.type === "rectangle" && isBrushDown && drawingShape) { + const brushPosition = getBrushPosition(); + setDrawingShape((prevShape) => { + const prevPoints = prevShape.data.points; + return { + ...prevShape, + data: { + ...prevShape.data, + points: [ + prevPoints[0], + { x: brushPosition.x, y: prevPoints[1].y }, + brushPosition, + { x: prevPoints[3].x, y: brushPosition.y }, + ], + }, + }; + }); + } } function handleBrushUp() { - if (toolSettings.type === "brush" && drawingShape) { + if ( + toolSettings.type === "brush" || + (toolSettings.type === "rectangle" && drawingShape) + ) { const cut = toolSettings.useFogCut; if (drawingShape.data.points.length > 1) { let shapeData = {}; diff --git a/src/components/map/controls/FogToolSettings.js b/src/components/map/controls/FogToolSettings.js index 2e11b38..201ec13 100644 --- a/src/components/map/controls/FogToolSettings.js +++ b/src/components/map/controls/FogToolSettings.js @@ -12,6 +12,7 @@ import FogBrushIcon from "../../../icons/FogBrushIcon"; import FogPolygonIcon from "../../../icons/FogPolygonIcon"; import FogRemoveIcon from "../../../icons/FogRemoveIcon"; import FogToggleIcon from "../../../icons/FogToggleIcon"; +import FogRectangleIcon from "../../../icons/FogRectangleIcon"; import UndoButton from "./UndoButton"; import RedoButton from "./RedoButton"; @@ -45,6 +46,8 @@ function BrushToolSettings({ onSettingChange({ preview: !settings.preview }); } else if (key === "c") { onSettingChange({ useFogCut: !settings.useFogCut }); + } else if (key === "r") { + onSettingChange({ type: "rectangle" }); } else if ( (key === "z" || key === "Z") && (ctrlKey || metaKey) && @@ -78,6 +81,12 @@ function BrushToolSettings({ isSelected: settings.type === "polygon", icon: , }, + { + id: "rectangle", + title: "Fog Rectangle (R)", + isSelected: settings.type === "rectangle", + icon: , + }, { id: "brush", title: "Fog Brush (B)", diff --git a/src/icons/FogRectangleIcon.js b/src/icons/FogRectangleIcon.js new file mode 100644 index 0000000..7a41096 --- /dev/null +++ b/src/icons/FogRectangleIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function FogRectangleIcon() { + return ( + + + + + ); +} + +export default FogRectangleIcon;