Add drag-and-drop support for PDF field repositioning

Introduced drag-and-drop functionality for fields in the PDF editor:
- Added `SenderPdfFieldMoveRequest` record to encapsulate field movement data.
- Enhanced `SenderPdfImageEditor.razor` with drag-and-drop event handlers (`OnFieldDragStart`, `OnPageDropAsync`) and updated field structure.
- Updated `SenderEditorPage.razor` to handle field movement via the `OnMoveFieldAsync` method.
- Improved CSS styles for draggable fields and added a delete button with hover effects.
- Added `getDropCoordsOnPage` function in `envelope-editor.js` to calculate normalized drop coordinates.

These changes improve the user experience by enabling intuitive field placement and management in the PDF editor.
This commit is contained in:
2026-09-30 09:08:17 +02:00
parent 696cd1b623
commit 0c81d79a9b
5 changed files with 153 additions and 11 deletions

View File

@@ -5,6 +5,7 @@
@using EnvelopeGenerator.Application.Common.Dto
@using EnvelopeGenerator.Application.Envelopes.Commands
@using EnvelopeGenerator.Application.Resources
@using EnvelopeGenerator.Server.Client.Components.PdfEditor
@using EnvelopeGenerator.Server.Client.Services
@using Microsoft.AspNetCore.WebUtilities
@using Microsoft.AspNetCore.Components.Forms
@@ -336,6 +337,7 @@
PdfDataUrl="@PdfDataUrl"
Fields="@FieldOverlays"
EditorClick="OnPdfAreaClickAsync"
MoveField="OnMoveFieldAsync"
RemoveField="OnRemoveFieldByIndexAsync" />
}
</div>
@@ -806,6 +808,22 @@
await Task.CompletedTask;
}
async Task OnMoveFieldAsync(SenderPdfFieldMoveRequest request)
{
if (request.Index < 0 || request.Index >= _signatureFields.Count)
return;
var field = _signatureFields[request.Index];
_signatureFields[request.Index] = field with
{
XPt = request.XPt,
YPt = request.YPt,
Page = request.Page
};
await Task.CompletedTask;
}
// ── Clear all fields ──
async Task ClearAllFieldsAsync()
{