mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Fix canvas resolution on high-DPI screens

Browse Source
This commit is contained in:
Mononaut 2022-06-12 18:15:30 +00:00
parent 5314eb2d45
commit 1f6b59f2f5
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/components/mempool-block-overview/block-scene.ts
View File

@ -27,15 +27,17 @@ export default class BlockScene {
Object.values(this.txs).forEach(tx => tx.destroy())
}
resize ({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
this.width = width
this.height = height
this.gridSize = this.width / this.gridWidth
this.unitPadding = Math.floor(Math.max(1, width / 1000))
this.unitWidth = this.gridSize - (this.unitPadding * 2)
resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
this.width = width;
this.height = height;
this.gridSize = this.width / this.gridWidth;
this.unitPadding = width / 500;
this.unitWidth = this.gridSize - (this.unitPadding * 2);
this.dirty = true
if (this.initialised && this.scene) this.updateAll(performance.now())
this.dirty = true;
if (this.initialised && this.scene) {
this.updateAll(performance.now());
}
}
// Animate new block entering scene

2
frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
View File

@ -1,5 +1,5 @@
<div class="mempool-block-overview">
<canvas class="block-overview" #blockCanvas></canvas>
<canvas class="block-overview" [style.width]="cssWidth + 'px'" [style.height]="cssHeight + 'px'" #blockCanvas></canvas>
<div class="loader-wrapper" [class.hidden]="!(isLoading$ | async)">
<div class="spinner-border ml-3 loading" role="status"></div>
</div>

14
frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
View File

@ -27,6 +27,8 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
animationFrameRequest: number;
displayWidth: number;
displayHeight: number;
cssWidth: number;
cssHeight: number;
shaderProgram: WebGLProgram;
vertexArray: FastVertexArray;
running: boolean;
@ -182,12 +184,14 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
this.displayWidth = this.canvas.nativeElement.parentElement.clientWidth;
this.displayHeight = this.canvas.nativeElement.parentElement.clientHeight;
this.cssWidth = this.canvas.nativeElement.parentElement.clientWidth;
this.cssHeight = this.canvas.nativeElement.parentElement.clientHeight;
this.displayWidth = window.devicePixelRatio * this.cssWidth;
this.displayHeight = window.devicePixelRatio * this.cssHeight;
this.canvas.nativeElement.width = this.displayWidth;
this.canvas.nativeElement.height = this.displayHeight;
if (this.gl) {
this.gl.viewport(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
}
if (this.scene) {
this.scene.resize({ width: this.displayWidth, height: this.displayHeight });
@ -285,7 +289,9 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
this.setPreviewTx(-1, -1, false);
}
setPreviewTx(x: number, y: number, clicked: boolean = false) {
setPreviewTx(cssX: number, cssY: number, clicked: boolean = false) {
const x = cssX * window.devicePixelRatio;
const y = cssY * window.devicePixelRatio;
if (this.scene && (!this.selectedTx || clicked)) {
const selected = this.scene.getTxAt({ x, y });
const currentPreview = this.selectedTx || this.hoverTx;