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

limit mouse events to difficulty bar

Browse Source
This commit is contained in:
Mononaut 2023-08-03 15:49:15 +09:00
parent d06fe83bd9
commit 3d6a8a501d
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/difficulty/difficulty.component.html
View File

@ -4,7 +4,7 @@
<div class="card-body more-padding"> <div class="card-body more-padding">
<div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty"> <div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty">
<div class="epoch-progress"> <div class="epoch-progress">
<svg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none"> <svg #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
<defs> <defs>
<linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"> <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#105fb0" /> <stop offset="0%" stop-color="#105fb0" />
@ -22,7 +22,7 @@
class="rect {{rect.status}}" class="rect {{rect.status}}"
[class.hover]="hoverSection && rect.status === hoverSection.status" [class.hover]="hoverSection && rect.status === hoverSection.status"
(pointerover)="onHover($event, rect);" (pointerover)="onHover($event, rect);"
(pointerout)="onBlur($event);" (pointerout)="onBlur();"
> >
<animate <animate
*ngIf="rect.status === 'next'" *ngIf="rect.status === 'next'"

20
frontend/src/app/components/difficulty/difficulty.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, ElementRef, ViewChild, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
import { combineLatest, Observable, timer } from 'rxjs'; import { combineLatest, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { StateService } from '../..//services/state.service'; import { StateService } from '../..//services/state.service';
interface EpochProgress { interface EpochProgress {
@ -45,6 +45,8 @@ export class DifficultyComponent implements OnInit {
@Input() showHalving = false; @Input() showHalving = false;
@Input() showTitle = true; @Input() showTitle = true;
@ViewChild('epochSvg') epochSvgElement: ElementRef<SVGElement>;
isLoadingWebSocket$: Observable<boolean>; isLoadingWebSocket$: Observable<boolean>;
difficultyEpoch$: Observable<EpochProgress>; difficultyEpoch$: Observable<EpochProgress>;
@ -191,22 +193,26 @@ export class DifficultyComponent implements OnInit {
} }
@HostListener('pointerdown', ['$event']) @HostListener('pointerdown', ['$event'])
onPointerDown(event) { onPointerDown(event): void {
if (this.epochSvgElement.nativeElement?.contains(event.target)) {
this.onPointerMove(event); this.onPointerMove(event);
event.preventDefault(); event.preventDefault();
} }
}
@HostListener('pointermove', ['$event']) @HostListener('pointermove', ['$event'])
onPointerMove(event) { onPointerMove(event): void {
if (this.epochSvgElement.nativeElement?.contains(event.target)) {
this.tooltipPosition = { x: event.clientX, y: event.clientY }; this.tooltipPosition = { x: event.clientX, y: event.clientY };
this.cd.markForCheck(); this.cd.markForCheck();
} }
}
onHover(event, rect): void { onHover(_, rect): void {
this.hoverSection = rect; this.hoverSection = rect;
} }
onBlur(event): void { onBlur(): void {
this.hoverSection = null; this.hoverSection = null;
} }
} }