AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve zoom control granularity and behavior

Browse Source 
Updated the zoom slider in `EnvelopeViewer.razor` to allow finer adjustments by changing the step size from 25 to 1. Modified `pdf-viewer.js` to enable smoother zooming with 1% increments for `zoomIn` and `zoomOut` methods. Capped zoom levels between 0.5 and 3.0. Enhanced mouse wheel zoom behavior to adjust zoom in 1% steps and notify the .NET side of changes via `OnZoomChanged`. Ensured pages are re-rendered after each zoom adjustment.
This commit is contained in:
tekh
2026-06-05 13:39:20 +02:00
parent 76945c9051
commit c26ad9e1c2
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
View File

@@ -86,7 +86,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="25" value="@_currentZoom" @oninput="OnZoomSliderChanged" title="@(_currentZoom)%" /> <input type="range" class="pdf-toolbar__zoom-slider" min="50" max="300" step="1" 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">

20
EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
View File

@@ -70,14 +70,16 @@ window.pdfViewer = {
e.preventDefault(); e.preventDefault();
if (e.deltaY < 0) { if (e.deltaY < 0) {
// Scroll up = Zoom In // Scroll up = Zoom In (1% ad?m)
this.zoomIn(); this.scale = Math.min(this.scale + 0.01, 3.0);
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 // Scroll down = Zoom Out (1% ad?m)
this.zoomOut(); this.scale = Math.max(this.scale - 0.01, 0.5);
this.queueRenderPage(this.pageNum);
if (this.dotNetReference) { if (this.dotNetReference) {
this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale); this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
} }
@@ -220,15 +222,15 @@ window.pdfViewer = {
}, },
zoomIn() { zoomIn() {
this.scale += 0.25; // 1% art??
this.scale = Math.min(this.scale + 0.01, 3.0);
this.queueRenderPage(this.pageNum); this.queueRenderPage(this.pageNum);
}, },
zoomOut() { zoomOut() {
if (this.scale > 0.5) { // 1% azal??
this.scale -= 0.25; this.scale = Math.max(this.scale - 0.01, 0.5);
this.queueRenderPage(this.pageNum); this.queueRenderPage(this.pageNum);
}
}, },
setScale(scale) { setScale(scale) {