Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Navigate annotations with arrows

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-23 01:06:03 +03:00
parent f97e523594
commit 521d77dd99
3 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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]);
}
}
}
}
}

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

@ -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' });
});
}