inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5055] update pdfjs (#5344)

Browse Source 
* update pdfjs

* fix

* fix test
This commit is contained in:
Eugenio Romano 2019-12-22 17:52:38 +01:00 committed by GitHub
parent 50f8e58314
commit d8c35c9af0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/viewer/components/pdfViewer.component.scss
View File

@ -86,7 +86,7 @@
background-color: mat-color($background, card); background-color: mat-color($background, card);
color: inherit; color: inherit;
font-size: 14px; font-size: 14px;
padding: 0; padding: 5px;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
text-align: right; text-align: right;

20
lib/core/viewer/components/pdfViewer.component.spec.ts
View File

@ -480,17 +480,15 @@ describe('Test PdfViewer component', () => {
}); });
}, 25000); }, 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); EventMock.keyDown(RIGHT_ARROW);
fixtureUrlTestComponent.detectChanges(); tick(250);
fixtureUrlTestComponent.whenStable().then(() => { expect(componentUrlTestComponent.pdfViewerComponent.displayPage).toBe(2);
fixtureUrlTestComponent.detectChanges(); }));
expect(componentUrlTestComponent.pdfViewerComponent.displayPage).toBe(2);
done();
});
}, 25000);
it('should event LEFT_ARROW keyboard change pages', (done) => { it('should event LEFT_ARROW keyboard change pages', (done) => {
component.inputPage('2'); component.inputPage('2');
@ -591,12 +589,12 @@ describe('Test PdfViewer component', () => {
const args = { const args = {
pageNumber: 6, pageNumber: 6,
source: { source: {
container: componentUrlTestComponent.pdfViewerComponent.documentContainer container: document.getElementById(`${componentUrlTestComponent.pdfViewerComponent.randomPdfId}-viewer-pdf-viewer`)
} }
}; };
/* cspell:disable-next-line */ /* cspell:disable-next-line */
componentUrlTestComponent.pdfViewerComponent.pdfViewer.eventBus.dispatch('pagechange', args); componentUrlTestComponent.pdfViewerComponent.pdfViewer.eventBus.dispatch('pagechanging', args);
fixtureUrlTestComponent.detectChanges(); fixtureUrlTestComponent.detectChanges();
fixtureUrlTestComponent.whenStable().then(() => { fixtureUrlTestComponent.whenStable().then(() => {
@ -615,7 +613,7 @@ describe('Test PdfViewer component', () => {
const args = { const args = {
pagesCount: 10, pagesCount: 10,
source: { source: {
container: componentUrlTestComponent.pdfViewerComponent.documentContainer container: document.getElementById(`${componentUrlTestComponent.pdfViewerComponent.randomPdfId}-viewer-pdf-viewer`)
} }
}; };

102
lib/core/viewer/components/pdfViewer.component.ts
View File

@ -32,16 +32,11 @@ import { LogService } from '../../services/log.service';
import { RenderingQueueServices } from '../services/rendering-queue.services'; import { RenderingQueueServices } from '../services/rendering-queue.services';
import { PdfPasswordDialogComponent } from './pdfViewer-password-dialog'; import { PdfPasswordDialogComponent } from './pdfViewer-password-dialog';
import { AppConfigService } from './../../app-config/app-config.service'; import { AppConfigService } from './../../app-config/app-config.service';
import { PDFDocumentProxy, PDFSource } from 'pdfjs-dist';
declare const pdfjsLib: any; declare const pdfjsLib: any;
declare const pdfjsViewer: any; declare const pdfjsViewer: any;
export interface PdfDocumentOptions {
url?: string;
data?: any;
withCredentials?: boolean;
}
@Component({ @Component({
selector: 'adf-pdf-viewer', selector: 'adf-pdf-viewer',
templateUrl: './pdfViewer.component.html', templateUrl: './pdfViewer.component.html',
@ -82,14 +77,12 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
@Output() @Output()
close = new EventEmitter<any>(); close = new EventEmitter<any>();
loadingTask: any; pdfDocument: PDFDocumentProxy;
currentPdfDocument: any;
page: number; page: number;
displayPage: number; displayPage: number;
totalPages: number; totalPages: number;
loadingPercent: number; loadingPercent: number;
pdfViewer: any; pdfViewer: any;
documentContainer: any;
currentScaleMode: string = 'auto'; currentScaleMode: string = 'auto';
currentScale: number = 1; currentScale: number = 1;
@ -144,23 +137,23 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
if (blobFile && blobFile.currentValue) { if (blobFile && blobFile.currentValue) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = async () => {
const options = { const pdfSource: PDFSource = {
data: reader.result, data: reader.result,
withCredentials: this.appConfigService.get<boolean>('auth.withCredentials', undefined) withCredentials: this.appConfigService.get<boolean>('auth.withCredentials', undefined)
}; };
this.executePdf(options); this.executePdf(pdfSource);
}; };
reader.readAsArrayBuffer(blobFile.currentValue); reader.readAsArrayBuffer(blobFile.currentValue);
} }
const urlFile = changes['urlFile']; const urlFile = changes['urlFile'];
if (urlFile && urlFile.currentValue) { if (urlFile && urlFile.currentValue) {
const options = { const pdfSource: PDFSource = {
url: urlFile.currentValue, url: urlFile.currentValue,
withCredentials: this.appConfigService.get<boolean>('auth.withCredentials', undefined) withCredentials: this.appConfigService.get<boolean>('auth.withCredentials', undefined)
}; };
this.executePdf(options); this.executePdf(pdfSource);
} }
if (!this.urlFile && !this.blobFile) { 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'; 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.onPdfPassword(callback, reason);
}; };
this.loadingTask.onProgress = (progressData) => { loadingTask.onProgress = (progressData) => {
const level = progressData.loaded / progressData.total; const level = progressData.loaded / progressData.total;
this.loadingPercent = Math.round(level * 100); this.loadingPercent = Math.round(level * 100);
}; };
this.loadingTask.then((pdfDocument) => { loadingTask.promise.then((pdfDocument: PDFDocumentProxy) => {
this.currentPdfDocument = pdfDocument;
this.totalPages = pdfDocument.numPages; this.totalPages = pdfDocument.numPages;
this.page = 1; this.page = 1;
this.displayPage = 1; this.displayPage = 1;
this.initPDFViewer(this.currentPdfDocument); this.initPDFViewer(pdfDocument);
this.currentPdfDocument.getPage(1).then(() => { pdfDocument.getPage(1).then(() => {
this.scalePage('auto'); this.scalePage('auto');
}, () => { }, () => {
this.error.emit(); this.error.emit();
@ -200,26 +192,24 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
}); });
} }
initPDFViewer(pdfDocument: any) { initPDFViewer(pdfDocument: PDFDocumentProxy) {
const viewer: any = document.getElementById(`${this.randomPdfId}-viewer-viewerPdf`); const viewer: any = this.getViewer();
const container = document.getElementById(`${this.randomPdfId}-viewer-pdf-viewer`); const container = this.getDocumentContainer();
if (viewer && container) { 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({ this.pdfViewer = new pdfjsViewer.PDFViewer({
container: this.documentContainer, container: container,
viewer: viewer, viewer: viewer,
renderingQueue: this.renderingQueueServices 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.renderingQueueServices.setViewer(this.pdfViewer);
this.pdfViewer.setDocument(pdfDocument); this.pdfViewer.setDocument(pdfDocument);
this.pdfThumbnailsContext.viewer = this.pdfViewer; this.pdfThumbnailsContext.viewer = this.pdfViewer;
@ -227,22 +217,22 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
} }
ngOnDestroy() { ngOnDestroy() {
if (this.documentContainer) { if (this.pdfViewer) {
// cspell: disable-next // cspell: disable-next
this.documentContainer.removeEventListener('pagechange', this.onPageChange, true); this.pdfViewer.eventBus.off('pagechanging');
// cspell: disable-next // cspell: disable-next
this.documentContainer.removeEventListener('pagesloaded', this.onPagesLoaded, true); this.pdfViewer.eventBus.off('pagesloaded');
// cspell: disable-next // cspell: disable-next
this.documentContainer.removeEventListener('textlayerrendered', this.onPageRendered, true); this.pdfViewer.eventBus.off('textlayerrendered');
} }
if (this.loadingTask) { if (this.pdfDocument) {
try { try {
this.loadingTask.destroy(); this.pdfDocument.destroy();
} catch { } catch {
} }
this.loadingTask = null; this.pdfDocument = null;
} }
} }
@ -259,7 +249,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
this.currentScaleMode = scaleMode; this.currentScaleMode = scaleMode;
const viewerContainer = document.getElementById(`${this.randomPdfId}-viewer-main-container`); 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) { 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 * Update all the pages with the newScale scale
* *
@ -455,9 +453,11 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
* *
* @param event * @param event
*/ */
onPageChange(event) { onPageChange(event: any) {
this.page = event.pageNumber; if (event.source && event.source.container.id === `${this.randomPdfId}-viewer-pdf-viewer`) {
this.displayPage = event.pageNumber; this.page = event.pageNumber;
this.displayPage = event.pageNumber;
}
} }
onPdfPassword(callback, reason) { onPdfPassword(callback, reason) {
@ -467,11 +467,11 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
data: { reason } data: { reason }
}) })
.afterClosed().subscribe((password) => { .afterClosed().subscribe((password) => {
if (password) { if (password) {
callback(password); callback(password);
} else { } else {
this.close.emit(); this.close.emit();
} }
}); });
} }

2
lib/core/viewer/components/pdfViewerHost.component.scss
View File

@ -1,4 +1,6 @@
.adf-pdf-viewer { .adf-pdf-viewer {
@import url('~pdfjs-dist/web/pdf_viewer.css');
.textLayer { .textLayer {
position: absolute; position: absolute;
left: 0; left: 0;

20
package-lock.json generated
View File

@ -1685,6 +1685,12 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.7.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.7.tgz",
"integrity": "sha512-4jUncNe2tj1nmrO/34PsRpZqYVnRV1svbU78cKhuQKkMntKB/AmdLyGgswcZKjFHEHGpiY8pVD8CuVI55nP54w==" "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": { "@types/q": {
"version": "0.0.32", "version": "0.0.32",
"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
@ -12450,12 +12456,12 @@
} }
}, },
"pdfjs-dist": { "pdfjs-dist": {
"version": "2.0.489", "version": "2.3.200",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.0.489.tgz", "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.3.200.tgz",
"integrity": "sha1-Y+VLKSqGeQpFRpfrRNQ0e4+/rSc=", "integrity": "sha512-+8wBjU5h8LPZOIvR9X2uCrp/8xWQG1DRDKMLg5lzGN1qyIAZlYUxA0KQyy12Nw5jN7ozulC6v97PMaDcLgAcFg==",
"requires": { "requires": {
"node-ensure": "^0.0.0", "node-ensure": "^0.0.0",
"worker-loader": "^1.1.1" "worker-loader": "^2.0.0"
} }
}, },
"pend": { "pend": {
@ -19252,9 +19258,9 @@
} }
}, },
"worker-loader": { "worker-loader": {
"version": "1.1.1", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-1.1.1.tgz", "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
"integrity": "sha512-qJZLVS/jMCBITDzPo/RuweYSIG8VJP5P67mP/71alGyTZRe1LYJFdwLjLalY3T5ifx0bMDRD3OB6P2p1escvlg==", "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
"requires": { "requires": {
"loader-utils": "^1.0.0", "loader-utils": "^1.0.0",
"schema-utils": "^0.4.0" "schema-utils": "^0.4.0"

3
package.json
View File

@ -114,7 +114,7 @@
"moment-es6": "^1.0.0", "moment-es6": "^1.0.0",
"ng2-charts": "1.6.0", "ng2-charts": "1.6.0",
"ngx-monaco-editor": "7.0.0", "ngx-monaco-editor": "7.0.0",
"pdfjs-dist": "2.0.489", "pdfjs-dist": "2.3.200",
"raphael": "2.2.7", "raphael": "2.2.7",
"reflect-metadata": "0.1.13", "reflect-metadata": "0.1.13",
"remark-validate-links": "^8.0.0", "remark-validate-links": "^8.0.0",
@ -136,6 +136,7 @@
"@types/jasmine": "~2.8.3", "@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2", "@types/jasminewd2": "~2.0.2",
"@types/node": "^12.7.7", "@types/node": "^12.7.7",
"@types/pdfjs-dist": "^2.1.3",
"@types/selenium-webdriver": "^3.0.8", "@types/selenium-webdriver": "^3.0.8",
"ajv-cli": "^3.0.0", "ajv-cli": "^3.0.0",
"bundlesize": "0.18.0", "bundlesize": "0.18.0",