Improve PDF viewer overlay synchronization

Refactor `EnvelopeSenderEditorPage.razor` to enhance the structure and behavior of the PDF editor wrapper:
- Add `class="pdf-editor-wrapper"` and update `overflow` to `auto`.
- Update `DxPdfViewer`'s `CssClass` to `sender-editor-pdf-viewer`.
- Introduce `OnAfterRenderAsync` to synchronize the overlay with the viewer.

Add new styles in `envelope-viewer.css` for better layout:
- Ensure `.pdf-editor-wrapper` and `.sender-editor-pdf-viewer` occupy full dimensions.
- Center and align content within the PDF viewer.

Enhance `envelope-editor.js` with `syncOverlayToPage`:
- Dynamically adjust overlay position and size relative to the viewer.
- Use `MutationObserver` and event listeners for real-time synchronization.
- Handle delayed rendering with scheduled sync attempts.

These changes improve overlay alignment, user experience, and code maintainability.
This commit is contained in:
2026-07-01 14:26:11 +02:00
parent 6ed4caea4f
commit 762a9e8bca
3 changed files with 112 additions and 3 deletions

View File

@@ -147,15 +147,15 @@
else
{
@* PDF viewer + overlay wrapper *@
<div id="pdf-editor-wrapper"
style="position: relative; width: 100%; height: 100%; overflow: hidden;">
<div id="pdf-editor-wrapper" class="pdf-editor-wrapper"
style="position: relative; width: 100%; height: 100%; overflow: auto;">
@* DxPdfViewer — zoom fixed to 1.0 for reliable coordinate mapping *@
<DxPdfViewer @ref="_pdfViewer"
DocumentContent="@_pdfBytes"
ZoomLevel="1.0"
IsSinglePagePreview="false"
CssClass="w-100 h-100" />
CssClass="sender-editor-pdf-viewer" />
@* Transparent overlay for click capture (active only in placement mode) *@
<div id="pdf-editor-overlay"
@@ -336,6 +336,17 @@
$"[SenderEditor] Total fields: {_signatureFields.Count}");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!_pdfLoaded || _errorMessage is not null)
return;
await JSRuntime.InvokeVoidAsync(
"envelopeEditor.syncOverlayToPage",
"pdf-editor-wrapper",
"pdf-editor-overlay");
}
// ── Models ──
record SignatureFieldDraft(double XPt, double YPt, int Page, double DisplayX, double DisplayY);