From c2882b1079aa09ba3fdfe7d963612e9fcc7e6868 Mon Sep 17 00:00:00 2001 From: nobohan Date: Thu, 14 Nov 2024 21:48:50 +0100 Subject: [PATCH] FEATURE signature: show full pages - WIP --- .../public/vuejs/DocumentSignature/App.vue | 110 +++++++++++++++--- 1 file changed, 91 insertions(+), 19 deletions(-) diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue index 483db281f..c63a0a917 100644 --- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue +++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue @@ -57,6 +57,29 @@ ❯ +
❯ +
+ +
+
-
@@ -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 = ref(true); const modalOpen: Ref = ref(false); const loading: Ref = ref(false); const adding: Ref = 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 { 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; };