From cde3d878b15043fb67964a11c2ed4ed0860d7615 Mon Sep 17 00:00:00 2001 From: natsoni Date: Fri, 5 Apr 2024 18:36:32 +0900 Subject: [PATCH] Fix block overview graph on contrast theme --- .../block-overview-graph.component.ts | 25 ++++++-- .../block-overview-graph/block-scene.ts | 6 +- .../block-overview-graph/tx-view.ts | 28 +-------- .../components/block-overview-graph/utils.ts | 25 +++++++- frontend/src/app/services/theme.service.ts | 59 +------------------ 5 files changed, 48 insertions(+), 95 deletions(-) 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 7ab147345..15e084dec 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 @@ -9,7 +9,7 @@ import { Price } from '../../services/price.service'; import { StateService } from '../../services/state.service'; import { ThemeService } from 'src/app/services/theme.service'; import { Subscription } from 'rxjs'; -import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils'; +import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors, contrastFeeColors, contrastAuditFeeColors, contrastMarginalFeeColors, contrastAuditColors, contrastColorFunction } from './utils'; import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils'; import { detectWebGL } from '../../shared/graphs.utils'; @@ -24,6 +24,16 @@ const unmatchedAuditColors = { prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity), accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity), }; +const unmatchedContrastFeeColors = contrastFeeColors.map(c => setOpacity(c, unmatchedOpacity)); +const unmatchedContrastAuditFeeColors = contrastAuditFeeColors.map(c => setOpacity(c, unmatchedOpacity)); +const unmatchedContrastMarginalFeeColors = contrastMarginalFeeColors.map(c => setOpacity(c, unmatchedOpacity)); +const unmatchedContrastAuditColors = { + censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity), + missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity), + added: setOpacity(contrastAuditColors.added, unmatchedOpacity), + prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity), + accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity), +}; @Component({ selector: 'app-block-overview-graph', @@ -108,8 +118,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On this.initCanvas(); this.resizeCanvas(); this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => { - // force full re-render - this.resizeCanvas(); + this.scene.setColorFunction(this.getColorFunction()); }); } } @@ -567,9 +576,15 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) { return (tx: TxView) => { if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) { - return defaultColorFunction(tx); + return this.themeService.theme !== 'default' ? contrastColorFunction(tx) : defaultColorFunction(tx); } else { - return defaultColorFunction( + return this.themeService.theme !== 'default' ? contrastColorFunction( + tx, + unmatchedContrastFeeColors, + unmatchedContrastAuditFeeColors, + unmatchedContrastMarginalFeeColors, + unmatchedContrastAuditColors + ) : defaultColorFunction( tx, unmatchedFeeColors, unmatchedAuditFeeColors, 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 853301ee7..840a8b662 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -2,7 +2,7 @@ import { FastVertexArray } from './fast-vertex-array'; import TxView from './tx-view'; import { TransactionStripped } from '../../interfaces/node-api.interface'; import { Color, Position, Square, ViewUpdateParams } from './sprite-types'; -import { defaultColorFunction } from './utils'; +import { defaultColorFunction, contrastColorFunction } from './utils'; import { ThemeService } from 'src/app/services/theme.service'; export default class BlockScene { @@ -69,7 +69,7 @@ export default class BlockScene { } setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void { - this.getColor = colorFunction || defaultColorFunction; + this.theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.dirty = true; if (this.initialised && this.scene) { this.updateColors(performance.now(), 50); @@ -241,7 +241,7 @@ export default class BlockScene { this.flip = flip; this.vertexArray = vertexArray; this.highlightingEnabled = highlighting; - this.getColor = colorFunction || defaultColorFunction; + theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.theme = theme; this.scene = { 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 13de08aa6..0317d7cbf 100644 --- a/frontend/src/app/components/block-overview-graph/tx-view.ts +++ b/frontend/src/app/components/block-overview-graph/tx-view.ts @@ -145,7 +145,7 @@ export default class TxView implements TransactionStripped { setHover(hoverOn: boolean, color: Color | void): number { if (hoverOn) { this.hover = true; - this.hoverColor = color || this.theme.defaultHoverColor; + this.hoverColor = color || defaultHoverColor; this.sprite.update({ ...this.hoverColor, @@ -195,30 +195,4 @@ export default class TxView implements TransactionStripped { this.dirty = false; return performance.now() + hoverTransitionTime; } - - getColor(): Color { - const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1; - const feeLevelColor = this.theme.feeColors[feeLevelIndex] || this.theme.feeColors[this.theme.mempoolFeeColors.length - 1]; - // Block audit - switch(this.status) { - case 'censored': - return this.theme.auditColors.censored; - case 'missing': - return this.theme.auditColors.missing; - case 'fresh': - return this.theme.auditColors.missing; - case 'added': - return this.theme.auditColors.added; - case 'selected': - return this.theme.auditColors.selected; - case 'found': - if (this.context === 'projected') { - return this.theme.auditFeeColors[feeLevelIndex] || this.theme.auditFeeColors[this.theme.mempoolFeeColors.length - 1]; - } else { - return feeLevelColor; - } - default: - return feeLevelColor; - } - } } diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts index 2f23d4cb9..ba4415e1c 100644 --- a/frontend/src/app/components/block-overview-graph/utils.ts +++ b/frontend/src/app/components/block-overview-graph/utils.ts @@ -1,4 +1,4 @@ -import { feeLevels, defaultMempoolFeeColors } from '../../app.constants'; +import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants'; import { Color } from './sprite-types'; import TxView from './tx-view'; @@ -46,7 +46,18 @@ export const defaultAuditColors = { missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7), added: hexToColor('0099ff'), prioritized: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7), - accelerated: hexToColor('8F5FF6'), + accelerated: hexToColor('8f5ff6'), +}; + +export const contrastFeeColors = contrastMempoolFeeColors.map(hexToColor); +export const contrastAuditFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9)); +export const contrastMarginalFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1)); +export const contrastAuditColors = { + censored: hexToColor('ffa8ff'), + missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7), + added: hexToColor('00bb98'), + prioritized: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7), + accelerated: hexToColor('8f5ff6'), }; export function defaultColorFunction( @@ -100,4 +111,14 @@ export function defaultColorFunction( return feeLevelColor; } } +} + +export function contrastColorFunction( + tx: TxView, + feeColors: Color[] = contrastFeeColors, + auditFeeColors: Color[] = contrastAuditFeeColors, + marginalFeeColors: Color[] = contrastMarginalFeeColors, + auditColors: { [status: string]: Color } = contrastAuditColors +): Color { + return defaultColorFunction(tx, feeColors, auditFeeColors, marginalFeeColors, auditColors); } \ No newline at end of file diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts index 58fdc6575..da374bf13 100644 --- a/frontend/src/app/services/theme.service.ts +++ b/frontend/src/app/services/theme.service.ts @@ -1,22 +1,8 @@ import { Injectable } from '@angular/core'; -import { audit, Subject } from 'rxjs'; -import { Color } from '../components/block-overview-graph/sprite-types'; +import { Subject } from 'rxjs'; import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '../app.constants'; import { StorageService } from './storage.service'; -const defaultAuditColors = { - censored: hexToColor('f344df'), - missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7), - added: hexToColor('0099ff'), - selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7), -}; -const contrastAuditColors = { - censored: hexToColor('ffa8ff'), - missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7), - added: hexToColor('00bb98'), - selected: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7), -}; - @Injectable({ providedIn: 'root' }) @@ -26,12 +12,6 @@ export class ThemeService { themeChanged$: Subject = new Subject(); mempoolFeeColors: string[] = defaultMempoolFeeColors; - /* block visualization colors */ - defaultHoverColor: Color; - feeColors: Color[]; - auditFeeColors: Color[]; - auditColors: { [category: string]: Color } = defaultAuditColors; - constructor( private storageService: StorageService, ) { @@ -44,7 +24,6 @@ export class ThemeService { if (theme !== 'default') { if (theme === 'contrast') { this.mempoolFeeColors = contrastMempoolFeeColors; - this.auditColors = contrastAuditColors; } try { if (!this.style) { @@ -60,48 +39,12 @@ export class ThemeService { } } else { this.mempoolFeeColors = defaultMempoolFeeColors; - this.auditColors = defaultAuditColors; if (this.style) { this.style.remove(); this.style = null; } } - this.updateFeeColors(); this.storageService.setValue('theme-preference', theme); this.themeChanged$.next(this.theme); } - - updateFeeColors() { - this.defaultHoverColor = hexToColor('1bd8f4'); - this.feeColors = this.mempoolFeeColors.map(hexToColor); - this.auditFeeColors = this.feeColors.map((color) => darken(desaturate(color, 0.3), 0.9)); - } -} - -export function hexToColor(hex: string): Color { - return { - r: parseInt(hex.slice(0, 2), 16) / 255, - g: parseInt(hex.slice(2, 4), 16) / 255, - b: parseInt(hex.slice(4, 6), 16) / 255, - a: 1 - }; -} - -export function desaturate(color: Color, amount: number): Color { - const gray = (color.r + color.g + color.b) / 6; - return { - r: color.r + ((gray - color.r) * amount), - g: color.g + ((gray - color.g) * amount), - b: color.b + ((gray - color.b) * amount), - a: color.a, - }; -} - -export function darken(color: Color, amount: number): Color { - return { - r: color.r * amount, - g: color.g * amount, - b: color.b * amount, - a: color.a, - } }