Added drop shadow to fog, and optimized it with caching

src/components/map/controls/EdgeSnappingToggle.js

@@ -4,7 +4,11 @@ import { IconButton } from "theme-ui";
 import SnappingOnIcon from "../../../icons/SnappingOnIcon";
 import SnappingOffIcon from "../../../icons/SnappingOffIcon";
 
-function EdgeSnappingToggle({ useEdgeSnapping, onEdgeSnappingChange }) {
+function EdgeSnappingToggle({
+  useEdgeSnapping,
+  onEdgeSnappingChange,
+  disabled,
+}) {
   return (
     <IconButton
       aria-label={
@@ -18,6 +22,7 @@ function EdgeSnappingToggle({ useEdgeSnapping, onEdgeSnappingChange }) {
           : "Enable Edge Snapping (S)"
       }
       onClick={() => onEdgeSnappingChange(!useEdgeSnapping)}
+      disabled={disabled}
     >
       {useEdgeSnapping ? <SnappingOnIcon /> : <SnappingOffIcon />}
     </IconButton>

src/components/map/controls/FogCutToggle.js

@@ -4,7 +4,7 @@ import { IconButton } from "theme-ui";
 import CutOnIcon from "../../../icons/FogCutOnIcon";
 import CutOffIcon from "../../../icons/FogCutOffIcon";
 
-function FogCutToggle({ useFogCut, onFogCutChange }) {
+function FogCutToggle({ useFogCut, onFogCutChange, disabled }) {
   return (
     <IconButton
       aria-label={
@@ -12,6 +12,7 @@ function FogCutToggle({ useFogCut, onFogCutChange }) {
       }
       title={useFogCut ? "Disable Fog Cutting (C)" : "Enable Fog Cutting (C)"}
       onClick={() => onFogCutChange(!useFogCut)}
+      disabled={disabled}
     >
       {useFogCut ? <CutOnIcon /> : <CutOffIcon />}
     </IconButton>

src/components/map/controls/FogToolSettings.js

@@ -80,18 +80,21 @@ function BrushToolSettings({
       title: "Fog Polygon (P)",
       isSelected: settings.type === "polygon",
       icon: <FogPolygonIcon />,
+      disabled: settings.preview,
     },
     {
       id: "rectangle",
       title: "Fog Rectangle (R)",
       isSelected: settings.type === "rectangle",
       icon: <FogRectangleIcon />,
+      disabled: settings.preview,
     },
     {
       id: "brush",
       title: "Fog Brush (B)",
       isSelected: settings.type === "brush",
       icon: <FogBrushIcon />,
+      disabled: settings.preview,
     },
   ];
 
@@ -107,6 +110,7 @@ function BrushToolSettings({
         title="Toggle Fog (T)"
         onClick={() => onSettingChange({ type: "toggle" })}
         isSelected={settings.type === "toggle"}
+        disabled={settings.preview}
       >
         <FogToggleIcon />
       </RadioIconButton>
@@ -114,6 +118,7 @@ function BrushToolSettings({
         title="Erase Fog (E)"
         onClick={() => onSettingChange({ type: "remove" })}
         isSelected={settings.type === "remove"}
+        disabled={settings.preview}
       >
         <FogRemoveIcon />
       </RadioIconButton>
@@ -121,12 +126,14 @@ function BrushToolSettings({
       <FogCutToggle
         useFogCut={settings.useFogCut}
         onFogCutChange={(useFogCut) => onSettingChange({ useFogCut })}
+        disabled={settings.preview}
       />
       <EdgeSnappingToggle
         useEdgeSnapping={settings.useEdgeSnapping}
         onEdgeSnappingChange={(useEdgeSnapping) =>
           onSettingChange({ useEdgeSnapping })
         }
+        disabled={settings.preview}
       />
       <FogPreviewToggle
         useFogPreview={settings.preview}

src/components/map/controls/ToolSection.js

@@ -36,6 +36,7 @@ function ToolSection({ collapse, tools, onToolClick }) {
         onClick={() => handleToolClick(tool)}
         key={tool.id}
         isSelected={tool.isSelected}
+        disabled={tool.disabled}
       >
         {tool.icon}
       </RadioIconButton>
@@ -90,6 +91,7 @@ function ToolSection({ collapse, tools, onToolClick }) {
         onClick={() => handleToolClick(tool)}
         key={tool.id}
         isSelected={tool.isSelected}
+        disabled={tool.disabled}
       >
         {tool.icon}
       </RadioIconButton>