signature: confirm signature and undo buttons

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

@@ -1,8 +1,16 @@
 <template>
+  <div>
+    <button :disabled="!userSignatureZones" @click="confirm_sign">
+      Confirmer la signature
+    </button>
+    <button :disabled="!userSignatureZones" @click="undo_sign">
+      Supprimer la signature
+    </button>
+  </div>
   <div v-if="pageCount > 1">
-    <button :disabled="page <= 1" @click="unTurnPage">❮</button>
+    <button :disabled="page <= 1" @click="turn_page(-1)">❮</button>
     {{ page }} / {{ pageCount }}
-    <button :disabled="page >= pageCount" @click="turnPage">❯</button>
+    <button :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
   </div>
   <canvas id="canvas"></canvas>
 </template>
@@ -32,7 +40,7 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
-let userSignatureZones = {} as SignatureZone;
+let userSignatureZones: Ref<null | SignatureZone> = ref(null);
 let pdfSource: Ref<string> = ref("");
 let pdf = {} as PDFDocumentProxy;
 
@@ -136,26 +144,46 @@ const init_pdf = () => {
   const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   canvas.addEventListener(
     "pointerup",
-    (e: PointerEvent) => canvas_click(e),
+    (e: PointerEvent) => canvas_click(e, canvas),
     false
   );
   setTimeout(() => add_zones(page.value), 800);
 };
 
-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 hit_signature = (
+  zone: SignatureZone,
+  xy: number[],
+  canvasWidth: number,
+  canvasHeight: number
+) => {
+  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
+  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
+  return (
+    scaleXToCanvas(zone.x) < xy[0] &&
+    xy[0] < scaleXToCanvas(zone.x + zone.width) &&
+    scaleYToCanvas(zone.y) < xy[1] &&
+    xy[1] < scaleYToCanvas(zone.y + zone.height)
+  );
 };
 
-const turnPage = async () => {
-  page.value = page.value + 1;
-  await set_page(page.value);
-  setTimeout(() => add_zones(page.value), 200);
-};
+const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
+  signature.zones
+    .filter((z) => z.page === page.value)
+    .map((z) => {
+      if (
+        hit_signature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
+      ) {
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          draw_zone(z, ctx, canvas.width, canvas.height, true);
+        }
+        userSignatureZones.value = z;
+      }
+    });
 
-const unTurnPage = async () => {
-  page.value = page.value - 1;
+const turn_page = async (upOrDown: number) => {
+  userSignatureZones.value = null;
+  page.value = page.value + upOrDown;
   await set_page(page.value);
   setTimeout(() => add_zones(page.value), 200);
 };
@@ -164,11 +192,17 @@ const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
   canvasWidth: number,
-  canvasHeight: number
+  canvasHeight: number,
+  selected = false,
 ) => {
-  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
-  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
-  ctx.fillRect(
+  const scaleXToCanvas = (x: number) =>
+    Math.round((x * canvasWidth) / zone.pageWidth);
+  const scaleYToCanvas = (y: number) =>
+    Math.round((y * canvasHeight) / zone.pageHeight);
+  ctx.strokeStyle = selected ? "orange " : "yellow";
+  ctx.lineWidth = 10;
+  ctx.lineJoin = "bevel";
+  ctx.strokeRect(
     scaleXToCanvas(zone.x),
     scaleYToCanvas(zone.y),
     scaleXToCanvas(zone.width),
@@ -180,16 +214,30 @@ const add_zones = (page: number) => {
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    ctx.fillStyle = "green";
     signature.zones
       .filter((z) => z.page === page)
       .map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
   }
 };
 
+const confirm_sign = () => {
+  console.log(userSignatureZones.value);
+  //TODO POST userSignatureZones to backend
+};
+
+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);
+  }
+  userSignatureZones.value = null;
+};
 
 download_and_open();
-
 </script>
 
 <style lang="scss">