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

multiblock defaults & resize handler

Browse Source
This commit is contained in:
Mononaut 2024-10-17 09:47:35 +00:00
parent 2e665d57ac
commit 6928c0aa87
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/app/components/eight-mempool/eight-mempool.component.ts
View File

@ -1,10 +1,9 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { catchError } from 'rxjs/operators'; import { Subscription } from 'rxjs';
import { Subject, Subscription, of } from 'rxjs';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { WebsocketService } from '../../services/websocket.service'; import { WebsocketService } from '../../services/websocket.service';
import { BlockExtended, TransactionStripped } from '../../interfaces/node-api.interface'; import { TransactionStripped } from '../../interfaces/node-api.interface';
import { ApiService } from '../../services/api.service'; import { ApiService } from '../../services/api.service';
import { detectWebGL } from '../../shared/graphs.utils'; import { detectWebGL } from '../../shared/graphs.utils';
import { animate, style, transition, trigger } from '@angular/animations'; import { animate, style, transition, trigger } from '@angular/animations';
@ -61,6 +60,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
lastBlockHeight: number = 0; lastBlockHeight: number = 0;
lastBlockHeightUpdate: number[] = []; lastBlockHeightUpdate: number[] = [];
numBlocks: number = 8; numBlocks: number = 8;
autoNumBlocks: boolean = false;
blockIndices: number[] = []; blockIndices: number[] = [];
autofit: boolean = false; autofit: boolean = false;
padding: number = 0; padding: number = 0;
@ -148,17 +148,25 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
}); });
this.queryParamsSubscription = this.route.queryParams.subscribe((params) => { this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
this.numBlocks = Number.isInteger(Number(params.numBlocks)) ? Number(params.numBlocks) : 8;
this.blockIndices = [...Array(this.numBlocks).keys()];
this.lastBlockHeightUpdate = this.blockIndices.map(() => 0);
this.autofit = params.autofit !== 'false'; this.autofit = params.autofit !== 'false';
this.blockWidth = Number.isInteger(Number(params.blockWidth)) ? Number(params.blockWidth) : 540; this.numBlocks = Number.isInteger(Number(params.numBlocks)) ? Number(params.numBlocks) : 0;
this.padding = Number.isInteger(Number(params.padding)) ? Number(params.padding) : 0; this.blockWidth = Number.isInteger(Number(params.blockWidth)) ? Number(params.blockWidth) : 320;
this.padding = Number.isInteger(Number(params.padding)) ? Number(params.padding) : 4;
this.wrapBlocks = params.wrap !== 'false'; this.wrapBlocks = params.wrap !== 'false';
this.stagger = Number.isInteger(Number(params.stagger)) ? Number(params.stagger) : 0; this.stagger = Number.isInteger(Number(params.stagger)) ? Number(params.stagger) : 0;
this.animationDuration = Number.isInteger(Number(params.animationDuration)) ? Number(params.animationDuration) : 2000; this.animationDuration = Number.isInteger(Number(params.animationDuration)) ? Number(params.animationDuration) : 2000;
this.animationOffset = 0; this.animationOffset = 0;
if (!this.numBlocks) {
this.autoNumBlocks = true;
const width = window.innerWidth;
const height = window.innerHeight;
this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
}
this.blockIndices = [...Array(this.numBlocks).keys()];
this.lastBlockHeightUpdate = this.blockIndices.map(() => 0);
if (this.autofit) { if (this.autofit) {
this.resolution = bestFitResolution(76, 96, this.blockWidth - this.padding * 2); this.resolution = bestFitResolution(76, 96, this.blockWidth - this.padding * 2);
} else { } else {
@ -189,6 +197,34 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
} }
} }
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
if (this.autoNumBlocks) {
this.autoNumBlocks = true;
const width = window.innerWidth;
const height = window.innerHeight;
this.numBlocks = Math.floor(width / this.blockWidth) * Math.floor(height / this.blockWidth);
this.blockIndices = [...Array(this.numBlocks).keys()];
this.lastBlockHeightUpdate = this.blockIndices.map(() => 0);
if (this.autofit) {
this.resolution = bestFitResolution(76, 96, this.blockWidth - this.padding * 2);
} else {
this.resolution = 86;
}
this.wrapperStyle = {
'--block-width': this.blockWidth + 'px',
width: this.blockWidth + 'px',
height: this.blockWidth + 'px',
maxWidth: this.blockWidth + 'px',
margin: (this.padding || 0) +'px ',
};
this.websocketService.startTrackMempoolBlocks(this.blockIndices);
}
}
ngOnDestroy(): void { ngOnDestroy(): void {
this.stateService.markBlock$.next({}); this.stateService.markBlock$.next({});
this.blockSub.unsubscribe(); this.blockSub.unsubscribe();

1
frontend/src/styles.scss
View File

@ -121,7 +121,6 @@ html, body {
body { body {
background-color: var(--active-bg); background-color: var(--active-bg);
padding-bottom: 60px;
} }
.container { .container {