diff --git a/lib/core/viewer/components/pdfViewer.component.scss b/lib/core/viewer/components/pdfViewer.component.scss index f09faca10d..99d03bfc4e 100644 --- a/lib/core/viewer/components/pdfViewer.component.scss +++ b/lib/core/viewer/components/pdfViewer.component.scss @@ -86,7 +86,7 @@ background-color: mat-color($background, card); color: inherit; font-size: 14px; - padding: 0; + padding: 5px; height: 24px; line-height: 24px; text-align: right; diff --git a/lib/core/viewer/components/pdfViewer.component.spec.ts b/lib/core/viewer/components/pdfViewer.component.spec.ts index 1f01da9e4f..89758cdf76 100644 --- a/lib/core/viewer/components/pdfViewer.component.spec.ts +++ b/lib/core/viewer/components/pdfViewer.component.spec.ts @@ -480,17 +480,15 @@ describe('Test PdfViewer component', () => { }); }, 25000); - it('should event RIGHT_ARROW keyboard change pages', (done) => { + it('should event RIGHT_ARROW keyboard change pages', fakeAsync(() => { + fixtureUrlTestComponent.whenStable(); + fixtureUrlTestComponent.detectChanges(); EventMock.keyDown(RIGHT_ARROW); - fixtureUrlTestComponent.detectChanges(); + tick(250); - fixtureUrlTestComponent.whenStable().then(() => { - fixtureUrlTestComponent.detectChanges(); - expect(componentUrlTestComponent.pdfViewerComponent.displayPage).toBe(2); - done(); - }); - }, 25000); + expect(componentUrlTestComponent.pdfViewerComponent.displayPage).toBe(2); + })); it('should event LEFT_ARROW keyboard change pages', (done) => { component.inputPage('2'); @@ -591,12 +589,12 @@ describe('Test PdfViewer component', () => { const args = { pageNumber: 6, source: { - container: componentUrlTestComponent.pdfViewerComponent.documentContainer + container: document.getElementById(`${componentUrlTestComponent.pdfViewerComponent.randomPdfId}-viewer-pdf-viewer`) } }; /* cspell:disable-next-line */ - componentUrlTestComponent.pdfViewerComponent.pdfViewer.eventBus.dispatch('pagechange', args); + componentUrlTestComponent.pdfViewerComponent.pdfViewer.eventBus.dispatch('pagechanging', args); fixtureUrlTestComponent.detectChanges(); fixtureUrlTestComponent.whenStable().then(() => { @@ -615,7 +613,7 @@ describe('Test PdfViewer component', () => { const args = { pagesCount: 10, source: { - container: componentUrlTestComponent.pdfViewerComponent.documentContainer + container: document.getElementById(`${componentUrlTestComponent.pdfViewerComponent.randomPdfId}-viewer-pdf-viewer`) } }; diff --git a/lib/core/viewer/components/pdfViewer.component.ts b/lib/core/viewer/components/pdfViewer.component.ts index c5da92076d..b6a323ea7f 100644 --- a/lib/core/viewer/components/pdfViewer.component.ts +++ b/lib/core/viewer/components/pdfViewer.component.ts @@ -32,16 +32,11 @@ import { LogService } from '../../services/log.service'; import { RenderingQueueServices } from '../services/rendering-queue.services'; import { PdfPasswordDialogComponent } from './pdfViewer-password-dialog'; import { AppConfigService } from './../../app-config/app-config.service'; +import { PDFDocumentProxy, PDFSource } from 'pdfjs-dist'; declare const pdfjsLib: any; declare const pdfjsViewer: any; -export interface PdfDocumentOptions { - url?: string; - data?: any; - withCredentials?: boolean; -} - @Component({ selector: 'adf-pdf-viewer', templateUrl: './pdfViewer.component.html', @@ -82,14 +77,12 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { @Output() close = new EventEmitter(); - loadingTask: any; - currentPdfDocument: any; + pdfDocument: PDFDocumentProxy; page: number; displayPage: number; totalPages: number; loadingPercent: number; pdfViewer: any; - documentContainer: any; currentScaleMode: string = 'auto'; currentScale: number = 1; @@ -144,23 +137,23 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { if (blobFile && blobFile.currentValue) { const reader = new FileReader(); - reader.onload = () => { - const options = { + reader.onload = async () => { + const pdfSource: PDFSource = { data: reader.result, withCredentials: this.appConfigService.get('auth.withCredentials', undefined) }; - this.executePdf(options); + this.executePdf(pdfSource); }; reader.readAsArrayBuffer(blobFile.currentValue); } const urlFile = changes['urlFile']; if (urlFile && urlFile.currentValue) { - const options = { + const pdfSource: PDFSource = { url: urlFile.currentValue, withCredentials: this.appConfigService.get('auth.withCredentials', undefined) }; - this.executePdf(options); + this.executePdf(pdfSource); } if (!this.urlFile && !this.blobFile) { @@ -168,28 +161,27 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { } } - executePdf(pdfOptions: PdfDocumentOptions) { + executePdf(pdfOptions: PDFSource) { pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js'; - this.loadingTask = pdfjsLib.getDocument(pdfOptions); + const loadingTask = pdfjsLib.getDocument(pdfOptions); - this.loadingTask.onPassword = (callback, reason) => { + loadingTask.onPassword = (callback, reason) => { this.onPdfPassword(callback, reason); }; - this.loadingTask.onProgress = (progressData) => { + loadingTask.onProgress = (progressData) => { const level = progressData.loaded / progressData.total; this.loadingPercent = Math.round(level * 100); }; - this.loadingTask.then((pdfDocument) => { - this.currentPdfDocument = pdfDocument; + loadingTask.promise.then((pdfDocument: PDFDocumentProxy) => { this.totalPages = pdfDocument.numPages; this.page = 1; this.displayPage = 1; - this.initPDFViewer(this.currentPdfDocument); + this.initPDFViewer(pdfDocument); - this.currentPdfDocument.getPage(1).then(() => { + pdfDocument.getPage(1).then(() => { this.scalePage('auto'); }, () => { this.error.emit(); @@ -200,26 +192,24 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { }); } - initPDFViewer(pdfDocument: any) { - const viewer: any = document.getElementById(`${this.randomPdfId}-viewer-viewerPdf`); - const container = document.getElementById(`${this.randomPdfId}-viewer-pdf-viewer`); + initPDFViewer(pdfDocument: PDFDocumentProxy) { + const viewer: any = this.getViewer(); + const container = this.getDocumentContainer(); if (viewer && container) { - this.documentContainer = container; - - // cspell: disable-next - this.documentContainer.addEventListener('pagechange', this.onPageChange, true); - // cspell: disable-next - this.documentContainer.addEventListener('pagesloaded', this.onPagesLoaded, true); - // cspell: disable-next - this.documentContainer.addEventListener('textlayerrendered', this.onPageRendered, true); - this.pdfViewer = new pdfjsViewer.PDFViewer({ - container: this.documentContainer, + container: container, viewer: viewer, renderingQueue: this.renderingQueueServices }); + // cspell: disable-next + this.pdfViewer.eventBus.on('pagechanging', this.onPageChange); + // cspell: disable-next + this.pdfViewer.eventBus.on('pagesloaded', this.onPagesLoaded); + // cspell: disable-next + this.pdfViewer.eventBus.on('textlayerrendered', this.onPageRendered); + this.renderingQueueServices.setViewer(this.pdfViewer); this.pdfViewer.setDocument(pdfDocument); this.pdfThumbnailsContext.viewer = this.pdfViewer; @@ -227,22 +217,22 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { } ngOnDestroy() { - if (this.documentContainer) { + if (this.pdfViewer) { // cspell: disable-next - this.documentContainer.removeEventListener('pagechange', this.onPageChange, true); + this.pdfViewer.eventBus.off('pagechanging'); // cspell: disable-next - this.documentContainer.removeEventListener('pagesloaded', this.onPagesLoaded, true); + this.pdfViewer.eventBus.off('pagesloaded'); // cspell: disable-next - this.documentContainer.removeEventListener('textlayerrendered', this.onPageRendered, true); + this.pdfViewer.eventBus.off('textlayerrendered'); } - if (this.loadingTask) { + if (this.pdfDocument) { try { - this.loadingTask.destroy(); + this.pdfDocument.destroy(); } catch { } - this.loadingTask = null; + this.pdfDocument = null; } } @@ -259,7 +249,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { this.currentScaleMode = scaleMode; const viewerContainer = document.getElementById(`${this.randomPdfId}-viewer-main-container`); - const documentContainer = document.getElementById(`${this.randomPdfId}-viewer-pdf-viewer`); + const documentContainer = this.getDocumentContainer(); if (this.pdfViewer && documentContainer) { @@ -319,6 +309,14 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { } } + private getDocumentContainer() { + return document.getElementById(`${this.randomPdfId}-viewer-pdf-viewer`); + } + + private getViewer() { + return document.getElementById(`${this.randomPdfId}-viewer-viewerPdf`); + } + /** * Update all the pages with the newScale scale * @@ -455,9 +453,11 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { * * @param event */ - onPageChange(event) { - this.page = event.pageNumber; - this.displayPage = event.pageNumber; + onPageChange(event: any) { + if (event.source && event.source.container.id === `${this.randomPdfId}-viewer-pdf-viewer`) { + this.page = event.pageNumber; + this.displayPage = event.pageNumber; + } } onPdfPassword(callback, reason) { @@ -467,11 +467,11 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { data: { reason } }) .afterClosed().subscribe((password) => { - if (password) { - callback(password); - } else { - this.close.emit(); - } + if (password) { + callback(password); + } else { + this.close.emit(); + } }); } diff --git a/lib/core/viewer/components/pdfViewerHost.component.scss b/lib/core/viewer/components/pdfViewerHost.component.scss index 46bd7e1e6d..05eb4ee612 100644 --- a/lib/core/viewer/components/pdfViewerHost.component.scss +++ b/lib/core/viewer/components/pdfViewerHost.component.scss @@ -1,4 +1,6 @@ .adf-pdf-viewer { + @import url('~pdfjs-dist/web/pdf_viewer.css'); + .textLayer { position: absolute; left: 0; diff --git a/package-lock.json b/package-lock.json index 3459a4181b..d7195174ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1685,6 +1685,12 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.7.tgz", "integrity": "sha512-4jUncNe2tj1nmrO/34PsRpZqYVnRV1svbU78cKhuQKkMntKB/AmdLyGgswcZKjFHEHGpiY8pVD8CuVI55nP54w==" }, + "@types/pdfjs-dist": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@types/pdfjs-dist/-/pdfjs-dist-2.1.3.tgz", + "integrity": "sha512-aGyFfB4Q8QjaSR3cBTiJfnFXBU6SXQaBVM7ADfBaZzq4L7EGbjuSoqXfHJofZmLFBfKzZ9b+9nXO2FfUIsw77w==", + "dev": true + }, "@types/q": { "version": "0.0.32", "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", @@ -12450,12 +12456,12 @@ } }, "pdfjs-dist": { - "version": "2.0.489", - "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.0.489.tgz", - "integrity": "sha1-Y+VLKSqGeQpFRpfrRNQ0e4+/rSc=", + "version": "2.3.200", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.3.200.tgz", + "integrity": "sha512-+8wBjU5h8LPZOIvR9X2uCrp/8xWQG1DRDKMLg5lzGN1qyIAZlYUxA0KQyy12Nw5jN7ozulC6v97PMaDcLgAcFg==", "requires": { "node-ensure": "^0.0.0", - "worker-loader": "^1.1.1" + "worker-loader": "^2.0.0" } }, "pend": { @@ -19252,9 +19258,9 @@ } }, "worker-loader": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-1.1.1.tgz", - "integrity": "sha512-qJZLVS/jMCBITDzPo/RuweYSIG8VJP5P67mP/71alGyTZRe1LYJFdwLjLalY3T5ifx0bMDRD3OB6P2p1escvlg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz", + "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==", "requires": { "loader-utils": "^1.0.0", "schema-utils": "^0.4.0" diff --git a/package.json b/package.json index 0347894f06..f158bce108 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,7 @@ "moment-es6": "^1.0.0", "ng2-charts": "1.6.0", "ngx-monaco-editor": "7.0.0", - "pdfjs-dist": "2.0.489", + "pdfjs-dist": "2.3.200", "raphael": "2.2.7", "reflect-metadata": "0.1.13", "remark-validate-links": "^8.0.0", @@ -136,6 +136,7 @@ "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "^12.7.7", + "@types/pdfjs-dist": "^2.1.3", "@types/selenium-webdriver": "^3.0.8", "ajv-cli": "^3.0.0", "bundlesize": "0.18.0",