From 96dfddc55f920a9e0de3d65b8e9f51d6eccd115b Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 25 Nov 2024 15:18:23 +0100
Subject: [PATCH] FEATURE signature: show full pages - can add zone + fix
 hitSignature is canvas-aware

---
 .../public/vuejs/DocumentSignature/App.vue    | 62 +++++++++----------
 1 file changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index aa5e8b3ca..ec83cec67 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -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;