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

Add PDF thumbnail sidebar to EnvelopeViewer

Browse Source 
Introduced a PDF thumbnail sidebar in `EnvelopeViewer.razor` to enhance navigation between pages. Added a toggle button to show/hide the sidebar and implemented dynamic thumbnail rendering for all pages.

Updated `envelope-viewer.css` with styles for the sidebar, including hover/active states, transitions, and mobile responsiveness.

Enhanced `pdf-viewer.js` with a `renderThumbnail` method to render page previews on canvas elements. Added error handling for non-critical thumbnail rendering issues.

Improved user experience by providing an intuitive way to preview and navigate PDF pages.
This commit is contained in:
tekh
2026-06-05 21:16:15 +02:00
parent d9ab6b3eff
commit 6024f5c040
3 changed files with 250 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@
@inject NavigationManager Navigation
@inject IOptions<ApiOptions> AppOptions
@inject IJSRuntime JSRuntime
@inject AnnotationService AnnotService
@implements IAsyncDisposable
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
@@ -59,7 +60,40 @@
} else if (!string.IsNullOrWhiteSpace(_pdfDataUrl)) {
<div class="pdf-viewer-container">
@if (_pdfLoaded) {
<!-- PDF Thumbnail Sidebar -->
<div class="pdf-thumbnails @(_showThumbnails ? "pdf-thumbnails--visible" : "")">
<div class="pdf-thumbnails__header">
<span class="pdf-thumbnails__title">Seiten</span>
<button class="pdf-thumbnails__close" @onclick="ToggleThumbnails" title="Seitenleiste schließen">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
</div>
<div class="pdf-thumbnails__content">
@for (int i = 1; i <= _totalPages; i++) {
var pageNum = i;
<div class="pdf-thumbnail @(pageNum == _currentPage ? "pdf-thumbnail--active" : "")" @onclick="() => GoToPageFromThumbnail(pageNum)">
<div class="pdf-thumbnail__preview">
<canvas id="thumb-canvas-@pageNum" class="pdf-thumbnail__canvas"></canvas>
</div>
<div class="pdf-thumbnail__label">@pageNum</div>
</div>
}
</div>
</div>
<div class="pdf-toolbar">
<div class="pdf-toolbar__section">
<button class="pdf-toolbar__btn pdf-toolbar__btn--toggle" @onclick="ToggleThumbnails" title="@(_showThumbnails ? "Seitenleiste ausblenden" : "Seitenleiste einblenden")">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</svg>
</button>
</div>
<div class="pdf-toolbar__divider"></div>
<div class="pdf-toolbar__section">
<button class="pdf-toolbar__btn" @onclick="PreviousPage" disabled="@(_currentPage <= 1)" title="Vorherige Seite">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
@@ -145,6 +179,7 @@
int _currentPage = 1;
int _totalPages = 0;
int _currentZoom = 150;
bool _showThumbnails = true;
DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
protected override async Task OnInitializedAsync() {
@@ -163,6 +198,9 @@
} else {
_errorMessage = $"Dokument konnte nicht geladen werden. HTTP Status: {statusCode}";
}
var annots = await AnnotService.GetAnnotationsAsync(EnvelopeKey);
} catch (Exception ex) {
_errorMessage = $"Fehler: {ex.Message}";
}
@@ -184,6 +222,9 @@
_totalPages = await JSRuntime.InvokeAsync<int>("pdfViewer.getTotalPages");
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
await InvokeAsync(StateHasChanged);
// Render thumbnails
await RenderThumbnailsAsync();
}
} catch (Exception ex) {
_errorMessage = $"PDF.js Fehler: {ex.Message}";
@@ -251,6 +292,26 @@
_currentZoom = (int)(scale * 100);
}
void ToggleThumbnails() {
_showThumbnails = !_showThumbnails;
}
async Task GoToPageFromThumbnail(int pageNum) {
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum)) {
_currentPage = pageNum;
}
}
async Task RenderThumbnailsAsync() {
try {
for (int i = 1; i <= _totalPages; i++) {
await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}");
}
} catch (Exception) {
// Thumbnail rendering is not critical
}
}
public async ValueTask DisposeAsync() {
if (_pdfLoaded) {
try {