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

Add resizable thumbnail sidebar to EnvelopeViewer

Browse Source 
Introduced a resizable splitter for the PDF thumbnail sidebar, allowing users to dynamically adjust its width. Added `_thumbnailWidth` property with min/max constraints and implemented mouse event handlers (`OnSplitterMouseDown`, `OnSplitterMouseMove`, `OnSplitterMouseUp`) to manage resizing.

Integrated JavaScript interop to attach/detach resize event listeners and save user preferences to `localStorage`. Updated `pdf-viewer.js` to handle resizing state and cleanup. Styled the splitter in `envelope-viewer.css` with hover/active states and ensured smooth interaction.

Persisted thumbnail width across sessions and added error handling for `localStorage`. Enhanced user experience with intuitive resizing and improved UI flexibility.
This commit is contained in:
tekh
2026-06-06 00:38:27 +02:00
parent fb02a1a359
commit 9fa8ef29d8
3 changed files with 163 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -130,7 +130,7 @@
<div class="pdf-frame">
@if (_pdfLoaded && _showThumbnails) {
<!-- PDF Thumbnail Sidebar -->
<div class="pdf-thumbnails">
<div class="pdf-thumbnails" style="width: @(_thumbnailWidth)px">
<div class="pdf-thumbnails__content">
@for (int i = 1; i <= _totalPages; i++) {
var pageNum = i;
@@ -143,6 +143,11 @@
}
</div>
</div>
<!-- Resizable Splitter -->
<div class="pdf-splitter @(_isResizing ? "resizing" : "")"
@onmousedown="OnSplitterMouseDown"
@onmousedown:preventDefault="true">
</div>
}
<div class="pdf-canvas-wrapper">
<canvas id="pdf-canvas" class="pdf-canvas"></canvas>
@@ -165,19 +170,27 @@
</div>
@code {
[Parameter] public string? EnvelopeKey { get; set; }
[Parameter] public string? EnvelopeKey { get; set; }
bool _isLoading = true;
string? _errorMessage;
string? _pdfDataUrl;
bool _pdfLoaded = false;
int _currentPage = 1;
int _totalPages = 0;
int _currentZoom = 150;
bool _showThumbnails = true;
DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
bool _isLoading = true;
string? _errorMessage;
string? _pdfDataUrl;
bool _pdfLoaded = false;
int _currentPage = 1;
int _totalPages = 0;
int _currentZoom = 150;
bool _showThumbnails = true;
DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
protected override async Task OnInitializedAsync() {
// Resizable splitter state
int _thumbnailWidth = 260;
bool _isResizing = false;
int _resizeStartX = 0;
int _resizeStartWidth = 0;
const int MinThumbnailWidth = 150;
const int MaxThumbnailWidth = 400;
protected override async Task OnInitializedAsync() {
if (string.IsNullOrWhiteSpace(EnvelopeKey)) {
_errorMessage = "Envelope-Schlüssel fehlt.";
_isLoading = false;
@@ -205,6 +218,19 @@
}
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
// Load saved thumbnail width from localStorage
try {
var savedWidth = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "envelopeViewer_thumbnailWidth");
if (!string.IsNullOrEmpty(savedWidth) && int.TryParse(savedWidth, out var width)) {
_thumbnailWidth = Math.Clamp(width, MinThumbnailWidth, MaxThumbnailWidth);
await InvokeAsync(StateHasChanged);
}
} catch {
// Ignore localStorage errors
}
}
if (!_pdfLoaded && !string.IsNullOrWhiteSpace(_pdfDataUrl)) {
await Task.Delay(500);
@@ -216,6 +242,10 @@
_pdfLoaded = true;
_totalPages = await JSRuntime.InvokeAsync<int>("pdfViewer.getTotalPages");
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
// Attach resize listeners
await JSRuntime.InvokeVoidAsync("pdfViewer.attachResizeListeners", _dotNetRef);
await InvokeAsync(StateHasChanged);
// Wait for DOM to be ready, then render thumbnails
@@ -315,6 +345,45 @@
}
}
// Resizable splitter methods
void OnSplitterMouseDown(MouseEventArgs e) {
_isResizing = true;
_resizeStartX = (int)e.ClientX;
_resizeStartWidth = _thumbnailWidth;
// Add resizing class to body to prevent text selection
_ = JSRuntime.InvokeVoidAsync("eval", "document.body.classList.add('resizing')");
_ = JSRuntime.InvokeVoidAsync("pdfViewer.startResize");
}
[JSInvokable]
public async Task OnSplitterMouseMove(int clientX) {
if (!_isResizing) return;
var delta = clientX - _resizeStartX;
var newWidth = _resizeStartWidth + delta;
// Clamp to min/max
_thumbnailWidth = Math.Clamp(newWidth, MinThumbnailWidth, MaxThumbnailWidth);
await InvokeAsync(StateHasChanged);
}
[JSInvokable]
public async Task OnSplitterMouseUp() {
if (!_isResizing) return;
_isResizing = false;
// Remove resizing class from body
await JSRuntime.InvokeVoidAsync("eval", "document.body.classList.remove('resizing')");
// Save preference to localStorage
await JSRuntime.InvokeVoidAsync("localStorage.setItem", "envelopeViewer_thumbnailWidth", _thumbnailWidth.ToString());
await InvokeAsync(StateHasChanged);
}
public async ValueTask DisposeAsync() {
if (_pdfLoaded) {
try {