WIP

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

@@ -19,6 +19,11 @@ import {mountView} from "./utils";
 import {ListView} from "./ListView";
 import {insertAt} from "./utils";
 
+class ScrollDirection {
+    static get downwards() { return 1; }
+    static get upwards() { return -1; }
+}
+
 class ItemRange {
     constructor(topCount, renderCount, bottomCount) {
         this.topCount = topCount;
@@ -56,6 +61,10 @@ class ItemRange {
         );
     }
 
+    get lastIndex() {
+        return this.topCount + this.renderCount;
+    }
+
     totalSize() {
         return this.topCount + this.renderCount + this.bottomCount;
     }
@@ -69,6 +78,23 @@ class ItemRange {
         */
         return idx - this.topCount;
     }
+
+    scrollDirectionTo(range) {
+        return range.bottomCount < this.bottomCount ? ScrollDirection.downwards : ScrollDirection.upwards;
+    }
+
+    diff(range) {
+        const diffResult = {};
+        if (this.scrollDirectionTo(range) === ScrollDirection.downwards) {
+            diffResult.toRemove = { start: this.topCount, end: range.topCount - 1 };
+            diffResult.toAdd = { start: this.lastIndex + 1, end: range.lastIndex };
+        }
+        else {
+            diffResult.toRemove = { start: range.lastIndex + 1, end: this.lastIndex };
+            diffResult.toAdd = { start: range.topCount, end: this.topCount - 1 };
+        }
+        return diffResult;
+    }
 }
 
 export class LazyListView extends ListView {
@@ -101,6 +127,9 @@ export class LazyListView extends ListView {
         // only update render Range if the new range + overflowMargin isn't contained by the old anymore 
         // or if we are force rendering
         if (forceRender || !this._renderRange.contains(intersectRange)) {
+            console.log("new", renderRange);
+            console.log("current", this._renderRange);
+            console.log("diff", this._renderRange.diff(renderRange));
             this._renderRange = renderRange;
             this._renderElementsInRange();
         }
@@ -146,13 +175,18 @@ export class LazyListView extends ListView {
         return null;
     }
 
-    _renderElementsInRange() {
+    _adjustPadding() {
+
+    }
+    
+    _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;
-        const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
         this._root.style.paddingTop = `${paddingTop}px`;
         this._root.style.paddingBottom = `${paddingBottom}px`;
+
         for (const child of this._childInstances) {
             this._removeChild(child);
         }