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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user