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

Dynamically resize blockchain to fit container

Browse source
This commit is contained in:
Mononaut 2023-08-22 23:08:36 +09:00
parent c8100712e8
commit 975ba653a2
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
3 changed files with 47 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { firstValueFrom, Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
@ -8,12 +8,13 @@ import { StateService } from '../../services/state.service';
styleUrls: ['./blockchain.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainComponent implements OnInit, OnDestroy {
export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
@Input() pages: any[] = [];
@Input() pageIndex: number;
@Input() blocksPerPage: number = 8;
@Input() minScrollWidth: number = 0;
@Input() scrollableMempool: boolean = false;
@Input() containerWidth: number;
@Output() mempoolOffsetChange: EventEmitter<number> = new EventEmitter();
@ -85,19 +86,25 @@ export class BlockchainComponent implements OnInit, OnDestroy {
this.mempoolOffsetChange.emit(this.mempoolOffset);
}
@HostListener('window:resize', ['$event'])
ngOnChanges(changes: SimpleChanges): void {
if (changes.containerWidth) {
this.onResize();
}
}
onResize(): void {
if (window.innerWidth >= 768) {
const width = this.containerWidth || window.innerWidth;
if (width >= 768) {
if (this.stateService.isLiquid()) {
this.dividerOffset = 420;
} else {
this.dividerOffset = window.innerWidth * 0.5;
this.dividerOffset = width * 0.5;
}
} else {
if (this.stateService.isLiquid()) {
this.dividerOffset = window.innerWidth * 0.5;
this.dividerOffset = width * 0.5;
} else {
this.dividerOffset = window.innerWidth * 0.95;
this.dividerOffset = width * 0.95;
}
}
this.cd.markForCheck();

12
frontend/src/app/components/start/start.component.html
View file

@ -10,7 +10,7 @@
<div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
<div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr">
<div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr" #blockchainWrapper>
<div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
(mousedown)="onMouseDown($event)"
(pointerdown)="onPointerDown($event)"
@ -18,7 +18,15 @@
(dragstart)="onDragStart($event)"
(scroll)="onScroll($event)"
>
<app-blockchain [pageIndex]="pageIndex" [pages]="pages" [blocksPerPage]="blocksPerPage" [minScrollWidth]="minScrollWidth" [scrollableMempool]="true" (mempoolOffsetChange)="onMempoolOffsetChange($event)"></app-blockchain>
<app-blockchain
[containerWidth]="chainWidth"
[pageIndex]="pageIndex"
[pages]="pages"
[blocksPerPage]="blocksPerPage"
[minScrollWidth]="minScrollWidth"
[scrollableMempool]="true"
(mempoolOffsetChange)="onMempoolOffsetChange($event)"
></app-blockchain>
</div>
<div class="reset-scroll" [class.hidden]="pageIndex === 0" (click)="resetScroll()">
<fa-icon [icon]="['fas', 'circle-left']" [fixedWidth]="true"></fa-icon>

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

@ -28,6 +28,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
lastMark: MarkBlockState;
markBlockSubscription: Subscription;
blockCounterSubscription: Subscription;
@ViewChild('blockchainWrapper', { static: true }) blockchainWrapper: ElementRef;
@ViewChild('blockchainContainer') blockchainContainer: ElementRef;
resetScrollSubscription: Subscription;
@ -49,6 +50,9 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
velocity: number = 0;
mempoolOffset: number = 0;
private resizeObserver: ResizeObserver;
chainWidth: number = window.innerWidth;
constructor(
private stateService: StateService,
) {
@ -70,10 +74,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
this.onResize();
this.onResize(this.chainWidth);
}
});
this.onResize();
this.onResize(this.chainWidth);
this.updatePages();
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
@ -151,6 +155,16 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
this.stateService.resetScroll$.next(false);
}
});
if ('ResizeObserver' in window && this.blockchainWrapper?.nativeElement) {
this.resizeObserver = new ResizeObserver(entries => {
const newChainWidth = entries[0].contentRect.width;
if (newChainWidth != this.chainWidth) {
this.onResize(newChainWidth);
}
});
this.resizeObserver.observe(this.blockchainWrapper.nativeElement);
}
}
onMempoolOffsetChange(offset): void {
@ -171,9 +185,9 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
}
}
@HostListener('window:resize', ['$event'])
onResize(): void {
this.isMobile = window.innerWidth <= 767.98;
onResize(width): void {
this.chainWidth = width;
this.isMobile = this.chainWidth <= 767.98;
let firstVisibleBlock;
let offset;
if (this.blockchainContainer?.nativeElement != null) {
@ -188,7 +202,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
});
}
this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth);
this.blocksPerPage = Math.ceil(this.chainWidth / this.blockWidth);
this.pageWidth = this.blocksPerPage * this.blockWidth;
this.minScrollWidth = this.firstPageWidth + (this.pageWidth * 2);
@ -295,7 +309,7 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
onScroll(e) {
const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];
// compensate for css transform
const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5);
const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation;
const scrollLeft = this.getConvertedScrollOffset();
@ -414,10 +428,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
blockInViewport(height: number): boolean {
const firstHeight = this.pages[0].height;
const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
const translation = (this.isMobile ? this.chainWidth * 0.95 : this.chainWidth * 0.5);
const firstX = this.pages[0].offset - this.getConvertedScrollOffset() + translation;
const xPos = firstX + ((firstHeight - height) * 155);
return xPos > -55 && xPos < (window.innerWidth - 100);
return xPos > -55 && xPos < (this.chainWidth - 100);
}
getConvertedScrollOffset(): number {