add item size estimator class

Author: mmalerba

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -6,32 +6,79 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Range} from '@angular/cdk/collections';
 import {Directive, forwardRef, Input, OnChanges} from '@angular/core';
 import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 
+/**
+ * A class that tracks the size of items that have been seen and uses it to estimate the average
+ * item size.
+ */
+export class ItemSizeEstimator {
+  /** The total amount of weight behind the current average. */
+  private _totalWeight = 0;
+
+  /** The current average item size. */
+  private _averageItemSize: number;
+
+  /** @param defaultItemSize The default size to use for items when no data is available. */
+  constructor(defaultItemSize = 50) {
+    this._averageItemSize = defaultItemSize;
+  }
+
+  /** Returns the average item size. */
+  getAverageItemSize(): number {
+    return this._averageItemSize;
+  }
+
+  /**
+   * Adds a measurement sample for the estimator to consider.
+   * @param range The measured range.
+   * @param size The measured size of the given range in pixels.
+   */
+  addSample(range: Range, size: number) {
+    const weight = range.end - range.start;
+    const newTotalWeight = this._totalWeight + weight;
+    if (newTotalWeight) {
+      const newAverageItemSize =
+          (size * weight + this._averageItemSize * this._totalWeight) / newTotalWeight;
+      if (newAverageItemSize) {
+        this._averageItemSize = newAverageItemSize;
+        this._totalWeight = newTotalWeight;
+      }
+    }
+  }
+}
+
+
 /** Virtual scrolling strategy for lists with items of unknown or dynamic size. */
 export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   /** The attached viewport. */
   private _viewport: CdkVirtualScrollViewport | null = null;
 
-  /** The size of the items in the virtually scrolling list. */
+  /** The minimum amount of buffer rendered beyond the viewport (in pixels). */
   private _minBufferPx: number;
 
-  /** The number of buffer items to render beyond the edge of the viewport. */
+  /** The number of buffer items to render beyond the edge of the viewport (in pixels). */
   private _addBufferPx: number;
 
+  /** The estimator used to estimate the size of unseen items. */
+  private _estimator: ItemSizeEstimator;
+
   /**
    * @param minBufferPx The minimum amount of buffer rendered beyond the viewport (in pixels).
    *     If the amount of buffer dips below this number, more items will be rendered.
    * @param addBufferPx The number of pixels worth of buffer to shoot for when rendering new items.
    *     If the actual amount turns out to be less it will not necessarily trigger an additional
    *     rendering cycle (as long as the amount of buffer is still greater than `minBufferPx`).
+   * @param estimator The estimator used to estimate the size of unseen items.
    */
-  constructor(minBufferPx: number, addBufferPx: number) {
+  constructor(minBufferPx: number, addBufferPx: number, estimator = new ItemSizeEstimator()) {
     this._minBufferPx = minBufferPx;
     this._addBufferPx = addBufferPx;
+    this._estimator = estimator;
   }
 
   /**
@@ -48,7 +95,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     this._viewport = null;
   }
 
-  /** Called when the viewport is scrolled (debounced using requestAnimationFrame). */
+  /** Called when the viewport is scrolled. */
   onContentScrolled() {
     // TODO: do stuff.
   }
@@ -58,6 +105,12 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     // TODO: do stuff.
   }
 
+  /**
+   * Update the buffer parameters.
+   * @param minBufferPx The minimum amount of buffer rendered beyond the viewport (in pixels).
+   * @param addBufferPx The number of buffer items to render beyond the edge of the viewport (in
+   *     pixels).
+   */
   updateBufferSize(minBufferPx, addBufferPx) {
     this._minBufferPx = minBufferPx;
     this._addBufferPx = addBufferPx;

src/cdk-experimental/scrolling/fixed-size-virtual-scroll.ts

@@ -59,7 +59,7 @@ export class FixedSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     this._updateRenderedRange();
   }
 
-  /** Called when the viewport is scrolled (debounced using requestAnimationFrame). */
+  /** Called when the viewport is scrolled. */
   onContentScrolled() {
     this._updateRenderedRange();
   }

src/demo-app/virtual-scroll/virtual-scroll-demo.html

@@ -10,3 +10,10 @@
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
+
+
+<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
+  <div *cdkVirtualFor="let size of data; let i = index" class="demo-item" [style.height.px]="size">
+    Item #{{i}} - ({{size}}px)
+  </div>
+</cdk-virtual-scroll-viewport>