From bac00b5a3600496a12fe58d0b1bc4da3b52a6212 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 9 Mar 2023 20:49:45 +0530
Subject: [PATCH] fix(ui/ux): continuous drag for template pane - remove border
 radius on

---
 src/components/Controls/AutoComplete.vue      |  1 +
 src/components/Controls/Base.vue              |  4 +-
 src/components/HorizontalResizer.vue          | 52 ++++++-------------
 src/pages/TemplateBuilder/TemplateBuilder.vue | 28 +++++++---
 4 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index 3c6ad2a0..8b7ca303 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -13,6 +13,7 @@
       </div>
       <div
         class="flex items-center justify-between pe-2 rounded"
+        :style="containerStyles"
         :class="containerClasses"
       >
         <input
diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index 0fc29198..9bb751fd 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -16,7 +16,7 @@
         :step="step"
         :max="df.maxvalue"
         :min="df.minvalue"
-        :style="inputStyles"
+        :style="containerStyles"
         @blur="(e) => !isReadOnly && triggerChange(e.target.value)"
         @focus="(e) => !isReadOnly && $emit('focus', e)"
         @input="(e) => !isReadOnly && $emit('input', e)"
@@ -42,7 +42,7 @@ export default {
     size: String,
     showLabel: Boolean,
     autofocus: Boolean,
-    inputStyles: { type: Object, default: () => ({}) },
+    containerStyles: { type: Object, default: () => ({}) },
     textRight: { type: [null, Boolean], default: null },
     readOnly: { type: [null, Boolean], default: null },
     required: { type: [null, Boolean], default: null },
diff --git a/src/components/HorizontalResizer.vue b/src/components/HorizontalResizer.vue
index b5f6225f..9674b5cd 100644
--- a/src/components/HorizontalResizer.vue
+++ b/src/components/HorizontalResizer.vue
@@ -31,11 +31,16 @@ import MouseFollower from './MouseFollower.vue';
 
 export default defineComponent({
   emits: ['resize'],
-  props: { initialX: Number, minX: Number, maxX: Number },
+  props: {
+    initialX: { type: Number, required: true },
+    minX: Number,
+    maxX: Number,
+  },
   data() {
     return {
       x: 0,
       delta: 0,
+      xOnMouseDown: 0,
       resizing: false,
       listener: null,
     };
@@ -43,9 +48,9 @@ export default defineComponent({
   methods: {
     onMouseDown(e: MouseEvent) {
       e.preventDefault();
-      const { clientX } = e;
 
-      this.setX(clientX);
+      this.x = e.clientX;
+      this.xOnMouseDown = this.initialX;
       this.setResizing(true);
 
       document.addEventListener('mousemove', this.mouseMoveListener);
@@ -53,18 +58,17 @@ export default defineComponent({
     },
     mouseUpListener(e: MouseEvent) {
       e.preventDefault();
-      const { clientX } = e;
 
-      this.setX(clientX);
+      this.x = e.clientX;
       this.setResizing(false);
 
-      this.emitValue(this.x - clientX);
+      this.$emit('resize', this.value);
       this.removeListeners();
     },
     mouseMoveListener(e: MouseEvent) {
       e.preventDefault();
-      const { clientX } = e;
-      this.delta = this.x - clientX;
+      this.delta = this.x - e.clientX;
+      this.$emit('resize', this.value);
     },
     removeListeners() {
       document.removeEventListener('mousemove', this.mouseMoveListener);
@@ -80,36 +84,10 @@ export default defineComponent({
         document.body.style.cursor = '';
       }
     },
-    setX(x?: number): void {
-      if (typeof x === 'number') {
-        this.x = x;
-        return;
-      }
-      const hr = this.$refs.hr;
-      if (!(hr instanceof HTMLDivElement)) {
-        return;
-      }
-      this.x = hr.getBoundingClientRect().x;
-    },
-    emitValue(delta: number) {
-      if (typeof this.minDelta === 'number') {
-        delta = Math.max(delta, this.minDelta);
-      }
-
-      if (typeof this.maxDelta === 'number') {
-        delta = Math.min(delta, this.maxDelta);
-      }
-
-      this.$emit('resize', delta, this.value);
-    },
   },
   computed: {
     value() {
-      if (typeof this.initialX !== 'number') {
-        return this.delta;
-      }
-
-      let value = this.delta + this.initialX;
+      let value = this.delta + this.xOnMouseDown;
       if (typeof this.minX === 'number') {
         value = Math.max(this.minX, value);
       }
@@ -121,14 +99,14 @@ export default defineComponent({
       return value;
     },
     minDelta() {
-      if (typeof this.minX !== 'number' || typeof this.initialX !== 'number') {
+      if (typeof this.minX !== 'number') {
         return null;
       }
 
       return this.initialX - this.minX;
     },
     maxDelta() {
-      if (typeof this.maxX !== 'number' || typeof this.initialX !== 'number') {
+      if (typeof this.maxX !== 'number') {
         return null;
       }
 
diff --git a/src/pages/TemplateBuilder/TemplateBuilder.vue b/src/pages/TemplateBuilder/TemplateBuilder.vue
index c37e1053..8f5ff3ec 100644
--- a/src/pages/TemplateBuilder/TemplateBuilder.vue
+++ b/src/pages/TemplateBuilder/TemplateBuilder.vue
@@ -34,11 +34,11 @@
           {{ helperMessage }}
         </p>
 
+        <!-- Template Container -->
         <div
           v-else-if="doc.template && values"
           class="p-4 overflow-auto custom-scroll"
         >
-          <!-- Template Container -->
           <PrintContainer
             ref="printContainer"
             :template="doc.template"
@@ -46,6 +46,8 @@
             :scale="scale"
           />
         </div>
+
+        <!-- Bottom Bar -->
         <div
           class="
             w-full
@@ -58,15 +60,18 @@
             flex-shrink-0
           "
         >
+          <!-- Entry Type -->
           <FormControl
             :title="fields.type.label"
             class="w-40 border-r flex-shrink-0"
             :df="fields.type"
             :border="false"
             :value="doc.get('type')"
+            :container-styles="{ 'border-radius': '0px' }"
             @change="async (value) => await setType(value)"
           />
 
+          <!-- Display Doc -->
           <FormControl
             v-if="doc.type"
             :title="displayDocField.label"
@@ -74,9 +79,11 @@
             :df="displayDocField"
             :border="false"
             :value="displayDoc?.name"
+            :container-styles="{ 'border-radius': '0px' }"
             @change="(value: string) => setDisplayDoc(value)"
           />
 
+          <!-- Display Scale -->
           <div
             class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
           >
@@ -107,20 +114,21 @@
         class="z-20"
         :initial-x="panelWidth"
         :min-x="22 * 16"
-        @resize="(_: number, value: number) => panelWidth = value"
+        :max-x="maxWidth"
+        @resize="(x: number) => panelWidth = x"
       />
 
-      <!-- Input Panel -->
+      <!-- Template Panel -->
       <div
         class="border-l bg-white flex flex-col"
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
         <!-- Template Name -->
         <FormControl
-          class="w-full border-b z-10 flex-shrink-0"
+          class="w-full border-b flex-shrink-0"
           size="small"
-          :input-class="['font-semibold text-xl']"
-          :input-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
+          :input-class="['font-semibold text-xl text-center']"
+          :container-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
           :df="fields.name"
           :border="false"
           :value="doc.get('name')"
@@ -139,8 +147,9 @@
           />
         </div>
 
-        <!-- Value Key Hints -->
+        <!-- Value Key Hints Container -->
         <div class="border-t mt-auto flex-shrink-0" v-if="hints">
+          <!-- Value Key Toggle -->
           <div
             class="
               flex
@@ -160,6 +169,8 @@
               class="w-4 h-4 text-gray-600 resize-none"
             />
           </div>
+
+          <!-- Value Key Hints -->
           <div
             v-if="showHints"
             class="overflow-auto custom-scroll p-2 border-t"
@@ -365,6 +376,9 @@ export default defineComponent({
     },
   },
   computed: {
+    maxWidth() {
+      return window.innerWidth - 12 * 16 - 100;
+    },
     actions() {
       if (!this.doc) {
         return [];