WIP 2

src/platform/web/ui/general/LazyListView.js

@@ -84,16 +84,17 @@ class ItemRange {
     }
 
     diff(range) {
-        const diffResult = {};
+        const scrollDirection = this.scrollDirectionTo(range);
-        if (this.scrollDirectionTo(range) === ScrollDirection.downwards) {
+        let toRemove, toAdd;
-            diffResult.toRemove = { start: this.topCount, end: range.topCount - 1 };
+        if (scrollDirection === ScrollDirection.downwards) {
-            diffResult.toAdd = { start: this.lastIndex + 1, end: range.lastIndex };
+            toRemove = { start: this.topCount, end: range.topCount - 1 };
+            toAdd = { start: this.lastIndex, end: range.lastIndex };
         }
         else {
-            diffResult.toRemove = { start: range.lastIndex + 1, end: this.lastIndex };
+            toRemove = { start: range.lastIndex, end: this.lastIndex };
-            diffResult.toAdd = { start: range.topCount, end: this.topCount - 1 };
+            toAdd = { start: range.topCount, end: this.topCount - 1 };
         }
-        return diffResult;
+        return { toRemove, toAdd, scrollDirection };
     }
 }
 
@@ -130,8 +131,7 @@ export class LazyListView extends ListView {
             console.log("new", renderRange);
             console.log("current", this._renderRange);
             console.log("diff", this._renderRange.diff(renderRange));
-            this._renderRange = renderRange;
+            this._renderElementsInRange(renderRange);
-            this._renderElementsInRange();
         }
     }
 
@@ -149,7 +149,18 @@ export class LazyListView extends ListView {
         const range = this._getVisibleRange();
         const renderRange = range.expand(this._overflowItems);
         this._renderRange = renderRange;
-        this._renderElementsInRange();
+
+        const { topCount, renderCount } = this._renderRange;
+        const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
+        this._adjustPadding(renderRange);
+        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);
     }
 
     _itemsFromList(start, end) {
@@ -175,30 +186,59 @@ export class LazyListView extends ListView {
         return null;
     }
 
-    _adjustPadding() {
+    _adjustPadding(range) {
-
+        const { topCount, bottomCount } = range;
-    }
-    
-    _renderElementsInRange(range) {
-        const { topCount, renderCount, bottomCount } = this._renderRange;
-        const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
         const paddingTop = topCount * this._itemHeight;
         const paddingBottom = bottomCount * this._itemHeight;
         this._root.style.paddingTop = `${paddingTop}px`;
         this._root.style.paddingBottom = `${paddingBottom}px`;
-
-        for (const child of this._childInstances) {
-            this._removeChild(child);
     }
-        this._childInstances = [];
+
+    _renderedFragment(items, childInstanceModifier) {
         const fragment = document.createDocumentFragment();
-        for (const item of renderedItems) {
+        for (const item of items) {
             const view = this._childCreator(item);
-            this._childInstances.push(view);
+            childInstanceModifier(view);
             fragment.appendChild(mountView(view, this._mountArgs));
         }
+        return fragment;
+    }
+
+    _renderElementsInRange(range) {
+        const diff = this._renderRange.diff(range);
+        const {start, end} = diff.toAdd;
+        const renderedItems = this._itemsFromList(start, end);
+        this._adjustPadding(range);
+
+        if (diff.scrollDirection === ScrollDirection.downwards) {
+            const {start, end} = diff.toRemove;
+            this._childInstances.splice(0, end - start + 1)
+                                .forEach(child => this._removeChild(child));
+            const fragment = this._renderedFragment(renderedItems, view => this._childInstances.push(view));
             this._root.appendChild(fragment);
         }
+        else {
+            const {start, end} = diff.toRemove;
+            const normalizedStart = this._renderRange.normalize(start);
+            this._childInstances.splice(normalizedStart, end - start + 1)
+                                .forEach(child => this._removeChild(child));
+            const fragment = this._renderedFragment(renderedItems, view => this._childInstances.unshift(view));
+            this._root.insertBefore(fragment, this._root.firstChild);
+        }
+        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() {
         const root = super.mount();