dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Apply angular zone on resize observer callback when necessary.

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-20 14:05:59 +03:00
parent 20635e85cd
commit c428633795
19 changed files with 170 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)) {

4
ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
View File

@ -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);
}

17
ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
View File

@ -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);
}

17
ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts
View File

@ -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);
}

17
ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
View File

@ -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));

17
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
View File

@ -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);
}

12
ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
View File

@ -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);
}

12
ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
View File

@ -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);
}

17
ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts
View File

@ -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);

4
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
View File

@ -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);
}

20
ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
View File

@ -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);
}

19
ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
View File

@ -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 {

17
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View File

@ -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);
}

53
ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
View File

@ -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));
});
}

4
ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View File

@ -546,7 +546,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
}
});
} else {
this.onInit(true);
this.ngZone.run(() => {
this.onInit(true);
});
}
}
}

14
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts
View File

@ -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,

9
ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts
View File

@ -17,7 +17,7 @@
import {
AfterViewInit, ChangeDetectorRef,
Component,
Input,
Input, NgZone,
OnChanges, OnDestroy,
OnInit,
Renderer2,
@ -90,7 +90,8 @@ export class ScrollGridComponent<T, F> 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<T, F> 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);
}

17
ui-ngx/src/app/shared/components/image/image-gallery.component.ts
View File

@ -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<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);
if (this.pageMode) {

9
ui-ngx/src/app/shared/components/toggle-header.component.ts
View File

@ -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<AppState>,
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);
}