diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json index aee5656baf..5115baacaf 100644 --- a/ui-ngx/package-lock.json +++ b/ui-ngx/package-lock.json @@ -1561,6 +1561,11 @@ } } }, + "@juggle/resize-observer": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.1.3.tgz", + "integrity": "sha512-y7qc6SzZBlSpx8hEDfV0S9Cx6goROX/vBhS2Ru1Q78Jp1FlCMbxp7UcAN90rLgB3X8DSMBgDFxcmoG/VfdAhFA==" + }, "@mat-datetimepicker/core": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@mat-datetimepicker/core/-/core-4.1.0.tgz", diff --git a/ui-ngx/package.json b/ui-ngx/package.json index dffceee1ff..0825a659e8 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -28,6 +28,7 @@ "@date-io/date-fns": "^2.6.1", "@flowjs/flow.js": "^2.14.0", "@flowjs/ngx-flow": "^0.4.3", + "@juggle/resize-observer": "^3.1.3", "@mat-datetimepicker/core": "^4.1.0", "@material-ui/core": "^4.9.11", "@material-ui/icons": "^4.9.1", 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 d34275b737..6531b3f84f 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 @@ -53,6 +53,7 @@ import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; import { MatMenuTrigger } from '@angular/material/menu'; import { SafeStyle } from '@angular/platform-browser'; import { distinct } from 'rxjs/operators'; +import { ResizeObserver } from '@juggle/resize-observer'; @Component({ selector: 'tb-dashboard', @@ -166,7 +167,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo private optionsChangeNotificationsPaused = false; - private gridsterResizeListener = null; + private gridsterResize$: ResizeObserver; constructor(protected store: Store, private timeService: TimeService, @@ -225,9 +226,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo ngOnDestroy(): void { super.ngOnDestroy(); - if (this.gridsterResizeListener) { - // @ts-ignore - removeResizeListener(this.gridster.el, this.gridsterResizeListener); + if (this.gridsterResize$) { + this.gridsterResize$.disconnect(); } if (this.breakpointObserverSubscription) { this.breakpointObserverSubscription.unsubscribe(); @@ -290,9 +290,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo } ngAfterViewInit(): void { - this.gridsterResizeListener = this.onGridsterParentResize.bind(this); - // @ts-ignore - addResizeListener(this.gridster.el, this.gridsterResizeListener); + this.gridsterResize$ = new ResizeObserver(() => { + this.onGridsterParentResize() + }); + this.gridsterResize$.observe(this.gridster.el); } onUpdateTimewindow(startTimeMs: number, endTimeMs: number, interval?: number, persist?: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts index b5d089324e..85a7339657 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts @@ -35,6 +35,7 @@ import { CustomActionDescriptor } from '@shared/models/widget.models'; import * as ace from 'ace-builds'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; import { css_beautify, html_beautify } from 'js-beautify'; +import { ResizeObserver } from '@juggle/resize-observer'; @Component({ selector: 'tb-custom-action-pretty-resources-tabs', @@ -64,7 +65,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl aceEditors: ace.Ace.Editor[] = []; editorsResizeCafs: {[editorId: string]: CancelAnimationFrame} = {}; - aceResizeListeners: { element: any, resizeListener: any }[] = []; + aceResizeObservers: ResizeObserver[] = []; htmlEditor: ace.Ace.Editor; cssEditor: ace.Ace.Editor; setValuesPending = false; @@ -84,9 +85,8 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl } ngOnDestroy(): void { - this.aceResizeListeners.forEach((resizeListener) => { - // @ts-ignore - removeResizeListener(resizeListener.element, resizeListener.resizeListener); + this.aceResizeObservers.forEach((resize$) => { + resize$.disconnect(); }); } @@ -188,11 +188,11 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl aceEditor.session.setUseWrapMode(true); this.aceEditors.push(aceEditor); - const resizeListener = this.onAceEditorResize.bind(this, aceEditor); - - // @ts-ignore - addResizeListener(editorElement, resizeListener); - this.aceResizeListeners.push({element: editorElement, resizeListener}); + const resize$ = new ResizeObserver(() => { + this.onAceEditorResize(aceEditor); + }); + resize$.observe(editorElement); + this.aceResizeObservers.push(resize$); return aceEditor; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts index dcc6dc7bee..475963a4e0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts @@ -58,6 +58,7 @@ import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetr import { forkJoin, Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; import { ImportExportService } from '@home/components/import-export/import-export.service'; +import { ResizeObserver } from '@juggle/resize-observer'; // @dynamic @Component({ @@ -93,7 +94,7 @@ export class GatewayFormComponent extends PageComponent implements OnInit, OnDes private successfulSaved: string; private gatewayNameExists: string; private archiveFileName: string; - private formResizeListener: any; + private formResize$: ResizeObserver; private subscribeStorageType$: any; private subscribeGateway$: any; @@ -116,15 +117,15 @@ export class GatewayFormComponent extends PageComponent implements OnInit, OnDes this.buildForm(); this.ctx.updateWidgetParams(); - this.formResizeListener = this.resize.bind(this); - // @ts-ignore - addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener); + this.formResize$ = new ResizeObserver(() => { + this.resize(); + }); + this.formResize$.observe(this.formContainerRef.nativeElement); } ngOnDestroy(): void { - if (this.formResizeListener) { - // @ts-ignore - removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener); + if (this.formResize$) { + this.formResize$.disconnect(); } this.subscribeGateway$.unsubscribe(); this.subscribeStorageType$.unsubscribe(); 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 ca7a2c5526..d3912e0a76 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 @@ -33,6 +33,7 @@ import { AttributeService } from '@core/http/attribute.service'; import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; import { forkJoin, Observable } from 'rxjs'; import { EntityId } from '@shared/models/id/entity-id'; +import { ResizeObserver } from '@juggle/resize-observer'; type FieldAlignment = 'row' | 'column'; @@ -94,7 +95,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni @Input() ctx: WidgetContext; - private formResizeListener: any; + private formResize$: ResizeObserver; private settings: MultipleInputWidgetSettings; private widgetConfig: WidgetConfig; private subscription: IWidgetSubscription; @@ -135,15 +136,15 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni this.updateDatasources(); this.buildForm(); this.ctx.updateWidgetParams(); - this.formResizeListener = this.resize.bind(this); - // @ts-ignore - addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener); + this.formResize$ = new ResizeObserver(() => { + this.resize(); + }); + this.formResize$.observe(this.formContainerRef.nativeElement); } ngOnDestroy(): void { - if (this.formResizeListener) { - // @ts-ignore - removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener); + if (this.formResize$) { + this.formResize$.disconnect(); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts index e98170501d..e15d25bd86 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts @@ -22,9 +22,9 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { isDefined, isNumber } from '@core/utils'; import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge'; -import GenericOptions = CanvasGauges.GenericOptions; import * as tinycolor_ from 'tinycolor2'; -import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; +import GenericOptions = CanvasGauges.GenericOptions; +import { ResizeObserver } from '@juggle/resize-observer'; const tinycolor = tinycolor_; @@ -103,7 +103,7 @@ export class KnobComponent extends PageComponent implements OnInit, OnDestroy { private canvasBar: CanvasDigitalGauge; - private knobResizeListener: any; + private knobResize$: ResizeObserver; constructor(private utils: UtilsService, protected store: Store) { @@ -126,16 +126,16 @@ export class KnobComponent extends PageComponent implements OnInit, OnDestroy { this.textMeasure = $(this.textMeasureRef.nativeElement); this.canvasBarElement = this.canvasBarElementRef.nativeElement; - this.knobResizeListener = this.resize.bind(this); - // @ts-ignore - addResizeListener(this.knobContainerRef.nativeElement, this.knobResizeListener); + this.knobResize$ = new ResizeObserver(() => { + this.resize(); + }); + this.knobResize$.observe(this.knobContainerRef.nativeElement); this.init(); } ngOnDestroy(): void { - if (this.knobResizeListener) { - // @ts-ignore - removeResizeListener(this.knobContainerRef.nativeElement, this.knobResizeListener); + if (this.knobResize$) { + this.knobResize$.disconnect(); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts index f7ba48880c..847987c215 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts @@ -25,6 +25,7 @@ import { UtilsService } from '@core/services/utils.service'; import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; import { DatasourceType, widgetType } from '@shared/models/widget.models'; import { EntityType } from '@shared/models/entity-type.models'; +import { ResizeObserver } from '@juggle/resize-observer'; import Timeout = NodeJS.Timeout; const tinycolor = tinycolor_; @@ -93,7 +94,7 @@ export class LedIndicatorComponent extends PageComponent implements OnInit, OnDe private ledErrorContainer: JQuery; private ledError: JQuery; - private ledResizeListener: any; + private ledResize$: ResizeObserver; private subscriptionOptions: WidgetSubscriptionOptions = { callbacks: { @@ -122,9 +123,10 @@ export class LedIndicatorComponent extends PageComponent implements OnInit, OnDe this.ledErrorContainer = $(this.ledErrorContainerRef.nativeElement); this.ledError = $(this.ledErrorRef.nativeElement); - this.ledResizeListener = this.resize.bind(this); - // @ts-ignore - addResizeListener(this.ledContainerRef.nativeElement, this.ledResizeListener); + this.ledResize$ = new ResizeObserver(() => { + this.resize(); + }); + this.ledResize$.observe(this.ledContainerRef.nativeElement); this.init(); } @@ -136,9 +138,8 @@ export class LedIndicatorComponent extends PageComponent implements OnInit, OnDe if (this.subscription) { this.ctx.subscriptionApi.removeSubscription(this.subscription.id); } - if (this.ledResizeListener) { - // @ts-ignore - removeResizeListener(this.ledContainerRef.nativeElement, this.ledResizeListener); + if (this.ledResize$) { + this.ledResize$.disconnect(); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.ts index 57ec717eba..fe6b8cbeb6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { WidgetContext } from '@home/models/widget-component.models'; import { UtilsService } from '@core/services/utils.service'; @@ -24,6 +24,7 @@ import { isDefined } from '@core/utils'; import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; import { DatasourceType, widgetType } from '@shared/models/widget.models'; import { EntityType } from '@shared/models/entity-type.models'; +import { ResizeObserver } from '@juggle/resize-observer'; type RetrieveValueMethod = 'rpc' | 'attribute' | 'timeseries'; @@ -88,7 +89,7 @@ export class RoundSwitchComponent extends PageComponent implements OnInit, OnDes private switchErrorContainer: JQuery; private switchError: JQuery; - private switchResizeListener: any; + private switchResize$: ResizeObserver; constructor(private utils: UtilsService, protected store: Store) { @@ -110,20 +111,19 @@ export class RoundSwitchComponent extends PageComponent implements OnInit, OnDes this.onValue(); }); - this.switchResizeListener = this.resize.bind(this); - // @ts-ignore - addResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); + this.switchResize$ = new ResizeObserver(() => { + this.resize(); + }); + this.switchResize$.observe(this.switchContainerRef.nativeElement); this.init(); - // this.ctx.resize = this.resize.bind(this); } ngOnDestroy(): void { if (this.valueSubscription) { this.ctx.subscriptionApi.removeSubscription(this.valueSubscription.id); } - if (this.switchResizeListener) { - // @ts-ignore - removeResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); + if (this.switchResize$) { + this.switchResize$.disconnect(); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts index f977955459..2fe2404b95 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts @@ -25,6 +25,7 @@ import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from import { DatasourceType, widgetType } from '@shared/models/widget.models'; import { EntityType } from '@shared/models/entity-type.models'; import { MatSlideToggle } from '@angular/material/slide-toggle'; +import { ResizeObserver } from '@juggle/resize-observer'; const switchAspectRation = 2.7893; @@ -98,7 +99,7 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy private switchErrorContainer: JQuery; private switchError: JQuery; - private switchResizeListener: any; + private switchResize$: ResizeObserver; constructor(private utils: UtilsService, protected store: Store) { @@ -118,9 +119,10 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy this.switchErrorContainer = $(this.switchErrorContainerRef.nativeElement); this.switchError = $(this.switchErrorRef.nativeElement); - this.switchResizeListener = this.resize.bind(this); - // @ts-ignore - addResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); + this.switchResize$ = new ResizeObserver(() => { + this.resize(); + }) + this.switchResize$.observe(this.switchContainerRef.nativeElement); this.init(); } @@ -128,9 +130,8 @@ export class SwitchComponent extends PageComponent implements OnInit, OnDestroy if (this.valueSubscription) { this.ctx.subscriptionApi.removeSubscription(this.valueSubscription.id); } - if (this.switchResizeListener) { - // @ts-ignore - removeResizeListener(this.switchContainerRef.nativeElement, this.switchResizeListener); + if (this.switchResize$) { + this.switchResize$.disconnect(); } } 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 caa713cfb0..389c70a96a 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 @@ -91,6 +91,7 @@ import { DatasourceService } from '@core/api/datasource.service'; import { WidgetSubscription } from '@core/api/widget-subscription'; import { EntityService } from '@core/http/entity.service'; import { ServicesMap } from '@home/models/services.map'; +import { ResizeObserver } from '@juggle/resize-observer'; @Component({ selector: 'tb-widget', @@ -140,7 +141,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI cafs: {[cafId: string]: CancelAnimationFrame} = {}; - onResizeListener = null; + private widgetResize$: ResizeObserver; private cssParser = new cssjs(); @@ -647,10 +648,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI } private destroyDynamicWidgetComponent() { - if (this.widgetContext.$containerParent && this.onResizeListener) { - // @ts-ignore - removeResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener); - this.onResizeListener = null; + if (this.widgetContext.$containerParent && this.widgetResize$) { + this.widgetResize$.disconnect() } if (this.dynamicWidgetComponentRef) { this.dynamicWidgetComponentRef.destroy(); @@ -709,9 +708,10 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI } } - this.onResizeListener = this.onResize.bind(this); - // @ts-ignore - addResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener); + this.widgetResize$ = new ResizeObserver(() => { + this.onResize(); + }); + this.widgetResize$.observe(this.widgetContext.$containerParent[0]); } private createSubscription(options: WidgetSubscriptionOptions, subscribe?: boolean): Observable { diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-toolbar.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-toolbar.component.ts index ce8413e6d4..1812cd7f03 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-toolbar.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-toolbar.component.ts @@ -14,8 +14,7 @@ /// limitations under the License. /// -import { Component, OnDestroy, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core'; -import { PageComponent } from '@shared/components/page.component'; +import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'tb-dashboard-toolbar', diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts index 806bf06522..dbd081712d 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts @@ -46,6 +46,7 @@ import { } from '@home/pages/widget/save-widget-type-as-dialog.component'; import { Subscription } from 'rxjs'; import Timeout = NodeJS.Timeout; +import { ResizeObserver } from '@juggle/resize-observer'; // @dynamic @Component({ @@ -124,7 +125,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe jsonSettingsEditor: ace.Ace.Editor; dataKeyJsonSettingsEditor: ace.Ace.Editor; jsEditor: ace.Ace.Editor; - aceResizeListeners: { element: any, resizeListener: any }[] = []; + aceResizeObservers: ResizeObserver[] = []; onWindowMessageListener = this.onWindowMessage.bind(this); @@ -193,9 +194,8 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe ngOnDestroy(): void { this.window.removeEventListener('message', this.onWindowMessageListener); - this.aceResizeListeners.forEach((resizeListener) => { - // @ts-ignore - removeResizeListener(resizeListener.element, resizeListener.resizeListener); + this.aceResizeObservers.forEach((resize$) => { + resize$.disconnect(); }); this.rxSubscriptions.forEach((subscription) => { subscription.unsubscribe(); @@ -343,11 +343,11 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe aceEditor.session.setUseWrapMode(true); this.aceEditors.push(aceEditor); - const resizeListener = this.onAceEditorResize.bind(this, aceEditor); - - // @ts-ignore - addResizeListener(editorElement, resizeListener); - this.aceResizeListeners.push({element: editorElement, resizeListener}); + const resize$ = new ResizeObserver(() => { + this.onAceEditorResize(aceEditor); + }); + resize$.observe(editorElement); + this.aceResizeObservers.push(resize$); return aceEditor; } diff --git a/ui-ngx/src/app/shared/components/fab-toolbar.component.ts b/ui-ngx/src/app/shared/components/fab-toolbar.component.ts index 5b71494ec7..3799894eb5 100644 --- a/ui-ngx/src/app/shared/components/fab-toolbar.component.ts +++ b/ui-ngx/src/app/shared/components/fab-toolbar.component.ts @@ -29,6 +29,7 @@ import { } from '@angular/core'; import { WINDOW } from '@core/services/window.service'; import { CanColorCtor, mixinColor } from '@angular/material/core'; +import { ResizeObserver } from '@juggle/resize-observer'; export declare type FabToolbarDirection = 'left' | 'right'; @@ -77,14 +78,14 @@ export class FabActionsDirective implements OnInit { }) export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnInit, OnDestroy, AfterViewInit, OnChanges { + private fabToolbarResize$: ResizeObserver; + @Input() isOpen: boolean; @Input() direction: FabToolbarDirection; - fabToolbarResizeListener = this.onFabToolbarResize.bind(this); - constructor(private el: ElementRef, @Inject(WINDOW) private window: Window) { super(el); @@ -96,13 +97,14 @@ export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnIni element.find('mat-fab-trigger').find('button') .prepend('
'); element.addClass(`mat-${this.direction}`); - // @ts-ignore - addResizeListener(this.el.nativeElement, this.fabToolbarResizeListener); + this.fabToolbarResize$ = new ResizeObserver(() => { + this.onFabToolbarResize(); + }); + this.fabToolbarResize$.observe(this.el.nativeElement); } ngOnDestroy(): void { - // @ts-ignore - removeResizeListener(this.el.nativeElement, this.fabToolbarResizeListener); + this.fabToolbarResize$.disconnect(); } ngAfterViewInit(): void { diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts index 06e7f77104..0691aab813 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.ts +++ b/ui-ngx/src/app/shared/components/js-func.component.ts @@ -15,11 +15,11 @@ /// import { - ChangeDetectionStrategy, Component, ElementRef, forwardRef, - Input, OnDestroy, + Input, + OnDestroy, OnInit, ViewChild, ViewEncapsulation @@ -34,6 +34,7 @@ import { UtilsService } from '@core/services/utils.service'; import { guid, isUndefined } from '@app/core/utils'; import { TranslateService } from '@ngx-translate/core'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; +import { ResizeObserver } from '@juggle/resize-observer'; @Component({ selector: 'tb-js-func', @@ -60,7 +61,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, private jsEditor: ace.Ace.Editor; private editorsResizeCaf: CancelAnimationFrame; - private editorResizeListener: any; + private editorResize$: ResizeObserver; toastTargetId = `jsFuncEditor-${guid()}`; @@ -152,16 +153,15 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, this.cleanupJsErrors(); this.updateView(); }); - this.editorResizeListener = this.onAceEditorResize.bind(this); - // @ts-ignore - addResizeListener(editorElement, this.editorResizeListener); + this.editorResize$ = new ResizeObserver(() => { + this.onAceEditorResize(); + }); + this.editorResize$.observe(editorElement); } ngOnDestroy(): void { - if (this.editorResizeListener) { - const editorElement = this.javascriptEditorElmRef.nativeElement; - // @ts-ignore - removeResizeListener(editorElement, this.editorResizeListener); + if (this.editorResize$) { + this.editorResize$.disconnect(); } } diff --git a/ui-ngx/src/app/shared/components/json-content.component.ts b/ui-ngx/src/app/shared/components/json-content.component.ts index 6db51b848a..e957a40d5c 100644 --- a/ui-ngx/src/app/shared/components/json-content.component.ts +++ b/ui-ngx/src/app/shared/components/json-content.component.ts @@ -20,10 +20,10 @@ import { forwardRef, Input, OnChanges, + OnDestroy, OnInit, - ViewChild, SimpleChanges, - OnDestroy + ViewChild } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms'; import * as ace from 'ace-builds'; @@ -34,6 +34,7 @@ import { AppState } from '@core/core.state'; import { ContentType, contentTypesMap } from '@shared/models/constants'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; import { guid } from '@core/utils'; +import { ResizeObserver } from '@juggle/resize-observer'; @Component({ selector: 'tb-json-content', @@ -59,7 +60,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid private jsonEditor: ace.Ace.Editor; private editorsResizeCaf: CancelAnimationFrame; - private editorResizeListener: any; + private editorResize$: ResizeObserver; toastTargetId = `jsonContentEditor-${guid()}`; @@ -97,8 +98,6 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid contentValid: boolean; - validationError: string; - errorShowed = false; private propagateChange = null; @@ -135,16 +134,15 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid this.cleanupJsonErrors(); this.updateView(); }); - this.editorResizeListener = this.onAceEditorResize.bind(this); - // @ts-ignore - addResizeListener(editorElement, this.editorResizeListener); + this.editorResize$ = new ResizeObserver(() => { + this.onAceEditorResize(); + }); + this.editorResize$.observe(editorElement); } ngOnDestroy(): void { - if (this.editorResizeListener) { - const editorElement = this.jsonEditorElmRef.nativeElement; - // @ts-ignore - removeResizeListener(editorElement, this.editorResizeListener); + if (this.editorResize$) { + this.editorResize$.disconnect(); } } diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.ts b/ui-ngx/src/app/shared/components/json-object-edit.component.ts index dcd9722aa0..ba68a5090d 100644 --- a/ui-ngx/src/app/shared/components/json-object-edit.component.ts +++ b/ui-ngx/src/app/shared/components/json-object-edit.component.ts @@ -14,16 +14,8 @@ /// limitations under the License. /// -import { - Attribute, ChangeDetectionStrategy, - Component, - ElementRef, - forwardRef, - Input, OnDestroy, - OnInit, - ViewChild -} from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl, Validator, NG_VALIDATORS } from '@angular/forms'; +import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms'; import * as ace from 'ace-builds'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions'; @@ -31,6 +23,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; import { guid } from '@core/utils'; +import { ResizeObserver } from '@juggle/resize-observer'; @Component({ selector: 'tb-json-object-edit', @@ -56,7 +49,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va private jsonEditor: ace.Ace.Editor; private editorsResizeCaf: CancelAnimationFrame; - private editorResizeListener: any; + private editorResize$: ResizeObserver; toastTargetId = `jsonObjectEditor-${guid()}`; @@ -128,16 +121,15 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va this.cleanupJsonErrors(); this.updateView(); }); - this.editorResizeListener = this.onAceEditorResize.bind(this); - // @ts-ignore - addResizeListener(editorElement, this.editorResizeListener); + this.editorResize$ = new ResizeObserver(() => { + this.onAceEditorResize(); + }); + this.editorResize$.observe(editorElement); } ngOnDestroy(): void { - if (this.editorResizeListener) { - const editorElement = this.jsonEditorElmRef.nativeElement; - // @ts-ignore - removeResizeListener(editorElement, this.editorResizeListener); + if (this.editorResize$) { + this.editorResize$.disconnect(); } }