Added fog rectangle tool

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 = {};

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: <FogPolygonIcon />,
     },
+    {
+      id: "rectangle",
+      title: "Fog Rectangle (R)",
+      isSelected: settings.type === "rectangle",
+      icon: <FogRectangleIcon />,
+    },
     {
       id: "brush",
       title: "Fog Brush (B)",

src/icons/FogRectangleIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function FogRectangleIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
+    </svg>
+  );
+}
+
+export default FogRectangleIcon;