Merge pull request #1024 from nymkappa/feature/blocks-mouse-scroll

User can drag the blockchain blocks horizontally with the mouse

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -1,7 +1,8 @@
 <div class="blocks-container blockchain-blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
     <div class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
-      <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
+      <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" 
+        class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
       <div class="block-height">
         <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
       </div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -15,6 +15,10 @@
   text-decoration: none;
 }
 
+.blockLink.disabled {
+  pointer-events: none;
+}
+
 .mined-block {
   position: absolute;
   top: 0px;

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -41,7 +41,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   };
 
   constructor(
-    private stateService: StateService,
+    public stateService: StateService,
     private router: Router,
     private cd: ChangeDetectorRef,
   ) { }

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -18,6 +18,11 @@
 .blockchain-wrapper {
   overflow: hidden;
   height: 250px;
+
+  -webkit-user-select: none; /* Safari */        
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
 }
 
 .position-container {

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -3,7 +3,8 @@
     <div class="flashing">
       <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
         <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
-          <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
+          <a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
+            class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
           <div class="block-body">
             <div class="fees">
               ~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -117,6 +117,10 @@
   z-index: 10;
 }
 
+.blockLink.disabled {
+  pointer-events: none;
+}
+
 .blockLink:hover {
   text-decoration: none;
 }

frontend/src/app/components/start/start.component.html

@@ -8,8 +8,11 @@
 
 <div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
 
-<div id="blockchain-container" dir="ltr">
-  <app-blockchain></app-blockchain>
+<div id="blockchain-container" dir="ltr" #blockchainContainer
+  (mousedown)="onMouseDown($event)"
+  (dragstart)="onDragStart($event)"
+>
+<app-blockchain></app-blockchain>
 </div>
 
 <router-outlet></router-outlet>

frontend/src/app/components/start/start.component.ts

@@ -1,8 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
 import { specialBlocks } from 'src/app/app.constants';
-import { takeLast } from 'rxjs/operators';
 
 @Component({
   selector: 'app-start',
@@ -16,6 +15,9 @@ export class StartComponent implements OnInit {
   countdown = 0;
   specialEvent = false;
   eventName = '';
+  mouseDragStartX: number;
+  blockchainScrollLeftInit: number;
+  @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
 
   constructor(
     private websocketService: WebsocketService,
@@ -50,4 +52,27 @@ export class StartComponent implements OnInit {
       });
   }
 
+  onMouseDown(event: MouseEvent) {
+    this.mouseDragStartX = event.clientX;
+    this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
+  }
+  onDragStart(event: MouseEvent) { // Ignore Firefox annoying default drag behavior
+    event.preventDefault();
+  }
+
+  // We're catching the whole page event here because we still want to scroll blocks
+  // even if the mouse leave the blockchain blocks container. Same idea for mouseup below.
+  @HostListener('document:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent): void {
+    if (this.mouseDragStartX != null) {
+      this.stateService.setBlockScrollingInProgress(true);
+      this.blockchainContainer.nativeElement.scrollLeft =
+        this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX
+    }
+  }
+  @HostListener('document:mouseup', [])
+  onMouseUp() {
+    this.mouseDragStartX = null;
+    this.stateService.setBlockScrollingInProgress(false);
+  }
 }

frontend/src/app/services/state.service.ts

@@ -89,6 +89,8 @@ export class StateService {
   markBlock$ = new ReplaySubject<MarkBlockState>();
   keyNavigation$ = new Subject<KeyboardEvent>();
 
+  blockScrolling$: Subject<boolean> = new Subject<boolean>();
+
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,
     private router: Router,
@@ -176,4 +178,8 @@ export class StateService {
     if (!prop) { return false; }
     return document[prop];
   }
+
+  setBlockScrollingInProgress(value: boolean) {
+    this.blockScrolling$.next(value);
+  }
 }