From 44e6a34abad4f9003ddaf797ebba14c3712c3ab1 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sat, 18 Jul 2020 11:06:02 +1000
Subject: [PATCH] Moved to handling keyboard shortcuts on the document body

Also removed shortcut text input checking to map interaction component
---
 src/components/Modal.js              |  22 ++----
 src/components/map/MapInteraction.js | 109 ++++++++++++++++++---------
 src/components/map/MapMenu.js        |   8 +-
 3 files changed, 82 insertions(+), 57 deletions(-)

diff --git a/src/components/Modal.js b/src/components/Modal.js
index 8133ef0..94b9eda 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -30,20 +30,14 @@ function StyledModal({
       }}
       {...props}
     >
-      {/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
-      <div
-        onKeyDown={(e) => e.stopPropagation()}
-        onKeyUp={(e) => e.stopPropagation()}
-      >
-        {children}
-        {allowClose && (
-          <Close
-            m={0}
-            sx={{ position: "absolute", top: 0, right: 0 }}
-            onClick={onRequestClose}
-          />
-        )}
-      </div>
+      {children}
+      {allowClose && (
+        <Close
+          m={0}
+          sx={{ position: "absolute", top: 0, right: 0 }}
+          onClick={onRequestClose}
+        />
+      )}
     </Modal>
   );
 }
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index f49d6f9..2a69f48 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -197,45 +197,85 @@ function MapInteraction({
     stageHeightRef.current = height;
   }
 
-  function handleKeyDown(event) {
-    // Change to pan tool when pressing space
-    if (event.key === " " && selectedToolId === "pan") {
-      // Stop active state on pan icon from being selected
-      event.preventDefault();
-    }
-    if (
-      event.key === " " &&
-      selectedToolId !== "pan" &&
-      !disabledControls.includes("pan")
-    ) {
-      event.preventDefault();
-      previousSelectedToolRef.current = selectedToolId;
-      onSelectedToolChange("pan");
+  // Added key events to interaction emitter
+  useEffect(() => {
+    function handleKeyDown(event) {
+      // Ignore text input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      interactionEmitter.emit("keyDown", event);
     }
 
-    // Basic keyboard shortcuts
-    if (event.key === "w" && !disabledControls.includes("pan")) {
-      onSelectedToolChange("pan");
-    }
-    if (event.key === "d" && !disabledControls.includes("drawing")) {
-      onSelectedToolChange("drawing");
-    }
-    if (event.key === "f" && !disabledControls.includes("fog")) {
-      onSelectedToolChange("fog");
-    }
-    if (event.key === "m" && !disabledControls.includes("measure")) {
-      onSelectedToolChange("measure");
+    function handleKeyUp(event) {
+      // Ignore text input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      interactionEmitter.emit("keyUp", event);
     }
 
-    interactionEmitter.emit("keyDown", event);
-  }
+    document.body.addEventListener("keydown", handleKeyDown);
+    document.body.addEventListener("keyup", handleKeyUp);
+    document.body.tabIndex = 1;
+    return () => {
+      document.body.removeEventListener("keydown", handleKeyDown);
+      document.body.removeEventListener("keyup", handleKeyUp);
+      document.body.tabIndex = 0;
+    };
+  }, [interactionEmitter]);
 
-  function handleKeyUp(event) {
-    if (event.key === " " && selectedToolId === "pan") {
-      onSelectedToolChange(previousSelectedToolRef.current);
+  // Create default keyboard shortcuts
+  useEffect(() => {
+    function handleKeyDown(event) {
+      // Change to pan tool when pressing space
+      if (event.key === " " && selectedToolId === "pan") {
+        // Stop active state on pan icon from being selected
+        event.preventDefault();
+      }
+      if (
+        event.key === " " &&
+        selectedToolId !== "pan" &&
+        !disabledControls.includes("pan")
+      ) {
+        event.preventDefault();
+        previousSelectedToolRef.current = selectedToolId;
+        onSelectedToolChange("pan");
+      }
+
+      // Basic keyboard shortcuts
+      if (event.key === "w" && !disabledControls.includes("pan")) {
+        onSelectedToolChange("pan");
+      }
+      if (event.key === "d" && !disabledControls.includes("drawing")) {
+        onSelectedToolChange("drawing");
+      }
+      if (event.key === "f" && !disabledControls.includes("fog")) {
+        onSelectedToolChange("fog");
+      }
+      if (event.key === "m" && !disabledControls.includes("measure")) {
+        onSelectedToolChange("measure");
+      }
     }
-    interactionEmitter.emit("keyUp", event);
-  }
+
+    function handleKeyUp(event) {
+      if (event.key === " " && selectedToolId === "pan") {
+        onSelectedToolChange(previousSelectedToolRef.current);
+      }
+    }
+
+    interactionEmitter.on("keyDown", handleKeyDown);
+    interactionEmitter.on("keyUp", handleKeyUp);
+    return () => {
+      interactionEmitter.off("keyDown", handleKeyDown);
+      interactionEmitter.off("keyUp", handleKeyUp);
+    };
+  }, [
+    interactionEmitter,
+    onSelectedToolChange,
+    disabledControls,
+    selectedToolId,
+  ]);
 
   function getCursorForTool(tool) {
     switch (tool) {
@@ -284,9 +324,6 @@ function MapInteraction({
       ref={containerRef}
       {...bind()}
       className="map"
-      tabIndex={1}
-      onKeyDown={handleKeyDown}
-      onKeyUp={handleKeyUp}
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
         <Stage
diff --git a/src/components/map/MapMenu.js b/src/components/map/MapMenu.js
index 5fb8782..2c79ddb 100644
--- a/src/components/map/MapMenu.js
+++ b/src/components/map/MapMenu.js
@@ -79,13 +79,7 @@ function MapMenu({
       }}
       contentRef={handleModalContent}
     >
-      {/* Stop keyboard events when modal is open to prevent shortcuts from triggering */}
-      <div
-        onKeyDown={(e) => e.stopPropagation()}
-        onKeyUp={(e) => e.stopPropagation()}
-      >
-        {children}
-      </div>
+      {children}
     </Modal>
   );
 }