signature: fake POSTing of signature, adjustments

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

@@ -5,8 +5,19 @@
         <h2>{{ $t("signature_confirmation") }}</h2>
       </template>
       <template v-slot:body>
-        <p>{{ $t("you_are_going_to_sign") }}</p>
-        <p>{{ $t("are_you_sure") }}</p>
+        <div class="signature-modal-body text-center" v-if="loading">
+          <p>{{ $t("electronic_signature_in_progress") }}</p>
+          <div class="loading">
+            <i
+              class="fa fa-circle-o-notch fa-spin fa-3x"
+              :title="$t('loading')"
+            ></i>
+          </div>
+        </div>
+        <div class="signature-modal-body text-center" v-else>
+          <p>{{ $t("you_are_going_to_sign") }}</p>
+          <p>{{ $t("are_you_sure") }}</p>
+        </div>
       </template>
       <template v-slot:footer>
         <button class="btn btn-action" @click.prevent="confirm_sign">
@@ -21,7 +32,7 @@
       v-if="signature.zones.length > 1"
     >
       <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light btn-sm" @click="turn_signature(-1)">
+        <button :disabled="zone < 1" class="btn btn-light btn-sm" @click="turn_signature(-1)">
           {{ $t("last_sign_zone") }}
         </button>
       </div>
@@ -60,7 +71,7 @@
     <canvas class="m-auto" id="canvas"></canvas>
   </div>
 
-  <div class="col-12 p-4" id="action-buttons">
+  <div class="col-12 p-4" id="action-buttons" v-if="!signed">
     <div class="row">
       <div class="col-6">
         <button
@@ -121,6 +132,8 @@ import {
 pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
 const modalOpen: Ref<boolean> = ref(false);
+const loading: Ref<boolean> = ref(false);
+const signed: Ref<boolean> = ref(false);
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
 const zone: Ref<number> = ref(0);
@@ -211,8 +224,7 @@ const hit_signature = (
   );
 };
 
-const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) => {
-  undo_sign();
+const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   signature.zones
     .filter((z) => z.PDFPage.index + 1 === page.value)
     .map((z) => {
@@ -221,15 +233,15 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) => {
       ) {
         const ctx = canvas.getContext("2d");
         if (ctx) {
+          set_page(page.value);
           setTimeout(
-            () => draw_zone(z, ctx, canvas.width, canvas.height, true),
+            () => draw_zone(z, ctx, canvas.width, canvas.height),
             200
           );
         }
         userSignatureZones.value = z;
       }
     });
-};
 
 const turn_page = async (upOrDown: number) => {
   userSignatureZones.value = null;
@@ -239,34 +251,37 @@ const turn_page = async (upOrDown: number) => {
 };
 
 const turn_signature = async (upOrDown: number) => {
+  userSignatureZones.value = null;
+  if (zone.value < signature.zones.length - 1) {
+    zone.value = zone.value + upOrDown;
+  } else {
+    zone.value = 0;
+  }
   let currentZone = signature.zones[zone.value];
   if (currentZone) {
     page.value = currentZone.PDFPage.index + 1;
     await set_page(page.value);
     setTimeout(() => add_zones(page.value), 200);
   }
-  if (zone.value < signature.zones.length - 1) {
-    zone.value = zone.value + upOrDown;
-  } else {
-    zone.value = 0;
-  }
 };
 
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
   canvasWidth: number,
-  canvasHeight: number,
-  selected = false
+  canvasHeight: number
 ) => {
+  const unselectedBlue = "#007bff";
+  const selectedBlue = "#034286";
   const scaleXToCanvas = (x: number) =>
     Math.round((x * canvasWidth) / zone.PDFPage.width);
   const scaleHeightToCanvas = (h: number) =>
     Math.round((h * canvasHeight) / zone.PDFPage.height);
   const scaleYToCanvas = (y: number) =>
     Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
-  ctx.strokeStyle = selected ? "orange " : "yellow";
-  ctx.lineWidth = 10;
+  ctx.strokeStyle =
+    userSignatureZones.value === null ? unselectedBlue : selectedBlue;
+  ctx.lineWidth = 2;
   ctx.lineJoin = "bevel";
   ctx.strokeRect(
     scaleXToCanvas(zone.x),
@@ -279,12 +294,17 @@ const draw_zone = (
   ctx.fillStyle = "black";
   const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2;
   const yText = scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height) / 2;
-  ctx.strokeStyle = "grey";
-  ctx.strokeText("Choisir cette", xText, yText - 12);
-  ctx.strokeText("zone de signature", xText, yText + 12);
-  ctx.fillStyle = "yellow";
-  ctx.fillText("Choisir cette", xText, yText - 12);
-  ctx.fillText("zone de signature", xText, yText + 12);
+  if (userSignatureZones.value !== null) {
+    ctx.fillStyle = selectedBlue;
+    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.strokeStyle = "#c6c6c6"; // halo
+    // ctx.strokeText("Choisir cette", xText, yText - 12);
+    // ctx.strokeText("zone de signature", xText, yText + 12);
+  }
 };
 
 const add_zones = (page: number) => {
@@ -299,18 +319,23 @@ const add_zones = (page: number) => {
 
 const confirm_sign = () => {
   console.log(userSignatureZones.value);
+  loading.value = true;
   //TODO POST userSignatureZones to backend
+  setTimeout(() => {
+    loading.value = false;
+    modalOpen.value = false;
+    signed.value = true;
+  }, 3000); // FAKE
 };
 
 const undo_sign = async () => {
-  const canvas = document.querySelectorAll("canvas")[0];
-  const ctx = canvas.getContext("2d");
-  if (ctx && userSignatureZones.value) {
-    draw_zone(userSignatureZones.value, ctx, canvas.width, canvas.height);
-    //another option is to reload the canvas
-    //await set_page(page.value);
-    //setTimeout(() => add_zones(page.value), 200);
-  }
+  // const canvas = document.querySelectorAll("canvas")[0];
+  // const ctx = canvas.getContext("2d");
+  // if (ctx && userSignatureZones.value) {
+  //   //draw_zone(userSignatureZones.value, ctx, canvas.width, canvas.height);
+  // }
+  await set_page(page.value);
+  setTimeout(() => add_zones(page.value), 200);
   userSignatureZones.value = null;
 };
 
@@ -333,5 +358,8 @@ div#turn-page {
     margin: 0 0.4rem;
   }
 }
+div.signature-modal-body {
+  height: 8rem;
+}
 </style>
 

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts

@@ -15,6 +15,8 @@ const appMessages = {
         cancel_signing: 'Refuser de signer',
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
+        electronic_signature_in_progress: 'Signature électronique en cours...',
+        loading: 'Chargement...'
     }
 }
 

src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php

@@ -20,7 +20,7 @@ class PDFSignatureZoneParser
     private Parser $parser;
 
     public function __construct(
-        public float $defaultHeight = 180.0,
+        public float $defaultHeight = 90.0,
         public float $defaultWidth = 180.0,
     ) {
         $this->parser = new Parser();