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 }) { } /> +