add text valign

app/javascript/submission_form/area.vue

@@ -183,7 +183,7 @@
       v-else
       ref="textContainer"
       dir="auto"
-      class="flex items-center px-0.5 w-full"
+      class="flex px-0.5 w-full"
       :class="{ ...alignClasses, ...fontClasses }"
     >
       <span
@@ -327,13 +327,16 @@ export default {
     },
     alignClasses () {
       if (!this.field.preferences) {
-        return {}
+        return { 'items-center': true }
       }
 
       return {
         'text-center': this.field.preferences.align === 'center',
         'text-left': this.field.preferences.align === 'left',
-        'text-right': this.field.preferences.align === 'right'
+        'text-right': this.field.preferences.align === 'right',
+        'items-center': !this.field.preferences.valign || this.field.preferences.valign === 'center',
+        'items-start': this.field.preferences.valign === 'top',
+        'items-end': this.field.preferences.valign === 'bottom'
       }
     },
     fontClasses () {

app/javascript/template_builder/area.vue

@@ -160,15 +160,15 @@
     </div>
     <div
       ref="touchValueTarget"
-      class="flex items-center h-full w-full field-area"
+      class="flex h-full w-full field-area"
       dir="auto"
-      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']"
       @click="focusValueInput"
     >
       <span
         v-if="field"
         class="flex justify-center items-center space-x-1"
-        :class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput }"
+        :class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput && !isDefaultValuePresent }"
       >
         <div
           v-if="isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
@@ -403,10 +403,13 @@ export default {
     },
     fontClasses () {
       if (!this.field.preferences) {
-        return {}
+        return { 'items-center': true }
       }
 
       return {
+        'items-center': !this.field.preferences.valign || this.field.preferences.valign === 'center',
+        'items-start': this.field.preferences.valign === 'top',
+        'items-end': this.field.preferences.valign === 'bottom',
         'justify-center': this.field.preferences.align === 'center',
         'justify-start': this.field.preferences.align === 'left',
         'justify-end': this.field.preferences.align === 'right',

app/views/submissions/_value.html.erb

@@ -1,8 +1,9 @@
 <% align = field.dig('preferences', 'align') %>
+<% valign = field.dig('preferences', 'valign') %>
 <% color = field.dig('preferences', 'color') %>
 <% font = field.dig('preferences', 'font') %>
 <% font_type = field.dig('preferences', 'font_type') %>
-<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
+<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'text-right' : (align == 'center' ? 'text-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
   <% if field['type'] == 'signature' %>
     <div class="flex flex-col justify-between h-full overflow-hidden">
       <div class="flex-grow flex overflow-hidden" style="min-height: 50%">
@@ -61,17 +62,19 @@
     </div>
   <% elsif field['type'] == 'date' %>
     <autosize-field></autosize-field>
-    <div class="flex items-center px-0.5">
+    <div class="flex w-full px-0.5 <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %>">
       <% value = Time.current.in_time_zone(local_assigns[:timezone]).to_date.to_s if value == '{{date}}' %>
-      <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale]) %>
+      <div class="w-full"><%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale]) %></div>
     </div>
   <% elsif field['type'] == 'number' %>
     <autosize-field></autosize-field>
-    <div class="flex items-center px-0.5 whitespace-nowrap">
+    <div class="flex w-full px-0.5 whitespace-nowrap <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %>">
-      <%= NumberUtils.format_number(value, field.dig('preferences', 'format')) %>
+      <div class="w-full"><%= NumberUtils.format_number(value, field.dig('preferences', 'format')) %></div>
     </div>
   <% else %>
     <autosize-field></autosize-field>
-    <div class="flex items-center px-0.5 whitespace-pre-wrap"><%= Array.wrap(value).join(', ') %></div>
+    <div class="flex w-full px-0.5 whitespace-pre-wrap <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %>">
+      <div class="w-full"><%= Array.wrap(value).join(', ') %></div>
+    </div>
   <% end %>
 </field-value>

lib/submissions/generate_result_attachments.rb

@@ -229,8 +229,9 @@ module Submissions
           text_align = field.dig('preferences', 'align').to_s.to_sym.presence ||
                        (value.to_s.match?(RTL_REGEXP) ? :right : :left)
 
-          layouter = HexaPDF::Layout::TextLayouter.new(text_valign: :center, text_align:,
+          text_valign = (field.dig('preferences', 'valign').to_s.presence || 'center').to_sym
-                                                       font:, font_size:)
+
+          layouter = HexaPDF::Layout::TextLayouter.new(text_valign:, text_align:, font:, font_size:)
 
           next if Array.wrap(value).compact_blank.blank?
 
@@ -515,10 +516,19 @@ module Submissions
                 0
               end
 
+            align_y_diff =
+              if text_valign == :top
+                0
+              elsif text_valign == :bottom
+                height_diff + TEXT_TOP_MARGIN
+              else
+                height_diff / 2
+              end
+
             layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width,
                          height_diff.positive? ? box_height : area['h'] * height)
                     .draw(canvas, (area['x'] * width) - right_align_x_adjustment + TEXT_LEFT_MARGIN,
-                          height - (area['y'] * height) + height_diff - TEXT_TOP_MARGIN)
+                          height - (area['y'] * height) + align_y_diff - TEXT_TOP_MARGIN)
           end
         end
       end