From 3c2504ef1eeee9b7cb78a727269a96bcf63e3d6e Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 17 Jun 2023 22:31:24 +0300
Subject: [PATCH] fix: improved mouse event handlers

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     |  2 +-
 .../composables/useMultiSelect/index.ts       | 65 ++++++++++---------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 8c5382d9ba..5a4595e7bb 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -1046,7 +1046,7 @@ function addEmptyRow(row?: number) {
                     :data-col="columnObj.id"
                     :data-title="columnObj.title"
                     @mousedown="handleMouseDown($event, rowIndex, colIndex)"
-                    @mouseover="handleMouseOver(rowIndex, colIndex)"
+                    @mouseover="handleMouseOver($event, rowIndex, colIndex)"
                     @click="handleCellClick($event, rowIndex, colIndex)"
                     @dblclick="makeEditable(row, columnObj)"
                     @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 04970e460c..2f546073c8 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -212,13 +212,6 @@ export function useMultiSelect(
     }
   }
 
-  function handleMouseOver(row: number, col: number) {
-    if (!isMouseDown) {
-      return
-    }
-    selectedRange.endRange({ row, col })
-  }
-
   function isCellSelected(row: number, col: number) {
     if (activeCell.col === col && activeCell.row === row) {
       return true
@@ -236,6 +229,19 @@ export function useMultiSelect(
     )
   }
 
+  function handleMouseOver(event: MouseEvent, row: number, col: number) {
+    if (!isMouseDown) {
+      return
+    }
+
+    // extend the selection and scroll to the cell
+    selectedRange.endRange({ row, col })
+    scrollToCell?.(row, col)
+
+    // avoid selecting text
+    event.preventDefault()
+  }
+
   function handleMouseDown(event: MouseEvent, row: number, col: number) {
     // if there was a right click on selected range, don't restart the selection
     if (
@@ -245,13 +251,26 @@ export function useMultiSelect(
       return
     }
 
-    isMouseDown = true
+    // if edit is enabled, don't start the selection (some cells shrink after edit mode, which causes the selection to expand if flag is set)
+    if (!editEnabled.value) isMouseDown = true
 
     contextMenu.value = false
 
-    // if shift key is pressed, don't restart the selection
-    if (event.shiftKey) return
+    // avoid text selection
+    event.preventDefault()
+
+    // if shift key is pressed, extend the selection
+    if (event.shiftKey) {
+      // if shift key is pressed, don't restart the selection (unless there is no active cell)
+      if (activeCell.col === null || activeCell.row === null) {
+        selectedRange.startRange({ row, col })
+      }
 
+      selectedRange.endRange({ row, col })
+      return
+    }
+
+    // start a new selection
     selectedRange.startRange({ row, col })
 
     if (activeCell.row !== row || activeCell.col !== col) {
@@ -262,42 +281,26 @@ export function useMultiSelect(
   }
 
   const handleCellClick = (event: MouseEvent, row: number, col: number) => {
-    isMouseDown = true
-
-    // if shift key is pressed, prevent selecting text
-    if (event.shiftKey && !unref(editEnabled)) {
-      event.preventDefault()
-    }
-
-    // if shift key is pressed, don't restart the selection (unless there is no active cell)
+    // if shift key is pressed, don't change the active cell (unless there is no active cell)
     if (!event.shiftKey || activeCell.col === null || activeCell.row === null) {
-      selectedRange.startRange({ row, col })
       makeActive(row, col)
     }
 
-    selectedRange.endRange({ row, col })
     scrollToCell?.(row, col)
-    isMouseDown = false
   }
 
-  const handleMouseUp = (event: MouseEvent) => {
+  const handleMouseUp = (_event: MouseEvent) => {
     if (isMouseDown) {
       isMouseDown = false
-
       // timeout is needed, because we want to set cell as active AFTER all the child's click handler's called
       // this is needed e.g. for date field edit, where two clicks had to be done - one to select cell, and another one to open date dropdown
       setTimeout(() => {
-        // if shift key is pressed, don't change the active cell
-        if (event.shiftKey) return
         if (selectedRange._start) {
-          makeActive(selectedRange._start.row, selectedRange._start.col)
+          if (activeCell.row !== selectedRange._start.row || activeCell.col !== selectedRange._start.col) {
+            makeActive(selectedRange._start.row, selectedRange._start.col)
+          }
         }
       }, 0)
-
-      // if the editEnabled is false, prevent selecting text on mouseUp
-      if (!unref(editEnabled)) {
-        event.preventDefault()
-      }
     }
   }