Changed fog so it is tranparent when you can edit it

Added a show preview toggle to see how others will see it.
Refactored fog and drawing props to simplify

src/components/map/MapDrawing.js

@@ -21,8 +21,9 @@ function MapDrawing({
   shapes,
   onShapeAdd,
   onShapesRemove,
-  selectedToolId,
-  selectedToolSettings,
+  active,
+  toolId,
+  toolSettings,
   gridSize,
 }) {
   const { stageScale, mapWidth, mapHeight, interactionEmitter } = useContext(
@@ -33,22 +34,17 @@ function MapDrawing({
   const [isBrushDown, setIsBrushDown] = useState(false);
   const [erasingShapes, setErasingShapes] = useState([]);
 
-  const shouldHover =
-    selectedToolSettings && selectedToolSettings.type === "erase";
-  const isEditing = selectedToolId === "drawing";
+  const shouldHover = toolSettings.type === "erase";
   const isBrush =
-    selectedToolSettings &&
-    (selectedToolSettings.type === "brush" ||
-      selectedToolSettings.type === "paint");
+    toolSettings.type === "brush" || toolSettings.type === "paint";
   const isShape =
-    selectedToolSettings &&
-    (selectedToolSettings.type === "line" ||
-      selectedToolSettings.type === "rectangle" ||
-      selectedToolSettings.type === "circle" ||
-      selectedToolSettings.type === "triangle");
+    toolSettings.type === "line" ||
+    toolSettings.type === "rectangle" ||
+    toolSettings.type === "circle" ||
+    toolSettings.type === "triangle";
 
   useEffect(() => {
-    if (!isEditing) {
+    if (!active) {
       return;
     }
     const mapStage = mapStageRef.current;
@@ -57,8 +53,8 @@ function MapDrawing({
       const mapImage = mapStage.findOne("#mapImage");
       return getBrushPositionForTool(
         getRelativePointerPositionNormalized(mapImage),
-        selectedToolId,
-        selectedToolSettings,
+        toolId,
+        toolSettings,
         gridSize,
         shapes
       );
@@ -67,24 +63,24 @@ function MapDrawing({
     function handleBrushDown() {
       const brushPosition = getBrushPosition();
       const commonShapeData = {
-        color: selectedToolSettings && selectedToolSettings.color,
-        blend: selectedToolSettings && selectedToolSettings.useBlending,
+        color: toolSettings.color,
+        blend: toolSettings.useBlending,
         id: shortid.generate(),
       };
       if (isBrush) {
         setDrawingShape({
           type: "path",
-          pathType: selectedToolSettings.type === "brush" ? "stroke" : "fill",
+          pathType: toolSettings.type === "brush" ? "stroke" : "fill",
           data: { points: [brushPosition] },
-          strokeWidth: selectedToolSettings.type === "brush" ? 1 : 0,
+          strokeWidth: toolSettings.type === "brush" ? 1 : 0,
           ...commonShapeData,
         });
       } else if (isShape) {
         setDrawingShape({
           type: "shape",
-          shapeType: selectedToolSettings.type,
-          data: getDefaultShapeData(selectedToolSettings.type, brushPosition),
-          strokeWidth: selectedToolSettings.type === "line" ? 1 : 0,
+          shapeType: toolSettings.type,
+          data: getDefaultShapeData(toolSettings.type, brushPosition),
+          strokeWidth: toolSettings.type === "line" ? 1 : 0,
           ...commonShapeData,
         });
       }
@@ -163,13 +159,13 @@ function MapDrawing({
     gridSize,
     isBrush,
     isBrushDown,
-    isEditing,
+    active,
+    toolId,
     isShape,
     mapStageRef,
     onShapeAdd,
     onShapesRemove,
-    selectedToolId,
-    selectedToolSettings,
+    toolSettings,
     shapes,
     stageScale,
     interactionEmitter,