From 74e1d2071174223ef61465a0cf8eb349dfa96704 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:37:04 -0800
Subject: [PATCH] Add Paperless zoom

---
 .../document-detail.component.html            | 32 +++++-----
 .../document-detail.component.ts              | 59 +++++++++++++++++++
 2 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index ddb91311e..86647338b 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -1,9 +1,20 @@
 <pngx-page-header [(title)]="title">
-    <div class="input-group input-group-sm me-5 d-none d-md-flex" *ngIf="getContentType() === 'application/pdf' && !useNativePdfViewer">
-      <div class="input-group-text" i18n>Page</div>
-      <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
-      <div class="input-group-text" i18n>of {{previewNumPages}}</div>
-    </div>
+    <ng-container *ngIf="getContentType() === 'application/pdf' && !useNativePdfViewer">
+        <div class="input-group input-group-sm me-2 d-none d-md-flex">
+            <div class="input-group-text" i18n>Page</div>
+            <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
+            <div class="input-group-text" i18n>of {{previewNumPages}}</div>
+        </div>
+        <div class="input-group input-group-sm me-5 d-none d-md-flex">
+            <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
+            <select class="form-select" (change)="onZoomSelect($event)">
+                <option *ngFor="let setting of zoomSettings" [value]="setting" [selected]="previewZoomSetting == setting">
+                    {{ getZoomSettingTitle(setting) }}
+                </option>
+              </select>
+            <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
+        </div>
+    </ng-container>
 
     <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
         <svg class="buttonicon" fill="currentColor">
@@ -227,15 +238,8 @@
             <ngx-extended-pdf-viewer
                 [src]="previewUrl"
                 [useBrowserLocale]="true"
-                [showPagingButtons]="false"
-                [showRotateButton]="false"
-                [showHandToolButton]="false"
-                [showOpenFileButton]="false"
-                [showDownloadButton]="false"
-                [showDrawEditor]="false"
-                [showTextEditor]="false"
-                [showSecondaryToolbarButton]="false"
-                [showStampEditor]="false"
+                [showToolbar]="false"
+                [zoom]="previewZoomSetting"
                 (pagesLoaded)="onPagesLoaded($event)"
                 (pdfLoadingFailed)="onPdfLoadingFailed($event)"
                 [(page)]="previewCurrentPage">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index e4a7ac6e3..d8c892e80 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -87,6 +87,20 @@ enum DocumentDetailNavIDs {
   Permissions = 6,
 }
 
+enum ZoomSetting {
+  Auto = 'auto',
+  Actual = 'page-actual',
+  Fit = 'page-fit',
+  Width = 'page-width',
+  Quarter = '25%',
+  Half = '50%',
+  ThreeQuarters = '75%',
+  OneHundred = '100%',
+  OneHundredFifty = '150%',
+  TwoHundred = '200%',
+  ThreeHundred = '300%',
+}
+
 @Component({
   selector: 'pngx-document-detail',
   templateUrl: './document-detail.component.html',
@@ -138,6 +152,7 @@ export class DocumentDetailComponent
 
   previewCurrentPage: number = 1
   previewNumPages: number = 1
+  previewZoomSetting: ZoomSetting = ZoomSetting.Width
 
   store: BehaviorSubject<any>
   isDirty$: Observable<boolean>
@@ -920,4 +935,48 @@ export class DocumentDetailComponent
     this.updateFormForCustomFields(true)
     this.documentForm.updateValueAndValidity()
   }
+
+  onZoomSelect(event: Event) {
+    this.previewZoomSetting = (event.target as HTMLSelectElement)
+      ?.value as ZoomSetting
+  }
+
+  get zoomSettings() {
+    return Object.values(ZoomSetting)
+  }
+
+  getZoomSettingTitle(setting: ZoomSetting = null): string {
+    switch (setting) {
+      case ZoomSetting.Auto:
+        return $localize`Auto`
+      case ZoomSetting.Actual:
+        return $localize`Actual Size`
+      case ZoomSetting.Fit:
+        return $localize`Page Fit`
+      case ZoomSetting.Width:
+        return $localize`Page Width`
+      default:
+        return setting
+    }
+  }
+
+  increaseZoom(): void {
+    let currentIndex = Object.values(ZoomSetting).indexOf(
+      this.previewZoomSetting
+    )
+    if (currentIndex < 4) currentIndex = 7
+    this.previewZoomSetting =
+      Object.values(ZoomSetting)[
+        Math.min(Object.values(ZoomSetting).length - 1, currentIndex + 1)
+      ]
+  }
+
+  decreaseZoom(): void {
+    let currentIndex = Object.values(ZoomSetting).indexOf(
+      this.previewZoomSetting
+    )
+    if (currentIndex < 4) currentIndex = 7
+    this.previewZoomSetting =
+      Object.values(ZoomSetting)[Math.max(4, currentIndex - 1)]
+  }
 }