signature: POC of drawing signature zones and click event on canvas

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

@@ -1,12 +1,14 @@
 <template>
   <div>hello {{ msg }}</div>
   <VuePdfEmbed :source="pdfSource" />
+  <!-- <canvas id="canvas"></canvas> -->
 </template>
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
 import VuePdfEmbed from "vue-pdf-embed";
 import "vue-pdf-embed/dist/style/index.css";
+//import * as pdfjsLib from "pdfjs-dist";
 
 import {
   build_download_info_link,
@@ -20,20 +22,19 @@ const msg: Ref<string> = ref("world !");
 const signature = {
   id: 1,
   storedObject: {
-    filename: "V2DZStOWtonw1TiKxzVPDRzlS4YO",
+    filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
     keyInfos: {
       alg: "A256CBC",
       ext: true,
-      k: "x0vaQO0n3QZnipLEmddF3MOF_5_QYnS4g67n0AwZ6YA",
+      k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
       key_ops: ["encrypt", "decrypt"],
       kty: "oct",
     },
     iv: [
-      150, 175, 71, 136, 62, 123, 230, 141, 72, 204, 116, 110, 139, 22, 246,
-      114,
+      50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
     ],
   },
-  zones: [{ page: 1, origin: [0, 0], x: 10, y: 10 }],
+  zones: [{ page: 1, pageWidth: 500, pageHeight: 800, x: 30, y: 50, width: 100, height: 50 }],
 };
 
 const urlInfo = build_download_info_link(signature.storedObject.filename);
@@ -48,13 +49,33 @@ async function download_and_open(): Promise<Blob> {
       signature.storedObject.keyInfos,
       new Uint8Array(signature.storedObject.iv)
     );
-    //pdfSource.value = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
     pdfSource.value = URL.createObjectURL(raw);
+    setTimeout(() => draw_zones(), 2000); //TODO gestion async
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
   return raw;
+};
+
+const canvas_click = (e: PointerEvent) => {
+  console.log('click event x and y', e.x, e.y)
+}
+
+const draw_zones = () => {
+  const canvas = document.querySelectorAll('canvas')[0];
+  console.log('canvas', canvas);
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    console.log(canvas.height)
+    console.log(canvas.width)
+    //TODO the zone where the signature should go will depend on the canvas dimensions! see page.getViewport({ scale });
+    ctx.fillStyle = "green";
+    signature.zones.map(//TODO gestion du numéro de la page
+      z => ctx.fillRect(z.x, z.y, z.width, z.height)
+    )
+  }
+  canvas.addEventListener('pointerup', (e: PointerEvent) => canvas_click(e), false);
 }
 
 download_and_open();