Refactor PDF editor with custom rendering

Replaced `DxPdfViewer` with a custom PDF rendering solution in `SenderPdfImageEditor` to improve flexibility and control. Added support for displaying placeholder messages and interactive signature fields. Introduced the `SenderPdfFieldOverlay` record to encapsulate field data. Updated `SenderEditorPage` logic to manage page counts, image URLs, and field overlays. Added a method to estimate PDF page counts. Refactored field removal logic to use index-based operations. Enhanced styling in `envelope-viewer.css` for improved layout and responsiveness. Updated localization files with new strings for page labels and placeholders. Adjusted JavaScript selectors in `envelope-editor.js` to support the new rendering approach.
2026-09-29 16:01:42 +02:00
parent 4bd0cc2e94
commit ed44d841e7
8 changed files with 262 additions and 28 deletions
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfFieldOverlay.cs
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfFieldOverlay.cs
@@ -0,0 +1,9 @@
+namespace EnvelopeGenerator.Server.Client.Components.PdfEditor;
+
+public sealed record SenderPdfFieldOverlay(
+    int Index,
+    int Page,
+    double XPt,
+    double YPt,
+    string ReceiverName,
+    string Color);
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
@@ -1,31 +1,110 @@
-@using DevExpress.Blazor.PdfViewer
+@using EnvelopeGenerator.Application.Resources
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<Resource> UiLocalizer

-<div class="pdf-editor-wrapper"
+<div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
     style="cursor: @(IsPlacementMode ? "crosshair" : "default");"
     @onclick="HandleClickAsync">
-    @if (PdfBytes is { Length: > 0 })
+    @if (PageCount <= 0)
    {
-        <DxPdfViewer DocumentContent="@PdfBytes"
-                     CssClass="@ViewerCssClass" />
+        <div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
+    }
+    else
+    {
+        @if (PageImageDataUrls.Count == 0 && !string.IsNullOrWhiteSpace(PdfDataUrl))
+        {
+            <div class="sender-image-editor__native-preview">
+                <iframe class="sender-image-editor__native-frame"
+                        src="@PdfDataUrl"
+                        title="PDF Preview"></iframe>
+            </div>
+        }
+
+        <div class="sender-image-editor__pages">
+            @for (var pageNumber = 1; pageNumber <= PageCount; pageNumber++)
+            {
+                <div class="sender-image-editor__page-block"
+                     data-editor-page="@pageNumber"
+                     data-page-width-pt="595"
+                     data-page-height-pt="842">
+                    <div class="sender-image-editor__page-canvas">
+                        @if (PageImageDataUrls.TryGetValue(pageNumber, out var imageDataUrl) && !string.IsNullOrWhiteSpace(imageDataUrl))
+                        {
+                            <img class="sender-image-editor__page-image"
+                                 src="@imageDataUrl"
+                                 alt="PDF Page @pageNumber"
+                                 draggable="false" />
+                        }
+                        else
+                        {
+                            <div class="sender-image-editor__page-placeholder">@L("SenderEditor_PageLabel", "Seite") @pageNumber</div>
+                        }
+
+                        @foreach (var field in Fields.Where(f => f.Page == pageNumber))
+                        {
+                            <button type="button"
+                                    class="sender-image-editor__field"
+                                    style="@GetFieldStyle(field)"
+                                    title="@field.ReceiverName"
+                                    @onclick:stopPropagation="true"
+                                    @onclick="() => RemoveField.InvokeAsync(field.Index)">
+                                @field.ReceiverName
+                            </button>
+                        }
+                    </div>
+                </div>
+            }
+        </div>
    }
 </div>

@code {
-    [Parameter]
-    public byte[]? PdfBytes { get; set; }
-
    [Parameter]
    public bool IsPlacementMode { get; set; }

    [Parameter]
-    public string ViewerCssClass { get; set; } = "sender-editor-pdf-viewer";
+    public int PageCount { get; set; }
+
+    [Parameter]
+    public IReadOnlyDictionary<int, string> PageImageDataUrls { get; set; } = new Dictionary<int, string>();
+
+    [Parameter]
+    public string? PdfDataUrl { get; set; }
+
+    [Parameter]
+    public IReadOnlyList<SenderPdfFieldOverlay> Fields { get; set; } = Array.Empty<SenderPdfFieldOverlay>();

    [Parameter]
    public EventCallback<MouseEventArgs> EditorClick { get; set; }

+    [Parameter]
+    public EventCallback<int> RemoveField { get; set; }
+
+    private static string GetFieldStyle(SenderPdfFieldOverlay field)
+    {
+        var leftPercent = (field.XPt / 595.0) * 100.0;
+        var topPercent = (field.YPt / 842.0) * 100.0;
+        var widthPercent = (127.44 / 595.0) * 100.0;
+        var heightPercent = (141.12 / 842.0) * 100.0;
+
+        return string.Join(' ',
+            $"left:{leftPercent:F4}%;",
+            $"top:{topPercent:F4}%;",
+            $"width:{widthPercent:F4}%;",
+            $"height:{heightPercent:F4}%;",
+            $"border-color:{field.Color};",
+            $"background-color:{field.Color}22;");
+    }
+
    private async Task HandleClickAsync(MouseEventArgs args)
    {
        if (EditorClick.HasDelegate)
            await EditorClick.InvokeAsync(args);
    }
+
+    private string L(string key, string fallback)
+    {
+        var value = UiLocalizer[key];
+        return value.ResourceNotFound ? fallback : value.Value;
+    }
 }
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor
@@ -276,10 +276,13 @@
        }
        else
        {
-            <SenderPdfImageEditor PdfBytes="@_pdfBytes"
-                                  IsPlacementMode="@(_pendingReceiverForPlacement is not null)"
-                                  ViewerCssClass="@ViewerCssClass"
-                                  EditorClick="OnPdfAreaClickAsync" />
+            <SenderPdfImageEditor IsPlacementMode="@(_pendingReceiverForPlacement is not null)"
+                                  PageCount="@_pageCount"
+                                  PageImageDataUrls="@_pageImageDataUrls"
+                                  PdfDataUrl="@PdfDataUrl"
+                                  Fields="@FieldOverlays"
+                                  EditorClick="OnPdfAreaClickAsync"
+                                  RemoveField="OnRemoveFieldByIndexAsync" />
        }
    </div>
 </div>
@@ -459,15 +462,16 @@
    const double SigWidthPt = 1.77 * 72;   // 127.44 pt
    const double SigHeightPt = 1.96 * 72;   // 141.12 pt

-    // CssClass for DxPdfViewer — used by JS to locate page elements
+    // CssClass for JS click coordinate helper
    const string ViewerCssClass = "sender-editor-pdf-viewer";

    // ── State ──
    bool _pdfLoaded = false;
    string _fileName = string.Empty;
    string? _errorMessage;
-    byte[]? _pdfBytes;          // Current rendered PDF (original + placeholders burned in)
    byte[]? _originalPdfBytes;  // Pristine upload — never modified, used as base for redraw
+    int _pageCount;
+    Dictionary<int, string> _pageImageDataUrls = [];
    int? _loadedEnvelopeId;
    int? _editingEnvelopeId;
    bool _isLoadingEnvelopeForEdit;
@@ -475,6 +479,14 @@
    List<SignatureFieldDraft> _signatureFields = [];
    ReceiverDraft? _pendingReceiverForPlacement; // Set when user clicks "Signatur hinzufügen"

+    IReadOnlyList<SenderPdfFieldOverlay> FieldOverlays => _signatureFields
+        .Select((f, i) => new SenderPdfFieldOverlay(i, f.Page, f.XPt, f.YPt, f.ReceiverName, f.Color))
+        .ToList();
+
+    string? PdfDataUrl => _originalPdfBytes is { Length: > 0 }
+        ? $"data:application/pdf;base64,{Convert.ToBase64String(_originalPdfBytes)}"
+        : null;
+
    // ── Save state ──
    bool _isSaving = false;
    bool _savePopupVisible = false;
@@ -582,7 +594,9 @@

            _originalPdfBytes = document?.ByteData;
            _pdfLoaded = _originalPdfBytes is { Length: > 0 };
-            _pdfBytes = _pdfLoaded ? _originalPdfBytes : null;
+            _pageCount = EstimatePdfPageCount(_originalPdfBytes) ??
+                Math.Max(1, _signatureFields.Select(f => f.Page).DefaultIfEmpty(1).Max());
+            _pageImageDataUrls.Clear();
            _fileName = $"Envelope-{envelopeId}.pdf";
            _pendingReceiverForPlacement = null;
            _loadedEnvelopeId = envelopeId;
@@ -624,12 +638,11 @@
            _originalPdfBytes = ms.ToArray();
            _fileName = file.Name;
            _pdfLoaded = true;
+            _pageCount = EstimatePdfPageCount(_originalPdfBytes) ?? 1;
+            _pageImageDataUrls.Clear();
            _signatureFields.Clear();
            _pendingReceiverForPlacement = null;

-            // Rendered PDF starts as the clean original (no placeholders yet)
-            _pdfBytes = _originalPdfBytes;
-
            Logger.LogInformation("PDF loaded: {Name} ({Size} bytes)", _fileName, _originalPdfBytes.Length);
        }
        catch (Exception ex)
@@ -693,19 +706,18 @@
        _signatureFields.Add(field);
        _pendingReceiverForPlacement = null;

-        // Keep original PDF bytes unchanged. Signature boxes are tracked in-memory.
-        _pdfBytes = _originalPdfBytes;
-
        Logger.LogInformation(
            "[SenderEditor] Field added: Page={Page} X={X:F1}pt Y={Y:F1}pt Receiver={Receiver}",
            page1Based, xPt, yPt, field.ReceiverName);
    }

    // ── Remove a single field ──
-    async Task RemoveFieldAsync(SignatureFieldDraft field)
+    async Task OnRemoveFieldByIndexAsync(int index)
    {
-        _signatureFields.Remove(field);
-        _pdfBytes = _originalPdfBytes;
+        if (index < 0 || index >= _signatureFields.Count)
+            return;
+
+        _signatureFields.RemoveAt(index);
        await Task.CompletedTask;
    }

@@ -714,10 +726,39 @@
    {
        _signatureFields.Clear();
        _pendingReceiverForPlacement = null;
-        _pdfBytes = _originalPdfBytes;
        await Task.CompletedTask;
    }

+    static int? EstimatePdfPageCount(byte[]? documentBytes)
+    {
+        if (documentBytes is null || documentBytes.Length == 0)
+            return null;
+
+        try
+        {
+            var text = System.Text.Encoding.ASCII.GetString(documentBytes);
+            const string marker = "/Type /Page";
+            var count = 0;
+            var index = 0;
+
+            while (true)
+            {
+                index = text.IndexOf(marker, index, StringComparison.Ordinal);
+                if (index < 0)
+                    break;
+
+                count++;
+                index += marker.Length;
+            }
+
+            return count > 0 ? count : null;
+        }
+        catch
+        {
+            return null;
+        }
+    }
+
    void Cancel() => NavigationManager.NavigateTo("/sender");

    void GoToDashboard()
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
@@ -56,6 +56,104 @@
    height: 100%;
 }

+.sender-image-editor {
+    overflow: auto;
+    padding: 1rem;
+}
+
+.sender-image-editor__pages {
+    max-width: 980px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.sender-image-editor__native-preview {
+    max-width: 980px;
+    margin: 0 auto 1rem;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.sender-image-editor__native-frame {
+    width: 100%;
+    min-height: 70vh;
+    border: 0;
+    background: #f8fafc;
+}
+
+.sender-image-editor__page-block {
+    background: #e2e8f0;
+    border: 1px solid #cbd5e1;
+    border-radius: 10px;
+    padding: 0.75rem;
+}
+
+.sender-image-editor__page-canvas {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 595 / 842;
+    background: #ffffff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.sender-image-editor__page-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    pointer-events: none;
+}
+
+.sender-image-editor__page-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    font-weight: 600;
+    font-size: 0.95rem;
+    letter-spacing: 0.01em;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.sender-image-editor__field {
+    position: absolute;
+    border: 2px solid;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: #0f172a;
+    padding: 0.2rem 0.3rem;
+    text-align: left;
+    line-height: 1.1;
+    cursor: pointer;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    overflow: hidden;
+}
+
+.sender-image-editor__field:hover {
+    filter: brightness(0.96);
+}
+
+.sender-image-editor__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+    color: #64748b;
+    font-weight: 600;
+}
+
 .sender-editor-pdf-viewer {
    width: 100%;
    height: 100%;
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/envelope-editor.js
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/envelope-editor.js
@@ -25,9 +25,10 @@ window.envelopeEditor = {
        }

        // --- Candidate page elements (ordered by preference) ---
-        // DxPdfViewer renders individual pages as .dxbl-pdfv-page elements.
-        // DxReportViewer uses .dxbrv-report-preview-content-img as fallback.
+        // Sender editor custom renderer uses data-editor-page blocks.
+        // Legacy Dx viewers remain as fallback selectors.
        const pageSelectors = [
+            '[data-editor-page]',
            '.dxbl-pdfv-page',
            '.dxbrv-report-preview-page',
            '.dxbrv-report-preview-content-img',