implemented global key handler

1 files changed, 10 insertions, 52 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 6290d8985..157512aa0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -36,18 +36,20 @@ import { CollectionBaseView } from './collections/CollectionBaseView';
 import { List } from '../../new_fields/List';
 import PDFMenu from './pdf/PDFMenu';
 import { InkTool } from '../../new_fields/InkField';
-import * as _ from "lodash";
+import _ from "lodash";
+import KeyManager from './GlobalKeyHandler';
 
 @observer
 export class MainView extends React.Component {
     public static Instance: MainView;
+    @observable addMenuToggle = React.createRef<HTMLInputElement>();
     @observable private _workspacesShown: boolean = false;
     @observable public pwidth: number = 0;
     @observable public pheight: number = 0;
     @computed private get mainContainer(): Opt<Doc> {
         return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
     }
-    @computed private get mainFreeform(): Opt<Doc> {
+    @computed get mainFreeform(): Opt<Doc> {
         let docs = DocListCast(this.mainContainer!.data);
         return (docs && docs.length > 1) ? docs[1] : undefined;
     }
@@ -64,12 +66,13 @@ export class MainView extends React.Component {
     }
 
     componentWillMount() {
-        document.removeEventListener("keydown", this.globalKeyHandler);
-        document.addEventListener("keydown", this.globalKeyHandler);
+        KeyManager.Handler = new KeyManager(this);
+        document.removeEventListener("keydown", KeyManager.Handler.handle);
+        document.addEventListener("keydown", KeyManager.Handler.handle);
     }
 
     componentWillUnMount() {
-        document.removeEventListener("keydown", this.globalKeyHandler);
+        document.removeEventListener("keydown", KeyManager.Handler.handle);
     }
 
     constructor(props: Readonly<{}>) {
@@ -122,18 +125,6 @@ export class MainView extends React.Component {
         // window.addEventListener("pointermove", (e) => this.reportLocation(e))
         window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler
         window.addEventListener("dragover", (e) => e.preventDefault(), false); // drag event handler
-        window.addEventListener("keydown", (e) => {
-            if (e.key === "Escape") {
-                DragManager.AbortDrag();
-                SelectionManager.DeselectAll();
-            } else if (e.key === "z" && e.ctrlKey) {
-                e.preventDefault();
-                UndoManager.Undo();
-            } else if ((e.key === "y" && e.ctrlKey) || (e.key === "z" && e.ctrlKey && e.shiftKey)) {
-                e.preventDefault();
-                UndoManager.Redo();
-            }
-        }, false); // drag event handler
         // click interactions for the context menu
         document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
@@ -292,7 +283,7 @@ export class MainView extends React.Component {
         ];
 
         return < div id="add-nodes-menu" >
-            <input type="checkbox" id="add-menu-toggle" />
+            <input type="checkbox" id="add-menu-toggle" ref={this.addMenuToggle} />
             <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label>
 
             <div id="add-options-content">
@@ -300,8 +291,7 @@ export class MainView extends React.Component {
                     <li key="search"><button className="add-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button></li>
                     <li key="undo"><button className="add-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button></li>
                     <li key="redo"><button className="add-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button></li>
-                    <li key="color"><button className="add-button round-button" title="Redo" onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} >
-
+                    <li key="color"><button className="add-button round-button" title="Select Color" onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} >
                         <div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { color: "black", display: "block" } : { color: "black", display: "none" }}>
                             <SketchPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} />
                         </div>
@@ -362,38 +352,6 @@ export class MainView extends React.Component {
         this.isSearchVisible = !this.isSearchVisible;
     }
 
-    @action
-    globalKeyHandler = (e: KeyboardEvent) => {
-        if (e.key === "Control" || !e.ctrlKey) return;
-
-        if (e.key === "v") return;
-        if (e.key === "c") return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        switch (e.key) {
-            case "ArrowRight":
-                if (this.mainFreeform) {
-                    CollectionDockingView.Instance.AddRightSplit(this.mainFreeform, undefined);
-                }
-                break;
-            case "ArrowLeft":
-                if (this.mainFreeform) {
-                    CollectionDockingView.Instance.CloseRightSplit(this.mainFreeform);
-                }
-                break;
-            case "o":
-                this.globalDisplayFlags.jumpToVisible = true;
-                break;
-            case "escape":
-                _.mapValues(this.globalDisplayFlags, () => false);
-                break;
-            case "f":
-                this.isSearchVisible = !this.isSearchVisible;
-        }
-    }
-
 
     render() {
         return (