limit mouse events to difficulty bar
This commit is contained in:
		
							parent
							
								
									d06fe83bd9
								
							
						
					
					
						commit
						3d6a8a501d
					
				| @ -4,7 +4,7 @@ | ||||
|     <div class="card-body more-padding"> | ||||
|       <div class="difficulty-adjustment-container" *ngIf="(isLoadingWebSocket$ | async) === false && (difficultyEpoch$ | async) as epochData; else loadingDifficulty"> | ||||
|         <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> | ||||
|               <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"> | ||||
|                 <stop offset="0%" stop-color="#105fb0" /> | ||||
| @ -22,7 +22,7 @@ | ||||
|               class="rect {{rect.status}}" | ||||
|               [class.hover]="hoverSection && rect.status === hoverSection.status" | ||||
|               (pointerover)="onHover($event, rect);" | ||||
|               (pointerout)="onBlur($event);" | ||||
|               (pointerout)="onBlur();" | ||||
|             > | ||||
|               <animate | ||||
|                 *ngIf="rect.status === 'next'" | ||||
|  | ||||
| @ -1,6 +1,6 @@ | ||||
| import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; | ||||
| import { combineLatest, Observable, timer } from 'rxjs'; | ||||
| import { map, switchMap } from 'rxjs/operators'; | ||||
| import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, ElementRef, ViewChild, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; | ||||
| import { combineLatest, Observable } from 'rxjs'; | ||||
| import { map } from 'rxjs/operators'; | ||||
| import { StateService } from '../..//services/state.service'; | ||||
| 
 | ||||
| interface EpochProgress { | ||||
| @ -44,6 +44,8 @@ export class DifficultyComponent implements OnInit { | ||||
|   @Input() showProgress = true; | ||||
|   @Input() showHalving = false; | ||||
|   @Input() showTitle = true; | ||||
| 
 | ||||
|   @ViewChild('epochSvg') epochSvgElement: ElementRef<SVGElement>; | ||||
|   | ||||
|   isLoadingWebSocket$: Observable<boolean>; | ||||
|   difficultyEpoch$: Observable<EpochProgress>; | ||||
| @ -191,22 +193,26 @@ export class DifficultyComponent implements OnInit { | ||||
|   } | ||||
| 
 | ||||
|   @HostListener('pointerdown', ['$event']) | ||||
|   onPointerDown(event) { | ||||
|     this.onPointerMove(event); | ||||
|     event.preventDefault(); | ||||
|   onPointerDown(event): void { | ||||
|     if (this.epochSvgElement.nativeElement?.contains(event.target)) { | ||||
|       this.onPointerMove(event); | ||||
|       event.preventDefault(); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   @HostListener('pointermove', ['$event']) | ||||
|   onPointerMove(event) { | ||||
|     this.tooltipPosition = { x: event.clientX, y: event.clientY }; | ||||
|     this.cd.markForCheck(); | ||||
|   onPointerMove(event): void { | ||||
|     if (this.epochSvgElement.nativeElement?.contains(event.target)) { | ||||
|       this.tooltipPosition = { x: event.clientX, y: event.clientY }; | ||||
|       this.cd.markForCheck(); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   onHover(event, rect): void { | ||||
|   onHover(_, rect): void { | ||||
|     this.hoverSection = rect; | ||||
|   } | ||||
| 
 | ||||
|   onBlur(event): void { | ||||
|   onBlur(): void { | ||||
|     this.hoverSection = null; | ||||
|   } | ||||
| } | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user