FEATURE signature: show full pages - WIP

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

@@ -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,13 +605,19 @@ const drawZone = (
   }
 };
 
-const drawAllZones = (page: number) => {
+const drawAllZones = () => {
-  const canvas = document.querySelectorAll("canvas")[0];
+  if (signedState.value !== "signed") {
-  const ctx = canvas.getContext("2d");
-  if (ctx && 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) => {
+        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);
@@ -554,6 +625,7 @@ const drawAllZones = (page: number) => {
           } 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;
 };