From 3bc6595f5833d15150ecfc915b93310436262c20 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Sat, 26 Oct 2024 12:09:00 +0200
Subject: [PATCH 1/5] add a zoom button for zooming to the document

---
 .../Resources/public/types.ts                 |   9 ++
 .../public/vuejs/DocumentSignature/App.vue    | 103 +++++++++++++++---
 2 files changed, 99 insertions(+), 13 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index 2a998fb63..ba7369661 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/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
+    };
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index a7c222cce..3572aa323 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/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("zone de signature", xText, yText + 12);
+    ctx.fillText("Choisir cette", xText, yText - 12 * zoom.value);
+    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;
-    margin: 0 0.4rem;
+    font-size: 0.75rem;
+    margin: auto 0.4rem;
+  }
+  select {
+    width: 3.5rem;
+    @media (min-width: 850px) {
+      width: 5rem;
+    }
+    font-size: 0.75rem;
   }
 }
 div.signature-modal-body {

From 5259ea71a1ea3092c52b80ed5ede52820b45f41e Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 30 Oct 2024 10:29:08 +0100
Subject: [PATCH 2/5] signature vue app: improve responsive design

---
 .../public/vuejs/DocumentSignature/App.vue    | 66 +++++++++----------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 3572aa323..2b2b1e31f 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -41,7 +41,7 @@
           </option>
         </select>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page <= 1"
           @click="turnPage(-1)"
         >
@@ -49,14 +49,17 @@
         </button>
         <span>{{ page }}/{{ pageCount }}</span>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page >= pageCount"
           @click="turnPage(1)"
         >
           ❯
         </button>
       </div>
-      <div v-if="signature.zones.length > 1" class="col-3 p-0">
+      <div
+        v-if="signature.zones.length > 1"
+        class="col-5 p-0 text-center turnSignature"
+      >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
           class="btn btn-light btn-sm"
@@ -64,8 +67,7 @@
         >
           {{ $t("last_zone") }}
         </button>
-      </div>
-      <div v-if="signature.zones.length > 1" class="col-3 p-0">
+        <span>|</span>
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -74,7 +76,7 @@
           {{ $t("next_zone") }}
         </button>
       </div>
-      <div class="col text-end p-0">
+      <div class="col text-end" v-if="signedState !== 'signed'">
         <button
           class="btn btn-misc btn-sm"
           :hidden="!userSignatureZone"
@@ -92,8 +94,6 @@
         >
           {{ $t("cancel") }}
         </button>
-      </div>
-      <div class="col-1" v-if="signedState !== 'signed'">
         <button
           class="btn btn-create btn-sm"
           :class="{ active: canvasEvent === 'add' }"
@@ -106,7 +106,7 @@
     <div
       class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
     >
-      <div v-if="pageCount > 1" class="col-3 text-center turn-page">
+      <div v-if="pageCount > 1" class="col-3 text-center turn-page ps-3">
         <select
           class="form-select form-select-sm"
           id="zoomSelect"
@@ -119,7 +119,7 @@
           </option>
         </select>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page <= 1"
           @click="turnPage(-1)"
         >
@@ -127,7 +127,7 @@
         </button>
         <span>{{ page }} / {{ pageCount }}</span>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page >= pageCount"
           @click="turnPage(1)"
         >
@@ -136,7 +136,7 @@
       </div>
       <div
         v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-end d-xl-none"
+        class="col-4 d-xl-none text-center turnSignature p-0"
       >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
@@ -145,11 +145,7 @@
         >
           {{ $t("last_zone") }}
         </button>
-      </div>
-      <div
-        v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-start d-xl-none"
-      >
+        <span>|</span>
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -160,7 +156,7 @@
       </div>
       <div
         v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-end d-none d-xl-flex p-0"
+        class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
       >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
@@ -169,11 +165,7 @@
         >
           {{ $t("last_sign_zone") }}
         </button>
-      </div>
-      <div
-        v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-start d-none d-xl-flex p-0"
-      >
+        <span>|</span>
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -182,7 +174,7 @@
           {{ $t("next_sign_zone") }}
         </button>
       </div>
-      <div class="col text-end p-0" v-if="signedState !== 'signed'">
+      <div class="col text-end" v-if="signedState !== 'signed'">
         <button
           class="btn btn-misc btn-sm"
           :hidden="!userSignatureZone"
@@ -199,11 +191,6 @@
         >
           {{ $t("cancel") }}
         </button>
-      </div>
-      <div
-        class="col text-end p-0 pe-2 pe-xxl-4"
-        v-if="signedState !== 'signed'"
-      >
         <button
           class="btn btn-create btn-sm"
           :class="{ active: canvasEvent === 'add' }"
@@ -286,7 +273,7 @@ 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 zoomLevel = "";
 const zoomLevels: Ref<ZoomLevel[]> = ref([
   {
     id: 0,
@@ -323,6 +310,13 @@ const zoomLevels: Ref<ZoomLevel[]> = ref([
       fr: "200%",
     },
   },
+  {
+    id: 5,
+    zoom: 3,
+    label: {
+      fr: "300%",
+    },
+  },
 ]);
 let userSignatureZone: Ref<null | SignatureZone> = ref(null);
 let pdf = {} as PDFDocumentProxy;
@@ -684,7 +678,12 @@ div.pdf-tools {
   background-color: #f3f3f3;
   font-size: 0.6rem;
   button {
-    font-size: 0.75rem!important;
+    font-size: 0.75rem !important;
+  }
+  div.turnSignature {
+    span {
+      font-size: 1rem;
+    }
   }
   @media (min-width: 1400px) {
     // background: none;
@@ -698,10 +697,7 @@ div.turn-page {
     margin: auto 0.4rem;
   }
   select {
-    width: 3.5rem;
-    @media (min-width: 850px) {
-      width: 5rem;
-    }
+    width: 5rem;
     font-size: 0.75rem;
   }
 }

From 76458cf375081ee7de7fead992a55fd2dcb9813e Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 30 Oct 2024 10:38:34 +0100
Subject: [PATCH 3/5] signature: cancel button at the left + changed style

---
 .../public/vuejs/DocumentSignature/App.vue    | 26 +++++++++----------
 .../public/vuejs/DocumentSignature/index.ts   |  1 -
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 2b2b1e31f..7b62f3fa7 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -208,7 +208,19 @@
 
   <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
     <div class="row">
-      <div class="col-4" v-if="signedState !== 'signed'">
+      <div class="col d-flex">
+        <a
+          class="btn btn-cancel"
+          v-if="signedState !== 'signed'"
+          :href="getReturnPath()"
+        >
+          {{ $t("cancel") }}
+        </a>
+        <a class="btn btn-misc" v-else :href="getReturnPath()">
+          {{ $t("return") }}
+        </a>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
         <button
           class="btn btn-action me-2"
           :disabled="!userSignatureZone"
@@ -218,18 +230,6 @@
         </button>
       </div>
       <div class="col-4" v-else></div>
-      <div class="col-8 d-flex justify-content-end">
-        <a
-          class="btn btn-delete"
-          v-if="signedState !== 'signed'"
-          :href="getReturnPath()"
-        >
-          {{ $t("cancel_signing") }}
-        </a>
-        <a class="btn btn-misc" v-else :href="getReturnPath()">
-          {{ $t("return") }}
-        </a>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index c6ae996b2..49b0f6f79 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -12,7 +12,6 @@ const appMessages = {
         sign: 'Signer',
         choose_another_signature: 'Choisir une autre zone',
         cancel: 'Annuler',
-        cancel_signing: 'Refuser de signer',
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
         add_sign_zone: 'Ajouter une zone de signature',

From 5447ad29614be43d4d701d82af46cd8e98fb7b05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 6 Nov 2024 19:31:01 +0100
Subject: [PATCH 4/5] Fix casting zoom level from string to floatInt

Changed the type of the zoomLevel parameter from number to string and updated the assignment to parse the zoomLevel as a float. This ensures that the zoom functionality properly handles string inputs by converting them to numerical values.
---
 .../Resources/public/vuejs/DocumentSignature/App.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 7b62f3fa7..52c33b0f8 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -331,8 +331,8 @@ const $toast = useToast();
 
 const signature = window.signature;
 
-const setZoomLevel = (zoomLevel: number) => {
-  zoom.value = zoomLevel;
+const setZoomLevel = (zoomLevel: string) => {
+  zoom.value = Number.parseFloat(zoomLevel);
   setPage(page.value);
   setTimeout(() => drawAllZones(page.value), 200);
 };

From b2f6dbbe3014956207cfca4b42f0a4793a8d4229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 6 Nov 2024 19:32:12 +0100
Subject: [PATCH 5/5] Show the zoom level also if there is only one page in the
 document

---
 .../public/vuejs/DocumentSignature/App.vue    | 68 ++++++++++---------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 52c33b0f8..b223882b2 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -28,7 +28,7 @@
   </teleport>
   <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">
+      <div class="col text-center turn-page">
         <select
           class="form-select form-select-sm"
           id="zoomSelect"
@@ -40,21 +40,23 @@
             {{ z.label.fr }}
           </option>
         </select>
-        <button
-          class="btn btn-light btn-xs p-1"
-          :disabled="page <= 1"
-          @click="turnPage(-1)"
-        >
-          ❮
-        </button>
-        <span>{{ page }}/{{ pageCount }}</span>
-        <button
-          class="btn btn-light btn-xs p-1"
-          :disabled="page >= pageCount"
-          @click="turnPage(1)"
-        >
-          ❯
-        </button>
+          <template v-if="pageCount > 1">
+            <button
+                class="btn btn-light btn-xs p-1"
+                :disabled="page <= 1"
+                @click="turnPage(-1)"
+            >
+                ❮
+            </button>
+            <span>{{ page }}/{{ pageCount }}</span>
+            <button
+                class="btn btn-light btn-xs p-1"
+                :disabled="page >= pageCount"
+                @click="turnPage(1)"
+            >
+                ❯
+            </button>
+          </template>
       </div>
       <div
         v-if="signature.zones.length > 1"
@@ -106,7 +108,7 @@
     <div
       class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
     >
-      <div v-if="pageCount > 1" class="col-3 text-center turn-page ps-3">
+      <div class="col-3 text-center turn-page ps-3">
         <select
           class="form-select form-select-sm"
           id="zoomSelect"
@@ -118,21 +120,23 @@
             {{ z.label.fr }}
           </option>
         </select>
-        <button
-          class="btn btn-light btn-xs p-1"
-          :disabled="page <= 1"
-          @click="turnPage(-1)"
-        >
-          ❮
-        </button>
-        <span>{{ page }} / {{ pageCount }}</span>
-        <button
-          class="btn btn-light btn-xs p-1"
-          :disabled="page >= pageCount"
-          @click="turnPage(1)"
-        >
-          ❯
-        </button>
+          <template v-if="pageCount > 1">
+            <button
+                class="btn btn-light btn-xs p-1"
+                :disabled="page <= 1"
+                @click="turnPage(-1)"
+            >
+                ❮
+            </button>
+            <span>{{ page }} / {{ pageCount }}</span>
+            <button
+                class="btn btn-light btn-xs p-1"
+                :disabled="page >= pageCount"
+                @click="turnPage(1)"
+            >
+                ❯
+            </button>
+          </template>
       </div>
       <div
         v-if="signature.zones.length > 1 && signedState !== 'signed'"