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

Exclude webgl block viz from SSR rendering

Browse Source
This commit is contained in:
Mononaut 2023-10-18 21:14:17 +00:00
parent cfdbd93695
commit 6464f6d8bb
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
4 changed files with 51 additions and 36 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.html
View File

@ -1,7 +1,7 @@
<div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'"> <div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
<div class="block-overview-graph"> <div class="block-overview-graph">
<canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas> <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
<div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable"> <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
<div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div> <div *ngIf="!unavailable" class="spinner-border ml-3 loading" role="status"></div>
<div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div> <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>

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

@ -94,13 +94,15 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false); if (this.canvas) {
this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false); this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false);
this.gl = this.canvas.nativeElement.getContext('webgl'); this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
this.gl = this.canvas.nativeElement.getContext('webgl');
if (this.gl) { if (this.gl) {
this.initCanvas(); this.initCanvas();
this.resizeCanvas(); this.resizeCanvas();
}
} }
} }
@ -142,8 +144,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
cancelAnimationFrame(this.animationFrameRequest); cancelAnimationFrame(this.animationFrameRequest);
clearTimeout(this.animationHeartBeat); clearTimeout(this.animationHeartBeat);
} }
this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost); if (this.canvas) {
this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored); this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
}
} }
clear(direction): void { clear(direction): void {
@ -209,6 +213,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
} }
initCanvas(): void { initCanvas(): void {
if (!this.canvas || !this.gl) {
return;
}
this.gl.clearColor(0.0, 0.0, 0.0, 0.0); this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.clear(this.gl.COLOR_BUFFER_BIT);
@ -262,24 +270,26 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
resizeCanvas(): void { resizeCanvas(): void {
this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth; if (this.canvas) {
this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight; this.cssWidth = this.canvas.nativeElement.offsetParent.clientWidth;
this.displayWidth = window.devicePixelRatio * this.cssWidth; this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight;
this.displayHeight = window.devicePixelRatio * this.cssHeight; this.displayWidth = window.devicePixelRatio * this.cssWidth;
this.canvas.nativeElement.width = this.displayWidth; this.displayHeight = window.devicePixelRatio * this.cssHeight;
this.canvas.nativeElement.height = this.displayHeight; this.canvas.nativeElement.width = this.displayWidth;
if (this.gl) { this.canvas.nativeElement.height = this.displayHeight;
this.gl.viewport(0, 0, this.displayWidth, this.displayHeight); if (this.gl) {
} this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
if (this.scene) { }
this.scene.resize({ width: this.displayWidth, height: this.displayHeight, animate: false }); if (this.scene) {
this.start(); this.scene.resize({ width: this.displayWidth, height: this.displayHeight, animate: false });
} else { this.start();
this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution, } else {
blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset, blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray,
highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
colorFunction: this.getColorFunction() }); colorFunction: this.getColorFunction() });
this.start(); this.start();
}
} }
} }
@ -406,6 +416,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
@HostListener('pointerup', ['$event']) @HostListener('pointerup', ['$event'])
onClick(event) { onClick(event) {
if (!this.canvas) {
return;
}
if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') { if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') {
this.setPreviewTx(event.offsetX, event.offsetY, true); this.setPreviewTx(event.offsetX, event.offsetY, true);
} else if (event.target === this.canvas.nativeElement) { } else if (event.target === this.canvas.nativeElement) {
@ -417,6 +430,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
@HostListener('pointermove', ['$event']) @HostListener('pointermove', ['$event'])
onPointerMove(event) { onPointerMove(event) {
if (!this.canvas) {
return;
}
if (event.target === this.canvas.nativeElement) { if (event.target === this.canvas.nativeElement) {
this.setPreviewTx(event.offsetX, event.offsetY, false); this.setPreviewTx(event.offsetX, event.offsetY, false);
} else { } else {

6
frontend/src/app/components/block/block.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChildren, QueryList, Inject, PLATFORM_ID } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ElectrsApiService } from '../../services/electrs-api.service'; import { ElectrsApiService } from '../../services/electrs-api.service';
@ -17,6 +17,7 @@ import { seoDescriptionNetwork } from '../../shared/common.utils';
import { PriceService, Price } from '../../services/price.service'; import { PriceService, Price } from '../../services/price.service';
import { CacheService } from '../../services/cache.service'; import { CacheService } from '../../services/cache.service';
import { ServicesApiServices } from '../../services/services-api.service'; import { ServicesApiServices } from '../../services/services-api.service';
import { isPlatformServer } from '@angular/common';
@Component({ @Component({
selector: 'app-block', selector: 'app-block',
@ -108,8 +109,9 @@ export class BlockComponent implements OnInit, OnDestroy {
private priceService: PriceService, private priceService: PriceService,
private cacheService: CacheService, private cacheService: CacheService,
private servicesApiService: ServicesApiServices, private servicesApiService: ServicesApiServices,
@Inject(PLATFORM_ID) private platformId: Object,
) { ) {
this.webGlEnabled = detectWebGL(); this.webGlEnabled = isPlatformServer(this.platformId) || detectWebGL();
} }
ngOnInit() { ngOnInit() {

13
frontend/src/app/components/mempool-block/mempool-block.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Inject, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
import { detectWebGL } from '../../shared/graphs.utils';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { ActivatedRoute, ParamMap } from '@angular/router'; import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap, map, tap, filter } from 'rxjs/operators'; import { switchMap, map, tap, filter } from 'rxjs/operators';
@ -7,6 +8,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
import { SeoService } from '../../services/seo.service'; import { SeoService } from '../../services/seo.service';
import { seoDescriptionNetwork } from '../../shared/common.utils'; import { seoDescriptionNetwork } from '../../shared/common.utils';
import { WebsocketService } from '../../services/websocket.service'; import { WebsocketService } from '../../services/websocket.service';
import { isPlatformServer } from '@angular/common';
@Component({ @Component({
selector: 'app-mempool-block', selector: 'app-mempool-block',
@ -29,8 +31,9 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
private seoService: SeoService, private seoService: SeoService,
private websocketService: WebsocketService, private websocketService: WebsocketService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
@Inject(PLATFORM_ID) private platformId: Object,
) { ) {
this.webGlEnabled = detectWebGL(); this.webGlEnabled = isPlatformServer(this.platformId) || detectWebGL();
} }
ngOnInit(): void { ngOnInit(): void {
@ -93,9 +96,3 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
this.previewTx = event; this.previewTx = event;
} }
} }
function detectWebGL() {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
return (gl && gl instanceof WebGLRenderingContext);
}