mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-22 22:25:34 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4021 from mempool/mononaut/blockchain-scroll

Browse source 
apply blockchain scroll offset as soon as element is ready
This commit is contained in:
softsimon 2023-07-22 14:32:42 +09:00 • committed by GitHub
commit a24d2ce547
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/components/blockchain/blockchain.component.ts
View file

@ -82,9 +82,7 @@ export class BlockchainComponent implements OnInit, OnDestroy {
} }
this.mempoolOffset = Math.max(0, width - this.dividerOffset); this.mempoolOffset = Math.max(0, width - this.dividerOffset);
this.cd.markForCheck(); this.cd.markForCheck();
setTimeout(() => { this.mempoolOffsetChange.emit(this.mempoolOffset);
this.mempoolOffsetChange.emit(this.mempoolOffset);
}, 0);
} }
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])

7
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View file

@ -31,6 +31,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
@Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`; @Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;
@Input() allBlocks: boolean = false; @Input() allBlocks: boolean = false;
mempoolWidth: number = 0;
@Output() widthChange: EventEmitter<number> = new EventEmitter(); @Output() widthChange: EventEmitter<number> = new EventEmitter();
specialBlocks = specialBlocks; specialBlocks = specialBlocks;
@ -155,7 +156,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
}), }),
tap(() => { tap(() => {
this.cd.markForCheck(); this.cd.markForCheck();
this.widthChange.emit(this.containerOffset + this.mempoolBlocks.length * this.blockOffset); const width = this.containerOffset + this.mempoolBlocks.length * this.blockOffset;
if (this.mempoolWidth !== width) {
this.mempoolWidth = width;
this.widthChange.emit(this.mempoolWidth);
}
}) })
); );

14
frontend/src/app/components/start/start.component.ts
View file

@ -1,4 +1,4 @@
import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input } from '@angular/core'; import { Component, ElementRef, HostListener, OnInit, OnDestroy, ViewChild, Input, DoCheck } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { MarkBlockState, StateService } from '../../services/state.service'; import { MarkBlockState, StateService } from '../../services/state.service';
import { specialBlocks } from '../../app.constants'; import { specialBlocks } from '../../app.constants';
@ -9,7 +9,7 @@ import { BlockExtended } from '../../interfaces/node-api.interface';
templateUrl: './start.component.html', templateUrl: './start.component.html',
styleUrls: ['./start.component.scss'], styleUrls: ['./start.component.scss'],
}) })
export class StartComponent implements OnInit, OnDestroy { export class StartComponent implements OnInit, OnDestroy, DoCheck {
@Input() showLoadingIndicator = false; @Input() showLoadingIndicator = false;
interval = 60; interval = 60;
@ -43,6 +43,7 @@ export class StartComponent implements OnInit, OnDestroy {
pageIndex: number = 0; pageIndex: number = 0;
pages: any[] = []; pages: any[] = [];
pendingMark: number | null = null; pendingMark: number | null = null;
pendingOffset: number | null = null;
lastUpdate: number = 0; lastUpdate: number = 0;
lastMouseX: number; lastMouseX: number;
velocity: number = 0; velocity: number = 0;
@ -54,6 +55,14 @@ export class StartComponent implements OnInit, OnDestroy {
this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform); this.isiOS = ['iPhone','iPod','iPad'].includes((navigator as any)?.userAgentData?.platform || navigator.platform);
} }
ngDoCheck(): void {
if (this.pendingOffset != null) {
const offset = this.pendingOffset;
this.pendingOffset = null;
this.addConvertedScrollOffset(offset);
}
}
ngOnInit() { ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount); this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => { this.blockCounterSubscription = this.stateService.blocks$.subscribe((blocks) => {
@ -429,6 +438,7 @@ export class StartComponent implements OnInit, OnDestroy {
addConvertedScrollOffset(offset: number): void { addConvertedScrollOffset(offset: number): void {
if (!this.blockchainContainer?.nativeElement) { if (!this.blockchainContainer?.nativeElement) {
this.pendingOffset = offset;
return; return;
} }
if (this.timeLtr) { if (this.timeLtr) {