diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts index 7339cc2c8..a56d1d7f9 100644 --- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts @@ -64,7 +64,7 @@ export class FileWorkloadComponent { } public annotationIsSelected(annotation: AnnotationWrapper) { - return this.selectedAnnotations?.find((a) => a.id === annotation.id); + return this.selectedAnnotations?.find((a) => a?.id === annotation.id); } public logAnnotation(annotation: AnnotationWrapper) { @@ -140,7 +140,7 @@ export class FileWorkloadComponent { if (!this.selectedAnnotations || this.selectedAnnotations.length === 0) { return; } - const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation.id}"].active`); + const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation?.id}"].active`); FileWorkloadComponent._scrollToFirstElement(elements); } diff --git a/apps/red-ui/src/app/modules/projects/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/projects/components/pdf-viewer/pdf-viewer.component.ts index 70e24b7b2..701917417 100644 --- a/apps/red-ui/src/app/modules/projects/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/projects/components/pdf-viewer/pdf-viewer.component.ts @@ -1,27 +1,11 @@ -import { - AfterViewInit, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - Input, - NgZone, - OnChanges, - OnInit, - Output, - SimpleChanges, - ViewChild -} from '@angular/core'; -import { AppConfigService } from '../../../app-config/app-config.service'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; import { ManualRedactionEntry, Rectangle } from '@redaction/red-ui-http'; import WebViewer, { Annotations, Tools, WebViewerInstance } from '@pdftron/webviewer'; import { TranslateService } from '@ngx-translate/core'; import { ManualRedactionEntryWrapper } from '../../../../models/file/manual-redaction-entry.wrapper'; -import { AppStateService } from '../../../../state/app-state.service'; import { AnnotationWrapper } from '../../../../models/file/annotation.wrapper'; import { ManualAnnotationService } from '../../services/manual-annotation.service'; import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper'; -import { KeycloakService } from 'keycloak-angular'; import { environment } from '../../../../../environments/environment'; import { AnnotationDrawService } from '../../services/annotation-draw.service'; import { AnnotationActionsService } from '../../services/annotation-actions.service'; @@ -36,6 +20,8 @@ import Tool = Tools.Tool; }) export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { private _selectedText = ''; + private _defaultTool: Tool; + private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape']; @Input() fileData: Blob; @Input() fileStatus: FileStatusWrapper; @@ -54,20 +40,13 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { @ViewChild('viewer', { static: true }) viewer: ElementRef; instance: WebViewerInstance; - private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape']; - private _defaultTool: Tool; - constructor( - private readonly kc: KeycloakService, - private readonly _appStateService: AppStateService, private readonly _translateService: TranslateService, - private readonly _appConfigService: AppConfigService, private readonly _manualAnnotationService: ManualAnnotationService, private readonly _ngZone: NgZone, private readonly _userPreferenceService: UserPreferenceService, private readonly _annotationDrawService: AnnotationDrawService, - private readonly _annotationActionsService: AnnotationActionsService, - private readonly _changeDetectorRef: ChangeDetectorRef + private readonly _annotationActionsService: AnnotationActionsService ) {} ngOnInit() { @@ -103,22 +82,30 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { this._disableHotkeys(); this._configureTextPopup(); - instance.annotManager.on('annotationSelected', (annotationList, action) => { + instance.annotManager.on('annotationSelected', (annotations, action) => { if (action === 'deselected') { this.annotationSelected.emit([]); this._toggleRectangleAnnotationAction(true); } else { - this._configureAnnotationSpecificActions(annotationList); - this._toggleRectangleAnnotationAction(annotationList.length === 1 && annotationList[0].ReadOnly); - this.annotationSelected.emit(annotationList.map((a) => a.Id)); + this._configureAnnotationSpecificActions(annotations); + this._toggleRectangleAnnotationAction(annotations.length === 1 && annotations[0].ReadOnly); + this.annotationSelected.emit(annotations.map((a) => a.Id)); } }); - instance.docViewer.on('pageNumberUpdated', (p) => { + instance.annotManager.on('annotationChanged', (annotations) => { + // when a rectangle is drawn, it returns one annotation with tool name 'AnnotationCreateRectangle; + // this will auto select rectangle after drawing + if (annotations.length === 1 && annotations[0].ToolName === 'AnnotationCreateRectangle') { + instance.annotManager.selectAnnotations(annotations); + } + }); + + instance.docViewer.on('pageNumberUpdated', (pageNumber) => { if (this.shouldDeselectAnnotationsOnPageChange) { this.instance.annotManager.deselectAllAnnotations(); } - this._ngZone.run(() => this.pageChanged.emit(p)); + this._ngZone.run(() => this.pageChanged.emit(pageNumber)); }); instance.docViewer.on('documentLoaded', this._documentLoaded); @@ -141,7 +128,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { } }); - instance.docViewer.on('textSelected', (quads, selectedText, pageNumber) => { + instance.docViewer.on('textSelected', (quads, selectedText) => { this._selectedText = selectedText; if (selectedText.length > 2 && this.canPerformActions) { this.instance.enableElements(['add-dictionary', 'add-false-positive']); @@ -212,7 +199,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { }); }); - this.instance.docViewer.getTool('AnnotationCreateRectangle').setStyles((currentStyle) => ({ + this.instance.docViewer.getTool('AnnotationCreateRectangle').setStyles(() => ({ StrokeThickness: 2, StrokeColor: this._annotationDrawService.getColor(this.instance, 'manual'), FillColor: this._annotationDrawService.getColor(this.instance, 'manual'), @@ -368,7 +355,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { for (const key of Object.keys(quads)) { for (const quad of quads[key]) { const page = parseInt(key, 10); - entry.positions.push(this.toPosition(page, convertQuads ? this._translateQuads(page, quad) : quad)); + entry.positions.push(this._toPosition(page, convertQuads ? this._translateQuads(page, quad) : quad)); } } entry.value = text; @@ -380,7 +367,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { return translateQuads(page, rotation, quads); } - private toPosition(page: number, selectedQuad: any): Rectangle { + private _toPosition(page: number, selectedQuad: any): Rectangle { const pageHeight = this.instance.docViewer.getPageHeight(page); const height = selectedQuad.y2 - selectedQuad.y4; return {