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

Improve drag-and-drop in SenderPdfImageEditor

Browse Source 
Replaced the old drag-and-drop implementation with a custom solution using mouse events for better control and precision. Added `_isDragging` state and dynamic cursor updates to enhance user feedback during drag operations.

Introduced grab offset calculations to ensure accurate field positioning relative to the pointer. Added `OnEditorMouseUp` to reset the drag state and `GetPageSize` to retrieve page dimensions, defaulting to A4 if unavailable.

Updated `envelope-editor.js` to include `pageNumber` in `getClickCoordsOnPdfPage` and removed the obsolete `getDropCoordsOnPage` function. Enhanced `EditorCoords` to include `PageNumber` for improved page identification.
This commit is contained in:
tekh
2026-09-30 09:20:41 +02:00
parent 0c81d79a9b
commit 513efa0833
2 changed files with 59 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
View File

@@ -5,8 +5,11 @@
@inject IJSRuntime JSRuntime
<div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
style="cursor: @(IsPlacementMode ? "crosshair" : "default");"
@onclick="HandleClickAsync">
style="cursor: @(IsPlacementMode ? "crosshair" : (_isDragging ? "grabbing" : "default"));"
@onclick="HandleClickAsync"
@onmousemove="OnEditorMouseMoveAsync"
@onmouseup="OnEditorMouseUp"
@onmouseleave="OnEditorMouseUp">
@if (PageCount <= 0)
{
<div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
@@ -36,11 +39,7 @@
data-page-height-pt="@heightPt">
<div class="sender-image-editor__page-canvas"
data-editor-page-canvas="@pageNumber"
ondragover="event.preventDefault(); if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';"
ondragenter="event.preventDefault();"
@ondrop:preventDefault="true"
@ondrop:stopPropagation="true"
@ondrop="args => OnPageDropAsync(args, pageNumber, widthPt, heightPt)">
style="@( _isDragging ? "cursor:grabbing;" : string.Empty)">
@if (!string.IsNullOrWhiteSpace(pagePreview?.ImageDataUrl))
{
<img class="sender-image-editor__page-image"
@@ -58,9 +57,8 @@
<div class="sender-image-editor__field"
style="@GetFieldStyle(field, widthPt, heightPt)"
title="@field.ReceiverName"
draggable="true"
@onmousedown="() => OnFieldDragStart(field.Index)"
ondragstart="event.dataTransfer.setData('text/plain', 'field'); event.dataTransfer.effectAllowed = 'move';"
@onmousedown="args => OnFieldMouseDownAsync(args, field)"
@onmousedown:preventDefault="true"
@onclick:stopPropagation="true">
<span class="sender-image-editor__field-label">@field.ReceiverName</span>
<button type="button"
@@ -108,6 +106,9 @@
public EventCallback<SenderPdfFieldMoveRequest> MoveField { get; set; }
private int? _draggedFieldIndex;
private bool _isDragging;
private double _grabOffsetXPt;
private double _grabOffsetYPt;
private static string GetFieldStyle(SenderPdfFieldOverlay field, double pageWidthPt, double pageHeightPt)
{
@@ -131,39 +132,69 @@
await EditorClick.InvokeAsync(args);
}
private void OnFieldDragStart(int fieldIndex)
private async Task OnFieldMouseDownAsync(MouseEventArgs args, SenderPdfFieldOverlay field)
{
_draggedFieldIndex = fieldIndex;
}
private async Task OnPageDropAsync(DragEventArgs args, int pageNumber, double pageWidthPt, double pageHeightPt)
{
if (_draggedFieldIndex is null || !MoveField.HasDelegate)
return;
var coords = await JSRuntime.InvokeAsync<DropCoords?>(
"envelopeEditor.getDropCoordsOnPage",
var coords = await JSRuntime.InvokeAsync<EditorCoords?>(
"envelopeEditor.getClickCoordsOnPdfPage",
"sender-editor-pdf-viewer",
pageNumber,
args.ClientX,
args.ClientY);
if (coords is null)
return;
var pageNumber = coords.PageNumber;
var (pageWidthPt, pageHeightPt) = GetPageSize(pageNumber);
var pointerXPt = coords.NormX * pageWidthPt;
var pointerYPt = coords.NormY * pageHeightPt;
_draggedFieldIndex = field.Index;
_isDragging = true;
_grabOffsetXPt = pointerXPt - field.XPt;
_grabOffsetYPt = pointerYPt - field.YPt;
}
private async Task OnEditorMouseMoveAsync(MouseEventArgs args)
{
if (_draggedFieldIndex is null || !MoveField.HasDelegate)
return;
var coords = await JSRuntime.InvokeAsync<EditorCoords?>(
"envelopeEditor.getClickCoordsOnPdfPage",
"sender-editor-pdf-viewer",
args.ClientX,
args.ClientY);
if (coords is null)
return;
var pageNumber = coords.PageNumber;
var (pageWidthPt, pageHeightPt) = GetPageSize(pageNumber);
const double sigWidthPt = 1.77 * 72;
const double sigHeightPt = 1.96 * 72;
var xPt = coords.NormX * pageWidthPt;
var yPt = coords.NormY * pageHeightPt;
var xPt = (coords.NormX * pageWidthPt) - _grabOffsetXPt;
var yPt = (coords.NormY * pageHeightPt) - _grabOffsetYPt;
xPt = Math.Max(0, Math.Min(xPt, pageWidthPt - sigWidthPt));
yPt = Math.Max(0, Math.Min(yPt, pageHeightPt - sigHeightPt));
await MoveField.InvokeAsync(new SenderPdfFieldMoveRequest(_draggedFieldIndex.Value, pageNumber, xPt, yPt));
_draggedFieldIndex = null;
}
private sealed record DropCoords(double NormX, double NormY);
private void OnEditorMouseUp(MouseEventArgs _)
{
_draggedFieldIndex = null;
_isDragging = false;
}
private (double WidthPt, double HeightPt) GetPageSize(int pageNumber)
{
var page = Pages.FirstOrDefault(p => p.PageNumber == pageNumber);
return page is null ? (595.0, 842.0) : (page.WidthPt, page.HeightPt);
}
private sealed record EditorCoords(double NormX, double NormY, int PageIndex, int PageNumber);
private string L(string key, string fallback)
{