signature: scale the signature zone to the canvas dimension

src/Bundle/ChillDocStoreBundle/Resources/public/types.ts

@@ -62,3 +62,12 @@ export interface PostStoreObjectSignature {
     signature: string,
 }
 
+export interface SignatureZone {
+  page: number,
+  pageWidth: number,
+  pageHeight: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+}

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

@@ -8,6 +8,7 @@
 import { ref, Ref } from "vue";
 import VuePdfEmbed from "vue-pdf-embed";
 import "vue-pdf-embed/dist/style/index.css";
+import { SignatureZone } from "../../types";
 //import * as pdfjsLib from "pdfjs-dist";
 
 import {
@@ -34,9 +35,21 @@ const signature = {
       50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
     ],
   },
-  zones: [{ page: 1, pageWidth: 500, pageHeight: 800, x: 30, y: 50, width: 100, height: 50 }],
+  zones: [
+    {
+      page: 1,
+      pageWidth: 210,
+      pageHeight: 297,
+      x: 21, //from top-left corner
+      y: 50,
+      width: 80,
+      height: 50,
+    },
+  ],
 };
 
+let userSignatureZones = {} as SignatureZone;
+
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
 let pdfSource: Ref<string> = ref("");
@@ -50,33 +63,52 @@ async function download_and_open(): Promise<Blob> {
       new Uint8Array(signature.storedObject.iv)
     );
     pdfSource.value = URL.createObjectURL(raw);
-    setTimeout(() => draw_zones(), 2000); //TODO gestion async
+    setTimeout(() => add_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);
+  //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 canvas_click = (e: PointerEvent) => {
+const draw_zone = (
-  console.log('click event x and y', e.x, e.y)
+  zone: SignatureZone,
-}
+  ctx: CanvasRenderingContext2D,
+  canvasWidth: number,
+  canvasHeight: number
+) => {
+  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
+  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
+  ctx.fillRect(
+    scaleXToCanvas(zone.x),
+    scaleYToCanvas(zone.y),
+    scaleXToCanvas(zone.width),
+    scaleYToCanvas(zone.height)
+  );
+};
 
-const draw_zones = () => {
+const add_zones = () => {
-  const canvas = document.querySelectorAll('canvas')[0];
+  //TODO multipage: draw zones on page change?
-  console.log('canvas', canvas);
+  const canvas = document.querySelectorAll("canvas")[0];
   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
+    signature.zones.map(
-      z => ctx.fillRect(z.x, z.y, z.width, z.height)
+      //TODO gestion du numéro de la page
-    )
+      (z) => draw_zone(z, ctx, canvas.width, canvas.height)
+    );
   }
-  canvas.addEventListener('pointerup', (e: PointerEvent) => canvas_click(e), false);
+  canvas.addEventListener(
-}
+    "pointerup",
+    (e: PointerEvent) => canvas_click(e),
+    false
+  );
+};
 
 download_and_open();
 </script>