Refactor PDF editor styles and add throttling logic

Refactored `SenderPdfImageEditor.razor` to use culture-invariant formatting for dynamic styles and introduced the `GetPageCanvasStyle` method for calculating `aspect-ratio` and `cursor` styles. Enhanced layout control with additional CSS properties.

Updated `envelope-editor.js` to include a throttling mechanism for mouse movement events using `_moveThrottle` and `requestAnimationFrame`. Added `getClickCoordsOnPdfPageThrottled` with a promise-based approach to improve performance during rapid interactions.
This commit is contained in:
2026-09-30 15:16:23 +02:00
parent 12ec5b28fa
commit 7081c5f64e
2 changed files with 66 additions and 6 deletions

View File

@@ -1,5 +1,11 @@
window.envelopeEditor = {
_moveThrottle: {
rafId: 0,
latest: null,
waiters: []
},
/**
* Returns the click position normalised to [0,1] relative to the rendered PDF page
* element inside DxPdfViewer (or DxReportViewer as fallback).
@@ -93,5 +99,33 @@ window.envelopeEditor = {
pageIndex: targetIndex,
pageNumber: parseInt(targetPage.getAttribute('data-editor-page') || String(targetIndex + 1), 10)
};
},
getClickCoordsOnPdfPageThrottled: function (viewerCssClass, clientX, clientY) {
return new Promise((resolve) => {
const state = window.envelopeEditor._moveThrottle;
state.latest = { viewerCssClass, clientX, clientY };
state.waiters.push(resolve);
if (state.rafId !== 0) {
return;
}
state.rafId = window.requestAnimationFrame(() => {
state.rafId = 0;
const args = state.latest;
state.latest = null;
const result = args
? window.envelopeEditor.getClickCoordsOnPdfPage(args.viewerCssClass, args.clientX, args.clientY)
: null;
const waiters = state.waiters.splice(0, state.waiters.length);
for (const waiter of waiters) {
waiter(result);
}
});
});
}
};