fixup! feat(cdk/scrolling): make scroller element configurable for virtual scrolling

spike-rabbit · spike-rabbit · commit 5f4609dd700a · 2022-02-21T18:21:47.000+01:00
diff --git a/src/cdk/scrolling/scrollable.ts b/src/cdk/scrolling/scrollable.ts
@@ -45,17 +45,11 @@ export type ExtendedScrollToOptions = _XAxis & _YAxis & ScrollOptions;
   selector: '[cdk-scrollable], [cdkScrollable]',
 })
 export class CdkScrollable implements OnInit, OnDestroy {
-  private readonly _destroyed = new Subject<void>();
+  protected readonly _destroyed = new Subject<void>();
 
-  private _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
+  protected _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
     this.ngZone.runOutsideAngular(() =>
-      /* it seems like scroll-events are not fired on the documentElement, event if it's the actual scrolling element */
-      fromEvent(
-        this.elementRef.nativeElement === document.documentElement
-          ? document
-          : this.elementRef.nativeElement,
-        'scroll',
-      )
+      fromEvent(this.elementRef.nativeElement, 'scroll')
         .pipe(takeUntil(this._destroyed))
         .subscribe(observer),
     ),
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts
@@ -20,7 +20,6 @@ import {
   OnInit,
   Optional,
   Output,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -69,8 +68,11 @@ const SCROLL_SCHEDULER =
   providers: [
     {
       provide: CdkScrollable,
-      useFactory: (scrollViewport: CdkVirtualScrollViewport) => scrollViewport.scrollable,
-      deps: [CdkVirtualScrollViewport],
+      useFactory: (
+        virtualScrollable: CdkVirtualScrollable | null,
+        viewport: CdkVirtualScrollViewport,
+      ) => virtualScrollable || viewport,
+      deps: [CdkVirtualScrollable, CdkVirtualScrollViewport],
     },
   ],
 })
@@ -86,6 +88,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
   get orientation() {
     return this._orientation;
   }
+
   set orientation(orientation: 'horizontal' | 'vertical') {
     if (this._orientation !== orientation) {
       this._orientation = orientation;
@@ -182,7 +185,6 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     @Optional() dir: Directionality,
     scrollDispatcher: ScrollDispatcher,
     viewportRuler: ViewportRuler,
-    renderer: Renderer2,
     @Optional() @Inject(VIRTUAL_SCROLLABLE) public scrollable: CdkVirtualScrollable,
   ) {
     super(elementRef, scrollDispatcher, ngZone, dir);
@@ -197,7 +199,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
 
     if (!this.scrollable) {
       // No scrollable is provided, so the virtual-scroll-viewport needs to become a scrollable
-      renderer.addClass(this.elementRef.nativeElement, 'cdk-virtual-scrollable');
+      this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');
       this.scrollable = this;
     }
   }
@@ -292,6 +294,10 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     return this._renderedRange;
   }
 
+  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+    return this.getElementRef().nativeElement.getBoundingClientRect()[from];
+  }
+
   /**
    * Sets the total size of all content (in pixels), including content that is not currently
    * rendered.
@@ -425,9 +431,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
       fromRect = this.orientation === 'horizontal' ? 'left' : 'top';
     }
 
-    const scrollerClientRect = this.scrollable
-      .getElementRef()
-      .nativeElement.getBoundingClientRect()[fromRect];
+    const scrollerClientRect = this.scrollable.getBoundingClientRectWithScrollOffset(fromRect);
     const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];
 
     return viewportClientRect - scrollerClientRect;
diff --git a/src/cdk/scrolling/virtual-scrollable-element.ts b/src/cdk/scrolling/virtual-scrollable-element.ts
@@ -27,4 +27,11 @@ export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
   ) {
     super(elementRef, scrollDispatcher, ngZone, dir);
   }
+
+  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+    return (
+      this.getElementRef().nativeElement.getBoundingClientRect()[from] -
+      this.measureScrollOffset(from)
+    );
+  }
 }
diff --git a/src/cdk/scrolling/virtual-scrollable-window.ts b/src/cdk/scrolling/virtual-scrollable-window.ts
@@ -8,6 +8,8 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {Directive, ElementRef, NgZone, Optional} from '@angular/core';
+import {fromEvent, Observable, Observer} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
 
@@ -16,7 +18,18 @@ import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
   providers: [{provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableWindow}],
 })
 export class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
+  protected override _elementScrolled: Observable<Event> = new Observable(
+    (observer: Observer<Event>) =>
+      this.ngZone.runOutsideAngular(() =>
+        fromEvent(document, 'scroll').pipe(takeUntil(this._destroyed)).subscribe(observer),
+      ),
+  );
+
   constructor(scrollDispatcher: ScrollDispatcher, ngZone: NgZone, @Optional() dir: Directionality) {
     super(new ElementRef(document.documentElement), scrollDispatcher, ngZone, dir);
   }
+
+  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+    return this.getElementRef().nativeElement.getBoundingClientRect()[from];
+  }
 }
diff --git a/src/cdk/scrolling/virtual-scrollable.ts b/src/cdk/scrolling/virtual-scrollable.ts
@@ -28,4 +28,6 @@ export abstract class CdkVirtualScrollable extends CdkScrollable {
     const viewportEl = this.elementRef.nativeElement;
     return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;
   }
+
+  abstract getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
 }
diff --git a/tools/public_api_guard/cdk/scrolling.md b/tools/public_api_guard/cdk/scrolling.md
@@ -12,7 +12,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { DoCheck } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i5 from '@angular/cdk/bidi';
+import * as i7 from '@angular/cdk/bidi';
 import { InjectionToken } from '@angular/core';
 import { IterableDiffers } from '@angular/core';
 import { ListRange } from '@angular/cdk/collections';
@@ -63,10 +63,14 @@ export class CdkFixedSizeVirtualScroll implements OnChanges {
 export class CdkScrollable implements OnInit, OnDestroy {
     constructor(elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir?: Directionality | undefined);
     // (undocumented)
+    protected readonly _destroyed: Subject<void>;
+    // (undocumented)
     protected dir?: Directionality | undefined;
     // (undocumented)
     protected elementRef: ElementRef<HTMLElement>;
     elementScrolled(): Observable<Event>;
+    // (undocumented)
+    protected _elementScrolled: Observable<Event>;
     getElementRef(): ElementRef<HTMLElement>;
     measureScrollOffset(from: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number;
     // (undocumented)
@@ -140,6 +144,8 @@ export type CdkVirtualForOfContext<T> = {
 export abstract class CdkVirtualScrollable extends CdkScrollable {
     constructor(elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir?: Directionality);
     // (undocumented)
+    abstract getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+    // (undocumented)
     measureViewportSize(orientation: 'horizontal' | 'vertical'): number;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollable, never, never, {}, {}, never>;
@@ -151,6 +157,8 @@ export abstract class CdkVirtualScrollable extends CdkScrollable {
 export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
     constructor(elementRef: ElementRef, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir: Directionality);
     // (undocumented)
+    getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+    // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollableElement, "[cdk-virtual-scrollable-element], [cdkVirtualScrollableElement]", never, {}, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollableElement, [null, null, null, { optional: true; }]>;
@@ -160,6 +168,10 @@ export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
 export class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
     constructor(scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir: Directionality);
     // (undocumented)
+    protected _elementScrolled: Observable<Event>;
+    // (undocumented)
+    getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+    // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollableWindow, "cdk-virtual-scroll-viewport[scrollable-window]", never, {}, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollableWindow, [null, null, { optional: true; }]>;
@@ -175,7 +187,7 @@ export interface CdkVirtualScrollRepeater<T> {
 
 // @public
 export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements OnInit, OnDestroy {
-    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, _scrollStrategy: VirtualScrollStrategy, dir: Directionality, scrollDispatcher: ScrollDispatcher, viewportRuler: ViewportRuler, renderer: Renderer2, scrollable: CdkVirtualScrollable);
+    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, _scrollStrategy: VirtualScrollStrategy, dir: Directionality, scrollDispatcher: ScrollDispatcher, viewportRuler: ViewportRuler, scrollable: CdkVirtualScrollable);
     get appendOnly(): boolean;
     set appendOnly(value: BooleanInput);
     attach(forOf: CdkVirtualScrollRepeater<any>): void;
@@ -184,6 +196,8 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     detach(): void;
     // (undocumented)
     elementRef: ElementRef<HTMLElement>;
+    // (undocumented)
+    getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
     getDataLength(): number;
     getOffsetToRenderedContentStart(): number | null;
     getRenderedRange(): ListRange;
@@ -213,7 +227,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkVirtualScrollViewport, "cdk-virtual-scroll-viewport", never, { "orientation": "orientation"; "appendOnly": "appendOnly"; }, { "scrolledIndexChange": "scrolledIndexChange"; }, never, ["*"]>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollViewport, [null, null, null, { optional: true; }, { optional: true; }, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollViewport, [null, null, null, { optional: true; }, { optional: true; }, null, null, { optional: true; }]>;
 }
 
 // @public
@@ -283,7 +297,7 @@ export class ScrollingModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<ScrollingModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollingModule, [typeof i2.CdkFixedSizeVirtualScroll, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport], [typeof i5.BidiModule, typeof CdkScrollableModule], [typeof i5.BidiModule, typeof CdkScrollableModule, typeof i2.CdkFixedSizeVirtualScroll, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollingModule, [typeof i2.CdkFixedSizeVirtualScroll, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport, typeof i5.CdkVirtualScrollableWindow, typeof i6.CdkVirtualScrollableElement], [typeof i7.BidiModule, typeof CdkScrollableModule], [typeof i7.BidiModule, typeof CdkScrollableModule, typeof i2.CdkFixedSizeVirtualScroll, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport, typeof i5.CdkVirtualScrollableWindow, typeof i6.CdkVirtualScrollableElement]>;
 }
 
 // @public (undocumented)

Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,11 @@ export class CdkVirtualScrollableElement extends CdkVirtualScrollable {`
`27`	`27`	`) {`
`28`	`28`	`super(elementRef, scrollDispatcher, ngZone, dir);`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+ getBoundingClientRectWithScrollOffset(from: 'left' \| 'top' \| 'right' \| 'bottom'): number {`
	`32`	`+ return (`
	`33`	`+ this.getElementRef().nativeElement.getBoundingClientRect()[from] -`
	`34`	`+ this.measureScrollOffset(from)`
	`35`	`+ );`
	`36`	`+ }`
`30`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,4 +28,6 @@ export abstract class CdkVirtualScrollable extends CdkScrollable {`
`28`	`28`	`const viewportEl = this.elementRef.nativeElement;`
`29`	`29`	`return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;`
`30`	`30`	`}`
	`31`	`+`
	`32`	`+ abstract getBoundingClientRectWithScrollOffset(from: 'left' \| 'top' \| 'right' \| 'bottom'): number;`
`31`	`33`	`}`