From 3a49e528fadd66d5f7fccc99822335a24aad0327 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 19 Sep 2024 13:51:20 +0000 Subject: [PATCH] multiblock enforce block boundaries --- .../block-overview-graph/block-scene.ts | 4 +- .../block-overview-graph/tx-sprite.ts | 37 ++++++++++++++----- .../block-overview-graph/tx-view.ts | 26 ++++++++----- 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index 2096866eb..e16370d96 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -278,7 +278,7 @@ export default class BlockScene { } private applyTxUpdate(tx: TxView, update: ViewUpdateParams): void { - this.animateUntil = Math.max(this.animateUntil, tx.update(update)); + this.animateUntil = Math.max(this.animateUntil, tx.update(update, { minX: this.x, maxY: this.y + this.height })); } private updateTxColor(tx: TxView, startTime: number, delay: number, animate: boolean = true, duration?: number): void { @@ -453,7 +453,7 @@ export default class BlockScene { break; } return { - x: this.x + x + this.unitPadding - (slotSize / 2), + x: this.x + x + this.unitPadding + (slotSize / 2), y: this.y + y + this.unitPadding - (slotSize / 2), s: squareSize }; diff --git a/frontend/src/app/components/block-overview-graph/tx-sprite.ts b/frontend/src/app/components/block-overview-graph/tx-sprite.ts index 75c1577fc..19e0f5834 100644 --- a/frontend/src/app/components/block-overview-graph/tx-sprite.ts +++ b/frontend/src/app/components/block-overview-graph/tx-sprite.ts @@ -16,15 +16,22 @@ export default class TxSprite { attributes: Attributes; tempAttributes: OptionalAttributes; + minX: number; + maxY: number; - constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray) { + + constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray, minX, maxY: number) { const offsetTime = params.start; this.vertexArray = vertexArray; this.vertexData = Array(VI.length).fill(0); + this.updateMap = { x: 0, y: 0, s: 0, r: 0, g: 0, b: 0, a: 0 }; + this.minX = minX; + this.maxY = maxY; + this.attributes = { x: { a: params.x, b: params.x, t: offsetTime, v: 0, d: 0 }, y: { a: params.y, b: params.y, t: offsetTime, v: 0, d: 0 }, @@ -77,10 +84,17 @@ export default class TxSprite { minDuration: minimum remaining transition duration when adjust = true temp: if true, this update is only temporary (can be reversed with 'resume') */ - update(params: SpriteUpdateParams): void { + update(params: SpriteUpdateParams, minX?: number, maxY?: number): void { const offsetTime = params.start || performance.now(); const v = params.duration > 0 ? (1 / params.duration) : 0; + if (minX != null) { + this.minX = minX; + } + if (maxY != null) { + this.maxY = maxY; + } + updateKeys.forEach(key => { this.updateMap[key] = params[key]; }); @@ -140,13 +154,18 @@ export default class TxSprite { }; } const size = attributes.s; + const s = size.b; + const y = attributes.y.b; + const maxYFactor = (this.maxY - y) / s; + const x = attributes.x.b; + const maxXFactor = -(x - this.minX) / s; // update vertex data in place // ugly, but avoids overhead of allocating large temporary arrays const vertexStride = VI.length + 2; for (let vertex = 0; vertex < 6; vertex++) { - this.vertexData[vertex * vertexStride] = vertexOffsetFactors[vertex][0]; - this.vertexData[(vertex * vertexStride) + 1] = vertexOffsetFactors[vertex][1]; + this.vertexData[vertex * vertexStride] = Math.max(maxXFactor, vertexOffsetFactors[vertex][0]); + this.vertexData[(vertex * vertexStride) + 1] = Math.min(maxYFactor, vertexOffsetFactors[vertex][1]); for (let step = 0; step < VI.length; step++) { // components of each field in the vertex array are defined by an entry in VI: // VI[i].a is the attribute, VI[i].f is the inner field, VI[i].offA and VI[i].offB are offset factors @@ -196,12 +215,12 @@ function interpolateAttributeStart(attribute: InterpolatedAttribute, start: DOMH } const vertexOffsetFactors = [ + [-1, 0], + [0, 1], [0, 0], - [1, 1], - [1, 0], - [0, 0], - [1, 1], - [0, 1] + [-1, 0], + [0, 1], + [-1, 1] ]; const VI = []; diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts index f612368f4..cdce6ec6c 100644 --- a/frontend/src/app/components/block-overview-graph/tx-view.ts +++ b/frontend/src/app/components/block-overview-graph/tx-view.ts @@ -106,7 +106,7 @@ export default class TxView implements TransactionStripped { returns minimum transition end time */ - update(params: ViewUpdateParams): number { + update(params: ViewUpdateParams, { minX, maxY }: { minX: number, maxY: number }): number { if (params.jitter) { params.delay += (Math.random() * params.jitter); } @@ -115,21 +115,29 @@ export default class TxView implements TransactionStripped { this.initialised = true; this.sprite = new TxSprite( toSpriteUpdate(params), - this.vertexArray + this.vertexArray, + minX, + maxY ); // apply any pending hover event if (this.hover) { params.duration = Math.max(params.duration, hoverTransitionTime); - this.sprite.update({ - ...this.hoverColor, - duration: hoverTransitionTime, - adjust: false, - temp: true - }); + this.sprite.update( + { + ...this.hoverColor, + duration: hoverTransitionTime, + adjust: false, + temp: true + }, + minX, + maxY + ); } } else { this.sprite.update( - toSpriteUpdate(params) + toSpriteUpdate(params), + minX, + maxY ); } this.dirty = false;