Signature app: rename userSignatureZones, remove zoneIndex, sign on click

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

@@ -33,7 +33,7 @@
     >
       <div class="col-4 gap-2 d-grid">
         <button
-          :disabled="zone < 1"
+          :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
           class="btn btn-light btn-sm"
           @click="turnSignature(-1)"
         >
@@ -41,7 +41,11 @@
         </button>
       </div>
       <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light btn-sm" @click="turnSignature(1)">
+        <button
+          :disabled="userSignatureZone?.index >= signature.zones.length - 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
           {{ $t("next_sign_zone") }}
         </button>
       </div>
@@ -80,8 +84,8 @@
       <div class="col-6">
         <button
           class="btn btn-action me-2"
-          :disabled="!userSignatureZones"
+          :disabled="!userSignatureZone"
-          @click="modalOpen = true"
+          @click="sign"
         >
           {{ $t("sign") }}
         </button>
@@ -89,7 +93,7 @@
       <div class="col-6 d-flex justify-content-end">
         <button
           class="btn btn-misc me-2"
-          :hidden="!userSignatureZones"
+          :hidden="!userSignatureZone"
           @click="undoSign"
           v-if="signature.zones.length > 1"
         >
@@ -97,7 +101,7 @@
         </button>
         <button
           class="btn btn-misc me-2"
-          :hidden="!userSignatureZones"
+          :hidden="!userSignatureZone"
           @click="undoSign"
           v-else
         >
@@ -143,8 +147,7 @@ const loading: Ref<boolean> = ref(false);
 const signedState: Ref<SignedState> = ref("pending");
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
-const zone: Ref<number> = ref(0);
+let userSignatureZone: Ref<null | SignatureZone> = ref(null);
-let userSignatureZones: Ref<null | SignatureZone> = ref(null);
 let pdfSource: Ref<string> = ref("");
 let pdf = {} as PDFDocumentProxy;
 
@@ -233,6 +236,15 @@ const hitSignature = (
   );
 };
 
+const selectZone = (z: SignatureZone, canvas: HTMLCanvasElement) => {
+  userSignatureZone.value = z;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    setPage(page.value);
+    setTimeout(() => drawZone(z, ctx, canvas.width, canvas.height), 200);
+  }
+};
+
 const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   signature.zones
     .filter((z) => z.PDFPage.index + 1 === page.value)
@@ -240,34 +252,39 @@ const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
       if (
         hitSignature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
       ) {
-        const ctx = canvas.getContext("2d");
+        if (userSignatureZone.value === null) {
-        if (ctx) {
+          selectZone(z, canvas);
-          setPage(page.value);
+        } else {
-          setTimeout(() => drawZone(z, ctx, canvas.width, canvas.height), 200);
+          if (userSignatureZone.value.index === z.index) {
+            sign();
+          }
         }
-        userSignatureZones.value = z;
       }
     });
 
 const turnPage = async (upOrDown: number) => {
-  userSignatureZones.value = null;
+  userSignatureZone.value = null;
   page.value = page.value + upOrDown;
   await setPage(page.value);
   setTimeout(() => addZones(page.value), 200);
 };
 
 const turnSignature = async (upOrDown: number) => {
-  userSignatureZones.value = null;
+  let zoneIndex = userSignatureZone.value?.index ?? -1;
-  if (zone.value < signature.zones.length - 1) {
+  if (zoneIndex < -1) {
-    zone.value = zone.value + upOrDown;
+    zoneIndex = -1;
-  } else {
-    zone.value = 0;
   }
-  let currentZone = signature.zones[zone.value];
+  if (zoneIndex < signature.zones.length) {
+    zoneIndex = zoneIndex + upOrDown;
+  } else {
+    zoneIndex = 0;
+  }
+  let currentZone = signature.zones[zoneIndex];
   if (currentZone) {
     page.value = currentZone.PDFPage.index + 1;
-    await setPage(page.value);
+    userSignatureZone.value = currentZone;
-    setTimeout(() => addZones(page.value), 200);
+    const canvas = document.querySelectorAll("canvas")[0];
+    selectZone(currentZone, canvas);
   }
 };
 
@@ -286,7 +303,9 @@ const drawZone = (
   const scaleYToCanvas = (y: number) =>
     Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
   ctx.strokeStyle =
-    userSignatureZones.value === null ? unselectedBlue : selectedBlue;
+    userSignatureZone.value?.index === zone.index
+      ? selectedBlue
+      : unselectedBlue;
   ctx.lineWidth = 2;
   ctx.lineJoin = "bevel";
   ctx.strokeRect(
@@ -300,7 +319,7 @@ const drawZone = (
   ctx.fillStyle = "black";
   const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2;
   const yText = scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height) / 2;
-  if (userSignatureZones.value !== null) {
+  if (userSignatureZone.value?.index === zone.index) {
     ctx.fillStyle = selectedBlue;
     ctx.fillText("Signer ici", xText, yText);
   } else {
@@ -379,12 +398,14 @@ const checkForReady = () => {
   }
 };
 
+const sign = () => (modalOpen.value = true);
+
 const confirmSign = () => {
   loading.value = true;
   const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
   const body = {
     storedObject: signature.storedObject,
-    zone: userSignatureZones.value,
+    zone: userSignatureZone.value,
   };
   makeFetch("POST", url, body)
     .then((r) => {
@@ -402,12 +423,12 @@ const confirmSign = () => {
 const undoSign = async () => {
   // const canvas = document.querySelectorAll("canvas")[0];
   // const ctx = canvas.getContext("2d");
-  // if (ctx && userSignatureZones.value) {
+  // if (ctx && userSignatureZone.value) {
-  //   //drawZone(userSignatureZones.value, ctx, canvas.width, canvas.height);
+  //   //drawZone(userSignatureZone.value, ctx, canvas.width, canvas.height);
   // }
   await setPage(page.value);
   setTimeout(() => addZones(page.value), 200);
-  userSignatureZones.value = null;
+  userSignatureZone.value = null;
 };
 
 downloadAndOpen();