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

Merge pull request #3301 from mempool/mononaut/flow-diagram-alignment

Browse Source 
pixel-perfect flow diagrams (again)
This commit is contained in:
softsimon 2023-03-10 13:38:56 +09:00 committed by GitHub
commit ccc413a800
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -208,8 +208,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands); this.outputs = this.initLines('out', voutWithFee, totalValue, this.maxStrands);
this.middle = { this.middle = {
path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`, path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.25} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.25}`,
style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}` style: `stroke-width: ${this.combinedWeight + 0.5}; stroke: ${this.gradient[1]}`
}; };
this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false) this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
@ -266,7 +266,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
const lineParams = weights.map((w, i) => { const lineParams = weights.map((w, i) => {
return { return {
weight: w, weight: w,
thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.max(this.minWeight - 1, w) + 1, thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.min(this.combinedWeight + 0.5, Math.max(this.minWeight - 1, w) + 1),
offset: 0, offset: 0,
innerY: 0, innerY: 0,
outerY: 0, outerY: 0,
@ -278,7 +278,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
// bounds of the middle segment // bounds of the middle segment
const innerTop = (this.height / 2) - (this.combinedWeight / 2); const innerTop = (this.height / 2) - (this.combinedWeight / 2);
const innerBottom = innerTop + this.combinedWeight; const innerBottom = innerTop + this.combinedWeight + 0.5;
// tracks the visual bottom of the endpoints of the previous line // tracks the visual bottom of the endpoints of the previous line
let lastOuter = 0; let lastOuter = 0;
let lastInner = innerTop; let lastInner = innerTop;
@ -303,7 +303,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
// set the vertical position of the (center of the) outer side of the line // set the vertical position of the (center of the) outer side of the line
line.outerY = lastOuter + (line.thickness / 2); line.outerY = lastOuter + (line.thickness / 2);
line.innerY = Math.min(innerBottom + (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2))); line.innerY = Math.min(innerBottom - (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2)));
// special case to center single input/outputs // special case to center single input/outputs
if (xputs.length === 1) { if (xputs.length === 1) {