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

Pull request #9: Sync viewers

Browse Source 
Merge in RED/ui from sync-viewers to master

* commit 'ba72c4558b0e7276747043bc4be4b8729c29271e':
  Fixed typo in file name
  Synchronize viewers
This commit is contained in:
Timo Bejan 2020-10-13 12:49:01 +02:00
commit e7e2b36fbd
3 changed files with 42 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -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 }

34
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -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<Annotations.Annotation[]>();
@Output() annotationSelected = new EventEmitter<Annotations.Annotation>();
@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(<any>{
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');
}

41
apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts → apps/red-ui/src/app/screens/file/service/viewer-sync.service.ts
View File

@ -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");
}
}