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

RED-3988: load pdf viewer only when needed

Browse Source
This commit is contained in:
Dan Percic 2022-05-25 19:01:07 +03:00
parent 5dfa713e7d
commit 4ef935b699
9 changed files with 57 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/app-routing.module.ts
View File

@ -15,6 +15,7 @@ import { DashboardGuard } from '@guards/dashboard-guard.service';
import { TrashGuard } from '@guards/trash.guard';
import { ARCHIVE_ROUTE, BreadcrumbTypes, DOSSIER_ID, DOSSIER_TEMPLATE_ID, DOSSIERS_ARCHIVE, DOSSIERS_ROUTE, FILE_ID } from '@red/domain';
import { DossierFilesGuard } from '@guards/dossier-files-guard';
import { WebViewerLoadedGuard } from './modules/pdf-viewer/services/webviewer-loaded.guard';
const routes: Routes = [
{
@ -94,7 +95,7 @@ const routes: Routes = [
},
{
path: `:${DOSSIER_ID}/file/:${FILE_ID}`,
canActivate: [CompositeRouteGuard],
canActivate: [CompositeRouteGuard, WebViewerLoadedGuard],
data: {
routeGuards: [DossierFilesGuard],
breadcrumbs: [BreadcrumbTypes.dossierTemplate, BreadcrumbTypes.dossier, BreadcrumbTypes.file],

1
apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts
View File

@ -14,7 +14,6 @@ import { EntitiesService, shareLast, Toaster } from '@iqser/common-ui';
import { RedactionLogService } from '@services/files/redaction-log.service';
import { TextHighlightService } from '@services/files/text-highlight.service';
import { ViewModeService } from './view-mode.service';
import { Core } from '@pdftron/webviewer';
import dayjs from 'dayjs';
import { NGXLogger } from 'ngx-logger';
import { MultiSelectService } from './multi-select.service';

2
apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html
View File

@ -1 +1 @@
<input #input (input)="upload($event.target['files'])" accept="application/pdf" type="file" />
<input #input (input)="upload($event.target['files'])" accept="application/pdf" id="compareFileInput" type="file" />

4
apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts
View File

@ -20,7 +20,7 @@ import PDFDoc = Core.PDFNet.PDFDoc;
styleUrls: ['./compare-file-input.component.scss'],
})
export class CompareFileInputComponent {
@ViewChild('input', { static: true }) readonly input: ElementRef;
@ViewChild('input', { static: true }) private readonly _input: ElementRef;
constructor(
private readonly _pdf: PdfViewer,
@ -44,7 +44,7 @@ export class CompareFileInputComponent {
upload(files: FileList) {
const fileToCompare = files[0];
this.input.nativeElement.value = null;
this._input.nativeElement.value = null;
if (!fileToCompare) {
console.error('No file to compare!');

2
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
View File

@ -1,4 +1,4 @@
<div #viewer></div>
<div id="viewer"></div>
<redaction-compare-file-input></redaction-compare-file-input>

28
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
View File

@ -1,32 +1,8 @@
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { PdfViewer } from './services/pdf-viewer.service';
import { REDAnnotationManager } from './services/annotation-manager.service';
import { ViewerHeaderService } from './services/viewer-header.service';
import { CompareFileInputComponent } from './components/compare-file-input/compare-file-input.component';
import { REDDocumentViewer } from './services/document-viewer.service';
import { Component } from '@angular/core';
@Component({
selector: 'redaction-pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.scss'],
})
export class PdfViewerComponent implements OnInit {
@ViewChild('viewer', { static: true }) private readonly _viewer: ElementRef;
@ViewChild(CompareFileInputComponent) private readonly _compare: CompareFileInputComponent;
constructor(
private readonly _pdf: PdfViewer,
private readonly _annotationManager: REDAnnotationManager,
private readonly _documentViewer: REDDocumentViewer,
private readonly _viewerHeaderService: ViewerHeaderService,
) {}
ngOnInit() {
const pdfInit = this._pdf.init(this._viewer.nativeElement as HTMLElement);
return pdfInit.then(instance => {
this._annotationManager.init(instance.Core.annotationManager);
this._documentViewer.init(instance.Core.documentViewer);
this._viewerHeaderService.init(this._compare.input);
});
}
}
export class PdfViewerComponent {}

2
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts
View File

@ -11,6 +11,7 @@ import { PaginatorComponent } from './components/paginator/paginator.component';
import { MatIconModule } from '@angular/material/icon';
import { AnnotationDrawService } from './services/annotation-draw.service';
import { REDDocumentViewer } from './services/document-viewer.service';
import { WebViewerLoadedGuard } from './services/webviewer-loaded.guard';
@NgModule({
declarations: [PdfViewerComponent, CompareFileInputComponent, PaginatorComponent],
@ -24,6 +25,7 @@ import { REDDocumentViewer } from './services/document-viewer.service';
TooltipsService,
ViewerHeaderService,
AnnotationDrawService,
WebViewerLoadedGuard,
],
})
export class PdfViewerModule {}

35
apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
View File

@ -1,4 +1,4 @@
import { ElementRef, Inject, Injectable, Injector } from '@angular/core';
import { Inject, Injectable, Injector } from '@angular/core';
import { IHeaderElement, RotationTypes } from '@red/domain';
import { HeaderElements, HeaderElementType } from '../../file-preview/utils/constants';
import { TranslateService } from '@ngx-translate/core';
@ -145,7 +145,21 @@ export class ViewerHeaderService {
};
}
init(compareFileInput: ElementRef): void {
private get _compare(): IHeaderElement {
return {
type: 'actionButton',
element: HeaderElements.COMPARE_BUTTON,
dataElement: HeaderElements.COMPARE_BUTTON,
img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
title: 'Compare',
onClick: async () => {
document.getElementById('compareFileInput').click();
this.#docBeforeCompare = await this._documentViewer.blob();
},
};
}
init(): void {
this.#buttons = new Map([
[HeaderElements.SHAPE_TOOL_GROUP_BUTTON, this._rectangle],
[HeaderElements.ROTATE_LEFT_BUTTON, this._rotateLeft],
@ -153,7 +167,7 @@ export class ViewerHeaderService {
[HeaderElements.APPLY_ROTATION, this._applyRotation],
[HeaderElements.DISCARD_ROTATION, this._discardRotation],
[HeaderElements.TOGGLE_TOOLTIPS, this._toggleTooltips],
[HeaderElements.COMPARE_BUTTON, this._compare(compareFileInput)],
[HeaderElements.COMPARE_BUTTON, this._compare],
[HeaderElements.CLOSE_COMPARE_BUTTON, this._closeCompare],
]);
@ -213,21 +227,6 @@ export class ViewerHeaderService {
this._pdf.navigateTo(1);
}
private _compare(compareFileInput: ElementRef): IHeaderElement {
return {
type: 'actionButton',
element: HeaderElements.COMPARE_BUTTON,
dataElement: HeaderElements.COMPARE_BUTTON,
img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
title: 'Compare',
onClick: async () => {
const element = compareFileInput.nativeElement as HTMLElement;
element.click();
this.#docBeforeCompare = await this._documentViewer.blob();
},
};
}
private _pushGroup(items: IHeaderElement[], group: HeaderElementType[]): void {
const enabledItems = group.filter(item => this._isEnabled(item));
if (enabledItems.length) {

30
apps/red-ui/src/app/modules/pdf-viewer/services/webviewer-loaded.guard.ts Normal file
View File

@ -0,0 +1,30 @@
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { REDDocumentViewer } from './document-viewer.service';
import { PdfViewer } from './pdf-viewer.service';
import { REDAnnotationManager } from './annotation-manager.service';
import { ViewerHeaderService } from './viewer-header.service';
@Injectable()
export class WebViewerLoadedGuard implements CanActivate {
constructor(
private readonly _documentViewer: REDDocumentViewer,
private readonly _pdf: PdfViewer,
private readonly _annotationManager: REDAnnotationManager,
private readonly _viewerHeaderService: ViewerHeaderService,
) {}
async canActivate() {
if (this._pdf.instance) {
return true;
}
const instance = await this._pdf.init(document.getElementById('viewer'));
this._annotationManager.init(instance.Core.annotationManager);
this._documentViewer.init(instance.Core.documentViewer);
this._viewerHeaderService.init();
return true;
}
}