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/MapFog.js

@@ -27,9 +27,11 @@ function MapFog({
   onShapeSubtract,
   onShapesRemove,
   onShapesEdit,
-  selectedToolId,
-  selectedToolSettings,
+  active,
+  toolId,
+  toolSettings,
   gridSize,
+  transparent,
 }) {
   const { stageScale, mapWidth, mapHeight, interactionEmitter } = useContext(
     MapInteractionContext
@@ -39,16 +41,14 @@ function MapFog({
   const [isBrushDown, setIsBrushDown] = useState(false);
   const [editingShapes, setEditingShapes] = useState([]);
 
-  const isEditing = selectedToolId === "fog";
   const shouldHover =
-    isEditing &&
-    (selectedToolSettings.type === "toggle" ||
-      selectedToolSettings.type === "remove");
+    active &&
+    (toolSettings.type === "toggle" || toolSettings.type === "remove");
 
   const [patternImage] = useImage(diagonalPattern);
 
   useEffect(() => {
-    if (!isEditing) {
+    if (!active) {
       return;
     }
 
@@ -58,8 +58,8 @@ function MapFog({
       const mapImage = mapStage.findOne("#mapImage");
       return getBrushPositionForTool(
         getRelativePointerPositionNormalized(mapImage),
-        selectedToolId,
-        selectedToolSettings,
+        toolId,
+        toolSettings,
         gridSize,
         shapes
       );
@@ -67,7 +67,7 @@ function MapFog({
 
     function handleBrushDown() {
       const brushPosition = getBrushPosition();
-      if (selectedToolSettings.type === "brush") {
+      if (toolSettings.type === "brush") {
         setDrawingShape({
           type: "fog",
           data: {
@@ -75,7 +75,7 @@ function MapFog({
             holes: [],
           },
           strokeWidth: 0.5,
-          color: selectedToolSettings.useFogSubtract ? "red" : "black",
+          color: toolSettings.useFogSubtract ? "red" : "black",
           blend: false,
           id: shortid.generate(),
           visible: true,
@@ -85,11 +85,7 @@ function MapFog({
     }
 
     function handleBrushMove() {
-      if (
-        selectedToolSettings.type === "brush" &&
-        isBrushDown &&
-        drawingShape
-      ) {
+      if (toolSettings.type === "brush" && isBrushDown && drawingShape) {
         const brushPosition = getBrushPosition();
         setDrawingShape((prevShape) => {
           const prevPoints = prevShape.data.points;
@@ -114,8 +110,8 @@ function MapFog({
     }
 
     function handleBrushUp() {
-      if (selectedToolSettings.type === "brush" && drawingShape) {
-        const subtract = selectedToolSettings.useFogSubtract;
+      if (toolSettings.type === "brush" && drawingShape) {
+        const subtract = toolSettings.useFogSubtract;
 
         if (drawingShape.data.points.length > 1) {
           let shapeData = {};
@@ -147,9 +143,9 @@ function MapFog({
 
       // Erase
       if (editingShapes.length > 0) {
-        if (selectedToolSettings.type === "remove") {
+        if (toolSettings.type === "remove") {
           onShapesRemove(editingShapes.map((shape) => shape.id));
-        } else if (selectedToolSettings.type === "toggle") {
+        } else if (toolSettings.type === "toggle") {
           onShapesEdit(
             editingShapes.map((shape) => ({
               ...shape,
@@ -164,7 +160,7 @@ function MapFog({
     }
 
     function handlePolygonClick() {
-      if (selectedToolSettings.type === "polygon") {
+      if (toolSettings.type === "polygon") {
         const brushPosition = getBrushPosition();
         setDrawingShape((prevDrawingShape) => {
           if (prevDrawingShape) {
@@ -183,7 +179,7 @@ function MapFog({
                 holes: [],
               },
               strokeWidth: 0.5,
-              color: selectedToolSettings.useFogSubtract ? "red" : "black",
+              color: toolSettings.useFogSubtract ? "red" : "black",
               blend: false,
               id: shortid.generate(),
               visible: true,
@@ -194,7 +190,7 @@ function MapFog({
     }
 
     function handlePolygonMove() {
-      if (selectedToolSettings.type === "polygon" && drawingShape) {
+      if (toolSettings.type === "polygon" && drawingShape) {
         const brushPosition = getBrushPosition();
         setDrawingShape((prevShape) => {
           if (!prevShape) {
@@ -229,7 +225,7 @@ function MapFog({
     };
   }, [
     mapStageRef,
-    isEditing,
+    active,
     drawingShape,
     editingShapes,
     gridSize,
@@ -238,15 +234,15 @@ function MapFog({
     onShapeSubtract,
     onShapesEdit,
     onShapesRemove,
-    selectedToolId,
-    selectedToolSettings,
+    toolId,
+    toolSettings,
     shapes,
     stageScale,
     interactionEmitter,
   ]);
 
   const finishDrawingPolygon = useCallback(() => {
-    const subtract = selectedToolSettings.useFogSubtract;
+    const subtract = toolSettings.useFogSubtract;
     const data = {
       ...drawingShape.data,
       // Remove the last point as it hasn't been placed yet
@@ -263,16 +259,12 @@ function MapFog({
     }
 
     setDrawingShape(null);
-  }, [selectedToolSettings, drawingShape, onShapeSubtract, onShapeAdd]);
+  }, [toolSettings, drawingShape, onShapeSubtract, onShapeAdd]);
 
   // Add keyboard shortcuts
   useEffect(() => {
     function handleKeyDown({ key }) {
-      if (
-        key === "Enter" &&
-        selectedToolSettings.type === "polygon" &&
-        drawingShape
-      ) {
+      if (key === "Enter" && toolSettings.type === "polygon" && drawingShape) {
         finishDrawingPolygon();
       }
       if (key === "Escape" && drawingShape) {
@@ -296,7 +288,7 @@ function MapFog({
         }
         return {
           ...prevShape,
-          color: selectedToolSettings.useFogSubtract ? "black" : "red",
+          color: toolSettings.useFogSubtract ? "black" : "red",
         };
       });
     }
@@ -307,12 +299,7 @@ function MapFog({
       interactionEmitter.off("keyDown", handleKeyDown);
       interactionEmitter.off("keyUp", handleKeyUp);
     };
-  }, [
-    finishDrawingPolygon,
-    interactionEmitter,
-    drawingShape,
-    selectedToolSettings,
-  ]);
+  }, [finishDrawingPolygon, interactionEmitter, drawingShape, toolSettings]);
 
   function handleShapeOver(shape, isDown) {
     if (shouldHover && isDown) {
@@ -349,11 +336,14 @@ function MapFog({
           mapWidth,
           mapHeight
         )}
-        visible={isEditing || shape.visible}
-        opacity={isEditing ? 0.5 : 1}
+        visible={(active && !toolSettings.preview) || shape.visible}
+        opacity={transparent ? 0.5 : 1}
         fillPatternImage={patternImage}
-        fillPriority={isEditing && !shape.visible ? "pattern" : "color"}
+        fillPriority={active && !shape.visible ? "pattern" : "color"}
         holes={holes}
+        // Disable collision if the fog is transparent and we're not editing it
+        // This allows tokens to be moved under the fog
+        hitFunc={transparent && !active ? () => {} : undefined}
       />
     );
   }
@@ -394,8 +384,8 @@ function MapFog({
       {shapes.map(renderShape)}
       {drawingShape && renderShape(drawingShape)}
       {drawingShape &&
-        selectedToolSettings &&
-        selectedToolSettings.type === "polygon" &&
+        toolSettings &&
+        toolSettings.type === "polygon" &&
         renderPolygonAcceptTick(drawingShape)}
       {editingShapes.length > 0 && editingShapes.map(renderEditingShape)}
     </Group>