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

Signature: keep selected zone when turning pages

Browse Source
This commit is contained in:
nobohan 2024-09-12 11:31:31 +02:00
parent f8a986d59b
commit 3c987e0b8d
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -229,7 +229,7 @@ async function downloadAndOpen(): Promise<Blob> {
const initPdf = () => { const initPdf = () => {
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement; const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
canvas.addEventListener("pointerup", canvasClick, false); canvas.addEventListener("pointerup", canvasClick, false);
setTimeout(() => addZones(page.value), 800); setTimeout(() => drawAllZones(page.value), 800);
}; };
const scaleXToCanvas = (x: number, canvasWidth: number, PDFWidth: number) => const scaleXToCanvas = (x: number, canvasWidth: number, PDFWidth: number) =>
@ -259,11 +259,11 @@ const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (ctx) { if (ctx) {
setPage(page.value); setPage(page.value);
setTimeout(() => drawZone(z, ctx, canvas.width, canvas.height), 200); setTimeout(() => drawAllZones(page.value), 200);
} }
}; };
const selectZoneOnCanvas = (e: PointerEvent, canvas: HTMLCanvasElement) => const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
signature.zones signature.zones
.filter((z) => z.PDFPage.index + 1 === page.value) .filter((z) => z.PDFPage.index + 1 === page.value)
.map((z) => { .map((z) => {
@ -283,15 +283,15 @@ const selectZoneOnCanvas = (e: PointerEvent, canvas: HTMLCanvasElement) =>
const canvasClick = (e: PointerEvent) => { const canvasClick = (e: PointerEvent) => {
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement; const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
canvasEvent.value === "select" canvasEvent.value === "select"
? selectZoneOnCanvas(e, canvas) ? selectZoneEvent(e, canvas)
: addZoneOnCanvas(e, canvas); : addZoneEvent(e, canvas);
}; };
const turnPage = async (upOrDown: number) => { const turnPage = async (upOrDown: number) => {
userSignatureZone.value = null; //userSignatureZone.value = null; // desactivate the reset of the zone when turning page
page.value = page.value + upOrDown; page.value = page.value + upOrDown;
await setPage(page.value); await setPage(page.value);
setTimeout(() => addZones(page.value), 200); setTimeout(() => drawAllZones(page.value), 200);
}; };
const turnSignature = async (upOrDown: number) => { const turnSignature = async (upOrDown: number) => {
@ -351,19 +351,24 @@ const drawZone = (
ctx.fillStyle = unselectedBlue; ctx.fillStyle = unselectedBlue;
ctx.fillText("Choisir cette", xText, yText - 12); ctx.fillText("Choisir cette", xText, yText - 12);
ctx.fillText("zone de signature", xText, yText + 12); ctx.fillText("zone de signature", xText, yText + 12);
// ctx.strokeStyle = "#c6c6c6"; // halo
// ctx.strokeText("Choisir cette", xText, yText - 12);
// ctx.strokeText("zone de signature", xText, yText + 12);
} }
}; };
const addZones = (page: number) => { const drawAllZones = (page: number) => {
const canvas = document.querySelectorAll("canvas")[0]; const canvas = document.querySelectorAll("canvas")[0];
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (ctx) { if (ctx) {
signature.zones signature.zones
.filter((z) => z.PDFPage.index + 1 === page) .filter((z) => z.PDFPage.index + 1 === page)
.map((z) => drawZone(z, ctx, canvas.width, canvas.height)); .map((z) => {
if (userSignatureZone.value) {
if (userSignatureZone.value?.index === z.index) {
drawZone(z, ctx, canvas.width, canvas.height);
}
} else {
drawZone(z, ctx, canvas.width, canvas.height);
}
});
} }
}; };
@ -447,7 +452,7 @@ const confirmSign = () => {
const undoSign = async () => { const undoSign = async () => {
signature.zones = signature.zones.filter((z) => z.index !== null); signature.zones = signature.zones.filter((z) => z.index !== null);
await setPage(page.value); await setPage(page.value);
setTimeout(() => addZones(page.value), 200); setTimeout(() => drawAllZones(page.value), 200);
userSignatureZone.value = null; userSignatureZone.value = null;
adding.value = false; adding.value = false;
}; };
@ -458,7 +463,8 @@ const toggleAddZone = () => {
: (canvasEvent.value = "select"); : (canvasEvent.value = "select");
}; };
const addZoneOnCanvas = (e: PointerEvent, canvas: HTMLCanvasElement) => { const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
userSignatureZone.value = null;
const BOX_WIDTH = 180; const BOX_WIDTH = 180;
const BOX_HEIGHT = 90; const BOX_HEIGHT = 90;
const PDFPageHeight = canvas.height; const PDFPageHeight = canvas.height;
@ -485,7 +491,8 @@ const addZoneOnCanvas = (e: PointerEvent, canvas: HTMLCanvasElement) => {
}; };
signature.zones.push(newZone); signature.zones.push(newZone);
setTimeout(() => addZones(page.value), 200); await setPage(page.value);
setTimeout(() => drawAllZones(page.value), 200);
canvasEvent.value = "select"; canvasEvent.value = "select";
adding.value = true; adding.value = true;
}; };
@ -494,7 +501,7 @@ const removeNewZone = async () => {
signature.zones = signature.zones.filter((z) => z.index !== null); signature.zones = signature.zones.filter((z) => z.index !== null);
userSignatureZone.value = null; userSignatureZone.value = null;
await setPage(page.value); await setPage(page.value);
setTimeout(() => addZones(page.value), 200); setTimeout(() => drawAllZones(page.value), 200);
canvasEvent.value = "select"; canvasEvent.value = "select";
adding.value = false; adding.value = false;
}; };