From 11dfe604511eacc13a92ea7b650df4317a030850 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Thu, 10 Jun 2021 11:39:41 +0300 Subject: [PATCH] RED-1596: don't reuse component without open file permissions --- .../pdf-viewer/pdf-viewer.component.ts | 155 +++++++++--------- .../file-preview-screen.component.html | 3 +- .../file-preview-screen.component.ts | 17 +- .../services/pdf-viewer-data.service.ts | 38 ++--- 4 files changed, 104 insertions(+), 109 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts index 1214932e8..6c704c95e 100644 --- a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts @@ -78,8 +78,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { } } - ngAfterViewInit(): void { - this._loadViewer(); + async ngAfterViewInit(): Promise { + await this._loadViewer(); } deselectAllAnnotations() { @@ -135,99 +135,98 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { return this.instance.annotManager.getAnnotationById(id); } - private _loadViewer() { - WebViewer( + private async _loadViewer() { + this.instance = await WebViewer( { licenseKey: environment.licenseKey ? atob(environment.licenseKey) : null, path: this._convertPath('/assets/wv-resources'), css: this._convertPath('/assets/pdftron/stylesheet.css') }, this.viewer.nativeElement - ).then(instance => { - this.instance = instance; - this._setSelectionMode(); - this._disableElements(); - this._disableHotkeys(); - this._configureTextPopup(); + ); - instance.annotManager.on('annotationSelected', (annotations, action) => { - this.annotationSelected.emit( - instance.annotManager.getSelectedAnnotations().map(ann => ann.Id) + this._setSelectionMode(); + this._disableElements(); + this._disableHotkeys(); + this._configureTextPopup(); + + this.instance.annotManager.on('annotationSelected', (annotations, action) => { + this.annotationSelected.emit( + this.instance.annotManager.getSelectedAnnotations().map(ann => ann.Id) + ); + if (action === 'deselected') { + this._toggleRectangleAnnotationAction(true); + } else { + this._configureAnnotationSpecificActions(annotations); + this._toggleRectangleAnnotationAction( + annotations.length === 1 && annotations[0].ReadOnly ); - if (action === 'deselected') { - this._toggleRectangleAnnotationAction(true); - } else { - this._configureAnnotationSpecificActions(annotations); - this._toggleRectangleAnnotationAction( - annotations.length === 1 && annotations[0].ReadOnly - ); - } - }); + } + }); - 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); - } - }); + this.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' + ) { + this.instance.annotManager.selectAnnotations(annotations); + } + }); - instance.docViewer.on('pageNumberUpdated', pageNumber => { - if (this.shouldDeselectAnnotationsOnPageChange) { - this.deselectAllAnnotations(); - } - this._ngZone.run(() => this.pageChanged.emit(pageNumber)); - }); + this.instance.docViewer.on('pageNumberUpdated', pageNumber => { + if (this.shouldDeselectAnnotationsOnPageChange) { + this.deselectAllAnnotations(); + } + this._ngZone.run(() => this.pageChanged.emit(pageNumber)); + }); - instance.docViewer.on('documentLoaded', this._documentLoaded); + this.instance.docViewer.on('documentLoaded', this._documentLoaded); - instance.docViewer.on('keyUp', $event => { - // arrows and full-screen - if ($event.target?.tagName?.toLowerCase() !== 'input') { - if ($event.key.startsWith('Arrow') || $event.key === 'f') { - this._ngZone.run(() => { - this.keyUp.emit($event); - }); - $event.preventDefault(); - $event.stopPropagation(); - } - } - - if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) { + this.instance.docViewer.on('keyUp', $event => { + // arrows and full-screen + if ($event.target?.tagName?.toLowerCase() !== 'input') { + if ($event.key.startsWith('Arrow') || $event.key === 'f') { + this._ngZone.run(() => { + this.keyUp.emit($event); + }); $event.preventDefault(); $event.stopPropagation(); } - }); + } - instance.docViewer.on('textSelected', (quads, selectedText) => { - this._selectedText = selectedText; - if (selectedText.length > 2 && this.canPerformActions) { - this.instance.enableElements(['add-dictionary', 'add-false-positive']); - } else { - this.instance.disableElements(['add-dictionary', 'add-false-positive']); - } - }); - - instance.iframeWindow.addEventListener('visibilityChanged', (event: any) => { - if (event.detail.element === 'searchPanel') { - const inputElement = instance.iframeWindow.document.getElementById( - 'SearchPanel__input' - ) as HTMLInputElement; - setTimeout(() => { - inputElement.value = ''; - }, 0); - if (!event.detail.isVisible) { - instance.docViewer.clearSearchResults(); - } - } - }); - - this._loadDocument(); + if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) { + $event.preventDefault(); + $event.stopPropagation(); + } }); + + this.instance.docViewer.on('textSelected', (quads, selectedText) => { + this._selectedText = selectedText; + if (selectedText.length > 2 && this.canPerformActions) { + this.instance.enableElements(['add-dictionary', 'add-false-positive']); + } else { + this.instance.disableElements(['add-dictionary', 'add-false-positive']); + } + }); + + this.instance.iframeWindow.addEventListener('visibilityChanged', (event: any) => { + if (event.detail.element === 'searchPanel') { + const inputElement = this.instance.iframeWindow.document.getElementById( + 'SearchPanel__input' + ) as HTMLInputElement; + setTimeout(() => { + inputElement.value = ''; + }, 0); + if (!event.detail.isVisible) { + this.instance.docViewer.clearSearchResults(); + } + } + }); + + this._loadDocument(); } private _setSelectionMode(): void { diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html index cc13c7d41..1e65d6365 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html @@ -242,8 +242,7 @@ (closeDocumentInfoView)="viewDocumentInfo = false" *ngIf="viewReady && viewDocumentInfo" [file]="fileData.fileStatus.fileStatus" - > - + > ) to display the page in fullscreen */ diff --git a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts index 7c4d32f1c..c02562776 100644 --- a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts @@ -31,33 +31,27 @@ export class PdfViewerDataService { } loadActiveFileData(): Observable { - const fileObs = this.downloadOriginalFile(this._appStateService.activeFile); - const reactionLogObs = this._redactionLogControllerService - .getRedactionLog( - this._appStateService.activeDossierId, - this._appStateService.activeFileId - ) + const dossierId = this._appStateService.activeDossierId; + const fileId = this._appStateService.activeFileId; + + const file$ = this.downloadOriginalFile(this._appStateService.activeFile); + const reactionLog$ = this._redactionLogControllerService + .getRedactionLog(dossierId, fileId) .pipe(catchError(() => of({}))); - const redactionChangeLogObs = this._redactionLogControllerService - .getRedactionChangeLog( - this._appStateService.activeDossierId, - this._appStateService.activeFileId - ) + const redactionChangeLog$ = this._redactionLogControllerService + .getRedactionChangeLog(dossierId, fileId) .pipe(catchError(() => of({}))); - const manualRedactionsObs = this._manualRedactionControllerService - .getManualRedaction( - this._appStateService.activeDossierId, - this._appStateService.activeFileId - ) + const manualRedactions$ = this._manualRedactionControllerService + .getManualRedaction(dossierId, fileId) .pipe(catchError(() => of({}))); - const viewedPagesObs = this.getViewedPagesForActiveFile(); + const viewedPages$ = this.getViewedPagesForActiveFile(); return forkJoin([ - fileObs, - reactionLogObs, - redactionChangeLogObs, - manualRedactionsObs, - viewedPagesObs + file$, + reactionLog$, + redactionChangeLog$, + manualRedactions$, + viewedPages$ ]).pipe(map(data => new FileDataModel(this._appStateService.activeFile, ...data))); }