From 77949e581a909a73d4557647f8284143202a5e63 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 28 Jul 2023 11:58:29 +0530
Subject: [PATCH 1/3] fix: avoid keeping ref of all cells which is causing
 performance degrading

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index a03b8b9635..ae875b4182 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -112,7 +112,7 @@ const expandedFormRow = ref<Row>()
 const expandedFormRowState = ref<Record<string, any>>()
 const gridWrapper = ref<HTMLElement>()
 const tableHeadEl = ref<HTMLElement>()
-const tableBodyEl = ref<HTMLElement>()
+const tableBodyEl = ref<HTMLTableSectionElement>()
 const fillHandle = ref<HTMLElement>()
 
 const gridRect = useElementBounding(gridWrapper)
@@ -917,8 +917,6 @@ function addEmptyRow(row?: number) {
 const fillHandleTop = ref()
 const fillHandleLeft = ref()
 
-const cellRefs = ref<{ el: HTMLElement }[]>([])
-
 const showFillHandle = computed(
   () =>
     !readOnly.value &&
@@ -929,13 +927,13 @@ const showFillHandle = computed(
 )
 
 const refreshFillHandle = () => {
-  const cellRef = cellRefs.value.find(
+  const cellRef = [...(tableBodyEl.value?.querySelectorAll<HTMLTableCellElement>('td[data-row-index]') || [])].find(
     (cell) =>
-      cell.el.dataset.rowIndex === String(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
-      cell.el.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
+      cell.dataset.rowIndex === String(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
+      cell.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
   )
   if (cellRef) {
-    const cellRect = useElementBounding(cellRef.el)
+    const cellRect = useElementBounding(cellRef)
     if (!cellRect || !gridWrapper.value) return
     fillHandleTop.value = cellRect.top.value + cellRect.height.value - gridRect.top.value + gridWrapper.value.scrollTop
     fillHandleLeft.value = cellRect.left.value + cellRect.width.value - gridRect.left.value + gridWrapper.value.scrollLeft
@@ -1132,7 +1130,6 @@ useEventListener(document, 'mouseup', () => {
                     <SmartsheetTableDataCell
                       v-for="(columnObj, colIndex) of fields"
                       :key="columnObj.id"
-                      ref="cellRefs"
                       class="cell relative nc-grid-cell"
                       :class="{
                         'cursor-pointer': hasEditPermission,

From e359ffa38b299106c9e234014aa53b1097c68755 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 28 Jul 2023 12:22:50 +0300
Subject: [PATCH 2/3] refactor: use native call

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index ae875b4182..689d2ae878 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -933,10 +933,10 @@ const refreshFillHandle = () => {
       cell.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
   )
   if (cellRef) {
-    const cellRect = useElementBounding(cellRef)
+    const cellRect = cellRef.getBoundingClientRect()
     if (!cellRect || !gridWrapper.value) return
-    fillHandleTop.value = cellRect.top.value + cellRect.height.value - gridRect.top.value + gridWrapper.value.scrollTop
-    fillHandleLeft.value = cellRect.left.value + cellRect.width.value - gridRect.left.value + gridWrapper.value.scrollLeft
+    fillHandleTop.value = cellRect.top + cellRect.height - gridRect.top.value + gridWrapper.value.scrollTop
+    fillHandleLeft.value = cellRect.left + cellRect.width - gridRect.left.value + gridWrapper.value.scrollLeft
   }
 }
 

From e6fb3eaa27666c2a2ed0e3ea9e120bc63aef104b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 28 Jul 2023 12:27:36 +0300
Subject: [PATCH 3/3] fix: use dynamic class to select last cell

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 689d2ae878..216494d844 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -927,17 +927,15 @@ const showFillHandle = computed(
 )
 
 const refreshFillHandle = () => {
-  const cellRef = [...(tableBodyEl.value?.querySelectorAll<HTMLTableCellElement>('td[data-row-index]') || [])].find(
-    (cell) =>
-      cell.dataset.rowIndex === String(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
-      cell.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
-  )
-  if (cellRef) {
-    const cellRect = cellRef.getBoundingClientRect()
-    if (!cellRect || !gridWrapper.value) return
-    fillHandleTop.value = cellRect.top + cellRect.height - gridRect.top.value + gridWrapper.value.scrollTop
-    fillHandleLeft.value = cellRect.left + cellRect.width - gridRect.left.value + gridWrapper.value.scrollLeft
-  }
+  nextTick(() => {
+    const cellRef = document.querySelector('.last-cell')
+    if (cellRef) {
+      const cellRect = cellRef.getBoundingClientRect()
+      if (!cellRect || !gridWrapper.value) return
+      fillHandleTop.value = cellRect.top + cellRect.height - gridRect.top.value + gridWrapper.value.scrollTop
+      fillHandleLeft.value = cellRect.left + cellRect.width - gridRect.left.value + gridWrapper.value.scrollLeft
+    }
+  })
 }
 
 const addRowExpandOnClose = (row: Row) => {
@@ -1138,6 +1136,9 @@ useEventListener(document, 'mouseup', () => {
                           hasEditPermission &&
                           ((activeCell.row === rowIndex && activeCell.col === colIndex) ||
                             (selectedRange._start?.row === rowIndex && selectedRange._start?.col === colIndex)),
+                        'last-cell':
+                          rowIndex === (isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
+                          colIndex === (isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
                         'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                         'align-middle': !rowHeight || rowHeight === 1,
                         'align-top': rowHeight && rowHeight !== 1,