Select annotation

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html

@@ -21,7 +21,9 @@
     <div class="left-container">
       <redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
                             [fileStatus]="appStateService.activeFile"
-                            (fileReady)="fileReady('ANNOTATED')" (annotationsAdded)="handleAnnotationsAdded($event)"></redaction-pdf-viewer>
+                            (fileReady)="fileReady('ANNOTATED')"
+                            (annotationSelected)="handleAnnotationSelected($event)"
+                            (annotationsAdded)="handleAnnotationsAdded($event)"></redaction-pdf-viewer>
       <redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
                             (fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
     </div>
@@ -47,8 +49,13 @@
           </div>
         </div>
         <div class="tab-content" *ngIf="selectedTab === 'ANNOTATIONS'">
-          <div *ngFor="let annotation of annotations">
-            {{annotation.Id+ ' '+annotation.getPageNumber() + ' content: ' + annotation.getContents() + 'status: '+annotation.getStatus()}}
+          <div *ngFor="let annotation of annotations"
+               class="annotation" (click)="selectAnnotation(annotation)"
+               [ngClass]="{ active: selectedAnnotation === annotation }">
+            <div>{{annotation.Id}}</div>
+            <div>Page {{annotation.getPageNumber()}}</div>
+            <div>{{annotation.getContents()}}</div>
+            <div>{{annotation.getStatus()}}</div>
           </div>
         </div>
         <div class="tab-content" *ngIf="selectedTab === 'INFO'">

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss

@@ -17,6 +17,8 @@ redaction-pdf-viewer {
 
   .tabs-title-row {
     border-bottom: 1px solid rgba(226,228,233,0.9);
+    box-sizing: border-box;
+    height: 45px;
 
     .tab {
       font-size: 13px;
@@ -40,8 +42,12 @@ redaction-pdf-viewer {
   .actions-row {
     margin: $right-container-padding $right-container-padding 0;
   }
+
   .tab-content {
     padding: $right-container-padding;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: calc(100vh - 110px - 40px - 45px - 3*#{$right-container-padding});
   }
 
   .stats-subtitle {
@@ -55,4 +61,15 @@ redaction-pdf-viewer {
 
     margin-left: 12px;
   }
+
+  .annotation {
+    border: 1px solid $grey-2;
+    padding: 14px;
+    font-size: 12px;
+    cursor: pointer;
+
+    &.active {
+      border-left: 2px solid $red-1;
+    }
+  }
 }

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {FileUploadControllerService, ProjectControllerService, StatusControllerService} from '@redaction/red-ui-http';
 import {TranslateService} from '@ngx-translate/core';
@@ -8,6 +8,7 @@ import {AppStateService} from '../../../state/app-state.service';
 import {FileDetailsDialogComponent} from './file-details-dialog/file-details-dialog.component';
 import {ViewerSyncService} from '../service/viwer-sync.service';
 import {Annotations} from "@pdftron/webviewer";
+import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
 
 @Component({
   selector: 'redaction-file-preview-screen',
@@ -18,9 +19,14 @@ export class FilePreviewScreenComponent implements OnInit {
 
   projectId: string;
   fileId: string;
-  annotations: Annotations.Annotation[] = [];
+  public annotations: Annotations.Annotation[] = [];
   public selectedTab: 'ANNOTATIONS' | 'INFO' = 'ANNOTATIONS';
   private _readyViewers: string[] = [];
+  public selectedAnnotation: Annotations.Annotation;
+
+  @ViewChild(PdfViewerComponent)
+  private _viewerComponent: PdfViewerComponent;
+
 
   constructor(
     public readonly appStateService: AppStateService,
@@ -78,10 +84,18 @@ export class FilePreviewScreenComponent implements OnInit {
 
   handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
     this._changeDetectorRef.detectChanges();
-    for(let annotation of annotations){
+    for(const annotation of annotations){
       if(annotation.Id.indexOf(':')>=0){
         this.annotations.push(annotation);
       }
     }
   }
+
+  public handleAnnotationSelected(annotation: Annotations.Annotation) {
+    this.selectedAnnotation = annotation;
+  }
+
+  public selectAnnotation(annotation: Annotations.Annotation) {
+    this._viewerComponent.selectAnnotation(annotation);
+  }
 }

apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts

@@ -37,6 +37,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() fileStatus: FileStatus;
   @Output() fileReady = new EventEmitter();
   @Output() annotationsAdded = new EventEmitter<Annotations.Annotation[]>();
+  @Output() annotationSelected = new EventEmitter<Annotations.Annotation>();
 
   @ViewChild('viewer', {static: true}) viewer: ElementRef;
   wvInstance: WebViewerInstance;
@@ -87,6 +88,14 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       });
 
+      instance.annotManager.on('annotationSelected', ((annotationList, action) => {
+        if (action === 'deselected') {
+          this.annotationSelected.emit(null);
+        } else {
+          this.annotationSelected.emit(annotationList[0]);
+        }
+      }));
+
       instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
       instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
     });
@@ -123,8 +132,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
       'textSquigglyToolButton',
       'textStrikeoutToolButton',
       'linkButton',
-      // 'toggleNotesButton',
-      // 'notesPanel'
+      'toggleNotesButton',
+      'notesPanel'
     ]);
 
     this.wvInstance.textPopup.add(<any>{
@@ -147,5 +156,13 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
     this._viewerSyncService.deregisterInstance(this.fileType);
   }
 
+  public selectAnnotation(annotation: Annotations.Annotation) {
+    this.wvInstance.annotManager.deselectAllAnnotations();
+    this.wvInstance.annotManager.selectAnnotation(annotation);
+    this.wvInstance.docViewer.displayPageLocation(
+      annotation.getPageNumber(),
+      0,
+      annotation.getY() - 100);
+  }
 }
 

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -38,6 +38,7 @@ html, body {
 
   .actions-row {
     display: flex;
+    height: 40px;
 
     > div {
       padding: 10px;