feat(sender-editor): use rendered page metadata for field placement

This commit is contained in:
2026-09-29 19:22:01 +02:00
parent 7a114f47a6
commit 776700b247
2 changed files with 39 additions and 28 deletions

View File

@@ -1,17 +1,18 @@
@using EnvelopeGenerator.Application.Resources
@using EnvelopeGenerator.Application.Common.Dto
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Resource> UiLocalizer
<div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
style="cursor: @(IsPlacementMode ? "crosshair" : "default");"
@onclick="HandleClickAsync">
@if (PageCount <= 0)
@if (PageCount <= 0)
{
<div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
}
else
{
@if (PageImageDataUrls.Count == 0 && !string.IsNullOrWhiteSpace(PdfDataUrl))
@if (Pages.Count == 0 && !string.IsNullOrWhiteSpace(PdfDataUrl))
{
<div class="sender-image-editor__native-preview">
<iframe class="sender-image-editor__native-frame"
@@ -21,17 +22,22 @@
}
<div class="sender-image-editor__pages">
@for (var pageNumber = 1; pageNumber <= PageCount; pageNumber++)
@for (var pageIndex = 0; pageIndex < PageCount; pageIndex++)
{
var pagePreview = pageIndex < Pages.Count ? Pages[pageIndex] : null;
var pageNumber = pagePreview?.PageNumber ?? (pageIndex + 1);
var widthPt = pagePreview?.WidthPt ?? 595.0;
var heightPt = pagePreview?.HeightPt ?? 842.0;
<div class="sender-image-editor__page-block"
data-editor-page="@pageNumber"
data-page-width-pt="595"
data-page-height-pt="842">
data-editor-page="@pageNumber"
data-page-width-pt="@widthPt"
data-page-height-pt="@heightPt">
<div class="sender-image-editor__page-canvas">
@if (PageImageDataUrls.TryGetValue(pageNumber, out var imageDataUrl) && !string.IsNullOrWhiteSpace(imageDataUrl))
@if (!string.IsNullOrWhiteSpace(pagePreview?.ImageDataUrl))
{
<img class="sender-image-editor__page-image"
src="@imageDataUrl"
src="@(pagePreview!.ImageDataUrl)"
alt="PDF Page @pageNumber"
draggable="false" />
}
@@ -44,7 +50,7 @@
{
<button type="button"
class="sender-image-editor__field"
style="@GetFieldStyle(field)"
style="@GetFieldStyle(field, widthPt, heightPt)"
title="@field.ReceiverName"
@onclick:stopPropagation="true"
@onclick="() => RemoveField.InvokeAsync(field.Index)">
@@ -66,7 +72,7 @@
public int PageCount { get; set; }
[Parameter]
public IReadOnlyDictionary<int, string> PageImageDataUrls { get; set; } = new Dictionary<int, string>();
public IReadOnlyList<PdfPageImageDto> Pages { get; set; } = Array.Empty<PdfPageImageDto>();
[Parameter]
public string? PdfDataUrl { get; set; }
@@ -80,12 +86,12 @@
[Parameter]
public EventCallback<int> RemoveField { get; set; }
private static string GetFieldStyle(SenderPdfFieldOverlay field)
private static string GetFieldStyle(SenderPdfFieldOverlay field, double pageWidthPt, double pageHeightPt)
{
var leftPercent = (field.XPt / 595.0) * 100.0;
var topPercent = (field.YPt / 842.0) * 100.0;
var widthPercent = (127.44 / 595.0) * 100.0;
var heightPercent = (141.12 / 842.0) * 100.0;
var leftPercent = (field.XPt / pageWidthPt) * 100.0;
var topPercent = (field.YPt / pageHeightPt) * 100.0;
var widthPercent = (127.44 / pageWidthPt) * 100.0;
var heightPercent = (141.12 / pageHeightPt) * 100.0;
return string.Join(' ',
$"left:{leftPercent:F4}%;",