Merge pull request #7868 from vvlladd28/bug/dashboard-page/layout-divider-optimize

Fixed incorrect calculate width when used right layout dashboard

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -168,9 +168,9 @@
                               [ngClass]="{ 'tb-shrinked' : isEditingWidget }">
           <mat-drawer *ngIf="layouts.right.show"
                       id="tb-right-layout"
-                      [ngStyle]="{minWidth: rightLayoutWidth(),
+                      [ngStyle]="{minWidth: rightLayoutSize.width,
-                                  maxWidth: rightLayoutWidth(),
+                                  maxWidth: rightLayoutSize.width,
-                                  height: rightLayoutHeight(),
+                                  height: rightLayoutSize.height,
                                   borderLeft: 'none'}"
               disableClose="true"
               [@.disabled]="!isMobile"
@@ -191,8 +191,8 @@
           </mat-drawer>
           <mat-drawer-content [fxShow]="layouts.main.show"
                               id="tb-main-layout"
-                              [ngStyle]="{width: mainLayoutWidth(),
+                              [ngStyle]="{width: mainLayoutSize.width,
-                              height: mainLayoutHeight()}">
+                                          height: mainLayoutSize.height}">
             <tb-dashboard-layout
               [dashboardCheatSheet]="cheatSheetComponent"
               [layoutCtx]="layouts.main.layoutCtx"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -15,6 +15,7 @@
 ///
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -57,7 +58,8 @@ import { WINDOW } from '@core/services/window.service';
 import { WindowMessage } from '@shared/models/window-message.model';
 import { deepClone, guid, isDefined, isDefinedAndNotNull, isNotEmptyStr } from '@app/core/utils';
 import {
-  DashboardContext, DashboardPageInitData,
+  DashboardContext,
+  DashboardPageInitData,
   DashboardPageLayout,
   DashboardPageLayoutContext,
   DashboardPageLayouts,
@@ -149,6 +151,7 @@ import { TbPopoverService } from '@shared/components/popover.service';
 import { tap } from 'rxjs/operators';
 import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { ResizeObserver } from '@juggle/resize-observer';
 import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
 
 // @dynamic
@@ -159,7 +162,7 @@ import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardPageComponent extends PageComponent implements IDashboardController, OnInit, OnDestroy {
+export class DashboardPageComponent extends PageComponent implements IDashboardController, OnInit, AfterViewInit, OnDestroy {
 
   authState: AuthState = getCurrentAuthState(this.store);
 
@@ -246,9 +249,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   addingLayoutCtx: DashboardPageLayoutContext;
 
+  mainLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
+  rightLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
+
   private dashboardLogoCache: SafeUrl;
   private defaultDashboardLogo = 'assets/logo_title_white.svg';
 
+  private dashboardResize$: ResizeObserver;
+
   dashboardCtx: DashboardContext = {
     instanceId: this.utils.guid(),
     getDashboard: () => this.dashboard,
@@ -405,6 +413,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       .observe(MediaBreakpoints['gt-sm'])
       .subscribe((state: BreakpointState) => {
           this.isMobile = !state.matches;
+          this.updateLayoutSizes();
         }
     ));
     if (this.isMobileApp && this.syncStateWithQueryParam) {
@@ -417,6 +426,13 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
+  ngAfterViewInit() {
+    this.dashboardResize$ = new ResizeObserver(() => {
+      this.updateLayoutSizes();
+    });
+    this.dashboardResize$.observe(this.dashboardContainer.nativeElement);
+  }
+
   private init(data: DashboardPageInitData) {
 
     this.reset();
@@ -540,6 +556,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       subscription.unsubscribe();
     });
     this.rxSubscriptions.length = 0;
+    if (this.dashboardResize$) {
+      this.dashboardResize$.disconnect();
+    }
   }
 
   public runChangeDetection() {
@@ -682,28 +701,48 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened);
   }
 
-  public mainLayoutWidth(): string {
+  private updateLayoutSizes() {
-    if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
+    let changeMainLayoutSize = false;
-      return '100%';
+    let changeRightLayoutSize = false;
-    } else {
+    if (this.dashboardCtx.state) {
-      return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%';
+      changeMainLayoutSize = this.updateMainLayoutSize();
+      changeRightLayoutSize = this.updateRightLayoutSize();
+    }
+    if (changeMainLayoutSize || changeRightLayoutSize) {
+      this.cd.markForCheck();
     }
   }
 
-  public mainLayoutHeight(): string {
+  private updateMainLayoutSize(): boolean {
+    const prevMainLayoutWidth = this.mainLayoutSize.width;
+    const prevMainLayoutHeight = this.mainLayoutSize.height;
+    if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
+      this.mainLayoutSize.width = '100%';
+    } else {
+      this.mainLayoutSize.width = this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%';
+    }
     if (!this.isEditingWidget || this.editingLayoutCtx.id === 'main') {
-      return '100%';
+      this.mainLayoutSize.height = '100%';
     } else {
-      return '0px';
+      this.mainLayoutSize.height = '0px';
     }
+    return prevMainLayoutWidth !== this.mainLayoutSize.width || prevMainLayoutHeight !== this.mainLayoutSize.height;
   }
 
-  public rightLayoutWidth(): string {
+  private updateRightLayoutSize(): boolean {
+    const prevRightLayoutWidth = this.rightLayoutSize.width;
+    const prevRightLayoutHeight = this.rightLayoutSize.height;
     if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') {
-      return '100%';
+      this.rightLayoutSize.width = '100%';
+    } else {
+      this.rightLayoutSize.width = this.isMobile ? '100%' : this.calculateWidth('right');
+    }
+    if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') {
+      this.rightLayoutSize.height = '100%';
     } else {
-      return this.isMobile ? '100%' : this.calculateWidth('right');
+      this.rightLayoutSize.height = '0px';
     }
+    return prevRightLayoutWidth !== this.rightLayoutSize.width || prevRightLayoutHeight !== this.rightLayoutSize.height;
   }
 
   private calculateWidth(layout: DashboardLayoutId): string {
@@ -746,14 +785,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
-  public rightLayoutHeight(): string {
-    if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') {
-      return '100%';
-    } else {
-      return '0px';
-    }
-  }
-
   public isPublicUser(): boolean {
     return this.authUser.isPublic;
   }
@@ -980,6 +1011,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       layout.layoutCtx.ctrl.reload();
     }
     layout.layoutCtx.ignoreLoading = true;
+    this.updateLayoutSizes();
   }
 
   private setEditMode(isEdit: boolean, revert: boolean) {
@@ -1195,6 +1227,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.editingLayoutCtx = null;
     this.editingWidgetSubtitle = null;
     this.isEditingWidget = false;
+    this.updateLayoutSizes();
     this.resetHighlight();
     this.forceDashboardMobileMode = false;
   }
@@ -1220,6 +1253,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       this.editingWidgetSubtitle = this.widgetComponentService.getInstantWidgetInfo(this.editingWidget).widgetName;
       this.forceDashboardMobileMode = true;
       this.isEditingWidget = true;
+      this.updateLayoutSizes();
       if (layoutCtx) {
         const delayOffset = transition ? 350 : 0;
         const delay = transition ? 400 : 300;