TekH
513efa0833
Replaced the old drag-and-drop implementation with a custom solution using mouse events for better control and precision. Added `_isDragging` state and dynamic cursor updates to enhance user feedback during drag operations. Introduced grab offset calculations to ensure accurate field positioning relative to the pointer. Added `OnEditorMouseUp` to reset the drag state and `GetPageSize` to retrieve page dimensions, defaulting to A4 if unavailable. Updated `envelope-editor.js` to include `pageNumber` in `getClickCoordsOnPdfPage` and removed the obsolete `getDropCoordsOnPage` function. Enhanced `EditorCoords` to include `PageNumber` for improved page identification.
98 lines
3.8 KiB
JavaScript
98 lines
3.8 KiB
JavaScript
window.envelopeEditor = {
|
|
|
|
/**
|
|
* Returns the click position normalised to [0,1] relative to the rendered PDF page
|
|
* element inside DxPdfViewer (or DxReportViewer as fallback).
|
|
*
|
|
* Normalising means the result is independent of zoom level: no matter how much the
|
|
* user has zoomed in/out, the same physical spot on the PDF will always yield the same
|
|
* normalised value. C# multiplies by the page's point dimensions to get PDF points.
|
|
*
|
|
* @param {string} viewerCssClass - CssClass set on DxPdfViewer (e.g. "sender-editor-pdf-viewer")
|
|
* @param {number} clientX - MouseEvent.clientX from Blazor
|
|
* @param {number} clientY - MouseEvent.clientY from Blazor
|
|
* @returns {{ normX, normY, pageIndex } | null}
|
|
* normX / normY : 0..1 fraction within the page element
|
|
* pageIndex : 0-based index of the page the click landed on (-1 if not found)
|
|
*/
|
|
getClickCoordsOnPdfPage: function (viewerCssClass, clientX, clientY) {
|
|
|
|
// Find the viewer root element
|
|
const viewer = document.querySelector('.' + viewerCssClass);
|
|
if (!viewer) {
|
|
console.warn('[envelopeEditor] viewer not found for class:', viewerCssClass);
|
|
return null;
|
|
}
|
|
|
|
// --- Candidate page elements (ordered by preference) ---
|
|
// Sender editor custom renderer uses data-editor-page blocks.
|
|
// Legacy Dx viewers remain as fallback selectors.
|
|
const pageSelectors = [
|
|
'[data-editor-page]',
|
|
'.dxbl-pdfv-page',
|
|
'.dxbrv-report-preview-page',
|
|
'.dxbrv-report-preview-content-img',
|
|
];
|
|
|
|
let allPages = [];
|
|
for (const sel of pageSelectors) {
|
|
const found = Array.from(viewer.querySelectorAll(sel));
|
|
if (found.length > 0) {
|
|
allPages = found;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (allPages.length === 0) {
|
|
console.warn('[envelopeEditor] no page elements found inside viewer');
|
|
return null;
|
|
}
|
|
|
|
// --- Find which page the click landed on ---
|
|
// Walk through all pages; pick the one whose bounding rect contains the click.
|
|
// If none contains it exactly, fall back to the page closest vertically.
|
|
let targetPage = null;
|
|
let targetIndex = -1;
|
|
let minDist = Infinity;
|
|
|
|
for (let i = 0; i < allPages.length; i++) {
|
|
const rect = allPages[i].getBoundingClientRect();
|
|
|
|
// Exact hit
|
|
if (clientX >= rect.left && clientX <= rect.right &&
|
|
clientY >= rect.top && clientY <= rect.bottom) {
|
|
targetPage = allPages[i];
|
|
targetIndex = i;
|
|
break;
|
|
}
|
|
|
|
// Track closest page (vertical centre distance) as fallback
|
|
const cy = rect.top + rect.height / 2;
|
|
const dist = Math.abs(clientY - cy);
|
|
if (dist < minDist) {
|
|
minDist = dist;
|
|
targetPage = allPages[i];
|
|
targetIndex = i;
|
|
}
|
|
}
|
|
|
|
if (!targetPage) return null;
|
|
|
|
const pageRect = targetPage.getBoundingClientRect();
|
|
|
|
// Clamp click inside page boundaries before normalising
|
|
const clampedX = Math.max(pageRect.left, Math.min(clientX, pageRect.right));
|
|
const clampedY = Math.max(pageRect.top, Math.min(clientY, pageRect.bottom));
|
|
|
|
const normX = (clampedX - pageRect.left) / pageRect.width;
|
|
const normY = (clampedY - pageRect.top) / pageRect.height;
|
|
|
|
return {
|
|
normX: normX,
|
|
normY: normY,
|
|
pageIndex: targetIndex,
|
|
pageNumber: parseInt(targetPage.getAttribute('data-editor-page') || String(targetIndex + 1), 10)
|
|
};
|
|
}
|
|
};
|