Ensure DashCanvas layout updated if window resized while hidden (#3463

) * `DashCanvas` now properly updates its layout when shown if the browser window had been resized while the component was hidden (e.g. in an inactive tab). * Fixes #3215
xh · Aug 24, 2023 · ae428a8 · ae428a8
1 parent 8ee88de
commit ae428a8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 * Flex inner title element added to `Panel` headers in v59.0, and set `display:flex` on the new
   element itself. Restores previous flexbox container behavior (when not L/R collapsed) for apps
   that are providing custom components as titles.
+* `DashCanvas` now properly updates its layout when shown if the browser window had been resized
+  while the component was hidden (e.g. in an inactive tab).
 
 ## 59.0.1 - 2023-08-17
 

diff --git a/desktop/cmp/dash/canvas/DashCanvas.ts b/desktop/cmp/dash/canvas/DashCanvas.ts
@@ -5,11 +5,13 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {ContextMenu} from '@blueprintjs/core';
+import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
 import {elementFactory, hoistCmp, HoistProps, refreshContextView, uses, XH} from '@xh/hoist/core';
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
@@ -36,10 +38,16 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     className: 'xh-dash-canvas',
     model: uses(DashCanvasModel),
 
-    render({className, model}) {
+    render({className, model}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked;
 
+        ref = composeRefs(
+            ref,
+            model.ref,
+            useOnVisibleChange(viz => model.onVisibleChange(viz))
+        );
+
         return refreshContextView({
             model: model.refreshContextModel,
             item: div({
@@ -48,7 +56,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isDraggable ? `${className}--draggable` : null,
                     isResizable ? `${className}--resizable` : null
                 ),
-                ref: model.ref,
+                ref,
                 onContextMenu: e => onContextMenu(e, model),
                 items: [
                     reactGridLayout({

diff --git a/desktop/cmp/dash/canvas/DashCanvasModel.ts b/desktop/cmp/dash/canvas/DashCanvasModel.ts
@@ -198,18 +198,19 @@ export class DashCanvasModel extends DashModel<
         this.loadState(persistState?.state ?? initialState);
         this.state = this.buildState();
 
-        this.addReaction({
-            track: () => this.viewState,
-            run: () => this.publishState()
-        });
-
-        this.addReaction({
-            when: () => !!this.ref.current,
-            run: () => {
-                const {current: node} = this.ref;
-                this.scrollbarVisible = node.offsetWidth > node.clientWidth;
+        this.addReaction(
+            {
+                track: () => this.viewState,
+                run: () => this.publishState()
+            },
+            {
+                when: () => !!this.ref.current,
+                run: () => {
+                    const {current: node} = this.ref;
+                    this.scrollbarVisible = node.offsetWidth > node.clientWidth;
+                }
             }
-        });
+        );
     }
 
     /** Removes all views from the canvas */
@@ -377,6 +378,12 @@ export class DashCanvasModel extends DashModel<
         return model;
     }
 
+    // Trigger window resize event when component becomes visible to ensure layout adjusted to
+    // current window size - fixes https://github.com/xh/hoist-react/issues/3215
+    onVisibleChange(visible: boolean) {
+        if (visible) this.fireWindowResizeEvent();
+    }
+
     onRglLayoutChange(rglLayout) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
         this.setLayout(rglLayout);
@@ -396,7 +403,7 @@ export class DashCanvasModel extends DashModel<
         if (!node) return;
         const scrollbarVisible = node.offsetWidth > node.clientWidth;
         if (scrollbarVisible !== this.scrollbarVisible) {
-            window.dispatchEvent(new Event('resize'));
+            this.fireWindowResizeEvent();
             this.scrollbarVisible = scrollbarVisible;
         }
     }
@@ -522,4 +529,8 @@ export class DashCanvasModel extends DashModel<
 
         return {x: defaultX, y: endY ?? rows};
     }
+
+    private fireWindowResizeEvent() {
+        window.dispatchEvent(new Event('resize'));
+    }
 }