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