cleaned up keyboard event activation for presBox

1 files changed, 28 insertions, 20 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index ac68ea281..50a77ce57 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -99,7 +99,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _isChildActive = false;
     @observable _moveOnFromAudio: boolean = true;
     @observable _presTimer!: NodeJS.Timeout;
-    @observable _presKeyEventsActive: boolean = false;
 
     @observable _eleArray: HTMLElement[] = [];
     @observable _dragArray: HTMLElement[] = [];
@@ -112,6 +111,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @observable _openEffectDropdown: boolean = false;
     @observable _presentTools: boolean = false;
     @observable _treeViewMap: Map<Doc, number> = new Map();
+    @observable _presKeyEvents: boolean = false;
+    @observable _forceKeyEvents: boolean = false;
     @computed get isTreeOrStack() {
         return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._viewType) as any);
     }
@@ -149,12 +150,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (this.selectedArray.size) return DocumentManager.Instance.getDocumentView(this.rootDoc);
     }
     @computed get isPres() {
-        document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
-        if (this.selectedDoc?.type === DocumentType.PRES) {
-            document.addEventListener('keydown', PresBox.keyEventsWrapper, true);
-            return true;
-        }
-        return false;
+        return this.selectedDoc === this.rootDoc;
     }
     @computed get selectedDoc() {
         return this.selectedDocumentView?.rootDoc;
@@ -168,7 +164,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     componentWillUnmount() {
         this._unmounting = true;
         document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
-        this._presKeyEventsActive = false;
         this.resetPresentation();
         // Turn of progressivize editors
         this.turnOffEdit(true);
@@ -177,6 +172,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @action
     componentDidMount() {
+        this._disposers.keyboard = reaction(
+            () => this.selectedDoc,
+            selected => {
+                document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
+                (this._presKeyEvents = selected === this.rootDoc) && document.addEventListener('keydown', PresBox.keyEventsWrapper, true);
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.forcekeyboard = reaction(
+            () => this._forceKeyEvents,
+            force => {
+                if (force) {
+                    document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
+                    document.addEventListener('keydown', PresBox.keyEventsWrapper, true);
+                    this._presKeyEvents = true;
+                }
+                this._forceKeyEvents = false;
+            },
+            { fireImmediately: true }
+        );
         this.props.setContentView?.(this);
         this._unmounting = false;
         this.rootDoc._forceRenderEngine = 'timeline';
@@ -194,9 +209,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     updateCurrentPresentation = (pres?: Doc) => {
         Doc.ActivePresentation = pres ?? this.rootDoc;
-        document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
-        document.addEventListener('keydown', PresBox.keyEventsWrapper, true);
-        this._presKeyEventsActive = true;
         PresBox.Instance = this;
     };
 
@@ -2253,7 +2265,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel';
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
         const isMini: boolean = this.toolbarWidth <= 100;
-        const presKeyEvents: boolean = this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.ActivePresentation;
         const activeColor = Colors.LIGHT_BLUE;
         const inactiveColor = Colors.WHITE;
         return mode === CollectionViewType.Carousel3D ? null : (
@@ -2281,9 +2292,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             </div>
                         </Tooltip>
                         <div className="toolbar-divider" /> */}
-                        <Tooltip title={<div className="dash-tooltip">{presKeyEvents ? 'Keys are active' : 'Keys are not active - click anywhere on the presentation trail to activate keys'}</div>}>
-                            <div className="toolbar-button" style={{ cursor: presKeyEvents ? 'default' : 'pointer', position: 'absolute', right: 30, fontSize: 16 }}>
-                                <FontAwesomeIcon className={'toolbar-thumbtack'} icon={'keyboard'} style={{ color: presKeyEvents ? activeColor : inactiveColor }} />
+                        <Tooltip title={<div className="dash-tooltip">{this._presKeyEvents ? 'Keys are active' : 'Keys are not active - click anywhere on the presentation trail to activate keys'}</div>}>
+                            <div className="toolbar-button" style={{ cursor: this._presKeyEvents ? 'default' : 'pointer', position: 'absolute', right: 30, fontSize: 16 }}>
+                                <FontAwesomeIcon className={'toolbar-thumbtack'} icon={'keyboard'} style={{ color: this._presKeyEvents ? activeColor : inactiveColor }} />
                             </div>
                         </Tooltip>
                         <Tooltip title={<div className="dash-tooltip">{propTitle}</div>}>
@@ -2561,17 +2572,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     sort = (treeViewMap: Map<Doc, number>) => [...treeViewMap.entries()].sort((a: [Doc, number], b: [Doc, number]) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0)).map(kv => kv[0]);
 
     render() {
-        // calling this method for keyEvents
-        this.isPres;
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        const presKeyEvents: boolean = this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.ActivePresentation;
         const presEnd: boolean = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1;
         const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
         return DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc) ? (
-            <div className="miniPres" onClick={e => e.stopPropagation()}>
-                <div className="presPanelOverlay" style={{ display: 'inline-flex', height: 30, background: '#323232', top: 0, zIndex: 3000000, boxShadow: presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}>
+            <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}>
+                <div className="presPanelOverlay" style={{ display: 'inline-flex', height: 30, background: '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}>
                     <Tooltip title={<div className="dash-tooltip">{'Loop'}</div>}>
                         <div
                             className="presPanel-button"