Merge pull request #621 from rlesavre/feat/zoom-scale

feat(zoom): configurability of scale (page-width/page-height/page-fit)

README.md

@@ -108,6 +108,7 @@ export class AppComponent {
 * [[render-text-mode]](#render-text-mode)
 * [[rotation]](#rotation)
 * [[zoom]](#zoom)
+* [[zoom-scale]](#zoom-scale)
 * [[original-size]](#original-size)
 * [[fit-to-page]](#fit-to-page)
 * [[show-all]](#show-all)
@@ -127,15 +128,15 @@ export class AppComponent {
 | [src] | *string, object, UInt8Array* | Required |
 
 Pass pdf location
- 
+
 ```
 [src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"
 ```
 
 For more control you can pass options object to ```[src]```. [See other attributes for the object here](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L128-L204).
 
 Options object for loading protected PDF would be:
- 
+
  ```js
  {
   url: 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf',
@@ -253,6 +254,24 @@ Zoom pdf
 [zoom]="0.5"
 ```
 
+#### [zoom-scale]
+
+| Property | Type | Required |
+| --- | ---- | --- |
+| [zoom-scale] | *'page-width'\|'page-fit'\|'page-height'* | *Optional* |
+
+Defines how the Zoom scale is computed when  `[original-size]="false"`, by default set to 'page-width'.
+
+- *'page-width'* with zoom of 1 will display a page width that take all the possible horizontal space in the container
+
+- *'page-height'* with zoom of 1 will display a page height that take all the possible vertical space in the container
+
+- *'page-fit'* with zoom of 1 will display a page that will be scaled to either width or height to fit completely in the container
+
+```
+[zoom-scale]="page-width"
+```
+
 #### [original-size]
 
 | Property | Type | Required |

src/app/app.component.html

@@ -60,6 +60,15 @@
       </mat-slide-toggle>
     </div>
 
+    <mat-form-field *ngIf="!originalSize">
+      <mat-label>Select an option</mat-label>
+      <mat-select [(value)]="zoomScale">
+        <mat-option value="page-width">Page Width</mat-option>
+        <mat-option value="page-height">Page Height</mat-option>
+        <mat-option value="page-fit">Page Fit</mat-option>
+      </mat-select>
+    </mat-form-field>
+
     <div class="mb">
       <button (click)="incrementZoom(-0.1)" mat-button type="button">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
@@ -174,8 +183,8 @@
 
 
   <mat-drawer-content>
-    <pdf-viewer [src]="pdfSrc" [(page)]="page" [rotation]="rotation" [original-size]="originalSize"
-      [fit-to-page]="fitToPage" (after-load-complete)="afterLoadComplete($event)" [zoom]="zoom" [show-all]="showAll"
+    <pdf-viewer [src]="pdfSrc" [(page)]="page" [rotation]="rotation" [original-size]="originalSize" [show-all]="showAll"
+      [fit-to-page]="fitToPage" (after-load-complete)="afterLoadComplete($event)" [zoom]="zoom" [zoom-scale]="zoomScale" 
       [stick-to-page]="stickToPage" [render-text]="renderText" [external-link-target]="'blank'"
       [autoresize]="autoresize" (error)="onError($event)" (on-progress)="onProgress($event)"
       (page-rendered)="pageRendered($event)"></pdf-viewer>

src/app/app.component.ts

@@ -32,6 +32,7 @@ export class AppComponent {
   page = 1;
   rotation = 0;
   zoom = 1.0;
+  zoomScale = 'page-width';
   originalSize = false;
   pdf: any;
   renderText = true;

src/app/material.module.ts

@@ -6,7 +6,9 @@ import {
   MatSlideToggleModule,
   MatToolbarModule,
   MatSidenavModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatOptionModule,
+  MatSelectModule
 } from '@angular/material';
 
 @NgModule({
@@ -15,6 +17,8 @@ import {
     MatInputModule,
     MatFormFieldModule,
     MatSlideToggleModule,
+    MatSelectModule,
+    MatOptionModule,
     MatToolbarModule,
     MatSidenavModule,
     MatTooltipModule
@@ -24,6 +28,8 @@ import {
     MatInputModule,
     MatFormFieldModule,
     MatSlideToggleModule,
+    MatSelectModule,
+    MatOptionModule,
     MatToolbarModule,
     MatSidenavModule,
     MatTooltipModule

src/app/pdf-viewer/pdf-viewer.component.ts

@@ -82,6 +82,7 @@ export class PdfViewerComponent
   private _pdf: PDFDocumentProxy;
   private _page = 1;
   private _zoom = 1;
+  private _zoomScale: 'page-height'|'page-fit'|'page-width' = 'page-width';
   private _rotation = 0;
   private _showAll = true;
   private _canAutoResize = true;
@@ -167,6 +168,15 @@ export class PdfViewerComponent
     return this._zoom;
   }
 
+  @Input('zoom-scale')
+  set zoomScale(value: 'page-height'|'page-fit' | 'page-width') {
+    this._zoomScale = value;
+  }
+
+  get zoomScale() {
+    return this._zoomScale;
+  }
+
   @Input('rotation')
   set rotation(value: number) {
     if (!(typeof value === 'number' && value % 90 === 0)) {
@@ -361,10 +371,8 @@ export class PdfViewerComponent
           (this._fitToPage &&
             viewportWidth > this.pdfViewerContainer.nativeElement.clientWidth)
         ) {
-          scale = this.getScale(
-            (page as any).getViewport({ scale: 1, rotation })
-              .width
-          );
+          const viewPort = (page as any).getViewport({ scale: 1, rotation });
+          scale = this.getScale(viewPort.width, viewPort.height);
           stickToPage = !this._stickToPage;
         }
 
@@ -592,19 +600,30 @@ export class PdfViewerComponent
     this.updateSize();
   }
 
-  private getScale(viewportWidth: number) {
-    const pdfContainerWidth =
-      this.pdfViewerContainer.nativeElement.clientWidth -
-      (this._showBorders ? 2 * PdfViewerComponent.BORDER_WIDTH : 0);
+  private getScale(viewportWidth: number, viewportHeight: number) {
+    const borderSize = (this._showBorders ? 2 * PdfViewerComponent.BORDER_WIDTH : 0);
+    const pdfContainerWidth = this.pdfViewerContainer.nativeElement.clientWidth - borderSize;
+    const pdfContainerHeight = this.pdfViewerContainer.nativeElement.clientHeight - borderSize;
 
-    if (pdfContainerWidth === 0 || viewportWidth === 0) {
+    if (pdfContainerHeight === 0 || viewportHeight === 0 || pdfContainerWidth === 0 || viewportWidth === 0) {
       return 1;
     }
 
-    return (
-      (this._zoom * (pdfContainerWidth / viewportWidth)) /
-      PdfViewerComponent.CSS_UNITS
-    );
+    let ratio = 1;
+    switch (this._zoomScale) {
+      case 'page-fit':
+        ratio = Math.min((pdfContainerHeight / viewportHeight), (pdfContainerWidth / viewportWidth));
+        break;
+      case 'page-height':
+        ratio = (pdfContainerHeight / viewportHeight);
+        break;
+      case 'page-width':
+      default:
+        ratio = (pdfContainerWidth / viewportWidth);
+        break;
+    }
+
+    return (this._zoom * ratio) / PdfViewerComponent.CSS_UNITS;
   }
 
   private getCurrentViewer(): any {