From f0ccd82e361cf3570c4ff279b25b2a522b5a1a50 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:13 +0000
Subject: [PATCH] fix(nc-gui): drag drop not smooth in month view

---
 .../components/smartsheet/calendar/MonthView.vue | 16 ++++------------
 .../calendar/WeekView/DateTimeField.vue          |  6 +++---
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index b34a7fbc81..32cfaad06c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -445,13 +445,11 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
 }
 
 const stopDrag = (event: MouseEvent) => {
-  if (!isUIAllowed('dataEdit') || !dragRecord.value) return
+  if (!isUIAllowed('dataEdit') || !dragRecord.value || !isDragging.value) return
 
   event.preventDefault()
   clearTimeout(dragTimeout.value)
 
-  if (!isDragging.value) return
-
   dragElement.value!.style.boxShadow = 'none'
 
   const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
@@ -547,6 +545,8 @@ const dragStart = (event: MouseEvent, record: Row) => {
   isDragging.value = false
 
   dragTimeout.value = setTimeout(() => {
+    isDragging.value = true
+
     while (!target.classList.contains('draggable-record')) {
       target = target.parentElement as HTMLElement
     }
@@ -568,7 +568,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
 
     document.addEventListener('mousemove', onDrag)
     document.addEventListener('mouseup', stopDrag)
-  }, 500)
+  }, 200)
 
   const onMouseUp = () => {
     clearTimeout(dragTimeout.value)
@@ -685,14 +685,6 @@ const isDateSelected = (date: Date) => {
   if (!selectedDate.value) return false
   return dayjs(date).isSame(selectedDate.value, 'day')
 }
-
-onMounted(() => {
-  document.addEventListener('mouseup', stopDrag)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mouseup', stopDrag)
-})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 6dfef85ff5..92158d261c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -436,12 +436,12 @@ const onDrag = (event: MouseEvent) => {
 }
 
 const stopDrag = (event: MouseEvent) => {
-  event.preventDefault()
-  clearTimeout(dragTimeout.value!)
-
   if (!isUIAllowed('dataEdit')) return
   if (!isDragging.value || !container.value || !dragRecord.value) return
 
+  event.preventDefault()
+  clearTimeout(dragTimeout.value!)
+
   const { width, left, top } = container.value.getBoundingClientRect()
 
   const { scrollHeight } = container.value