From c1b5e76a4306cc8f1d1e712af0dd6d6171c462dd Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Jun 2023 09:00:52 +0300
Subject: [PATCH] fix: snap fill handle

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

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index c78af55d2e..a73fc6806e 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -2,7 +2,6 @@
 import { nextTick } from '@vue/runtime-core'
 import type { ColumnReqType, ColumnType, GridType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import type { UseElementBoundingReturn } from '@vueuse/core'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -112,6 +111,8 @@ const tableHeadEl = ref<HTMLElement>()
 const tableBodyEl = ref<HTMLElement>()
 const fillHandle = ref<HTMLElement>()
 
+const gridRect = useElementBounding(gridWrapper)
+
 const isAddingColumnAllowed = $computed(() => !readOnly.value && !isLocked.value && isUIAllowed('add-column') && !isSqlView.value)
 
 const isAddingEmptyRowAllowed = $computed(() => !isView && !isLocked.value && hasEditPermission && !isSqlView.value)
@@ -891,16 +892,19 @@ function addEmptyRow(row?: number) {
   return rowObj
 }
 
-const tableRect = useElementBounding(smartTable)
-const { height: tableHeight, width: tableWidth } = tableRect
-
-const { x: gridX, y: gridY } = useScroll(gridWrapper)
-
 const fillHandleTop = ref()
 const fillHandleLeft = ref()
 
 const cellRefs = ref<{ el: HTMLElement }[]>([])
-let cellRect: UseElementBoundingReturn | null = null
+
+const showFillHandle = computed(
+  () =>
+    !readOnly.value &&
+    !isLocked.value &&
+    !editEnabled &&
+    (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
+    !data.value[selectedRange.end.row ?? activeCell.row]?.rowMeta?.new,
+)
 
 const refreshFillHandle = () => {
   const cellRef = cellRefs.value.find(
@@ -908,28 +912,22 @@ const refreshFillHandle = () => {
       cell.el.dataset.rowIndex === String(selectedRange.end.row) && cell.el.dataset.colIndex === String(selectedRange.end.col),
   )
   if (cellRef) {
-    cellRect = useElementBounding(cellRef.el)
-    if (!cellRect || !tableRect) return
-    if (selectedRange.end.col === 0) {
-      fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value
-      fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value
-      return
-    }
-    fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value
-    fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value + gridX.value
+    const cellRect = useElementBounding(cellRef.el)
+    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
   }
 }
 
-watch(
-  () => `${selectedRange.end.row}-${selectedRange.end.col}`,
-  (n, o) => {
-    if (n !== o) {
-      if (gridWrapper.value) {
-        refreshFillHandle()
-      }
-    }
-  },
-)
+watch([() => selectedRange.end.row, () => selectedRange.end.col], (n, o) => {
+  if (n !== o) {
+    refreshFillHandle()
+  }
+})
+
+useEventListener(gridWrapper, 'scroll', () => {
+  refreshFillHandle()
+})
 </script>
 
 <template>
@@ -940,233 +938,233 @@ watch(
       </div>
     </general-overlay>
 
-    <div
-      ref="gridWrapper"
-      class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull"
-      :class="{
-        relative:
-          !readOnly &&
-          !isLocked &&
-          (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
-          ((!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)),
-      }"
-    >
+    <div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull relative">
       <a-dropdown
         v-model:visible="contextMenu"
         :trigger="isSqlView ? [] : ['contextmenu']"
         overlay-class-name="nc-dropdown-grid-context-menu"
       >
-        <table
-          ref="smartTable"
-          class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
-          @contextmenu="showContextMenu"
-        >
-          <thead ref="tableHeadEl">
-            <tr class="nc-grid-header">
-              <th class="w-[85px] min-w-[85px]" data-testid="grid-id-column">
-                <div class="w-full h-full bg-gray-100 flex pl-5 pr-1 items-center" data-testid="nc-check-all">
-                  <template v-if="!readOnly">
-                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                    <div
-                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                      class="nc-check-all w-full items-center"
-                    >
-                      <a-checkbox v-model:checked="selectedAllRecords" />
+        <div class="table-overlay">
+          <table
+            ref="smartTable"
+            class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
+            @contextmenu="showContextMenu"
+          >
+            <thead ref="tableHeadEl">
+              <tr class="nc-grid-header">
+                <th class="w-[85px] min-w-[85px]" data-testid="grid-id-column">
+                  <div class="w-full h-full bg-gray-100 flex pl-5 pr-1 items-center" data-testid="nc-check-all">
+                    <template v-if="!readOnly">
+                      <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                      <div
+                        :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                        class="nc-check-all w-full items-center"
+                      >
+                        <a-checkbox v-model:checked="selectedAllRecords" />
 
-                      <span class="flex-1" />
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div class="text-gray-500">#</div>
-                  </template>
-                </div>
-              </th>
-              <th
-                v-for="col in fields"
-                :key="col.title"
-                v-xc-ver-resize
-                :data-col="col.id"
-                :data-title="col.title"
-                @xcresize="onresize(col.id, $event)"
-                @xcresizing="onXcResizing(col.title, $event)"
-                @xcresized="resizingCol = null"
-              >
-                <div class="w-full h-full bg-gray-100 flex items-center">
-                  <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
-
-                  <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
-                </div>
-              </th>
-              <th
-                v-if="isAddingColumnAllowed"
-                v-e="['c:column:add']"
-                class="cursor-pointer"
-                @click.stop="addColumnDropdown = true"
-              >
-                <a-dropdown
-                  v-model:visible="addColumnDropdown"
-                  :trigger="['click']"
-                  overlay-class-name="nc-dropdown-grid-add-column"
-                >
-                  <div class="h-full w-[60px] flex items-center justify-center">
-                    <component :is="iconMap.plus" class="text-sm nc-column-add" />
+                        <span class="flex-1" />
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="text-gray-500">#</div>
+                    </template>
                   </div>
+                </th>
+                <th
+                  v-for="col in fields"
+                  :key="col.title"
+                  v-xc-ver-resize
+                  :data-col="col.id"
+                  :data-title="col.title"
+                  @xcresize="onresize(col.id, $event)"
+                  @xcresizing="onXcResizing(col.title, $event)"
+                  @xcresized="resizingCol = null"
+                >
+                  <div class="w-full h-full bg-gray-100 flex items-center">
+                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
 
-                  <template #overlay>
-                    <SmartsheetColumnEditOrAddProvider
-                      v-if="addColumnDropdown"
-                      :preload="preloadColumn"
-                      :column-position="columnOrder"
-                      @submit="closeAddColumnDropdown(true)"
-                      @cancel="closeAddColumnDropdown()"
-                      @click.stop
-                      @keydown.stop
-                    />
-                  </template>
-                </a-dropdown>
-              </th>
-            </tr>
-          </thead>
-          <tbody ref="tableBodyEl">
-            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
-              <template #default="{ state }">
-                <tr
-                  class="nc-grid-row"
-                  :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
-                  :data-testid="`grid-row-${rowIndex}`"
+                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
+                  </div>
+                </th>
+                <th
+                  v-if="isAddingColumnAllowed"
+                  v-e="['c:column:add']"
+                  class="cursor-pointer"
+                  @click.stop="addColumnDropdown = true"
                 >
-                  <td
-                    key="row-index"
-                    class="caption nc-grid-cell pl-5 pr-1"
-                    :data-testid="`cell-Id-${rowIndex}`"
-                    @contextmenu="contextMenuTarget = null"
+                  <a-dropdown
+                    v-model:visible="addColumnDropdown"
+                    :trigger="['click']"
+                    overlay-class-name="nc-dropdown-grid-add-column"
                   >
-                    <div class="items-center flex gap-1 min-w-[60px]">
-                      <div
-                        v-if="!readOnly || !isLocked"
-                        class="nc-row-no text-xs text-gray-500"
-                        :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
-                      >
-                        {{ ((paginationData.page ?? 1) - 1) * (paginationData.pageSize ?? 25) + rowIndex + 1 }}
-                      </div>
-                      <div
-                        v-if="!readOnly"
-                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                        class="nc-row-expand-and-checkbox"
-                      >
-                        <a-checkbox v-model:checked="row.rowMeta.selected" />
-                      </div>
-                      <span class="flex-1" />
+                    <div class="h-full w-[60px] flex items-center justify-center">
+                      <component :is="iconMap.plus" class="text-sm nc-column-add" />
+                    </div>
 
-                      <div
-                        v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
-                        class="nc-expand"
-                        :data-testid="`nc-expand-${rowIndex}`"
-                        :class="{ 'nc-comment': row.rowMeta?.commentCount }"
-                      >
-                        <a-spin
-                          v-if="row.rowMeta.saving"
-                          class="!flex items-center"
-                          :data-testid="`row-save-spinner-${rowIndex}`"
-                        />
-                        <template v-else>
-                          <span
-                            v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
-                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
-                            @click="expandForm(row, state)"
-                          >
-                            {{ row.rowMeta.commentCount }}
-                          </span>
-                          <div
-                            v-else
-                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
-                          >
-                            <component
-                              :is="iconMap.expand"
-                              v-e="['c:row-expand']"
-                              class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                    <template #overlay>
+                      <SmartsheetColumnEditOrAddProvider
+                        v-if="addColumnDropdown"
+                        :preload="preloadColumn"
+                        :column-position="columnOrder"
+                        @submit="closeAddColumnDropdown(true)"
+                        @cancel="closeAddColumnDropdown()"
+                        @click.stop
+                        @keydown.stop
+                      />
+                    </template>
+                  </a-dropdown>
+                </th>
+              </tr>
+            </thead>
+            <tbody ref="tableBodyEl">
+              <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+                <template #default="{ state }">
+                  <tr
+                    class="nc-grid-row"
+                    :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
+                    :data-testid="`grid-row-${rowIndex}`"
+                  >
+                    <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
+                      <div class="items-center flex gap-1 min-w-[60px]">
+                        <div
+                          v-if="!readOnly || !isLocked"
+                          class="nc-row-no text-xs text-gray-500"
+                          :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
+                        >
+                          {{ ((paginationData.page ?? 1) - 1) * (paginationData.pageSize ?? 25) + rowIndex + 1 }}
+                        </div>
+                        <div
+                          v-if="!readOnly"
+                          :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                          class="nc-row-expand-and-checkbox"
+                        >
+                          <a-checkbox v-model:checked="row.rowMeta.selected" />
+                        </div>
+                        <span class="flex-1" />
+
+                        <div
+                          v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
+                          class="nc-expand"
+                          :data-testid="`nc-expand-${rowIndex}`"
+                          :class="{ 'nc-comment': row.rowMeta?.commentCount }"
+                        >
+                          <a-spin
+                            v-if="row.rowMeta.saving"
+                            class="!flex items-center"
+                            :data-testid="`row-save-spinner-${rowIndex}`"
+                          />
+                          <template v-else>
+                            <span
+                              v-if="row.rowMeta?.commentCount"
+                              class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
+                              :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                               @click="expandForm(row, state)"
-                            />
-                          </div>
-                        </template>
+                            >
+                              {{ row.rowMeta.commentCount }}
+                            </span>
+                            <div
+                              v-else
+                              class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
+                            >
+                              <component
+                                :is="iconMap.expand"
+                                v-e="['c:row-expand']"
+                                class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                                @click="expandForm(row, state)"
+                              />
+                            </div>
+                          </template>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                  <SmartsheetTableDataCell
-                    v-for="(columnObj, colIndex) of fields"
-                    :key="columnObj.id"
-                    ref="cellRefs"
-                    class="cell relative nc-grid-cell"
-                    :class="{
-                      'cursor-pointer': hasEditPermission,
-                      'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
-                      'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
-                      'align-middle': !rowHeight || rowHeight === 1,
-                      'align-top': rowHeight && rowHeight !== 1,
-                      'filling': isCellInFillRange(rowIndex, colIndex),
-                    }"
-                    :data-testid="`cell-${columnObj.title}-${rowIndex}`"
-                    :data-key="rowIndex + columnObj.id"
-                    :data-col="columnObj.id"
-                    :data-title="columnObj.title"
-                    :data-row-index="rowIndex"
-                    :data-col-index="colIndex"
-                    @mousedown="handleMouseDown($event, rowIndex, colIndex)"
-                    @mouseover="handleMouseOver($event, rowIndex, colIndex)"
-                    @click="handleCellClick($event, rowIndex, colIndex)"
-                    @dblclick="makeEditable(row, columnObj)"
-                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
-                  >
-                    <div v-if="!switchingTab" class="w-full h-full">
-                      <LazySmartsheetVirtualCell
-                        v-if="isVirtualCol(columnObj)"
-                        v-model="row.row[columnObj.title]"
-                        :column="columnObj"
-                        :active="activeCell.col === colIndex && activeCell.row === rowIndex"
-                        :row="row"
-                        :read-only="readOnly"
-                        @navigate="onNavigate"
-                        @save="updateOrSaveRow(row, '', state)"
-                      />
+                    </td>
+                    <SmartsheetTableDataCell
+                      v-for="(columnObj, colIndex) of fields"
+                      :key="columnObj.id"
+                      ref="cellRefs"
+                      class="cell relative nc-grid-cell"
+                      :class="{
+                        'cursor-pointer': hasEditPermission,
+                        'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
+                        'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
+                        'align-middle': !rowHeight || rowHeight === 1,
+                        'align-top': rowHeight && rowHeight !== 1,
+                        'filling': isCellInFillRange(rowIndex, colIndex),
+                      }"
+                      :data-testid="`cell-${columnObj.title}-${rowIndex}`"
+                      :data-key="rowIndex + columnObj.id"
+                      :data-col="columnObj.id"
+                      :data-title="columnObj.title"
+                      :data-row-index="rowIndex"
+                      :data-col-index="colIndex"
+                      @mousedown="handleMouseDown($event, rowIndex, colIndex)"
+                      @mouseover="handleMouseOver($event, rowIndex, colIndex)"
+                      @click="handleCellClick($event, rowIndex, colIndex)"
+                      @dblclick="makeEditable(row, columnObj)"
+                      @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                    >
+                      <div v-if="!switchingTab" class="w-full h-full">
+                        <LazySmartsheetVirtualCell
+                          v-if="isVirtualCol(columnObj)"
+                          v-model="row.row[columnObj.title]"
+                          :column="columnObj"
+                          :active="activeCell.col === colIndex && activeCell.row === rowIndex"
+                          :row="row"
+                          :read-only="readOnly"
+                          @navigate="onNavigate"
+                          @save="updateOrSaveRow(row, '', state)"
+                        />
 
-                      <LazySmartsheetCell
-                        v-else
-                        v-model="row.row[columnObj.title]"
-                        :column="columnObj"
-                        :edit-enabled="
-                          !!hasEditPermission && !!editEnabled && activeCell.col === colIndex && activeCell.row === rowIndex
-                        "
-                        :row-index="rowIndex"
-                        :active="activeCell.col === colIndex && activeCell.row === rowIndex"
-                        :read-only="readOnly"
-                        @update:edit-enabled="editEnabled = $event"
-                        @save="updateOrSaveRow(row, columnObj.title, state)"
-                        @navigate="onNavigate"
-                        @cancel="editEnabled = false"
-                      />
-                    </div>
-                  </SmartsheetTableDataCell>
-                </tr>
-              </template>
-            </LazySmartsheetRow>
-
-            <tr
-              v-if="isAddingEmptyRowAllowed"
-              v-e="['c:row:add:grid-bottom']"
-              class="cursor-pointer"
-              @mouseup.stop
-              @click="addEmptyRow()"
-            >
-              <td class="text-left pointer nc-grid-add-new-cell sticky left-0 !z-5 !border-r-0">
-                <div class="px-2 w-full flex items-center text-gray-500">
-                  <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
-                </div>
-              </td>
-              <td :colspan="visibleColLength"></td>
-            </tr>
-          </tbody>
-        </table>
+                        <LazySmartsheetCell
+                          v-else
+                          v-model="row.row[columnObj.title]"
+                          :column="columnObj"
+                          :edit-enabled="
+                            !!hasEditPermission && !!editEnabled && activeCell.col === colIndex && activeCell.row === rowIndex
+                          "
+                          :row-index="rowIndex"
+                          :active="activeCell.col === colIndex && activeCell.row === rowIndex"
+                          :read-only="readOnly"
+                          @update:edit-enabled="editEnabled = $event"
+                          @save="updateOrSaveRow(row, columnObj.title, state)"
+                          @navigate="onNavigate"
+                          @cancel="editEnabled = false"
+                        />
+                      </div>
+                    </SmartsheetTableDataCell>
+                  </tr>
+                </template>
+              </LazySmartsheetRow>
+
+              <tr
+                v-if="isAddingEmptyRowAllowed"
+                v-e="['c:row:add:grid-bottom']"
+                class="cursor-pointer relative z-3"
+                @mouseup.stop
+                @click="addEmptyRow()"
+              >
+                <td class="text-left pointer nc-grid-add-new-cell sticky left-0 !z-5 !border-r-0">
+                  <div class="px-2 w-full flex items-center text-gray-500">
+                    <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
+                  </div>
+                </td>
+                <td :colspan="visibleColLength"></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <!-- Fill Handle -->
+          <div
+            v-show="showFillHandle"
+            ref="fillHandle"
+            class="nc-fill-handle"
+            :class="
+              (!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)
+                ? 'z-3'
+                : 'z-4'
+            "
+            :style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }"
+          />
+        </div>
 
         <template v-if="!isLocked && hasEditPermission" #overlay>
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
@@ -1243,28 +1241,6 @@ watch(
           </a-menu>
         </template>
       </a-dropdown>
-      <div
-        class="table-overlay absolute top-0 left-0 pointer-events-none overflow-hidden"
-        :style="{ height: `${tableHeight}px`, width: `${tableWidth}px` }"
-      >
-        <!-- Fill Handle -->
-        <div
-          v-show="
-            !readOnly &&
-            !isLocked &&
-            !editEnabled &&
-            (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null))
-          "
-          ref="fillHandle"
-          class="nc-fill-handle"
-          :class="
-            (!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)
-              ? 'z-3'
-              : 'z-4'
-          "
-          :style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }"
-        />
-      </div>
     </div>
 
     <div