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

Merge pull request #2689 from mononaut/fix-block-viz-resize

Browse Source 
resize block visualization instantly on window zoom and resize
This commit is contained in:
wiz 2022-11-22 11:51:51 +09:00 committed by GitHub
commit 547b60fce7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@ -188,7 +188,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
}
if (this.scene) {
this.scene.resize({ width: this.displayWidth, height: this.displayHeight });
this.scene.resize({ width: this.displayWidth, height: this.displayHeight, animate: false });
this.start();
} else {
this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,

40
frontend/src/app/components/block-overview-graph/block-scene.ts
View File

@ -29,7 +29,7 @@ export default class BlockScene {
this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray });
}
resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
this.width = width;
this.height = height;
this.gridSize = this.width / this.gridWidth;
@ -38,7 +38,7 @@ export default class BlockScene {
this.dirty = true;
if (this.initialised && this.scene) {
this.updateAll(performance.now(), 50);
this.updateAll(performance.now(), 50, 'left', animate);
}
}
@ -212,7 +212,7 @@ export default class BlockScene {
this.vbytesPerUnit = blockLimit / Math.pow(resolution / 1.02, 2);
this.gridWidth = resolution;
this.gridHeight = resolution;
this.resize({ width, height });
this.resize({ width, height, animate: true });
this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
this.txs = {};
@ -225,14 +225,14 @@ export default class BlockScene {
this.animateUntil = Math.max(this.animateUntil, tx.update(update));
}
private updateTx(tx: TxView, startTime: number, delay: number, direction: string = 'left'): void {
private updateTx(tx: TxView, startTime: number, delay: number, direction: string = 'left', animate: boolean = true): void {
if (tx.dirty || this.dirty) {
this.saveGridToScreenPosition(tx);
this.setTxOnScreen(tx, startTime, delay, direction);
this.setTxOnScreen(tx, startTime, delay, direction, animate);
}
}
private setTxOnScreen(tx: TxView, startTime: number, delay: number = 50, direction: string = 'left'): void {
private setTxOnScreen(tx: TxView, startTime: number, delay: number = 50, direction: string = 'left', animate: boolean = true): void {
if (!tx.initialised) {
const txColor = tx.getColor();
this.applyTxUpdate(tx, {
@ -252,30 +252,42 @@ export default class BlockScene {
position: tx.screenPosition,
color: txColor
},
duration: 1000,
duration: animate ? 1000 : 1,
start: startTime,
delay,
delay: animate ? delay : 0,
});
} else {
this.applyTxUpdate(tx, {
display: {
position: tx.screenPosition
},
duration: 1000,
minDuration: 500,
duration: animate ? 1000 : 0,
minDuration: animate ? 500 : 0,
start: startTime,
delay,
adjust: true
delay: animate ? delay : 0,
adjust: animate
});
if (!animate) {
this.applyTxUpdate(tx, {
display: {
position: tx.screenPosition
},
duration: 0,
minDuration: 0,
start: startTime,
delay: 0,
adjust: false
});
}
}
}
private updateAll(startTime: number, delay: number = 50, direction: string = 'left'): void {
private updateAll(startTime: number, delay: number = 50, direction: string = 'left', animate: boolean = true): void {
this.scene.count = 0;
const ids = this.getTxList();
startTime = startTime || performance.now();
for (const id of ids) {
this.updateTx(this.txs[id], startTime, delay, direction);
this.updateTx(this.txs[id], startTime, delay, direction, animate);
}
this.dirty = false;
}