FEATURE signature: show full pages - can select zone

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue

@@ -467,9 +467,24 @@ async function downloadAndOpen(): Promise<Blob> {
   return raw;
 }
 
+const addCanvasEvents = () => {
+  if (multiPage.value) {
+    Array.from(Array(pageCount.value).keys()).map((p) => {
+      const canvas = getCanvas(p + 1);
+      canvas.addEventListener(
+        "pointerup",
+        (e) => canvasClick(e, canvas),
+        false
+      );
+    });
+  } else {
+    const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+    canvas.addEventListener("pointerup", (e) => canvasClick(e, canvas), false);
+  }
+};
+
 const initPdf = () => {
-  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
-  canvas.addEventListener("pointerup", canvasClick, false);
+  addCanvasEvents();
   setTimeout(drawAllZones, 800);
 };
 
@@ -477,9 +492,11 @@ async function toggleMultiPage() {
   if (multiPage.value) {
     await setAllPages();
     setTimeout(drawAllZones, 200);
+    addCanvasEvents();
   } else {
-    await setPage(1);
+    await setPage(page.value);
     setTimeout(drawAllZones, 200);
+    addCanvasEvents();
   }
 }
 
@@ -509,14 +526,22 @@ const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
   userSignatureZone.value = z;
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    setPage(page.value);
+    if (multiPage.value) {
+      setPage(parseInt(canvas.id.split("-")[1]));
+    } else {
+      setPage(page.value);
+    }
     setTimeout(drawAllZones, 200);
   }
 };
 
 const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   signature.zones
-    .filter((z) => z.PDFPage.index + 1 === page.value)
+    .filter(
+      (z) =>
+        multiPage.value ||
+        (z.PDFPage.index + 1 === page.value && !multiPage.value)
+    )
     .map((z) => {
       if (
         hitSignature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
@@ -531,12 +556,10 @@ const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
       }
     });
 
-const canvasClick = (e: PointerEvent) => {
-  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement; //TODO change canvas as a function of multiOption
+const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   canvasEvent.value === "select"
     ? selectZoneEvent(e, canvas)
     : addZoneEvent(e, canvas);
-};
 
 const turnPage = async (upOrDown: number) => {
   //userSignatureZone.value = null; // desactivate the reset of the zone when turning page
@@ -558,8 +581,7 @@ const turnSignature = async (upOrDown: number) => {
   let currentZone = signature.zones[zoneIndex];
   if (currentZone) {
     page.value = currentZone.PDFPage.index + 1;
-    userSignatureZone.value = currentZone;
-    const canvas = document.querySelectorAll("canvas")[0];
+    const canvas = getCanvas(currentZone.PDFPage.index + 1);
     selectZone(currentZone, canvas);
   }
 };
@@ -614,7 +636,6 @@ const drawAllZones = () => {
           (z.PDFPage.index + 1 === page.value && !multiPage.value)
       )
       .map((z) => {
-        console.log('drawAllZones: z is ', z)
         const canvas = getCanvas(z.PDFPage.index + 1);
         const ctx = canvas.getContext("2d");
         if (ctx) {
@@ -767,14 +788,14 @@ init();
 </script>
 
 <style scoped lang="scss">
-#canvas {
+canvas {
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
 }
 
 .onAddZone {
   cursor: not-allowed;
 
-  #canvas {
+  canvas {
     cursor: copy;
   }
 }