From 0faf1fba7ef87e848a98cb0a9e21aa711e73b0f3 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Sat, 6 Jun 2026 12:36:00 +0200
Subject: [PATCH] Make zoom step percentage configurable

Added a `ZoomStepPercentage` property to `PdfViewerOptions` to allow configurable zoom step increments (1-50, default 5%). Updated `EnvelopeViewer.razor` to use this property for the zoom slider step. Modified `pdf-viewer.js` to apply the zoom step percentage for mouse wheel zoom, `zoomIn`, and `zoomOut` methods.

Included `ZoomStepPercentage` in `appsettings.json` and `setQualityOptions` for dynamic updates. Reduced `ZoomTransitionDuration` in `appsettings.json` from 900ms to 150ms for faster zoom transitions. These changes ensure consistent and customizable zoom behavior across the application.
---
 .../Options/PdfViewerOptions.cs               |  7 +++++++
 .../Pages/EnvelopeViewer.razor                |  5 +++--
 .../wwwroot/appsettings.json                  |  6 ++++--
 .../wwwroot/js/pdf-viewer.js                  | 21 +++++++++++--------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/EnvelopeGenerator.ReceiverUI/Options/PdfViewerOptions.cs b/EnvelopeGenerator.ReceiverUI/Options/PdfViewerOptions.cs
index 779ac6f3..3a0aec82 100644
--- a/EnvelopeGenerator.ReceiverUI/Options/PdfViewerOptions.cs
+++ b/EnvelopeGenerator.ReceiverUI/Options/PdfViewerOptions.cs
@@ -61,4 +61,11 @@ public class PdfViewerOptions
     /// Default: 50
     /// </summary>
     public int ThumbnailRenderDelay { get; set; } = 50;
+
+    /// <summary>
+    /// Zoom step percentage (1 - 50)
+    /// Controls how much zoom changes per click or scroll
+    /// Default: 5 (5% per step)
+    /// </summary>
+    public int ZoomStepPercentage { get; set; } = 5;
 }
diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
index dc4f7f2c..9af9dc61 100644
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
@@ -98,7 +98,7 @@
                                 </svg>
                             </button>
                             <div class="pdf-toolbar__zoom-slider-container">
-                                <input type="range" class="pdf-toolbar__zoom-slider" min="50" max="300" step="1" value="@_currentZoom" @oninput="OnZoomSliderChanged" title="@(_currentZoom)%" />
+                                <input type="range" class="pdf-toolbar__zoom-slider" min="50" max="300" step="@(PdfViewerOptions.Value.ZoomStepPercentage)" value="@_currentZoom" @oninput="OnZoomSliderChanged" title="@(_currentZoom)%" />
                                 <div class="pdf-toolbar__zoom-label">@(_currentZoom)%</div>
                             </div>
                             <button class="pdf-toolbar__btn" @onclick="ZoomIn" disabled="@(_currentZoom >= 300)" title="Vergrößern">
@@ -249,7 +249,8 @@ protected override async Task OnInitializedAsync() {
                     options.MainCanvasMaxDPR,
                     options.EnableSmoothZoom,
                     options.ZoomTransitionDuration,
-                    options.RenderingOpacity
+                    options.RenderingOpacity,
+                    options.ZoomStepPercentage
                 });
                 
                 var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef);
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json b/EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json
index 447f6783..291be071 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json
@@ -4,14 +4,16 @@
     "ForceToUseFakeDocument": false
   },
   "PdfViewer": {
+    "_comment": "PDF Viewer Quality Settings - Changes are applied automatically via IOptionsMonitor",
     "ThumbnailBaseScale": 0.75,
     "ThumbnailEnableHiDPI": true,
     "ThumbnailMaxDPR": 2.0,
     "MainCanvasEnableHiDPI": true,
     "MainCanvasMaxDPR": 2.0,
     "EnableSmoothZoom": true,
-    "ZoomTransitionDuration": 900,
+    "ZoomTransitionDuration": 150,
     "RenderingOpacity": 0.85,
-    "ThumbnailRenderDelay": 50
+    "ThumbnailRenderDelay": 50,
+    "ZoomStepPercentage": 5
   }
 }
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
index 2a54ca70..21114545 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
@@ -21,7 +21,8 @@ window.pdfViewer = {
         mainCanvasMaxDPR: 2.0,
         enableSmoothZoom: true,
         zoomTransitionDuration: 150,
-        renderingOpacity: 0.85
+        renderingOpacity: 0.85,
+        zoomStepPercentage: 5
     },
 
     setQualityOptions(options) {
@@ -74,16 +75,18 @@ window.pdfViewer = {
             if (e.ctrlKey || e.metaKey) {
                 e.preventDefault();
                 
+                const step = this.qualityOptions.zoomStepPercentage / 100; // Convert to decimal
+                
                 if (e.deltaY < 0) {
-                    // Scroll up = Zoom In (1% ad?m)
-                    this.scale = Math.min(this.scale + 0.01, 3.0);
+                    // Scroll up = Zoom In
+                    this.scale = Math.min(this.scale + step, 3.0);
                     this.queueRenderPage(this.pageNum);
                     if (this.dotNetReference) {
                         this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
                     }
                 } else {
-                    // Scroll down = Zoom Out (1% ad?m)
-                    this.scale = Math.max(this.scale - 0.01, 0.5);
+                    // Scroll down = Zoom Out
+                    this.scale = Math.max(this.scale - step, 0.5);
                     this.queueRenderPage(this.pageNum);
                     if (this.dotNetReference) {
                         this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
@@ -243,14 +246,14 @@ window.pdfViewer = {
     },
 
     zoomIn() {
-        // 1% art??
-        this.scale = Math.min(this.scale + 0.01, 3.0);
+        const step = this.qualityOptions.zoomStepPercentage / 100;
+        this.scale = Math.min(this.scale + step, 3.0);
         this.queueRenderPage(this.pageNum);
     },
 
     zoomOut() {
-        // 1% azal??
-        this.scale = Math.max(this.scale - 0.01, 0.5);
+        const step = this.qualityOptions.zoomStepPercentage / 100;
+        this.scale = Math.max(this.scale - step, 0.5);
         this.queueRenderPage(this.pageNum);
     },