perf: efficient use of memory linked to caches

Author: Gorash

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

@@ -21,9 +21,10 @@ import { ActionableGroupDomObjectRenderer } from './ActionableGroupDomObjectRend
 import { ActionableGroupSelectItemDomObjectRenderer } from './ActionableGroupSelectItemDomObjectRenderer';
 import { LabelDomObjectRenderer } from './LabelDomObjectRenderer';
 import { SeparatorDomObjectRenderer } from './SeparatorDomObjectRenderer';
-import { ContainerNode } from '../../core/src/VNodes/ContainerNode';
 import { RuleProperty } from '../../core/src/Mode';
 import { isContentEditable } from '../../utils/src/utils';
+import { AbstractNode } from '../../core/src/VNodes/AbstractNode';
+import { VNode } from '../../core/src/VNodes/VNode';
 
 export interface DomLayoutConfig extends JWPluginConfig {
     location?: [Node, DomZonePosition];
@@ -52,7 +53,7 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         domLocations: this._loadComponentLocations,
     };
     commandHooks = {
-        'commit': this.redraw,
+        'commit': this._redraw,
     };
 
     constructor(editor: JWEditor, configuration: T) {
@@ -118,24 +119,6 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         }
     }
 
-    async redraw(): Promise<void> {
-        // TODO: adapt when add memory
-        // * redraw node with change
-        // * redraw children if add or remove children (except for selection)
-        const layout = this.dependencies.get(Layout);
-        const domLayoutEngine = layout.engines.dom as DomLayoutEngine;
-        const editables = domLayoutEngine.components.get('editable');
-        if (editables?.length) {
-            const nodes = [...editables];
-            for (const node of nodes) {
-                if (node instanceof ContainerNode) {
-                    nodes.push(...node.childVNodes);
-                }
-            }
-            await domLayoutEngine.redraw(nodes);
-        }
-    }
-
     /**
      * Return true if the target node is inside Jabberwock's main editable Zone.
      *
@@ -197,4 +180,57 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         }
         return isAnchorDescendantOfTarget ? anchorNode : target;
     }
+    private async _redraw(): Promise<void> {
+        const layout = this.dependencies.get(Layout);
+        const domLayoutEngine = layout.engines.dom as DomLayoutEngine;
+        const changedPath = new Map<AbstractNode, string[][]>();
+        const pathChanges = this.editor.memory.getChanges();
+        for (const [object, path] of pathChanges) {
+            if (object instanceof AbstractNode) {
+                if (!changedPath.has(object)) {
+                    changedPath.set(object, []);
+                }
+                changedPath.get(object).push(path);
+            }
+            for (const [parent, path] of this.editor.memory.getParents(object)) {
+                if (parent instanceof AbstractNode) {
+                    if (!changedPath.has(parent)) {
+                        changedPath.set(parent, []);
+                    }
+                    changedPath.set(parent as VNode, path);
+                }
+            }
+        }
+        if (changedPath.size) {
+            const nodes = [];
+            for (const [root] of changedPath) {
+                if (root === this.editor.selection.anchor || root === this.editor.selection.focus) {
+                    // Filter not VNode changes and selection change.
+                    changedPath.delete(root);
+                }
+            }
+            let removedNode = false;
+            for (const [root] of changedPath) {
+                nodes.push(root);
+                if (!root.parent) {
+                    removedNode = true;
+                }
+            }
+            if (removedNode) {
+                // Need to force redrawing of children if remove a child.
+                for (const [node, paths] of changedPath) {
+                    if (paths.find(path => path[0] === 'childVNodes')) {
+                        for (const child of node.childVNodes) {
+                            const index = nodes.indexOf(child);
+                            if (index !== -1) {
+                                nodes.splice(index, 1);
+                            }
+                            nodes.push(child);
+                        }
+                    }
+                }
+            }
+            await domLayoutEngine.redraw(nodes);
+        }
+    }
 }

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

@@ -19,6 +19,7 @@ import {
 } from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
 import { VElement } from '../../core/src/VNodes/VElement';
 import { flat } from '../../utils/src/utils';
+import { AbstractNode } from '../../core/src/VNodes/AbstractNode';
 
 export type DomPoint = [Node, number];
 export type DomLayoutLocation = [Node, DomZonePosition];
@@ -116,44 +117,71 @@ export class DomLayoutEngine extends LayoutEngine {
         return this._domReconciliationEngine.toDom(node);
     }
     async redraw(nodes?: VNode[]): Promise<void> {
-        if (
-            !this.editor.enableRender ||
-            (this.editor.preventRenders && this.editor.preventRenders.size)
-        ) {
-            return;
-        }
         if (this._currentlyRedrawing) {
             throw new Error('Double redraw detected');
         }
         this._currentlyRedrawing = true;
 
         if (nodes) {
+            nodes = nodes.filter(node => {
+                return node.ancestors().pop() === this.root;
+            });
+
+            const nodeIds: Record<number, VNode> = {};
             for (let node of nodes) {
+                nodeIds[node.id] = node;
                 while (
+                    node.parent &&
+                    !nodeIds[node.parent.id] &&
                     (this._domReconciliationEngine.getRenderedWith(node).length !== 1 ||
-                        !this._domReconciliationEngine.toDom(node).length) &&
-                    node.parent
+                        !this._domReconciliationEngine.toDom(node).length)
                 ) {
                     // If the node are redererd with some other nodes then redraw parent.
                     // If not in layout then redraw the parent.
                     node = node.parent;
-                    if (!nodes.includes(node)) {
-                        nodes.push(node);
-                    }
+                    nodeIds[node.id] = node;
                 }
             }
-            for (const node of [...nodes]) {
+
+            const parents: VNode[] = [];
+            for (const node of nodes) {
                 // Add direct siblings nodes for batched nodes with format.
+                const next = node.next();
+                if (next && next.parent === node.parent) {
+                    nodeIds[next.id] = next;
+                }
                 const previous = node.previous();
-                if (previous && !nodes.includes(previous)) {
-                    nodes.push(previous);
+                if (previous && previous.parent === node.parent) {
+                    nodeIds[previous.id] = previous;
                 }
-                const next = node.next();
-                if (next && !nodes.includes(next)) {
-                    nodes.push(next);
+            }
+
+            // Add grouped node for rendering.
+            const nearests: Record<number, VNode> = {};
+            for (const id in nodeIds) {
+                if (!nearests[id]) {
+                    const node = nodeIds[id];
+                    for (const nearest of this._domReconciliationEngine.getRenderedWith(node)) {
+                        if (nearest instanceof AbstractNode) {
+                            const id = nearest.id;
+                            nodeIds[id] = nearests[id] = nearest;
+                        }
+                    }
+                    // Add parent for wrap/unwrapped node list formatted charNodes.
+                    const parent = node.parent;
+                    if (parent && !parents.includes(parent)) {
+                        parents.push(parent);
+                    }
                 }
             }
+
+            for (const parent of parents) {
+                nodeIds[parent.id] = parent;
+            }
+
+            nodes = Object.values(nodeIds);
         } else {
+            nodes = [];
             // Redraw all.
             for (const componentId in this.locations) {
                 nodes.push(...this.components.get(componentId));
@@ -165,18 +193,15 @@ export class DomLayoutEngine extends LayoutEngine {
             }
         }
 
-        nodes = nodes.filter(node => {
-            const ancestor = node.ancestors(ZoneNode).pop();
-            return ancestor?.managedZones.includes('root');
-        });
-
         // Render nodes.
         const renderer = this.editor.plugins.get(Renderer);
-        const domObjects = await renderer.render<DomObject>('dom/object', nodes);
+        let domObjects = (await renderer.render<DomObject>('dom/object', nodes)) || [];
         const engine = renderer.engines['dom/object'] as DomObjectRenderingEngine;
 
+        domObjects = domObjects.filter((node, index) => domObjects.indexOf(node) === index);
+
         this._domReconciliationEngine.update(
-            domObjects || [],
+            domObjects,
             engine.locations,
             engine.from,
             this._markedForRedraw,

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

@@ -225,7 +225,7 @@ export class DomReconciliationEngine {
             if (id) {
                 if (this._diff[id]) {
                     this._diff[id].askCompleteRedrawing = true;
-                } else {
+                } else if (this._objects[id]) {
                     const domObject = this._objects[id].object;
                     this._diff[id] = {
                         id: id,
@@ -328,6 +328,7 @@ export class DomReconciliationEngine {
                 object.object.attach(...object.dom);
             }
         }
+        this._domUpdated.clear();
     }
 
     /**