mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
FEATURE signature: show full pages - WIP
This commit is contained in:
parent
b9e515f4e6
commit
c2882b1079
@ -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;
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user