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

fix rendering of many zero value outputs

Browse Source
This commit is contained in:
Mononaut 2022-11-22 15:54:26 +09:00
parent cb7e25d646
commit 7e01a22265
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
View File

@ -21,13 +21,13 @@
markerWidth="1.5" markerHeight="1" markerWidth="1.5" markerHeight="1"
orient="auto"> orient="auto">
</marker> </marker>
<radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%"> <radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
<stop [attr.stop-color]="gradient[0]" /> <stop [attr.stop-color]="gradient[0]" />
</radialGradient> </radialGradient>
<radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%"> <radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
<stop [attr.stop-color]="gradient[1]" /> <stop [attr.stop-color]="gradient[1]" />
</radialGradient> </radialGradient>
<radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%"> <radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
<stop [attr.stop-color]="gradient[2]" /> <stop [attr.stop-color]="gradient[2]" />
</radialGradient> </radialGradient>
<linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">

12
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
View File

@ -260,7 +260,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
let lastOuter = 0; let lastOuter = 0;
let lastInner = innerTop; let lastInner = innerTop;
// gap between strands // gap between strands
const spacing = (this.height - visibleWeight) / gaps; const spacing = Math.max(4, (this.height - visibleWeight) / gaps);
// curve adjustments to prevent overlaps // curve adjustments to prevent overlaps
let offset = 0; let offset = 0;
@ -270,7 +270,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
let pad = 0; let pad = 0;
lineParams.forEach((line, i) => { lineParams.forEach((line, i) => {
if (xputs[i].value === 0) { if (xputs[i].value === 0) {
line.outerY = lastOuter + this.zeroValueThickness / 2; line.outerY = lastOuter + (this.zeroValueThickness / 2);
lastOuter += this.zeroValueThickness + spacing; lastOuter += this.zeroValueThickness + spacing;
return; return;
} }
@ -349,7 +349,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string { makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
const start = (weight * 0.5) + this.connectorWidth; const start = (weight * 0.5) + this.connectorWidth;
const curveStart = Math.max(start + 1, pad - offset); const curveStart = Math.max(start + 5, pad - offset);
const end = this.width / 2 - (this.midWidth * 0.9) + 1; const end = this.width / 2 - (this.midWidth * 0.9) + 1;
const curveEnd = end - offset - 10; const curveEnd = end - offset - 10;
const midpoint = (curveStart + curveEnd) / 2; const midpoint = (curveStart + curveEnd) / 2;
@ -368,11 +368,11 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
makeZeroValuePath(side: 'in' | 'out', y: number): string { makeZeroValuePath(side: 'in' | 'out', y: number): string {
const offset = this.zeroValueThickness / 2; const offset = this.zeroValueThickness / 2;
const start = this.connectorWidth + 10; const start = (this.connectorWidth / 2) + 10;
if (side === 'in') { if (side === 'in') {
return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y + 1}`; return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y}`;
} else { // mirrored in y-axis for the right hand side } else { // mirrored in y-axis for the right hand side
return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y + 1}`; return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y}`;
} }
} }