fix(virtual-scroll): make horizontal scrolling work in RTL

Author: mmalerba

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

@@ -125,7 +125,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   attach(viewport: CdkVirtualScrollViewport) {
     this._averager.reset();
     this._viewport = viewport;
-    this._setScrollOffset();
+    this._renderContentForCurrentOffset();
   }
 
   /** Detaches this scroll strategy from the currently attached viewport. */
@@ -143,7 +143,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   /** @docs-private Implemented as part of VirtualScrollStrategy. */
   onDataLengthChanged() {
     if (this._viewport) {
-      this._setScrollOffset();
+      this._renderContentForCurrentOffset();
       this._checkRenderedContentSize();
     }
   }
@@ -238,7 +238,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
       // jitteriness if we just jump to the estimated position. Instead we make sure to scroll by
       // the same number of pixels as the scroll magnitude.
       if (scrollMagnitude >= viewport.getViewportSize()) {
-        this._setScrollOffset();
+        this._renderContentForCurrentOffset();
       } else {
         // The number of new items to render on the side the user is scrolling towards. Rather than
         // just filling the underscan space, we actually fill enough to have a buffer size of
@@ -343,18 +343,12 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   }
 
   /**
-   * Sets the scroll offset and renders the content we estimate should be shown at that point.
-   * @param scrollOffset The offset to jump to. If not specified the scroll offset will not be
-   *     changed, but the rendered content will be recalculated based on our estimate of what should
-   *     be shown at the current scroll offset.
+   * Recalculates the rendered content based on our estimate of what should be shown at the current
+   * scroll offset.
    */
-  private _setScrollOffset(scrollOffset?: number) {
+  private _renderContentForCurrentOffset() {
     const viewport = this._viewport!;
-    if (scrollOffset == null) {
-      scrollOffset = viewport.measureScrollOffset();
-    } else {
-      viewport.setScrollOffset(scrollOffset);
-    }
+    const scrollOffset = viewport.measureScrollOffset();
     this._lastScrollOffset = scrollOffset;
     this._removalFailures = 0;
 

src/cdk/scrolling/BUILD.bazel

@@ -10,6 +10,7 @@ ng_module(
   module_name = "@angular/cdk/scrolling",
   assets = [":virtual-scroll-viewport.css"] + glob(["**/*.html"]),
   deps = [
+    "//src/cdk/bidi",
     "//src/cdk/coercion",
     "//src/cdk/collections",
     "//src/cdk/platform",

src/cdk/scrolling/scrolling-module.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {BidiModule} from '@angular/cdk/bidi';
 import {PlatformModule} from '@angular/cdk/platform';
 import {NgModule} from '@angular/core';
 import {CdkFixedSizeVirtualScroll} from './fixed-size-virtual-scroll';
@@ -14,8 +15,9 @@ import {CdkVirtualForOf} from './virtual-for-of';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 @NgModule({
-  imports: [PlatformModule],
+  imports: [BidiModule, PlatformModule],
   exports: [
+    BidiModule,
     CdkFixedSizeVirtualScroll,
     CdkScrollable,
     CdkVirtualForOf,

src/cdk/scrolling/virtual-scroll-viewport.scss

@@ -35,6 +35,7 @@ cdk-virtual-scroll-viewport {
   contain: strict;
   transform: translateZ(0);
   will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
 }
 
 // Wrapper element for the rendered content. This element will be transformed to push the rendered
@@ -45,6 +46,11 @@ cdk-virtual-scroll-viewport {
   left: 0;
   contain: content;
   will-change: transform;
+
+  [dir='rtl'] & {
+    right: 0;
+    left: auto;
+  }
 }
 
 .cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {

src/cdk/scrolling/virtual-scroll-viewport.spec.ts

@@ -142,20 +142,6 @@ describe('CdkVirtualScrollViewport', () => {
       expect(viewport.getOffsetToRenderedContentStart()).toBe(10);
     }));
 
-    it('should set scroll offset', fakeAsync(() => {
-      finishInit(fixture);
-      viewport.setScrollOffset(testComponent.itemSize * 2);
-      fixture.detectChanges();
-      flush();
-
-      triggerScroll(viewport);
-      fixture.detectChanges();
-      flush();
-
-      expect(viewport.elementRef.nativeElement.scrollTop).toBe(testComponent.itemSize * 2);
-      expect(viewport.getRenderedRange()).toEqual({start: 2, end: 6});
-    }));
-
     it('should scroll to offset', fakeAsync(() => {
       finishInit(fixture);
       viewport.scrollToOffset(testComponent.itemSize * 2);
@@ -552,6 +538,92 @@ describe('CdkVirtualScrollViewport', () => {
       expect(testComponent.virtualForViewContainer.createEmbeddedView).toHaveBeenCalledTimes(5);
     }));
   });
+
+  describe('with RTL direction', () => {
+    let fixture: ComponentFixture<FixedSizeVirtualScrollWithRtlDirection>;
+    let testComponent: FixedSizeVirtualScrollWithRtlDirection;
+    let viewport: CdkVirtualScrollViewport;
+    let viewportEl: HTMLElement;
+    let contentWrapperEl: HTMLElement;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [ScrollingModule],
+        declarations: [FixedSizeVirtualScrollWithRtlDirection],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(FixedSizeVirtualScrollWithRtlDirection);
+      testComponent = fixture.componentInstance;
+      viewport = testComponent.viewport;
+      viewportEl = viewport.elementRef.nativeElement;
+      contentWrapperEl =
+          viewportEl.querySelector('.cdk-virtual-scroll-content-wrapper') as HTMLElement;
+    });
+
+    it('should initially be scrolled all the way right and showing the first item in horizontal' +
+       ' mode', fakeAsync(() => {
+          testComponent.orientation = 'horizontal';
+          finishInit(fixture);
+
+          expect(viewportEl.scrollLeft).toBe(
+              testComponent.itemSize * testComponent.items.length - testComponent.viewportSize);
+          expect(contentWrapperEl.style.transform).toMatch(/translateX\(0(px)?\)/);
+          expect((contentWrapperEl.children[0] as HTMLElement).innerText).toBe('0 - 0');
+        }));
+
+    it('should scroll through items as user scrolls to the left in horizontal mode',
+        fakeAsync(() => {
+          testComponent.orientation = 'horizontal';
+          finishInit(fixture);
+
+          triggerScroll(viewport, 0);
+          fixture.detectChanges();
+          flush();
+
+          expect(contentWrapperEl.style.transform).toBe('translateX(-300px)');
+          expect((contentWrapperEl.children[0] as HTMLElement).innerText).toBe('6 - 6');
+        }));
+
+    it('should interpret scrollToOffset amount as an offset from the right in horizontal mode',
+        fakeAsync(() => {
+          testComponent.orientation = 'horizontal';
+          finishInit(fixture);
+
+          viewport.scrollToOffset(100);
+          triggerScroll(viewport);
+          fixture.detectChanges();
+          flush();
+
+          expect(viewportEl.scrollLeft).toBe(testComponent.itemSize * testComponent.items.length -
+              testComponent.viewportSize - 100);
+        }));
+
+    it('should scroll to the correct index in horizontal mode', fakeAsync(() => {
+      testComponent.orientation = 'horizontal';
+      finishInit(fixture);
+
+      viewport.scrollToIndex(2);
+      triggerScroll(viewport);
+      fixture.detectChanges();
+      flush();
+
+      expect((contentWrapperEl.children[0] as HTMLElement).innerText).toBe('2 - 2');
+    }));
+
+    it('should emit the scrolled to index in horizontal mode', fakeAsync(() => {
+      testComponent.orientation = 'horizontal';
+      finishInit(fixture);
+
+      expect(testComponent.scrolledToIndex).toBe(0);
+
+      viewport.scrollToIndex(2);
+      triggerScroll(viewport);
+      fixture.detectChanges();
+      flush();
+
+      expect(testComponent.scrolledToIndex).toBe(2);
+    }));
+  });
 });
 
 
@@ -564,6 +636,11 @@ function finishInit(fixture: ComponentFixture<any>) {
   // On the second cycle we render the items.
   fixture.detectChanges();
   flush();
+
+  // Flush the initial fake scroll event.
+  animationFrameScheduler.flush();
+  flush();
+  fixture.detectChanges();
 }
 
 /** Trigger a scroll event on the viewport (optionally setting a new scroll offset). */
@@ -629,3 +706,53 @@ class FixedSizeVirtualScroll {
     return this.orientation == 'horizontal' ? this.viewportCrossSize : this.viewportSize;
   }
 }
+
+@Component({
+  template: `
+    <cdk-virtual-scroll-viewport dir="rtl"
+        [itemSize]="itemSize" [bufferSize]="bufferSize" [orientation]="orientation"
+        [style.height.px]="viewportHeight" [style.width.px]="viewportWidth"
+        (scrolledIndexChange)="scrolledToIndex = $event">
+      <div class="item"
+           *cdkVirtualFor="let item of items; let i = index; trackBy: trackBy; \
+                           templateCacheSize: templateCacheSize"
+           [style.height.px]="itemSize" [style.width.px]="itemSize">
+        {{i}} - {{item}}
+      </div>
+    </cdk-virtual-scroll-viewport>
+  `,
+  styles: [`
+    .cdk-virtual-scroll-content-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
+      flex-direction: row;
+    }
+  `],
+  encapsulation: ViewEncapsulation.None,
+})
+class FixedSizeVirtualScrollWithRtlDirection {
+  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
+  @ViewChild(CdkVirtualForOf, {read: ViewContainerRef}) virtualForViewContainer: ViewContainerRef;
+
+  @Input() orientation = 'vertical';
+  @Input() viewportSize = 200;
+  @Input() viewportCrossSize = 100;
+  @Input() itemSize = 50;
+  @Input() bufferSize = 0;
+  @Input() items = Array(10).fill(0).map((_, i) => i);
+  @Input() trackBy;
+  @Input() templateCacheSize = 20;
+
+  scrolledToIndex = 0;
+
+  get viewportWidth() {
+    return this.orientation == 'horizontal' ? this.viewportSize : this.viewportCrossSize;
+  }
+
+  get viewportHeight() {
+    return this.orientation == 'horizontal' ? this.viewportCrossSize : this.viewportSize;
+  }
+}