From bf61324c1d74d881f2080982f244d8b214b74737 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 4 Sep 2024 11:26:08 +0200
Subject: [PATCH] Signature: multi page viewer - WIP

---
 .../public/vuejs/DocumentSignature/App.vue    | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 114c08704..88043673a 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -75,12 +75,19 @@
       </div>
     </div>
   </div>
-  <div class="col-12 text-center">
-    <canvas class="m-auto" id="canvas"></canvas>
+  <div v-if="multiPage" class="col-12 text-center">
+    <canvas
+      v-for="p in pageCount"
+      :key="p"
+      class="m-auto"
+      :id="`canvas-${p}`"
+    ></canvas>
+  </div>
+  <div v-else class="col-12 text-center">
+    <canvas class="m-auto" :id="canvas"></canvas>
   </div>
 
   <div class="col-12 p-4" id="action-buttons" v-if="signedState !== 'signed'">
-
     <div class="row mb-3">
       <div class="col-12 d-flex justify-content-end">
         <div class="col-4 col-xl-3 gap-2 d-grid">
@@ -171,6 +178,7 @@ import {
 
 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);
@@ -198,13 +206,24 @@ const mountPdf = async (url: string) => {
   const loadingTask = pdfjsLib.getDocument(url);
   pdf = await loadingTask.promise;
   pageCount.value = pdf.numPages;
-  await setPage(1);
+  if (multiPage.value) {
+    await setAllPages();
+  } else {
+    await setPage(1);
+  }
 };
 
 const getRenderContext = (pdfPage: PDFPageProxy) => {
   const scale = 1;
   const viewport = pdfPage.getViewport({ scale });
-  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+  let canvas;
+  if (multiPage.value) {
+    canvas = document.getElementById(
+      `canvas-${pdfPage.pageNumber}`
+    ) as HTMLCanvasElement;
+  } else {
+    canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+  }
   const context = canvas.getContext("2d") as CanvasRenderingContext2D;
   canvas.height = viewport.height;
   canvas.width = viewport.width;
@@ -215,6 +234,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);
@@ -515,7 +537,7 @@ downloadAndOpen();
 </script>
 
 <style scoped lang="scss">
-#canvas {
+canvas {
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
 }
 div#action-buttons {