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 /// Default: 50
/// </summary> /// </summary>
public int ThumbnailRenderDelay { get; set; } = 50; 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> </svg>
</button> </button>
<div class="pdf-toolbar__zoom-slider-container"> <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 class="pdf-toolbar__zoom-label">@(_currentZoom)%</div>
</div> </div>
<button class="pdf-toolbar__btn" @onclick="ZoomIn" disabled="@(_currentZoom >= 300)" title="Vergrößern"> <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.MainCanvasMaxDPR,
options.EnableSmoothZoom, options.EnableSmoothZoom,
options.ZoomTransitionDuration, options.ZoomTransitionDuration,
options.RenderingOpacity options.RenderingOpacity,
options.ZoomStepPercentage
}); });
var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef); var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef);

View File

@@ -4,14 +4,16 @@
"ForceToUseFakeDocument": false "ForceToUseFakeDocument": false
}, },
"PdfViewer": { "PdfViewer": {
"_comment": "PDF Viewer Quality Settings - Changes are applied automatically via IOptionsMonitor",
"ThumbnailBaseScale": 0.75, "ThumbnailBaseScale": 0.75,
"ThumbnailEnableHiDPI": true, "ThumbnailEnableHiDPI": true,
"ThumbnailMaxDPR": 2.0, "ThumbnailMaxDPR": 2.0,
"MainCanvasEnableHiDPI": true, "MainCanvasEnableHiDPI": true,
"MainCanvasMaxDPR": 2.0, "MainCanvasMaxDPR": 2.0,
"EnableSmoothZoom": true, "EnableSmoothZoom": true,
"ZoomTransitionDuration": 900, "ZoomTransitionDuration": 150,
"RenderingOpacity": 0.85, "RenderingOpacity": 0.85,
"ThumbnailRenderDelay": 50 "ThumbnailRenderDelay": 50,
"ZoomStepPercentage": 5
} }
} }

View File

@@ -21,7 +21,8 @@ window.pdfViewer = {
mainCanvasMaxDPR: 2.0, mainCanvasMaxDPR: 2.0,
enableSmoothZoom: true, enableSmoothZoom: true,
zoomTransitionDuration: 150, zoomTransitionDuration: 150,
renderingOpacity: 0.85 renderingOpacity: 0.85,
zoomStepPercentage: 5
}, },
setQualityOptions(options) { setQualityOptions(options) {
@@ -74,16 +75,18 @@ window.pdfViewer = {
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
e.preventDefault(); e.preventDefault();
const step = this.qualityOptions.zoomStepPercentage / 100; // Convert to decimal
if (e.deltaY < 0) { if (e.deltaY < 0) {
// Scroll up = Zoom In (1% ad?m) // Scroll up = Zoom In
this.scale = Math.min(this.scale + 0.01, 3.0); this.scale = Math.min(this.scale + step, 3.0);
this.queueRenderPage(this.pageNum); this.queueRenderPage(this.pageNum);
if (this.dotNetReference) { if (this.dotNetReference) {
this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale); this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
} }
} else { } else {
// Scroll down = Zoom Out (1% ad?m) // Scroll down = Zoom Out
this.scale = Math.max(this.scale - 0.01, 0.5); this.scale = Math.max(this.scale - step, 0.5);
this.queueRenderPage(this.pageNum); this.queueRenderPage(this.pageNum);
if (this.dotNetReference) { if (this.dotNetReference) {
this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale); this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
@@ -243,14 +246,14 @@ window.pdfViewer = {
}, },
zoomIn() { zoomIn() {
// 1% art?? const step = this.qualityOptions.zoomStepPercentage / 100;
this.scale = Math.min(this.scale + 0.01, 3.0); this.scale = Math.min(this.scale + step, 3.0);
this.queueRenderPage(this.pageNum); this.queueRenderPage(this.pageNum);
}, },
zoomOut() { zoomOut() {
// 1% azal?? const step = this.qualityOptions.zoomStepPercentage / 100;
this.scale = Math.max(this.scale - 0.01, 0.5); this.scale = Math.max(this.scale - step, 0.5);
this.queueRenderPage(this.pageNum); this.queueRenderPage(this.pageNum);
}, },