TekH
a22ec7a7d3
Added a new button in `EnvelopeViewer.razor` for creating or modifying signatures, with dynamic styling and tooltips based on the signature state. Enhanced `OpenSignaturePopup` and `OnPopupShownAsync` methods to preload and display existing signatures in the popup and canvas. Introduced new "success" button styles in `envelope-viewer.css` for better visual feedback. Added `loadExistingSignature` function in `receiver-signature.js` to render existing signatures on the canvas and updated the public API to expose this functionality.
354 lines
15 KiB
JavaScript
354 lines
15 KiB
JavaScript
window.receiverSignature = (() => {
|
|
|
|
// ?? State ???????????????????????????????????????????????????????????????
|
|
const pads = new Map();
|
|
const typedSignatures = new Map();
|
|
const imageSignatures = new Map();
|
|
const overlayButtons = new Map(); // annotationId -> { btn, signed }
|
|
let _dotNetRef = null;
|
|
|
|
// DevExpress Blazor Report Viewer selectors (confirmed via debugDumpViewerDom)
|
|
const PAGE_IMG_SEL = '.dxbrv-report-preview-content-img';
|
|
const SCROLL_CONTAINER_SEL = '.dxbrv-surface-wrapper';
|
|
const VIEWER_WRAPPER_SEL = '.receiver-viewer-wrapper';
|
|
|
|
// DX report coordinate space (1/100 inch, A4)
|
|
const DX_PAGE_WIDTH = 827.0;
|
|
const DX_PAGE_HEIGHT = 1169.0;
|
|
|
|
// Signature field size in DX units
|
|
const SIG_WIDTH_DX = 230.0;
|
|
const SIG_HEIGHT_DX = 154.0;
|
|
|
|
// ?? Annotation Checkboxes ????????????????????????????????????????????????
|
|
|
|
// Active install context — holds everything needed to reposition on resize/scroll
|
|
let _installCtx = null;
|
|
|
|
function installAnnotationCheckboxes(annotations, checkedIds, dotNetRef) {
|
|
_dotNetRef = dotNetRef;
|
|
|
|
// Tear down previous install completely
|
|
_teardownCheckboxes();
|
|
|
|
if (!annotations || annotations.length === 0) return;
|
|
|
|
const ctx = {
|
|
annotations,
|
|
checkedIds: new Set(Array.isArray(checkedIds) ? checkedIds : []),
|
|
scrollEl: null,
|
|
pageEls: [],
|
|
resizeObs: null,
|
|
onScroll: null,
|
|
onResize: null,
|
|
resizeTimer: null,
|
|
};
|
|
_installCtx = ctx;
|
|
|
|
_waitForCheckboxPages(ctx);
|
|
}
|
|
|
|
function _teardownCheckboxes() {
|
|
document.querySelectorAll('.annot-sig-cb-wrapper').forEach(el => el.remove());
|
|
overlayButtons.clear();
|
|
|
|
if (!_installCtx) return;
|
|
const ctx = _installCtx;
|
|
|
|
if (ctx.resizeObs) { ctx.resizeObs.disconnect(); ctx.resizeObs = null; }
|
|
if (ctx.scrollEl && ctx.onScroll) ctx.scrollEl.removeEventListener('scroll', ctx.onScroll);
|
|
if (ctx.onResize) window.removeEventListener('resize', ctx.onResize);
|
|
if (ctx.resizeTimer) clearTimeout(ctx.resizeTimer);
|
|
|
|
_installCtx = null;
|
|
}
|
|
|
|
function _waitForCheckboxPages(ctx) {
|
|
const wrapper = document.querySelector(VIEWER_WRAPPER_SEL);
|
|
if (!wrapper) return;
|
|
|
|
if (!_tryInstallCheckboxes(ctx)) {
|
|
const observer = new MutationObserver(() => {
|
|
if (_tryInstallCheckboxes(ctx)) observer.disconnect();
|
|
});
|
|
observer.observe(wrapper, { childList: true, subtree: true });
|
|
setTimeout(() => observer.disconnect(), 15000);
|
|
}
|
|
}
|
|
|
|
function _tryInstallCheckboxes(ctx) {
|
|
const scrollEl = document.querySelector(SCROLL_CONTAINER_SEL);
|
|
if (!scrollEl) return false;
|
|
|
|
const pageEls = Array.from(document.querySelectorAll(PAGE_IMG_SEL));
|
|
if (pageEls.length === 0) return false;
|
|
|
|
if (getComputedStyle(scrollEl).position === 'static')
|
|
scrollEl.style.position = 'relative';
|
|
|
|
ctx.scrollEl = scrollEl;
|
|
ctx.pageEls = pageEls;
|
|
|
|
// Initial render
|
|
_renderAllCheckboxes(ctx);
|
|
|
|
// ResizeObserver — watches every page image for size changes (zoom in/out)
|
|
const ro = new ResizeObserver(() => _repositionAll(ctx));
|
|
pageEls.forEach(el => ro.observe(el));
|
|
ctx.resizeObs = ro;
|
|
|
|
// Scroll — reposition when user scrolls the viewer
|
|
ctx.onScroll = () => _repositionAll(ctx);
|
|
scrollEl.addEventListener('scroll', ctx.onScroll, { passive: true });
|
|
|
|
// Window resize — debounced 60 ms
|
|
ctx.onResize = () => {
|
|
if (ctx.resizeTimer) clearTimeout(ctx.resizeTimer);
|
|
ctx.resizeTimer = setTimeout(() => _repositionAll(ctx), 60);
|
|
};
|
|
window.addEventListener('resize', ctx.onResize, { passive: true });
|
|
|
|
return true;
|
|
}
|
|
|
|
function _repositionAll(ctx) {
|
|
if (!ctx || !ctx.scrollEl) return;
|
|
|
|
const scrollEl = ctx.scrollEl;
|
|
const pageEls = Array.from(document.querySelectorAll(PAGE_IMG_SEL)); // re-query in case DOM changed
|
|
if (pageEls.length === 0) return;
|
|
|
|
const scrollRect = scrollEl.getBoundingClientRect();
|
|
|
|
ctx.annotations.forEach(ann => {
|
|
const wrapper = document.querySelector(`.annot-sig-cb-wrapper[data-annot-id="${ann.id}"]`);
|
|
if (!wrapper) return;
|
|
|
|
const pageEl = pageEls[(ann.page || 1) - 1] ?? pageEls[pageEls.length - 1];
|
|
if (!pageEl) return;
|
|
|
|
const pageRect = pageEl.getBoundingClientRect();
|
|
if (pageRect.width === 0 || pageRect.height === 0) return;
|
|
|
|
const scaleX = pageRect.width / DX_PAGE_WIDTH;
|
|
const scaleY = pageRect.height / DX_PAGE_HEIGHT;
|
|
|
|
const absLeft = pageRect.left - scrollRect.left + scrollEl.scrollLeft + (ann.x || 0) * scaleX;
|
|
const absTop = pageRect.top - scrollRect.top + scrollEl.scrollTop + (ann.y || 0) * scaleY;
|
|
const boxW = SIG_WIDTH_DX * scaleX;
|
|
const boxH = SIG_HEIGHT_DX * scaleY;
|
|
|
|
wrapper.style.left = Math.round(absLeft) + 'px';
|
|
wrapper.style.top = Math.round(absTop) + 'px';
|
|
wrapper.style.width = Math.round(boxW) + 'px';
|
|
wrapper.style.height = Math.round(boxH) + 'px';
|
|
});
|
|
}
|
|
|
|
function _renderAllCheckboxes(ctx) {
|
|
const scrollEl = ctx.scrollEl;
|
|
const pageEls = ctx.pageEls;
|
|
const scrollRect = scrollEl.getBoundingClientRect();
|
|
|
|
ctx.annotations.forEach(ann => {
|
|
const pageEl = pageEls[(ann.page || 1) - 1] ?? pageEls[pageEls.length - 1];
|
|
if (!pageEl) return;
|
|
|
|
const pageRect = pageEl.getBoundingClientRect();
|
|
if (pageRect.width === 0 || pageRect.height === 0) return;
|
|
|
|
const scaleX = pageRect.width / DX_PAGE_WIDTH;
|
|
const scaleY = pageRect.height / DX_PAGE_HEIGHT;
|
|
|
|
const absLeft = pageRect.left - scrollRect.left + scrollEl.scrollLeft + (ann.x || 0) * scaleX;
|
|
const absTop = pageRect.top - scrollRect.top + scrollEl.scrollTop + (ann.y || 0) * scaleY;
|
|
const boxW = SIG_WIDTH_DX * scaleX;
|
|
const boxH = SIG_HEIGHT_DX * scaleY;
|
|
|
|
const isChecked = ctx.checkedIds.has(ann.id);
|
|
_createCheckboxOverlay(ann.id, scrollEl, absLeft, absTop, boxW, boxH, isChecked);
|
|
});
|
|
}
|
|
|
|
function _createCheckboxOverlay(annotationId, container, left, top, width, height, isChecked) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'annot-sig-cb-wrapper' + (isChecked ? ' annot-sig-cb-wrapper--checked' : '');
|
|
wrapper.setAttribute('data-annot-id', String(annotationId));
|
|
|
|
Object.assign(wrapper.style, {
|
|
position: 'absolute',
|
|
left: Math.round(left) + 'px',
|
|
top: Math.round(top) + 'px',
|
|
width: Math.round(width) + 'px',
|
|
height: Math.round(height) + 'px',
|
|
zIndex: '9999',
|
|
cursor: 'pointer',
|
|
boxSizing: 'border-box',
|
|
});
|
|
|
|
const cb = document.createElement('input');
|
|
cb.type = 'checkbox';
|
|
cb.checked = isChecked;
|
|
cb.className = 'annot-sig-cb';
|
|
cb.setAttribute('aria-label', 'Unterschriftsfeld bestaetigen');
|
|
|
|
const label = document.createElement('span');
|
|
label.className = 'annot-sig-cb__label';
|
|
label.textContent = isChecked ? '\u2713 Bestaetigt' : '\u270e Hier unterschreiben';
|
|
|
|
wrapper.appendChild(cb);
|
|
wrapper.appendChild(label);
|
|
|
|
wrapper.addEventListener('click', (e) => {
|
|
if (e.target !== cb) cb.checked = !cb.checked;
|
|
const checked = cb.checked;
|
|
wrapper.classList.toggle('annot-sig-cb-wrapper--checked', checked);
|
|
label.textContent = checked ? '\u2713 Bestaetigt' : '\u270e Hier unterschreiben';
|
|
if (_installCtx) {
|
|
if (checked) _installCtx.checkedIds.add(annotationId);
|
|
else _installCtx.checkedIds.delete(annotationId);
|
|
}
|
|
if (_dotNetRef)
|
|
_dotNetRef.invokeMethodAsync('OnAnnotationToggled', annotationId, checked);
|
|
});
|
|
|
|
container.appendChild(wrapper);
|
|
overlayButtons.set(annotationId, { btn: wrapper, signed: isChecked });
|
|
}
|
|
|
|
// ?? Signature Pad ???????????????????????????????????????????????????????
|
|
|
|
function _pos(canvas, event) {
|
|
const r = canvas.getBoundingClientRect();
|
|
const s = (event.touches && event.touches.length) ? event.touches[0] : event;
|
|
return { x: (s.clientX - r.left) * (canvas.width / r.width), y: (s.clientY - r.top) * (canvas.height / r.height) };
|
|
}
|
|
|
|
function _clear(canvas) { canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); }
|
|
|
|
function initialize(canvasId) {
|
|
const canvas = document.getElementById(canvasId);
|
|
if (!canvas || pads.has(canvasId)) return;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.lineWidth = 2.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#111';
|
|
const state = { drawing: false, hasSignature: false };
|
|
pads.set(canvasId, state);
|
|
const start = e => { e.preventDefault(); const p = _pos(canvas, e); state.drawing = true; ctx.beginPath(); ctx.moveTo(p.x, p.y); };
|
|
const move = e => { if (!state.drawing) return; e.preventDefault(); const p = _pos(canvas, e); ctx.lineTo(p.x, p.y); ctx.stroke(); state.hasSignature = true; };
|
|
const end = e => { if (!state.drawing) return; e.preventDefault(); state.drawing = false; };
|
|
canvas.addEventListener('mousedown', start);
|
|
canvas.addEventListener('mousemove', move);
|
|
window.addEventListener('mouseup', end);
|
|
canvas.addEventListener('touchstart', start, { passive: false });
|
|
canvas.addEventListener('touchmove', move, { passive: false });
|
|
canvas.addEventListener('touchend', end, { passive: false });
|
|
}
|
|
|
|
function initializeTyped(canvasId) {
|
|
const canvas = document.getElementById(canvasId);
|
|
if (!canvas || typedSignatures.has(canvasId)) return;
|
|
typedSignatures.set(canvasId, { hasSignature: false });
|
|
}
|
|
|
|
function initializeImage(inputId, canvasId) {
|
|
const input = document.getElementById(inputId);
|
|
const canvas = document.getElementById(canvasId);
|
|
if (!input || !canvas || imageSignatures.has(canvasId)) return;
|
|
const state = { hasSignature: false };
|
|
imageSignatures.set(canvasId, state);
|
|
input.addEventListener('change', () => {
|
|
const file = input.files && input.files[0];
|
|
if (!file || !file.type.startsWith('image/')) { _clear(canvas); state.hasSignature = false; return; }
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const ctx = canvas.getContext('2d'); _clear(canvas);
|
|
const p = 10, mw = canvas.width - p * 2, mh = canvas.height - p * 2;
|
|
const s = Math.min(mw / img.width, mh / img.height, 1);
|
|
ctx.drawImage(img, (canvas.width - img.width * s) / 2, (canvas.height - img.height * s) / 2, img.width * s, img.height * s);
|
|
state.hasSignature = true;
|
|
};
|
|
img.src = reader.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
function clear(canvasId) {
|
|
const c = document.getElementById(canvasId); const s = pads.get(canvasId);
|
|
if (c && s) { _clear(c); s.hasSignature = false; }
|
|
}
|
|
|
|
function clearTyped(canvasId) {
|
|
const c = document.getElementById(canvasId); const s = typedSignatures.get(canvasId);
|
|
if (c && s) { _clear(c); s.hasSignature = false; }
|
|
}
|
|
|
|
function clearImage(inputId, canvasId) {
|
|
const inp = document.getElementById(inputId); const c = document.getElementById(canvasId); const s = imageSignatures.get(canvasId);
|
|
if (c && s) { if (inp) inp.value = ''; _clear(c); s.hasSignature = false; }
|
|
}
|
|
|
|
function renderTypedSignature(canvasId, text, fontFamily) {
|
|
const canvas = document.getElementById(canvasId); const state = typedSignatures.get(canvasId);
|
|
if (!canvas || !state) return;
|
|
const value = (text || '').trim(); _clear(canvas);
|
|
if (!value) { state.hasSignature = false; return; }
|
|
const ctx = canvas.getContext('2d'); let fs = 54;
|
|
do { ctx.font = 'italic ' + fs + 'px ' + (fontFamily || 'cursive'); fs -= 2; }
|
|
while (ctx.measureText(value).width > canvas.width - 30 && fs > 24);
|
|
ctx.fillStyle = '#111'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center';
|
|
ctx.fillText(value, canvas.width / 2, canvas.height / 2);
|
|
state.hasSignature = true;
|
|
}
|
|
|
|
function startTyped(elementId, text, typeSpeed) {
|
|
if (typeof Typed === 'undefined') return;
|
|
new Typed('#' + elementId, {
|
|
strings: [text],
|
|
typeSpeed: typeSpeed || 15,
|
|
showCursor: false
|
|
});
|
|
}
|
|
|
|
function getDataUrl(id) { const c = document.getElementById(id); const s = pads.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
|
|
function getTypedDataUrl(id) { const c = document.getElementById(id); const s = typedSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
|
|
function getImageDataUrl(id) { const c = document.getElementById(id); const s = imageSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
|
|
|
|
function loadExistingSignature(canvasId, dataUrl) {
|
|
const canvas = document.getElementById(canvasId);
|
|
const state = pads.get(canvasId);
|
|
if (!canvas || !state || !dataUrl) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
const img = new Image();
|
|
|
|
img.onload = () => {
|
|
_clear(canvas);
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
state.hasSignature = true;
|
|
};
|
|
|
|
img.src = dataUrl;
|
|
}
|
|
|
|
// ?? Public API ??????????????????????????????????????????????????????????
|
|
return {
|
|
startTyped: startTyped,
|
|
installAnnotationCheckboxes: installAnnotationCheckboxes,
|
|
initialize: initialize,
|
|
initializeTyped: initializeTyped,
|
|
initializeImage: initializeImage,
|
|
clear: clear,
|
|
clearTyped: clearTyped,
|
|
clearImage: clearImage,
|
|
renderTypedSignature: renderTypedSignature,
|
|
getDataUrl: getDataUrl,
|
|
getTypedDataUrl: getTypedDataUrl,
|
|
getImageDataUrl: getImageDataUrl,
|
|
loadExistingSignature: loadExistingSignature
|
|
};
|
|
})();
|
|
|