From 2ad34f18f6b950e01d8aef6ae16f8fa667834568 Mon Sep 17 00:00:00 2001 From: "FURA\\gerard" Date: Thu, 11 Jul 2019 14:27:38 +0200 Subject: [PATCH] get set scrollPosition & scroll=0 on reset --- package.json | 6 +- .../virtual-repeat-angular-lib/package.json | 2 +- .../src/lib/virtual-repeat-container.ts | 8 +-- .../src/lib/virtual-repeat.base.ts | 60 +++++++++---------- src/app/app.component.html | 8 ++- src/app/app.component.ts | 46 +++++++++----- 6 files changed, 73 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index 72c79f5..c0c6dac 100644 --- a/package.json +++ b/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", diff --git a/projects/virtual-repeat-angular-lib/package.json b/projects/virtual-repeat-angular-lib/package.json index 6542a40..f449535 100644 --- a/projects/virtual-repeat-angular-lib/package.json +++ b/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ó" }, diff --git a/projects/virtual-repeat-angular-lib/src/lib/virtual-repeat-container.ts b/projects/virtual-repeat-angular-lib/src/lib/virtual-repeat-container.ts index b6453de..1ab04be 100644 --- a/projects/virtual-repeat-angular-lib/src/lib/virtual-repeat-container.ts +++ b/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 { + get scrollPosition$(): Observable { 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(); } diff --git a/projects/virtual-repeat-angular-lib/src/lib/virtual-repeat.base.ts b/projects/virtual-repeat-angular-lib/src/lib/virtual-repeat.base.ts index eb8e365..ea75759 100644 --- a/projects/virtual-repeat-angular-lib/src/lib/virtual-repeat.base.ts +++ b/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 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 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 ); 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 } public reset() { + this._virtualRepeatContainer.scrollPosition = 0; this._collectionLength = -1; this.detachAllViews(); this.requestMeasure.next(); @@ -350,7 +351,7 @@ export abstract class VirtualRepeatBase 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 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 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 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 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 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 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 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 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 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 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 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 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 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}`); } } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 1cdf284..e0504e3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -123,11 +123,15 @@

Images + Current Item: + Go to Item: +   +

- +
@@ -144,7 +148,7 @@

- + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8da4497..cdc6bf3 100644 --- a/src/app/app.component.ts +++ b/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, - public reactiveCollectionFactory: ReactiveCollectionFactory, public reactiveCollection: ReactiveCollectionService ) { 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(); + } }