From c4286337954f37b79a7437b7ec6952f60c269f8d Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 20 Sep 2024 14:05:59 +0300 Subject: [PATCH] UI: Apply angular zone on resize observer callback when necessary. --- .../dashboard-page.component.ts | 4 +- .../dashboard/dashboard.component.ts | 4 +- .../entity/entities-table.component.ts | 17 +++--- .../relation/relation-table.component.ts | 17 +++--- .../vc/entity-versions-table.component.ts | 17 +++--- .../action/manage-widget-actions.component.ts | 17 +++--- .../alarm/alarms-table-widget.component.ts | 12 +++-- .../entity/entities-table-widget.component.ts | 12 +++-- .../lib/mobile-app-qrcode-widget.component.ts | 17 +++--- .../lib/multiple-input-widget.component.ts | 4 +- .../lib/rpc/persistent-table.component.ts | 20 ++++--- .../widget/lib/scada/scada-symbol.models.ts | 19 ++++++- .../lib/timeseries-table-widget.component.ts | 17 +++--- .../widget/widget-container.component.ts | 53 ++++++++++--------- .../components/widget/widget.component.ts | 4 +- .../scada-symbol-editor.models.ts | 14 +++-- .../components/grid/scroll-grid.component.ts | 9 ++-- .../image/image-gallery.component.ts | 17 +++--- .../components/toggle-header.component.ts | 9 ++-- 19 files changed, 170 insertions(+), 113 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index b1963e4ff0..2e22975f7e 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -471,7 +471,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC ngAfterViewInit() { this.dashboardResize$ = new ResizeObserver(() => { - this.updateLayoutSizes(); + this.ngZone.run(() => { + this.updateLayoutSizes(); + }); }); this.dashboardResize$.observe(this.dashboardContainer.nativeElement); if (!this.widgetEditMode && !this.readonly && this.dashboardUtils.isEmptyDashboard(this.dashboard)) { diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index cb60b5338c..180b4da3e3 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -361,7 +361,9 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo ngAfterViewInit(): void { this.gridsterResize$ = new ResizeObserver(() => { - this.onGridsterParentResize(); + this.ngZone.run(() => { + this.onGridsterParentResize(); + }); }); this.gridsterResize$.observe(this.gridster.el.parentElement); } diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts index 75f44be0b3..bf906aa1b2 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts @@ -22,7 +22,7 @@ import { ComponentFactoryResolver, ElementRef, EventEmitter, - Input, + Input, NgZone, OnChanges, OnDestroy, OnInit, @@ -142,7 +142,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa private router: Router, private componentFactoryResolver: ComponentFactoryResolver, private elementRef: ElementRef, - private fb: FormBuilder) { + private fb: FormBuilder, + private zone: NgZone) { super(store); } @@ -157,11 +158,13 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa }); } this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts index 670eafc63f..d0bf8bb8e2 100644 --- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts @@ -20,7 +20,7 @@ import { ChangeDetectorRef, Component, ElementRef, - Input, + Input, NgZone, OnDestroy, OnInit, ViewChild @@ -121,7 +121,8 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn private dialogService: DialogService, private cd: ChangeDetectorRef, private elementRef: ElementRef, - private fb: FormBuilder) { + private fb: FormBuilder, + private zone: NgZone) { super(store); this.dirtyValue = !this.activeValue; const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC }; @@ -133,11 +134,13 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn ngOnInit() { this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts index a432d4898f..c39b1b1ee3 100644 --- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts @@ -20,7 +20,7 @@ import { Component, ElementRef, EventEmitter, - Input, + Input, NgZone, OnDestroy, OnInit, Output, @@ -141,7 +141,8 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni private cd: ChangeDetectorRef, private viewContainerRef: ViewContainerRef, private elementRef: ElementRef, - private fb: FormBuilder) { + private fb: FormBuilder, + private zone: NgZone) { super(store); this.dirtyValue = !this.activeValue; const sortOrder: SortOrder = { property: 'timestamp', direction: Direction.DESC }; @@ -151,11 +152,13 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni ngOnInit() { this.componentResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.componentResize$.observe(this.elementRef.nativeElement); this.isReadOnly = this.adminService.getRepositorySettingsInfo().pipe(map(settings => settings.readOnly)); diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts index 92be318fc2..2a83f97b80 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts @@ -20,7 +20,7 @@ import { Component, ElementRef, forwardRef, - Input, + Input, NgZone, OnDestroy, OnInit, ViewChild @@ -105,7 +105,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni private dialog: MatDialog, private dialogs: DialogService, private cd: ChangeDetectorRef, - private elementRef: ElementRef) { + private elementRef: ElementRef, + private zone: NgZone) { super(store); const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC }; this.pageLink = new PageLink(10, 0, null, sortOrder); @@ -115,11 +116,13 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni ngOnInit(): void { this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts index e4a9393dff..d285fc016b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts @@ -273,11 +273,13 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, () => this.pageLink.page = 0 ); this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.ngZone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts index 7a80f0c4ae..8c44ea759a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts @@ -220,11 +220,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni this.ctx.updateWidgetParams(); if (this.displayPagination) { this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.ngZone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts index 0c223b17bf..39270125b6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { AppState } from '@core/core.state'; import { Store } from '@ngrx/store'; @@ -81,7 +81,8 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI private utilsService: UtilsService, private elementRef: ElementRef, private imagePipe: ImagePipe, - private sanitizer: DomSanitizer,) { + private sanitizer: DomSanitizer, + private zone: NgZone) { super(store); } @@ -101,11 +102,13 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI } this.widgetResize$ = new ResizeObserver(() => { - const showHideBadgeContainer = this.elementRef.nativeElement.offsetWidth > 250; - if (showHideBadgeContainer !== this.showBadgeContainer) { - this.showBadgeContainer = showHideBadgeContainer; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHideBadgeContainer = this.elementRef.nativeElement.offsetWidth > 250; + if (showHideBadgeContainer !== this.showBadgeContainer) { + this.showBadgeContainer = showHideBadgeContainer; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts index 10f541c26c..02f79f0f3f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts @@ -189,7 +189,9 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni this.buildForm(); this.ctx.updateWidgetParams(); this.formResize$ = new ResizeObserver(() => { - this.resize(); + this.ngZone.run(() => { + this.resize(); + }); }); this.formResize$.observe(this.formContainerRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts index 61051b3119..9890db321a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts @@ -15,11 +15,12 @@ /// import { + AfterViewInit, ChangeDetectorRef, Component, ElementRef, Injector, - Input, + Input, NgZone, OnDestroy, OnInit, StaticProvider, ViewChild, @@ -100,7 +101,7 @@ interface PersistentTableWidgetActionDescriptor extends TableCellButtonActionDes styleUrls: ['./persistent-table.component.scss' , '../table-widget.scss'] }) -export class PersistentTableComponent extends PageComponent implements OnInit { +export class PersistentTableComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit { @Input() ctx: WidgetContext; @@ -144,7 +145,8 @@ export class PersistentTableComponent extends PageComponent implements OnInit { private dialogService: DialogService, private deviceService: DeviceService, private dialog: MatDialog, - private cd: ChangeDetectorRef) { + private cd: ChangeDetectorRef, + private zone: NgZone) { super(store); } @@ -158,11 +160,13 @@ export class PersistentTableComponent extends PageComponent implements OnInit { this.ctx.updateWidgetParams(); if (this.displayPagination) { this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts index e483651a62..545c9eec10 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts @@ -1218,8 +1218,8 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation { return this; } - public ease(easing: string): this { - this._easing = easing; + public ease(easing: string | EasingLiteral): this { + this._easing = this.easingLiteralToCssEasing(easing); this.updateAnimationStyle('animation-timing-function', this._easing); return this; } @@ -1566,6 +1566,21 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation { return Math.round((num + Number.EPSILON) * factor) / factor; } + private easingLiteralToCssEasing(easing: string | EasingLiteral): string { + switch (easing) { + case '<>': + return 'ease-in-out'; + case '-': + return 'linear'; + case '>': + return 'ease-out'; + case '<': + return 'ease-in'; + default: + return easing; + } + } + } class JsScadaSymbolAnimation implements ScadaSymbolAnimation { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts index 6b7e80a269..7c232eb071 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts @@ -20,7 +20,7 @@ import { Component, ElementRef, Injector, - Input, + Input, NgZone, OnDestroy, OnInit, QueryList, @@ -224,7 +224,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI private domSanitizer: DomSanitizer, private datePipe: DatePipe, private cd: ChangeDetectorRef, - private fb: FormBuilder) { + private fb: FormBuilder, + private zone: NgZone) { super(store); } @@ -249,11 +250,13 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI } ); this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts index b9dde9581f..4efa840526 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts @@ -18,16 +18,20 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, - Component, ComponentRef, + Component, + ComponentRef, ElementRef, EventEmitter, HostBinding, - Input, NgZone, OnChanges, + Input, + OnChanges, OnDestroy, OnInit, Output, - Renderer2, SimpleChanges, - ViewChild, ViewContainerRef, + Renderer2, + SimpleChanges, + ViewChild, + ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; @@ -38,9 +42,9 @@ import { SafeStyle } from '@angular/platform-browser'; import { isNotEmptyStr } from '@core/utils'; import { GridsterItemComponent } from 'angular-gridster2'; import { UtilsService } from '@core/services/utils.service'; -import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import { from } from 'rxjs'; import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; +import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; export enum WidgetComponentActionType { MOUSE_DOWN, @@ -134,8 +138,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O private renderer: Renderer2, private container: ViewContainerRef, private dashboardUtils: DashboardUtilsService, - private utils: UtilsService, - private zone: NgZone) { + private utils: UtilsService) { super(store); } @@ -307,26 +310,24 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O } }); this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance'); - this.zone.run(() => { - componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent); - componentRef.instance.container = this; - componentRef.instance.viewInited.subscribe(() => { - if (this.editWidgetActionsTooltip.status().open) { - this.editWidgetActionsTooltip.reposition(); - } - }); - this.editWidgetActionsTooltip.on('destroyed', () => { - componentRef.destroy(); - }); - const parentElement = componentRef.instance.element.nativeElement; - const content = parentElement.firstChild; - parentElement.removeChild(content); - parentElement.style.display = 'none'; - this.editWidgetActionsTooltip.content(content); - this.updateEditWidgetActionsTooltipState(); - this.widget.onSelected((selected) => - this.updateEditWidgetActionsTooltipSelectedState(selected)); + componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent); + componentRef.instance.container = this; + componentRef.instance.viewInited.subscribe(() => { + if (this.editWidgetActionsTooltip.status().open) { + this.editWidgetActionsTooltip.reposition(); + } + }); + this.editWidgetActionsTooltip.on('destroyed', () => { + componentRef.destroy(); }); + const parentElement = componentRef.instance.element.nativeElement; + const content = parentElement.firstChild; + parentElement.removeChild(content); + parentElement.style.display = 'none'; + this.editWidgetActionsTooltip.content(content); + this.updateEditWidgetActionsTooltipState(); + this.widget.onSelected((selected) => + this.updateEditWidgetActionsTooltipSelectedState(selected)); }); } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index 51ca44c159..b58e9fe85b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -546,7 +546,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI } }); } else { - this.onInit(true); + this.ngZone.run(() => { + this.onInit(true); + }); } } } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts index e38f52d0d1..eed1c7dde0 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts @@ -79,7 +79,7 @@ export class ScadaSymbolEditObject { constructor(private rootElement: HTMLElement, public tooltipsContainer: HTMLElement, public viewContainerRef: ViewContainerRef, - public zone: NgZone, + private zone: NgZone, private callbacks: ScadaSymbolEditObjectCallbacks, public readonly: boolean) { this.shapeResize$ = new ResizeObserver(() => { @@ -194,7 +194,9 @@ export class ScadaSymbolEditObject { from(import('tooltipster')), from(import('tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js')) ]).subscribe(() => { - this.setupElements(); + this.zone.run(() => { + this.setupElements(); + }); }); } @@ -759,9 +761,7 @@ export class ScadaSymbolElement { } private setupTagPanel() { - this.editObject.zone.run(() => { - setupTagPanelTooltip(this, this.editObject.viewContainerRef); - }); + setupTagPanelTooltip(this, this.editObject.viewContainerRef); } private createAddTagTooltip() { @@ -809,9 +809,7 @@ export class ScadaSymbolElement { } private setupAddTagPanel() { - this.editObject.zone.run(() => { - setupAddTagPanelTooltip(this, this.editObject.viewContainerRef); - }); + setupAddTagPanelTooltip(this, this.editObject.viewContainerRef); } private innerTagTooltipPosition(_instance: ITooltipsterInstance, helper: ITooltipsterHelper, diff --git a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts index 632351f8ed..34bf0faa89 100644 --- a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts +++ b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts @@ -17,7 +17,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, - Input, + Input, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, @@ -90,7 +90,8 @@ export class ScrollGridComponent implements OnInit, AfterViewInit, OnChang constructor(private breakpointObserver: BreakpointObserver, private cd: ChangeDetectorRef, - private renderer: Renderer2) { + private renderer: Renderer2, + private zone: NgZone) { } ngOnInit(): void { @@ -109,7 +110,9 @@ export class ScrollGridComponent implements OnInit, AfterViewInit, OnChang this.renderer.setStyle(this.viewport._contentWrapper.nativeElement, 'padding', this.gap + 'px'); if (!(typeof this.itemSize === 'number')) { this.contentResize$ = new ResizeObserver(() => { - this.onContentResize(); + this.zone.run(() => { + this.onContentResize(); + }); }); this.contentResize$.observe(this.viewport._contentWrapper.nativeElement); } diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts index 4a41e5ce86..566fc699ae 100644 --- a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts +++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts @@ -33,7 +33,7 @@ import { ElementRef, EventEmitter, HostBinding, - Input, + Input, NgZone, OnDestroy, OnInit, Output, @@ -196,7 +196,8 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe private importExportService: ImportExportService, private elementRef: ElementRef, private cd: ChangeDetectorRef, - private fb: FormBuilder) { + private fb: FormBuilder, + private zone: NgZone) { super(store); this.gridImagesFetchFunction = (pageSize, page, filter) => { @@ -361,11 +362,13 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe private initListMode() { this.destroyListMode$ = new Subject(); this.widgetResize$ = new ResizeObserver(() => { - const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; - if (showHidePageSize !== this.hidePageSize) { - this.hidePageSize = showHidePageSize; - this.cd.markForCheck(); - } + this.zone.run(() => { + const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; + if (showHidePageSize !== this.hidePageSize) { + this.hidePageSize = showHidePageSize; + this.cd.markForCheck(); + } + }); }); this.widgetResize$.observe(this.elementRef.nativeElement); if (this.pageMode) { diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts index 92ccbb76f9..cb42b48a76 100644 --- a/ui-ngx/src/app/shared/components/toggle-header.component.ts +++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts @@ -25,7 +25,7 @@ import { ElementRef, EventEmitter, HostBinding, - Input, + Input, NgZone, OnDestroy, OnInit, Output, @@ -213,7 +213,8 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV constructor(protected store: Store, private cd: ChangeDetectorRef, private platform: Platform, - private breakpointObserver: BreakpointObserver) { + private breakpointObserver: BreakpointObserver, + private zone: NgZone) { super(store); } @@ -296,7 +297,9 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV private startObservePagination() { this.toggleGroupResize$ = new ResizeObserver(() => { - this.updatePagination(); + this.zone.run(() => { + this.updatePagination(); + }); }); this.toggleGroupResize$.observe(this.toggleGroupContainer.nativeElement); }