Add envelope editor with PDF upload and signature tools
Introduced a new Blazor page `EnvelopeSenderEditorPage.razor` for editing envelopes with an interactive interface. Integrated `DxPdfViewer` for rendering PDFs and added functionality for uploading, viewing, and interacting with PDF files. Key features: - Action bar with buttons for uploading PDFs, toggling signature placement mode, clearing fields, and saving. - Placement mode for adding signature fields via an overlay, with visual placeholders. - JavaScript interop (`envelope-editor.js`) for precise click coordinate mapping. - Error handling for unsupported file types and size limits (50 MB). - Logging for debugging key actions like PDF uploads and field placements. Defined constants for accurate signature field dimensions and scaling. Added models (`SignatureFieldDraft`, `OverlayCoords`) to manage state and interactions.
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
window.envelopeEditor = {
|
||||
/**
|
||||
* Returns click coordinates relative to the overlay element.
|
||||
* @param {string} overlayId - The id of the overlay div
|
||||
* @param {number} clientX - MouseEventArgs.ClientX from Blazor
|
||||
* @param {number} clientY - MouseEventArgs.ClientY from Blazor
|
||||
* @returns {{ relX, relY, containerW, containerH }}
|
||||
*/
|
||||
getClickCoords: function (overlayId, clientX, clientY) {
|
||||
const el = document.getElementById(overlayId);
|
||||
if (!el) return null;
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
return {
|
||||
relX: clientX - rect.left,
|
||||
relY: clientY - rect.top,
|
||||
containerW: rect.width,
|
||||
containerH: rect.height
|
||||
};
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user