From d59cda9cc45f01841fa6b451e95335f6485274a8 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 14 Nov 2024 12:05:16 +0100
Subject: [PATCH 1/2] DX format signature vue app

---
 .../public/vuejs/DocumentSignature/App.vue    | 133 ++++++++++--------
 1 file changed, 75 insertions(+), 58 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index b46ecae3a..133983acc 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -40,23 +40,23 @@
             {{ z.label.fr }}
           </option>
         </select>
-          <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>
+        <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"
@@ -96,16 +96,23 @@
         >
           {{ $t("cancel") }}
         </button>
-        <button v-if="userSignatureZone === null"
-          :class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }"
+        <button
+          v-if="userSignatureZone === null"
+          :class="{
+            btn: true,
+            'btn-sm': true,
+            'btn-create': canvasEvent !== 'add',
+            'btn-chill-green': canvasEvent === 'add',
+            active: canvasEvent === 'add',
+          }"
           @click="toggleAddZone()"
           :title="$t('add_sign_zone')"
         >
-            <template v-if="canvasEvent === 'add'">
-                <div class="spinner-border spinner-border-sm" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            </template>
+          <template v-if="canvasEvent === 'add'">
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </template>
         </button>
       </div>
     </div>
@@ -125,23 +132,23 @@
             {{ z.label.fr }}
           </option>
         </select>
-          <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>
+        <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'"
@@ -200,26 +207,36 @@
         >
           {{ $t("cancel") }}
         </button>
-        <button v-if="userSignatureZone === null"
-          :class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }"
+        <button
+          v-if="userSignatureZone === null"
+          :class="{
+            btn: true,
+            'btn-sm': true,
+            'btn-create': canvasEvent !== 'add',
+            'btn-chill-green': canvasEvent === 'add',
+            active: canvasEvent === 'add',
+          }"
           @click="toggleAddZone()"
           :title="$t('add_sign_zone')"
         >
-            <template v-if="canvasEvent !== 'add'">
-                {{ $t("add_zone") }}
-            </template>
-            <template v-else>
-              {{ $t("click_on_document")}}
-              <div class="spinner-border spinner-border-sm" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-            </template>
+          <template v-if="canvasEvent !== 'add'">
+            {{ $t("add_zone") }}
+          </template>
+          <template v-else>
+            {{ $t("click_on_document") }}
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </template>
         </button>
       </div>
     </div>
   </div>
-  <div class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center" :class="{onAddZone: canvasEvent === 'add'}">
-    <canvas class="m-auto" id="canvas" ></canvas>
+  <div
+    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
+    :class="{ onAddZone: canvasEvent === 'add' }"
+  >
+    <canvas class="m-auto" id="canvas"></canvas>
   </div>
 
   <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
@@ -683,11 +700,11 @@ init();
 }
 
 .onAddZone {
-    cursor: not-allowed;
+  cursor: not-allowed;
 
-    #canvas {
-        cursor: copy;
-    }
+  #canvas {
+    cursor: copy;
+  }
 }
 
 div#action-buttons {

From df2ea7e1ba842f088b08b85509d57a4b9f1fd6af Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 14 Nov 2024 12:14:06 +0100
Subject: [PATCH 2/2] FIXED adding zone in signature vue app was not placed
 correctly when zooming

---
 .../Resources/public/vuejs/DocumentSignature/App.vue        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 133983acc..483db281f 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -665,11 +665,11 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
       scaleXToCanvas(x, canvas.width, PDFPageWidth) -
       scaleXToCanvas(BOX_WIDTH / 2, canvas.width, PDFPageWidth),
     y:
-      PDFPageHeight -
+      PDFPageHeight * zoom.value -
       scaleYToCanvas(y, canvas.height, PDFPageHeight) +
       scaleYToCanvas(BOX_HEIGHT / 2, canvas.height, PDFPageHeight),
-    width: BOX_WIDTH,
-    height: BOX_HEIGHT,
+    width: BOX_WIDTH * zoom.value,
+    height: BOX_HEIGHT * zoom.value,
     PDFPage: {
       index: page.value - 1,
       width: PDFPageWidth,