CP-11621 - Add opaque background option to signature box

app/javascript/submission_form/area.vue

@@ -61,7 +61,7 @@
       <div
         class="flex overflow-hidden"
         :class="isNarrow && (withSignatureId || field.preferences?.reason_field_uuid) ? 'w-1/2' : 'flex-grow'"
-        style="min-height: 50%"
+        :style="{ minHeight: '50%', ...(field.preferences?.opaque_background ? { backgroundColor: '#fff' } : {}) }"
       >
         <img
           class="object-contain mx-auto"

app/javascript/template_builder/field_settings.vue

@@ -318,6 +318,20 @@
       <span class="label-text">{{ t('with_logo') }}</span>
     </label>
   </li>
+  <li
+    v-if="field.type === 'signature'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        :checked="!!field.preferences?.opaque_background"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @change="[field.preferences ||= {}, field.preferences.opaque_background = !field.preferences.opaque_background, !field.preferences.opaque_background && delete field.preferences.opaque_background, save()]"
+      >
+      <span class="label-text">{{ field.preferences?.opaque_background ? t('remove_opaque_background') : t('add_opaque_background') }}</span>
+    </label>
+  </li>
   <li
     v-if="field.type == 'checkbox'"
     @click.stop

app/javascript/template_builder/i18n.js

@@ -25,6 +25,8 @@ const en = {
   description: 'Description',
   display_title: 'Display title',
   with_logo: 'With logo',
+  add_opaque_background: 'Add opaque background',
+  remove_opaque_background: 'Remove opaque background',
   unchecked: 'Unchecked',
   price: 'Price',
   type_value: 'Type value',
@@ -181,6 +183,8 @@ const es = {
   right: 'Derecha',
   center: 'Centro',
   with_logo: 'Con logotipo',
+  add_opaque_background: 'Agregar fondo opaco',
+  remove_opaque_background: 'Eliminar fondo opaco',
   description: 'Descripción',
   signing_date: 'Fecha de Firma',
   display_title: 'Título de visualización',
@@ -334,6 +338,8 @@ const it = {
   description: 'Descrizione',
   display_title: 'Mostra titolo',
   with_logo: 'Con logo',
+  add_opaque_background: 'Aggiungi sfondo opaco',
+  remove_opaque_background: 'Rimuovi sfondo opaco',
   unchecked: 'Non selezionato',
   price: 'Prezzo',
   type_value: 'Inserisci valore',
@@ -485,6 +491,8 @@ const pt = {
   right: 'Direita',
   center: 'Centro',
   with_logo: 'Com logotipo',
+  add_opaque_background: 'Adicionar fundo opaco',
+  remove_opaque_background: 'Remover fundo opaco',
   description: 'Descrição',
   display_title: 'Título de exibição',
   signing_date: 'Data da Assinatura',
@@ -638,6 +646,8 @@ const fr = {
   add_condition: 'Ajouter une condition',
   center: 'Centre',
   with_logo: 'Avec logo',
+  add_opaque_background: 'Ajouter un fond opaque',
+  remove_opaque_background: 'Supprimer le fond opaque',
   description: 'Description',
   display_title: "Titre d'affichage",
   unchecked: 'Non coché',
@@ -790,6 +800,8 @@ const de = {
   add_condition: 'Bedingung hinzufügen',
   center: 'Zentriert',
   with_logo: 'Mit Logo',
+  add_opaque_background: 'Opaken Hintergrund hinzufügen',
+  remove_opaque_background: 'Opaken Hintergrund entfernen',
   description: 'Beschreibung',
   display_title: 'Anzeigetitel',
   unchecked: 'Nicht überprüft',

app/views/submissions/_value.html.erb

@@ -7,7 +7,7 @@
   <% if field['type'] == 'signature' %>
     <% is_narrow = area['h']&.positive? && (area['w'].to_f / area['h']) > 6 %>
     <div class="flex justify-between w-full h-full gap-1 <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'flex-row' : 'flex-col' %>">
-      <div class="flex overflow-hidden <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'w-1/2' : 'flex-grow' %>" style="min-height: 50%">
+      <div class="flex overflow-hidden <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'w-1/2' : 'flex-grow' %>" style="min-height: 50%<%= '; background-color: #fff' if field.dig('preferences', 'opaque_background') %>">
         <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>">
       </div>
       <% if (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) && attachment = attachments_index[value] %>

lib/submissions/generate_result_attachments.rb

@@ -305,6 +305,10 @@ def fill_submitter_fields(submitter, account, pdfs_index, with_signature_id:, is
 
               io = StringIO.new(image.resize([scale * 4, 1].select(&:positive?).min).write_to_buffer('.png'))
 
+              if field['type'] == 'signature' && field.dig('preferences', 'opaque_background')
+                canvas.fill_color('white').rectangle(image_x, image_y, image_width, image_height).fill
+              end
+
               canvas.image(io, at: [image_x, image_y], width: image_width, height: image_height)
 
               id_string = "ID: #{attachment.uuid}".upcase
@@ -369,6 +373,14 @@ def fill_submitter_fields(submitter, account, pdfs_index, with_signature_id:, is
                             height - (area['y'] * height) - TEXT_TOP_MARGIN -
                             result.lines.sum(&:height) - image_height)
 
+              if field.dig('preferences', 'opaque_background')
+                image_x = (area['x'] * width) + (area['w'] * width / 2) - ((image.width * scale) / 2)
+                image_y = height - (area['y'] * height) - (image.height * scale / 2) - (image_height / 2)
+
+                canvas.fill_color('white').rectangle(image_x, image_y, image.width * scale,
+                                                     image.height * scale).fill
+              end
+
               canvas.image(
                 io,
                 at: [
@@ -397,6 +409,14 @@ def fill_submitter_fields(submitter, account, pdfs_index, with_signature_id:, is
 
             io = StringIO.new(image.resize([scale * 4, 1].select(&:positive?).min).write_to_buffer('.png'))
 
+            if field['type'] == 'signature' && field.dig('preferences', 'opaque_background')
+              image_x = (area['x'] * width) + (area['w'] * width / 2) - ((image.width * scale) / 2)
+              image_y = height - (area['y'] * height) - (image.height * scale / 2) - (area['h'] * height / 2)
+
+              canvas.fill_color('white').rectangle(image_x, image_y, image.width * scale,
+                                                   image.height * scale).fill
+            end
+
             canvas.image(
               io,
               at: [

spec/lib/submissions/generate_result_attachments_spec.rb

@@ -325,4 +325,51 @@ def assign_checkbox(value)
       end
     end
   end
+
+  describe '.fill_submitter_fields opaque signature background' do
+    let(:field_uuid) { SecureRandom.uuid }
+
+    def page_raw_content
+      page = pdfs_index[attachment_uuid].pages[0]
+      content = page.contents
+      content = content.data if content.respond_to?(:data)
+      content.to_s
+    end
+
+    def page_draws_white_fill_rectangle?
+      content = page_raw_content
+
+      white_fill = content.match?(/1(\.0+)?\s+g\b|1(\.0+)?\s+1(\.0+)?\s+1(\.0+)?\s+rg\b/)
+
+      white_fill && content.match?(/\bre\b/) && content.match?(/\bf\b/)
+    end
+
+    def assign_signature_with_opaque_background
+      blob = ActiveStorage::Blob.create_and_upload!(
+        io: Rails.root.join('spec/fixtures/sample-image.png').open,
+        filename: 'signature.png',
+        content_type: 'image/png'
+      )
+      submitter.attachments.attach(blob)
+
+      assign_fields(
+        [{
+          'uuid' => field_uuid,
+          'submitter_uuid' => submitter.uuid,
+          'type' => 'signature',
+          'preferences' => { 'opaque_background' => true },
+          'areas' => [base_area]
+        }],
+        { field_uuid => submitter.attachments.first.uuid }
+      )
+    end
+
+    it 'draws a white fill rectangle under the signature image' do
+      assign_signature_with_opaque_background
+      fill
+
+      expect(image_xobject_count).to eq(1)
+      expect(page_draws_white_fill_rectangle?).to be(true)
+    end
+  end
 end