@@ -43,8 +43,10 @@ import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-s
4343 preserveWhitespaces : false ,
4444} )
4545export class CdkVirtualScrollViewport implements OnInit , DoCheck , OnDestroy {
46- private _disconnectSubject = new Subject < void > ( ) ;
46+ /** Emits when the viewport is detached from a CdkVirtualForOf. */
47+ private _detachedSubject = new Subject < void > ( ) ;
4748
49+ /** Emits when the rendered range changes. */
4850 private _renderedRangeSubject = new Subject < Range > ( ) ;
4951
5052 /** The direction the viewport scrolls. */
@@ -53,73 +55,101 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
5355 /** The element that wraps the rendered content. */
5456 @ViewChild ( 'contentWrapper' ) _contentWrapper : ElementRef ;
5557
56- /** The total size of all content, including content that is not currently rendered. */
57- get totalContentSize ( ) { return this . _totalContentSize ; }
58- set totalContentSize ( size : number ) {
58+ /** A stream that emits whenever the rendered range changes. */
59+ renderedRangeStream : Observable < Range > = this . _renderedRangeSubject . asObservable ( ) ;
60+
61+ /**
62+ * The total size of all content (in pixels), including content that is not currently rendered.
63+ */
64+ _totalContentSize = 0 ;
65+
66+ /** The transform used to offset the rendered content wrapper element. */
67+ _renderedContentTransform : string ;
68+
69+ /** The currently rendered range of indices. */
70+ private _renderedRange : Range = { start : 0 , end : 0 } ;
71+
72+ /** The length of the data bound to this viewport (in number of items). */
73+ private _dataLength = 0 ;
74+
75+ /** The size of the viewport (in pixels). */
76+ private _viewportSize = 0 ;
77+
78+ /** Whether this viewport is attached to a CdkVirtualForOf. */
79+ private _isAttached = false ;
80+
81+ /**
82+ * The scroll handling status.
83+ * needed - The scroll state needs to be updated, but a check hasn't yet been scheduled.
84+ * pending - The scroll state needs to be updated, and an update has already been scheduled.
85+ * done - The scroll state does not need to be updated.
86+ */
87+ private _scrollHandledStatus : 'needed' | 'pending' | 'done' = 'done' ;
88+
89+ constructor ( public elementRef : ElementRef , private _changeDetectorRef : ChangeDetectorRef ,
90+ private _ngZone : NgZone ,
91+ @Inject ( VIRTUAL_SCROLL_STRATEGY ) private _scrollStrategy : VirtualScrollStrategy ) { }
92+
93+ /** Gets the length of the data bound to this viewport (in number of items). */
94+ getDataLength ( ) : number {
95+ return this . _dataLength ;
96+ }
97+
98+ /** Gets the size of the viewport (in pixels). */
99+ getViewportSize ( ) : number {
100+ return this . _viewportSize ;
101+ }
102+
103+ // TODO(mmalebra): Consider calling `detectChanges()` directly rather than the methods below.
104+
105+ /**
106+ * Sets the total size of all content (in pixels), including content that is not currently
107+ * rendered.
108+ */
109+ setTotalContentSize ( size : number ) {
59110 if ( this . _totalContentSize != size ) {
111+ // Re-enter the Angular zone so we can mark for change detection.
60112 this . _ngZone . run ( ( ) => {
61113 this . _totalContentSize = size ;
62114 this . _changeDetectorRef . markForCheck ( ) ;
63115 } ) ;
64116 }
65117 }
66- private _totalContentSize = 0 ;
67118
68- /** The currently rendered range of indices. */
69- get renderedRange ( ) { return this . _renderedRange ; }
70- set renderedRange ( range : Range ) {
119+ /** Sets the currently rendered range of indices. */
120+ setRenderedRange ( range : Range ) {
71121 if ( ! this . _rangesEqual ( this . _renderedRange , range ) ) {
122+ // Re-enter the Angular zone so we can mark for change detection.
72123 this . _ngZone . run ( ( ) => {
73124 this . _renderedRangeSubject . next ( this . _renderedRange = range ) ;
74125 this . _changeDetectorRef . markForCheck ( ) ;
75126 } ) ;
76127 }
77128 }
78- private _renderedRange : Range = { start : 0 , end : 0 } ;
79129
80- /** The offset of the rendered portion of the data from the start. */
81- get renderedContentOffset ( ) : number { return this . _renderedContentOffset ; }
82- set renderedContentOffset ( offset : number ) {
83- if ( this . _renderedContentOffset != offset ) {
130+ /** Sets the offset of the rendered portion of the data from the start (in pixels). */
131+ setRenderedContentOffset ( offset : number ) {
132+ const transform =
133+ this . orientation === 'horizontal' ? `translateX(${ offset } : `translateY(${ offset } ;
134+ if ( this . _renderedContentTransform != transform ) {
135+ // Re-enter the Angular zone so we can mark for change detection.
84136 this . _ngZone . run ( ( ) => {
85- this . _renderedContentOffset = offset ;
86- this . _renderedContentTransform = this . orientation === 'horizontal' ?
87- `translateX(${ offset } : `translateY(${ offset } ;
137+ this . _renderedContentTransform = transform ;
88138 this . _changeDetectorRef . markForCheck ( ) ;
89139 } ) ;
90140 }
91141 }
92- private _renderedContentOffset = 0 ;
93-
94- /** The length of the data connected to this viewport. */
95- get dataLength ( ) { return this . _dataLength ; }
96- private _dataLength = 0 ;
97-
98- /** The size of the viewport. */
99- get viewportSize ( ) { return this . _viewportSize ; }
100- private _viewportSize = 0 ;
101-
102- /** A stream that emits whenever the rendered range changes. */
103- renderedRangeStream : Observable < Range > = this . _renderedRangeSubject . asObservable ( ) ;
104-
105- _renderedContentTransform : string ;
106-
107- private _connected = false ;
108-
109- private _scrollHandledStatus : 'needed' | 'pending' | 'done' = 'done' ;
110-
111- constructor ( public elementRef : ElementRef , private _changeDetectorRef : ChangeDetectorRef ,
112- private _ngZone : NgZone ,
113- @Inject ( VIRTUAL_SCROLL_STRATEGY ) private _scrollStrategy : VirtualScrollStrategy ) { }
114142
115- /** Connect a `CdkVirtualForOf` to this viewport. */
116- connect ( forOf : CdkVirtualForOf < any > ) {
117- if ( this . _connected ) {
118- throw Error ( 'CdkVirtualScrollViewport is already connected .' ) ;
143+ /** Attaches a `CdkVirtualForOf` to this viewport. */
144+ attach ( forOf : CdkVirtualForOf < any > ) {
145+ if ( this . _isAttached ) {
146+ throw Error ( 'CdkVirtualScrollViewport is already attached .' ) ;
119147 }
120148
121- this . _connected = true ;
122- forOf . dataStream . pipe ( takeUntil ( this . _disconnectSubject ) ) . subscribe ( data => {
149+ this . _isAttached = true ;
150+ // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
151+ // changes.
152+ forOf . dataStream . pipe ( takeUntil ( this . _detachedSubject ) ) . subscribe ( data => {
123153 const len = data . length ;
124154 if ( len != this . _dataLength ) {
125155 this . _dataLength = len ;
@@ -128,13 +158,13 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
128158 } ) ;
129159 }
130160
131- /** Disconnect the current `CdkVirtualForOf`. */
132- disconnect ( ) {
133- this . _connected = false ;
134- this . _disconnectSubject . next ( ) ;
161+ /** Detaches the current `CdkVirtualForOf`. */
162+ detach ( ) {
163+ this . _isAttached = false ;
164+ this . _detachedSubject . next ( ) ;
135165 }
136166
137- /** Gets the current scroll offset of the viewport. */
167+ /** Gets the current scroll offset of the viewport (in pixels) . */
138168 measureScrollOffset ( ) {
139169 return this . orientation === 'horizontal' ?
140170 this . elementRef . nativeElement . scrollLeft : this . elementRef . nativeElement . scrollTop ;
@@ -164,23 +194,26 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
164194 }
165195
166196 ngOnDestroy ( ) {
167- this . disconnect ( ) ;
197+ this . detach ( ) ;
168198 this . _scrollStrategy . detach ( ) ;
169199
170200 // Complete all subjects
171- this . _disconnectSubject . complete ( ) ;
201+ this . _detachedSubject . complete ( ) ;
172202 this . _renderedRangeSubject . complete ( ) ;
173203 }
174204
205+ /** Marks that a scroll event happened and that the scroll state should be checked. */
175206 private _markScrolled ( ) {
176207 if ( this . _scrollHandledStatus === 'done' ) {
208+ // Re-enter the Angular zone so we can mark for change detection.
177209 this . _ngZone . run ( ( ) => {
178210 this . _scrollHandledStatus = 'needed' ;
179211 this . _changeDetectorRef . markForCheck ( ) ;
180212 } ) ;
181213 }
182214 }
183215
216+ /** Checks if the given ranges are equal. */
184217 private _rangesEqual ( r1 : Range , r2 : Range ) : boolean {
185218 return r1 . start == r2 . start && r1 . end == r2 . end ;
186219 }
0 commit comments