From 1266acc4ab558a9656d9756c2f2bf485b2929ca2 Mon Sep 17 00:00:00 2001 From: Georgiana Roman <38908609+georgiana-roman@users.noreply.github.com> Date: Mon, 4 Jun 2018 14:20:20 +0300 Subject: [PATCH] [ADF-2438] fixed thumbnails height (#3407) * [ADF-2438] calculate thumbnail height * [ADF-2438] send height to parent element * [ADF-2438] add width to css * [ADF-2438] moved height and width logic to parent component * [ADF-2438] added height and width logic to parent component * [ADF-2438] fixed failing test --- .../components/pdfViewer-thumb.component.html | 2 +- .../pdfViewer-thumb.component.spec.ts | 9 ++++++-- .../components/pdfViewer-thumb.component.ts | 18 +++++++-------- .../pdfViewer-thumbnails.component.scss | 3 +-- .../pdfViewer-thumbnails.component.spec.ts | 16 ++++---------- .../pdfViewer-thumbnails.component.ts | 22 ++++++++++++++++++- 6 files changed, 42 insertions(+), 28 deletions(-) diff --git a/lib/core/viewer/components/pdfViewer-thumb.component.html b/lib/core/viewer/components/pdfViewer-thumb.component.html index abce3ef950..564a5b2008 100644 --- a/lib/core/viewer/components/pdfViewer-thumb.component.html +++ b/lib/core/viewer/components/pdfViewer-thumb.component.html @@ -1,4 +1,4 @@ - \ No newline at end of file + diff --git a/lib/core/viewer/components/pdfViewer-thumb.component.spec.ts b/lib/core/viewer/components/pdfViewer-thumb.component.spec.ts index f09e7d2451..06e28815c4 100644 --- a/lib/core/viewer/components/pdfViewer-thumb.component.spec.ts +++ b/lib/core/viewer/components/pdfViewer-thumb.component.spec.ts @@ -28,12 +28,17 @@ describe('PdfThumbComponent', () => { const domSanitizer = { bypassSecurityTrustUrl: () => 'image-data' }; + const width = 91; + const height = 119; const page = { id: 'pageId', getPage: jasmine.createSpy('getPage').and.returnValue(Promise.resolve({ - getViewport: () => ({ height: 0, width: 0 }), + getViewport: () => ({ height: width, width: height }), render: jasmine.createSpy('render').and.returnValue(Promise.resolve()) - })) + })), + + getWidth: jasmine.createSpy('getWidth').and.returnValue(width), + getHeight: jasmine.createSpy('getHeight').and.returnValue(height) }; setupTestBed({ diff --git a/lib/core/viewer/components/pdfViewer-thumb.component.ts b/lib/core/viewer/components/pdfViewer-thumb.component.ts index ba0e363732..8e4f58b78b 100644 --- a/lib/core/viewer/components/pdfViewer-thumb.component.ts +++ b/lib/core/viewer/components/pdfViewer-thumb.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnInit, ElementRef, ViewEncapsulation } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ @@ -30,16 +30,17 @@ export class PdfThumbComponent implements OnInit { image$: Promise; - constructor( - private element: ElementRef, private sanitizer: DomSanitizer) {} + constructor(private sanitizer: DomSanitizer) {} ngOnInit() { this.image$ = this.page.getPage().then((page) => this.getThumb(page)); } private getThumb(page): Promise { - const canvas = this.getCanvas(); const viewport = page.getViewport(1); + + const pageRatio = viewport.width / viewport.height; + const canvas = this.getCanvas(pageRatio); const scale = Math.min((canvas.height / viewport.height), (canvas.width / viewport.width)); return page.render({ @@ -52,13 +53,10 @@ export class PdfThumbComponent implements OnInit { }); } - private getCanvas(): HTMLCanvasElement { - const elementRect = this.element.nativeElement.getBoundingClientRect(); + private getCanvas(pageRatio): HTMLCanvasElement { const canvas = document.createElement('canvas'); - - canvas.width = elementRect.width; - canvas.height = elementRect.height; - + canvas.width = this.page.getWidth(); + canvas.height = this.page.getHeight(); return canvas; } } diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss index 30a1adb39a..4cf00832d7 100644 --- a/lib/core/viewer/components/pdfViewer-thumbnails.component.scss +++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.scss @@ -18,7 +18,6 @@ &__thumb { cursor: pointer; display: block; - height: 114px; width: 91px; background: mat-color($background, background); margin-bottom: 15px; @@ -32,4 +31,4 @@ box-shadow: 0px 0px 5px 0px $black-87-opacity; } } -} \ No newline at end of file +} diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts index 4418b82a01..206e2ecde3 100644 --- a/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts +++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts @@ -32,11 +32,7 @@ describe('PdfThumbListComponent', () => { const page = (id) => { return { id, - getPage: () => Promise.resolve({ - getViewport: () => { - return 1; - } - }) + getPage: Promise.resolve() }; }; @@ -51,12 +47,8 @@ describe('PdfThumbListComponent', () => { }, pdfDocument: { getPage: (pageNum) => Promise.resolve({ - getViewport: () => { - return 1; - }, - render: () => { - return Promise.resolve({}); - } + getViewport: () => ({ height: 421, width: 335 }), + render: jasmine.createSpy('render').and.returnValue(Promise.resolve()) }) }, _pages: [ @@ -78,7 +70,6 @@ describe('PdfThumbListComponent', () => { beforeEach(async(() => { fixture = TestBed.createComponent(PdfThumbListComponent); component = fixture.componentInstance; - component.pdfViewer = viewerMock; // provide scrollable container @@ -100,6 +91,7 @@ describe('PdfThumbListComponent', () => { }); it('should render next range on scroll', () => { + component.currentHeight = 114; fixture.nativeElement.scrollTop = 700; fixture.detectChanges(); diff --git a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts index 762bf55676..543802bbb9 100644 --- a/lib/core/viewer/components/pdfViewer-thumbnails.component.ts +++ b/lib/core/viewer/components/pdfViewer-thumbnails.component.ts @@ -33,6 +33,8 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { virtualHeight: number = 0; translateY: number = 0; renderItems = []; + width: number = 91; + currentHeight: number = 0; private items = []; private margin: number = 15; @@ -52,11 +54,13 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { } ngOnInit() { - this.element.nativeElement.addEventListener('scroll', this.calculateItems, true); this.pdfViewer.eventBus.on('pagechange', this.onPageChange); + this.element.nativeElement.addEventListener('scroll', this.calculateItems, true); + this.setHeight(this.pdfViewer.currentPageNumber); this.items = this.getPages(); this.calculateItems(); + } ngAfterViewInit() { @@ -97,10 +101,26 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { getPages() { return this.pdfViewer._pages.map((page) => ({ id: page.id, + getWidth: () => { return this.width; }, + getHeight: () => { return this.currentHeight; }, getPage: () => this.pdfViewer.pdfDocument.getPage(page.id) })); } + private setHeight(id): number { + const height = this.pdfViewer.pdfDocument.getPage(id).then((page) => this.calculateHeight(page)); + return height; + } + + private calculateHeight(page) { + const viewport = page.getViewport(1); + const pageRatio = viewport.width / viewport.height; + const height = Math.floor(this.width / pageRatio); + + this.currentHeight = height; + this.itemHeight = height + this.margin; + } + private calculateItems() { const { element, viewPort, itemsInView } = this.getContainerSetup();