Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-28 04:56:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

FEATURE signature: show full pages - WIP

Browse Source
This commit is contained in:
nobohan 2024-11-14 21:48:50 +01:00 committed by Julien Fastré
parent b9e515f4e6
commit c2882b1079
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
1 changed files with 91 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,29 @@
❯
</button>
</template>
<template v-if="pageCount > 1">
<button
class="btn btn-light btn-xs p-1"
:disabled="page <= 1"
@click="turnPage(-1)"
>
❮
</button>
<span>{{ page }}/{{ pageCount }}</span>
<button
class="btn btn-light btn-xs p-1"
:disabled="page >= pageCount"
@click="turnPage(1)"
>
❯
</button>
<input
type="checkbox"
id="checkbox"
v-model="multiPage"
@change="toggleMultiPage"
/>
</template>
</div>
<div
v-if="signature.zones.length > 1"
@ -148,6 +171,12 @@
>
❯
</button>
<input
type="checkbox"
id="checkbox"
v-model="multiPage"
@change="toggleMultiPage"
/>
</template>
</div>
<div
@ -233,12 +262,24 @@
</div>
</div>
<div
v-if="multiPage"
class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
:class="{ onAddZone: canvasEvent === 'add' }"
>
<canvas
v-for="p in pageCount"
:key="p"
class="m-auto"
:id="`canvas-${p}`"
></canvas>
</div>
<div
v-else
class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
:class="{ onAddZone: canvasEvent === 'add' }"
>
<canvas class="m-auto" id="canvas"></canvas>
</div>
<div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
<div class="row">
<div class="col d-flex">
@ -298,6 +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 modalOpen: Ref<boolean> = ref(false);
const loading: Ref<boolean> = ref(false);
const adding: Ref<boolean> = ref(false);
@ -363,24 +405,34 @@ declare global {
const $toast = useToast();
const signature = window.signature;
console.log("signature", signature);
const setZoomLevel = (zoomLevel: string) => {
zoom.value = Number.parseFloat(zoomLevel);
setPage(page.value);
setTimeout(() => drawAllZones(page.value), 200);
setTimeout(drawAllZones, 200);
};
const mountPdf = async (doc: ArrayBuffer) => {
const loadingTask = pdfjsLib.getDocument(doc);
pdf = await loadingTask.promise;
pageCount.value = pdf.numPages;
await setPage(page.value);
if (multiPage.value) {
await setAllPages();
} else {
await setPage(1);
}
};
const getCanvas = (page: number) =>
multiPage.value
? (document.getElementById(`canvas-${page}`) as HTMLCanvasElement)
: (document.querySelectorAll("canvas")[0] as HTMLCanvasElement);
const getRenderContext = (pdfPage: PDFPageProxy) => {
const scale = 1 * zoom.value;
const viewport = pdfPage.getViewport({ scale });
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
const canvas = getCanvas(pdfPage.pageNumber);
const context = canvas.getContext("2d") as CanvasRenderingContext2D;
canvas.height = viewport.height;
canvas.width = viewport.width;
@ -391,6 +443,9 @@ const getRenderContext = (pdfPage: PDFPageProxy) => {
};
};
const setAllPages = async () =>
Array.from(Array(pageCount.value).keys()).map((p) => setPage(p + 1));
const setPage = async (page: number) => {
const pdfPage = await pdf.getPage(page);
const renderContext = getRenderContext(pdfPage);
@ -415,9 +470,19 @@ async function downloadAndOpen(): Promise<Blob> {
const initPdf = () => {
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
canvas.addEventListener("pointerup", canvasClick, false);
setTimeout(() => drawAllZones(page.value), 800);
setTimeout(drawAllZones, 800);
};
async function toggleMultiPage() {
if (multiPage.value) {
await setAllPages();
setTimeout(drawAllZones, 200);
} else {
await setPage(1);
setTimeout(drawAllZones, 200);
}
}
const scaleXToCanvas = (x: number, canvasWidth: number, PDFWidth: number) =>
Math.round((x * canvasWidth) / PDFWidth);
@ -445,7 +510,7 @@ const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
const ctx = canvas.getContext("2d");
if (ctx) {
setPage(page.value);
setTimeout(() => drawAllZones(page.value), 200);
setTimeout(drawAllZones, 200);
}
};
@ -467,7 +532,7 @@ const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
});
const canvasClick = (e: PointerEvent) => {
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement; //TODO change canvas as a function of multiOption
canvasEvent.value === "select"
? selectZoneEvent(e, canvas)
: addZoneEvent(e, canvas);
@ -477,7 +542,7 @@ const turnPage = async (upOrDown: number) => {
//userSignatureZone.value = null; // desactivate the reset of the zone when turning page
page.value = page.value + upOrDown;
await setPage(page.value);
setTimeout(() => drawAllZones(page.value), 200);
setTimeout(drawAllZones, 200);
};
const turnSignature = async (upOrDown: number) => {
@ -540,19 +605,26 @@ const drawZone = (
}
};
const drawAllZones = (page: number) => {
const canvas = document.querySelectorAll("canvas")[0];
const ctx = canvas.getContext("2d");
if (ctx && signedState.value !== "signed") {
const drawAllZones = () => {
if (signedState.value !== "signed") {
signature.zones
.filter((z) => z.PDFPage.index + 1 === page)
.filter(
(z) =>
multiPage.value ||
(z.PDFPage.index + 1 === page.value && !multiPage.value)
)
.map((z) => {
if (userSignatureZone.value) {
if (userSignatureZone.value?.index === z.index) {
console.log('drawAllZones: z is ', z)
const canvas = getCanvas(z.PDFPage.index + 1);
const ctx = canvas.getContext("2d");
if (ctx) {
if (userSignatureZone.value) {
if (userSignatureZone.value?.index === z.index) {
drawZone(z, ctx, canvas.width, canvas.height);
}
} else {
drawZone(z, ctx, canvas.width, canvas.height);
}
} else {
drawZone(z, ctx, canvas.width, canvas.height);
}
});
}
@ -639,7 +711,7 @@ const confirmSign = () => {
const undoSign = async () => {
signature.zones = signature.zones.filter((z) => z.index !== null);
await setPage(page.value);
setTimeout(() => drawAllZones(page.value), 200);
setTimeout(drawAllZones, 200);
userSignatureZone.value = null;
adding.value = false;
canvasEvent.value = "select";
@ -680,7 +752,7 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
userSignatureZone.value = newZone;
await setPage(page.value);
setTimeout(() => drawAllZones(page.value), 200);
setTimeout(drawAllZones, 200);
canvasEvent.value = "select";
adding.value = true;
};