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

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

@ -471,8 +471,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
ngAfterViewInit() {
this.dashboardResize$ = new ResizeObserver(() => {
this.ngZone.run(() => {
this.updateLayoutSizes();
});
});
this.dashboardResize$.observe(this.dashboardContainer.nativeElement);
if (!this.widgetEditMode && !this.readonly && this.dashboardUtils.isEmptyDashboard(this.dashboard)) {
this.setEditMode(true, false);

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

@ -361,8 +361,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
ngAfterViewInit(): void {
this.gridsterResize$ = new ResizeObserver(() => {
this.ngZone.run(() => {
this.onGridsterParentResize();
});
});
this.gridsterResize$.observe(this.gridster.el.parentElement);
}

7
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,12 +158,14 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
});
}
this.widgetResize$ = new ResizeObserver(() => {
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);
}

7
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,12 +134,14 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
ngOnInit() {
this.widgetResize$ = new ResizeObserver(() => {
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);
}

7
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,12 +152,14 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
ngOnInit() {
this.componentResize$ = new ResizeObserver(() => {
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));
}

7
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,12 +116,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
ngOnInit(): void {
this.widgetResize$ = new ResizeObserver(() => {
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);
}

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

@ -273,12 +273,14 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
() => this.pageLink.page = 0
);
this.widgetResize$ = new ResizeObserver(() => {
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);
}
}

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

@ -220,12 +220,14 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
this.ctx.updateWidgetParams();
if (this.displayPagination) {
this.widgetResize$ = new ResizeObserver(() => {
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);
}
}

7
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,12 +102,14 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
}
this.widgetResize$ = new ResizeObserver(() => {
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);
this.backgroundStyle$ = backgroundStyle(this.ctx.settings.background, this.imagePipe, this.sanitizer);

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

@ -189,8 +189,10 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
this.buildForm();
this.ctx.updateWidgetParams();
this.formResize$ = new ResizeObserver(() => {
this.ngZone.run(() => {
this.resize();
});
});
this.formResize$.observe(this.formContainerRef.nativeElement);
}

10
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,12 +160,14 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
this.ctx.updateWidgetParams();
if (this.displayPagination) {
this.widgetResize$ = new ResizeObserver(() => {
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 {

7
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,12 +250,14 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
}
);
this.widgetResize$ = new ResizeObserver(() => {
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/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,7 +310,6 @@ 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(() => {
@ -327,7 +329,6 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
this.widget.onSelected((selected) =>
this.updateEditWidgetActionsTooltipSelectedState(selected));
});
});
}
private updateEditWidgetActionsTooltipSelectedState(selected: boolean) {

2
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.ngZone.run(() => {
this.onInit(true);
});
}
}
}

8
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,8 +194,10 @@ export class ScadaSymbolEditObject {
from(import('tooltipster')),
from(import('tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js'))
]).subscribe(() => {
this.zone.run(() => {
this.setupElements();
});
});
}
private setupZoomPan() {
@ -759,9 +761,7 @@ export class ScadaSymbolElement {
}
private setupTagPanel() {
this.editObject.zone.run(() => {
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);
});
}
private innerTagTooltipPosition(_instance: ITooltipsterInstance, helper: ITooltipsterHelper,

7
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,8 +110,10 @@ 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.zone.run(() => {
this.onContentResize();
});
});
this.contentResize$.observe(this.viewport._contentWrapper.nativeElement);
}
}

7
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,12 +362,14 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
private initListMode() {
this.destroyListMode$ = new Subject<void>();
this.widgetResize$ = new ResizeObserver(() => {
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) {
this.route.queryParams.pipe(

7
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,8 +297,10 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
private startObservePagination() {
this.toggleGroupResize$ = new ResizeObserver(() => {
this.zone.run(() => {
this.updatePagination();
});
});
this.toggleGroupResize$.observe(this.toggleGroupContainer.nativeElement);
}