machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

load block/tx pages at correct blockchain scroll position

Browse Source
This commit is contained in:
Mononaut
2022-12-28 06:05:46 -06:00
parent 32bf30872d
commit bf941b0227
9 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/start/start.component.html
View File

@@ -13,7 +13,7 @@
(dragstart)="onDragStart($event)"
(scroll)="onScroll($event)"
>
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage"></app-blockchain>
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth"></app-blockchain>
</div>
<router-outlet></router-outlet>

20
frontend/src/app/components/start/start.component.ts
View File

@@ -29,8 +29,10 @@ export class StartComponent implements OnInit, OnDestroy {
blocksPerPage: number = 1;
pageWidth: number;
firstPageWidth: number;
minScrollWidth: number;
pageIndex: number = 0;
pages: any[] = [];
pendingMark: number | void = null;
constructor(
private stateService: StateService,
@@ -39,16 +41,27 @@ export class StartComponent implements OnInit, OnDestroy {
ngOnInit() {
this.firstPageWidth = 40 + (this.blockWidth * this.stateService.env.KEEP_BLOCKS_AMOUNT);
this.onResize();
this.updatePages();
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
});
this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
this.chainTip = height;
this.updatePages();
if (this.pendingMark != null) {
this.scrollToBlock(this.pendingMark);
this.pendingMark = null;
}
});
this.markBlockSubscription = this.stateService.markBlock$.subscribe((mark) => {
if (mark?.blockHeight != null && !this.blockInViewport(mark.blockHeight)) {
this.scrollToBlock(mark.blockHeight);
if (mark?.blockHeight != null) {
if (this.chainTip >=0) {
if (!this.blockInViewport(mark.blockHeight)) {
this.scrollToBlock(mark.blockHeight);
}
} else {
this.pendingMark = mark.blockHeight;
}
}
});
this.stateService.blocks$
@@ -96,6 +109,7 @@ export class StartComponent implements OnInit, OnDestroy {
this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth);
this.pageWidth = this.blocksPerPage * this.blockWidth;
this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
if (firstVisibleBlock != null) {
this.scrollToBlock(firstVisibleBlock, offset);
@@ -270,5 +284,7 @@ export class StartComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.timeLtrSubscription.unsubscribe();
this.chainTipSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
}
}