[ADF-5055] update pdfjs (#5344)

* update pdfjs * fix * fix test
2025-05-26 17:24:56 +00:00 · 2019-12-22 17:52:38 +01:00 · 2019-12-22 17:52:38 +01:00 · d8c35c9af0
commit d8c35c9af0
parent 50f8e58314
6 changed files with 78 additions and 71 deletions
--- 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;
--- 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`)
                        }
                    };

--- 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<any>();

-    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<boolean>('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<boolean>('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();
+            }
        });
    }

--- 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;
--- 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"
--- 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",