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

scroll selected rbf node into view

Browse Source
This commit is contained in:
Mononaut 2023-03-05 20:53:59 -06:00
parent f2749c67f3
commit 8d57aa1f06
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/components/rbf-timeline/rbf-timeline.component.html
View File

@ -17,6 +17,7 @@
<ng-container *ngFor="let cell of timeline; let i = index;"> <ng-container *ngFor="let cell of timeline; let i = index;">
<ng-container *ngIf="cell.replacement; else nonNode"> <ng-container *ngIf="cell.replacement; else nonNode">
<div class="node" <div class="node"
[id]="'node-'+cell.replacement.tx.txid"
[class.selected]="txid === cell.replacement.tx.txid" [class.selected]="txid === cell.replacement.tx.txid"
[class.mined]="cell.replacement.tx.mined" [class.mined]="cell.replacement.tx.mined"
[class.first-node]="cell.first" [class.first-node]="cell.first"

12
frontend/src/app/components/rbf-timeline/rbf-timeline.component.ts
View File

@ -42,8 +42,11 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
this.rows = this.buildTimelines(this.replacements); this.rows = this.buildTimelines(this.replacements);
} }
ngOnChanges(): void { ngOnChanges(changes): void {
this.rows = this.buildTimelines(this.replacements); this.rows = this.buildTimelines(this.replacements);
if (changes.txid) {
setTimeout(() => { this.scrollToSelected(); });
}
} }
// converts a tree of RBF events into a format that can be more easily rendered in HTML // converts a tree of RBF events into a format that can be more easily rendered in HTML
@ -166,6 +169,13 @@ export class RbfTimelineComponent implements OnInit, OnChanges {
return rows; return rows;
} }
scrollToSelected() {
const node = document.getElementById('node-' + this.txid);
if (node) {
node.scrollIntoView({ block: 'nearest', inline: 'center' });
}
}
@HostListener('pointermove', ['$event']) @HostListener('pointermove', ['$event'])
onPointerMove(event) { onPointerMove(event) {
this.tooltipPosition = { x: event.clientX, y: event.clientY }; this.tooltipPosition = { x: event.clientX, y: event.clientY };