From 7a4629bf79b77e975cf7619ac3d32c8f773b691b Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Mon, 17 Feb 2025 19:47:46 +0200
Subject: [PATCH] improve drag'n'drop in the builder

---
 app/javascript/template_builder/builder.vue   | 126 ++++++++++++------
 app/javascript/template_builder/document.vue  |   6 +
 .../template_builder/drag_placeholder.vue     | 115 ++++++++++++++++
 app/javascript/template_builder/field.vue     |   9 +-
 app/javascript/template_builder/fields.vue    |  67 +++++++---
 app/javascript/template_builder/page.vue      |  30 ++++-
 6 files changed, 290 insertions(+), 63 deletions(-)
 create mode 100644 app/javascript/template_builder/drag_placeholder.vue

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 1cc9dbf1..cf3fe21a 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -1,9 +1,18 @@
 <template>
   <div
+    ref="dragContainer"
     style="max-width: 1600px"
     class="mx-auto pl-3 h-full"
     :class="isMobile ? 'pl-4' : 'md:pl-4'"
+    @dragover="onDragover"
   >
+    <DragPlaceholder
+      ref="dragPlaceholder"
+      :field="fieldsDragFieldRef.value || toRaw(dragField)"
+      :is-field="template.fields.includes(fieldsDragFieldRef.value)"
+      :is-default="defaultFields.includes(toRaw(dragField))"
+      :is-required="defaultRequiredFields.includes(toRaw(dragField))"
+    />
     <div
       v-if="pendingFieldAttachmentUuids.length && editable"
       class="top-1.5 sticky h-0 z-20 max-w-2xl mx-auto"
@@ -269,6 +278,7 @@
                 :allow-draw="!onlyDefinedFields || drawField"
                 :data-document-uuid="document.uuid"
                 :default-submitters="defaultSubmitters"
+                :drag-field-placeholder="fieldsDragFieldRef.value || dragField"
                 :with-field-placeholder="withFieldPlaceholder"
                 :draw-field="drawField"
                 :draw-field-type="drawFieldType"
@@ -378,8 +388,9 @@
             @set-draw="[drawField = $event.field, drawOption = $event.option]"
             @set-draw-type="[drawFieldType = $event, showDrawField = true]"
             @set-drag="dragField = $event"
+            @set-drag-placeholder="$refs.dragPlaceholder.dragPlaceholder = $event"
             @change-submitter="selectedSubmitter = $event"
-            @drag-end="dragField = null"
+            @drag-end="[dragField = null, $refs.dragPlaceholder.dragPlaceholder = null]"
             @scroll-to-area="scrollToArea"
           />
         </div>
@@ -418,6 +429,7 @@
 <script>
 import Upload from './upload'
 import Dropzone from './dropzone'
+import DragPlaceholder from './drag_placeholder'
 import Fields from './fields'
 import MobileDrawField from './mobile_draw_field'
 import Document from './document'
@@ -429,13 +441,14 @@ import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
-import { ref, computed } from 'vue'
+import { ref, computed, toRaw } from 'vue'
 import * as i18n from './i18n'
 
 export default {
   name: 'TemplateBuilder',
   components: {
     Upload,
+    DragPlaceholder,
     Document,
     Fields,
     IconInfoCircle,
@@ -460,6 +473,7 @@ export default {
       template: this.template,
       save: this.save,
       t: this.t,
+      assignDropAreaSize: this.assignDropAreaSize,
       currencies: this.currencies,
       locale: this.locale,
       baseFetch: this.baseFetch,
@@ -836,6 +850,17 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    toRaw,
+    onDragover (e) {
+      if (this.$refs.dragPlaceholder?.dragPlaceholder) {
+        this.$refs.dragPlaceholder.isMask = e.target.id === 'mask'
+
+        const ref = this.$refs.dragPlaceholder.dragPlaceholder
+
+        ref.x = e.clientX - ref.offsetX
+        ref.y = e.clientY - ref.offsetY
+      }
+    },
     reorderFields (item) {
       const itemFields = []
       const fields = []
@@ -1319,6 +1344,10 @@ export default {
       }
     },
     onDropfield (area) {
+      if (this.$refs.dragPlaceholder) {
+        this.$refs.dragPlaceholder.dragPlaceholder = null
+      }
+
       if (!this.editable) {
         return
       }
@@ -1331,6 +1360,10 @@ export default {
         ...this.dragField
       }
 
+      if (!field.type) {
+        field.type = 'text'
+      }
+
       if (!this.fieldsDragFieldRef.value) {
         if (['select', 'multiple', 'radio'].includes(field.type)) {
           if (this.dragField?.options?.length) {
@@ -1357,31 +1390,69 @@ export default {
         attachment_uuid: area.attachment_uuid
       }
 
-      const previousField = [...this.template.fields].reverse().find((f) => f.type === field.type)
+      this.assignDropAreaSize(fieldArea, field, area)
+
+      if (field.width) {
+        delete field.width
+      }
+
+      if (field.height) {
+        delete field.height
+      }
+
+      field.areas ||= []
+
+      field.areas.push(fieldArea)
+
+      this.selectedAreaRef.value = fieldArea
+
+      if (this.template.fields.indexOf(field) === -1) {
+        this.template.fields.push(field)
+      }
+
+      this.save()
+
+      document.activeElement?.blur()
+
+      if (field.type === 'heading') {
+        this.$nextTick(() => {
+          const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+          const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
+
+          areaRef.isHeadingSelected = true
+
+          areaRef.focusValueInput()
+        })
+      }
+    },
+    assignDropAreaSize (fieldArea, field, area) {
+      const fieldType = field.type || 'text'
+
+      const previousField = [...this.template.fields].reverse().find((f) => f.type === fieldType)
 
       let baseArea
 
-      if (this.selectedField?.type === field.type) {
+      if (this.selectedField?.type === fieldType) {
         baseArea = this.selectedAreaRef.value
       } else if (previousField?.areas?.length) {
         baseArea = previousField.areas[previousField.areas.length - 1]
       } else {
-        if (['checkbox'].includes(field.type)) {
+        if (['checkbox'].includes(fieldType)) {
           baseArea = {
             w: area.maskW / 30 / area.maskW,
             h: area.maskW / 30 / area.maskW * (area.maskW / area.maskH)
           }
-        } else if (field.type === 'image') {
+        } else if (fieldType === 'image') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (field.type === 'signature' || field.type === 'stamp' || field.type === 'verification') {
+        } else if (fieldType === 'signature' || fieldType === 'stamp' || fieldType === 'verification') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
           }
-        } else if (field.type === 'initials') {
+        } else if (fieldType === 'initials') {
           baseArea = {
             w: area.maskW / 10 / area.maskW,
             h: area.maskW / 35 / area.maskW
@@ -1398,50 +1469,25 @@ export default {
       fieldArea.h = baseArea.h
       fieldArea.y = fieldArea.y - baseArea.h / 2
 
-      if (field.type === 'cells') {
+      if (fieldType === 'cells') {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
       }
 
-      field.areas ||= []
-
-      const lastArea = field.areas[field.areas.length - 1]
+      if (field.areas?.length) {
+        const lastArea = field.areas[field.areas.length - 1]
 
-      if (lastArea) {
-        fieldArea.w = lastArea.w
-        fieldArea.h = lastArea.h
+        if (lastArea) {
+          fieldArea.w = lastArea.w
+          fieldArea.h = lastArea.h
+        }
       }
 
       if (field.width) {
         fieldArea.w = field.width / area.maskW
-        delete field.width
       }
 
       if (field.height) {
         fieldArea.h = field.height / area.maskH
-        delete field.height
-      }
-
-      field.areas.push(fieldArea)
-
-      this.selectedAreaRef.value = fieldArea
-
-      if (this.template.fields.indexOf(field) === -1) {
-        this.template.fields.push(field)
-      }
-
-      this.save()
-
-      document.activeElement?.blur()
-
-      if (field.type === 'heading') {
-        this.$nextTick(() => {
-          const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
-          const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
-
-          areaRef.isHeadingSelected = true
-
-          areaRef.focusValueInput()
-        })
       }
     },
     addBlankPage () {
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 88680e54..ea0b850e 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -13,6 +13,7 @@
       :is-drag="isDrag"
       :with-field-placeholder="withFieldPlaceholder"
       :default-fields="defaultFields"
+      :drag-field-placeholder="dragFieldPlaceholder"
       :default-submitters="defaultSubmitters"
       :draw-field="drawField"
       :draw-field-type="drawFieldType"
@@ -39,6 +40,11 @@ export default {
       type: Object,
       required: true
     },
+    dragFieldPlaceholder: {
+      type: Object,
+      required: false,
+      default: null
+    },
     inputMode: {
       type: Boolean,
       required: false,
diff --git a/app/javascript/template_builder/drag_placeholder.vue b/app/javascript/template_builder/drag_placeholder.vue
new file mode 100644
index 00000000..71a1236c
--- /dev/null
+++ b/app/javascript/template_builder/drag_placeholder.vue
@@ -0,0 +1,115 @@
+<template>
+  <Field
+    v-if="dragPlaceholder && isField && !isMask && field"
+    ref="dragPlaceholder"
+    :style="dragPlaceholderStyle"
+    :field="field"
+    :with-options="false"
+    class="fixed z-20 pointer-events-none"
+    :editable="false"
+  />
+  <div
+    v-else-if="dragPlaceholder && (isDefault || isRequired) && !isMask && field"
+    ref="dragPlaceholder"
+    :style="[dragPlaceholderStyle, { backgroundColor: backgroundColor }]"
+    class="fixed z-20 border border-base-300 rounded group default-field fields-list-item pointer-events-none"
+  >
+    <div class="flex items-center justify-between relative cursor-grab">
+      <div class="flex items-center p-1 space-x-1">
+        <IconDrag />
+        <component
+          :is="fieldIcons[field.type || 'text']"
+          :stroke-width="1.6"
+          :width="20"
+        />
+        <span class="block pl-0.5">
+          {{ field.title || field.name }}
+        </span>
+      </div>
+      <span
+        v-if="isRequired"
+        :data-tip="t('required')"
+        class="text-red-400 text-3xl pr-1.5 tooltip tooltip-left h-8"
+      >
+        *
+      </span>
+    </div>
+  </div>
+  <button
+    v-else-if="dragPlaceholder && !isMask && field"
+    ref="dragPlaceholder"
+    class="fixed field-type-button z-20 flex items-center justify-center border border-dashed w-full rounded border-base-content/20 opacity-90 pointer-events-none"
+    :style="[dragPlaceholderStyle, { backgroundColor }]"
+  >
+    <div
+      class="flex items-console cursor-grab h-full absolute left-0 bg-base-200/50"
+    >
+      <IconDrag class="my-auto" />
+    </div>
+    <div class="flex items-center flex-col px-2 py-2">
+      <component :is="fieldIcons[field.type || 'text']" />
+      <span class="text-xs mt-1">
+        {{ fieldNames[field.type || 'text'] }}
+      </span>
+    </div>
+  </button>
+</template>
+
+<script>
+import Field from './field'
+import IconDrag from './icon_drag'
+import FieldType from './field_type'
+
+export default {
+  name: 'DragPlaceholder',
+  components: {
+    Field,
+    IconDrag
+  },
+  inject: ['t', 'backgroundColor'],
+  props: {
+    field: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    isDefault: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isField: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isMask: false,
+      dragPlaceholder: null
+    }
+  },
+  computed: {
+    dragPlaceholderStyle () {
+      if (this.dragPlaceholder) {
+        return {
+          left: this.dragPlaceholder.x + 'px',
+          top: this.dragPlaceholder.y + 'px',
+          width: this.dragPlaceholder.w + 'px',
+          height: this.dragPlaceholder.h + 'px'
+        }
+      } else {
+        return {}
+      }
+    },
+    fieldNames: FieldType.computed.fieldNames,
+    fieldIcons: FieldType.computed.fieldIcons
+  }
+}
+</script>
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 79bf6acb..a190d6cb 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -3,7 +3,7 @@
     class="list-field group mb-2"
   >
     <div
-      class="border border-base-300 rounded rounded-tr-none relative group fields-list-item"
+      class="border border-base-300 rounded relative group fields-list-item"
       :style="{ backgroundColor: backgroundColor }"
     >
       <div class="flex items-center justify-between relative group/contenteditable-container">
@@ -149,7 +149,7 @@
         </div>
       </div>
       <div
-        v-if="field.options"
+        v-if="field.options && withOptions"
         ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
         draggable="true"
@@ -302,6 +302,11 @@ export default {
       type: Object,
       required: true
     },
+    withOptions: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     defaultField: {
       type: Object,
       required: false,
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index d9ad7b95..38405ab5 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -25,11 +25,11 @@
       :data-uuid="field.uuid"
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
-      :editable="editable && (!fieldsDragFieldRef.value || fieldsDragFieldRef.value !== field)"
+      :editable="editable"
       :default-field="defaultFieldsIndex[field.name]"
       :draggable="editable"
-      @dragstart="fieldsDragFieldRef.value = field"
-      @dragend="fieldsDragFieldRef.value = null"
+      @dragstart="[fieldsDragFieldRef.value = field, removeDragOverlay($event), setDragPlaceholder($event)]"
+      @dragend="[fieldsDragFieldRef.value = null, $emit('set-drag-placeholder', null)]"
       @remove="removeField"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
@@ -74,8 +74,8 @@
         <div
           :style="{ backgroundColor }"
           draggable="true"
-          class="border border-base-300 rounded rounded-tr-none relative group mb-2 default-field fields-list-item"
-          @dragstart="onDragstart({ type: 'text', ...field })"
+          class="border border-base-300 rounded relative group mb-2 default-field fields-list-item"
+          @dragstart="onDragstart($event, field)"
           @dragend="$emit('drag-end')"
         >
           <div class="flex items-center justify-between relative cursor-grab">
@@ -116,7 +116,7 @@
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
         :style="{ backgroundColor }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
-        @dragstart="onDragstart({ type: type })"
+        @dragstart="onDragstart($event, { type: type })"
         @dragend="$emit('drag-end')"
         @click="['file', 'payment', 'verification'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
       >
@@ -292,7 +292,7 @@ export default {
       required: true
     }
   },
-  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
+  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder'],
   data () {
     return {
       defaultFieldsSearch: ''
@@ -343,22 +343,53 @@ export default {
     }
   },
   methods: {
-    onDragstart (field) {
+    onDragstart (event, field) {
+      this.removeDragOverlay(event)
+
+      this.setDragPlaceholder(event)
+
       this.$emit('set-drag', field)
     },
+    setDragPlaceholder (event) {
+      this.$emit('set-drag-placeholder', {
+        offsetX: event.offsetX,
+        offsetY: event.offsetY,
+        x: event.clientX - event.offsetX,
+        y: event.clientY - event.offsetY,
+        w: event.currentTarget.clientWidth + 2,
+        h: event.currentTarget.clientHeight + 2
+      })
+    },
+    removeDragOverlay (event) {
+      const root = this.$el.getRootNode()
+      const hiddenEl = document.createElement('div')
+
+      hiddenEl.style.width = '1px'
+      hiddenEl.style.height = '1px'
+      hiddenEl.style.opacity = '0'
+      hiddenEl.style.position = 'fixed'
+
+      root.querySelector('#docuseal_modal_container').appendChild(hiddenEl)
+
+      event.dataTransfer.setDragImage(hiddenEl, 0, 0)
+
+      setTimeout(() => { hiddenEl.remove() }, 1000)
+    },
     onFieldDragover (e) {
-      const targetField = e.target.closest('[data-uuid]')
-      const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
+      if (this.fieldsDragFieldRef.value) {
+        const targetField = e.target.closest('[data-uuid]')
+        const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
 
-      if (dragField && targetField && targetField !== dragField) {
-        const fields = Array.from(this.$refs.fields.children)
-        const currentIndex = fields.indexOf(dragField)
-        const targetIndex = fields.indexOf(targetField)
+        if (dragField && targetField && targetField !== dragField) {
+          const fields = Array.from(this.$refs.fields.children)
+          const currentIndex = fields.indexOf(dragField)
+          const targetIndex = fields.indexOf(targetField)
 
-        if (currentIndex < targetIndex) {
-          targetField.after(dragField)
-        } else {
-          targetField.before(dragField)
+          if (currentIndex < targetIndex) {
+            targetField.after(dragField)
+          } else {
+            targetField.before(dragField)
+          }
         }
       }
     },
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index 4161fd0b..4ff6bebf 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -37,7 +37,7 @@
       <FieldArea
         v-if="newArea"
         :is-draw="true"
-        :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || defaultFieldType }"
+        :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || dragFieldPlaceholder?.type || defaultFieldType }"
         :area="newArea"
       />
     </div>
@@ -49,7 +49,9 @@
       :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
       @pointerdown="onStartDraw"
-      @dragover.prevent
+      @dragover.prevent="onDragover"
+      @dragenter="onDragenter"
+      @dragleave="newArea = null"
       @drop="onDrop"
       @pointerup="onPointerup"
     />
@@ -64,12 +66,17 @@ export default {
   components: {
     FieldArea
   },
-  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'assignDropAreaSize'],
   props: {
     image: {
       type: Object,
       required: true
     },
+    dragFieldPlaceholder: {
+      type: Object,
+      required: false,
+      default: null
+    },
     areas: {
       type: Array,
       required: false,
@@ -192,7 +199,24 @@ export default {
         this.areaRefs.push(el)
       }
     },
+    onDragenter (e) {
+      this.newArea = {}
+
+      this.assignDropAreaSize(this.newArea, this.dragFieldPlaceholder, {
+        maskW: this.$refs.mask.clientWidth,
+        maskH: this.$refs.mask.clientHeight
+      })
+
+      this.newArea.x = (e.offsetX - 6) / this.$refs.mask.clientWidth
+      this.newArea.y = e.offsetY / this.$refs.mask.clientHeight - this.newArea.h / 2
+    },
+    onDragover (e) {
+      this.newArea.x = (e.offsetX - 6) / this.$refs.mask.clientWidth
+      this.newArea.y = e.offsetY / this.$refs.mask.clientHeight - this.newArea.h / 2
+    },
     onDrop (e) {
+      this.newArea = null
+
       this.$emit('drop-field', {
         x: e.offsetX,
         y: e.offsetY,