add paginated virtual scrolling to blockchain blocks bar

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

@@ -19,16 +19,33 @@ export class StartComponent implements OnInit, OnDestroy {
   blockchainScrollLeftInit: number;
   timeLtrSubscription: Subscription;
   timeLtr: boolean = this.stateService.timeLtr.value;
+  chainTipSubscription: Subscription;
+  chainTip: number = -1;
+  markBlockSubscription: Subscription;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
 
+  isMobile: boolean = false;
+  blockWidth = 155;
+  blocksPerPage: number = 1;
+  pageWidth: number;
+  firstPageWidth: number;
+  pageIndex: number = 0;
+  pages: any[] = [];
+
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
+    this.firstPageWidth = 40 + (this.blockWidth * this.stateService.env.KEEP_BLOCKS_AMOUNT);
+    this.onResize();
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
     });
+    this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
+      this.chainTip = height;
+      this.updatePages();
+    });
     this.stateService.blocks$
       .subscribe((blocks: any) => {
         if (this.stateService.network !== '') {
@@ -55,6 +72,31 @@ export class StartComponent implements OnInit, OnDestroy {
       });
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isMobile = window.innerWidth <= 767.98;
+    let firstVisibleBlock;
+    let offset;
+    this.pages.forEach(page => {
+      const left = page.offset - (this.blockchainContainer?.nativeElement?.scrollLeft || 0);
+      const right = left + this.pageWidth;
+      if (left <= 0 && right > 0) {
+        const blockIndex = Math.max(0, Math.floor(left / -this.blockWidth));
+        firstVisibleBlock = page.height - blockIndex;
+        offset = left + (blockIndex * this.blockWidth);
+      }
+    });
+
+    this.blocksPerPage = Math.ceil(window.innerWidth / this.blockWidth);
+    this.pageWidth = this.blocksPerPage * this.blockWidth;
+
+    if (firstVisibleBlock != null) {
+      this.scrollToBlock(firstVisibleBlock, offset);
+    } else {
+      this.updatePages();
+    }
+  }
+
   onMouseDown(event: MouseEvent) {
     this.mouseDragStartX = event.clientX;
     this.blockchainScrollLeftInit = this.blockchainContainer.nativeElement.scrollLeft;
@@ -70,7 +112,7 @@ export class StartComponent implements OnInit, OnDestroy {
     if (this.mouseDragStartX != null) {
       this.stateService.setBlockScrollingInProgress(true);
       this.blockchainContainer.nativeElement.scrollLeft =
-        this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX
+        this.blockchainScrollLeftInit + this.mouseDragStartX - event.clientX;
     }
   }
   @HostListener('document:mouseup', [])
@@ -79,6 +121,108 @@ export class StartComponent implements OnInit, OnDestroy {
     this.stateService.setBlockScrollingInProgress(false);
   }
 
+  onScroll(e) {
+    const middlePage = this.pageIndex === 0 ? this.pages[0] : this.pages[1];
+    // compensate for css transform
+    const translation = (this.isMobile ? window.innerWidth * 0.95 : window.innerWidth * 0.5);
+    const backThreshold = middlePage.offset + (this.pageWidth * 0.5) + translation;
+    const forwardThreshold = middlePage.offset - (this.pageWidth * 0.5) + translation;
+    if (this.timeLtr) {
+      if (e.target.scrollLeft < -backThreshold) {
+        if (this.shiftPagesBack()) {
+          e.target.scrollLeft += this.pageWidth;
+        }
+      } else if (e.target.scrollLeft > -forwardThreshold) {
+        if (this.shiftPagesForward()) {
+          e.target.scrollLeft -= this.pageWidth;
+        }
+      }
+    } else {
+      if (e.target.scrollLeft > backThreshold) {
+        if (this.shiftPagesBack()) {
+          e.target.scrollLeft -= this.pageWidth;
+        }
+      } else if (e.target.scrollLeft < forwardThreshold) {
+        if (this.shiftPagesForward()) {
+          e.target.scrollLeft += this.pageWidth;
+        }
+      }
+    }
+  }
+
+  scrollToBlock(height, blockOffset = 0) {
+    if (!this.blockchainContainer?.nativeElement) {
+      setTimeout(() => { this.scrollToBlock(height, blockOffset); }, 50);
+      return;
+    }
+    let targetHeight = this.isMobile ? height - 1 : height;
+    const middlePageIndex = this.getPageIndexOf(targetHeight);
+    const pages = [];
+    if (middlePageIndex > 0) {
+      this.pageIndex = middlePageIndex - 1;
+      const middlePage = this.getPageAt(middlePageIndex);
+      const left = middlePage.offset - this.blockchainContainer.nativeElement.scrollLeft;
+      const blockIndex = middlePage.height - targetHeight;
+      const targetOffset = (this.blockWidth * blockIndex) + left;
+      const deltaOffset = targetOffset - blockOffset;
+      if (this.pageIndex > 0) {
+        pages.push(this.getPageAt(this.pageIndex));
+      }
+      pages.push(middlePage);
+      pages.push(this.getPageAt(middlePageIndex + 1));
+      this.pages = pages;
+      this.blockchainContainer.nativeElement.scrollLeft += deltaOffset;
+    } else {
+      this.pageIndex = 0;
+      this.updatePages();
+    }
+  }
+
+  updatePages() {
+    const pages = [];
+    if (this.pageIndex > 0) {
+      pages.push(this.getPageAt(this.pageIndex));
+    }
+    pages.push(this.getPageAt(this.pageIndex + 1));
+    pages.push(this.getPageAt(this.pageIndex + 2));
+    this.pages = pages;
+  }
+
+  shiftPagesBack(): boolean {
+    this.pageIndex++;
+    this.pages.forEach(page => page.offset -= this.pageWidth);
+    if (this.pageIndex !== 1) {
+      this.pages.shift();
+    }
+    this.pages.push(this.getPageAt(this.pageIndex + 2));
+    return true;
+  }
+
+  shiftPagesForward(): boolean {
+    if (this.pageIndex > 0) {
+      this.pageIndex--;
+      this.pages.forEach(page => page.offset += this.pageWidth);
+      this.pages.pop();
+      if (this.pageIndex) {
+        this.pages.unshift(this.getPageAt(this.pageIndex));
+      }
+      return true;
+    }
+    return false;
+  }
+
+  getPageAt(index: number) {
+    return {
+      offset: this.firstPageWidth + (this.pageWidth * (index - 1 - this.pageIndex)),
+      height: this.chainTip - 8 - ((index - 1) * this.blocksPerPage),
+    };
+  }
+
+  getPageIndexOf(height: number): number {
+    const delta = this.chainTip - 8 - height;
+    return Math.max(0, Math.floor(delta / this.blocksPerPage) + 1);
+  }
+
   ngOnDestroy() {
     this.timeLtrSubscription.unsubscribe();
   }