From ae808c962db00a7ca138bb4b94b862195ca4ae47 Mon Sep 17 00:00:00 2001 From: Colin Tong Date: Sat, 8 Dec 2018 01:58:36 -0500 Subject: [PATCH 1/3] switched 'pagerendered' event from using utils bus to direct eventBus --- src/app/pdf-viewer/pdf-viewer.component.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/app/pdf-viewer/pdf-viewer.component.ts b/src/app/pdf-viewer/pdf-viewer.component.ts index 5411782d2..34df21a10 100644 --- a/src/app/pdf-viewer/pdf-viewer.component.ts +++ b/src/app/pdf-viewer/pdf-viewer.component.ts @@ -224,9 +224,9 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { }, 100); } - @HostListener('pagerendered', ['$event']) onPageRendered(e: CustomEvent) { - this.pageRendered.emit(e); - } + // @HostListener('pagerendered', ['$event']) onPageRendered(e: CustomEvent) { + // this.pageRendered.emit(e); + // } @HostListener('textlayerrendered', ['$event']) onTextLayerRendered(e: CustomEvent) { this.textLayerRendered.emit(e); @@ -292,6 +292,10 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { const eventBus = createEventBus(PDFJSViewer); + eventBus.on('pagerendered', (e) => { + this.pageRendered.emit(e); + }); + this.pdfMultiPageLinkService = new PDFJSViewer.PDFLinkService({eventBus}); this.pdfMultiPageFindController = new PDFJSViewer.PDFFindController({linkService: this.pdfMultiPageLinkService, eventBus}); @@ -316,6 +320,10 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { const eventBus = createEventBus(PDFJSViewer); + eventBus.on('pagerendered', (e) => { + this.pageRendered.emit(e); + }); + this.pdfSinglePageLinkService = new PDFJSViewer.PDFLinkService({eventBus}); this.pdfSinglePageFindController = new PDFJSViewer.PDFFindController({linkService: this.pdfSinglePageLinkService, eventBus}); From b8b29f1784d3fc0dadf63e297d2a1c5495d477b9 Mon Sep 17 00:00:00 2001 From: Vadym Yatsyuk Date: Sat, 8 Dec 2018 10:57:28 +0100 Subject: [PATCH 2/3] remove unused --- src/app/pdf-viewer/pdf-viewer.component.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/pdf-viewer/pdf-viewer.component.ts b/src/app/pdf-viewer/pdf-viewer.component.ts index 34df21a10..50925b275 100644 --- a/src/app/pdf-viewer/pdf-viewer.component.ts +++ b/src/app/pdf-viewer/pdf-viewer.component.ts @@ -224,11 +224,8 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { }, 100); } - // @HostListener('pagerendered', ['$event']) onPageRendered(e: CustomEvent) { - // this.pageRendered.emit(e); - // } - - @HostListener('textlayerrendered', ['$event']) onTextLayerRendered(e: CustomEvent) { + @HostListener('textlayerrendered', ['$event']) + onTextLayerRendered(e: CustomEvent) { this.textLayerRendered.emit(e); } From 381d113800738d09d12f32a9b8a067c4006efbab Mon Sep 17 00:00:00 2001 From: Vadym Yatsyuk Date: Sat, 8 Dec 2018 12:03:40 +0100 Subject: [PATCH 3/3] minor --- src/app/app.component.ts | 22 ++- .../pdf-viewer/pdf-viewer.component.spec.ts | 68 +++++--- src/app/pdf-viewer/pdf-viewer.component.ts | 154 ++++++++++++------ 3 files changed, 163 insertions(+), 81 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e0c06b61e..a0f9799d5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,7 +2,11 @@ * Created by vadimdez on 21/06/16. */ import { Component, ViewChild } from '@angular/core'; -import { PDFProgressData, PDFDocumentProxy, PDFSource } from './pdf-viewer/pdf-viewer.module'; +import { + PDFProgressData, + PDFDocumentProxy, + PDFSource +} from './pdf-viewer/pdf-viewer.module'; import { PdfViewerComponent } from './pdf-viewer/pdf-viewer.component'; @@ -12,9 +16,7 @@ import { PdfViewerComponent } from './pdf-viewer/pdf-viewer.component'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) - export class AppComponent { - pdfSrc: string | PDFSource | ArrayBuffer = './assets/pdf-test.pdf'; // or pass options as object @@ -54,7 +56,7 @@ export class AppComponent { xhr.onload = (e: any) => { console.log(xhr); if (xhr.status === 200) { - const blob = new Blob([xhr.response], {type: 'application/pdf'}); + const blob = new Blob([xhr.response], { type: 'application/pdf' }); this.pdfSrc = URL.createObjectURL(blob); } }; @@ -87,7 +89,7 @@ export class AppComponent { onFileSelected() { const $pdf: any = document.querySelector('#file'); - if (typeof (FileReader) !== 'undefined') { + if (typeof FileReader !== 'undefined') { const reader = new FileReader(); reader.onload = (e: any) => { @@ -127,7 +129,9 @@ export class AppComponent { this.error = error; // set error if (error.name === 'PasswordException') { - const password = prompt('This document is password protected. Enter the password:'); + const password = prompt( + 'This document is password protected. Enter the password:' + ); if (password) { this.error = null; @@ -140,11 +144,11 @@ export class AppComponent { let newSrc; if (this.pdfSrc instanceof ArrayBuffer) { - newSrc = {data: this.pdfSrc}; + newSrc = { data: this.pdfSrc }; } else if (typeof this.pdfSrc === 'string') { - newSrc = {url: this.pdfSrc}; + newSrc = { url: this.pdfSrc }; } else { - newSrc = {...this.pdfSrc}; + newSrc = { ...this.pdfSrc }; } newSrc.password = password; diff --git a/src/app/pdf-viewer/pdf-viewer.component.spec.ts b/src/app/pdf-viewer/pdf-viewer.component.spec.ts index 8328f49ee..f33a1855c 100644 --- a/src/app/pdf-viewer/pdf-viewer.component.spec.ts +++ b/src/app/pdf-viewer/pdf-viewer.component.spec.ts @@ -5,7 +5,9 @@ import { PdfViewerComponent } from './pdf-viewer.component'; import { PdfViewerModule } from './pdf-viewer.module'; @Component({ - template: `` + template: ` + + ` }) class TestComponent {} @@ -24,20 +26,17 @@ describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ - TestComponent - ], - imports: [ - PdfViewerModule - ] - }).compileComponents() - .then(() => { - testFixture = TestBed.createComponent(TestComponent); - testApp = testFixture.debugElement.componentInstance; - - pdfViewerFixture = TestBed.createComponent(PdfViewerComponent); - pdfViewer = pdfViewerFixture.debugElement.componentInstance; - }); + declarations: [TestComponent], + imports: [PdfViewerModule] + }) + .compileComponents() + .then(() => { + testFixture = TestBed.createComponent(TestComponent); + testApp = testFixture.debugElement.componentInstance; + + pdfViewerFixture = TestBed.createComponent(PdfViewerComponent); + pdfViewer = pdfViewerFixture.debugElement.componentInstance; + }); })); it('should create test component', () => { @@ -50,7 +49,10 @@ describe('AppComponent', () => { setPdf(10); [1, 3, 7, 10].forEach((page: number) => { - expect((pdfViewer as any).getValidPageNumber(page)).toBe(page, `page: ${ page }`); + expect((pdfViewer as any).getValidPageNumber(page)).toBe( + page, + `page: ${page}` + ); }); }); @@ -61,7 +63,7 @@ describe('AppComponent', () => { expect((pdfViewer as any).getValidPageNumber(pages + 2)).toBe(pages); }); - it('should return first page when page is less then 1', function () { + it('should return first page when page is less then 1', function() { setPdf(10); expect((pdfViewer as any).getValidPageNumber(0)).toBe(1); expect((pdfViewer as any).getValidPageNumber(-1)).toBe(1); @@ -69,8 +71,12 @@ describe('AppComponent', () => { }); describe('getScale', () => { - it('should get scale 1 with offsetWidth = 0', function () { - let spy = spyOnProperty((pdfViewer as any).element.nativeElement, 'offsetWidth', 'get').and.returnValue(0); + it('should get scale 1 with offsetWidth = 0', function() { + let spy = spyOnProperty( + (pdfViewer as any).element.nativeElement, + 'offsetWidth', + 'get' + ).and.returnValue(0); expect((pdfViewer as any).getScale(0)).toBe(1); expect(spy).toHaveBeenCalled(); @@ -84,7 +90,9 @@ describe('AppComponent', () => { it('should check default url', () => { const PDFJS = require('pdfjs-dist/build/pdf'); - expect((pdfViewer)._cMapsUrl).toBe(`https://unpkg.com/pdfjs-dist@${ (PDFJS as any).version }/cmaps/`); + expect((pdfViewer)._cMapsUrl).toBe( + `https://unpkg.com/pdfjs-dist@${(PDFJS as any).version}/cmaps/` + ); }); it('should return src', () => { @@ -98,14 +106,22 @@ describe('AppComponent', () => { pdfViewer.src = src; pdfViewer.cMapsUrl = cMapUrl; - expect((pdfViewer).getDocumentParams()).toEqual({ url: src, cMapUrl, cMapPacked: true }); + expect((pdfViewer).getDocumentParams()).toEqual({ + url: src, + cMapUrl, + cMapPacked: true + }); }); it('should return object when src is an object', () => { pdfViewer.src = { url: src }; pdfViewer.cMapsUrl = cMapUrl; - expect((pdfViewer).getDocumentParams()).toEqual({ url: src, cMapUrl, cMapPacked: true }); + expect((pdfViewer).getDocumentParams()).toEqual({ + url: src, + cMapUrl, + cMapPacked: true + }); }); it('should return object when src is an object with byte array', () => { @@ -113,7 +129,11 @@ describe('AppComponent', () => { pdfViewer.src = { url: src as any }; pdfViewer.cMapsUrl = cMapUrl; - expect((pdfViewer).getDocumentParams()).toEqual({ url: src, cMapUrl, cMapPacked: true }); + expect((pdfViewer).getDocumentParams()).toEqual({ + url: src, + cMapUrl, + cMapPacked: true + }); }); }); -}); \ No newline at end of file +}); diff --git a/src/app/pdf-viewer/pdf-viewer.component.ts b/src/app/pdf-viewer/pdf-viewer.component.ts index 50925b275..c1c893b71 100644 --- a/src/app/pdf-viewer/pdf-viewer.component.ts +++ b/src/app/pdf-viewer/pdf-viewer.component.ts @@ -2,9 +2,25 @@ * Created by vadimdez on 21/06/16. */ import { - Component, Input, Output, ElementRef, EventEmitter, OnChanges, SimpleChanges, OnInit, HostListener, OnDestroy + Component, + Input, + Output, + ElementRef, + EventEmitter, + OnChanges, + SimpleChanges, + OnInit, + HostListener, + OnDestroy } from '@angular/core'; -import { PDFDocumentProxy, PDFViewerParams, PDFPageProxy, PDFSource, PDFProgressData, PDFPromise } from 'pdfjs-dist'; +import { + PDFDocumentProxy, + PDFViewerParams, + PDFPageProxy, + PDFSource, + PDFProgressData, + PDFPromise +} from 'pdfjs-dist'; import { createEventBus } from '../utils/event-bus-utils'; @@ -31,12 +47,10 @@ export enum RenderTextMode { @Component({ selector: 'pdf-viewer', template: ` -
-
-
`, +
+ `, styleUrls: ['./pdf-viewer.component.scss'] }) - export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { static CSS_UNITS: number = 96.0 / 72.0; @@ -48,7 +62,10 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { private pdfSinglePageLinkService: any; private pdfSinglePageFindController: any; - private _cMapsUrl = typeof PDFJS !== 'undefined' ? `https://unpkg.com/pdfjs-dist@${ (PDFJS as any).version }/cmaps/` : null; + private _cMapsUrl = + typeof PDFJS !== 'undefined' + ? `https://unpkg.com/pdfjs-dist@${(PDFJS as any).version}/cmaps/` + : null; private _renderText = true; private _renderTextMode: RenderTextMode = RenderTextMode.ENABLED; private _stickToPage = false; @@ -65,9 +82,13 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { private resizeTimeout: NodeJS.Timer; - @Output('after-load-complete') afterLoadComplete = new EventEmitter(); + @Output('after-load-complete') afterLoadComplete = new EventEmitter< + PDFDocumentProxy + >(); @Output('page-rendered') pageRendered = new EventEmitter(); - @Output('text-layer-rendered') textLayerRendered = new EventEmitter(); + @Output('text-layer-rendered') textLayerRendered = new EventEmitter< + CustomEvent + >(); @Output('error') onError = new EventEmitter(); @Output('on-progress') onProgress = new EventEmitter(); @Output() pageChange: EventEmitter = new EventEmitter(true); @@ -186,14 +207,19 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { let pdfWorkerSrc: string; - if (window.hasOwnProperty('pdfWorkerSrc') && typeof (window as any).pdfWorkerSrc === 'string' && (window as any).pdfWorkerSrc) { + if ( + window.hasOwnProperty('pdfWorkerSrc') && + typeof (window as any).pdfWorkerSrc === 'string' && + (window as any).pdfWorkerSrc + ) { pdfWorkerSrc = (window as any).pdfWorkerSrc; } else { - pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${ (PDFJS as any).version }/pdf.worker.min.js`; + pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${ + (PDFJS as any).version + }/pdf.worker.min.js`; } (PDFJS as any).GlobalWorkerOptions.workerSrc = pdfWorkerSrc; - } ngOnInit() { @@ -230,7 +256,9 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { } get pdfLinkService(): any { - return this._showAll ? this.pdfMultiPageLinkService : this.pdfSinglePageLinkService; + return this._showAll + ? this.pdfMultiPageLinkService + : this.pdfSinglePageLinkService; } get pdfViewer(): any { @@ -238,7 +266,9 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { } get pdfFindController(): any { - return this._showAll ? this.pdfMultiPageFindController : this.pdfSinglePageFindController; + return this._showAll + ? this.pdfMultiPageFindController + : this.pdfSinglePageFindController; } ngOnChanges(changes: SimpleChanges) { @@ -250,7 +280,9 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { this.loadPDF(); } else if (this._pdf) { if ('renderText' in changes) { - this.getCurrentViewer().textLayerMode = this._renderText ? this._renderTextMode : RenderTextMode.DISABLED; + this.getCurrentViewer().textLayerMode = this._renderText + ? this._renderTextMode + : RenderTextMode.DISABLED; this.resetPdfDocument(); } else if ('showAll' in changes) { this.resetPdfDocument(); @@ -258,7 +290,7 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { if ('page' in changes) { // New form of page changing: The viewer will now jump to the specified page when it is changed. // This behavior is introducedby using the PDFSinglePageViewer - this.getCurrentViewer().scrollPageIntoView({pageNumber: this._page}); + this.getCurrentViewer().scrollPageIntoView({ pageNumber: this._page }); } this.update(); @@ -267,19 +299,25 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { public updateSize() { const currentViewer = this.getCurrentViewer(); - this._pdf.getPage(currentViewer.currentPageNumber).then((page: PDFPageProxy) => { - const viewport = page.getViewport(this._zoom, this._rotation); - let scale = this._zoom; - let stickToPage = true; - - // Scale the document when it shouldn't be in original size or doesn't fit into the viewport - if (!this._originalSize || (this._fitToPage && viewport.width > this.element.nativeElement.offsetWidth)) { - scale = this.getScale(page.getViewport(1).width); - stickToPage = !this._stickToPage; - } + this._pdf + .getPage(currentViewer.currentPageNumber) + .then((page: PDFPageProxy) => { + const viewport = page.getViewport(this._zoom, this._rotation); + let scale = this._zoom; + let stickToPage = true; + + // Scale the document when it shouldn't be in original size or doesn't fit into the viewport + if ( + !this._originalSize || + (this._fitToPage && + viewport.width > this.element.nativeElement.offsetWidth) + ) { + scale = this.getScale(page.getViewport(1).width); + stickToPage = !this._stickToPage; + } - currentViewer._setScale(scale, stickToPage); - }); + currentViewer._setScale(scale, stickToPage); + }); } private setupMultiPageViewer() { @@ -289,20 +327,25 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { const eventBus = createEventBus(PDFJSViewer); - eventBus.on('pagerendered', (e) => { + eventBus.on('pagerendered', e => { this.pageRendered.emit(e); }); - this.pdfMultiPageLinkService = new PDFJSViewer.PDFLinkService({eventBus}); - this.pdfMultiPageFindController = new PDFJSViewer.PDFFindController({linkService: this.pdfMultiPageLinkService, eventBus}); + this.pdfMultiPageLinkService = new PDFJSViewer.PDFLinkService({ eventBus }); + this.pdfMultiPageFindController = new PDFJSViewer.PDFFindController({ + linkService: this.pdfMultiPageLinkService, + eventBus + }); const pdfOptions: PDFViewerParams | any = { eventBus: eventBus, container: this.element.nativeElement.querySelector('div'), removePageBorders: true, linkService: this.pdfMultiPageLinkService, - textLayerMode: this._renderText ? this._renderTextMode : RenderTextMode.DISABLED, - findController: this.pdfMultiPageFindController, + textLayerMode: this._renderText + ? this._renderTextMode + : RenderTextMode.DISABLED, + findController: this.pdfMultiPageFindController }; this.pdfMultiPageViewer = new PDFJSViewer.PDFViewer(pdfOptions); @@ -317,20 +360,27 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { const eventBus = createEventBus(PDFJSViewer); - eventBus.on('pagerendered', (e) => { + eventBus.on('pagerendered', e => { this.pageRendered.emit(e); }); - this.pdfSinglePageLinkService = new PDFJSViewer.PDFLinkService({eventBus}); - this.pdfSinglePageFindController = new PDFJSViewer.PDFFindController({linkService: this.pdfSinglePageLinkService, eventBus}); + this.pdfSinglePageLinkService = new PDFJSViewer.PDFLinkService({ + eventBus + }); + this.pdfSinglePageFindController = new PDFJSViewer.PDFFindController({ + linkService: this.pdfSinglePageLinkService, + eventBus + }); const pdfOptions: PDFViewerParams | any = { eventBus: eventBus, container: this.element.nativeElement.querySelector('div'), removePageBorders: true, linkService: this.pdfSinglePageLinkService, - textLayerMode: this._renderText ? this._renderTextMode : RenderTextMode.DISABLED, - findController: this.pdfSinglePageFindController, + textLayerMode: this._renderText + ? this._renderTextMode + : RenderTextMode.DISABLED, + findController: this.pdfSinglePageFindController }; this.pdfSinglePageViewer = new PDFJSViewer.PDFSinglePageViewer(pdfOptions); @@ -353,7 +403,7 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { } private getDocumentParams() { - const srcType = typeof(this.src); + const srcType = typeof this.src; if (!this._cMapsUrl) { return this.src; @@ -387,15 +437,17 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { return; } - const loadingTask: any = (PDFJS as any).getDocument(this.getDocumentParams()); + const loadingTask: any = (PDFJS as any).getDocument( + this.getDocumentParams() + ); loadingTask.onProgress = (progressData: PDFProgressData) => { this.onProgress.emit(progressData); }; const src = this.src; - (>loadingTask.promise) - .then((pdf: PDFDocumentProxy) => { + (>loadingTask.promise).then( + (pdf: PDFDocumentProxy) => { if (this._pdf) { this._pdf.destroy(); } @@ -412,9 +464,11 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { this.resetPdfDocument(); this.update(); - }, (error: any) => { + }, + (error: any) => { this.onError.emit(error); - }); + } + ); } private update() { @@ -427,7 +481,10 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { this._page = this.getValidPageNumber(this._page); const currentViewer = this.getCurrentViewer(); - if (this._rotation !== 0 || currentViewer.pagesRotation !== this._rotation) { + if ( + this._rotation !== 0 || + currentViewer.pagesRotation !== this._rotation + ) { setTimeout(() => { currentViewer.pagesRotation = this._rotation; }); @@ -449,7 +506,10 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { return 1; } - return this._zoom * (offsetWidth / viewportWidth) / PdfViewerComponent.CSS_UNITS; + return ( + (this._zoom * (offsetWidth / viewportWidth)) / + PdfViewerComponent.CSS_UNITS + ); } private getCurrentViewer(): any { @@ -472,7 +532,5 @@ export class PdfViewerComponent implements OnChanges, OnInit, OnDestroy { this.pdfSinglePageViewer.setDocument(this._pdf); this.pdfSinglePageLinkService.setDocument(this._pdf, null); } - } - }