Merge branch 'master' into Merge

1 files changed, 19 insertions, 11 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 539b49c86..04e3b2663 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -48,8 +48,7 @@ export class CollectionDockingView extends CollectionSubView() {
     // 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;
@@ -66,6 +65,7 @@ export class CollectionDockingView extends CollectionSubView() {
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
+        console.log('CREATING DOCKING VIEW');
         if (this._props.renderDepth < 0) CollectionDockingView.Instance = this;
         // Why is this here?
         (window as unknown as { React: unknown }).React = React;
@@ -282,6 +282,7 @@ export class CollectionDockingView extends CollectionSubView() {
     }
     setupGoldenLayout = async () => {
         if (this._unmounting) return;
+        console.log('SETUP LAYOUT');
         // const config = StrCast(this.Document.dockingConfig, JSON.stringify(DashboardView.resetDashboard(this.Document)));
         const config = StrCast(this.Document.dockingConfig);
         if (config) {
@@ -339,29 +340,36 @@ export class CollectionDockingView extends CollectionSubView() {
     componentDidMount: () => void = async () => {
         this._props.setContentViewBox?.(this);
         this._unmounting = false;
+        console.log('MOUNTING');
         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) {
+                        console.log('CONFIG CHANGED');
                         //  bcz: TODO! really need to diff config with ignoreStateChange and modify the current goldenLayout instead of building a new one.
                         this.setupGoldenLayout();
                     }
                     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) {
+                        console.log('PWIDTH = ' + width);
+                        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);
@@ -375,7 +383,9 @@ export class CollectionDockingView extends CollectionSubView() {
     };
 
     componentWillUnmount: () => void = () => {
+        console.log('UNMOUNTING');
         this._unmounting = true;
+        Object.values(this._disposers).forEach(d => d());
         try {
             this._goldenLayout.unbind('stackCreated', this.stackCreated);
             this._goldenLayout.unbind('tabDestroyed', this.tabDestroyed);
@@ -385,9 +395,6 @@ export class CollectionDockingView extends CollectionSubView() {
         setTimeout(() => this._goldenLayout?.destroy());
         window.removeEventListener('resize', this.onResize);
         window.removeEventListener('mouseup', this.onPointerUp);
-
-        this._reactionDisposer?.();
-        this._lightboxReactionDisposer?.();
     };
 
     // ViewBoxInterface overrides
@@ -412,6 +419,7 @@ export class CollectionDockingView extends CollectionSubView() {
                   .map(f => f as Doc);
         const changesMade = this.Document.dockingConfig !== json;
         if (changesMade) {
+            console.log('WRITING CONFIG');
             if (![AclAdmin, AclEdit].includes(GetEffectiveAcl(this.dataDoc))) {
                 this.layoutDoc.dockingConfig = json;
                 this.layoutDoc.data = new List<Doc>(docs);
@@ -426,7 +434,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);
     };