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

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