[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

lib/core/viewer/components/pdfViewer-thumb.component.html

@@ -1,4 +1,4 @@
 <ng-container *ngIf="image$ | async as image">
     <img [src]="image"
         title="{{ 'ADF_VIEWER.SIDEBAR.THUMBNAILS.PAGE' | translate: { pageNum: page.id } }}">
-</ng-container>
+</ng-container>

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({

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<string>;
 
-    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<string> {
-        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;
     }
 }

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;
         }
     }
-}
+}

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

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