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.
This commit is contained in:
2026-06-06 12:36:00 +02:00
parent 139b92ed8c
commit 0faf1fba7e
4 changed files with 26 additions and 13 deletions

View File

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

View File

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

View File

@@ -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
}
}

View File

@@ -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);
},