Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

FEATURE signature: show full pages - can add zone + fix hitSignature is canvas-aware

Browse Source
This commit is contained in:
nobohan 2024-11-25 15:18:23 +01:00 committed by Julien Fastré
parent da37a3db5f
commit 96dfddc55f
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
1 changed files with 29 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
View File

@ -339,7 +339,7 @@ import {download_and_decrypt_doc, download_doc_as_pdf} from "../StoredObjectButt
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
const multiPage: Ref<boolean> = ref(true);
const multiPage: Ref<boolean> = ref(false);
const modalOpen: Ref<boolean> = ref(false);
const loading: Ref<boolean> = ref(false);
const adding: Ref<boolean> = ref(false);
@ -407,9 +407,9 @@ const $toast = useToast();
const signature = window.signature;
console.log("signature", signature);
const setZoomLevel = (zoomLevel: string) => {
const setZoomLevel = async (zoomLevel: string) => {
zoom.value = Number.parseFloat(zoomLevel);
setPage(page.value);
await resetPages();
setTimeout(drawAllZones, 200);
};
@ -429,6 +429,11 @@ const getCanvas = (page: number) =>
? (document.getElementById(`canvas-${page}`) as HTMLCanvasElement)
: (document.querySelectorAll("canvas")[0] as HTMLCanvasElement);
const getCanvasId = (canvas: HTMLCanvasElement) => {
const number = canvas.id.split("-").pop();
return number ? parseInt(number) : 0;
};
const getRenderContext = (pdfPage: PDFPageProxy) => {
const scale = 1 * zoom.value;
const viewport = pdfPage.getViewport({ scale });
@ -488,17 +493,14 @@ const initPdf = () => {
setTimeout(drawAllZones, 800);
};
async function toggleMultiPage() {
if (multiPage.value) {
await setAllPages();
setTimeout(drawAllZones, 200);
addCanvasEvents();
} else {
await setPage(page.value);
setTimeout(drawAllZones, 200);
addCanvasEvents();
}
}
const resetPages = () =>
multiPage.value ? setAllPages() : setPage(page.value);
const toggleMultiPage = async () => {
await resetPages();
setTimeout(drawAllZones, 200);
addCanvasEvents();
};
const scaleXToCanvas = (x: number, canvasWidth: number, PDFWidth: number) =>
Math.round((x * canvasWidth) / PDFWidth);
@ -509,28 +511,23 @@ const scaleYToCanvas = (h: number, canvasHeight: number, PDFHeight: number) =>
const hitSignature = (
zone: SignatureZone,
xy: number[],
canvasWidth: number,
canvasHeight: number
canvas: HTMLCanvasElement
) =>
scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) < xy[0] &&
scaleXToCanvas(zone.x, canvas.width, zone.PDFPage.width) < xy[0] &&
xy[0] <
scaleXToCanvas(zone.x + zone.width, canvasWidth, zone.PDFPage.width) &&
scaleXToCanvas(zone.x + zone.width, canvas.width, zone.PDFPage.width) &&
zone.PDFPage.height * zoom.value -
scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) <
scaleYToCanvas(zone.y, canvas.height, zone.PDFPage.height) <
xy[1] &&
xy[1] <
scaleYToCanvas(zone.height - zone.y, canvasHeight, zone.PDFPage.height) +
scaleYToCanvas(zone.height - zone.y, canvas.height, zone.PDFPage.height) +
zone.PDFPage.height * zoom.value;
const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
const selectZone = async (z: SignatureZone, canvas: HTMLCanvasElement) => {
userSignatureZone.value = z;
const ctx = canvas.getContext("2d");
if (ctx) {
if (multiPage.value) {
setPage(parseInt(canvas.id.split("-")[1]));
} else {
setPage(page.value);
}
await resetPages();
setTimeout(drawAllZones, 200);
}
};
@ -539,17 +536,16 @@ const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
signature.zones
.filter(
(z) =>
multiPage.value ||
(z.PDFPage.index + 1 === getCanvasId(canvas) && multiPage.value) ||
(z.PDFPage.index + 1 === page.value && !multiPage.value)
)
.map((z) => {
if (
hitSignature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
) {
if (hitSignature(z, [e.offsetX, e.offsetY], canvas)) {
if (userSignatureZone.value === null) {
selectZone(z, canvas);
} else {
if (userSignatureZone.value.index === z.index) {
console.log("going to sign zone: ", z.index);
sign();
}
}
@ -731,7 +727,7 @@ const confirmSign = () => {
const undoSign = async () => {
signature.zones = signature.zones.filter((z) => z.index !== null);
await setPage(page.value);
await resetPages();
setTimeout(drawAllZones, 200);
userSignatureZone.value = null;
adding.value = false;
@ -764,7 +760,7 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
width: BOX_WIDTH * zoom.value,
height: BOX_HEIGHT * zoom.value,
PDFPage: {
index: page.value - 1,
index: multiPage.value ? getCanvasId(canvas) - 1 : page.value - 1,
width: PDFPageWidth,
height: PDFPageHeight,
},
@ -772,7 +768,7 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
signature.zones.push(newZone);
userSignatureZone.value = newZone;
await setPage(page.value);
await resetPages();
setTimeout(drawAllZones, 200);
canvasEvent.value = "select";
adding.value = true;