Add fog edit opacity

src/components/map/MapFog.js

@@ -69,6 +69,7 @@ function MapFog({
 
   const [gridSnappingSensitivity] = useSetting("map.gridSnappingSensitivity");
   const [showFogGuides] = useSetting("fog.showGuides");
+  const [editOpacity] = useSetting("fog.editOpacity");
   const mapStageRef = useMapStage();
 
   const [drawingShape, setDrawingShape] = useState(null);
@@ -499,14 +500,18 @@ function MapFog({
         onTouchEnd={eraseHoveredShapes}
         points={points}
         stroke={
-          editable ? colors.lightGray : colors[shape.color] || shape.color
+          editable && active
+            ? colors.lightGray
+            : colors[shape.color] || shape.color
         }
         fill={colors[shape.color] || shape.color}
         closed
         lineCap="round"
         lineJoin="round"
         strokeWidth={gridStrokeWidth * shape.strokeWidth}
-        opacity={editable ? (!shape.visible ? 0.2 : 0.5) : 1}
+        opacity={
+          editable ? (!shape.visible ? editOpacity / 2 : editOpacity) : 1
+        }
         fillPatternImage={patternImage}
         fillPriority={editable && !shape.visible ? "pattern" : "color"}
         holes={holes}

src/modals/SettingsModal.js

@@ -30,6 +30,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
     "map.gridSnappingSensitivity"
   );
   const [showFogGuides, setShowFogGuides] = useSetting("fog.showGuides");
+  const [fogEditOpacity, setFogEditOpacity] = useSetting("fog.editOpacity");
   const [storageEstimate, setStorageEstimate] = useState();
   const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
 
@@ -111,6 +112,19 @@ function SettingsModal({ isOpen, onRequestClose }) {
               onChange={(e) => setShowFogGuides(e.target.checked)}
             />
           </Label>
+          <Label py={2}>
+            Fog Edit Opacity
+            <Slider
+              step={0.05}
+              min={0}
+              max={1}
+              ml={1}
+              sx={{ width: "initial" }}
+              value={fogEditOpacity}
+              onChange={(e) => setFogEditOpacity(parseFloat(e.target.value))}
+              labelFunc={(value) => `${Math.round(value * 100)}%`}
+            />
+          </Label>
           <Label py={2}>
             Token Label Size
             <Slider

src/settings.js

@@ -59,6 +59,11 @@ function loadVersions(settings) {
     ...prev,
     fog: { ...prev.fog, showGuides: true },
   }));
+  // v1.8.1 - Add fog edit opacity
+  settings.version(7, (prev) => ({
+    ...prev,
+    fog: { ...prev.fog, editOpacity: 0.5 },
+  }));
 }
 
 export function getSettings() {