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

Test rendering multiple blocks on one canvas

Browse Source
This commit is contained in:
Mononaut
2024-09-17 23:48:25 +00:00
parent ca7221f8b7
commit 1da6123332
7 changed files with 780 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,8 @@ export default class BlockScene {
animationOffset: number;
highlightingEnabled: boolean;
filterFlags: bigint | null = 0b00000100_00000000_00000000_00000000n;
x: number;
y: number;
width: number;
height: number;
gridWidth: number;
@@ -31,14 +33,16 @@ export default class BlockScene {
animateUntil = 0;
dirty: boolean;
constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
{ width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
constructor({ x = 0, y = 0, width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
{ x?: number, y?: number, width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
) {
this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
this.init({ x, y,width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
}
resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
resize({ x = 0, y = 0, width = this.width, height = this.height, animate = true }: { x?: number, y?: number, width?: number, height?: number, animate: boolean }): void {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.gridSize = this.width / this.gridWidth;
@@ -238,8 +242,8 @@ export default class BlockScene {
this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
}
private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
{ width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
private init({ x, y, width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
{ x: number, y: number, width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
): void {
this.animationDuration = animationDuration || this.animationDuration || 1000;
@@ -264,7 +268,7 @@ export default class BlockScene {
this.vbytesPerUnit = blockLimit / Math.pow(resolution / 1.02, 2);
this.gridWidth = resolution;
this.gridHeight = resolution;
this.resize({ width, height, animate: true });
this.resize({ x, y, width, height, animate: true });
this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
this.txs = {};
@@ -449,18 +453,18 @@ export default class BlockScene {
break;
}
return {
x: x + this.unitPadding - (slotSize / 2),
y: y + this.unitPadding - (slotSize / 2),
x: this.x + x + this.unitPadding - (slotSize / 2),
y: this.y + y + this.unitPadding - (slotSize / 2),
s: squareSize
};
} else {
return { x: 0, y: 0, s: 0 };
return { x: this.x, y: this.y, s: 0 };
}
}
private screenToGrid(position: Position): Position {
let x = position.x;
let y = this.height - position.y;
let x = position.x - this.x;
let y = this.height - (position.y - this.y);
let t;
switch (this.orientation) {