From f2780e65cdae729e680675b3078b84a781490f43 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Wed, 22 Jun 2022 19:08:16 +0000 Subject: [PATCH] Disable mined block animations --- .../block-overview-graph.component.scss | 1 + .../block-overview-graph.component.ts | 15 ++++++++ .../block-overview-graph/block-scene.ts | 34 ++++++++++++++++--- .../app/components/block/block.component.ts | 32 +++++++---------- 4 files changed, 58 insertions(+), 24 deletions(-) diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss index 05b9b340a..58b53aebf 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss @@ -26,6 +26,7 @@ .loader-wrapper { position: absolute; + background: #181b2d7f; left: 0; right: 0; top: 0; diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index a458ebd5f..e2774ac03 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -68,6 +68,21 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy { this.start(); } + destroy(): void { + if (this.scene) { + this.scene.destroy(); + this.start(); + } + } + + // initialize the scene without any entry transition + setup(transactions: TransactionStripped[]): void { + if (this.scene) { + this.scene.setup(transactions); + this.start(); + } + } + enter(transactions: TransactionStripped[], direction: string): void { if (this.scene) { this.scene.enter(transactions, direction); 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 fc5bfff8e..af64c0f20 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -29,10 +29,6 @@ export default class BlockScene { this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray }); } - destroy(): void { - 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; @@ -46,6 +42,36 @@ export default class BlockScene { } } + // Destroy the current layout and clean up graphics sprites without any exit animation + destroy(): void { + Object.values(this.txs).forEach(tx => tx.destroy()); + this.txs = {}; + this.layout = null; + } + + // set up the scene with an initial set of transactions, without any transition animation + setup(txs: TransactionStripped[]) { + // clean up any old transactions + Object.values(this.txs).forEach(tx => { + tx.destroy(); + delete this.txs[tx.txid]; + }); + this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight }); + txs.forEach(tx => { + const txView = new TxView(tx, this.vertexArray); + this.txs[tx.txid] = txView; + this.place(txView); + this.saveGridToScreenPosition(txView); + this.applyTxUpdate(txView, { + display: { + position: txView.screenPosition, + color: txView.getColor() + }, + duration: 0 + }); + }); + } + // Animate new block entering scene enter(txs: TransactionStripped[], direction) { this.replace(txs, direction); diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 39c4042fb..9d8f3e486 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/co import { Location } from '@angular/common'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ElectrsApiService } from '../../services/electrs-api.service'; -import { switchMap, tap, debounceTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators'; +import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, pairwise } from 'rxjs/operators'; import { Transaction, Vout } from '../../interfaces/electrs.interface'; -import { Observable, of, Subscription } from 'rxjs'; +import { Observable, of, Subscription, asyncScheduler } from 'rxjs'; import { StateService } from '../../services/state.service'; import { SeoService } from 'src/app/services/seo.service'; import { WebsocketService } from 'src/app/services/websocket.service'; @@ -33,7 +33,6 @@ export class BlockComponent implements OnInit, OnDestroy { strippedTransactions: TransactionStripped[]; overviewTransitionDirection: string; isLoadingOverview = true; - isAwaitingOverview = true; error: any; blockSubsidy: number; fees: number; @@ -124,6 +123,7 @@ export class BlockComponent implements OnInit, OnDestroy { return of(history.state.data.block); } else { this.isLoadingBlock = true; + this.isLoadingOverview = true; let blockInCache: BlockExtended; if (isBlockHeight) { @@ -170,13 +170,9 @@ export class BlockComponent implements OnInit, OnDestroy { this.transactions = null; this.transactionsError = null; this.isLoadingOverview = true; - this.isAwaitingOverview = true; - this.overviewError = true; - if (this.blockGraph) { - this.blockGraph.exit(direction); - } + this.overviewError = null; }), - debounceTime(300), + throttleTime(300, asyncScheduler, { leading: true, trailing: true }), shareReplay(1) ); this.transactionSubscription = block$.pipe( @@ -194,11 +190,6 @@ export class BlockComponent implements OnInit, OnDestroy { } this.transactions = transactions; this.isLoadingTransactions = false; - - if (!this.isAwaitingOverview && this.blockGraph && this.strippedTransactions && this.overviewTransitionDirection) { - this.isLoadingOverview = false; - this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false); - } }, (error) => { this.error = error; @@ -226,18 +217,19 @@ export class BlockComponent implements OnInit, OnDestroy { ), ) .subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => { - this.isAwaitingOverview = false; this.strippedTransactions = transactions; - this.overviewTransitionDirection = direction; - if (!this.isLoadingTransactions && this.blockGraph) { - this.isLoadingOverview = false; - this.blockGraph.replace(this.strippedTransactions, this.overviewTransitionDirection, false); + this.isLoadingOverview = false; + if (this.blockGraph) { + this.blockGraph.destroy(); + this.blockGraph.setup(this.strippedTransactions); } }, (error) => { this.error = error; this.isLoadingOverview = false; - this.isAwaitingOverview = false; + if (this.blockGraph) { + this.blockGraph.destroy(); + } }); this.networkChangedSubscription = this.stateService.networkChanged$