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;