9a27298f-a275-46e4-9430-02f192e8aae9

Committed 06 Nov 2023 09:44AM UTC coverage: 48.372% (+2.2%) from 46.148%

Build # 9a27298f-a275-46e4-9430-02f192e8aae9

Build Type

push

circleci

Committed by

pubuzhixing8

Commit Message

performance(render): initialize list render and leaves render to optimized rendering performance

Run Details

371 of 953 branches covered (0.0%)

Branch coverage included in aggregate %.

270 of 309 new or added lines in 10 files covered. (87.38%)

8 existing lines in 3 files now uncovered.

936 of 1749 relevant lines covered (53.52%)

42.56 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.01

/packages/src/view/render/list-render.ts

import { Ancestor, Descendant, Range, Editor, Element, Path } from 'slate';
import { ComponentRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, ViewContainerRef } from '@angular/core';
import { ViewType } from '../../types/view';
import { SlateChildrenContext, SlateElementContext, SlateTextContext, SlateViewContext } from '../context';
import { AngularEditor } from '../../plugins/angular-editor';
import { SlateErrorCode } from '../../types/error';
import { NODE_TO_INDEX, NODE_TO_PARENT } from '../../utils/weak-maps';
import { isDecoratorRangeListEqual } from '../../utils/range-list';
import { SlateBlockCard } from '../../components/block-card/block-card.component';
import { createEmbeddedViewOrComponent, getRootNodes, mount, mountOnItemChange, renderView, updateContext } from './utils';

export class ListRender {
    private children: Descendant[];
    private views: (EmbeddedViewRef<any> | ComponentRef<any>)[] = [];
    private blockCards: (ComponentRef<SlateBlockCard> | null)[] = [];
    private contexts: (SlateTextContext | SlateElementContext)[] = [];
    private viewTypes: ViewType[] = [];
    private differ: IterableDiffer<any>;
    public initialized = false;

    constructor(
        private viewContext: SlateViewContext,
        private viewContainerRef: ViewContainerRef,
        private getOutletElement: () => HTMLElement
    ) {}

    public initialize(children: Descendant[], parent: Ancestor, parentPath: Path, childrenContext: SlateChildrenContext) {
        this.initialized = true;
        this.children = children;
        children.forEach((descendant, index) => {
            NODE_TO_INDEX.set(descendant, index);
            NODE_TO_PARENT.set(descendant, parent);
            const context = getContext(index, descendant, parentPath, childrenContext, this.viewContext);
            const viewType = getViewType(descendant, parent, this.viewContext);
            const view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
            const blockCard = createBlockCard(descendant, view, this.viewContainerRef, this.viewContext);
            this.views.push(view);
            this.contexts.push(context);
            this.viewTypes.push(viewType);
            this.blockCards.push(blockCard);
        });
        mount(this.views, this.blockCards, this.getOutletElement());
        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
        this.differ = newDiffers.find(children).create(trackBy(this.viewContext));
        this.differ.diff(children);
    }

    public update(children: Descendant[], parent: Ancestor, parentPath: Path, childrenContext: SlateChildrenContext) {
        const outletElement = this.getOutletElement();
        const diffResult = this.differ.diff(children);
        if (diffResult) {
            const newContexts = [];
            const newViewTypes = [];
            const newViews = [];
            const newBlockCards: (ComponentRef<SlateBlockCard> | null)[] = [];
            diffResult.forEachItem(record => {
                NODE_TO_INDEX.set(record.item, record.currentIndex);
                NODE_TO_PARENT.set(record.item, parent);
                let context = getContext(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
                const viewType = getViewType(record.item, parent, this.viewContext);
                newViewTypes.push(viewType);
                let view: EmbeddedViewRef<any> | ComponentRef<any>;
                let blockCard: ComponentRef<SlateBlockCard> | null;
                if (record.previousIndex === null) {
                    view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
                    renderView(view);
                    blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
                    newContexts.push(context);
                    newViews.push(view);
                    newBlockCards.push(blockCard);
                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletElement, this.viewContext);
                } else {
                    const previousView = this.views[record.previousIndex];
                    const previousViewType = this.viewTypes[record.previousIndex];
                    const previousContext = this.contexts[record.previousIndex];
                    const previousBlockCard = this.blockCards[record.previousIndex];
                    if (previousViewType !== viewType) {
                        view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);
                        renderView(view);
                        blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
                        const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
                        const newRootNodes = getRootNodes(view, blockCard);
                        firstRootNode.replaceWith(...newRootNodes);
                        previousView.destroy();
                        previousBlockCard?.destroy();
                    } else {
                        view = previousView;
                        blockCard = previousBlockCard;
                        if (memoizedContext(this.viewContext, record.item, previousContext as any, context as any)) {
                            context = previousContext;
                        } else {
                            updateContext(previousView, context, this.viewContext);
                        }
                    }
                    newContexts.push(context);
                    newViews.push(view);
                    newBlockCards.push(blockCard);
                }
            });
            diffResult.forEachRemovedItem(record => {
                const view = this.views[record.previousIndex];
                const blockCard = this.blockCards[record.previousIndex];
                view.destroy();
                blockCard?.destroy();
            });
            diffResult.forEachMovedItem(record => {
                mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletElement, this.viewContext);
                // Solve the block-card DOMElement loss when moving nodes
                newBlockCards[record.currentIndex]?.instance.append();
            });
            this.viewTypes = newViewTypes;
            this.views = newViews;
            this.contexts = newContexts;
            this.children = children;
            this.blockCards = newBlockCards;
        } else {
            const newContexts = [];
            this.children.forEach((child, index) => {
                let context = getContext(index, child, parentPath, childrenContext, this.viewContext);
                const previousContext = this.contexts[index];
                if (memoizedContext(this.viewContext, child, previousContext as any, context as any)) {
                    context = previousContext;
                } else {
                    updateContext(this.views[index], context, this.viewContext);
                }
                newContexts.push(context);
            });
            this.contexts = newContexts;
        }
    }
}

export function getContext(
    index: number,
    item: Descendant,
    parentPath: Path,
    childrenContext: SlateChildrenContext,
    viewContext: SlateViewContext
): SlateElementContext | SlateTextContext {
    if (Element.isElement(item)) {
        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
        const key = AngularEditor.findKey(viewContext.editor, item);
        const isInline = viewContext.editor.isInline(item);
        const isVoid = viewContext.editor.isVoid(item);
        const elementContext: SlateElementContext = {
            element: item,
            path: parentPath.concat(index),
            ...computedContext,
            attributes: {
                'data-slate-node': 'element',
                'data-slate-key': key.id
            },
            decorate: childrenContext.decorate,
            readonly: childrenContext.readonly
        };
        if (isInline) {
            elementContext.attributes['data-slate-inline'] = true;
        }
        if (isVoid) {
            elementContext.attributes['data-slate-void'] = true;
            elementContext.attributes.contenteditable = false;
        }
        return elementContext;
    } else {
        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
        const isLeafBlock = AngularEditor.isLeafBlock(viewContext.editor, childrenContext.parent);
        const textContext: SlateTextContext = {
            decorations: computedContext.decorations,
            isLast: isLeafBlock && index === childrenContext.parent.children.length - 1,
            parent: childrenContext.parent as Element,
            text: item
        };
        return textContext;
    }
}

export function getCommonContext(
    index: number,
    item: Descendant,
    parentPath: Path,
    viewContext: SlateViewContext,
    childrenContext: SlateChildrenContext
): { selection: Range; decorations: Range[] } {
    const p = parentPath.concat(index);
    try {
        const ds = childrenContext.decorate([item, p]);
        if (childrenContext.selection || childrenContext.decorations.length > 0) {
            const range = Editor.range(viewContext.editor, p); // performance
            const sel = childrenContext.selection && Range.intersection(range, childrenContext.selection);
            for (const dec of childrenContext.decorations) {
                const d = Range.intersection(dec, range);
                if (d) {
                    ds.push(d);
                }
            }
            return { selection: sel, decorations: ds };
        } else {
            return { selection: null, decorations: ds };
        }
    } catch (error) {
        this.options.viewContext.editor.onError({
            code: SlateErrorCode.GetStartPointError,
            nativeError: error
        });
        return { selection: null, decorations: [] };
    }
}

export function getViewType(item: Descendant, parent: Ancestor, viewContext: SlateViewContext) {
    if (Element.isElement(item)) {
        return (viewContext.renderElement && viewContext.renderElement(item)) || viewContext.defaultElement;
    } else {
        const isVoid = viewContext.editor.isVoid(parent as Element);
        return isVoid ? viewContext.defaultVoidText : (viewContext.renderText && viewContext.renderText(item)) || viewContext.defaultText;
    }
}

export function createBlockCard(item: Descendant, view: EmbeddedViewRef<any> | ComponentRef<any>, viewContainerRef: ViewContainerRef, viewContext: SlateViewContext) {
    const isBlockCard = viewContext.editor.isBlockCard(item);
    if (isBlockCard) {
        const rootNodes = getRootNodes(view);
        const blockCardComponentRef = viewContainerRef.createComponent<SlateBlockCard>(SlateBlockCard, {
            injector: viewContainerRef.injector
        });
        blockCardComponentRef.instance.initializeCenter(rootNodes);
        return blockCardComponentRef;
    } else {
        return null;
    }
}

export function trackBy(viewContext: SlateViewContext) {
    return (index, node) => {
        return viewContext.trackBy(node) || AngularEditor.findKey(viewContext.editor, node);
    };
}

export function memoizedContext(
    viewContext: SlateViewContext,
    descendant: Descendant,
    prev: SlateElementContext | SlateTextContext,
    next: SlateElementContext | SlateTextContext
): boolean {
    if (Element.isElement(descendant)) {
        return memoizedElementContext(viewContext, prev as SlateElementContext, next as SlateElementContext);
    } else {
        return memoizedTextContext(prev as SlateTextContext, next as SlateTextContext);
    }
}

export function memoizedElementContext(viewContext: SlateViewContext, prev: SlateElementContext, next: SlateElementContext) {
    return (
        prev.element === next.element &&
        (!viewContext.isStrictDecorate || prev.decorate === next.decorate) &&
        prev.readonly === next.readonly &&
        isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
        (prev.selection === next.selection || (!!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection)))
    );
}

export function memoizedTextContext(prev: SlateTextContext, next: SlateTextContext) {
    return (
        next.parent === prev.parent &&
        next.isLast === prev.isLast &&
        next.text === prev.text &&
        isDecoratorRangeListEqual(next.decorations, prev.decorations)
    );
}

1	import { Ancestor, Descendant, Range, Editor, Element, Path } from 'slate';
2	import { ComponentRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, ViewContainerRef } from '@angular/core';
3	import { ViewType } from '../../types/view';
4	import { SlateChildrenContext, SlateElementContext, SlateTextContext, SlateViewContext } from '../context';
5	import { AngularEditor } from '../../plugins/angular-editor';
6	import { SlateErrorCode } from '../../types/error';
7	import { NODE_TO_INDEX, NODE_TO_PARENT } from '../../utils/weak-maps';
8	import { isDecoratorRangeListEqual } from '../../utils/range-list';
9	import { SlateBlockCard } from '../../components/block-card/block-card.component';
10	import { createEmbeddedViewOrComponent, getRootNodes, mount, mountOnItemChange, renderView, updateContext } from './utils';
11
12	export class ListRender {
13	private children: Descendant[];
14	private views: (EmbeddedViewRef<any> \| ComponentRef<any>)[] = [];	204✔
15	private blockCards: (ComponentRef<SlateBlockCard> \| null)[] = [];	204✔
16	private contexts: (SlateTextContext \| SlateElementContext)[] = [];	204✔
17	private viewTypes: ViewType[] = [];	204✔
18	private differ: IterableDiffer<any>;
19	public initialized = false;	204✔
20
21	constructor(
22	private viewContext: SlateViewContext,	204✔
23	private viewContainerRef: ViewContainerRef,	204✔
24	private getOutletElement: () => HTMLElement	204✔
25	) {}
26
27	public initialize(children: Descendant[], parent: Ancestor, parentPath: Path, childrenContext: SlateChildrenContext) {
28	this.initialized = true;	204✔
29	this.children = children;	204✔
30	children.forEach((descendant, index) => {	204✔
31	NODE_TO_INDEX.set(descendant, index);	319✔
32	NODE_TO_PARENT.set(descendant, parent);	319✔
33	const context = getContext(index, descendant, parentPath, childrenContext, this.viewContext);	319✔
34	const viewType = getViewType(descendant, parent, this.viewContext);	319✔
35	const view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);	319✔
36	const blockCard = createBlockCard(descendant, view, this.viewContainerRef, this.viewContext);	319✔
37	this.views.push(view);	319✔
38	this.contexts.push(context);	319✔
39	this.viewTypes.push(viewType);	319✔
40	this.blockCards.push(blockCard);	319✔
41	});
42	mount(this.views, this.blockCards, this.getOutletElement());	204✔
43	const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);	204✔
44	this.differ = newDiffers.find(children).create(trackBy(this.viewContext));	204✔
45	this.differ.diff(children);	204✔
46	}
47
48	public update(children: Descendant[], parent: Ancestor, parentPath: Path, childrenContext: SlateChildrenContext) {
49	const outletElement = this.getOutletElement();	37✔
50	const diffResult = this.differ.diff(children);	37✔
51	if (diffResult) {	37✔
52	const newContexts = [];	25✔
53	const newViewTypes = [];	25✔
54	const newViews = [];	25✔
55	const newBlockCards: (ComponentRef<SlateBlockCard> \| null)[] = [];	25✔
56	diffResult.forEachItem(record => {	25✔
57	NODE_TO_INDEX.set(record.item, record.currentIndex);	59✔
58	NODE_TO_PARENT.set(record.item, parent);	59✔
59	let context = getContext(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);	59✔
60	const viewType = getViewType(record.item, parent, this.viewContext);	59✔
61	newViewTypes.push(viewType);	59✔
62	let view: EmbeddedViewRef<any> \| ComponentRef<any>;
63	let blockCard: ComponentRef<SlateBlockCard> \| null;
64	if (record.previousIndex === null) {	59✔
65	view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);	6✔
66	renderView(view);	6✔
67	blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);	6✔
68	newContexts.push(context);	6✔
69	newViews.push(view);	6✔
70	newBlockCards.push(blockCard);	6✔
71	mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletElement, this.viewContext);	6✔
72	} else {
73	const previousView = this.views[record.previousIndex];	53✔
74	const previousViewType = this.viewTypes[record.previousIndex];	53✔
75	const previousContext = this.contexts[record.previousIndex];	53✔
76	const previousBlockCard = this.blockCards[record.previousIndex];	53✔
77	if (previousViewType !== viewType) {	53!
NEW 78	view = createEmbeddedViewOrComponent(viewType, context, this.viewContext, this.viewContainerRef);	×
NEW 79	renderView(view);	×
NEW 80	blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);	×
NEW 81	const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];	×
NEW 82	const newRootNodes = getRootNodes(view, blockCard);	×
NEW 83	firstRootNode.replaceWith(...newRootNodes);	×
NEW 84	previousView.destroy();	×
NEW 85	previousBlockCard?.destroy();	×
86	} else {
87	view = previousView;	53✔
88	blockCard = previousBlockCard;	53✔
89	if (memoizedContext(this.viewContext, record.item, previousContext as any, context as any)) {	53✔
90	context = previousContext;	37✔
91	} else {
92	updateContext(previousView, context, this.viewContext);	16✔
93	}
94	}
95	newContexts.push(context);	53✔
96	newViews.push(view);	53✔
97	newBlockCards.push(blockCard);	53✔
98	}
99	});
100	diffResult.forEachRemovedItem(record => {	25✔
101	const view = this.views[record.previousIndex];	5✔
102	const blockCard = this.blockCards[record.previousIndex];	5✔
103	view.destroy();	5✔
104	blockCard?.destroy();	5✔
105	});
106	diffResult.forEachMovedItem(record => {	25✔
107	mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletElement, this.viewContext);	14✔
108	// Solve the block-card DOMElement loss when moving nodes
109	newBlockCards[record.currentIndex]?.instance.append();	14✔
110	});
111	this.viewTypes = newViewTypes;	25✔
112	this.views = newViews;	25✔
113	this.contexts = newContexts;	25✔
114	this.children = children;	25✔
115	this.blockCards = newBlockCards;	25✔
116	} else {
117	const newContexts = [];	12✔
118	this.children.forEach((child, index) => {	12✔
119	let context = getContext(index, child, parentPath, childrenContext, this.viewContext);	61✔
120	const previousContext = this.contexts[index];	61✔
121	if (memoizedContext(this.viewContext, child, previousContext as any, context as any)) {	61✔
122	context = previousContext;	52✔
123	} else {
124	updateContext(this.views[index], context, this.viewContext);	9✔
125	}
126	newContexts.push(context);	61✔
127	});
128	this.contexts = newContexts;	12✔
129	}
130	}
131	}
132
133	export function getContext(
134	index: number,
135	item: Descendant,
136	parentPath: Path,
137	childrenContext: SlateChildrenContext,
138	viewContext: SlateViewContext
139	): SlateElementContext \| SlateTextContext {
140	if (Element.isElement(item)) {	439✔
141	const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);	289✔
142	const key = AngularEditor.findKey(viewContext.editor, item);	289✔
143	const isInline = viewContext.editor.isInline(item);	289✔
144	const isVoid = viewContext.editor.isVoid(item);	289✔
145	const elementContext: SlateElementContext = {	289✔
146	element: item,
147	path: parentPath.concat(index),
148	...computedContext,
149	attributes: {
150	'data-slate-node': 'element',
151	'data-slate-key': key.id
152	},
153	decorate: childrenContext.decorate,
154	readonly: childrenContext.readonly
155	};
156	if (isInline) {	289!
NEW 157	elementContext.attributes['data-slate-inline'] = true;	×
158	}
159	if (isVoid) {	289✔
160	elementContext.attributes['data-slate-void'] = true;	1✔
161	elementContext.attributes.contenteditable = false;	1✔
162	}
163	return elementContext;	289✔
164	} else {
165	const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);	150✔
166	const isLeafBlock = AngularEditor.isLeafBlock(viewContext.editor, childrenContext.parent);	150✔
167	const textContext: SlateTextContext = {	150✔
168	decorations: computedContext.decorations,
169	isLast: isLeafBlock && index === childrenContext.parent.children.length - 1,	300✔
170	parent: childrenContext.parent as Element,
171	text: item
172	};
173	return textContext;	150✔
174	}
175	}
176
177	export function getCommonContext(
178	index: number,
179	item: Descendant,
180	parentPath: Path,
181	viewContext: SlateViewContext,
182	childrenContext: SlateChildrenContext
183	): { selection: Range; decorations: Range[] } {
184	const p = parentPath.concat(index);	439✔
185	try {	439✔
186	const ds = childrenContext.decorate([item, p]);	439✔
187	if (childrenContext.selection \|\| childrenContext.decorations.length > 0) {	439✔
188	const range = Editor.range(viewContext.editor, p); // performance	73✔
189	const sel = childrenContext.selection && Range.intersection(range, childrenContext.selection);	73✔
190	for (const dec of childrenContext.decorations) {	73✔
191	const d = Range.intersection(dec, range);	6✔
192	if (d) {	6✔
193	ds.push(d);	6✔
194	}
195	}
196	return { selection: sel, decorations: ds };	73✔
197	} else {
198	return { selection: null, decorations: ds };	366✔
199	}
200	} catch (error) {
NEW 201	this.options.viewContext.editor.onError({	×
202	code: SlateErrorCode.GetStartPointError,
203	nativeError: error
204	});
NEW 205	return { selection: null, decorations: [] };	×
206	}
207	}
208
209	export function getViewType(item: Descendant, parent: Ancestor, viewContext: SlateViewContext) {
210	if (Element.isElement(item)) {	378✔
211	return (viewContext.renderElement && viewContext.renderElement(item)) \|\| viewContext.defaultElement;	234!
212	} else {
213	const isVoid = viewContext.editor.isVoid(parent as Element);	144✔
214	return isVoid ? viewContext.defaultVoidText : (viewContext.renderText && viewContext.renderText(item)) \|\| viewContext.defaultText;	144!
215	}
216	}
217
218	export function createBlockCard(item: Descendant, view: EmbeddedViewRef<any> \| ComponentRef<any>, viewContainerRef: ViewContainerRef, viewContext: SlateViewContext) {
219	const isBlockCard = viewContext.editor.isBlockCard(item);	325✔
220	if (isBlockCard) {	325✔
221	const rootNodes = getRootNodes(view);	1✔
222	const blockCardComponentRef = viewContainerRef.createComponent<SlateBlockCard>(SlateBlockCard, {	1✔
223	injector: viewContainerRef.injector
224	});
225	blockCardComponentRef.instance.initializeCenter(rootNodes);	1✔
226	return blockCardComponentRef;	1✔
227	} else {
228	return null;	324✔
229	}
230	}
231
232	export function trackBy(viewContext: SlateViewContext) {
233	return (index, node) => {	204✔
234	return viewContext.trackBy(node) \|\| AngularEditor.findKey(viewContext.editor, node);	439✔
235	};
236	}
237
238	export function memoizedContext(
239	viewContext: SlateViewContext,
240	descendant: Descendant,
241	prev: SlateElementContext \| SlateTextContext,
242	next: SlateElementContext \| SlateTextContext
243	): boolean {
244	if (Element.isElement(descendant)) {	114✔
245	return memoizedElementContext(viewContext, prev as SlateElementContext, next as SlateElementContext);	105✔
246	} else {
247	return memoizedTextContext(prev as SlateTextContext, next as SlateTextContext);	9✔
248	}
249	}
250
251	export function memoizedElementContext(viewContext: SlateViewContext, prev: SlateElementContext, next: SlateElementContext) {
252	return (	105✔
253	prev.element === next.element &&	559!
254	(!viewContext.isStrictDecorate \|\| prev.decorate === next.decorate) &&
255	prev.readonly === next.readonly &&
256	isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
257	(prev.selection === next.selection \|\| (!!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection)))
258	);
259	}
260
261	export function memoizedTextContext(prev: SlateTextContext, next: SlateTextContext) {
262	return (	9✔
263	next.parent === prev.parent &&	27✔
264	next.isLast === prev.isLast &&
265	next.text === prev.text &&
266	isDecoratorRangeListEqual(next.decorations, prev.decorations)
267	);
268	}

worktile / slate-angular / 9a27298f-a275-46e4-9430-02f192e8aae9

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous