resolving errors of my signature and initials.

app/javascript/template_builder/area.vue

@@ -140,14 +140,14 @@
         :id="field.uuid"
         :src="mySignatureUrl.url"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMySignatureClick"
       >
       <img
         v-else
         :id="field.uuid"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMySignatureClick"
       >
     </div>
@@ -162,14 +162,14 @@
         :id="field.uuid"
         :src="myInitialsUrl.url"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMyInitialClick"
       >
       <img
         v-else
         :id="field.uuid"
         class="d-flex justify-center w-full h-full"
-        style="z-index: 50;"
+        style="z-index: 50; border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
         @click="handleMyInitialClick"
       >
     </div>
@@ -216,6 +216,9 @@
   </div>
   <div
     v-if="showMySignature"
+    @pointerdown.stop
+    @mousedown.stop="startDrag"
+    @touchstart="startTouchDrag"
   >
     <MySignature
       :key="field.uuid"
@@ -233,6 +236,9 @@
   </div>
   <div
     v-if="showMyInitials"
+    @pointerdown.stop
+    @mousedown.stop="startDrag"
+    @touchstart="startTouchDrag"
   >
     <MyInitials
       :key="field.uuid"
@@ -244,7 +250,7 @@
       :template="template"
       :attachments-index="attachmentsIndex"
       @attached="handleMyInitialsAttachment"
-      @hide="showMySignature = false"
+      @hide="showMyInitials = false"
       @start="$refs.areas.scrollIntoField(field)"
     />
   </div>
@@ -509,10 +515,12 @@ export default {
     handleMyInitialsAttachment (attachment) {
       this.templateAttachments.push(attachment)
       this.makeMyInitials(attachment.uuid)
+      this.save()
     },
     handleMySignatureAttachment (attachment) {
       this.templateAttachments.push(attachment)
       this.makeMySignature(attachment.uuid)
+      this.save()
     },
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area

app/javascript/template_builder/my_initials.vue

@@ -4,96 +4,102 @@
     style="z-index: 50;"
     :style="{ ...mySignatureStyle }"
   >
-    <div class="flex justify-between items-center w-full mb-2">
-      <label
-        class="label text-2xl"
-      >{{ field.name || t('initials') }}</label>
-      <div class="space-x-2 flex">
-        <span
-          v-if="isDrawInitials"
-          class="tooltip"
-          :data-tip="t('type_initials')"
-        >
+    <div
+      style="min-height: 250px; min-width: 250px;"
+    >
+      <div class="flex justify-between items-center w-full mb-2">
+        <label
+          class="label text-2xl"
+        >{{ field.name || t('initials') }}</label>
+        <div class="space-x-2 flex">
+          <span
+            v-if="isDrawInitials"
+            class="tooltip"
+            :data-tip="t('type_initials')"
+          >
+            <a
+              id="type_text_button"
+              href="#"
+              class="btn btn-outline font-medium btn-sm"
+              @click.prevent="toggleTextInput"
+            >
+              <IconTextSize :width="16" />
+            </a>
+          </span>
+          <span
+            v-else
+            class="tooltip"
+            :data-tip="t('draw_initials')"
+          >
+            <a
+              id="type_text_button"
+              href="#"
+              class="btn btn-outline font-medium btn-sm"
+              @click.prevent="toggleTextInput"
+            >
+              <IconSignature :width="16" />
+            </a>
+          </span>
           <a
-            id="type_text_button"
+            v-if="modelValue || computedPreviousValue"
             href="#"
-            class="btn btn-outline font-medium btn-sm"
-            @click.prevent="toggleTextInput"
+            class="tooltip btn font-medium btn-outline btn-sm"
+            :data-tip="'redraw'"
+            @click.prevent="remove"
           >
-            <IconTextSize :width="16" />
+            <IconReload :width="16" />
           </a>
-        </span>
-        <span
-          v-else
-          class="tooltip"
-          :data-tip="t('draw_initials')"
-        >
           <a
-            id="type_text_button"
+            v-else
             href="#"
-            class="btn btn-outline font-medium btn-sm"
-            @click.prevent="toggleTextInput"
+            class="tooltip btn font-medium btn-outline btn-sm"
+            :data-tip="'clear'"
+            @click.prevent="clear"
           >
-            <IconSignature :width="16" />
+            <IconReload :width="16" />
           </a>
-        </span>
-        <a
-          v-if="modelValue || computedPreviousValue"
-          href="#"
-          class="btn font-medium btn-outline btn-sm"
-          @click.prevent="remove"
-        >
-          <IconReload :width="16" />
-        </a>
-        <a
-          v-else
-          href="#"
-          class="btn font-medium btn-outline btn-sm"
-          @click.prevent="clear"
-        >
-          <IconReload :width="16" />
-        </a>
-        <div
-          class="tooltip btn btn-outline btn-sm font-medium"
-          :data-tip="'close'"
-          @click="$emit('hide')"
-        >
-          <IconTrashX :width="16" />
+          <div
+            class="tooltip btn btn-outline btn-sm font-medium"
+            :data-tip="'close'"
+            @click="$emit('hide')"
+          >
+            <IconTrashX :width="16" />
+          </div>
         </div>
       </div>
+      <input
+        :value="modelValue || computedPreviousValue"
+        type="hidden"
+        :name="`values[${field.uuid}]`"
+      >
+      <img
+        v-if="modelValue || computedPreviousValue"
+        :src="attachmentsIndex[modelValue || computedPreviousValue].url"
+        class="mx-auto bg-white border border-base-300 rounded max-h-72 w-full"
+      >
+      <canvas
+        v-show="!modelValue && !computedPreviousValue"
+        ref="canvas"
+        class="bg-white border border-base-300 rounded-2xl max-h-72 w-full"
+      />
+      <input
+        v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
+        id="initials_text_input"
+        ref="textInput"
+        class="base-input !text-2xl w-full mt-6 text-center"
+        :required="field.required && !isInitialsStarted"
+        :placeholder="`${t('type_initial_here')}...`"
+        type="text"
+        @focus="$emit('focus')"
+        @input="updateWrittenInitials"
+      >
+      <button
+        class="btn btn-outline w-full mt-2"
+        @click="submit"
+      >
+        <span> Submit </span>
+      </button>
     </div>
-    <input
-      :value="modelValue || computedPreviousValue"
-      type="hidden"
-      :name="`values[${field.uuid}]`"
-    >
-    <img
-      v-if="modelValue || computedPreviousValue"
-      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
-    >
-    <canvas
-      v-show="!modelValue && !computedPreviousValue"
-      ref="canvas"
-      class="bg-white border border-base-300 rounded-2xl"
-    />
-    <input
-      v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
-      id="initials_text_input"
-      ref="textInput"
-      class="base-input !text-2xl w-full mt-6 text-center"
-      :required="field.required && !isInitialsStarted"
-      :placeholder="`${t('type_initial_here')}...`"
-      type="text"
-      @focus="$emit('focus')"
-      @input="updateWrittenInitials"
-    >
-    <button
-      class="btn btn-outline w-full mt-2"
-      @click="submit"
-    >
-      <span> Submit </span>
-    </button>
   </div>
 </template>
 

app/javascript/template_builder/my_signature.vue

@@ -56,16 +56,17 @@
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm font-medium"
+          class="tooltip btn btn-outline btn-sm font-medium"
+          :data-tip="'redraw'"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          {{ t('redraw') }}
         </a>
         <a
           v-else
           href="#"
-          class="btn btn-outline btn-sm font-medium"
+          class="tooltip btn btn-outline btn-sm font-medium"
+          :data-tip="'clear'"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -86,13 +87,13 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+      class="mx-auto bg-white border border-base-300 rounded max-h-72 w-full"
     >
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
       style="padding: 1px; 0"
-      class="bg-white border border-base-300 rounded-2xl"
+      class="bg-white border border-base-300 rounded-2xl w-full"
     />
     <input
       v-if="isTextSignature"