From ab3e7fb4e9e2a5d2baca8c07b84edfbd933ce17a Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Tue, 9 Dec 2025 09:50:10 +0100
Subject: [PATCH] Error while dragging fields fixed

---
 .../Pages/Index.razor                         | 40 ++++++++++++++-----
 .../wwwroot/css/app.css                       |  1 +
 .../wwwroot/js/pdfInterop.js                  | 18 +++++++++
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor b/EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
index 83d66884..3f307da7 100644
--- a/EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
+++ b/EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
@@ -29,23 +29,27 @@
 
         @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 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">✔</button>
-                    <button class="overlay-btn" @onclick="CancelOverlay">✖</button>
+                    <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" style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px;")" @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+              <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">✔</button>
-                    <button class="overlay-btn" @onclick="CancelOverlay">✖</button>
+                    <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" />
+                <input class="overlay-input" @bind="TextValue" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation />
             </div>
         }
     </div>
@@ -77,6 +81,7 @@
 @code {
     private ElementReference PdfCanvasRef;
     private ElementReference PdfHostRef;
+    private ElementReference OverlayRef;
 
     private string? PdfBase64;
     private int PageIndex;
@@ -102,6 +107,7 @@
     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;
@@ -246,6 +252,11 @@
         DragStartY = args.ClientY;
         StartLeft = OverlayXpx;
         StartTop = OverlayYpx;
+
+        if (OverlayRef.Context != null)
+        {
+            JS.InvokeVoidAsync("pdfInterop.capturePointer", OverlayRef, args.PointerId);
+        }
     }
 
     private void OnDrag(PointerEventArgs args)
@@ -259,12 +270,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()
diff --git a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
index 1386cc4d..b6892527 100644
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
@@ -110,6 +110,7 @@ canvas {
     background: rgba(15, 23, 42, 0.9);
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
     user-select: none;
+    touch-action: none;
 }
 
 .overlay.signature img {
diff --git a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
index cb5b4f4b..6f8c60c0 100644
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
@@ -273,6 +273,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);
+                }
+            }
         }
     };
 })();