Merge branch 'feat/receiver-ui' of http://git.dd:3000/AppStd/EnvelopeGenerator into feat/receiver-ui

Improve canvas mouse position accuracy; add settings.json
Refactored mouse event handling in pdfInterop.js to use a new getPos helper, ensuring accurate coordinate mapping on scaled or resized canvases. Updated start and move functions to use this helper. Added an empty settings.json file.
2025-12-10 11:16:27 +01:00 · 2025-12-10 11:16:13 +01:00 · 2025-12-10 09:55:32 +01:00 · 2025-12-10 09:55:24 +01:00 · 2025-12-09 10:58:53 +01:00 · 2025-12-09 10:42:11 +01:00
7 changed files with 464 additions and 147 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
--- a/EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
+++ b/EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
@@ -1,57 +1,70 @@
@page "/"
+@using Microsoft.JSInterop
@inject IJSRuntime JS
+@implements IAsyncDisposable

-<h1>Sign PDF (Blazor)</h1>
+<div class="page-shell">
+    <h1>Sign PDF (Blazor)</h1>

-<div class="controls">
-    <InputFile OnChange="HandleFileSelected" accept="application/pdf" />
-    <button class="btn" @onclick="ShowSignaturePad" disabled="@(!HasPdf)">Add signature</button>
-    <button class="btn" @onclick="() => ShowTextOverlay(false)" disabled="@(!HasPdf)">Add text</button>
-    <button class="btn" @onclick="() => ShowTextOverlay(true)" disabled="@(!HasPdf)">Add date</button>
-    <button class="btn" @onclick="Reset" disabled="@(!HasPdf)">Reset</button>
-    <button class="btn secondary" @onclick="Download" disabled="@(!HasPdf)">Download</button>
+    <div class="controls">
+        <InputFile OnChange="HandleFileSelected" accept="application/pdf" />
+        <button class="btn" @onclick="ShowSignaturePad" disabled="@(!HasPdf)">Add signature</button>
+        <button class="btn" @onclick="() => ShowTextOverlay(false)" disabled="@(!HasPdf)">Add text</button>
+        <button class="btn" @onclick="() => ShowTextOverlay(true)" disabled="@(!HasPdf)">Add date</button>
+        <button class="btn" @onclick="Reset" disabled="@(!HasPdf)">Reset</button>
+        <button class="btn secondary" @onclick="Download" disabled="@(!HasPdf)">Download</button>
+    </div>
+
+    @if (!string.IsNullOrWhiteSpace(ErrorMessage))
+    {
+        <div class="error-banner">@ErrorMessage</div>
+    }
+
+    @if (!HasPdf)
+    {
+        <div class="drop-hint">Drop or select a PDF to start.</div>
+    }
+
+    @if (HasPdf)
+    {
+        <div class="document-shell" @ref="PdfHostRef" style="@($"width:{ViewportWidthPx}px")">
+            <canvas id="pdf-canvas" @ref="PdfCanvasRef"></canvas>
+
+            @if (ShowSignature)
+            {
+                  <div class="overlay signature" @ref="OverlayRef"
+                      style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px; width:{OverlayWidthPx}px; height:{OverlayHeightPx}px;")"
+                      @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+                    <div class="overlay-controls">
+                        <button class="overlay-btn" @onclick="ApplySignature" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
+                        <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
+                    </div>
+                    <img src="@SignatureDataUrl" draggable="false" />
+                </div>
+            }
+
+            @if (ShowText)
+            {
+                  <div class="overlay text" @ref="OverlayRef"
+                      style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px;")"
+                      @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+                    <div class="overlay-controls">
+                        <button class="overlay-btn" @onclick="ApplyText" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
+                        <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
+                    </div>
+                    <input class="overlay-input" @bind="TextValue" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation />
+                </div>
+            }
+        </div>
+
+        <div class="paging">
+            <button class="btn" @onclick="PrevPage" disabled="@(!CanPrev)">&lt;</button>
+            <span>Page @DisplayPage / @PageCount</span>
+            <button class="btn" @onclick="NextPage" disabled="@(!CanNext)">&gt;</button>
+        </div>
+    }
 </div>

-@if (!HasPdf)
-{
-    <div class="drop-hint">Drop or select a PDF to start.</div>
-}
-
-@if (HasPdf)
-{
-    <div class="document-shell" @ref="PdfHostRef" style="@($"width:{ViewportWidthPx}px")">
-        <canvas id="pdf-canvas" @ref="PdfCanvasRef"></canvas>
-
-        @if (ShowSignature)
-        {
-            <div class="overlay signature" style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px; width:{OverlayWidthPx}px; height:{OverlayHeightPx}px;")"
-                 @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
-                <div class="overlay-controls">
-                    <button class="overlay-btn" @onclick="ApplySignature">✔</button>
-                    <button class="overlay-btn" @onclick="CancelOverlay">✖</button>
-                </div>
-                <img src="@SignatureDataUrl" draggable="false" />
-            </div>
-        }
-        @if (ShowText)
-        {
-            <div class="overlay text" style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px;")" @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
-                <div class="overlay-controls">
-                    <button class="overlay-btn" @onclick="ApplyText">✔</button>
-                    <button class="overlay-btn" @onclick="CancelOverlay">✖</button>
-                </div>
-                <input class="overlay-input" @bind="TextValue" />
-            </div>
-        }
-    </div>
-
-    <div class="paging">
-        <button class="btn" @onclick="PrevPage" disabled="@(!CanPrev)">&lt;</button>
-        <span>Page @DisplayPage / @PageCount</span>
-        <button class="btn" @onclick="NextPage" disabled="@(!CanNext)">&gt;</button>
-    </div>
-}
-
@if (ShowSignaturePadModal)
 {
    <div class="modal-backdrop">
@@ -72,8 +85,11 @@
@code {
    private ElementReference PdfCanvasRef;
    private ElementReference PdfHostRef;
+    private ElementReference OverlayRef;

    private string? PdfBase64;
+    private string? OriginalPdfBase64;
+    private DotNetObjectReference<Index>? _dotNetRef;
    private int PageIndex;
    private int PageCount;
    private double ViewportWidthPx = 800;
@@ -96,6 +112,8 @@
    private double StartLeft;
    private double StartTop;
    private string TextValue = "Text";
+    private string? ErrorMessage;
+    private DateTimeOffset _lastDragRender = DateTimeOffset.MinValue;

    private bool HasPdf => !string.IsNullOrWhiteSpace(PdfBase64);
    private int DisplayPage => PageIndex + 1;
@@ -107,6 +125,8 @@
        if (firstRender)
        {
            await JS.InvokeVoidAsync("pdfInterop.ensureReady");
+            _dotNetRef ??= DotNetObjectReference.Create(this);
+            await JS.InvokeVoidAsync("pdfInterop.registerDropHandler", _dotNetRef);
        }

        if (ShowSignaturePadModal)
@@ -122,11 +142,47 @@
            return;
        }

-        var file = e.File;
-        await using var stream = file.OpenReadStream(maxAllowedSize: 20 * 1024 * 1024);
-        using var ms = new MemoryStream();
-        await stream.CopyToAsync(ms);
-        PdfBase64 = Convert.ToBase64String(ms.ToArray());
+        await LoadPdfFromBrowserFile(e.File);
+    }
+
+    private async Task LoadPdfFromBrowserFile(IBrowserFile file)
+    {
+        ErrorMessage = null;
+
+        try
+        {
+            await using var stream = file.OpenReadStream(maxAllowedSize: 20 * 1024 * 1024);
+            using var ms = new MemoryStream();
+            await stream.CopyToAsync(ms);
+            await LoadPdfFromBase64Internal(Convert.ToBase64String(ms.ToArray()));
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Fehler beim Laden der PDF: {ex.Message}";
+            PdfBase64 = null;
+            PageCount = 0;
+            PageIndex = 0;
+        }
+    }
+
+    [JSInvokable]
+    public Task LoadPdfFromBase64(string base64)
+    {
+        return LoadPdfFromBase64Internal(base64);
+    }
+
+    private async Task LoadPdfFromBase64Internal(string base64)
+    {
+        ErrorMessage = null;
+        PdfBase64 = base64;
+        OriginalPdfBase64 = PdfBase64;
+
+        // Show the canvas before we start rendering
+        await InvokeAsync(StateHasChanged);
+        await Task.Yield();
+
+        // Make sure pdf.js is ready
+        await JS.InvokeVoidAsync("pdfInterop.ensureReady");

        var result = await JS.InvokeAsync<RenderResult>("pdfInterop.loadPdf", PdfBase64);
        PageCount = result.Pages;
@@ -142,19 +198,41 @@
            return;
        }

-        var viewport = await JS.InvokeAsync<ViewportInfo>("pdfInterop.renderPage", PageIndex, "pdf-canvas", ViewportWidthPx);
-        ViewportWidthPx = viewport.Width;
-        ViewportHeightPx = viewport.Height;
-        StateHasChanged();
+        try
+        {
+            var viewport = await JS.InvokeAsync<ViewportInfo>("pdfInterop.renderPage", PageIndex, "pdf-canvas", ViewportWidthPx);
+            ViewportWidthPx = viewport.Width;
+            ViewportHeightPx = viewport.Height;
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Fehler beim Rendern: {ex.Message}";
+        }
    }

-    private void Reset()
+    private async Task Reset()
    {
-        PdfBase64 = null;
-        PageIndex = 0;
-        PageCount = 0;
-        ViewportHeightPx = 0;
+        ErrorMessage = null;
        CloseOverlays();
+        ShowSignaturePadModal = false;
+        OverlayXpx = 20;
+        OverlayYpx = 20;
+        OverlayWidthPx = 200;
+        OverlayHeightPx = 80;
+        TextValue = "Text";
+
+        if (string.IsNullOrWhiteSpace(OriginalPdfBase64))
+        {
+            return;
+        }
+
+        PdfBase64 = OriginalPdfBase64;
+        PageIndex = 0;
+
+        var result = await JS.InvokeAsync<RenderResult>("pdfInterop.loadPdf", PdfBase64);
+        PageCount = result.Pages;
+        await RenderPage();
    }

    private void CloseOverlays()
@@ -214,6 +292,11 @@
        DragStartY = args.ClientY;
        StartLeft = OverlayXpx;
        StartTop = OverlayYpx;
+
+        if (OverlayRef.Context != null)
+        {
+            JS.InvokeVoidAsync("pdfInterop.capturePointer", OverlayRef, args.PointerId);
+        }
    }

    private void OnDrag(PointerEventArgs args)
@@ -227,12 +310,23 @@
        var dy = args.ClientY - DragStartY;
        OverlayXpx = StartLeft + dx;
        OverlayYpx = StartTop + dy;
-        StateHasChanged();
+
+        var now = DateTimeOffset.UtcNow;
+        if (now - _lastDragRender > TimeSpan.FromMilliseconds(16))
+        {
+            _lastDragRender = now;
+            InvokeAsync(StateHasChanged);
+        }
    }

    private void EndDrag(PointerEventArgs args)
    {
        IsDragging = false;
+
+        if (OverlayRef.Context != null)
+        {
+            JS.InvokeVoidAsync("pdfInterop.releasePointer", OverlayRef, args.PointerId);
+        }
    }

    private async Task ApplySignature()
@@ -325,4 +419,10 @@
    private record RenderResult(int Pages);

    private record ViewportInfo(double Width, double Height, double PageWidth, double PageHeight);
+
+    public async ValueTask DisposeAsync()
+    {
+        _dotNetRef?.Dispose();
+        await Task.CompletedTask;
+    }
 }
--- a/EnvelopeGenerator.ReceiverUIBlazor/Properties/PublishProfiles/IISProfile.pubxml
+++ b/EnvelopeGenerator.ReceiverUIBlazor/Properties/PublishProfiles/IISProfile.pubxml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- https://go.microsoft.com/fwlink/?LinkID=208121. -->
+<Project>
+  <PropertyGroup>
+    <WebPublishMethod>Package</WebPublishMethod>
+    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
+    <LastUsedPlatform>Any CPU</LastUsedPlatform>
+    <SiteUrlToLaunchAfterPublish />
+    <LaunchSiteAfterPublish>true</LaunchSiteAfterPublish>
+    <ExcludeApp_Data>false</ExcludeApp_Data>
+    <ProjectGuid>7f262ad4-53b1-42d3-9a5f-132cf50f150c</ProjectGuid>
+    <DesktopBuildPackageLocation>E:\TekH\Visual Studio\src\EnvelopeGenerator.ReceiverUIBlazor\EnvelopeGenerator.ReceiverUIBlazor.zip</DesktopBuildPackageLocation>
+    <PackageAsSingleFile>true</PackageAsSingleFile>
+    <DeployIisAppPath>ReceiverUIBlazor</DeployIisAppPath>
+    <_TargetId>IISWebDeployPackage</_TargetId>
+  </PropertyGroup>
+</Project>
--- a/EnvelopeGenerator.ReceiverUIBlazor/Properties/launchSettings.json
+++ b/EnvelopeGenerator.ReceiverUIBlazor/Properties/launchSettings.json
@@ -0,0 +1,12 @@
+{
+  "profiles": {
+    "EnvelopeGenerator.ReceiverUIBlazor": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:49582;http://localhost:49583"
+    }
+  }
+}
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
@@ -1,106 +1,159 @@
+@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;600;700&family=Teko:wght@500;600&display=swap');
+
+:root {
+    --bg: #f7f7f8;
+    --bg-strong: #fff6f6;
+    --text: #474747;
+    --muted: #777777;
+    --border: #e7e7e7;
+    --shadow: 0 18px 55px rgba(20, 20, 20, 0.08);
+    --card: #ffffff;
+    --accent: #a52431;
+    --accent-strong: #8d1e2a;
+    --accent-soft: #f8e5e8;
+    --highlight: #ffd62f;
+    --danger: #a52431;
+}
+
 body {
    margin: 0;
-    font-family: "Segoe UI", Arial, sans-serif;
-    background: #0f172a;
-    color: #e2e8f0;
+    font-family: "Red Hat Text", "Segoe UI", system-ui, -apple-system, sans-serif;
+    background: radial-gradient(120% 120% at 6% 12%, var(--bg-strong) 0%, #fffdf7 45%, var(--bg) 85%);
+    color: var(--text);
+    line-height: 1.5;
 }

 .main-layout {
    min-height: 100vh;
-    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1220 100%);
 }

 .top-bar {
    display: flex;
    align-items: center;
-    padding: 12px 20px;
-    background: rgba(255, 255, 255, 0.04);
-    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
+    padding: 14px 24px;
+    background: var(--accent);
+    border-bottom: 1px solid var(--accent-strong);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    color: #ffd62f;
 }

 .top-bar .brand {
-    font-weight: 700;
-    letter-spacing: 0.5px;
+    font-family: "Teko", "Red Hat Text", sans-serif;
+    font-weight: 600;
+    letter-spacing: 0.6px;
+    color: #ffd62f;
 }

 .content {
-    padding: 24px 32px;
+    padding: 28px 32px 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
 }

 h1 {
-    margin-top: 0;
-    margin-bottom: 8px;
-    letter-spacing: 0.3px;
+    margin: 0 0 10px;
+    letter-spacing: 0.2px;
+    font-family: "Teko", "Red Hat Text", sans-serif;
+    font-weight: 600;
 }

 .controls {
    display: flex;
-    gap: 8px;
+    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
+    justify-content: center;
 }

 .btn {
-    background: #22d3ee;
-    color: #0f172a;
-    border: none;
-    padding: 10px 14px;
-    border-radius: 8px;
-    font-weight: 600;
+    background: #4a4a4a;
+    color: #ffffff;
+    border: 1px solid #404040;
+    padding: 10px 15px;
+    border-radius: 12px;
+    font-weight: 700;
    cursor: pointer;
-    transition: transform 120ms ease, box-shadow 120ms ease;
+    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
 }

 .btn:hover:not(:disabled) {
    transform: translateY(-1px);
-    box-shadow: 0 8px 18px rgba(34, 211, 238, 0.25);
+    background: #3f3f3f;
 }

 .btn:disabled {
-    opacity: 0.4;
+    opacity: 0.45;
    cursor: not-allowed;
+    box-shadow: none;
 }

 .btn.secondary {
-    background: rgba(226, 232, 240, 0.12);
-    color: #e2e8f0;
-    border: 1px solid rgba(226, 232, 240, 0.2);
+    background: #f4f4f4;
+    color: #474747;
+    border: 1px solid #d3d3d3;
+    box-shadow: none;
+}
+
+.btn.secondary:hover:not(:disabled) {
+    background: #e9e9e9;
+    transform: translateY(-1px);
 }

 .drop-hint {
-    padding: 24px;
-    border: 1px dashed rgba(226, 232, 240, 0.3);
-    border-radius: 12px;
+    padding: 26px;
+    border: 1px dashed var(--border);
+    border-radius: 14px;
    text-align: center;
-    color: rgba(226, 232, 240, 0.8);
+    color: var(--muted);
+    background: #ffffff;
+    width: min(1100px, 100%);
+    margin: 0 auto;
+    box-shadow: 0 8px 18px rgba(165, 36, 49, 0.06);
+}
+
+.error-banner {
+    margin-top: 10px;
+    padding: 12px 14px;
+    border-radius: 10px;
+    background: #fcebec;
+    border: 1px solid #f3c6cd;
+    color: var(--accent-strong);
 }

 .document-shell {
    position: relative;
-    margin-top: 12px;
-    border-radius: 12px;
+    margin-top: 14px;
+    border-radius: 14px;
    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
-    background: #0b1220;
-    border: 1px solid rgba(226, 232, 240, 0.08);
+    box-shadow: var(--shadow);
+    background: var(--card);
+    border: 1px solid var(--border);
+    margin-left: auto;
+    margin-right: auto;
 }

 canvas {
    display: block;
    width: 100%;
    height: auto;
-    background: #111827;
+    background: #ffffff;
 }

 .overlay {
    position: absolute;
-    border: 2px solid #22d3ee;
-    border-radius: 8px;
-    padding: 6px;
-    background: rgba(15, 23, 42, 0.9);
-    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+    border: 1px dashed var(--accent);
+    border-radius: 10px;
+    padding: 8px;
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 12px 30px rgba(165, 36, 49, 0.15);
    user-select: none;
+    touch-action: none;
 }

 .overlay.signature img {
@@ -111,36 +164,39 @@ canvas {

 .overlay-controls {
    position: absolute;
-    top: -36px;
+    top: -44px;
    right: 0;
    display: flex;
-    gap: 4px;
+    gap: 6px;
 }

 .overlay-btn {
-    background: #0f172a;
-    color: #22d3ee;
-    border: 1px solid rgba(34, 211, 238, 0.4);
-    border-radius: 6px;
-    padding: 4px 8px;
+    background: #ffffff;
+    color: var(--accent-strong);
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    padding: 6px 10px;
    cursor: pointer;
+    box-shadow: 0 6px 16px rgba(165, 36, 49, 0.16);
 }

 .overlay-input {
-    border: none;
-    background: transparent;
-    color: #e2e8f0;
+    border: 1px solid var(--border);
+    background: #ffffff;
+    color: var(--text);
    font-size: 18px;
-    padding: 4px;
-    min-width: 160px;
+    padding: 6px 8px;
+    min-width: 180px;
+    border-radius: 8px;
    outline: none;
 }

 .paging {
-    margin-top: 12px;
+    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
+    color: var(--muted);
 }

 .modal-backdrop {
@@ -149,7 +205,8 @@ canvas {
    left: 0;
    right: 0;
    bottom: 0;
-    background: rgba(0, 0, 0, 0.65);
+    background: rgba(15, 23, 42, 0.35);
+    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
@@ -157,25 +214,26 @@ canvas {
 }

 .modal {
-    background: #0f172a;
-    border: 1px solid rgba(226, 232, 240, 0.08);
-    border-radius: 12px;
-    padding: 16px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 18px;
    min-width: 760px;
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+    box-shadow: var(--shadow);
 }

 .modal-row {
    display: flex;
    align-items: center;
-    gap: 10px;
-    margin-top: 10px;
+    gap: 12px;
+    margin-top: 12px;
+    color: var(--muted);
 }

 .modal canvas {
-    background: #0b1220;
-    border: 1px solid rgba(226, 232, 240, 0.1);
-    border-radius: 8px;
+    background: #ffffff;
+    border: 1px solid var(--border);
+    border-radius: 10px;
 }

 .spacer {
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/index.html
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/index.html
@@ -6,9 +6,10 @@
    <title>Receiver UI (Blazor)</title>
    <base href="/" />
    <link rel="stylesheet" href="css/app.css" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.min.js" integrity="sha512-tAqK8Nw4WnAnX/d+Q/FI+jTYfCLMVSX39kT9rCec8NLwlY+jIUUQx7TKfQvHr2SgVXmvGZtxPRQSf0oYAI7gCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.worker.min.js" integrity="sha512-xS2zAkrE3zGZFNE2hCpL25O9P+hxKpADcDxpfoSr8q/kBDL/6Ht8OZODBM96KghAe8/powBPh6UT7aY4AsF38g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
+        <!-- pdf.js 3.11 UMD + classic worker for compatibility; SRI removed to avoid digest mismatches -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js"></script>
+        <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
    <script src="js/pdfInterop.js"></script>
 </head>
 <body>
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
@@ -1,8 +1,13 @@
 (function () {
+    // Stick to pdf.js 3.11 UMD + classic worker for compatibility.
+    const PDF_JS_SRC = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
+    const WORKER_SRC = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
+
    const state = {
        pdfDoc: null,
        pdfBytes: null,
        lastViewport: null,
+        pdfJsReady: null,
    };

    function base64ToUint8(base64) {
@@ -32,17 +37,73 @@

    const pointerPads = new Map();

-    window.pdfInterop = {
-        ensureReady: () => {
-            if (pdfjsLib && pdfjsLib.GlobalWorkerOptions) {
-                // worker is already loaded via CDN include
+    function loadScriptOnce(url) {
+        return new Promise((resolve, reject) => {
+            // If already present, resolve immediately
+            const existing = Array.from(document.getElementsByTagName('script')).find(s => s.src === url);
+            if (existing && existing.dataset.loaded === "true") {
+                resolve();
                return;
            }
+
+            const script = existing || document.createElement('script');
+            script.src = url;
+            script.defer = true;
+            script.onload = () => {
+                script.dataset.loaded = "true";
+                resolve();
+            };
+            script.onerror = (e) => reject(new Error(`Script load failed: ${url}`));
+
+            if (!existing) {
+                document.head.appendChild(script);
+            }
+        });
+    }
+
+    async function ensurePdfJsLoaded() {
+        if (typeof pdfjsLib !== "undefined") {
+            return;
+        }
+
+        if (!state.pdfJsReady) {
+            state.pdfJsReady = loadScriptOnce(PDF_JS_SRC);
+        }
+
+        await state.pdfJsReady;
+
+        if (typeof pdfjsLib === "undefined") {
+            throw new Error("pdfjsLib could not be loaded");
+        }
+    }
+
+    window.pdfInterop = {
+        ensureReady: async () => {
+            // Ensure pdf.js is present and the worker path is set explicitly.
+            await ensurePdfJsLoaded();
+            if (pdfjsLib && pdfjsLib.GlobalWorkerOptions) {
+                if (pdfjsLib.GlobalWorkerOptions.workerSrc !== WORKER_SRC) {
+                    pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_SRC;
+                }
+            } else {
+                throw new Error("pdf.js not available after load");
+            }
        },
        loadPdf: async (base64) => {
-            return await reloadFromBase64(base64);
+            await ensurePdfJsLoaded();
+            try {
+                const result = await reloadFromBase64(base64);
+                if (!result || !result.pages) {
+                    throw new Error("PDF has keine Seiten erkannt");
+                }
+                return result;
+            } catch (err) {
+                console.error("pdfInterop.loadPdf failed", err);
+                throw err;
+            }
        },
        renderPage: async (pageIndex, canvasId, targetWidth) => {
+            await ensurePdfJsLoaded();
            if (!state.pdfDoc) {
                throw new Error('PDF not loaded');
            }
@@ -51,8 +112,14 @@
            const scale = targetWidth / rawViewport.width;
            const viewport = page.getViewport({ scale });

-            const canvas = document.getElementById(canvasId);
+            let canvas = document.getElementById(canvasId);
            if (!canvas) {
+                // give the UI a tiny delay to render the canvas into the DOM
+                await new Promise(r => setTimeout(r, 40));
+                canvas = document.getElementById(canvasId);
+            }
+            if (!canvas) {
+                console.error("renderPage: canvas not found", canvasId);
                throw new Error('Canvas not found');
            }
            const ctx = canvas.getContext('2d');
@@ -108,7 +175,7 @@
                    x,
                    y: y - 14 * scaleY,
                    size: 14 * scaleX,
-                    color: PDFLib.rgb(0.07, 0.54, 0.26),
+                    color: PDFLib.rgb(0.11, 0.25, 0.56),
                });
            }

@@ -142,7 +209,7 @@
                x,
                y,
                size: fontSize * scaleX,
-                color: PDFLib.rgb(0.9, 0.9, 0.9),
+                color: PDFLib.rgb(0.2, 0.23, 0.28),
            });

            const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false });
@@ -158,7 +225,7 @@
            const ctx = canvas.getContext('2d');
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
-            ctx.strokeStyle = '#22d3ee';
+            ctx.strokeStyle = '#1c3d8f';

            const padState = {
                drawing: false,
@@ -166,18 +233,28 @@
                lastY: 0,
            };

+            function getPos(evt) {
+                const rect = canvas.getBoundingClientRect();
+                const scaleX = rect.width ? canvas.width / rect.width : 1;
+                const scaleY = rect.height ? canvas.height / rect.height : 1;
+                return {
+                    x: (evt.clientX - rect.left) * scaleX,
+                    y: (evt.clientY - rect.top) * scaleY,
+                };
+            }
+
            function start(e) {
                padState.drawing = true;
-                const rect = canvas.getBoundingClientRect();
-                padState.lastX = e.clientX - rect.left;
-                padState.lastY = e.clientY - rect.top;
+                const pos = getPos(e);
+                padState.lastX = pos.x;
+                padState.lastY = pos.y;
            }

            function move(e) {
                if (!padState.drawing) return;
-                const rect = canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
+                const pos = getPos(e);
+                const x = pos.x;
+                const y = pos.y;
                ctx.beginPath();
                ctx.moveTo(padState.lastX, padState.lastY);
                ctx.lineTo(x, y);
@@ -197,6 +274,39 @@

            pointerPads.set(canvasId, { ctx, canvas });
        },
+        registerDropHandler: (dotNetRef) => {
+            if (window.__pdfDropRegistered) return;
+            window.__pdfDropRegistered = true;
+
+            const prevent = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            };
+
+            ['dragenter', 'dragover', 'dragleave'].forEach(evt => {
+                document.addEventListener(evt, prevent, false);
+            });
+
+            document.addEventListener('drop', (e) => {
+                prevent(e);
+
+                const files = e.dataTransfer?.files;
+                if (!files || files.length === 0) {
+                    return;
+                }
+
+                const file = files[0];
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const result = reader.result;
+                    if (typeof result === 'string') {
+                        const base64 = result.split(',')[1] || result;
+                        dotNetRef?.invokeMethodAsync('LoadPdfFromBase64', base64);
+                    }
+                };
+                reader.readAsDataURL(file);
+            }, false);
+        },
        clearSignaturePad: (canvasId) => {
            const pad = pointerPads.get(canvasId);
            if (!pad) return;
@@ -206,6 +316,24 @@
            const pad = pointerPads.get(canvasId);
            if (!pad) return null;
            return pad.canvas.toDataURL('image/png');
+        },
+        capturePointer: (element, pointerId) => {
+            if (element && element.setPointerCapture) {
+                try {
+                    element.setPointerCapture(pointerId);
+                } catch (err) {
+                    console.warn('capturePointer failed', err);
+                }
+            }
+        },
+        releasePointer: (element, pointerId) => {
+            if (element && element.releasePointerCapture) {
+                try {
+                    element.releasePointerCapture(pointerId);
+                } catch (err) {
+                    console.warn('releasePointer failed', err);
+                }
+            }
        }
    };
 })();
Author	SHA1	Message	Date
OlgunR	e6b41f10c8	Merge branch 'feat/receiver-ui' of http://git.dd:3000/AppStd/EnvelopeGenerator into feat/receiver-ui	2025-12-10 11:16:27 +01:00
OlgunR	dc78ad4a24	Improve canvas mouse position accuracy; add settings.json Refactored mouse event handling in pdfInterop.js to use a new getPos helper, ensuring accurate coordinate mapping on scaled or resized canvases. Updated start and move functions to use this helper. Added an empty settings.json file.	2025-12-10 11:16:13 +01:00
TekH	b282318298	Add launchSettings.json for ReceiverUIBlazor project Configured development launch profile with browser launch, environment variable, and HTTP/HTTPS URLs for EnvelopeGenerator.ReceiverUIBlazor.	2025-12-10 09:55:32 +01:00
TekH	8d68ea8c57	Add IIS publish profile for EnvelopeGenerator.ReceiverUIBlazor Introduced IISProfile.pubxml to enable packaging and deployment of the EnvelopeGenerator.ReceiverUIBlazor project to IIS. The profile configures publish method, build settings, output package location, and IIS app path.	2025-12-10 09:55:24 +01:00
OlgunR	7cb8b02b1d	Revamp UI colors and fonts for warmer, modern look Switched to "Red Hat Text" and "Teko" fonts via Google Fonts. Updated color palette from cool blues to warm reds and yellows, including backgrounds, accents, and error states. Refreshed button, top bar, and card styles for improved visual hierarchy and softer appearance.	2025-12-09 10:58:53 +01:00
OlgunR	cc1d33462c	Add drag-and-drop PDF support to Blazor app Implement drag-and-drop PDF loading via JS interop and DotNetObjectReference. Refactor file loading logic and UI structure for clarity. Add IAsyncDisposable for resource cleanup. Update pdfInterop.js to handle drop events and send PDF data to Blazor.	2025-12-09 10:42:11 +01:00
OlgunR	cd85b4fffc	Improve PDF reset logic and modernize UI styling Refactor PDF reset to restore original document state using a new OriginalPdfBase64 variable and async logic. Redesign app.css with a lighter color palette, CSS variables, and updated styles for buttons, overlays, modals, and inputs for a cleaner, more accessible UI. Adjust signature and text overlay colors in pdfInterop.js for better contrast and consistency.	2025-12-09 10:26:01 +01:00
OlgunR	ab3e7fb4e9	Error while dragging fields fixed	2025-12-09 09:50:10 +01:00
OlgunR	4a7676765c	Fixed error while loading file	2025-12-09 08:57:39 +01:00