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

Annotations wrapper more work

Browse Source
This commit is contained in:
Timo Bejan 2020-10-29 14:34:10 +02:00
parent 01a7dc8abe
commit cabe7f834d
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,13 +163,13 @@ export class FilePreviewScreenComponent implements OnInit {
return Object.keys(this.displayedAnnotations).map((key) => Number(key)); return Object.keys(this.displayedAnnotations).map((key) => Number(key));
} }
public handleAnnotationSelected(annotation: Annotations.Annotation) { public handleAnnotationSelected(annotation: AnnotationWrapper) {
this.selectedAnnotation = new AnnotationWrapper(annotation); this.selectedAnnotation = annotation;
this.scrollToSelectedAnnotation(); this.scrollToSelectedAnnotation();
this._changeDetectorRef.detectChanges(); this._changeDetectorRef.detectChanges();
} }
public selectAnnotation(annotation: Annotations.Annotation) { public selectAnnotation(annotation: AnnotationWrapper) {
this._viewerComponent.selectAnnotation(annotation); this._viewerComponent.selectAnnotation(annotation);
} }
@ -354,21 +354,17 @@ export class FilePreviewScreenComponent implements OnInit {
if (pageIdx !== -1) { if (pageIdx !== -1) {
// Displayed page has annotations // Displayed page has annotations
this.selectAnnotation( this.selectAnnotation(
this.displayedAnnotations[this.activeViewerPage].annotations[0].annotation this.displayedAnnotations[this.activeViewerPage].annotations[0]
); );
} else { } else {
// Displayed page doesn't have annotations // Displayed page doesn't have annotations
if ($event.key === 'ArrowDown') { if ($event.key === 'ArrowDown') {
const nextPage = this._nextPageWithAnnotations(); const nextPage = this._nextPageWithAnnotations();
this.selectAnnotation( this.selectAnnotation(this.displayedAnnotations[nextPage].annotations[0]);
this.displayedAnnotations[nextPage].annotations[0].annotation
);
} else { } else {
const prevPage = this._prevPageWithAnnotations(); const prevPage = this._prevPageWithAnnotations();
const prevPageAnnotations = this.displayedAnnotations[prevPage].annotations; const prevPageAnnotations = this.displayedAnnotations[prevPage].annotations;
this.selectAnnotation( this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
prevPageAnnotations[prevPageAnnotations.length - 1].annotation
);
} }
} }
} else { } else {
@ -380,26 +376,24 @@ export class FilePreviewScreenComponent implements OnInit {
if ($event.key === 'ArrowDown') { if ($event.key === 'ArrowDown') {
if (idx + 1 !== annotationsOnPage.length) { if (idx + 1 !== annotationsOnPage.length) {
// If not last item in page // If not last item in page
this.selectAnnotation(annotationsOnPage[idx + 1].annotation); this.selectAnnotation(annotationsOnPage[idx + 1]);
} else if (pageIdx + 1 < this.displayedPages.length) { } else if (pageIdx + 1 < this.displayedPages.length) {
// If not last page // If not last page
const nextPageAnnotations = this.displayedAnnotations[ const nextPageAnnotations = this.displayedAnnotations[
this.displayedPages[pageIdx + 1] this.displayedPages[pageIdx + 1]
].annotations; ].annotations;
this.selectAnnotation(nextPageAnnotations[0].annotation); this.selectAnnotation(nextPageAnnotations[0]);
} }
} else { } else {
if (idx !== 0) { if (idx !== 0) {
// If not first item in page // If not first item in page
this.selectAnnotation(annotationsOnPage[idx - 1].annotation); this.selectAnnotation(annotationsOnPage[idx - 1]);
} else if (pageIdx) { } else if (pageIdx) {
// If not first page // If not first page
const prevPageAnnotations = this.displayedAnnotations[ const prevPageAnnotations = this.displayedAnnotations[
this.displayedPages[pageIdx - 1] this.displayedPages[pageIdx - 1]
].annotations; ].annotations;
this.selectAnnotation( this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
prevPageAnnotations[prevPageAnnotations.length - 1].annotation
);
} }
} }
} }
@ -471,10 +465,10 @@ export class FilePreviewScreenComponent implements OnInit {
this.viewReady = true; this.viewReady = true;
} }
handleAnnotationsAdded(annotations: Annotations.Annotation[]) { handleAnnotationsAdded(annotations: AnnotationWrapper[]) {
// replacing array causes UI flicker // replacing array causes UI flicker
this.annotations.splice(0, this.annotations.length); this.annotations.splice(0, this.annotations.length);
this.annotations.push(...AnnotationUtils.filterAndConvertAnnotations(annotations)); this.annotations.push(...annotations);
this.filters = this._filtersService.getFilters( this.filters = this._filtersService.getFilters(
this.appStateService.dictionaryData, this.appStateService.dictionaryData,
this.annotations this.annotations
@ -489,7 +483,7 @@ export class FilePreviewScreenComponent implements OnInit {
} }
private _getColor(manualRedactionEntry: ManualRedactionEntry) { private _getColor(manualRedactionEntry: ManualRedactionEntry) {
let color = this.appStateService.isActiveProjectOwner const color = this.appStateService.isActiveProjectOwner
? this.appStateService.getDictionaryColor('request') ? this.appStateService.getDictionaryColor('request')
: this.appStateService.getDictionaryColor(manualRedactionEntry.type); : this.appStateService.getDictionaryColor(manualRedactionEntry.type);
const rgbColor = hexToRgb(color); const rgbColor = hexToRgb(color);

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

@ -20,6 +20,8 @@ import { Subject } from 'rxjs';
import { throttleTime } from 'rxjs/operators'; import { throttleTime } from 'rxjs/operators';
import { ManualRedactionEntryWrapper } from '../model/manual-redaction-entry.wrapper'; import { ManualRedactionEntryWrapper } from '../model/manual-redaction-entry.wrapper';
import { AppStateService } from '../../../state/app-state.service'; import { AppStateService } from '../../../state/app-state.service';
import { AnnotationWrapper } from '../model/annotation.wrapper';
import { AnnotationUtils } from '../../../utils/annotation-utils';
export interface ViewerState { export interface ViewerState {
displayMode?: any; displayMode?: any;
@ -44,8 +46,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
@Input() fileStatus: FileStatus; @Input() fileStatus: FileStatus;
@Output() fileReady = new EventEmitter(); @Output() fileReady = new EventEmitter();
@Output() annotationsAdded = new EventEmitter<Annotations.Annotation[]>(); @Output() annotationsAdded = new EventEmitter<AnnotationWrapper[]>();
@Output() annotationSelected = new EventEmitter<Annotations.Annotation>(); @Output() annotationSelected = new EventEmitter<AnnotationWrapper>();
@Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntryWrapper>(); @Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntryWrapper>();
@Output() pageChanged = new EventEmitter<number>(); @Output() pageChanged = new EventEmitter<number>();
@Output() keyUp = new EventEmitter<KeyboardEvent>(); @Output() keyUp = new EventEmitter<KeyboardEvent>();
@ -69,10 +71,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
this._restoreViewerState = this._restoreViewerState.bind(this); this._restoreViewerState = this._restoreViewerState.bind(this);
// always publish all existing annotations this way everything gets drawn always // always publish all existing annotations this way everything gets drawn always
this._annotationEventDebouncer.pipe(throttleTime(300)).subscribe((value) => { this._annotationEventDebouncer.pipe(throttleTime(300)).subscribe((value) => {
this.annotationsAdded.emit(this.instance.annotManager.getAnnotationsList()); this.annotationsAdded.emit(
AnnotationUtils.filterAndConvertAnnotations(
this.instance.annotManager.getAnnotationsList()
)
);
// nasty double-emit fix, the annotationList is not updated when the event is fired // nasty double-emit fix, the annotationList is not updated when the event is fired
setTimeout( setTimeout(
() => this.annotationsAdded.emit(this.instance.annotManager.getAnnotationsList()), () =>
this.annotationsAdded.emit(
AnnotationUtils.filterAndConvertAnnotations(
this.instance.annotManager.getAnnotationsList()
)
),
200 200
); );
}); });
@ -112,7 +123,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
if (action === 'deselected') { if (action === 'deselected') {
this.annotationSelected.emit(null); this.annotationSelected.emit(null);
} else { } else {
this.annotationSelected.emit(annotationList[0]); this.annotationSelected.emit(new AnnotationWrapper(annotationList[0]));
} }
}); });
@ -243,10 +254,10 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
this.instance.setToolbarGroup('toolbarGroup-View'); this.instance.setToolbarGroup('toolbarGroup-View');
} }
public selectAnnotation(annotation: Annotations.Annotation) { public selectAnnotation(annotation: AnnotationWrapper) {
this.instance.annotManager.deselectAllAnnotations(); this.instance.annotManager.deselectAllAnnotations();
this.instance.annotManager.selectAnnotation(annotation); this.instance.annotManager.selectAnnotation(annotation.annotation);
this.navigateToPage(annotation.getPageNumber()); this.navigateToPage(annotation.pageNumber);
} }
public navigateToPage(pageNumber: number) { public navigateToPage(pageNumber: number) {