Render only diff of ranges

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-08-09 14:21:42 +05:30 committed by Bruno Windels
parent 61402e798e
commit 168312627d

View file

@ -83,18 +83,40 @@ class ItemRange {
return range.bottomCount < this.bottomCount ? ScrollDirection.downwards : ScrollDirection.upwards; return range.bottomCount < this.bottomCount ? ScrollDirection.downwards : ScrollDirection.upwards;
} }
/**
* Check if this range intersects with another range
* @param {ItemRange} range The range to check against
* @param {ScrollDirection} scrollDirection
* @returns {Boolean}
*/
intersects(range) {
return !!Math.max(0, Math.min(this.lastIndex, range.lastIndex) - Math.max(this.topCount, range.topCount));
}
diff(range) { diff(range) {
/**
* Range-1
* |----------------------|
* Range-2
* |---------------------|
* <-------><------------><------->
* bisect-1 intersection bisect-2
*/
const scrollDirection = this.scrollDirectionTo(range); const scrollDirection = this.scrollDirectionTo(range);
let toRemove, toAdd; if (!this.intersects(range)) {
if (scrollDirection === ScrollDirection.downwards) { // There is no intersection between the ranges; which can happen if you scroll really fast
toRemove = { start: this.topCount, end: range.topCount - 1 }; // In this case, we need to do full render of the new range
toAdd = { start: this.lastIndex, end: range.lastIndex }; const toRemove = { start: this.topCount, end: this.lastIndex };
const toAdd = { start: range.topCount, end: range.lastIndex };
return {toRemove, toAdd, scrollDirection};
} }
else { const bisection1 = {start: Math.min(this.topCount, range.topCount), end: Math.max(this.topCount, range.topCount) - 1};
toRemove = { start: range.lastIndex, end: this.lastIndex }; const bisection2 = {start: Math.min(this.lastIndex, range.lastIndex), end: Math.max(this.lastIndex, range.lastIndex)};
toAdd = { start: range.topCount, end: this.topCount - 1 }; // When scrolling down, bisection1 needs to be removed and bisection2 needs to be added
} // When scrolling up, vice versa
return { toRemove, toAdd, scrollDirection }; const toRemove = scrollDirection === ScrollDirection.downwards ? bisection1 : bisection2;
const toAdd = scrollDirection === ScrollDirection.downwards ? bisection2 : bisection1;
return {toAdd, toRemove, scrollDirection};
} }
} }
@ -226,18 +248,6 @@ export class LazyListView extends ListView {
this._root.insertBefore(fragment, this._root.firstChild); this._root.insertBefore(fragment, this._root.firstChild);
} }
this._renderRange = range; this._renderRange = range;
// for (const child of this._childInstances) {
// this._removeChild(child);
// }
// this._childInstances = [];
// const fragment = document.createDocumentFragment();
// for (const item of renderedItems) {
// const view = this._childCreator(item);
// this._childInstances.push(view);
// fragment.appendChild(mountView(view, this._mountArgs));
// }
// this._root.appendChild(fragment);
} }
mount() { mount() {