Refactored keyboard shortcuts to be global and not dependent on map interaction

src/components/map/controls/DrawingToolSettings.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import React, { useEffect } from "react";
 import { Flex, IconButton } from "theme-ui";
 import { useMedia } from "react-media";
 
@@ -21,7 +21,7 @@ import RedoButton from "./RedoButton";
 
 import Divider from "../../Divider";
 
-import MapInteractionContext from "../../../contexts/MapInteractionContext";
+import useKeyboard from "../../../helpers/useKeyboard";
 
 function DrawingToolSettings({
   settings,
@@ -29,49 +29,41 @@ function DrawingToolSettings({
   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 === "l") {
-        onSettingChange({ type: "line" });
-      } 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" || key === "Z") &&
-        (ctrlKey || metaKey) &&
-        shiftKey &&
-        !disabledActions.includes("redo")
-      ) {
-        onToolAction("mapRedo");
-      } else if (
-        key === "z" &&
-        (ctrlKey || metaKey) &&
-        !shiftKey &&
-        !disabledActions.includes("undo")
-      ) {
-        onToolAction("mapUndo");
-      }
+  function handleKeyDown({ key, ctrlKey, metaKey, shiftKey }) {
+    if (key === "b") {
+      onSettingChange({ type: "brush" });
+    } else if (key === "p") {
+      onSettingChange({ type: "paint" });
+    } else if (key === "l") {
+      onSettingChange({ type: "line" });
+    } 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" || 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);
-    };
-  });
+  }
+  useKeyboard(handleKeyDown);
 
   // Change to brush if on erase and it gets disabled
   useEffect(() => {

src/components/map/controls/FogToolSettings.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React from "react";
 import { Flex } from "theme-ui";
 import { useMedia } from "react-media";
 
@@ -15,11 +15,11 @@ import FogSubtractIcon from "../../../icons/FogSubtractIcon";
 
 import UndoButton from "./UndoButton";
 import RedoButton from "./RedoButton";
+import ToolSection from "./ToolSection";
 
 import Divider from "../../Divider";
 
-import MapInteractionContext from "../../../contexts/MapInteractionContext";
-import ToolSection from "./ToolSection";
+import useKeyboard from "../../../helpers/useKeyboard";
 
 function BrushToolSettings({
   settings,
@@ -27,55 +27,46 @@ function BrushToolSettings({
   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 === "f") {
-        onSettingChange({ preview: !settings.preview });
-      } else if (
-        (key === "z" || key === "Z") &&
-        (ctrlKey || metaKey) &&
-        shiftKey &&
-        !disabledActions.includes("redo")
-      ) {
-        onToolAction("fogRedo");
-      } else if (
-        key === "z" &&
-        (ctrlKey || metaKey) &&
-        !shiftKey &&
-        !disabledActions.includes("undo")
-      ) {
-        onToolAction("fogUndo");
-      }
+  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 === "f") {
+      onSettingChange({ preview: !settings.preview });
+    } else if (
+      (key === "z" || 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 });
-      }
+  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);
-    };
-  });
+  useKeyboard(handleKeyDown, handleKeyUp);
 
   const isSmallScreen = useMedia({ query: "(max-width: 799px)" });
   const drawTools = [

src/components/map/controls/MeasureToolSettings.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import React from "react";
 import { Flex, Input, Text } from "theme-ui";
 
 import ToolSection from "./ToolSection";
@@ -8,28 +8,21 @@ import MeasureManhattanIcon from "../../../icons/MeasureManhattanIcon";
 
 import Divider from "../../Divider";
 
-import MapInteractionContext from "../../../contexts/MapInteractionContext";
+import useKeyboard from "../../../helpers/useKeyboard";
 
 function MeasureToolSettings({ settings, onSettingChange }) {
-  const { interactionEmitter } = useContext(MapInteractionContext);
-
   // Keyboard shortcuts
-  useEffect(() => {
-    function handleKeyDown({ key }) {
-      if (key === "g") {
-        onSettingChange({ type: "chebyshev" });
-      } else if (key === "l") {
-        onSettingChange({ type: "euclidean" });
-      } else if (key === "c") {
-        onSettingChange({ type: "manhattan" });
-      }
+  function handleKeyDown({ key }) {
+    if (key === "g") {
+      onSettingChange({ type: "chebyshev" });
+    } else if (key === "l") {
+      onSettingChange({ type: "euclidean" });
+    } else if (key === "c") {
+      onSettingChange({ type: "manhattan" });
     }
-    interactionEmitter.on("keyDown", handleKeyDown);
+  }
 
-    return () => {
-      interactionEmitter.off("keyDown", handleKeyDown);
-    };
-  });
+  useKeyboard(handleKeyDown);
 
   const tools = [
     {