diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index e02930c71..42797a7bc 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -6,7 +6,7 @@ import { NotificationService } from '../../../notification/notification.service' import { MatDialog } from '@angular/material/dialog'; import { AppStateService } from '../../../state/app-state.service'; import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component'; -import { ViewerSyncService } from '../service/viwer-sync.service'; +import { ViewerSyncService } from '../service/viewer-sync.service'; import { Annotations } from '@pdftron/webviewer'; import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'; import { AnnotationUtils } from '../../../utils/annotation-utils'; @@ -95,7 +95,6 @@ export class FilePreviewScreenComponent implements OnInit { if (annotation.Id.indexOf(':') >= 0) { this.annotations.push(annotation); const pageNumber = annotation.getPageNumber(); - console.log({pageNumber}) let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber); if (!el) { el = { pageNumber, redactions: 0, hints: 0 } diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts index c1140d588..f481245e8 100644 --- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts @@ -9,13 +9,13 @@ import { Output, ViewChild } from '@angular/core'; -import {AppConfigKey, AppConfigService} from "../../../app-config/app-config.service"; -import {FileStatus, FileUploadControllerService} from "@redaction/red-ui-http"; -import {Observable, of} from "rxjs"; -import {tap} from "rxjs/operators"; -import WebViewer, {Annotations, WebViewerInstance} from "@pdftron/webviewer"; -import {TranslateService} from "@ngx-translate/core"; -import {ViewerSyncService} from "../service/viwer-sync.service"; +import { AppConfigKey, AppConfigService } from '../../../app-config/app-config.service'; +import { FileStatus, FileUploadControllerService } from '@redaction/red-ui-http'; +import { Observable, of } from 'rxjs'; +import { tap } from 'rxjs/operators'; +import WebViewer, { Annotations, WebViewerInstance } from '@pdftron/webviewer'; +import { TranslateService } from '@ngx-translate/core'; +import { ViewerSyncService } from '../service/viewer-sync.service'; export enum FileType { ORIGINAL = 'ORIGINAL', @@ -37,12 +37,11 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { @Output() annotationsAdded = new EventEmitter(); @Output() annotationSelected = new EventEmitter(); - @ViewChild('viewer', {static: true}) viewer: ElementRef; + @ViewChild('viewer', { static: true }) viewer: ElementRef; wvInstance: WebViewerInstance; _fileData: Blob; - constructor( private readonly _viewerSyncService: ViewerSyncService, private readonly _translateService: TranslateService, @@ -57,7 +56,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { wvDocumentLoadedHandler(): void { this.wvInstance.setFitMode('FitWidth'); const displayMode = this.wvInstance.docViewer.getDisplayModeManager().getDisplayMode(); - displayMode.mode = "Continuous"; + displayMode.mode = 'Continuous'; this.wvInstance.docViewer.getDisplayModeManager().setDisplayMode(displayMode); this.fileReady.emit(); } @@ -74,10 +73,11 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { WebViewer({ licenseKey: license, isReadOnly: true, - path: '/assets/wv-resources', + path: '/assets/wv-resources' }, this.viewer.nativeElement).then(instance => { this.wvInstance = instance; this._viewerSyncService.registerViewer(this.fileType, this.wvInstance); + this._disableElements(); this._configureTextPopup(); this._configureHeader(); instance.annotManager.on('annotationChanged', (annotations, action) => { @@ -95,7 +95,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { })); instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler); - instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'}); + instance.loadDocument(pdfBlob, { filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf' }); }); } @@ -123,7 +123,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { return fileObs$; } - private _configureTextPopup() { + private _disableElements() { this.wvInstance.disableElements([ 'textHighlightToolButton', 'textUnderlineToolButton', @@ -131,9 +131,14 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { 'textStrikeoutToolButton', 'linkButton', 'toggleNotesButton', - 'notesPanel' + 'notesPanel', + 'thumbnailControl', + 'documentControl', + 'ribbons' ]); + } + private _configureTextPopup() { this.wvInstance.textPopup.add({ type: 'actionButton', img: '/assets/icons/general/add.svg', @@ -146,7 +151,6 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { } private _configureHeader() { - this.wvInstance.disableElements(['ribbons']); this.wvInstance.setToolbarGroup('toolbarGroup-View'); } diff --git a/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts b/apps/red-ui/src/app/screens/file/service/viewer-sync.service.ts similarity index 51% rename from apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts rename to apps/red-ui/src/app/screens/file/service/viewer-sync.service.ts index 4cf739bc5..be6bb1c63 100644 --- a/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts +++ b/apps/red-ui/src/app/screens/file/service/viewer-sync.service.ts @@ -1,5 +1,5 @@ -import {Injectable} from "@angular/core"; -import {WebViewerInstance} from "@pdftron/webviewer"; +import { Injectable } from '@angular/core'; +import { WebViewerInstance } from '@pdftron/webviewer'; @Injectable({ providedIn: 'root' @@ -13,24 +13,33 @@ export class ViewerSyncService { constructor() { } - syncViewers() { if (this._activeViewer) { const lastScrolledViewer = this._viewers[this._activeViewer]; if (lastScrolledViewer) { const lastScrolledViewerScrollElement = lastScrolledViewer.docViewer.getScrollViewElement(); - const lastViewerScrollHeight = lastScrolledViewerScrollElement.scrollHeight; const lastViewerScrollTop = lastScrolledViewerScrollElement.scrollTop; + const lastViewerScrollLeft = lastScrolledViewerScrollElement.scrollLeft; + + const currentZoom = lastScrolledViewer.docViewer.getZoom(); + const isLeftPanelOpen = lastScrolledViewer.isElementOpen('leftPanel'); + for (const key of Object.keys(this._viewers)) { if (key !== this._activeViewer) { - const viewerScrollElement = this._viewers[key].docViewer.getScrollViewElement(); - const viewerScrollHeight = viewerScrollElement.scrollHeight; - if (viewerScrollHeight === lastViewerScrollHeight) { - viewerScrollElement.scrollTo(viewerScrollElement.scrollLeft, lastViewerScrollTop); - } else if (viewerScrollHeight > lastViewerScrollHeight) { - let delta = viewerScrollHeight / lastViewerScrollHeight; - delta = this._roundToTwo(delta); - viewerScrollElement.scrollTo(viewerScrollElement.scrollLeft, delta * lastViewerScrollTop); + const instance = this._viewers[key]; + + // Synchronize zoom - needs to be done before scrolling + instance.docViewer.zoomTo(currentZoom); + + // Synchronize scroll + const viewerScrollElement = instance.docViewer.getScrollViewElement(); + viewerScrollElement.scrollTo(lastViewerScrollLeft, lastViewerScrollTop); + + // Synchronize left panel + if (isLeftPanelOpen) { + instance.openElements(['leftPanel']); + } else { + instance.closeElements(['leftPanel']); } } } @@ -38,7 +47,6 @@ export class ViewerSyncService { } } - deregisterInstance(key: string) { delete this._viewers[key]; } @@ -52,12 +60,7 @@ export class ViewerSyncService { this._activeViewer = key; } - get activeViewer(){ + get activeViewer() { return this._activeViewer; } - - - private _roundToTwo(num) { - return +(Math.round(Number(num + "e+2")) + "e-2"); - } }