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
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,6 +81,14 @@
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path
[attr.d]="input.markerPath"
class="input marker-target {{input.class}}"
[class.highlight]="inputData[i].index === inputIndex"
(pointerover)="onHover($event, 'input', i);"
(pointerout)="onBlur($event, 'input', i);"
(click)="onClick($event, 'input', inputData[i].index);"
/>
<path
[attr.d]="input.path"
class="line {{input.class}}"
@ -101,6 +109,14 @@
(pointerout)="onBlur($event, 'output', i);"
(click)="onClick($event, 'output', outputData[i].index);"
/>
<path
[attr.d]="output.markerPath"
class="output marker-target {{output.class}}"
[class.highlight]="outputData[i].index === outputIndex"
(pointerover)="onHover($event, 'output', i);"
(pointerout)="onBlur($event, 'output', i);"
(click)="onClick($event, 'output', outputData[i].index);"
/>
<path
[attr.d]="output.path"
class="line {{output.class}}"

31
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
View File

@ -22,25 +22,26 @@
stroke: url(#output-highlight-gradient);
}
}
}
&:hover {
z-index: 10;
cursor: pointer;
&.input {
stroke: url(#input-hover-gradient);
}
&.output {
stroke: url(#output-hover-gradient);
}
&.fee {
stroke: url(#fee-hover-gradient);
}
.line:hover, .connector:hover + .marker-target + .line, .marker-target:hover + .line {
z-index: 10;
cursor: pointer;
&.input {
stroke: url(#input-hover-gradient);
}
&.output {
stroke: url(#output-hover-gradient);
}
&.fee {
stroke: url(#fee-hover-gradient);
}
}
.connector {
stroke: none;
opacity: 0.75;
cursor: pointer;
&.input {
fill: url(#input-connector-gradient);
}
@ -48,4 +49,10 @@
fill: url(#output-connector-gradient);
}
}
.marker-target {
stroke: none;
fill: transparent;
cursor: pointer;
}
}

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}`;