get set scrollPosition & scroll=0 on reset

package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-repeat-angular-lib-app",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "scripts": {
     "serve": "ng serve",
     "build_prod": "ng build --prod",
@@ -11,8 +11,8 @@
     "build_lib": "ng build --prod virtual-repeat-angular-lib",
     "npm_pack": "cp README.md dist/virtual-repeat-angular-lib && cd dist/virtual-repeat-angular-lib && npm pack && cp *.tgz ../releases/",
     "npm_build_and_package": "npm run build_lib && npm run npm_pack",
-    "npm_publish": "npm publish dist/virtual-repeat-angular-lib/virtual-repeat-angular-0.4.9.tgz",
-    "ngh_publish": "npm run build_lib && ng build --prod --base-href https://gerardcarbo.github.io/virtual-repeat-angular/ && ngh --dir dist/virtual-repeat-angular-lib-app",
+    "npm_publish": "npm publish dist/virtual-repeat-angular-lib/virtual-repeat-angular-0.4.10.tgz",
+    "ngh_publish": "ng build --prod --base-href https://gerardcarbo.github.io/virtual-repeat-angular/ && ngh --dir dist/virtual-repeat-angular-lib-app",
     "git_push": "git push origin master",
     "git_push_force": "git push -f origin master",
     "git_ammend": "git commit --amend --all --no-edit",

projects/virtual-repeat-angular-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-repeat-angular",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "author": {
     "name": "Gerard Carbó"
   },

projects/virtual-repeat-angular-lib/src/lib/virtual-repeat-container.ts

@@ -92,7 +92,7 @@ export class VirtualRepeatContainer implements AfterViewInit, OnDestroy {
    * current scroll position.
    */
   @Output()
-  get scrollPosition(): Observable<number> {
+  get scrollPosition$(): Observable<number> {
     return this._scrollPosition.asObservable();
   }
 
@@ -126,7 +126,7 @@ export class VirtualRepeatContainer implements AfterViewInit, OnDestroy {
   }
 
   @Input()
-  set newScrollPosition(p: number) {
+  set scrollPosition(p: number) {
     // this.logger.log('p', p);
     this.listContainer.nativeElement.scrollTop = p;
     // if list-holder has no height at the certain time. scrollTop will not be set.
@@ -230,7 +230,7 @@ export class VirtualRepeatContainer implements AfterViewInit, OnDestroy {
     );
 
     this._subscription.add(
-      this.scrollPosition
+      this.scrollPosition$
         .pipe(
           tap(() => {
             if (this._currentScrollState === SCROLL_STATE.IDLE) {
@@ -286,7 +286,7 @@ export class VirtualRepeatContainer implements AfterViewInit, OnDestroy {
   }
 
   reset() {
-    this.newScrollPosition = 0;
+    this.scrollPosition = 0;
     this._virtualRepeat.reset();
   }
 

projects/virtual-repeat-angular-lib/src/lib/virtual-repeat.base.ts

@@ -37,7 +37,7 @@ export class VirtualRepeatRow {
     public $implicit: any,
     public index: number,
     public count: number
-  ) {}
+  ) { }
 
   get first(): boolean {
     return this.index === 0;
@@ -168,7 +168,7 @@ export abstract class VirtualRepeatBase<T>
     filter(() => {
       this.logger.log(
         `requestMeasureFiltered: enter isInMeasure: ` +
-          `${this._isInMeasure} isInLayout: ${this._isInLayout}`
+        `${this._isInMeasure} isInLayout: ${this._isInLayout}`
       );
       if (this._isInMeasure || this._isInLayout) {
         this.logger.log('requestMeasureFiltered: retrying...');
@@ -188,7 +188,7 @@ export abstract class VirtualRepeatBase<T>
     filter(() => {
       this.logger.log(
         `requestLayoutFiltered: enter isInMeasure: ${
-          this._isInMeasure
+        this._isInMeasure
         } isInLayout: ${this._isInLayout}`
       );
       if (this._isInMeasure || this._isInLayout) {
@@ -238,14 +238,14 @@ export abstract class VirtualRepeatBase<T>
     );
 
     this._subscription.add(
-      this._virtualRepeatContainer.scrollPosition
+      this._virtualRepeatContainer.scrollPosition$
         .pipe(
           debounceTime(60),
           filter(scrollY => {
             return (
               scrollY === 0 ||
               Math.abs(scrollY - this._scrollY) >=
-                (this._virtualRepeatContainer.getRowHeight() * this._guardItems) / 2
+              (this._virtualRepeatContainer.getRowHeight() * this._guardItems) / 2
             );
           })
         )
@@ -282,6 +282,7 @@ export abstract class VirtualRepeatBase<T>
   }
 
   public reset() {
+    this._virtualRepeatContainer.scrollPosition = 0;
     this._collectionLength = -1;
     this.detachAllViews();
     this.requestMeasure.next();
@@ -350,7 +351,7 @@ export abstract class VirtualRepeatBase<T>
     this._lastItemIndex = this._lastRequestedItemIndex;
     this.logger.log(
       `findRequestedIndexesRange: _autoHeightVariable: ${
-        this._virtualRepeatContainer._autoHeightVariable
+      this._virtualRepeatContainer._autoHeightVariable
       } firstItemPosition: ${this._firstItemIndex}`
     );
 
@@ -360,7 +361,7 @@ export abstract class VirtualRepeatBase<T>
 
       firstPosition = Math.floor(
         this._collectionLength *
-          (this._scrollY / this._virtualRepeatContainer.holderHeight)
+        (this._scrollY / this._virtualRepeatContainer.holderHeight)
       );
       let lastPosition =
         Math.ceil(
@@ -375,13 +376,12 @@ export abstract class VirtualRepeatBase<T>
         this._collectionLength - 1
       );
       this.logger.log(
-        `findRequestedIndexesRange: _autoHeightVariable scrollY: ${
-          this._scrollY
-        } holderHeight: ${this._virtualRepeatContainer.holderHeight}`
+        `findRequestedIndexesRange: _autoHeightVariable scrollY: 
+        ${this._scrollY} holderHeight: ${this._virtualRepeatContainer.holderHeight}`
       );
       this.logger.log(
         `findRequestedIndexesRange: _autoHeightVariable firstRequestedItemPosition: ${
-          this._firstRequestedItemIndex
+        this._firstRequestedItemIndex
         } lastRequestedItemPosition: ${this._lastRequestedItemIndex}`
       );
     } else {
@@ -393,7 +393,7 @@ export abstract class VirtualRepeatBase<T>
       let lastPosition =
         Math.ceil(
           (this._containerHeight + firstPositionOffset) /
-            this._virtualRepeatContainer.getRowHeight()
+          this._virtualRepeatContainer.getRowHeight()
         ) + firstPosition;
       this._firstRequestedItemIndex = Math.max(
         firstPosition - this._guardItems,
@@ -411,12 +411,12 @@ export abstract class VirtualRepeatBase<T>
         this._firstRequestedItemIndex * this._virtualRepeatContainer.getRowHeight();
       this.logger.log(
         `findRequestedIndexesRange: translateY: ${
-          this._virtualRepeatContainer.translateY
+        this._virtualRepeatContainer.translateY
         } rowHeight: ${this._virtualRepeatContainer.getRowHeight()}`
       );
       this.logger.log(
         `findRequestedIndexesRange: firstRequestedItemPosition: ${
-          this._firstRequestedItemIndex
+        this._firstRequestedItemIndex
         } lastRequestedItemPosition: ${this._lastRequestedItemIndex}`
       );
     }
@@ -465,12 +465,12 @@ export abstract class VirtualRepeatBase<T>
       this._fullScroll = false;
       this.logger.log(
         `createViews: length > 0, _firstItemPosition: ${
-          this._firstItemIndex
+        this._firstItemIndex
         } _lastItemPosition: ${this._lastItemIndex}`
       );
       this.logger.log(
         `createViews: length > 0, _firstRequestedItemPosition: ${
-          this._firstRequestedItemIndex
+        this._firstRequestedItemIndex
         } _lastRequestedItemPosition: ${this._lastRequestedItemIndex}`
       );
       for (
@@ -524,9 +524,9 @@ export abstract class VirtualRepeatBase<T>
   protected createViewForItem(index: number, item: T): ViewRef {
     this.logger.log(
       `createViewForItem: _firstItemPosition: ${
-        this._firstItemIndex
+      this._firstItemIndex
       } _firstRequestedItemPosition: ${this._firstRequestedItemIndex} length: ${
-        this._viewContainerRef.length
+      this._viewContainerRef.length
       }`
     );
     let containerPos = index - (this._firstItemIndex || 0);
@@ -638,7 +638,7 @@ export abstract class VirtualRepeatBase<T>
       viewContent.style.display = 'none'; // will be shown when processing finished
       this.logger.log(
         `applyStyles: _autoHeightVariable creaded view on ${index} recycled: ${
-          view.context.recycled
+        view.context.recycled
         }`
       );
     }
@@ -672,7 +672,7 @@ export abstract class VirtualRepeatBase<T>
       if (this._virtualRepeatContainer._autoHeightVariable) {
         this.logger.log(
           `dispatchLayout: _autoHeightVariable enter ${
-            this._viewContainerRef.length
+          this._viewContainerRef.length
           }`
         );
         // show / recycle views in _autoHeightVariable mode
@@ -689,7 +689,7 @@ export abstract class VirtualRepeatBase<T>
             viewElement.style.display = view.context.previousDisplay;
             this.logger.log(
               `dispatchLayout: _autoHeightVariable showing ${
-                view.context.index
+              view.context.index
               }`
             );
           }
@@ -699,7 +699,7 @@ export abstract class VirtualRepeatBase<T>
             this._viewContainerRef.detach(containerIndex);
             this.logger.log(
               `dispatchLayout: _autoHeightVariable removing ${
-                view.context.index
+              view.context.index
               } recycler lenght: ${this._recycler.length()}`
             );
             containerIndex--;
@@ -758,7 +758,7 @@ export abstract class VirtualRepeatBase<T>
         this._virtualRepeatContainer._autoHeightVariable = true;
         this.logger.log(
           'dispatchLayout: autoHeightVariable rowHeight updated ' +
-            this._virtualRepeatContainer.getRowHeight()
+          this._virtualRepeatContainer.getRowHeight()
         );
       }
 
@@ -782,7 +782,7 @@ export abstract class VirtualRepeatBase<T>
           let translateY =
             this._virtualRepeatContainer.translateY +
             (this._virtualRepeatContainer.currentScrollState ===
-            SCROLL_STATE.SCROLLING_DOWN
+              SCROLL_STATE.SCROLLING_DOWN
               ? totalRemovedHeight
               : -totalAddedHeight);
           // check out of scroll
@@ -801,16 +801,10 @@ export abstract class VirtualRepeatBase<T>
           this._virtualRepeatContainer.translateY = 0;
         }
 
-        this.logger.log(`dispatchLayout: _autoHeightVariable rowHeight:${
-          this._virtualRepeatContainer.getRowHeight()
-        }
-                         scrollY: ${this._scrollY} scrollState: ${
-          this._virtualRepeatContainer.currentScrollState
-        }
+        this.logger.log(`dispatchLayout: _autoHeightVariable rowHeight: ${this._virtualRepeatContainer.getRowHeight()}
+                         scrollY: ${this._scrollY} scrollState: ${this._virtualRepeatContainer.currentScrollState}
                          totalRemovedHeight: ${totalRemovedHeight} totalAddedHeight: ${totalAddedHeight}
-                         translateY: ${
-                           this._virtualRepeatContainer.translateY
-                         }`);
+                         translateY: ${this._virtualRepeatContainer.translateY}`);
       }
     }
   }

src/app/app.component.html

@@ -123,11 +123,15 @@ <h2>
           <input type="checkbox" name="showReactiveImages" [(ngModel)]="config.showReactiveImages" (change)="onChange()">Images</label>
         <label style="float: right" *ngIf="config.showReactive">
           <input type="checkbox" [formControl]="tableViewReactive" [(ngModel)]="config.tableViewReactive" (change)="onChange()">Table View (variable height)</label>
+          Current Item: <input type="number" readonly style="max-width: 50px" [ngModel]="reactivePosition">
+          Go to Item: <input type="number" style="max-width: 50px" [(ngModel)]="reactivePositionGoto" (change)="gotoReactivePosition()">
+          &nbsp;<input type="button" (click)="resetReactive()" value="reset">
+
       </h2>
       <div class="display_flex flex vbox box-shadow" *ngIf="config.showReactive">
         <div class="expand" *ngIf="!config.tableViewReactive">
           <gc-virtual-repeat-container rowHeight="auto" #reactiveVirtualRepeatContainerList>
-            <list-item-example *virtualRepeatReactive="let row of reactiveCollectionFactory; let i = index" [item]="row" [index]="i" [showImage]="config.showReactiveImages">
+            <list-item-example *virtualRepeatReactive="let row of reactiveCollection; let i = index" [item]="row" [index]="i" [showImage]="config.showReactiveImages">
             </list-item-example>
           </gc-virtual-repeat-container>
         </div>
@@ -144,7 +148,7 @@ <h2>
                 </tr>
               </thead>
               <tbody>
-                <tr *virtualRepeatReactive="let row of reactiveCollectionFactory; let i = index">
+                <tr *virtualRepeatReactive="let row of reactiveCollection; let i = index">
                   <td *ngIf="config.showReactiveImages" style="width:10%">
                     <img src='{{row.thumbnailUrl}}' height="48px">
                   </td>

src/app/app.component.ts

@@ -29,25 +29,29 @@ export class AppComponent implements OnInit {
     showReactiveImages: true
   };
 
-  @ViewChild('reactiveVirtualRepeatContainerList', {static: true})
+  @ViewChild('reactiveVirtualRepeatContainerList', { static: false })
   reactiveVirtualRepeatContainerList: VirtualRepeatContainer;
-  @ViewChild('reactiveVirtualRepeatContainerTable', {static: true})
+  @ViewChild('reactiveVirtualRepeatContainerTable', { static: false })
   reactiveVirtualRepeatContainerTable: VirtualRepeatContainer;
 
+  currentReactiveVirtualRepeatContainer: VirtualRepeatContainer;
+
   tableViewReactive = new FormControl('');
 
   collection: { id: number; image: string; content: string }[] = [];
-  public processing = false;
 
+  public processing = false;
   public version: string = environment.VERSION;
+  public reactivePosition: number;
+  public reactivePositionGoto: number;
 
   constructor(
     public asynchCollection: AsynchCollectionService<any>,
-    public reactiveCollectionFactory: ReactiveCollectionFactory<any>,
     public reactiveCollection: ReactiveCollectionService<any>
   ) {
     this.config =
       JSON.parse(localStorage.getItem('AppComponentConfig')) || this.config;
+    this.reactiveCollection.connect();
   }
 
   ngOnInit(): void {
@@ -58,30 +62,44 @@ export class AppComponent implements OnInit {
     // capture processing$ notifications to display loading progress (only in reactive for demo purposes)
     this.tableViewReactive.valueChanges.subscribe((viewTable: boolean) => {
       if (viewTable) {
+        this.reactiveCollection.reset();
         setTimeout(() => {
           if (this.reactiveVirtualRepeatContainerTable) {
-            this.reactiveVirtualRepeatContainerTable.processing$.subscribe(
-              (processing: boolean) => {
-                this.processing = processing;
-              }
-            );
+            this.currentReactiveVirtualRepeatContainer = this.reactiveVirtualRepeatContainerTable;
+            this.subscribeToReactiveData();
           }
         }, 100);
       } else {
+        this.reactiveCollection.reset();
         setTimeout(() => {
           if (this.reactiveVirtualRepeatContainerList) {
-            this.reactiveVirtualRepeatContainerList.processing$.subscribe(
-              (processing: boolean) => {
-                this.processing = processing;
-              }
-            );
+            this.currentReactiveVirtualRepeatContainer = this.reactiveVirtualRepeatContainerList;
+            this.subscribeToReactiveData();
           }
         }, 100);
       }
     });
   }
 
+  private subscribeToReactiveData() {
+    this.currentReactiveVirtualRepeatContainer.processing$.subscribe((processing: boolean) => {
+      this.processing = processing;
+    });
+    this.currentReactiveVirtualRepeatContainer.scrollPosition$.subscribe((position: number) => {
+      this.reactivePosition = Math.round(position / this.currentReactiveVirtualRepeatContainer.getRowHeight());
+    });
+  }
+
   onChange() {
     localStorage.setItem('AppComponentConfig', JSON.stringify(this.config));
   }
+
+  resetReactive() {
+    this.reactiveCollection.reset();
+  }
+
+  gotoReactivePosition() {
+    this.currentReactiveVirtualRepeatContainer.scrollPosition =
+      this.reactivePositionGoto * this.currentReactiveVirtualRepeatContainer.getRowHeight();
+  }
 }