1 files changed, 18 insertions, 17 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d1304b8f4..e51bc18ef 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,25 +31,24 @@ import { ScriptingRepl } from '../ScriptingRepl';
 import { UndoStack } from '../UndoStack';
 import './CollectionDockingView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
-import { TabHTMLElement } from './TabDocView';
+import { TabDocView, TabHTMLElement } from './TabDocView';
 
 @observer
 export class CollectionDockingView extends CollectionSubView() {
-    static tabClass: unknown = null;
+    static tabClass?: typeof TabDocView;
     /**
      * Initialize by assigning the add split method to DocumentView and by
      * configuring golden layout to render its documents using the specified React component
      * @param ele - typically would be set to TabDocView
      */
-    public static Init(ele: unknown) {
+    public static Init(ele: typeof TabDocView) {
         this.tabClass = ele;
         DocumentView.addSplit = CollectionDockingView.AddSplit;
     }
     // eslint-disable-next-line no-use-before-define
     @observable public static Instance: CollectionDockingView | undefined = undefined;
 
-    private _reactionDisposer?: IReactionDisposer;
-    private _lightboxReactionDisposer?: IReactionDisposer;
+    private _disposers: { [key: string]: IReactionDisposer } = {};
     private _containerRef = React.createRef<HTMLDivElement>();
     private _flush: UndoManager.Batch | undefined;
     private _unmounting = false;
@@ -341,12 +340,12 @@ export class CollectionDockingView extends CollectionSubView() {
         this._unmounting = false;
         SetPropSetterCb('title', this.titleChanged); // this overrides any previously assigned callback for the property
         if (this._containerRef.current) {
-            this._lightboxReactionDisposer = reaction(
+            this._disposers.lightbox = reaction(
                 () => DocumentView.LightboxDoc(),
                 doc => setTimeout(() => !doc && this.onResize())
             );
             new ResizeObserver(this.onResize).observe(this._containerRef.current);
-            this._reactionDisposer = reaction(
+            this._disposers.docking = reaction(
                 () => StrCast(this.Document.dockingConfig),
                 config => {
                     if (!this._goldenLayout || this._ignoreStateChange !== config) {
@@ -356,12 +355,16 @@ export class CollectionDockingView extends CollectionSubView() {
                     this._ignoreStateChange = '';
                 }
             );
-            reaction(
+            this._disposers.panel = reaction(
                 () => this._props.PanelWidth(),
-                width => !this._goldenLayout && width > 20 && setTimeout(() => this.setupGoldenLayout()), // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows
+                width => {
+                    if (!this._goldenLayout && width > 20) {
+                        setTimeout(() => this.setupGoldenLayout());
+                    }
+                }, // need to wait for the collectiondockingview-container to have it's width/height since golden layout reads that to configure its windows
                 { fireImmediately: true }
             );
-            reaction(
+            this._disposers.color = reaction(
                 () => [SnappingManager.userBackgroundColor, SnappingManager.userBackgroundColor],
                 () => {
                     clearStyleSheetRules(CollectionDockingView._highlightStyleSheet);
@@ -376,18 +379,16 @@ export class CollectionDockingView extends CollectionSubView() {
 
     componentWillUnmount: () => void = () => {
         this._unmounting = true;
+        Object.values(this._disposers).forEach(d => d());
         try {
             this._goldenLayout.unbind('stackCreated', this.stackCreated);
             this._goldenLayout.unbind('tabDestroyed', this.tabDestroyed);
         } catch {
             /* empty */
         }
-        this._goldenLayout?.destroy();
+        setTimeout(() => this._goldenLayout?.destroy());
         window.removeEventListener('resize', this.onResize);
         window.removeEventListener('mouseup', this.onPointerUp);
-
-        this._reactionDisposer?.();
-        this._lightboxReactionDisposer?.();
     };
 
     // ViewBoxInterface overrides
@@ -426,7 +427,7 @@ export class CollectionDockingView extends CollectionSubView() {
 
     @action
     onPointerUp = (): void => {
-        window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('mouseup', this.onPointerUp);
         DragManager.CompleteWindowDrag = undefined;
         setTimeout(this.endUndoBatch, 100);
     };
@@ -453,7 +454,7 @@ export class CollectionDockingView extends CollectionSubView() {
                 }
             }
         }
-        if (!InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
+        if (!InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE) && Doc.ActiveTool !== InkTool.Ink) {
             e.stopPropagation();
         }
     };
@@ -544,7 +545,7 @@ export class CollectionDockingView extends CollectionSubView() {
     tabCreated = (tab: { contentItem: { element: HTMLElement[] } }) => {
         this.tabMap.add(tab);
         // InitTab is added to the tab's HTMLElement in TabDocView
-        const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as unknown as TabHTMLElement;
+        const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as TabHTMLElement;
         tabdocviewContent?.InitTab?.(tab); // have to explicitly initialize tabs that reuse contents from previous tabs (ie, when dragging a tab around a new tab is created for the old content)
     };