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 85a7339657..0cc21fd2b3 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 @@ -65,7 +65,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl aceEditors: ace.Ace.Editor[] = []; editorsResizeCafs: {[editorId: string]: CancelAnimationFrame} = {}; - aceResizeObservers: ResizeObserver[] = []; + aceResize$: ResizeObserver; htmlEditor: ace.Ace.Editor; cssEditor: ace.Ace.Editor; setValuesPending = false; @@ -85,9 +85,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl } ngOnDestroy(): void { - this.aceResizeObservers.forEach((resize$) => { - resize$.disconnect(); - }); + this.aceResize$.disconnect(); } ngOnChanges(changes: SimpleChanges): void { @@ -153,6 +151,12 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl } private initAceEditors() { + this.aceResize$ = new ResizeObserver((enteris) => { + enteris.forEach((entry) => { + const editor = this.aceEditors.find(aceEditor => aceEditor.container === entry.target); + this.onAceEditorResize(editor); + }) + }); this.htmlEditor = this.createAceEditor(this.htmlInputElmRef, 'html'); this.htmlEditor.on('input', () => { const editorValue = this.htmlEditor.getValue(); @@ -187,12 +191,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl const aceEditor = ace.edit(editorElement, editorOptions); aceEditor.session.setUseWrapMode(true); this.aceEditors.push(aceEditor); - - const resize$ = new ResizeObserver(() => { - this.onAceEditorResize(aceEditor); - }); - resize$.observe(editorElement); - this.aceResizeObservers.push(resize$); + this.aceResize$.observe(editorElement); return aceEditor; } 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 dbd081712d..0c685151df 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 @@ -125,7 +125,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe jsonSettingsEditor: ace.Ace.Editor; dataKeyJsonSettingsEditor: ace.Ace.Editor; jsEditor: ace.Ace.Editor; - aceResizeObservers: ResizeObserver[] = []; + aceResize$: ResizeObserver; onWindowMessageListener = this.onWindowMessage.bind(this); @@ -194,9 +194,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe ngOnDestroy(): void { this.window.removeEventListener('message', this.onWindowMessageListener); - this.aceResizeObservers.forEach((resize$) => { - resize$.disconnect(); - }); + this.aceResize$.disconnect(); this.rxSubscriptions.forEach((subscription) => { subscription.unsubscribe(); }); @@ -272,6 +270,12 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe } private initAceEditors() { + this.aceResize$ = new ResizeObserver((enteris) => { + enteris.forEach((entry) => { + const editor = this.aceEditors.find(aceEditor => aceEditor.container === entry.target); + this.onAceEditorResize(editor); + }) + }); this.htmlEditor = this.createAceEditor(this.htmlInputElmRef, 'html'); this.htmlEditor.on('input', () => { const editorValue = this.htmlEditor.getValue(); @@ -342,12 +346,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe const aceEditor = ace.edit(editorElement, editorOptions); aceEditor.session.setUseWrapMode(true); this.aceEditors.push(aceEditor); - - const resize$ = new ResizeObserver(() => { - this.onAceEditorResize(aceEditor); - }); - resize$.observe(editorElement); - this.aceResizeObservers.push(resize$); + this.aceResize$.observe(editorElement); return aceEditor; }