From e7b5071b169393101fcf851124639ea122bb82f9 Mon Sep 17 00:00:00 2001
From: rlesavre <rlesavre@gmail.com>
Date: Tue, 23 Jun 2020 12:27:30 +0200
Subject: [PATCH 1/2] feat(zoom): give the possibility to choose between
 page-fit, page-width and page-height when original-size is false, and setting
 zoom

---
 README.md                                  | 23 ++++++++++-
 src/app/app.component.html                 | 13 ++++++-
 src/app/app.component.ts                   |  1 +
 src/app/material.module.ts                 |  8 +++-
 src/app/pdf-viewer/pdf-viewer.component.ts | 45 ++++++++++++++--------
 5 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 5cef0724c..0393bccb5 100644
--- a/README.md
+++ b/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,7 +128,7 @@ export class AppComponent {
 | [src] | *string, object, UInt8Array* | Required |
 
 Pass pdf location
- 
+
 ```
 [src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"
 ```
@@ -135,7 +136,7 @@ Pass pdf location
 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 |
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a0e13a7a5..4fb6a87a8 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3e2717f98..2837ce2d9 100644
--- a/src/app/app.component.ts
+++ b/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;
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
index 3f583038f..c17783239 100644
--- a/src/app/material.module.ts
+++ b/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
diff --git a/src/app/pdf-viewer/pdf-viewer.component.ts b/src/app/pdf-viewer/pdf-viewer.component.ts
index 0163c85d1..a2fecd709 100644
--- a/src/app/pdf-viewer/pdf-viewer.component.ts
+++ b/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;
@@ -163,8 +164,13 @@ export class PdfViewerComponent
     this._zoom = value;
   }
 
-  get zoom() {
-    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')
@@ -361,10 +367,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 +596,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 {

From 5707bc9bcbe93ad9af8ee8773be53228422a01bf Mon Sep 17 00:00:00 2001
From: rlesavre <rlesavre@gmail.com>
Date: Tue, 23 Jun 2020 12:49:22 +0200
Subject: [PATCH 2/2] fixed removed accessor

---
 src/app/pdf-viewer/pdf-viewer.component.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/pdf-viewer/pdf-viewer.component.ts b/src/app/pdf-viewer/pdf-viewer.component.ts
index a2fecd709..809bf33b4 100644
--- a/src/app/pdf-viewer/pdf-viewer.component.ts
+++ b/src/app/pdf-viewer/pdf-viewer.component.ts
@@ -164,6 +164,10 @@ export class PdfViewerComponent
     this._zoom = value;
   }
 
+  get zoom() {
+    return this._zoom;
+  }
+
   @Input('zoom-scale')
   set zoomScale(value: 'page-height'|'page-fit' | 'page-width') {
     this._zoomScale = value;