virtual-scroll: merge into master under cdk-experimental

.github/CODEOWNERS

@@ -86,6 +86,7 @@
 # CDK experimental package
 /src/cdk-experimental/**                           @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @josephperrott @crisbeto
+/src/cdk-experimental/scrolling/**                 @mmalerba
 
 # Docs examples & guides
 /guides/**                                         @amcdnl @jelbourn
@@ -141,6 +142,7 @@
 /src/demo-app/tooltip/**                           @andrewseguin
 /src/demo-app/tree/**                              @tinayuangao
 /src/demo-app/typography/**                        @crisbeto
+/src/demo-app/virtual-scroll/**                    @mmalerba
 
 # E2E app
 /e2e/*                                             @jelbourn
@@ -165,6 +167,7 @@
 /e2e/components/stepper-e2e.spec.ts                @mmalerba
 /e2e/components/tabs-e2e.spec.ts                   @andrewseguin
 /e2e/components/toolbar-e2e.spec.ts                @devversion
+/e2e/components/virtual-scroll-e2e.spec.ts         @mmalerba
 /e2e/util/**                                       @jelbourn
 /src/e2e-app/*                                     @jelbourn
 /src/e2e-app/block-scroll-strategy/**              @andrewseguin @crisbeto
@@ -183,6 +186,7 @@
 /src/e2e-app/sidenav/**                            @mmalerba
 /src/e2e-app/slide-toggle/**                       @devversion
 /src/e2e-app/tabs/**                               @andrewseguin
+/src/e2e-app/virtual-scroll/**                     @mmalerba
 
 # Universal app
 /src/universal-app/**                              @jelbourn

e2e/components/virtual-scroll-e2e.spec.ts

@@ -0,0 +1,117 @@
+import {browser, by, element, ElementFinder} from 'protractor';
+import {ILocation, ISize} from 'selenium-webdriver';
+
+declare var window: any;
+
+
+describe('autosize cdk-virtual-scroll', () => {
+  let viewport: ElementFinder;
+
+  describe('with uniform items', () => {
+    beforeEach(() => {
+      browser.get('/virtual-scroll');
+      viewport = element(by.css('.demo-virtual-scroll-uniform-size cdk-virtual-scroll-viewport'));
+    });
+
+    it('should scroll down slowly', async () => {
+      await browser.executeAsyncScript(smoothScrollViewportTo, viewport, 2000);
+      const offScreen = element(by.css('.demo-virtual-scroll-uniform-size [data-index="39"]'));
+      const onScreen = element(by.css('.demo-virtual-scroll-uniform-size [data-index="40"]'));
+      expect(await isVisibleInViewport(offScreen, viewport)).toBe(false);
+      expect(await isVisibleInViewport(onScreen, viewport)).toBe(true);
+    });
+
+    it('should jump scroll position down and slowly scroll back up', async () => {
+      // The estimate of the total content size is exactly correct, so we wind up scrolled to the
+      // same place as if we slowly scrolled down.
+      await browser.executeAsyncScript(scrollViewportTo, viewport, 2000);
+      const offScreen = element(by.css('.demo-virtual-scroll-uniform-size [data-index="39"]'));
+      const onScreen = element(by.css('.demo-virtual-scroll-uniform-size [data-index="40"]'));
+      expect(await isVisibleInViewport(offScreen, viewport)).toBe(false);
+      expect(await isVisibleInViewport(onScreen, viewport)).toBe(true);
+
+      // As we slowly scroll back up we should wind up back at the start of the content.
+      await browser.executeAsyncScript(smoothScrollViewportTo, viewport, 0);
+      const first = element(by.css('.demo-virtual-scroll-uniform-size [data-index="0"]'));
+      expect(await isVisibleInViewport(first, viewport)).toBe(true);
+    });
+  });
+
+  describe('with variable size', () => {
+    beforeEach(() => {
+      browser.get('/virtual-scroll');
+      viewport = element(by.css('.demo-virtual-scroll-variable-size cdk-virtual-scroll-viewport'));
+    });
+
+    it('should scroll down slowly', async () => {
+      await browser.executeAsyncScript(smoothScrollViewportTo, viewport, 2000);
+      const offScreen = element(by.css('.demo-virtual-scroll-variable-size [data-index="19"]'));
+      const onScreen = element(by.css('.demo-virtual-scroll-variable-size [data-index="20"]'));
+      expect(await isVisibleInViewport(offScreen, viewport)).toBe(false);
+      expect(await isVisibleInViewport(onScreen, viewport)).toBe(true);
+    });
+
+    it('should jump scroll position down and slowly scroll back up', async () => {
+      // The estimate of the total content size is slightly different than the actual, so we don't
+      // wind up in the same spot as if we scrolled slowly down.
+      await browser.executeAsyncScript(scrollViewportTo, viewport, 2000);
+      const offScreen = element(by.css('.demo-virtual-scroll-variable-size [data-index="18"]'));
+      const onScreen = element(by.css('.demo-virtual-scroll-variable-size [data-index="19"]'));
+      expect(await isVisibleInViewport(offScreen, viewport)).toBe(false);
+      expect(await isVisibleInViewport(onScreen, viewport)).toBe(true);
+
+      // As we slowly scroll back up we should wind up back at the start of the content. As we
+      // scroll the error from when we jumped the scroll position should be slowly corrected.
+      await browser.executeAsyncScript(smoothScrollViewportTo, viewport, 0);
+      const first = element(by.css('.demo-virtual-scroll-variable-size [data-index="0"]'));
+      expect(await isVisibleInViewport(first, viewport)).toBe(true);
+    });
+  });
+});
+
+
+/** Checks if the given element is visible in the given viewport. */
+async function isVisibleInViewport(el: ElementFinder, viewport: ElementFinder): Promise<boolean> {
+  if (!await el.isPresent() || !await el.isDisplayed() || !await viewport.isPresent() ||
+      !await viewport.isDisplayed()) {
+    return false;
+  }
+  const viewportRect = getRect(await viewport.getLocation(), await viewport.getSize());
+  const elRect = getRect(await el.getLocation(), await el.getSize());
+  return elRect.left < viewportRect.right && elRect.right > viewportRect.left &&
+      elRect.top < viewportRect.bottom && elRect.bottom > viewportRect.top;
+}
+
+
+/** Gets the rect for an element given its location ans size. */
+function getRect(location: ILocation, size: ISize):
+    {top: number, left: number, bottom: number, right: number} {
+  return {
+    top: location.y,
+    left: location.x,
+    bottom: location.y + size.height,
+    right: location.x + size.width
+  };
+}
+
+
+/** Immediately scrolls the viewport to the given offset. */
+function scrollViewportTo(viewportEl: any, offset: number, done: () => void) {
+  viewportEl.scrollTop = offset;
+  window.requestAnimationFrame(() => done());
+}
+
+
+/** Smoothly scrolls the viewport to the given offset, 25px at a time. */
+function smoothScrollViewportTo(viewportEl: any, offset: number, done: () => void) {
+  let promise = Promise.resolve();
+  let curOffset = viewportEl.scrollTop;
+  do {
+    const co = curOffset += Math.min(25, Math.max(-25, offset - curOffset));
+    promise = promise.then(() => new Promise<void>(resolve => {
+      viewportEl.scrollTop = co;
+      window.requestAnimationFrame(() => resolve());
+    }));
+  } while (curOffset != offset);
+  promise.then(() => done());
+}

packages.bzl

@@ -21,6 +21,15 @@ CDK_PACKAGES = [
 
 CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
 
+CDK_EXPERIMENTAL_PACKAGES = [
+  # "dialog",  # Disabled because BUILD.bazel doesn't exist yet
+  "scrolling",
+]
+
+CDK_EXPERIMENTAL_TARGETS = ["//src/cdk-experimental"] + [
+  "//src/cdk-experimental/%s" % p for p in CDK_EXPERIMENTAL_PACKAGES
+]
+
 MATERIAL_PACKAGES = [
   "autocomplete",
   "badge",
@@ -84,6 +93,12 @@ ROLLUP_GLOBALS.update({
   "@angular/cdk/%s" % p: "ng.cdk.%s" % p for p in CDK_PACKAGES
 })
 
+# Rollup globals for cdk subpackages in the form of, e.g.,
+# {"@angular/cdk-experimental/scrolling": "ng.cdkExperimental.scrolling"}
+ROLLUP_GLOBALS.update({
+  "@angular/cdk-experimental/%s" % p: "ng.cdkExperimental.%s" % p for p in CDK_EXPERIMENTAL_PACKAGES
+})
+
 # Rollup globals for material subpackages, e.g., {"@angular/material/list": "ng.material.list"}
 ROLLUP_GLOBALS.update({
   "@angular/material/%s" % p: "ng.material.%s" % p for p in MATERIAL_PACKAGES

src/cdk-experimental/BUILD.bazel

@@ -1,14 +1,15 @@
 package(default_visibility=["//visibility:public"])
 load("@angular//:index.bzl", "ng_module", "ng_package")
-load("//:packages.bzl", "CDK_TARGETS", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
+load("//:packages.bzl", "CDK_EXPERIMENTAL_PACKAGES", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
+# Export the CDK tsconfig so that subpackages can reference it directly.
+exports_files(["tsconfig-build.json"])
 
 ng_module(
   name = "cdk-experimental",
-  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  srcs = glob(["*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental",
-  deps = CDK_TARGETS,
-  assets = glob(["**/*.css", "**/*.html"]),
+  deps = ["//src/cdk-experimental/%s" % p for p in CDK_EXPERIMENTAL_PACKAGES],
   tsconfig = "//src/lib:tsconfig-build.json",
 )
 
@@ -18,6 +19,6 @@ ng_package(
   entry_point = "src/cdk-experimental/public_api.js",
   globals = ROLLUP_GLOBALS,
   replacements = VERSION_PLACEHOLDER_REPLACEMENTS,
-  deps = [":cdk-experimental"],
+  deps = CDK_EXPERIMENTAL_TARGETS,
   tags = ["publish"],
 )

src/cdk-experimental/package.json

@@ -16,7 +16,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular/material": "0.0.0-PLACEHOLDER",
+    "@angular/cdk": "0.0.0-PLACEHOLDER",
     "@angular/core": "0.0.0-NG"
   },
   "dependencies": {

src/cdk-experimental/public-api.ts

@@ -7,3 +7,4 @@
  */
 
 export * from './version';
+export * from '@angular/cdk-experimental/scrolling';

src/cdk-experimental/scrolling/BUILD.bazel

@@ -0,0 +1,62 @@
+package(default_visibility=["//visibility:public"])
+load("@angular//:index.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+
+
+ng_module(
+  name = "scrolling",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  module_name = "@angular/cdk-experimental/scrolling",
+  assets = [":virtual_scroll_viewport_css"] + glob(["**/*.html"]),
+  deps = [
+    "//src/cdk/coercion",
+    "//src/cdk/collections",
+    "@rxjs",
+  ],
+  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+)
+
+sass_binary(
+  name = "virtual_scroll_viewport_scss",
+  src = "virtual-scroll-viewport.scss",
+)
+
+# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
+# Copy the output of the sass_binary such that the filename and path match what we expect.
+genrule(
+  name = "virtual_scroll_viewport_css",
+  srcs = [":virtual_scroll_viewport_scss.css"],
+  outs = ["virtual-scroll-viewport.css"],
+  cmd = "cp $< $@",
+)
+
+ts_library(
+  name = "scrolling_test_sources",
+  testonly = 1,
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    ":scrolling",
+    "//src/cdk/collections",
+    "//src/cdk/testing",
+    "@rxjs",
+  ],
+  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+)
+
+ts_web_test(
+  name = "unit_tests",
+  bootstrap = [
+    "//:web_test_bootstrap_scripts",
+  ],
+  tags = ["manual"],
+
+  # Do not sort
+  deps = [
+    "//:tslib_bundle",
+    "//:angular_bundles",
+    "//:angular_test_bundles",
+    "//test:angular_test_init",
+    ":scrolling_test_sources",
+  ],
+)