signature: manage multi-pages doc

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

@@ -1,6 +1,12 @@
 <template>
-  <div>hello {{ msg }}</div>
-  <VuePdfEmbed :source="pdfSource" />
+  <div>
+    <span>
+      <button :disabled="page <= 1" @click="unTurnPage">❮</button>
+      {{ page }} / {{ pageCount }}
+      <button :disabled="page >= pageCount" @click="turnPage">❯</button>
+    </span>
+  </div>
+  <VuePdfEmbed :source="pdfSource" :page="page"/>
   <!-- <canvas id="canvas"></canvas> -->
 </template>
 
@@ -16,23 +22,39 @@ import {
   download_and_decrypt_doc,
 } from "../StoredObjectButton/helpers";
 
-const msg: Ref<string> = ref("world !");
+const page: Ref<number> = ref(1);
+const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, can be done with pdfjs (https://stackoverflow.com/questions/10253669/how-to-get-the-number-of-pages-of-a-pdf-uploaded-by-user)
+let userSignatureZones = {} as SignatureZone;
+let pdfSource: Ref<string> = ref("");
 
 //console.log('signature', window.signature);
 
 const signature = {
   id: 1,
+  // storedObject: {
+  //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+  //   keyInfos: {
+  //     alg: "A256CBC",
+  //     ext: true,
+  //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+  //     key_ops: ["encrypt", "decrypt"],
+  //     kty: "oct",
+  //   },
+  //   iv: [
+  //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+  //   ],
+  // },
   storedObject: {
-    filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+    filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
     keyInfos: {
       alg: "A256CBC",
       ext: true,
-      k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+      k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
       key_ops: ["encrypt", "decrypt"],
       kty: "oct",
     },
     iv: [
-      50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+      254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
     ],
   },
   zones: [
@@ -45,15 +67,20 @@ const signature = {
       width: 80,
       height: 50,
     },
+    {
+      page: 3,
+      pageWidth: 210,
+      pageHeight: 297,
+      x: 60, //from top-left corner
+      y: 20,
+      width: 80,
+      height: 50,
+    },
   ],
 };
 
-let userSignatureZones = {} as SignatureZone;
-
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
-let pdfSource: Ref<string> = ref("");
-
 async function download_and_open(): Promise<Blob> {
   let raw;
   try {
@@ -63,19 +90,40 @@ async function download_and_open(): Promise<Blob> {
       new Uint8Array(signature.storedObject.iv)
     );
     pdfSource.value = URL.createObjectURL(raw);
-    setTimeout(() => add_zones(), 2000); //TODO gestion async
+    setTimeout(() => init_pdf(), 2000); //TODO gestion async
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
   return raw;
 }
+
+const init_pdf = () => {
+  const canvas = document.querySelectorAll("canvas")[0];
+  canvas.addEventListener(
+    "pointerup",
+    (e: PointerEvent) => canvas_click(e),
+    false
+  );
+  add_zones();
+};
+
 const canvas_click = (e: PointerEvent) => {
   console.log("click event x and y", e.x, e.y);
   //TODO what to do with this: 1) draw the signature if it falls within a zone, 2) output the zone
   userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
 };
 
+const turnPage = () => {
+  page.value = page.value + 1;
+  setTimeout(() => add_zones(), 200);
+};
+
+const unTurnPage = () => {
+  page.value = page.value - 1;
+  setTimeout(() => add_zones(), 200);
+};
+
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
@@ -93,21 +141,16 @@ const draw_zone = (
 };
 
 const add_zones = () => {
-  //TODO multipage: draw zones on page change?
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
     ctx.fillStyle = "green";
-    signature.zones.map(
-      //TODO gestion du numéro de la page
-      (z) => draw_zone(z, ctx, canvas.width, canvas.height)
-    );
+    signature.zones.map((z) => {
+      if (z.page === page.value) {
+        draw_zone(z, ctx, canvas.width, canvas.height);
+      }
+    });
   }
-  canvas.addEventListener(
-    "pointerup",
-    (e: PointerEvent) => canvas_click(e),
-    false
-  );
 };
 
 download_and_open();