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

Change resize events to observer (#2652)

Browse Source
This commit is contained in:
Vladyslav 2020-04-22 13:21:14 +03:00 committed by GitHub
parent 4ede9a3a4d
commit caf91be338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 129 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/package-lock.json generated
View File

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

1
ui-ngx/package.json
View File

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

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

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

18
ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts
View File

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

15
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
View File

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

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

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

18
ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts
View File

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

15
ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.ts
View File

@ -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<HTMLElement>;
private ledError: JQuery<HTMLElement>;
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();
}
}

18
ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.ts
View File

@ -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<HTMLElement>;
private switchError: JQuery<HTMLElement>;
private switchResizeListener: any;
private switchResize$: ResizeObserver;
constructor(private utils: UtilsService,
protected store: Store<AppState>) {
@ -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();
}
}

15
ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
View File

@ -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<HTMLElement>;
private switchError: JQuery<HTMLElement>;
private switchResizeListener: any;
private switchResize$: ResizeObserver;
constructor(private utils: UtilsService,
protected store: Store<AppState>) {
@ -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();
}
}

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

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

3
ui-ngx/src/app/modules/home/pages/dashboard/dashboard-toolbar.component.ts
View File

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

18
ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
View File

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

14
ui-ngx/src/app/shared/components/fab-toolbar.component.ts
View File

@ -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<HTMLElement>,
@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('<div class="mat-fab-toolbar-background"></div>');
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 {

20
ui-ngx/src/app/shared/components/js-func.component.ts
View File

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

22
ui-ngx/src/app/shared/components/json-content.component.ts
View File

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

28
ui-ngx/src/app/shared/components/json-object-edit.component.ts
View File

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