fix perf + memory leak layout

Author: Gorash

packages/plugin-dom-layout/src/ActionableDomObjectRenderer.ts

@@ -15,8 +15,17 @@ export class ActionableDomObjectRenderer extends AbstractRenderer<DomObject> {
     engine: DomObjectRenderingEngine;
     predicate: Predicate = ActionableNode;
 
+    actionableNodes = new Map<ActionableNode, HTMLElement>();
+
+    constructor(engine: DomObjectRenderingEngine) {
+        super(engine);
+        this.engine.editor.dispatcher.registerCommandHook(
+            'commit',
+            this._updateActionables.bind(this),
+        );
+    }
+
     async render(button: ActionableNode): Promise<DomObjectActionable> {
-        let updateButton: () => void;
         let handler: (ev: MouseEvent) => void;
         const objectButton: DomObjectActionable = {
             tag: 'BUTTON',
@@ -34,13 +43,11 @@ export class ActionableDomObjectRenderer extends AbstractRenderer<DomObject> {
                     objectButton.handler();
                 };
                 el.addEventListener('click', handler);
-                updateButton = this._updateButton.bind(this, button, el);
-                updateButton();
-                this.engine.editor.dispatcher.registerCommandHook('commit', updateButton);
+                this.actionableNodes.set(button, el);
             },
             detach: (el: HTMLButtonElement): void => {
                 el.removeEventListener('click', handler);
-                this.engine.editor.dispatcher.removeCommandHook('commit', updateButton);
+                this.actionableNodes.delete(button);
             },
         };
         this.engine.renderAttributes(Attributes, button, objectButton);
@@ -55,17 +62,26 @@ export class ActionableDomObjectRenderer extends AbstractRenderer<DomObject> {
 
         return objectButton;
     }
+
+    protected _updateActionables(): void {
+        const pathChanges = this.engine.editor.memory.getChangedVersionables();
+        console.log(pathChanges);
+
+        for (const [button, element] of this.actionableNodes) {
+            this._updateActionable(button, element);
+        }
+    }
     /**
      * Update button rendering after the command if the value of selected or
      * enabled change.
      *
-     * @param button
+     * @param aactionable
      * @param element
      */
-    private _updateButton(button: ActionableNode, element: HTMLButtonElement): void {
+    protected _updateActionable(aactionable: ActionableNode, element: HTMLElement): void {
         const editor = this.engine.editor;
-        const select = !!button.selected(editor);
-        const enable = !!button.enabled(editor);
+        const select = !!aactionable.selected(editor);
+        const enable = !!aactionable.enabled(editor);
 
         const attrSelected = element.getAttribute('aria-pressed');
         if (select.toString() !== attrSelected) {

packages/plugin-dom-layout/src/ActionableGroupSelectItemDomObjectRenderer.ts

@@ -11,16 +11,26 @@ import { VNode } from '../../core/src/VNodes/VNode';
 import { LabelNode } from '../../plugin-layout/src/LabelNode';
 import { ZoneNode } from '../../plugin-layout/src/ZoneNode';
 import { DomObjectActionable } from './ActionableDomObjectRenderer';
+import { RenderingEngine } from '../../plugin-renderer/src/RenderingEngine';
 
 export class ActionableGroupSelectItemDomObjectRenderer extends AbstractRenderer<DomObject> {
     static id = DomObjectRenderingEngine.id;
     engine: DomObjectRenderingEngine;
     predicate = (node: VNode): boolean => node.ancestors(ActionableGroupNode).length >= 2;
 
+    actionableNodes = new Map<ActionableNode, HTMLElement>();
+
+    constructor(engine: DomObjectRenderingEngine) {
+        super(engine);
+        this.engine.editor.dispatcher.registerCommandHook(
+            'commit',
+            this._updateActionables.bind(this),
+        );
+    }
+
     async render(item: VNode): Promise<DomObject> {
         let domObject: DomObject;
         if (item instanceof ActionableNode) {
-            let updateOption: () => void;
             let handler: (ev: Event) => void;
             const domObjectActionable: DomObjectActionable = {
                 tag: 'OPTION',
@@ -43,14 +53,12 @@ export class ActionableGroupSelectItemDomObjectRenderer extends AbstractRenderer
                         }
                     };
                     select.addEventListener('change', handler);
-                    updateOption = this._updateOption.bind(this, item, el);
-                    updateOption();
-                    this.engine.editor.dispatcher.registerCommandHook('commit', updateOption);
+                    this.actionableNodes.set(item, el);
                 },
                 detach: (el: HTMLOptionElement): void => {
                     const select = el.closest('select') || el.parentElement;
                     select.removeEventListener('change', handler);
-                    this.engine.editor.dispatcher.removeCommandHook('commit', updateOption);
+                    this.actionableNodes.delete(item);
                 },
             };
             domObject = domObjectActionable;
@@ -105,17 +113,26 @@ export class ActionableGroupSelectItemDomObjectRenderer extends AbstractRenderer
 
         return domObject;
     }
+
+    protected _updateActionables(): void {
+        const pathChanges = this.engine.editor.memory.getChangedVersionables();
+        console.log(pathChanges);
+
+        for (const [button, element] of this.actionableNodes) {
+            this._updateActionable(button, element);
+        }
+    }
     /**
      * Update option rendering after the command if the value of selected or
      * enabled change.
      *
-     * @param button
+     * @param aactionable
      * @param element
      */
-    private _updateOption(button: ActionableNode, element: HTMLOptionElement): void {
+    protected _updateActionable(aactionable: ActionableNode, element: HTMLElement): void {
         const editor = this.engine.editor;
-        const select = button.selected(editor);
-        const enable = button.enabled(editor);
+        const select = aactionable.selected(editor);
+        const enable = aactionable.enabled(editor);
         const attrSelected = element.getAttribute('selected');
         if (select.toString() !== attrSelected) {
             if (select) {

packages/plugin-dom-layout/src/DomReconciliationEngine.ts

@@ -310,6 +310,7 @@ export class DomReconciliationEngine {
                 object.object.attach(...object.dom);
             }
         }
+        this._domUpdated.clear();
     }
 
     /**