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

Mouse events for flow diagram endcaps & connectors

Browse Source
This commit is contained in:
Mononaut
2022-11-21 12:28:46 +09:00
parent 2c1f38aa9d
commit 14ec427f5e
3 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,7 @@ interface SvgLine {
style: string;
class?: string;
connectorPath?: string;
markerPath?: string;
}
interface Xput {
@@ -312,6 +313,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
style: this.makeStyle(line.thickness, xputs[i].type),
class: xputs[i].type,
connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
markerPath: this.makeMarkerPath(side, line.outerY, line.innerY, line.thickness),
};
});
}
@@ -351,6 +353,22 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
}
}
makeMarkerPath(side: 'in' | 'out', y: number, inner, weight: number): string {
const halfWidth = weight * 0.5;
const offset = Math.max(2, halfWidth * 0.2);
// align with for svg horizontal gradient bug correction
if (Math.round(y) === Math.round(inner)) {
y -= 1;
}
if (side === 'in') {
return `M ${10 - offset} ${y - halfWidth} L ${halfWidth + 10 - offset} ${y} L ${10 - offset} ${y + halfWidth} L ${offset + weight} ${ y + halfWidth} L ${offset + weight} ${y - halfWidth}`;
} else {
return `M ${this.width - halfWidth - 10 + offset} ${y - halfWidth} L ${this.width - 10 + offset} ${y} L ${this.width - halfWidth - 10 + offset} ${y + halfWidth} L ${this.width - halfWidth - 10} ${ y + halfWidth} L ${this.width - halfWidth - 10} ${y - halfWidth}`;
}
}
makeStyle(minWeight, type): string {
if (type === 'fee') {
return `stroke-width: ${minWeight}`;