Improvement resize (#2654)

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$) => {
+    this.aceResize$.disconnect();
-      resize$.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);
-
+    this.aceResize$.observe(editorElement);
-    const resize$ = new ResizeObserver(() => {
-      this.onAceEditorResize(aceEditor);
-    });
-    resize$.observe(editorElement);
-    this.aceResizeObservers.push(resize$);
     return aceEditor;
   }
 

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$) => {
+    this.aceResize$.disconnect();
-      resize$.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);
-
+    this.aceResize$.observe(editorElement);
-    const resize$ = new ResizeObserver(() => {
-      this.onAceEditorResize(aceEditor);
-    });
-    resize$.observe(editorElement);
-    this.aceResizeObservers.push(resize$);
     return aceEditor;
   }