made shift-clicking work through the currenlty selected document decoration background

3 files changed, 17 insertions, 6 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index fa7220e7d..066cfd95a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -25,6 +25,7 @@ import React = require("react");
 import e = require('express');
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
 import { InkStrokeProperties } from './InkStrokeProperties';
+import { KeyManager } from './GlobalKeyHandler';
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -575,6 +576,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                             "caret-up";
         return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
+
     render() {
         const darkScheme = CurrentUserUtils.ActiveDashboard?.darkScheme ? "dimgray" : undefined;
         const bounds = this.Bounds;
@@ -625,7 +627,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
                 left: bounds.x - this._resizeBorderWidth / 2,
                 top: bounds.y - this._resizeBorderWidth / 2,
-                pointerEvents: this.Interacting ? "none" : "all",
+                pointerEvents: KeyManager.Instance.ShiftPressed || this.Interacting ? "none" : "all",
                 zIndex: SelectionManager.SelectedDocuments().length > 1 ? 900 : 0,
             }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} >
             </div>
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 0c05a1b69..9ca1dbf11 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -1,4 +1,4 @@
-import { action } from "mobx";
+import { action, observable } from "mobx";
 import { DateField } from "../../fields/DateField";
 import { Doc, DocListCast } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
@@ -37,6 +37,7 @@ type KeyControlInfo = {
 export class KeyManager {
     public static Instance: KeyManager = new KeyManager();
     private router = new Map<string, KeyHandler>();
+    @observable ShiftPressed = false;
 
     constructor() {
         const isMac = navigator.platform.toLowerCase().indexOf("mac") >= 0;
@@ -49,7 +50,12 @@ export class KeyManager {
         this.router.set("1000", this.shift);
     }
 
-    public handle = async (e: KeyboardEvent) => {
+    public unhandle = action((e: KeyboardEvent) => {
+        if (e.key.toLowerCase() === "shift") KeyManager.Instance.ShiftPressed = false;
+    })
+
+    public handle = action(async (e: KeyboardEvent) => {
+        if (e.key.toLowerCase() === "shift") KeyManager.Instance.ShiftPressed = true;
         const keyname = e.key && e.key.toLowerCase();
         this.handleGreedy(keyname);
 
@@ -69,7 +75,7 @@ export class KeyManager {
 
         control.stopPropagation && e.stopPropagation();
         control.preventDefault && e.preventDefault();
-    }
+    })
 
     private handleGreedy = action((keyname: string) => {
         switch (keyname) {
@@ -128,7 +134,7 @@ export class KeyManager {
         };
     });
 
-    private shift = async (keyname: string) => {
+    private shift = action(async (keyname: string) => {
         const stopPropagation = false;
         const preventDefault = false;
 
@@ -143,7 +149,7 @@ export class KeyManager {
             stopPropagation: stopPropagation,
             preventDefault: preventDefault
         };
-    }
+    })
 
     private alt = action((keyname: string) => {
         const stopPropagation = true;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5469c2358..5193c3c02 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -96,6 +96,8 @@ export class MainView extends React.Component {
         firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);
         window.removeEventListener("keydown", KeyManager.Instance.handle);
         window.addEventListener("keydown", KeyManager.Instance.handle);
+        window.removeEventListener("keyup", KeyManager.Instance.unhandle);
+        window.addEventListener("keyup", KeyManager.Instance.unhandle);
         window.addEventListener("paste", KeyManager.Instance.paste as any);
         document.addEventListener("dash", (e: any) => {  // event used by chrome plugin to tell Dash which document to focus on
             const id = FormattedTextBox.GetDocFromUrl(e.detail);
@@ -106,6 +108,7 @@ export class MainView extends React.Component {
     }
 
     componentWillUnMount() {
+        window.removeEventListener("keyup", KeyManager.Instance.unhandle);
         window.removeEventListener("keydown", KeyManager.Instance.handle);
         window.removeEventListener("pointerdown", this.globalPointerDown);
         window.removeEventListener("paste", KeyManager.Instance.paste as any);