AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Error while dragging fields fixed

Browse Source
This commit is contained in:
OlgunR
2025-12-09 09:50:10 +01:00
parent 4a7676765c
commit ab3e7fb4e9
3 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
View File

@@ -29,23 +29,27 @@
@if (ShowSignature) @if (ShowSignature)
{ {
<div class="overlay signature" style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px; width:{OverlayWidthPx}px; height:{OverlayHeightPx}px;")" <div class="overlay signature" @ref="OverlayRef"
@onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag"> 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"> <div class="overlay-controls">
<button class="overlay-btn" @onclick="ApplySignature">✔</button> <button class="overlay-btn" @onclick="ApplySignature" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
<button class="overlay-btn" @onclick="CancelOverlay">✖</button> <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
</div> </div>
<img src="@SignatureDataUrl" draggable="false" /> <img src="@SignatureDataUrl" draggable="false" />
</div> </div>
} }
@if (ShowText) @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"> <div class="overlay-controls">
<button class="overlay-btn" @onclick="ApplyText">✔</button> <button class="overlay-btn" @onclick="ApplyText" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
<button class="overlay-btn" @onclick="CancelOverlay">✖</button> <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
</div> </div>
<input class="overlay-input" @bind="TextValue" /> <input class="overlay-input" @bind="TextValue" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation />
</div> </div>
} }
</div> </div>
@@ -77,6 +81,7 @@
@code { @code {
private ElementReference PdfCanvasRef; private ElementReference PdfCanvasRef;
private ElementReference PdfHostRef; private ElementReference PdfHostRef;
private ElementReference OverlayRef;
private string? PdfBase64; private string? PdfBase64;
private int PageIndex; private int PageIndex;
@@ -102,6 +107,7 @@
private double StartTop; private double StartTop;
private string TextValue = "Text"; private string TextValue = "Text";
private string? ErrorMessage; private string? ErrorMessage;
private DateTimeOffset _lastDragRender = DateTimeOffset.MinValue;
private bool HasPdf => !string.IsNullOrWhiteSpace(PdfBase64); private bool HasPdf => !string.IsNullOrWhiteSpace(PdfBase64);
private int DisplayPage => PageIndex + 1; private int DisplayPage => PageIndex + 1;
@@ -246,6 +252,11 @@
DragStartY = args.ClientY; DragStartY = args.ClientY;
StartLeft = OverlayXpx; StartLeft = OverlayXpx;
StartTop = OverlayYpx; StartTop = OverlayYpx;
if (OverlayRef.Context != null)
{
JS.InvokeVoidAsync("pdfInterop.capturePointer", OverlayRef, args.PointerId);
}
} }
private void OnDrag(PointerEventArgs args) private void OnDrag(PointerEventArgs args)
@@ -259,12 +270,23 @@
var dy = args.ClientY - DragStartY; var dy = args.ClientY - DragStartY;
OverlayXpx = StartLeft + dx; OverlayXpx = StartLeft + dx;
OverlayYpx = StartTop + dy; OverlayYpx = StartTop + dy;
StateHasChanged();
var now = DateTimeOffset.UtcNow;
if (now - _lastDragRender > TimeSpan.FromMilliseconds(16))
{
_lastDragRender = now;
InvokeAsync(StateHasChanged);
}
} }
private void EndDrag(PointerEventArgs args) private void EndDrag(PointerEventArgs args)
{ {
IsDragging = false; IsDragging = false;
if (OverlayRef.Context != null)
{
JS.InvokeVoidAsync("pdfInterop.releasePointer", OverlayRef, args.PointerId);
}
} }
private async Task ApplySignature() private async Task ApplySignature()

1
EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
View File

@@ -110,6 +110,7 @@ canvas {
background: rgba(15, 23, 42, 0.9); background: rgba(15, 23, 42, 0.9);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
user-select: none; user-select: none;
touch-action: none;
} }
.overlay.signature img { .overlay.signature img {

18
EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
View File

@@ -273,6 +273,24 @@
const pad = pointerPads.get(canvasId); const pad = pointerPads.get(canvasId);
if (!pad) return null; if (!pad) return null;
return pad.canvas.toDataURL('image/png'); 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);
}
}
} }
}; };
})(); })();