fixes for drawing ink on pdf/image/etc. fixes for showing contextMenu. moved gestureOverlay into main dashboard area to avoid drawing on UI widgets. more code cleanup to put things in reasonable places and avoid importing too much stuff.

1 files changed, 46 insertions, 43 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index cffcd0f17..c9908b4b0 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,10 +1,10 @@
-import React = require("react");
+import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, observable } from "mobx";
-import { observer } from "mobx-react";
-import "./ContextMenu.scss";
-import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
-import { Utils } from "../../Utils";
+import { action, computed, IReactionDisposer, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import './ContextMenu.scss';
+import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem';
+import { Utils } from '../../Utils';
 
 @observer
 export class ContextMenu extends React.Component {
@@ -14,7 +14,7 @@ export class ContextMenu extends React.Component {
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: boolean = false;
-    @observable private _searchString: string = "";
+    @observable private _searchString: string = '';
     @observable private _showSearch: boolean = false;
     // afaik displaymenu can be called before all the items are added to the menu, so can't determine in displayMenu what the height of the menu will be
     @observable private _yRelativeToTop: boolean = true;
@@ -43,9 +43,10 @@ export class ContextMenu extends React.Component {
     onPointerDown = (e: PointerEvent) => {
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
-    }
+    };
     @action
     onPointerUp = (e: PointerEvent) => {
+        if (e.button !== 2 && !e.ctrlKey) return;
         const curX = e.clientX;
         const curY = e.clientY;
         if (this._ignoreUp) {
@@ -63,27 +64,27 @@ export class ContextMenu extends React.Component {
                 this._display = true;
             }
         }
-    }
+    };
     componentWillUnmount() {
-        document.removeEventListener("pointerdown", this.onPointerDown);
-        document.removeEventListener("pointerup", this.onPointerUp);
+        document.removeEventListener('pointerdown', this.onPointerDown, true);
+        document.removeEventListener('pointerup', this.onPointerUp);
         this._reactionDisposer?.();
     }
 
     @action
     componentDidMount = () => {
-        document.addEventListener("pointerdown", this.onPointerDown);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
+        document.addEventListener('pointerdown', this.onPointerDown, true);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
 
     @action
     clearItems() {
         this._items = [];
-        this._defaultPrefix = "";
+        this._defaultPrefix = '';
         this._defaultItem = undefined;
     }
 
-    _defaultPrefix: string = "";
+    _defaultPrefix: string = '';
     _defaultItem: ((name: string) => void) | undefined;
 
     findByDescription = (target: string, toLowerCase = false) => {
@@ -92,7 +93,7 @@ export class ContextMenu extends React.Component {
             toLowerCase && (reference = reference.toLowerCase());
             return reference === target;
         });
-    }
+    };
 
     @action
     addItem(item: ContextMenuProps) {
@@ -103,9 +104,9 @@ export class ContextMenu extends React.Component {
     @action
     moveAfter(item: ContextMenuProps, after: ContextMenuProps) {
         if (after && this.findByDescription(after.description)) {
-            const curInd = this._items.findIndex((i) => i.description === item.description);
+            const curInd = this._items.findIndex(i => i.description === item.description);
             this._items.splice(curInd, 1);
-            const afterInd = this._items.findIndex((i) => i.description === after.description);
+            const afterInd = this._items.findIndex(i => i.description === after.description);
             this._items.splice(afterInd + 1, 0, item);
         }
     }
@@ -142,7 +143,7 @@ export class ContextMenu extends React.Component {
 
     _onDisplay?: () => void = undefined;
     @action
-    displayMenu = (x: number, y: number, initSearch = "", showSearch = false, onDisplay?: () => void) => {
+    displayMenu = (x: number, y: number, initSearch = '', showSearch = false, onDisplay?: () => void) => {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
 
@@ -153,7 +154,7 @@ export class ContextMenu extends React.Component {
         this._shouldDisplay = true;
         this._onDisplay = onDisplay;
         this._display = !onDisplay;
-    }
+    };
 
     @action
     closeMenu = () => {
@@ -162,10 +163,10 @@ export class ContextMenu extends React.Component {
         this._display = false;
         this._shouldDisplay = false;
         return wasOpen;
-    }
+    };
 
     @computed get filteredItems(): (OriginalMenuProps | string[])[] {
-        const searchString = this._searchString.toLowerCase().split(" ");
+        const searchString = this._searchString.toLowerCase().split(' ');
         const matches = (descriptions: string[]): boolean => {
             return searchString.every(s => descriptions.some(desc => desc.toLowerCase().includes(s)));
         };
@@ -176,7 +177,7 @@ export class ContextMenu extends React.Component {
             for (const item of items) {
                 const description = item.description;
                 const path = groupFunc(description);
-                if ("subitems" in item) {
+                if ('subitems' in item) {
                     const children = flattenItems(item.subitems, name => [...groupFunc(description), name]);
                     if (children.length || matches(path)) {
                         eles.push(path);
@@ -205,13 +206,14 @@ export class ContextMenu extends React.Component {
         if (!this._searchString) {
             return this._items.map((item, ind) => <ContextMenuItem {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} key={ind + item.description} closeMenu={this.closeMenu} />);
         }
-        return this.filteredItems.map((value, index) => 
-            Array.isArray(value)  ?
+        return this.filteredItems.map((value, index) =>
+            Array.isArray(value) ? (
                 <div className="contextMenu-group">
-                    <div className="contextMenu-description">{value.join(" -> ")}</div>
+                    <div className="contextMenu-description">{value.join(' -> ')}</div>
                 </div>
-                :
-                <ContextMenuItem {...value} key={index+value.description} closeMenu={this.closeMenu} selected={index === this.selectedIndex} />
+            ) : (
+                <ContextMenuItem {...value} key={index + value.description} closeMenu={this.closeMenu} selected={index === this.selectedIndex} />
+            )
         );
     }
 
@@ -220,32 +222,34 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
-        return !this._display ? (null) : 
-            <div className="contextMenu-cont" style={{left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY })}}>
-                {!this.itemsNeedSearch ? (null) :
-                    <span className={"search-icon"}>
+        return !this._display ? null : (
+            <div className="contextMenu-cont" style={{ left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }) }}>
+                {!this.itemsNeedSearch ? null : (
+                    <span className={'search-icon'}>
                         <span className="icon-background">
                             <FontAwesomeIcon icon="search" size="lg" />
                         </span>
                         <input className="contextMenu-item contextMenu-description search" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
-                    </span>}
+                    </span>
+                )}
                 {this.menuItems}
-            </div>;
+            </div>
+        );
     }
 
     @action
     onKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "ArrowDown") {
+        if (e.key === 'ArrowDown') {
             if (this.selectedIndex < this.flatItems.length - 1) {
                 this.selectedIndex++;
             }
             e.preventDefault();
-        } else if (e.key === "ArrowUp") {
+        } else if (e.key === 'ArrowUp') {
             if (this.selectedIndex > 0) {
                 this.selectedIndex--;
             }
             e.preventDefault();
-        } else if (e.key === "Enter" || e.key === "Tab") {
+        } else if (e.key === 'Enter' || e.key === 'Tab') {
             const item = this.flatItems[this.selectedIndex];
             if (item) {
                 item.event({ x: this.pageX, y: this.pageY });
@@ -256,20 +260,19 @@ export class ContextMenu extends React.Component {
             e.preventDefault();
             e.stopPropagation();
         }
-    }
+    };
 
     @action
     onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this._searchString = e.target.value;
         if (!this._searchString) {
             this.selectedIndex = -1;
-        }
-        else {
+        } else {
             if (this.selectedIndex === -1) {
                 this.selectedIndex = 0;
             } else {
                 this.selectedIndex = Math.min(this.flatItems.length - 1, this.selectedIndex);
             }
         }
-    }
-}
\ No newline at end of file
+    };
+}