Add interactive signature buttons to PDF viewer

Introduced functionality to render interactive signature buttons on the PDF viewer. Added support for fetching and displaying signature data (`SignatureDto`) dynamically based on the current page.

- Added `@using` directives in `EnvelopeViewer.razor` for required namespaces.
- Introduced `_signatures` field to store signature data.
- Updated `OnInitializedAsync` to fetch and process signatures.
- Implemented `RenderSignatureButtonsAsync` to dynamically render buttons.
- Added `[JSInvokable]` method `OnSignatureButtonClick` for button events.
- Updated CSS to style `pdf-signature-layer` and `signature-button`.
- Enhanced `pdf-viewer.js` with methods to render and clear buttons.
- Ensured buttons respond to zoom and page navigation changes.
- Added error handling and logging for signature rendering.

These changes improve user interaction by enabling signing functionality directly on the PDF viewer.
This commit is contained in:
2026-06-07 12:43:36 +02:00
parent b888c85937
commit 2f73e4f6da
3 changed files with 205 additions and 2 deletions

View File

@@ -480,6 +480,34 @@ body.resizing {
background: rgba(126, 34, 206, 0.3);
}
.pdf-signature-layer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: visible;
pointer-events: none;
z-index: 20;
}
.pdf-signature-layer .signature-button {
pointer-events: auto;
}
.signature-button {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.signature-button:focus {
outline: 2px solid #7e22ce;
outline-offset: 2px;
}
.signature-button:active {
transform: scale(0.98);
}
.error-container {
display: flex;
align-items: center;