Add PDF thumbnail sidebar to EnvelopeViewer

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.
2026-06-05 21:16:15 +02:00
parent d9ab6b3eff
commit 6024f5c040
3 changed files with 250 additions and 0 deletions
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
@@ -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 {
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
@@ -59,6 +59,159 @@
    justify-content: flex-start;
    padding: 0;
    gap: 1rem;
+    position: relative;
+}
+
+.pdf-thumbnails {
+    position: absolute;
+    left: -280px;
+    top: 0;
+    bottom: 0;
+    width: 260px;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-radius: 16px;
+    box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.12),
+        0 0 0 1px rgba(126, 34, 206, 0.1);
+    border: 1px solid rgba(126, 34, 206, 0.15);
+    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.pdf-thumbnails--visible {
+    left: 0;
+}
+
+.pdf-thumbnails__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 2px solid rgba(126, 34, 206, 0.1);
+    flex-shrink: 0;
+}
+
+.pdf-thumbnails__title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #1e293b;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+}
+
+.pdf-thumbnails__close {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.375rem;
+    border-radius: 6px;
+    color: #64748b;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pdf-thumbnails__close:hover {
+    background: rgba(126, 34, 206, 0.1);
+    color: #7e22ce;
+}
+
+.pdf-thumbnails__content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    border-radius: 3px;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #6b1cb0 0%, #1e3a72 100%);
+}
+
+.pdf-thumbnail {
+    cursor: pointer;
+    border-radius: 8px;
+    overflow: hidden;
+    background: white;
+    border: 2px solid transparent;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.pdf-thumbnail:hover {
+    border-color: rgba(126, 34, 206, 0.3);
+    box-shadow: 0 4px 16px rgba(126, 34, 206, 0.2);
+    transform: translateY(-2px);
+}
+
+.pdf-thumbnail--active {
+    border-color: #7e22ce;
+    box-shadow: 
+        0 4px 16px rgba(126, 34, 206, 0.3),
+        0 0 0 3px rgba(126, 34, 206, 0.1);
+}
+
+.pdf-thumbnail__preview {
+    width: 100%;
+    aspect-ratio: 210 / 297;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.pdf-thumbnail__canvas {
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+}
+
+.pdf-thumbnail__label {
+    padding: 0.5rem;
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #64748b;
+    background: rgba(126, 34, 206, 0.03);
+    border-top: 1px solid rgba(126, 34, 206, 0.1);
+}
+
+.pdf-thumbnail--active .pdf-thumbnail__label {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+    color: #7e22ce;
+    font-weight: 700;
+}
+
+.pdf-toolbar__btn--toggle {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.08) 0%, rgba(42, 82, 152, 0.08) 100%);
+    border-color: rgba(126, 34, 206, 0.25);
+}
+
+.pdf-toolbar__btn--toggle:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.15) 0%, rgba(42, 82, 152, 0.15) 100%);
+    border-color: rgba(126, 34, 206, 0.5);
 }

 .pdf-toolbar {
@@ -307,6 +460,17 @@
        padding: 0.75rem;
    }

+    .pdf-thumbnails {
+        width: 200px;
+        left: -220px;
+        border-radius: 0 16px 16px 0;
+    }
+
+    .pdf-thumbnails__content {
+        padding: 0.75rem;
+        gap: 0.5rem;
+    }
+
    .pdf-toolbar {
        flex-wrap: wrap;
        padding: 0.625rem 1rem;
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
@@ -233,6 +233,31 @@ window.pdfViewer = {
        }
    },

+    async renderThumbnail(pageNum, canvasId) {
+        if (!this.pdfDoc) return;
+
+        try {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+
+            const page = await this.pdfDoc.getPage(pageNum);
+            const viewport = page.getViewport({ scale: 0.2 });
+            
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+
+            const ctx = canvas.getContext('2d');
+            const renderContext = {
+                canvasContext: ctx,
+                viewport: viewport
+            };
+
+            await page.render(renderContext).promise;
+        } catch (error) {
+            // Thumbnail rendering errors are non-critical
+        }
+    },
+
    getCurrentPage() {
        return this.pageNum;
    },