diff --git a/src/components/map/MapFog.js b/src/components/map/MapFog.js
index 8ae205e..d36f767 100644
--- a/src/components/map/MapFog.js
+++ b/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);
- setFogShapeBoundingBoxes(getFogShapesBoundingBoxes(visibleShapes, 5));
+ // 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();
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 45dadf7..ddad1fd 100644
--- a/src/modals/SettingsModal.js
+++ b/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 }) {
}
/>
+