add a zoom button for zooming to the document

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

@@ -130,3 +130,12 @@ export interface CheckSignature {
 }
 
 export type CanvasEvent = "select" | "add";
+
+export interface ZoomLevel {
+    id: number;
+    zoom: number;
+    label: {
+        fr?: string,
+        nl?: string
+    };
+}

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

@@ -29,6 +29,17 @@
   <div class="col-12 m-auto">
     <div class="row justify-content-center border-bottom pdf-tools d-md-none">
       <div v-if="pageCount > 1" class="col text-center turn-page">
+        <select
+          class="form-select form-select-sm"
+          id="zoomSelect"
+          v-model="zoomLevel"
+          @change="setZoomLevel(zoomLevel)"
+        >
+          <option value="" selected disabled>Zoom</option>
+          <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
+            {{ z.label.fr }}
+          </option>
+        </select>
         <button
           class="btn btn-light btn-sm"
           :disabled="page <= 1"
@@ -95,7 +106,18 @@
     <div
       class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
     >
-      <div v-if="pageCount > 1" class="col-2 text-center turn-page p-0">
+      <div v-if="pageCount > 1" class="col-3 text-center turn-page">
+        <select
+          class="form-select form-select-sm"
+          id="zoomSelect"
+          v-model="zoomLevel"
+          @change="setZoomLevel(zoomLevel)"
+        >
+          <option value="" selected disabled>Zoom</option>
+          <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
+            {{ z.label.fr }}
+          </option>
+        </select>
         <button
           class="btn btn-light btn-sm"
           :disabled="page <= 1"
@@ -235,6 +257,7 @@ import {
   Signature,
   SignatureZone,
   SignedState,
+  ZoomLevel,
 } from "../../types";
 import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 import * as pdfjsLib from "pdfjs-dist";
@@ -262,6 +285,45 @@ const canvasEvent: Ref<CanvasEvent> = ref("select");
 const signedState: Ref<SignedState> = ref("pending");
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
+const zoom: Ref<number> = ref(1);
+const zoomLevel = '';
+const zoomLevels: Ref<ZoomLevel[]> = ref([
+  {
+    id: 0,
+    zoom: 0.75,
+    label: {
+      fr: "75%",
+    },
+  },
+  {
+    id: 1,
+    zoom: zoom.value,
+    label: {
+      fr: "100%",
+    },
+  },
+  {
+    id: 2,
+    zoom: 1.25,
+    label: {
+      fr: "125%",
+    },
+  },
+  {
+    id: 3,
+    zoom: 1.5,
+    label: {
+      fr: "150%",
+    },
+  },
+  {
+    id: 4,
+    zoom: 2,
+    label: {
+      fr: "200%",
+    },
+  },
+]);
 let userSignatureZone: Ref<null | SignatureZone> = ref(null);
 let pdf = {} as PDFDocumentProxy;
 
@@ -275,7 +337,11 @@ const $toast = useToast();
 
 const signature = window.signature;
 
-console.log(signature);
+const setZoomLevel = (zoomLevel: number) => {
+  zoom.value = zoomLevel;
+  setPage(page.value);
+  setTimeout(() => drawAllZones(page.value), 200);
+};
 
 const mountPdf = async (doc: ArrayBuffer) => {
   const loadingTask = pdfjsLib.getDocument(doc);
@@ -285,7 +351,7 @@ const mountPdf = async (doc: ArrayBuffer) => {
 };
 
 const getRenderContext = (pdfPage: PDFPageProxy) => {
-  const scale = 1;
+  const scale = 1 * zoom.value;
   const viewport = pdfPage.getViewport({ scale });
   const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   const context = canvas.getContext("2d") as CanvasRenderingContext2D;
@@ -343,12 +409,12 @@ const hitSignature = (
   scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) < xy[0] &&
   xy[0] <
     scaleXToCanvas(zone.x + zone.width, canvasWidth, zone.PDFPage.width) &&
-  zone.PDFPage.height -
+  zone.PDFPage.height * zoom.value -
     scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) <
     xy[1] &&
   xy[1] <
     scaleYToCanvas(zone.height - zone.y, canvasHeight, zone.PDFPage.height) +
-      zone.PDFPage.height;
+      zone.PDFPage.height * zoom.value;
 
 const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
   userSignatureZone.value = z;
@@ -425,19 +491,19 @@ const drawZone = (
   ctx.lineJoin = "bevel";
   ctx.strokeRect(
     scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width),
-    zone.PDFPage.height -
+    zone.PDFPage.height * zoom.value -
       scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height),
     scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width),
     scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height)
   );
-  ctx.font = "bold 16px serif";
+  ctx.font = `bold ${16 * zoom.value}px serif`;
   ctx.textAlign = "center";
   ctx.fillStyle = "black";
   const xText =
     scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) +
     scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width) / 2;
   const yText =
-    zone.PDFPage.height -
+    zone.PDFPage.height * zoom.value -
     scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) +
     scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height) / 2;
   if (userSignatureZone.value?.index === zone.index) {
@@ -445,8 +511,8 @@ const drawZone = (
     ctx.fillText("Signer ici", xText, yText);
   } else {
     ctx.fillStyle = unselectedBlue;
-    ctx.fillText("Choisir cette", xText, yText - 12);
+    ctx.fillText("Choisir cette", xText, yText - 12 * zoom.value);
-    ctx.fillText("zone de signature", xText, yText + 12);
+    ctx.fillText("zone de signature", xText, yText + 12 * zoom.value);
   }
 };
 
@@ -616,16 +682,27 @@ div#action-buttons {
 }
 div.pdf-tools {
   background-color: #f3f3f3;
-  font-size: 0.8rem;
+  font-size: 0.6rem;
+  button {
+    font-size: 0.75rem!important;
+  }
   @media (min-width: 1400px) {
     // background: none;
     // border: none !important;
   }
 }
 div.turn-page {
+  display: flex;
   span {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
-    margin: 0 0.4rem;
+    margin: auto 0.4rem;
+  }
+  select {
+    width: 3.5rem;
+    @media (min-width: 850px) {
+      width: 5rem;
+    }
+    font-size: 0.75rem;
   }
 }
 div.signature-modal-body {