From d0c0da0939e4537c3c3859c54649be9d5845feb5 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Sat, 3 Jun 2023 00:53:46 +0300
Subject: [PATCH] style builder ui

---
 app/javascript/template_builder/area.vue      |  49 +++-
 app/javascript/template_builder/builder.vue   |  38 ++-
 .../template_builder/contenteditable.vue      |  26 +-
 app/javascript/template_builder/document.vue  |  20 +-
 app/javascript/template_builder/field.vue     | 273 ++++++++++++++----
 app/javascript/template_builder/fields.vue    | 114 +++++---
 app/javascript/template_builder/page.vue      |  36 ++-
 app/javascript/template_builder/preview.vue   |   3 +-
 app/views/layouts/application.html.erb        |   2 +-
 yarn.lock                                     |   6 +-
 10 files changed, 423 insertions(+), 144 deletions(-)

diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 3f0b8437..3184225a 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -1,14 +1,35 @@
 <template>
   <div
-    class="bg-red-100 absolute opacity-70"
+    class="absolute overflow-visible group"
     :style="positionStyle"
-    @mousedown="startDrag"
+    @pointerdown.stop
+    @mousedown.stop="startDrag"
   >
     <div
       v-if="field"
-      class="flex items-center justify-center h-full w-full"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap hidden group-hover:block group-hover:z-10"
+      style="top: -25px; height: 25px"
+      @mousedown.stop
+      @pointerdown.stop
     >
-      {{ field?.name || field.type }}
+      <button
+        v-for="(component, type, index) in iconComponents"
+        :key="type"
+        class="px-0.5 hover:text-base-100 hover:bg-base-content transition-colors"
+        :class="{ 'bg-base-content text-base-100': field.type === type, 'rounded-tl': index === 0, 'rounded-tr': index === 4 }"
+        @click="changeTypeTo(type)"
+      >
+        <component
+          :is="component"
+          :width="20"
+          stroke-width="1.5"
+        />
+      </button>
+    </div>
+    <div
+      class="bg-red-100 opacity-70 flex items-center justify-center h-full w-full"
+    >
+      {{ field?.name || field?.type }}
     </div>
     <span
       class="h-2 w-2 right-0 bottom-0 bg-red-900 absolute cursor-nwse-resize"
@@ -18,6 +39,8 @@
 </template>
 
 <script>
+import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox } from '@tabler/icons-vue'
+
 export default {
   name: 'FieldArea',
   props: {
@@ -47,6 +70,15 @@ export default {
     }
   },
   computed: {
+    iconComponents () {
+      return {
+        text: IconTextSize,
+        signature: IconWriting,
+        date: IconCalendarEvent,
+        image: IconPhoto,
+        checkbox: IconCheckbox
+      }
+    },
     positionStyle () {
       const { x, y, w, h } = this.bounds
 
@@ -59,9 +91,14 @@ export default {
     }
   },
   methods: {
+    changeTypeTo (type) {
+      this.field.type = type
+    },
     resize (e) {
-      this.bounds.w = e.layerX / e.toElement.clientWidth - this.bounds.x
-      this.bounds.h = e.layerY / e.toElement.clientHeight - this.bounds.y
+      if (e.toElement.id === 'mask') {
+        this.bounds.w = e.layerX / e.toElement.clientWidth - this.bounds.x
+        this.bounds.h = e.layerY / e.toElement.clientHeight - this.bounds.y
+      }
     },
     drag (e) {
       if (e.toElement.id === 'mask') {
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index e4a5772b..6e1b76ae 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     style="max-width: 1600px"
-    class="mx-auto px-4"
+    class="mx-auto pl-4"
   >
-    <div class="flex justify-between py-1.5 items-center">
+    <div class="flex justify-between py-1.5 items-center pr-4">
       <div class="flex space-x-3">
         <a href="/">
           <Logo />
@@ -42,7 +42,7 @@
     >
       <div
         ref="previews"
-        class="overflow-auto w-52 flex-none pr-4 mt-0.5 pt-0.5"
+        class="overflow-auto w-52 flex-none pr-3 mt-0.5 pt-0.5"
       >
         <DocumentPreview
           v-for="(item, index) in template.schema"
@@ -64,7 +64,7 @@
         </div>
       </div>
       <div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
-        <div class="px-3">
+        <div class="pr-3.5 pl-0.5">
           <Document
             v-for="document in sortedDocuments"
             :key="document.uuid"
@@ -79,12 +79,12 @@
         </div>
       </div>
       <div
-        class="relative w-72 flex-none"
+        class="relative w-80 flex-none pt-0.5 pr-4"
         :class="drawField ? 'overflow-hidden' : 'overflow-auto'"
       >
         <div
           v-if="drawField"
-          class="sticky inset-0 bg-white h-full"
+          class="sticky inset-0 bg-base-100 h-full"
         >
           Draw {{ drawField.name }} field on the page
           <button @click="drawField = false">
@@ -92,13 +92,13 @@
           </button>
         </div>
         <div>
-          FIelds
           <Fields
             ref="fields"
             v-model:fields="template.fields"
             @set-draw="drawField = $event"
             @set-drag="dragFieldType = $event"
             @drag-end="dragFieldType = null"
+            @scroll-to-area="scrollToArea"
           />
         </div>
       </div>
@@ -114,6 +114,7 @@ import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import { IconUsersPlus, IconDeviceFloppy } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
 
 export default {
   name: 'TemplateBuilder',
@@ -189,10 +190,22 @@ export default {
       }
     },
     onDraw (area) {
-      this.drawField.areas ||= []
-      this.drawField.areas.push(area)
+      if (this.drawField) {
+        this.drawField.areas ||= []
+        this.drawField.areas.push(area)
 
-      this.drawField = null
+        this.drawField = null
+      } else {
+        const field = {
+          name: '',
+          uuid: v4(),
+          required: true,
+          type: 'text',
+          areas: [area]
+        }
+
+        this.template.fields.push(field)
+      }
     },
     onDropfield (area) {
       this.$refs.fields.addField(this.dragFieldType, area)
@@ -245,6 +258,11 @@ export default {
         this.isSaving = false
       })
     },
+    scrollToArea (area) {
+      const documentRef = this.documentRefs.find((a) => a.document.uuid === area.attachment_uuid)
+
+      documentRef.scrollToArea(area)
+    },
     save () {
       return fetch(`/api/templates/${this.template.id}`, {
         method: 'PUT',
diff --git a/app/javascript/template_builder/contenteditable.vue b/app/javascript/template_builder/contenteditable.vue
index 784bb43a..21469fb1 100644
--- a/app/javascript/template_builder/contenteditable.vue
+++ b/app/javascript/template_builder/contenteditable.vue
@@ -1,19 +1,25 @@
 <template>
-  <div class="group flex items-center relative overflow-visible">
-    <div
+  <div
+    class="group relative overflow-visible"
+    :class="{ 'flex items-center': !iconInline }"
+  >
+    <span
       ref="contenteditable"
       contenteditable
       style="min-width: 2px"
-      class="peer outline-none"
+      :class="iconInline ? 'inline' : 'block'"
+      class="peer outline-none focus:block"
       @keydown.enter.prevent="onEnter"
+      @focus="$emit('focus', $event)"
       @blur="onBlur"
     >
       {{ value }}
-    </div>
+    </span>
     <IconPencil
       contenteditable="false"
-      class="absolute ml-1 cursor-pointer inline opacity-0 group-hover:opacity-100 peer-focus:opacity-0 align-middle"
-      :style="{ right: -(1.1 * iconWidth) + 'px' }"
+      class="cursor-pointer ml-1 flex-none opacity-0 group-hover:opacity-100 align-middle peer-focus:hidden"
+      :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
+      :class="{ 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       @click="onPencilClick"
     />
@@ -34,13 +40,18 @@ export default {
       required: false,
       default: ''
     },
+    iconInline: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     iconWidth: {
       type: Number,
       required: false,
       default: 30
     }
   },
-  emits: ['update:model-value'],
+  emits: ['update:model-value', 'focus', 'blur'],
   data () {
     return {
       value: ''
@@ -59,6 +70,7 @@ export default {
       this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
 
       this.$emit('update:model-value', this.value)
+      this.$emit('blur', e)
     },
     onPencilClick () {
       this.$refs.contenteditable.focus()
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 73061649..6ac9d150 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -3,11 +3,11 @@
     <Page
       v-for="(image, index) in sortedPreviewImages"
       :key="image.id"
+      :ref="setPageRefs"
       :number="index"
       :areas="areasIndex[index]"
       :is-draw="isDraw"
       :is-drag="isDrag"
-      :class="{ 'cursor-crosshair': isDraw }"
       :image="image"
       @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
       @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
@@ -44,10 +44,28 @@ export default {
     }
   },
   emits: ['draw', 'drop-field'],
+  data () {
+    return {
+      pageRefs: []
+    }
+  },
   computed: {
     sortedPreviewImages () {
       return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))
     }
+  },
+  beforeUpdate () {
+    this.pageRefs = []
+  },
+  methods: {
+    scrollToArea (area) {
+      this.pageRefs[area.page].areaRefs.find((e) => e.bounds === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    },
+    setPageRefs (el) {
+      if (el) {
+        this.pageRefs.push(el)
+      }
+    }
   }
 }
 </script>
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 19fc6c1f..d9618593 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -1,86 +1,243 @@
 <template>
-  <div>
-    <button @click="$emit('remove', field)">
-      Remove
-    </button>
-    <div>
-      {{ field.type }}
-    </div>
-    <div v-if="field.type !== 'signature'">
-      <label>Name</label>
-      <input
-        v-model="field.name"
-        type="text"
-        required
-      >
-    </div>
-    <div>
-      <div
-        v-for="(option, index) in field.options"
-        :key="index"
-        class="flex"
-      >
-        <input
-          v-model="field.options[index]"
-          type="text"
-          required
-        >
-        <button @click="field.options.splice(index, 1)">
-          Remove
-        </button>
+  <div
+    class="group pb-2"
+    @mouseleave="closeDropdown"
+  >
+    <div
+      class="border border-base-content rounded rounded-tr-none relative group"
+    >
+      <div class="flex items-center justify-between space-x-1">
+        <div class="flex items-center p-1 space-x-1">
+          <span class="dropdown">
+            <label
+              tabindex="0"
+              title="Type"
+              class="cursor-pointer"
+            >
+              <component
+                :is="fieldIcons[field.type]"
+                width="18"
+                :stroke-width="1.6"
+              />
+            </label>
+            <ul
+              tabindex="0"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52"
+              @click="closeDropdown"
+            >
+              <li
+                v-for="(name, type) in fieldNames"
+                :key="type"
+              >
+                <a
+                  href="#"
+                  class="text-sm py-1 px-2"
+                  :class="{ 'active': type === field.type }"
+                  @click.prevent="field.type = type"
+                >
+                  <component
+                    :is="fieldIcons[type]"
+                    :stroke-width="1.6"
+                    :width="20"
+                  />
+                  {{ name }}
+                </a>
+              </li>
+            </ul>
+          </span>
+          <Contenteditable
+            ref="name"
+            :model-value="field.name || defaultName"
+            :icon-inline="true"
+            :icon-width="19"
+            @focus="onNameFocus"
+            @blur="onNameBlur"
+          />
+        </div>
+        <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100">
+          <span class="dropdown dropdown-end">
+            <label
+              tabindex="0"
+              title="Areas"
+              class="cursor-pointer"
+            >
+              <IconShape
+                :width="20"
+                :stroke-width="1.6"
+              />
+            </label>
+            <ul
+              tabindex="0"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52"
+              @click="closeDropdown"
+            >
+              <li
+                v-for="(area, index) in field.areas || []"
+                :key="index"
+              >
+                <a
+                  href="#"
+                  class="text-sm py-1 px-2"
+                  @click.prevent="$emit('scroll-to', area)"
+                >
+                  <IconShape
+                    :width="20"
+                    :stroke-width="1.6"
+                  />
+                  Page {{ area.page + 1 }}
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  class="text-sm py-1 px-2"
+                  @click.prevent="$emit('set-draw', field)"
+                >
+                  <IconNewSection
+                    :width="20"
+                    :stroke-width="1.6"
+                  />
+                  Draw New Area
+                </a>
+              </li>
+            </ul>
+          </span>
+          <button @click="$emit('remove', field)">
+            <IconTrashX
+              :width="20"
+              :stroke-width="1.6"
+            />
+          </button>
+          <div class="flex flex-col pr-1">
+            <button
+              title="Up"
+              style="font-size: 10px; margin-bottom: -2px"
+              @click="$emit('move-up')"
+            >
+              ▲
+            </button>
+            <button
+              title="Down"
+              style="font-size: 10px; margin-top: -2px"
+              @click="$emit('move-down')"
+            >
+              ▼
+            </button>
+          </div>
+        </div>
       </div>
-      <button
-        v-if="field.options"
-        @click="field.options.push('')"
-      >
-        Add option
-      </button>
-    </div>
-    <div>
       <div
-        v-for="(area, index) in areas"
-        :key="index"
+        v-if="field.options"
+        class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
       >
-        Area {{ index + 1 }}
-        <button @click="removeArea(area)">
-          &times;
+        <div
+          v-for="(option, index) in field.options"
+          :key="index"
+          class="flex space-x-1.5 items-center"
+        >
+          <span class="text-sm">
+            {{ index + 1 }}.
+          </span>
+          <input
+            v-model="field.options[index]"
+            class="w-full input input-primary input-xs text-sm"
+            type="text"
+            required
+          >
+          <button
+            class="text-sm"
+            @click="field.options.splice(index, 1)"
+          >
+            &times;
+          </button>
+        </div>
+        <button
+          v-if="field.options"
+          class="text-center text-sm w-full pb-1"
+          @click="field.options.push('')"
+        >
+          + Add option
         </button>
       </div>
-      <button
-        class="block"
-        @click="$emit('set-draw', field)"
-      >
-        Draw area
-      </button>
-    </div>
-    <div>
-      <input
-        :id="`field_required_${field.uuid}`"
-        v-model="field.required"
-        type="checkbox"
-        required
-      >
-      <label :for="`field_required_${field.uuid}`">Required</label>
     </div>
   </div>
 </template>
 
 <script>
+import Contenteditable from './contenteditable'
+import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconShape, IconNewSection, IconTrashX } from '@tabler/icons-vue'
+
 export default {
   name: 'TemplateField',
+  components: {
+    Contenteditable,
+    IconShape,
+    IconNewSection,
+    IconTrashX
+  },
   props: {
     field: {
       type: Object,
       required: true
+    },
+    typeIndex: {
+      type: Number,
+      required: false,
+      default: 0
     }
   },
-  emits: ['set-draw', 'remove'],
+  emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
   computed: {
+    defaultName () {
+      return `${this.fieldNames[this.field.type]} Field ${this.typeIndex + 1}`
+    },
     areas () {
       return this.field.areas || []
+    },
+    fieldNames () {
+      return {
+        text: 'Text',
+        signature: 'Signature',
+        date: 'Date',
+        image: 'Image',
+        attachment: 'File',
+        select: 'Select',
+        checkbox: 'Checkbox',
+        radio: 'Radio'
+      }
+    },
+    fieldIcons () {
+      return {
+        text: IconTextSize,
+        signature: IconWriting,
+        date: IconCalendarEvent,
+        image: IconPhoto,
+        attachment: IconPaperclip,
+        select: IconSelect,
+        checkbox: IconCheckbox,
+        radio: IconCircleDot
+      }
     }
   },
   methods: {
+    onNameFocus (e) {
+      if (!this.field.name) {
+        setTimeout(() => {
+          this.$refs.name.$refs.contenteditable.innerText = ' '
+        }, 1)
+      }
+    },
+    closeDropdown () {
+      document.activeElement.blur()
+    },
+    onNameBlur (e) {
+      if (e.target.innerText.trim()) {
+        this.field.name = e.target.innerText.trim()
+      } else {
+        this.field.name = ''
+        this.$refs.name.$refs.contenteditable.innerText = this.defaultName
+      }
+    },
     removeArea (area) {
       this.field.areas.splice(this.field.areas.indexOf(area), 1)
     }
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index b5f009b1..9eb25214 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -1,52 +1,67 @@
 <template>
-  <div class="space-y-2">
+  <div class="mb-2">
     <Field
       v-for="field in fields"
       :key="field.uuid"
-      class="border"
       :field="field"
+      :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       @remove="fields.splice(fields.indexOf($event), 1)"
+      @move-up="move(field, -1)"
+      @move-down="move(field, 1)"
+      @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <button
-    v-for="item in fieldTypes"
-    :key="item.type"
-    draggable="true"
-    class="w-full flex items-center justify-center"
-    @dragstart="onDragstart(item.value)"
-    @dragend="$emit('drag-end')"
-    @click="addField(item.value)"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="cursor-move"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+  <div class="grid grid-cols-3 gap-1">
+    <button
+      v-for="item in fieldTypes"
+      :key="item.type"
+      draggable="true"
+      class="flex items-center justify-center border border-dashed border-gray-300 bg-base-100 w-full rounded relative"
+      @dragstart="onDragstart(item.value)"
+      @dragend="$emit('drag-end')"
+      @click="addField(item.value)"
     >
-      <path
-        stroke="none"
-        d="M0 0h24v24H0z"
-        fill="none"
-      />
-      <path d="M4 6l16 0" />
-      <path d="M4 12l16 0" />
-      <path d="M4 18l16 0" />
-    </svg>
-    Add {{ item.label }}
-    &plus;
-  </button>
+      <div class="w-0 absolute left-0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="cursor-grab"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            stroke="none"
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        </svg>
+      </div>
+      <div class="flex items-center flex-col px-2 py-2">
+        <component :is="item.icon" />
+        <span class="text-xs mt-1">
+          {{ item.label }}
+        </span>
+      </div>
+    </button>
+  </div>
 </template>
 
 <script>
 import Field from './field'
 import { v4 } from 'uuid'
+import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot } from '@tabler/icons-vue'
 
 export default {
   name: 'TemplateFields',
@@ -59,18 +74,18 @@ export default {
       required: true
     }
   },
-  emits: ['set-draw', 'set-drag', 'drag-end'],
+  emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area'],
   computed: {
     fieldTypes () {
       return [
-        { label: 'Text', value: 'text' },
-        { label: 'Signature', value: 'signature' },
-        { label: 'Date', value: 'date' },
-        { label: 'Image', value: 'image' },
-        { label: 'Attachment', value: 'attachment' },
-        { label: 'Select', value: 'select' },
-        { label: 'Checkbox', value: 'checkbox' },
-        { label: 'Radio Group', value: 'radio' }
+        { label: 'Text', value: 'text', icon: IconTextSize },
+        { label: 'Signature', value: 'signature', icon: IconWriting },
+        { label: 'Date', value: 'date', icon: IconCalendarEvent },
+        { label: 'Image', value: 'image', icon: IconPhoto },
+        { label: 'File', value: 'attachment', icon: IconPaperclip },
+        { label: 'Select', value: 'select', icon: IconSelect },
+        { label: 'Checkbox', value: 'checkbox', icon: IconCheckbox },
+        { label: 'Radio', value: 'radio', icon: IconCircleDot }
       ]
     }
   },
@@ -78,6 +93,19 @@ export default {
     onDragstart (fieldType) {
       this.$emit('set-drag', fieldType)
     },
+    move (field, direction) {
+      const currentIndex = this.fields.indexOf(field)
+
+      this.fields.splice(currentIndex, 1)
+
+      if (currentIndex + direction > this.fields.length) {
+        this.fields.unshift(field)
+      } else if (currentIndex + direction < 0) {
+        this.fields.push(field)
+      } else {
+        this.fields.splice(currentIndex + direction, 0, field)
+      }
+    },
     addField (type, area = null) {
       const field = {
         name: type === 'signature' ? 'Signature' : '',
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index 0f67f6ce..349aeb3a 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative cursor-crosshair">
     <img
       ref="image"
       :src="image.url"
@@ -10,10 +10,12 @@
     >
     <div
       class="top-0 bottom-0 left-0 right-0 absolute"
+      @pointerdown="onStartDraw"
     >
       <FieldArea
         v-for="(item, i) in areas"
         :key="i"
+        :ref="setAreaRefs"
         :bounds="item.area"
         :field="item.field"
         @start-resize="showMask = true"
@@ -27,11 +29,10 @@
       />
     </div>
     <div
-      v-show="isDraw || isDrag || showMask"
+      v-show="isDrag || showMask"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute"
-      @pointerdown="onPointerdown"
       @pointermove="onPointermove"
       @dragover.prevent
       @drop="onDrop"
@@ -58,11 +59,6 @@ export default {
       required: false,
       default: () => []
     },
-    isDraw: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     isDrag: {
       type: Boolean,
       required: false,
@@ -76,6 +72,7 @@ export default {
   emits: ['draw', 'drop-field'],
   data () {
     return {
+      areaRefs: [],
       showMask: false,
       newArea: null
     }
@@ -88,7 +85,15 @@ export default {
       return this.image.metadata.height
     }
   },
+  beforeUpdate () {
+    this.areaRefs = []
+  },
   methods: {
+    setAreaRefs (el) {
+      if (el) {
+        this.areaRefs.push(el)
+      }
+    },
     onDrop (e) {
       this.$emit('drop-field', {
         x: e.layerX / this.$refs.mask.clientWidth,
@@ -98,8 +103,10 @@ export default {
         page: this.number
       })
     },
-    onPointerdown (e) {
-      if (this.isDraw) {
+    onStartDraw (e) {
+      this.showMask = true
+
+      this.$nextTick(() => {
         this.newArea = {
           initialX: e.layerX / this.$refs.mask.clientWidth,
           initialY: e.layerY / this.$refs.mask.clientHeight,
@@ -108,7 +115,7 @@ export default {
           w: 0,
           h: 0
         }
-      }
+      })
     },
     onPointermove (e) {
       if (this.newArea) {
@@ -132,16 +139,17 @@ export default {
       }
     },
     onPointerup (e) {
-      if (this.isDraw && this.newArea) {
+      if (this.newArea) {
         this.$emit('draw', {
           x: this.newArea.x,
           y: this.newArea.y,
-          w: Math.max(this.newArea.w, this.$refs.mask.clientWidth / 5 / this.$refs.mask.clientWidth),
-          h: Math.max(this.newArea.h, this.$refs.mask.clientWidth / 30 / this.$refs.mask.clientWidth),
+          w: this.newArea.w,
+          h: this.newArea.h,
           page: this.number
         })
       }
 
+      this.showMask = false
       this.newArea = null
     }
   }
diff --git a/app/javascript/template_builder/preview.vue b/app/javascript/template_builder/preview.vue
index fafbdfb7..d4146092 100644
--- a/app/javascript/template_builder/preview.vue
+++ b/app/javascript/template_builder/preview.vue
@@ -46,10 +46,11 @@
         </div>
       </div>
     </div>
-    <div class="flex py-2">
+    <div class="flex pb-2 pt-1.5">
       <Contenteditable
         :model-value="item.name"
         :icon-width="16"
+        style="max-width: 95%"
         class="mx-auto"
         @update:model-value="onUpdateName"
       />
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4a643585..3bae5911 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -15,7 +15,7 @@
     <turbo-frame id="modal"></turbo-frame>
     <%= render 'shared/navbar' %>
     <% if flash.present? %>
-      <div id="flash" class="absolute top-0 w-full">
+      <div id="flash" class="absolute top-0 w-full h-0">
         <div class="max-w-xl mx-auto mt-1.5">
           <div class="alert py-3">
             <div class="flex w-full justify-between">
diff --git a/yarn.lock b/yarn.lock
index c76bdc1a..5b8a345f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5599,9 +5599,9 @@ yaml@^1.10.0:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.1.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.2.tgz#ec551ef37326e6d42872dad1970300f8eb83a073"
-  integrity sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
+  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
 
 yocto-queue@^0.1.0:
   version "0.1.0"