Add show fog guides setting

src/components/map/MapFog.js

@@ -66,6 +66,7 @@ function MapFog({
   const gridOffset = useGridOffset();
 
   const [gridSnappingSensitivity] = useSetting("map.gridSnappingSensitivity");
+  const [showFogGuides] = useSetting("fog.showGuides");
   const mapStageRef = useMapStage();
 
   const [drawingShape, setDrawingShape] = useState(null);
@@ -83,11 +84,13 @@ function MapFog({
     editable &&
     (toolSettings.type === "toggle" || toolSettings.type === "remove");
 
-  const shouldRenderGuides =
+  const shouldUseGuides =
     active &&
     editable &&
     (toolSettings.type === "rectangle" || toolSettings.type === "polygon");
 
+  const shouldRenderGuides = shouldUseGuides && showFogGuides;
+
   const [patternImage] = useImage(diagonalPattern);
 
   useEffect(() => {
@@ -100,7 +103,7 @@ function MapFog({
     function getBrushPosition(snapping = true) {
       const mapImage = mapStage.findOne("#mapImage");
       let position = getRelativePointerPosition(mapImage);
-      if (snapping && shouldRenderGuides) {
+      if (shouldUseGuides && snapping) {
         for (let guide of guides) {
           if (guide.orientation === "vertical") {
             position.x = guide.start.x * mapWidth;
@@ -283,11 +286,7 @@ function MapFog({
     }
 
     function handlePointerMove() {
-      if (
-        editable &&
-        active &&
-        (toolSettings.type === "polygon" || toolSettings.type === "rectangle")
-      ) {
+      if (shouldUseGuides) {
         let guides = [];
         const brushPosition = getBrushPosition(false);
         const absoluteBrushPosition = Vector2.multiply(brushPosition, {
@@ -573,12 +572,17 @@ function MapFog({
 
     if (editable) {
       const visibleShapes = shapes.filter(shapeVisible);
+      // Only use bounding box guides when rendering them
+      if (shouldRenderGuides) {
         setFogShapeBoundingBoxes(getFogShapesBoundingBoxes(visibleShapes, 5));
+      } else {
+        setFogShapeBoundingBoxes([]);
+      }
       setFogShapes(visibleShapes);
     } else {
       setFogShapes(mergeFogShapes(shapes));
     }
-  }, [shapes, editable, active, toolSettings]);
+  }, [shapes, editable, active, toolSettings, shouldRenderGuides]);
 
   const fogGroupRef = useRef();
 

src/modals/SettingsModal.js

@@ -29,6 +29,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
   const [gridSnappingSensitivity, setGridSnappingSensitivity] = useSetting(
     "map.gridSnappingSensitivity"
   );
+  const [showFogGuides, setShowFogGuides] = useSetting("fog.showGuides");
   const [storageEstimate, setStorageEstimate] = useState();
   const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
 
@@ -103,6 +104,13 @@ function SettingsModal({ isOpen, onRequestClose }) {
               }
             />
           </Label>
+          <Label py={2}>
+            <span style={{ marginRight: "4px" }}>Show fog guides</span>
+            <Checkbox
+              checked={showFogGuides}
+              onChange={(e) => setShowFogGuides(e.target.checked)}
+            />
+          </Label>
           <Label py={2}>
             Token Label Size
             <Slider

src/settings.js

@@ -54,6 +54,11 @@ function loadVersions(settings) {
     newSettings.fog.multilayer = false;
     return newSettings;
   });
+  // v1.8.1 - Add show guides toggle
+  settings.version(6, (prev) => ({
+    ...prev,
+    fog: { ...prev.fog, showGuides: true },
+  }));
 }
 
 export function getSettings() {