adjust font size

app/javascript/template_builder/area.vue

@@ -172,7 +172,8 @@
       >
         <div
           v-if="isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
-          :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
+          :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
+          :style="fontStyle"
         >
           <div
             ref="textContainer"
@@ -315,7 +316,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'selectedAreaRef', 'save', 't'],
+  inject: ['template', 'selectedAreaRef', 'save', 't', 'isInlineSize'],
   props: {
     area: {
       type: Object,
@@ -385,6 +386,37 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldLabels: FieldType.computed.fieldLabels,
     fieldIcons: FieldType.computed.fieldIcons,
+    fontStyle () {
+      let fontSize = ''
+
+      if (this.isInlineSize) {
+        if (this.textOverflowChars) {
+          fontSize = `${this.fontSizePx / 1.5 / 10}cqmin`
+        } else {
+          fontSize = `${this.fontSizePx / 10}cqmin`
+        }
+      } else {
+        if (this.textOverflowChars) {
+          fontSize = `clamp(1pt, ${this.fontSizePx / 1.5 / 10}vw, ${this.fontSizePx / 1.5}px)`
+        } else {
+          fontSize = `clamp(1pt, ${this.fontSizePx / 10}vw, ${this.fontSizePx}px)`
+        }
+      }
+
+      return { fontSize, lineHeight: `calc(${fontSize} * ${this.lineHeight})` }
+    },
+    fontSizePx () {
+      return parseInt(this.field?.preferences?.font_size || 11) * this.fontScale
+    },
+    lineHeight () {
+      return 1.3
+    },
+    fontScale () {
+      return 1040 / 612.0
+    },
+    ladscapeScale () {
+      return 8.5 / 11.0
+    },
     isDefaultValuePresent () {
       if (this.field?.type === 'radio' && this.field?.areas?.length > 1) {
         return false
@@ -413,8 +445,8 @@ export default {
         'justify-center': this.field.preferences.align === 'center',
         'justify-start': this.field.preferences.align === 'left',
         'justify-end': this.field.preferences.align === 'right',
-        'font-mono': this.field.preferences.font === 'Courier',
-        'font-serif': this.field.preferences.font === 'Times',
+        'font-courier': this.field.preferences.font === 'Courier',
+        'font-times': this.field.preferences.font === 'Times',
         'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
         italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
@@ -491,7 +523,7 @@ export default {
     'field.default_value' () {
       this.$nextTick(() => {
         if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
-          this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
+          this.textOverflowChars = (this.$el.clientHeight + 1) < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
         }
       })
     }
@@ -499,7 +531,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
-        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
+        this.textOverflowChars = (this.$el.clientHeight + 1) < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
       }
     })
   },

app/javascript/template_builder/builder.vue

@@ -542,6 +542,7 @@ export default {
       isPaymentConnected: this.isPaymentConnected,
       withFormula: this.withFormula,
       withConditions: this.withConditions,
+      isInlineSize: this.isInlineSize,
       defaultDrawFieldType: this.defaultDrawFieldType,
       selectedAreaRef: computed(() => this.selectedAreaRef),
       fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef)
@@ -793,6 +794,9 @@ export default {
     language () {
       return this.locale.split('-')[0].toLowerCase()
     },
+    isInlineSize () {
+      return CSS.supports('container-type: size')
+    },
     isMobile () {
       const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
 

app/javascript/template_builder/document.vue

@@ -29,6 +29,7 @@
 </template>
 <script>
 import Page from './page'
+import { reactive } from 'vue'
 
 export default {
   name: 'TemplateDocument',
@@ -123,14 +124,14 @@ export default {
       return this.document.metadata?.pdf?.number_of_pages || this.document.preview_images.length
     },
     sortedPreviewImages () {
-      const lazyloadMetadata = this.document.preview_images[this.document.preview_images.length - 1].metadata
+      const lazyloadMetadata = this.document.preview_images[this.document.preview_images.length - 1]?.metadata || { width: 1400, height: 1812 }
 
       return [...Array(this.numberOfPages).keys()].map((i) => {
-        return this.previewImagesIndex[i] || {
-          metadata: lazyloadMetadata,
+        return this.previewImagesIndex[i] || reactive({
+          metadata: { ...lazyloadMetadata },
           id: Math.random().toString(),
           url: this.basePreviewUrl + `/preview/${this.document.signed_uuid || this.document.uuid}/${i}.jpg`
-        }
+        })
       })
     },
     previewImagesIndex () {

app/javascript/template_builder/font_modal.vue

@@ -222,8 +222,8 @@ export default {
     fonts () {
       return [
         { value: null, label: 'Default' },
-        { value: 'Times', label: 'Times', class: 'font-serif' },
-        { value: 'Courier', label: 'Courier', class: 'font-mono' }
+        { value: 'Times', label: 'Times', class: 'font-times' },
+        { value: 'Courier', label: 'Courier', class: 'font-courier' }
       ]
     },
     types () {
@@ -258,8 +258,8 @@ export default {
     },
     textClasses () {
       return {
-        'font-mono': this.preferences.font === 'Courier',
-        'font-serif': this.preferences.font === 'Times',
+        'font-courier': this.preferences.font === 'Courier',
+        'font-times': this.preferences.font === 'Times',
         'justify-center': this.preferences.align === 'center',
         'justify-start': this.preferences.align === 'left',
         'justify-end': this.preferences.align === 'right',

app/javascript/template_builder/page.vue

@@ -1,8 +1,9 @@
 <template>
   <div
-    class="relative select-none"
-    :class="{ 'cursor-crosshair': allowDraw }"
-    :style="drawField ? 'touch-action: none' : ''"
+    class="relative select-none mb-4 before:border before:rounded before:top-0 before:bottom-0 before:left-0 before:right-0 before:absolute"
+    :class="{ 'cursor-crosshair': allowDraw, 'touch-none': !!drawField }"
+    style="container-type: size"
+    :style="{ aspectRatio: `${width} / ${height}`}"
   >
     <img
       ref="image"
@@ -10,7 +11,7 @@
       :src="image.url"
       :width="width"
       :height="height"
-      class="border rounded mb-4"
+      class="rounded"
       @load="onImageLoad"
     >
     <div
@@ -191,8 +192,8 @@ export default {
   },
   methods: {
     onImageLoad (e) {
-      e.target.setAttribute('width', e.target.naturalWidth)
-      e.target.setAttribute('height', e.target.naturalHeight)
+      this.image.metadata.width = e.target.naturalWidth
+      this.image.metadata.height = e.target.naturalHeight
     },
     setAreaRefs (el) {
       if (el) {