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:
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user