Preserve scroll position during PDF page rendering

Added functionality to maintain the scroll position and viewport center of the `.pdf-frame` container during PDF page rendering. This ensures the user's view remains centered on the same content after re-rendering, even if the canvas dimensions change. Implemented logic to store the scroll position and viewport center before rendering and restore them afterward using scaling factors calculated from the canvas's old and new dimensions.
Add EnvelopeViewer for read-only PDF viewing with PDF.js
2026-06-05 12:55:23 +02:00 · 2026-06-05 12:52:23 +02:00 · 2026-06-05 12:36:59 +02:00 · 2026-06-05 11:47:05 +02:00 · 2026-06-05 11:18:23 +02:00 · 2026-06-05 11:04:30 +02:00
6 changed files with 784 additions and 9 deletions
--- a/COPILOT_CONTEXT_EN.md
+++ b/COPILOT_CONTEXT_EN.md
@@ -25,8 +25,11 @@ A digital document signing system. Senders upload PDFs and place signature annot

 | File | Purpose |
 |---|---|
-| `ReceiverUI/Pages/ReportViewer.razor` | Main receiver page. All signing logic. |
+| `ReceiverUI/Pages/EnvelopeViewer.razor` | **NEW** PDF.js-based viewer (`/envelope/{key}`). Replaces ReportViewer.razor. Simple read-only PDF viewing with zoom/navigation. |
+| `ReceiverUI/Pages/ReportViewer.razor` | **LEGACY** DevExpress-based signing page (`/receiver/{key}`). Still used for signature workflow. Will be deprecated. |
+| `ReceiverUI/wwwroot/js/pdf-viewer.js` | **NEW** PDF.js wrapper: rendering, zoom, pagination, mouse wheel control. |
 | `ReceiverUI/wwwroot/js/receiver-signature.js` | JS: checkbox overlay, signature pad (draw/type/image). |
+| `ReceiverUI/wwwroot/css/envelope-viewer.css` | **NEW** Styles for EnvelopeViewer.razor (external CSS, not inline). |
 | `ReceiverUI/wwwroot/fake-data/annotations.json` | Dev-mode fake annotations (YARP proxy target). |
 | `ReceiverUI/Models/AnnotationDto.cs` | Annotation position model. All properties non-nullable. |
 | `ReceiverUI/Services/AnnotationService.cs` | Fetches `List<AnnotationDto>` from API or fake-data. |
@@ -55,7 +58,109 @@ Conversions:

 ---

-## ReceiverUI Signing Flow (ReportViewer.razor)
+## EnvelopeViewer (NEW) — PDF.js Read-Only Viewer
+
+**Route:** `/envelope/{EnvelopeKey}`  
+**Purpose:** Simple, modern PDF viewing without signing functionality.  
+**Technology:** PDF.js 3.11.174 + custom JavaScript wrapper
+
+### Architecture
+
+**Blazor Component (`EnvelopeViewer.razor`):**
+- Fetches PDF via `DocumentService.GetDocumentAsync(EnvelopeKey)`
+- Converts to base64 data URL: `data:application/pdf;base64,{base64}`
+- Initializes PDF.js viewer via JSInterop with `DotNetObjectReference` for callbacks
+- Displays controls: Zoom In/Out, Page Navigation, Zoom percentage
+- CSS externalized to `envelope-viewer.css`
+
+**JavaScript (`pdf-viewer.js`):**
+```javascript
+window.pdfViewer = {
+    pdfDoc, canvas, ctx, scale, currentRenderTask,
+    dotNetReference, wheelEventAttached,
+    
+    initialize(canvasId, pdfDataUrl, dotNetRef),
+    renderPage(num),
+    attachWheelEvent(),  // Global Ctrl+Wheel zoom
+    zoomIn(), zoomOut(),
+    nextPage(), previousPage(),
+    dispose()
+}
+```
+
+**CSS (`envelope-viewer.css`):**
+- `.envelope-viewer-layout`: Full-height gradient background
+- `.envelope-action-bar`: Top bar with logo, title, controls (sticky)
+- `.pdf-frame`: Fixed-size white container (`calc(100vh - 200px)` × 90% width, max 1200px)
+- `.pdf-canvas`: `display: inline-block`, unlimited zoom, scrollable when exceeds frame
+- Modern glassmorphism design with gradients and shadows
+
+### Features
+
+1. **Unlimited Zoom:**
+   - Canvas size not restricted by `max-width`
+   - Frame stays fixed, scroll bars appear automatically
+   - `text-align: center` for small sizes, full scroll for zoomed views
+
+2. **Global Mouse Wheel Zoom:**
+   - Event listener on `document.body` (works anywhere on page)
+   - `Ctrl + Mouse Wheel` triggers `zoomIn()`/`zoomOut()`
+   - Calls `dotNetReference.invokeMethodAsync('OnZoomChanged', scale)` to update Blazor UI
+   - `{ passive: false }` to enable `preventDefault()`
+
+3. **Render Task Cancellation:**
+   - Stores `currentRenderTask` to cancel previous render if new one starts
+   - Catches `RenderingCancelledException` to avoid console errors
+   - Queue system (`pageNumPending`) for rapid page changes
+
+4. **Responsive Design:**
+   - Desktop: 90% width, 1200px max
+   - Mobile: 95% width, adjusted heights
+   - Adaptive padding and font sizes
+
+### Flow
+
+1. **Component Load:**
+   ```csharp
+   OnInitializedAsync():
+     - Fetch PDF bytes
+     - Convert to base64 data URL
+     - Set _isLoading = false
+   
+   OnAfterRenderAsync():
+     - Create DotNetObjectReference
+     - JSRuntime.InvokeAsync("pdfViewer.initialize", canvasId, pdfDataUrl, dotNetRef)
+     - Update _totalPages, _currentPage, _pdfLoaded
+   ```
+
+2. **User Interaction:**
+   - Button clicks ? `ZoomIn()`/`ZoomOut()` ? `JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn")`
+   - Ctrl+Wheel ? JS `attachWheelEvent()` ? `dotNetRef.invokeMethodAsync('OnZoomChanged')`
+   - Page buttons ? `NextPage()`/`PreviousPage()` ? `JSRuntime.InvokeAsync("pdfViewer.nextPage")`
+
+3. **Cleanup:**
+   ```csharp
+   DisposeAsync():
+     - JSRuntime.InvokeVoidAsync("pdfViewer.dispose")
+     - _dotNetRef?.Dispose()
+   ```
+
+### Key Differences from ReportViewer
+
+| Feature | EnvelopeViewer (NEW) | ReportViewer (LEGACY) |
+|---------|----------------------|------------------------|
+| Technology | PDF.js + Canvas | DevExpress XtraReports |
+| Route | `/envelope/{key}` | `/receiver/{key}` |
+| Purpose | Read-only viewing | Signature workflow |
+| Dependencies | PDF.js CDN | DevExpress NuGet packages |
+| Zoom | Unlimited, smooth | Report viewer default |
+| Mouse Wheel | Custom Ctrl+Wheel | Browser default |
+| File Size | Minimal (JS + CSS) | Heavy (DX libs) |
+| Maintenance | Simple, standard web | Complex, vendor-specific |
+
+---
+
+## ReceiverUI Signing Flow (ReportViewer.razor — LEGACY)

 ### On Load (`OnInitializedAsync`)
 1. `AuthService.CheckEnvelopeAccessAsync` ? redirect to login if unauthorized
@@ -137,12 +242,16 @@ return report;

 | Package | Version | Purpose |
 |---|---|---|
-| `DevExpress.Blazor.Reporting.Viewer` | 25.2.3 | DxReportViewer component |
-| `DevExpress.Blazor.PdfViewer` | 25.2.3 | PDF viewer |
+| `DevExpress.Blazor.Reporting.Viewer` | 25.2.3 | DxReportViewer (LEGACY, used in ReportViewer.razor) |
+| `DevExpress.Blazor.PdfViewer` | 25.2.3 | PDF viewer (not used in EnvelopeViewer) |
 | `DevExpress.Drawing.Skia` | 25.2.3 | Drawing backend |
 | `itext` | 8.0.5 | PDF stamping (iText7) |
 | `SkiaSharp.*` | 3.119.1 | WASM native rendering |

+**External CDN (EnvelopeViewer):**
+- PDF.js 3.11.174 (via `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js`)
+- PDF.js Worker (`pdf.worker.min.js`)
+
 ---

 ## Mistakes History — Do NOT Repeat
@@ -155,6 +264,9 @@ return report;
 | `ctrl.Report?.PrintingSystem` | `PrintingSystem` not on `XtraReportBase` in WASM |
 | Adding stamp endpoint to `DocumentController` | Not needed; stamping is done client-side in ReceiverUI |
 | iText7 via API (server-side) | Unnecessary; iText7 runs fine in WASM directly |
+| **PDF.js: `display: flex` on `.pdf-frame`** | **Prevents left-edge scroll when canvas exceeds container** |
+| **PDF.js: `max-width: 100%` on canvas** | **Limits zoom; user expects unlimited zoom capability** |
+| **Mouse wheel on `.pdf-frame` only** | **Only works when mouse over PDF; should work anywhere on page** |

 ---

@@ -180,3 +292,10 @@ Our use case is **visual/image stamping** at specific page coordinates
 | 10 | — | Investigated DevExpress article — not applicable to our case |
 | 10 | — | Added iText7 to ReceiverUI; implemented `StampSignaturesOnPdf` — ? deterministic coordinates, no page count side effects |
 | 10 | — | Split COPILOT_CONTEXT.md into COPILOT_CONTEXT_EN.md and COPILOT_CONTEXT_TR.md |
+| **11** | **2025-01-XX** | **Created EnvelopeViewer.razor (`/envelope/{key}`) with PDF.js 3.11.174** |
+| **11** | **2025-01-XX** | **Implemented `pdf-viewer.js`: canvas rendering, zoom, pagination, render task cancellation** |
+| **11** | **2025-01-XX** | **Externalized CSS to `envelope-viewer.css`: modern glassmorphism design** |
+| **11** | **2025-01-XX** | **Fixed scroll issues: removed `display: flex`, used `text-align: center` + `inline-block`** |
+| **11** | **2025-01-XX** | **Removed canvas `max-width` restriction for unlimited zoom** |
+| **11** | **2025-01-XX** | **Added global mouse wheel zoom: `Ctrl+Wheel` on `document.body`, JSInterop callback to Blazor** |
+| **11** | **2025-01-XX** | **Updated COPILOT_CONTEXT_EN.md: EnvelopeViewer replaces ReportViewer for read-only viewing** |
--- a/EnvelopeGenerator.API/yarp.json
+++ b/EnvelopeGenerator.API/yarp.json
@@ -44,9 +44,21 @@
          "Methods": [ "GET", "HEAD" ]
        },
        "Transforms": [
-          { "ResponseHeader": "Cache-Control", "Set": "no-cache, no-store, must-revalidate", "When": "Always" },
-          { "ResponseHeader": "Pragma", "Set": "no-cache", "When": "Always" },
-          { "ResponseHeader": "Expires", "Set": "0", "When": "Always" }
+          {
+            "ResponseHeader": "Cache-Control",
+            "Set": "no-cache, no-store, must-revalidate",
+            "When": "Always"
+          },
+          {
+            "ResponseHeader": "Pragma",
+            "Set": "no-cache",
+            "When": "Always"
+          },
+          {
+            "ResponseHeader": "Expires",
+            "Set": "0",
+            "When": "Always"
+          }
        ]
      },
      "receiver-ui-annotation-fake": {
@@ -78,7 +90,10 @@
        },
        "Transforms": [
          { "PathPattern": "/api/auth/envelope-receiver/{key}" },
-          { "QueryValueParameter": "cookie", "Set": "true" }
+          {
+            "QueryValueParameter": "cookie",
+            "Set": "true"
+          }
        ]
      }
    },
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
@@ -0,0 +1,208 @@
+@page "/envelope/{EnvelopeKey}"
+@using EnvelopeGenerator.ReceiverUI.Services
+@using Microsoft.Extensions.Options
+@using EnvelopeGenerator.ReceiverUI.Options
+@using Microsoft.JSInterop
+@inject DocumentService DocumentService
+@inject NavigationManager Navigation
+@inject IOptions<ApiOptions> AppOptions
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+<link href="css/envelope-viewer.css" rel="stylesheet" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script src="js/pdf-viewer.js"></script>
+
+<div class="envelope-viewer-layout">
+    <div class="envelope-action-bar">
+        <div class="envelope-action-bar__inner">
+            <div class="d-flex align-items-center gap-3">
+                <div class="envelope-logo">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+                    </svg>
+                </div>
+                <div>
+                    <div class="envelope-title">Dokumentenansicht</div>
+                    <div class="envelope-key">ID: @EnvelopeKey</div>
+                </div>
+            </div>
+            @if (_pdfLoaded) {
+                <div class="d-flex align-items-center gap-2 ms-auto">
+                    <div class="pdf-controls">
+                        <button class="btn btn-sm btn-outline-primary" @onclick="ZoomOut" title="Zoom Out">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M6.5 1A5.5 5.5 0 0 0 1 6.5v3A5.5 5.5 0 0 0 6.5 15h3a5.5 5.5 0 0 0 5.5-5.5v-3A5.5 5.5 0 0 0 9.5 1h-3zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+                            </svg>
+                        </button>
+                        <span class="zoom-level">@(_currentZoom)%</span>
+                        <button class="btn btn-sm btn-outline-primary" @onclick="ZoomIn" title="Zoom In">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M6.5 1A5.5 5.5 0 0 0 1 6.5v3A5.5 5.5 0 0 0 6.5 15h3a5.5 5.5 0 0 0 5.5-5.5v-3A5.5 5.5 0 0 0 9.5 1h-3zM8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="pdf-navigation">
+                        <button class="btn btn-sm btn-primary" @onclick="PreviousPage" disabled="@(_currentPage <= 1)">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                            </svg>
+                        </button>
+                        <span class="page-info">Seite @_currentPage / @_totalPages</span>
+                        <button class="btn btn-sm btn-primary" @onclick="NextPage" disabled="@(_currentPage >= _totalPages)">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+
+    <div class="envelope-content">
+        @if (_isLoading) {
+            <div class="d-flex justify-content-center align-items-center h-100">
+                <div class="text-center">
+                    <div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status">
+                        <span class="visually-hidden">L<>dt...</span>
+                    </div>
+                    <p class="text-white fw-semibold">Dokument wird geladen...</p>
+                </div>
+            </div>
+        } else if (_errorMessage is not null) {
+            <div class="error-container">
+                <div class="alert alert-danger shadow-lg">
+                    <div class="d-flex align-items-start">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="me-3 flex-shrink-0" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                            <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+                        </svg>
+                        <div>
+                            <h5 class="mb-2">Fehler beim Laden des Dokuments</h5>
+                            <p class="mb-0">@_errorMessage</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        } else if (!string.IsNullOrWhiteSpace(_pdfDataUrl)) {
+            <div class="pdf-viewer-container">
+                <div class="pdf-frame">
+                    <canvas id="pdf-canvas" class="pdf-canvas"></canvas>
+                </div>
+            </div>
+        } else {
+            <div class="error-container">
+                <div class="alert alert-warning shadow-lg">
+                    <div class="d-flex align-items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="me-3" viewBox="0 0 16 16">
+                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+                        </svg>
+                        <span class="fs-5">Dokument konnte nicht geladen werden.</span>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    [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;
+    DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
+
+    protected override async Task OnInitializedAsync() {
+        if (string.IsNullOrWhiteSpace(EnvelopeKey)) {
+            _errorMessage = "Envelope-Schlüssel fehlt.";
+            _isLoading = false;
+            return;
+        }
+
+        try {
+            var (pdfBytes, statusCode) = await DocumentService.GetDocumentAsync(EnvelopeKey);
+
+            if (pdfBytes is { Length: > 0 }) {
+                var base64 = Convert.ToBase64String(pdfBytes);
+                _pdfDataUrl = $"data:application/pdf;base64,{base64}";
+            } else {
+                _errorMessage = $"Dokument konnte nicht geladen werden. HTTP Status: {statusCode}";
+            }
+        } catch (Exception ex) {
+            _errorMessage = $"Fehler: {ex.Message}";
+        }
+
+        _isLoading = false;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender) {
+        if (!_pdfLoaded && !string.IsNullOrWhiteSpace(_pdfDataUrl)) {
+            await Task.Delay(500);
+            
+            try {
+                _dotNetRef = DotNetObjectReference.Create(this);
+                var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef);
+                
+                if (success) {
+                    _pdfLoaded = true;
+                    _totalPages = await JSRuntime.InvokeAsync<int>("pdfViewer.getTotalPages");
+                    _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+                    await InvokeAsync(StateHasChanged);
+                }
+            } catch (Exception ex) {
+                _errorMessage = $"PDF.js Fehler: {ex.Message}";
+                await InvokeAsync(StateHasChanged);
+            }
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnZoomChanged(double scale)
+    {
+        _currentZoom = (int)(scale * 100);
+        await InvokeAsync(StateHasChanged);
+    }
+
+    async Task NextPage() {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.nextPage")) {
+            _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+        }
+    }
+
+    async Task PreviousPage() {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.previousPage")) {
+            _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+        }
+    }
+
+    async Task ZoomIn() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+    }
+
+    async Task ZoomOut() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.zoomOut");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+    }
+
+    public async ValueTask DisposeAsync() {
+        if (_pdfLoaded) {
+            try {
+                await JSRuntime.InvokeVoidAsync("pdfViewer.dispose");
+            } catch {
+                // Ignore errors during disposal
+            }
+        }
+        _dotNetRef?.Dispose();
+    }
+}
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json
@@ -1,6 +1,6 @@
 {
  "Api": {
    "BaseUrl": "",
-    "ForceToUseFakeDocument": true
+    "ForceToUseFakeDocument": false
  }
 }
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
@@ -0,0 +1,176 @@
+.envelope-viewer-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
+}
+
+.envelope-action-bar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 3px solid rgba(126, 34, 206, 0.3);
+    padding: 1.25rem 2rem;
+    flex-shrink: 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.envelope-action-bar__inner {
+    max-width: 1600px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.envelope-logo svg {
+    filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
+    color: #7e22ce;
+}
+
+.envelope-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1e293b;
+    letter-spacing: -0.025em;
+}
+
+.envelope-key {
+    font-size: 0.8125rem;
+    color: #64748b;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+.pdf-controls, .pdf-navigation {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.zoom-level, .page-info {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #475569;
+    min-width: 60px;
+    text-align: center;
+}
+
+.envelope-content {
+    flex: 1;
+    min-height: 0;
+    padding: 1.5rem;
+    position: relative;
+    overflow: auto;
+}
+
+.pdf-viewer-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.pdf-frame {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 
+        0 25px 50px -12px rgba(0, 0, 0, 0.25),
+        0 0 0 1px rgba(255, 255, 255, 0.1);
+    overflow: auto;
+    position: relative;
+    padding: 2rem;
+    height: calc(100vh - 200px);
+    width: 90%;
+    max-width: 1200px;
+    text-align: center;
+}
+
+.pdf-frame::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
+    z-index: 1;
+    border-radius: 16px 16px 0 0;
+}
+
+.pdf-canvas {
+    display: inline-block;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    vertical-align: top;
+}
+
+.error-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+}
+
+.alert {
+    border-radius: 12px;
+    border: none;
+    padding: 2rem;
+    max-width: 600px;
+}
+
+.alert-danger {
+    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
+    color: #be123c;
+    border-left: 4px solid #e11d48;
+}
+
+.alert-warning {
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    color: #92400e;
+    border-left: 4px solid #f59e0b;
+}
+
+.spinner-border {
+    border-width: 0.35rem;
+}
+
+@media (max-width: 768px) {
+    .envelope-content {
+        padding: 0.75rem;
+    }
+
+    .pdf-frame {
+        border-radius: 12px;
+        padding: 1rem;
+        height: calc(100vh - 180px);
+        width: 95%;
+    }
+
+    .envelope-action-bar {
+        padding: 1rem 1.25rem;
+    }
+
+    .envelope-action-bar__inner {
+        flex-wrap: wrap;
+    }
+
+    .envelope-title {
+        font-size: 1rem;
+    }
+
+    .envelope-key {
+        font-size: 0.75rem;
+    }
+
+    .envelope-logo svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .alert {
+        padding: 1.5rem;
+    }
+}
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
@@ -0,0 +1,257 @@
+// PDF.js Viewer for Blazor WASM
+window.pdfViewer = {
+    pdfDoc: null,
+    pageNum: 1,
+    pageRendering: false,
+    pageNumPending: null,
+    scale: 1.5,
+    canvas: null,
+    ctx: null,
+    totalPages: 0,
+    currentRenderTask: null,
+    dotNetReference: null,
+    wheelEventAttached: false,
+
+    async initialize(canvasId, pdfDataUrl, dotNetRef) {
+        try {
+            console.log('PDF.js initialization started for canvas:', canvasId);
+
+            // Store .NET reference for callbacks
+            this.dotNetReference = dotNetRef;
+
+            // Wait for PDF.js to load
+            if (typeof window.pdfjsLib === 'undefined') {
+                console.error('PDF.js library not loaded, waiting...');
+                await this.waitForPdfJs();
+            }
+
+            const pdfjsLib = window.pdfjsLib;
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+
+            this.canvas = document.getElementById(canvasId);
+            if (!this.canvas) {
+                console.error('Canvas element not found:', canvasId);
+                return false;
+            }
+
+            console.log('Canvas element found, loading PDF...');
+
+            this.ctx = this.canvas.getContext('2d');
+
+            // Attach mouse wheel event listener
+            this.attachWheelEvent();
+
+            // Load PDF from data URL
+            const uint8Array = this.base64ToUint8Array(pdfDataUrl);
+            console.log('PDF data converted to Uint8Array, size:', uint8Array.length);
+
+            const loadingTask = pdfjsLib.getDocument({ data: uint8Array });
+            this.pdfDoc = await loadingTask.promise;
+            this.totalPages = this.pdfDoc.numPages;
+
+            console.log('PDF loaded successfully, total pages:', this.totalPages);
+
+            // Render first page
+            await this.renderPage(this.pageNum);
+            return true;
+        } catch (error) {
+            console.error('Error initializing PDF viewer:', error);
+            return false;
+        }
+    },
+
+    attachWheelEvent() {
+        if (this.wheelEventAttached) return;
+        
+        // Attach to the entire document body for global zoom control
+        document.body.addEventListener('wheel', (e) => {
+            // Check if Ctrl key is pressed (zoom gesture)
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                
+                if (e.deltaY < 0) {
+                    // Scroll up = Zoom In
+                    this.zoomIn();
+                    if (this.dotNetReference) {
+                        this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
+                    }
+                } else {
+                    // Scroll down = Zoom Out
+                    this.zoomOut();
+                    if (this.dotNetReference) {
+                        this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
+                    }
+                }
+            }
+        }, { passive: false });
+
+        this.wheelEventAttached = true;
+        console.log('Wheel event listener attached to document body');
+    },
+
+    async waitForPdfJs() {
+        for (let i = 0; i < 50; i++) {
+            if (typeof window.pdfjsLib !== 'undefined') {
+                console.log('PDF.js loaded after', i * 100, 'ms');
+                return;
+            }
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        throw new Error('PDF.js failed to load after 5 seconds');
+    },
+
+    base64ToUint8Array(base64) {
+        // Remove data URL prefix if present
+        const base64String = base64.includes(',') ? base64.split(',')[1] : base64;
+        const raw = atob(base64String);
+        const uint8Array = new Uint8Array(raw.length);
+        for (let i = 0; i < raw.length; i++) {
+            uint8Array[i] = raw.charCodeAt(i);
+        }
+        return uint8Array;
+    },
+
+    async renderPage(num) {
+        this.pageRendering = true;
+
+        try {
+            // Get scroll container
+            const container = this.canvas.closest('.pdf-frame');
+            
+            // Store scroll position and viewport center BEFORE rendering
+            let scrollLeft = 0, scrollTop = 0;
+            let centerX = 0, centerY = 0;
+            let oldWidth = this.canvas.width;
+            let oldHeight = this.canvas.height;
+            
+            if (container) {
+                scrollLeft = container.scrollLeft;
+                scrollTop = container.scrollTop;
+                centerX = scrollLeft + container.clientWidth / 2;
+                centerY = scrollTop + container.clientHeight / 2;
+            }
+
+            const page = await this.pdfDoc.getPage(num);
+            const viewport = page.getViewport({ scale: this.scale });
+
+            console.log('Rendering page:', num, 'Viewport:', viewport.width, 'x', viewport.height);
+
+            this.canvas.height = viewport.height;
+            this.canvas.width = viewport.width;
+
+            const renderContext = {
+                canvasContext: this.ctx,
+                viewport: viewport
+            };
+
+            if (this.currentRenderTask) {
+                console.log('Cancelling previous render task');
+                this.currentRenderTask.cancel();
+            }
+
+            this.currentRenderTask = page.render(renderContext);
+            await this.currentRenderTask.promise;
+
+            console.log('Page rendered successfully');
+
+            // Restore viewport center position AFTER rendering
+            if (container && oldWidth > 0 && oldHeight > 0) {
+                const scaleX = this.canvas.width / oldWidth;
+                const scaleY = this.canvas.height / oldHeight;
+                
+                const newCenterX = centerX * scaleX;
+                const newCenterY = centerY * scaleY;
+                
+                container.scrollLeft = newCenterX - container.clientWidth / 2;
+                container.scrollTop = newCenterY - container.clientHeight / 2;
+            }
+
+            this.currentRenderTask = null;
+            this.pageRendering = false;
+
+            if (this.pageNumPending !== null) {
+                this.renderPage(this.pageNumPending);
+                this.pageNumPending = null;
+            }
+        } catch (error) {
+            if (error.name === 'RenderingCancelledException') {
+                console.log('Rendering cancelled, will render pending page');
+            } else {
+                console.error('Error rendering page:', error);
+            }
+            this.currentRenderTask = null;
+            this.pageRendering = false;
+        }
+    },
+
+    queueRenderPage(num) {
+        if (this.pageRendering) {
+            this.pageNumPending = num;
+        } else {
+            this.renderPage(num);
+        }
+    },
+
+    nextPage() {
+        if (this.pageNum >= this.totalPages) {
+            return false;
+        }
+        this.pageNum++;
+        this.queueRenderPage(this.pageNum);
+        return true;
+    },
+
+    previousPage() {
+        if (this.pageNum <= 1) {
+            return false;
+        }
+        this.pageNum--;
+        this.queueRenderPage(this.pageNum);
+        return true;
+    },
+
+    goToPage(num) {
+        if (num < 1 || num > this.totalPages) {
+            return false;
+        }
+        this.pageNum = num;
+        this.queueRenderPage(this.pageNum);
+        return true;
+    },
+
+    zoomIn() {
+        this.scale += 0.25;
+        this.queueRenderPage(this.pageNum);
+    },
+
+    zoomOut() {
+        if (this.scale > 0.5) {
+            this.scale -= 0.25;
+            this.queueRenderPage(this.pageNum);
+        }
+    },
+
+    getCurrentPage() {
+        return this.pageNum;
+    },
+
+    getTotalPages() {
+        return this.totalPages;
+    },
+
+    getScale() {
+        return this.scale;
+    },
+
+    dispose() {
+        // Clean up event listeners
+        if (this.wheelEventAttached) {
+            // Note: We can't remove the exact listener without keeping a reference
+            // but we can at least mark it as disposed
+            this.wheelEventAttached = false;
+            this.dotNetReference = null;
+            console.log('PDF viewer disposed');
+        }
+    }
+};
+
Author	SHA1	Message	Date
TekH	34b620e749	Preserve scroll position during PDF page rendering Added functionality to maintain the scroll position and viewport center of the `.pdf-frame` container during PDF page rendering. This ensures the user's view remains centered on the same content after re-rendering, even if the canvas dimensions change. Implemented logic to store the scroll position and viewport center before rendering and restore them afterward using scaling factors calculated from the canvas's old and new dimensions.	2026-06-05 12:55:23 +02:00
TekH	f7aaeccf58	Add EnvelopeViewer for read-only PDF viewing with PDF.js Introduced a new EnvelopeViewer component (`EnvelopeViewer.razor`) to replace the legacy ReportViewer for non-signing workflows. The new viewer is based on PDF.js and provides a modern, lightweight, and responsive user experience. Added `pdf-viewer.js` to handle PDF rendering, zoom, pagination, and mouse wheel control, integrated with Blazor via JSInterop. Externalized styles to `envelope-viewer.css` with a modern glassmorphism design. Enhanced user experience with unlimited zoom, global mouse wheel zoom (`Ctrl+Wheel`), and responsive design. Fixed issues like scroll behavior and canvas size restrictions. Updated `COPILOT_CONTEXT_EN.md` to document the new EnvelopeViewer, its architecture, and its advantages over the legacy ReportViewer. Added external dependencies for PDF.js via CDN and updated project history to reflect these changes.	2026-06-05 12:52:23 +02:00
TekH	41f3df4c71	Enable Blazor-JS communication for PDF viewer zoom Added `DotNetObjectReference` in `EnvelopeViewer.razor` to enable Blazor-JS communication. Updated `OnAfterRenderAsync` to pass the reference to `pdfViewer.initialize`. Introduced `[JSInvokable]` method `OnZoomChanged` to handle zoom updates from JavaScript. Enhanced `DisposeAsync` to clean up resources, including disposing of the `.NET reference` and invoking a JavaScript `dispose` method. In `pdf-viewer.js`, modified `initialize` to accept a `.NET reference` and added `attachWheelEvent` to handle zooming via mouse wheel with `Ctrl`/`Meta` key. Updated `dispose` to clean up event listeners and reset the `.NET reference`. Added `getScale` to retrieve the current zoom scale. Improved resource cleanup and event handling to prevent memory leaks and ensure stability.	2026-06-05 12:36:59 +02:00
TekH	3539907054	Improve PDF viewer layout and styling Updated `.pdf-viewer-container` to vertically center content by changing `align-items` to `center`. Adjusted `.pdf-frame` dimensions to use dynamic height and width, added a maximum width, and centered text alignment. Introduced rounded corners to the gradient bar with a `border-radius`. Changed `.pdf-canvas` to `inline-block` display with `vertical-align: top`. Further refined `.pdf-frame` layout with slightly different height and width calculations.	2026-06-05 11:47:05 +02:00
TekH	f1ebd47c77	Refactor EnvelopeViewer styles and add PDF support Moved inline styles from `EnvelopeViewer.razor` to a new external CSS file `envelope-viewer.css` for better maintainability and separation of concerns. Added external JavaScript dependencies (`pdf.js` and `pdf-viewer.js`) to enable PDF rendering. Fixed encoding issues in error messages and improved the layout structure with responsive design rules. Enhanced readability and usability by organizing styles and ensuring proper localization support.	2026-06-05 11:18:23 +02:00
TekH	6b051155c4	Refactor EnvelopeViewer: Remove PDF viewer init logic Simplified the component by removing unnecessary debug output and redundant comments. Removed the `OnAfterRenderAsync` method, which previously handled PDF viewer initialization and related JavaScript calls. This suggests the initialization logic has been moved elsewhere or is no longer required in this component.	2026-06-05 11:04:30 +02:00
TekH	e3bc439444	Add task management for PDF rendering operations Introduced `currentRenderTask` to track and manage rendering tasks, ensuring only one task is active at a time. Added logic to cancel ongoing tasks before starting new ones, preventing conflicts and redundant rendering. Enhanced error handling to gracefully manage `RenderingCancelledException` and allow rendering of pending pages. Improved logging for better debugging and insights into the rendering process. Ensured clean state management by resetting `currentRenderTask` after task completion or cancellation.	2026-06-05 10:40:09 +02:00
TekH	f4b78bce36	Add EnvelopeViewer for PDF rendering with pdf.js Introduced a new Blazor component `EnvelopeViewer.razor` to display PDF documents with a user-friendly interface. The component supports dynamic routing via `/envelope/{EnvelopeKey}` and integrates the `pdf.js` library for efficient PDF rendering in the browser. Key features include: - Zoom and navigation controls (Next/Previous page, Zoom In/Out). - Loading spinner, error handling, and fallback UI for robustness. - Responsive design with modern styling using CSS. - JavaScript interop via `pdf-viewer.js` for managing PDF rendering, scaling, and navigation. Added lifecycle methods (`OnInitializedAsync`, `OnAfterRenderAsync`) for dynamic loading and rendering. Ensured asynchronous operations for smooth user interactions. Included a `DisposeAsync` method for cleanup.	2026-06-05 10:32:54 +02:00
TekH	d16a5020cb	Update ForceToUseFakeDocument to false in appsettings.json The `ForceToUseFakeDocument` property in the `Api` section of `appsettings.json` was changed from `true` to `false`. This modification alters the application's behavior to no longer force the use of fake documents, potentially enabling the use of real documents or other configurations as defined by the application logic.	2026-06-05 10:26:50 +02:00
TekH	634043ebd9	Reformat Transforms in yarp.json for readability Reformatted the `Transforms` sections in `yarp.json` to use multi-line JSON objects instead of single-line objects. This change improves the readability and maintainability of the configuration file without altering its functionality.	2026-06-05 10:26:29 +02:00