Added keyboard shortcuts to drawing and remaining fog tools

src/components/map/controls/DrawingToolSettings.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
 import { Flex, IconButton } from "theme-ui";
 
 import ColorControl from "./ColorControl";
@@ -18,12 +18,56 @@ import RedoButton from "./RedoButton";
 
 import Divider from "../../Divider";
 
+import MapInteractionContext from "../../../contexts/MapInteractionContext";
+
 function DrawingToolSettings({
   settings,
   onSettingChange,
   onToolAction,
   disabledActions,
 }) {
+  const { interactionEmitter } = useContext(MapInteractionContext);
+
+  // Keyboard shotcuts
+  useEffect(() => {
+    function handleKeyDown({ key, ctrlKey, metaKey, shiftKey }) {
+      if (key === "b") {
+        onSettingChange({ type: "brush" });
+      } else if (key === "p") {
+        onSettingChange({ type: "paint" });
+      } else if (key === "r") {
+        onSettingChange({ type: "rectangle" });
+      } else if (key === "c") {
+        onSettingChange({ type: "circle" });
+      } else if (key === "t") {
+        onSettingChange({ type: "triangle" });
+      } else if (key === "e") {
+        onSettingChange({ type: "erase" });
+      } else if (key === "o") {
+        onSettingChange({ useBlending: !settings.useBlending });
+      } else if (
+        key === "z" &&
+        (ctrlKey || metaKey) &&
+        shiftKey &&
+        !disabledActions.includes("redo")
+      ) {
+        onToolAction("mapRedo");
+      } else if (
+        key === "z" &&
+        (ctrlKey || metaKey) &&
+        !shiftKey &&
+        !disabledActions.includes("undo")
+      ) {
+        onToolAction("mapUndo");
+      }
+    }
+
+    interactionEmitter.on("keyDown", handleKeyDown);
+    return () => {
+      interactionEmitter.off("keyDown", handleKeyDown);
+    };
+  });
+
   // Change to brush if on erase and it gets disabled
   useEffect(() => {
     if (settings.type === "erase" && disabledActions.includes("erase")) {

src/components/map/controls/FogToolSettings.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { Flex } from "theme-ui";
 
 import EdgeSnappingToggle from "./EdgeSnappingToggle";
@@ -16,12 +16,62 @@ import RedoButton from "./RedoButton";
 
 import Divider from "../../Divider";
 
+import MapInteractionContext from "../../../contexts/MapInteractionContext";
+
 function BrushToolSettings({
   settings,
   onSettingChange,
   onToolAction,
   disabledActions,
 }) {
+  const { interactionEmitter } = useContext(MapInteractionContext);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    function handleKeyDown({ key, ctrlKey, metaKey, shiftKey }) {
+      if (key === "Alt") {
+        onSettingChange({ useFogSubtract: !settings.useFogSubtract });
+      } else if (key === "p") {
+        onSettingChange({ type: "polygon" });
+      } else if (key === "b") {
+        onSettingChange({ type: "brush" });
+      } else if (key === "t") {
+        onSettingChange({ type: "toggle" });
+      } else if (key === "r") {
+        onSettingChange({ type: "remove" });
+      } else if (key === "s") {
+        onSettingChange({ useEdgeSnapping: !settings.useEdgeSnapping });
+      } else if (
+        key === "z" &&
+        (ctrlKey || metaKey) &&
+        shiftKey &&
+        !disabledActions.includes("redo")
+      ) {
+        onToolAction("fogRedo");
+      } else if (
+        key === "z" &&
+        (ctrlKey || metaKey) &&
+        !shiftKey &&
+        !disabledActions.includes("undo")
+      ) {
+        onToolAction("fogUndo");
+      }
+    }
+
+    function handleKeyUp({ key }) {
+      if (key === "Alt") {
+        onSettingChange({ useFogSubtract: !settings.useFogSubtract });
+      }
+    }
+
+    interactionEmitter.on("keyDown", handleKeyDown);
+    interactionEmitter.on("keyUp", handleKeyUp);
+    return () => {
+      interactionEmitter.off("keyDown", handleKeyDown);
+      interactionEmitter.off("keyUp", handleKeyUp);
+    };
+  });
+
   return (
     <Flex sx={{ alignItems: "center" }}>
       <RadioIconButton