machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages 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()) Object.values(this.txs).forEach(tx => tx.destroy())
} }
resize ({ width = this.width, height = this.height }: { width?: number, height?: number}): void { resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
this.width = width this.width = width;
this.height = height this.height = height;
this.gridSize = this.width / this.gridWidth this.gridSize = this.width / this.gridWidth;
this.unitPadding = Math.floor(Math.max(1, width / 1000)) this.unitPadding = width / 500;
this.unitWidth = this.gridSize - (this.unitPadding * 2) this.unitWidth = this.gridSize - (this.unitPadding * 2);
this.dirty = true this.dirty = true;
if (this.initialised && this.scene) this.updateAll(performance.now()) if (this.initialised && this.scene) {
this.updateAll(performance.now());
}
} }
// Animate new block entering scene // 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"> <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="loader-wrapper" [class.hidden]="!(isLoading$ | async)">
<div class="spinner-border ml-3 loading" role="status"></div> <div class="spinner-border ml-3 loading" role="status"></div>
</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; animationFrameRequest: number;
displayWidth: number; displayWidth: number;
displayHeight: number; displayHeight: number;
cssWidth: number;
cssHeight: number;
shaderProgram: WebGLProgram; shaderProgram: WebGLProgram;
vertexArray: FastVertexArray; vertexArray: FastVertexArray;
running: boolean; running: boolean;
@ -182,12 +184,14 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
resizeCanvas(): void { resizeCanvas(): void {
this.displayWidth = this.canvas.nativeElement.parentElement.clientWidth; this.cssWidth = this.canvas.nativeElement.parentElement.clientWidth;
this.displayHeight = this.canvas.nativeElement.parentElement.clientHeight; 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.width = this.displayWidth;
this.canvas.nativeElement.height = this.displayHeight; this.canvas.nativeElement.height = this.displayHeight;
if (this.gl) { 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) { if (this.scene) {
this.scene.resize({ width: this.displayWidth, height: this.displayHeight }); 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); 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)) { if (this.scene && (!this.selectedTx || clicked)) {
const selected = this.scene.getTxAt({ x, y }); const selected = this.scene.getTxAt({ x, y });
const currentPreview = this.selectedTx || this.hoverTx; const currentPreview = this.selectedTx || this.hoverTx;