RED-3988: add pdf viewer module

This commit is contained in:
Dan Percic 2022-05-21 23:55:34 +03:00
parent c5d82a097f
commit 72825b9df0
25 changed files with 129 additions and 112 deletions

View File

@ -1,7 +1,7 @@
import { Component, ViewContainerRef } from '@angular/core';
import { RouterHistoryService } from '@services/router-history.service';
import { UserService } from '@services/user.service';
import { PdfViewer } from '@shared/components/pdf-viewer/pdf-viewer.service';
import { PdfViewer } from './modules/pdf-viewer/services/pdf-viewer.service';
@Component({
selector: 'redaction-root',

View File

@ -52,7 +52,7 @@ import { LoggerModule, NgxLoggerLevel, TOKEN_LOGGER_CONFIG, TOKEN_LOGGER_RULES_S
import { LoggerRulesService } from '@services/logger-rules.service';
import { ILoggerConfig } from '@red/domain';
import { SystemPreferencesService } from '@services/system-preferences.service';
import { PdfViewerComponent } from '@shared/components/pdf-viewer/pdf-viewer.component';
import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigService): PruningTranslationLoader {
return new PruningTranslationLoader(httpClient, '/assets/i18n/', `.json?version=${configService.values.FRONTEND_APP_VERSION}`);
@ -70,15 +70,7 @@ function cleanupBaseUrl(baseUrl: string) {
const screens = [BaseScreenComponent, DownloadsListScreenComponent];
const components = [
AppComponent,
PdfViewerComponent,
AuthErrorComponent,
NotificationsComponent,
SpotlightSearchComponent,
BreadcrumbsComponent,
...screens,
];
const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, BreadcrumbsComponent, ...screens];
@NgModule({
declarations: [...components],
@ -92,6 +84,7 @@ const components = [
AppRoutingModule,
MonacoEditorModule,
IqserHelpModeModule,
PdfViewerModule,
ToastrModule.forRoot({
closeButton: true,
enableHtml: true,

View File

@ -11,7 +11,7 @@ import { HelpModeService } from '@iqser/common-ui';
import { FileDataService } from '../../services/file-data.service';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { ViewModeService } from '../../services/view-mode.service';
import { REDAnnotationManager } from '../../../shared/components/pdf-viewer/annotation-manager.service';
import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
export const AnnotationButtonTypes = {
dark: 'dark',

View File

@ -17,7 +17,7 @@ import { UserPreferenceService } from '@services/user-preference.service';
import { ViewModeService } from '../../services/view-mode.service';
import { BehaviorSubject } from 'rxjs';
import { TextHighlightsGroup } from '@red/domain';
import { REDAnnotationManager } from '../../../shared/components/pdf-viewer/annotation-manager.service';
import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
import { AnnotationsListingService } from '../../services/annotations-listing.service';
@Component({

View File

@ -35,8 +35,8 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi
import { ViewModeService } from '../../services/view-mode.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { FileDataService } from '../../services/file-data.service';
import { PdfViewer } from '../../../shared/components/pdf-viewer/pdf-viewer.service';
import { REDAnnotationManager } from '../../../shared/components/pdf-viewer/annotation-manager.service';
import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
import { AnnotationsListingService } from '../../services/annotations-listing.service';
const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];

View File

@ -16,7 +16,7 @@ import { IViewedPage } from '@red/domain';
import { AutoUnsubscribe } from '@iqser/common-ui';
import { FilePreviewStateService } from '../../services/file-preview-state.service';
import { firstValueFrom } from 'rxjs';
import { PageRotationService } from '../../../shared/components/pdf-viewer/page-rotation.service';
import { PageRotationService } from '../../../pdf-viewer/services/page-rotation.service';
@Component({
selector: 'redaction-page-indicator',

View File

@ -17,16 +17,16 @@ import { toPosition } from '../../utils/pdf-calculation.utils';
import { MultiSelectService } from '../../services/multi-select.service';
import { FilePreviewStateService } from '../../services/file-preview-state.service';
import { map, switchMap, tap, withLatestFrom } from 'rxjs/operators';
import { PageRotationService } from '../../../shared/components/pdf-viewer/page-rotation.service';
import { PageRotationService } from '../../../pdf-viewer/services/page-rotation.service';
import { HeaderElements, TextPopups } from '../../utils/constants';
import { from } from 'rxjs';
import { FileDataService } from '../../services/file-data.service';
import { ViewerHeaderService } from '../../../shared/components/pdf-viewer/viewer-header.service';
import { ViewerHeaderService } from '../../../pdf-viewer/services/viewer-header.service';
import { ManualRedactionService } from '../../services/manual-redaction.service';
import { PdfViewer } from '../../../shared/components/pdf-viewer/pdf-viewer.service';
import { REDAnnotationManager } from '../../../shared/components/pdf-viewer/annotation-manager.service';
import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
import { translateQuads } from '../../../../utils';
import { ROTATION_ACTION_BUTTONS } from '../../../shared/components/pdf-viewer/constants';
import { ROTATION_ACTION_BUTTONS } from '../../../pdf-viewer/utils/constants';
import Annotation = Core.Annotations.Annotation;
@Component({

View File

@ -43,17 +43,17 @@ import { FilePreviewStateService } from './services/file-preview-state.service';
import { filePreviewScreenProviders } from './file-preview-providers';
import { ManualRedactionService } from './services/manual-redaction.service';
import { DossiersService } from '@services/dossiers/dossiers.service';
import { PageRotationService } from '../shared/components/pdf-viewer/page-rotation.service';
import { PageRotationService } from '../pdf-viewer/services/page-rotation.service';
import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
import { FilePreviewDialogService } from './services/file-preview-dialog.service';
import { FileDataService } from './services/file-data.service';
import { ActionsHelpModeKeys, ALL_HOTKEYS } from './utils/constants';
import { NGXLogger } from 'ngx-logger';
import { StampService } from './services/stamp.service';
import { PdfViewer } from '../shared/components/pdf-viewer/pdf-viewer.service';
import { REDAnnotationManager } from '../shared/components/pdf-viewer/annotation-manager.service';
import { ViewerHeaderService } from '../shared/components/pdf-viewer/viewer-header.service';
import { ROTATION_ACTION_BUTTONS } from '../shared/components/pdf-viewer/constants';
import { PdfViewer } from '../pdf-viewer/services/pdf-viewer.service';
import { REDAnnotationManager } from '../pdf-viewer/services/annotation-manager.service';
import { ViewerHeaderService } from '../pdf-viewer/services/viewer-header.service';
import { ROTATION_ACTION_BUTTONS } from '../pdf-viewer/utils/constants';
import Annotation = Core.Annotations.Annotation;
@Component({

View File

@ -34,8 +34,8 @@ import { FilePreviewStateService } from './file-preview-state.service';
import { FilePreviewDialogService } from './file-preview-dialog.service';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { FileDataService } from './file-data.service';
import { PdfViewer } from '../../shared/components/pdf-viewer/pdf-viewer.service';
import { REDAnnotationManager } from '../../shared/components/pdf-viewer/annotation-manager.service';
import { PdfViewer } from '../../pdf-viewer/services/pdf-viewer.service';
import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service';
import Quad = Core.Math.Quad;
@Injectable()

View File

@ -13,7 +13,7 @@ import { DictionariesMapService } from '@services/entity-services/dictionaries-m
import { FilePreviewStateService } from './file-preview-state.service';
import { FileDataService } from './file-data.service';
import { SuperTypes } from '@models/file/super-types';
import { PdfViewer } from '../../shared/components/pdf-viewer/pdf-viewer.service';
import { PdfViewer } from '../../pdf-viewer/services/pdf-viewer.service';
import Annotation = Core.Annotations.Annotation;
import Quad = Core.Math.Quad;

View File

@ -3,8 +3,8 @@ import { Injectable } from '@angular/core';
import { EntitiesService, FilterService, ListingService, SearchService } from '@iqser/common-ui';
import { filter, tap } from 'rxjs/operators';
import { MultiSelectService } from './multi-select.service';
import { PdfViewer } from '../../shared/components/pdf-viewer/pdf-viewer.service';
import { REDAnnotationManager } from '../../shared/components/pdf-viewer/annotation-manager.service';
import { PdfViewer } from '../../pdf-viewer/services/pdf-viewer.service';
import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service';
@Injectable()
export class AnnotationsListingService extends ListingService<AnnotationWrapper> {

View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { skip, tap } from 'rxjs/operators';
import { shareDistinctLast } from '@iqser/common-ui';
import { REDAnnotationManager } from '../../shared/components/pdf-viewer/annotation-manager.service';
import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service';
@Injectable()
export class SkippedService {

View File

@ -7,7 +7,7 @@ import { TranslateService } from '@ngx-translate/core';
import { Core } from '@pdftron/webviewer';
import { firstValueFrom } from 'rxjs';
import { WatermarkService } from '@services/entity-services/watermark.service';
import { PdfViewer } from '../../shared/components/pdf-viewer/pdf-viewer.service';
import { PdfViewer } from '../../pdf-viewer/services/pdf-viewer.service';
import PDFNet = Core.PDFNet;
@Injectable()

View File

@ -1,78 +1,51 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { PdfViewer } from './pdf-viewer.service';
import { REDAnnotationManager } from '@shared/components/pdf-viewer/annotation-manager.service';
import { ViewerHeaderService } from '@shared/components/pdf-viewer/viewer-header.service';
import { environment } from '@environments/environment';
import { loadCompareDocumentWrapper } from '../../../file-preview/utils/compare-mode.utils';
import { HeaderElements } from '../../../file-preview/utils/constants';
import { loadCompareDocumentWrapper } from '../file-preview/utils/compare-mode.utils';
import { HeaderElements } from '../file-preview/utils/constants';
import { ConfirmationDialogInput, LoadingService } from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { ActivatedRoute } from '@angular/router';
import { FilesMapService } from '@services/files/files-map.service';
import { ActivatedRoute } from '@angular/router';
import { SharedDialogService } from '@shared/services/dialog.service';
import { PdfViewer } from './services/pdf-viewer.service';
import { ViewerHeaderService } from './services/viewer-header.service';
@Component({
selector: 'redaction-pdf-viewer',
template: `
<div #viewer></div>
<input
#compareFileInput
(change)="uploadFile($event.target['files'])"
accept="application/pdf"
class="file-upload-input"
type="file"
/>
`,
selector: 'redaction-compare-file-input',
template: `<input
#input
(change)="uploadFile($event.target['files'])"
accept="application/pdf"
class="file-upload-input"
type="file"
/>`,
styles: [
`
.file-upload-input {
visibility: hidden;
:host {
position: absolute;
}
div {
width: calc(100% - 350px);
height: calc(100% - 111px);
bottom: 0;
left: 0;
position: absolute;
.file-upload-input {
visibility: hidden;
}
`,
],
})
export class PdfViewerComponent {
@ViewChild('compareFileInput', { static: true }) private readonly _compareFileInput: ElementRef;
#viewer: ElementRef;
export class CompareFileInputComponent {
@ViewChild('input', { static: true }) readonly input: ElementRef;
constructor(
private readonly _filesMapService: FilesMapService,
private readonly _activatedRoute: ActivatedRoute,
private readonly _dialogService: SharedDialogService,
private readonly _loadingService: LoadingService,
private readonly _pdf: PdfViewer,
private readonly _annotationManager: REDAnnotationManager,
private readonly _loadingService: LoadingService,
private readonly _activatedRoute: ActivatedRoute,
private readonly _filesMapService: FilesMapService,
private readonly _dialogService: SharedDialogService,
private readonly _viewerHeaderService: ViewerHeaderService,
) {}
@ViewChild('viewer', { static: true })
set viewer(value: ElementRef) {
if (this.#viewer) {
return;
}
this.#viewer = value;
const pdfInit = this._pdf.init(value.nativeElement as HTMLElement);
pdfInit.then(instance => {
this._annotationManager.init(instance.Core.annotationManager);
console.log(this._compareFileInput);
this._viewerHeaderService.initialize(this._compareFileInput);
});
}
uploadFile(files: FileList) {
const fileToCompare = files[0];
this._compareFileInput.nativeElement.value = null;
this.input.nativeElement.value = null;
if (!fileToCompare) {
console.error('No file to compare!');

View File

@ -0,0 +1,40 @@
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 './compare-file-input.component';
@Component({
selector: 'redaction-pdf-viewer',
template: ` <div #viewer></div>
<redaction-compare-file-input></redaction-compare-file-input>`,
styles: [
`
div {
width: calc(100% - 350px);
height: calc(100% - 111px);
bottom: 0;
left: 0;
position: absolute;
}
`,
],
})
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 _viewerHeaderService: ViewerHeaderService,
) {}
ngOnInit() {
const pdfInit = this._pdf.init(this._viewer.nativeElement as HTMLElement);
return pdfInit.then(instance => {
this._annotationManager.init(instance.Core.annotationManager);
this._viewerHeaderService.init(this._compare.input);
});
}
}

View File

@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { PdfViewerComponent } from './pdf-viewer.component';
import { CommonModule } from '@angular/common';
import { CompareFileInputComponent } from './compare-file-input.component';
@NgModule({
declarations: [PdfViewerComponent, CompareFileInputComponent],
exports: [PdfViewerComponent],
imports: [CommonModule],
})
export class PdfViewerModule {}

View File

@ -1,11 +1,11 @@
import { Injectable } from '@angular/core';
import { Core } from '@pdftron/webviewer';
import type { List } from '@iqser/common-ui';
import { AnnotationPredicate, DeleteAnnotationsOptions } from '@shared/components/pdf-viewer/types';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { AnnotationPredicate, DeleteAnnotationsOptions } from '../utils/types';
import { AnnotationWrapper } from '../../../models/file/annotation.wrapper';
import { fromEvent, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { getId, isStringOrWrapper } from '@shared/components/pdf-viewer/functions';
import { getId, isStringOrWrapper } from '../utils/functions';
import AnnotationManager = Core.AnnotationManager;
import Annotation = Core.Annotations.Annotation;

View File

@ -1,7 +1,7 @@
import { Injectable, Injector } from '@angular/core';
import { BehaviorSubject, firstValueFrom, of } from 'rxjs';
import { RotationType, RotationTypes } from '@red/domain';
import { FileManagementService } from '../../../../services/files/file-management.service';
import { FileManagementService } from '../../../services/files/file-management.service';
import { distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
import {
ConfirmationDialogComponent,
@ -12,10 +12,10 @@ import {
} from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { MatDialog } from '@angular/material/dialog';
import { FilesService } from '../../../../services/files/files.service';
import { FilesService } from '../../../services/files/files.service';
import { PdfViewer } from './pdf-viewer.service';
import { ActivatedRoute } from '@angular/router';
import { FilesMapService } from '../../../../services/files/files-map.service';
import { FilesMapService } from '../../../services/files/files-map.service';
import { NGXLogger } from 'ngx-logger';
const ONE_ROTATION_DEGREE = 90;

View File

@ -1,19 +1,19 @@
import { Injectable, Injector } from '@angular/core';
import WebViewer, { Core, WebViewerInstance, WebViewerOptions } from '@pdftron/webviewer';
import { environment } from '@environments/environment';
import { BASE_HREF_FN } from '../../../../tokens';
import { environment } from '../../../../environments/environment';
import { BASE_HREF_FN } from '../../../tokens';
import { File } from '@red/domain';
import { ErrorService, log, shareDistinctLast, shareLast } from '@iqser/common-ui';
import { ActivatedRoute } from '@angular/router';
import { debounceTime, distinctUntilChanged, filter, map, startWith, tap } from 'rxjs/operators';
import { BehaviorSubject, combineLatest, fromEvent, merge, Observable } from 'rxjs';
import { ConfigService } from '@services/config.service';
import { ConfigService } from '../../../services/config.service';
import { NGXLogger } from 'ngx-logger';
import { DISABLED_HOTKEYS, DOCUMENT_LOADING_ERROR, USELESS_ELEMENTS } from './constants';
import { Rgb } from '@shared/components/pdf-viewer/types';
import { UserPreferenceService } from '@services/user-preference.service';
import { asList, stopAndPrevent, stopAndPreventIfNotAllowed } from '@shared/components/pdf-viewer/functions';
import { REDAnnotationManager } from '@shared/components/pdf-viewer/annotation-manager.service';
import { DISABLED_HOTKEYS, DOCUMENT_LOADING_ERROR, USELESS_ELEMENTS } from '../utils/constants';
import { Rgb } from '../utils/types';
import { UserPreferenceService } from '../../../services/user-preference.service';
import { asList, stopAndPrevent, stopAndPreventIfNotAllowed } from '../utils/functions';
import { REDAnnotationManager } from './annotation-manager.service';
import AnnotationManager = Core.AnnotationManager;
import TextTool = Core.Tools.TextTool;
import Annotation = Core.Annotations.Annotation;

View File

@ -1,9 +1,9 @@
import { Inject, Injectable } from '@angular/core';
import { UserPreferenceService } from '../../../../services/user-preference.service';
import { HeaderElements } from '../../../file-preview/utils/constants';
import { UserPreferenceService } from '../../../services/user-preference.service';
import { HeaderElements } from '../../file-preview/utils/constants';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { TranslateService } from '@ngx-translate/core';
import { BASE_HREF_FN, BaseHrefFn } from '../../../../tokens';
import { BASE_HREF_FN, BaseHrefFn } from '../../../tokens';
import { PdfViewer } from './pdf-viewer.service';
@Injectable({

View File

@ -1,14 +1,14 @@
import { ElementRef, Inject, Injectable, Injector } from '@angular/core';
import { IHeaderElement, RotationTypes } from '@red/domain';
import { HeaderElements, HeaderElementType } from '../../../file-preview/utils/constants';
import { HeaderElements, HeaderElementType } from '../../file-preview/utils/constants';
import { TranslateService } from '@ngx-translate/core';
import { BASE_HREF_FN, BaseHrefFn } from '../../../../tokens';
import { BASE_HREF_FN, BaseHrefFn } from '../../../tokens';
import { TooltipsService } from './tooltips.service';
import { PageRotationService } from './page-rotation.service';
import { PdfViewer } from './pdf-viewer.service';
import { ROTATION_ACTION_BUTTONS } from './constants';
import { ROTATION_ACTION_BUTTONS } from '../utils/constants';
import { ActivatedRoute } from '@angular/router';
import { FilesMapService } from '../../../../services/files/files-map.service';
import { FilesMapService } from '../../../services/files/files-map.service';
const divider: IHeaderElement = {
type: 'divider',
@ -146,7 +146,7 @@ export class ViewerHeaderService {
};
}
initialize(compareFileInput: ElementRef): void {
init(compareFileInput: ElementRef): void {
this.#buttons = new Map([
[HeaderElements.SHAPE_TOOL_GROUP_BUTTON, this._rectangle],
[HeaderElements.ROTATE_LEFT_BUTTON, this._rotateLeft],

View File

@ -1,6 +1,6 @@
import { CustomError, List } from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { HeaderElements } from '../../../file-preview/utils/constants';
import { HeaderElements } from '../../file-preview/utils/constants';
export const ROTATION_ACTION_BUTTONS = [HeaderElements.APPLY_ROTATION, HeaderElements.DISCARD_ROTATION];

View File

@ -1,6 +1,6 @@
import { List } from '@iqser/common-ui';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { ALLOWED_KEYBOARD_SHORTCUTS } from '@shared/components/pdf-viewer/constants';
import { AnnotationWrapper } from '../../../models/file/annotation.wrapper';
import { ALLOWED_KEYBOARD_SHORTCUTS } from './constants';
export function stopAndPrevent<T extends Event>($event: T) {
$event.preventDefault();

View File

@ -33,10 +33,10 @@ import { ExcludedPagesService } from '../../../file-preview/services/excluded-pa
import { DocumentInfoService } from '../../../file-preview/services/document-info.service';
import { ExpandableFileActionsComponent } from '@shared/components/expandable-file-actions/expandable-file-actions.component';
import { firstValueFrom, Observable } from 'rxjs';
import { PageRotationService } from '../../../shared/components/pdf-viewer/page-rotation.service';
import { PageRotationService } from '../../../pdf-viewer/services/page-rotation.service';
import { FileAssignService } from '../../services/file-assign.service';
import { ViewerHeaderService } from '../../../shared/components/pdf-viewer/viewer-header.service';
import { ROTATION_ACTION_BUTTONS } from '../../../shared/components/pdf-viewer/constants';
import { ViewerHeaderService } from '../../../pdf-viewer/services/viewer-header.service';
import { ROTATION_ACTION_BUTTONS } from '../../../pdf-viewer/utils/constants';
@Component({
selector: 'redaction-file-actions [file] [type] [dossier]',