virtual-scroll: only move views that need to be moved

Author: mmalerba

src/cdk-experimental/scrolling/virtual-for-of.ts

@@ -45,12 +45,6 @@ export type CdkVirtualForOfContext<T> = {
 };
 
 
-type RecordViewTuple<T> = {
-  record: IterableChangeRecord<T> | null,
-  view?: EmbeddedViewRef<CdkVirtualForOfContext<T>>
-};
-
-
 /**
  * A directive similar to `ngForOf` to be used for rendering data inside a virtual scrolling
  * container.
@@ -101,6 +95,8 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
     }
   }
 
+  @Input() cdkVirtualForTemplateCacheSize: number = 20;
+
   /** Emits whenever the data in the current DataSource changes. */
   dataStream: Observable<T[]> = this._dataSourceChanges
       .pipe(
@@ -256,82 +252,64 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
 
   /** Apply changes to the DOM. */
   private _applyChanges(changes: IterableChanges<T>) {
-    // TODO(mmalerba): Currently we remove every view and then re-insert it in the correct place.
-    // It would be better to generate the minimal set of remove & inserts to get to the new list
-    // instead.
-
-    // Detach all of the views and add them into an array to preserve their original order.
-    const previousViews: (EmbeddedViewRef<CdkVirtualForOfContext<T>> | null)[] = [];
-    let i = this._viewContainerRef.length;
-    while (i--) {
-      previousViews.unshift(
-          this._viewContainerRef.detach()! as EmbeddedViewRef<CdkVirtualForOfContext<T>>);
-    }
-
-    // Mark the removed indices so we can recycle their views.
-    changes.forEachRemovedItem(record => {
-      this._templateCache.push(previousViews[record.previousIndex!]!);
-      previousViews[record.previousIndex!] = null;
-    });
-
-    // Queue up the newly added items to be inserted, recycling views from the cache if possible.
-    const insertTuples: RecordViewTuple<T>[] = [];
-    changes.forEachAddedItem(record => {
-      insertTuples[record.currentIndex!] = {record, view: this._templateCache.pop()};
-    });
-
-    // Queue up moved items to be re-inserted.
-    changes.forEachMovedItem(record => {
-      insertTuples[record.currentIndex!] = {record, view: previousViews[record.previousIndex!]!};
-      previousViews[record.previousIndex!] = null;
+    // Rearrange the views to put them in the right location.
+    changes.forEachOperation(
+        (record: IterableChangeRecord<T>, adjustedPreviousIndex: number, currentIndex: number) => {
+          if (record.previousIndex == null) {  // Item added.
+            const view = this._getViewForNewItem();
+            this._viewContainerRef.insert(view, currentIndex);
+            view.context.$implicit = record.item;
+          } else if (currentIndex == null) {  // Item removed.
+            this._cacheView(this._viewContainerRef.detach(adjustedPreviousIndex) as
+                EmbeddedViewRef<CdkVirtualForOfContext<T>>);
+          } else {  // Item moved.
+            const view = this._viewContainerRef.get(adjustedPreviousIndex) as
+                EmbeddedViewRef<CdkVirtualForOfContext<T>>;
+            this._viewContainerRef.move(view, currentIndex);
+            view.context.$implicit = record.item;
+          }
+        });
+
+    // Update $implicit for any items that had an identity change.
+    changes.forEachIdentityChange((record: any) => {
+      const view = this._viewContainerRef.get(record.currentIndex) as
+          EmbeddedViewRef<CdkVirtualForOfContext<T>>;
+      view.context.$implicit = record.item;
     });
 
-    // We have nulled-out all of the views that were removed or moved from previousViews. What is
-    // left is the unchanged items that we queue up to be re-inserted.
-    i = previousViews.length;
+    // Update the context variables on all items.
+    let i = this._viewContainerRef.length, count = this._data.length;
     while (i--) {
-      if (previousViews[i]) {
-        insertTuples[i] = {record: null, view: previousViews[i]!};
-      }
+      const view = this._viewContainerRef.get(i) as EmbeddedViewRef<CdkVirtualForOfContext<T>>;
+      view.context.index = this._renderedRange.start + i;
+      view.context.count = count;
+      this._updateComputedContextProperties(view.context);
     }
-
-    // We now have a full list of everything to be inserted, so go ahead and insert them.
-    this._insertViews(insertTuples);
   }
 
-  /** Insert the RecordViewTuples into the container element. */
-  private _insertViews(insertTuples: RecordViewTuple<T>[]) {
-    const count = this._data.length;
-    let i = insertTuples.length;
-    const lastIndex = i - 1;
-    while (i--) {
-      const index = lastIndex - i;
-      let {view, record} = insertTuples[index];
-      if (view) {
-        this._viewContainerRef.insert(view);
-      } else {
-        view = this._viewContainerRef.createEmbeddedView(this._template, {
-              $implicit: null!,
-              cdkVirtualForOf: this._cdkVirtualForOf,
-              index: -1,
-              count: -1,
-              first: false,
-              last: false,
-              odd: false,
-              even: false
-            });
-      }
-
-      if (record) {
-        view.context.$implicit = record.item as T;
-      }
-      view.context.index = this._renderedRange.start + index;
-      view.context.count = count;
-      this._updateComputedContextProperties(view.context);
-      view.detectChanges();
+  /** Cache the given detached view. */
+  private _cacheView(view: EmbeddedViewRef<CdkVirtualForOfContext<T>>) {
+    if (this._templateCache.length < this.cdkVirtualForTemplateCacheSize) {
+      this._templateCache.push(view);
+    } else {
+      view.destroy();
     }
   }
 
+  /** Get a view for a new item, either from the cache or by creating a new one. */
+  private _getViewForNewItem(): EmbeddedViewRef<CdkVirtualForOfContext<T>> {
+    return this._templateCache.pop() || this._viewContainerRef.createEmbeddedView(this._template, {
+      $implicit: null!,
+      cdkVirtualForOf: this._cdkVirtualForOf,
+      index: -1,
+      count: -1,
+      first: false,
+      last: false,
+      odd: false,
+      even: false
+    });
+  }
+
   /** Update the computed properties on the `CdkVirtualForOfContext`. */
   private _updateComputedContextProperties(context: CdkVirtualForOfContext<any>) {
     context.first = context.index === 0;

src/demo-app/demo-app-module.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HttpClientModule} from '@angular/common/http';
 import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {HttpClientModule} from '@angular/common/http';
-import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ALL_ROUTES} from './demo-app/routes';
+import {RouterModule} from '@angular/router';
+import {AccessibilityDemoModule} from './a11y/a11y-module';
 import {EntryApp} from './demo-app/demo-app';
 import {DemoModule} from './demo-app/demo-module';
-import {AccessibilityDemoModule} from './a11y/a11y-module';
+import {ALL_ROUTES} from './demo-app/routes';
 
 
 @NgModule({

src/demo-app/demo-app/demo-module.ts

@@ -63,12 +63,11 @@ import {
 } from '../tabs/tabs-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
+import {TreeDemoModule} from '../tree/tree-demo-module';
 import {TypographyDemo} from '../typography/typography-demo';
 import {VirtualScrollDemo} from '../virtual-scroll/virtual-scroll-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
-import {TableDemoModule} from '../table/table-demo-module';
-import {TreeDemoModule} from '../tree/tree-demo-module';
 
 @NgModule({
   imports: [