From 521d77dd992d11cad5d715bdd2517e13d9058ff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 23 Oct 2020 01:06:03 +0300
Subject: [PATCH] Navigate annotations with arrows

---
 .../file-preview-screen.component.html        |  2 ++
 .../file-preview-screen.component.ts          | 34 ++++++++++++++++++-
 .../file/pdf-viewer/pdf-viewer.component.ts   | 14 ++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 9c9370bbe..6d6558445 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -58,11 +58,13 @@
       <redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
                             [fileStatus]="appStateService.activeFile"
                             (fileReady)="fileReady('ANNOTATED')"
+                            (keyUp)="handleKeyEvent($event)"
                             (pageChanged)="viewerPageChanged($event)"
                             (manualAnnotationRequested)="openManualRedactionDialog($event)"
                             (annotationSelected)="handleAnnotationSelected($event)"
                             (annotationsAdded)="handleAnnotationsAdded($event)"></redaction-pdf-viewer>
       <redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
+                            (keyUp)="handleKeyEvent($event)"
                             (pageChanged)="viewerPageChanged($event)"
                             (manualAnnotationRequested)="openManualRedactionDialog($event)"
                             (fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index 9e95e7712..78622fce5 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ManualRedactionEntry, ReanalysisControllerService } from '@redaction/red-ui-http';
 import { AppStateService } from '../../../state/app-state.service';
@@ -272,4 +272,36 @@ export class FilePreviewScreenComponent implements OnInit {
   public isManuallyAddedAnnotation(annotation: Annotations.Annotation) {
     return annotation.Id.indexOf('request:') >= 0;
   }
+
+  @HostListener('window:keyup', ['$event'])
+  handleKeyEvent($event: KeyboardEvent) {
+    $event.preventDefault();
+
+    if (!this.selectedAnnotation) {
+      this.selectAnnotation(this.displayedAnnotations[this.displayedPages[0]].annotations[0]);
+    } else {
+      const page = this.selectedAnnotation.getPageNumber();
+      const pageIdx = this.displayedPages.indexOf(page);
+      const annotationsOnPage = this.displayedAnnotations[page].annotations;
+      const idx = annotationsOnPage.indexOf(this.selectedAnnotation);
+
+      if ($event.key === 'ArrowDown') {
+        if (idx + 1 !== annotationsOnPage.length) { // If not last item in page
+          this.selectAnnotation(annotationsOnPage[idx + 1]);
+        } else if (pageIdx + 1 < this.displayedPages.length) { // If not last page
+          const nextPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx + 1]].annotations;
+          this.selectAnnotation(nextPageAnnotations[0]);
+        }
+      }
+
+      if ($event.key === 'ArrowUp') {
+        if (idx !== 0) { // If not first item in page
+          this.selectAnnotation(annotationsOnPage[idx - 1]);
+        } else if (pageIdx) { // If not first page
+          const prevPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx - 1]].annotations;
+          this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
+        }
+      }
+    }
+  }
 }
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
index 37d024de8..799acf2fc 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@@ -33,6 +33,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @Output() annotationSelected = new EventEmitter<Annotations.Annotation>();
   @Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntry>();
   @Output() pageChanged = new EventEmitter<number>();
+  @Output() keyUp = new EventEmitter<KeyboardEvent>();
 
   @ViewChild('viewer', { static: true }) viewer: ElementRef;
   wvInstance: WebViewerInstance;
@@ -93,6 +94,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
       });
 
       instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
+
+      instance.docViewer.on('keyDown', ($event) => {
+        if ($event.key.startsWith('Arrow')) {
+          $event.preventDefault();
+        }
+      })
+
+      instance.docViewer.on('keyUp', ($event) => {
+        if ($event.key.startsWith('Arrow')) {
+          this.keyUp.emit($event);
+        }
+      })
+
       instance.loadDocument(pdfBlob, { filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf' });
     });
   }