vue2-excel-grid 2.6.1 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "Excel-style grid component for Vue 2.6.14 with virtual scrolling",
   "license": "MIT",
   "author": "Fozilbek Raimberdiyev",

package/src/components/ExcelGrid.vue

@@ -993,6 +993,9 @@ const ROW_HEADER_WIDTH = 50
 const DEFAULT_COL_WIDTH = 100
 const OUTLINE_GUTTER = 20
 const FIT_COLUMNS_MIN_WIDTH = 40
+const ROW_LIST_EDGE_PAD = 8 // birinchi/oxirgi qator bilan tepa/pastki border orasidagi bo'sh joy (px)
+const FILL_DRAG_EDGE_ZONE = 24 // px from .eg-scroll-body's edge that triggers continuous auto-scroll while fill-dragging
+const FILL_DRAG_MAX_SPEED = 18 // px/frame, at the very edge (scales down to 0 at the zone's outer boundary)
 
 // Classifies a col.width spec so resolveColWidth() knows how to turn it into a
 // concrete px number. Plain numbers/px strings resolve instantly with no DOM
@@ -1873,7 +1876,7 @@ const ExcelGridComponent = {
     // findVisibleRange() uses binary search against this cached array → O(log n) per scroll.
     // Invalidated only when row count, custom heights, or hidden rows change.
     cumulativeHeights() {
-      return buildCumulativeHeights(this.totalRows, this._rowH, this.rowHeights, this.hiddenRowSet)
+      return buildCumulativeHeights(this.totalRows, this._rowH, this.rowHeights, this.hiddenRowSet, ROW_LIST_EDGE_PAD, ROW_LIST_EDGE_PAD)
     },
 
     // height prop omitted → fit header + filter row + all (visible) rows + footer exactly.
@@ -2631,6 +2634,14 @@ const ExcelGridComponent = {
     this._dragScrollRAF = null
     this._dragCleanupTimer = null
 
+    // Fill-handle drag edge auto-scroll (see _updateFillDragAutoScroll) — same
+    // idle-when-0 convention as _dragScrollV/_dragScrollRAF above, just for
+    // both axes since a fill can extend down OR right.
+    this._fillDragScrollV = 0
+    this._fillDragScrollH = 0
+    this._fillDragScrollRAF = null
+    this._fillDragLastEvent = null
+
     // localSyncKey — the last `data` reference a version was actually saved
     // for. Initialized to the current (mount-time) value so an untouched grid
     // that's merely tab-switched away from doesn't spam a "nothing happened"
@@ -2715,6 +2726,7 @@ const ExcelGridComponent = {
     clearTimeout(this._widthSyncChainResetTimer)
     clearTimeout(this._bufferWriteTimer)
     if (this._dragScrollRAF) cancelAnimationFrame(this._dragScrollRAF)
+    if (this._fillDragScrollRAF) cancelAnimationFrame(this._fillDragScrollRAF)
     document.removeEventListener('mousemove', this.onGlobalMouseMove)
     document.removeEventListener('mouseup', this.onGlobalMouseUp)
     document.removeEventListener('keydown', this.onGlobalKeyDown)
@@ -3449,7 +3461,7 @@ const ExcelGridComponent = {
     },
 
     getRowGroupBtnStyle(group) {
-      const top = getRowTop(group.startIndex, this._rowH, this.rowHeights) - this.scrollTop
+      const top = getRowTop(group.startIndex, this._rowH, this.rowHeights, ROW_LIST_EDGE_PAD) - this.scrollTop
       return {
         position: 'absolute',
         top: top + 'px',
@@ -4088,7 +4100,7 @@ const ExcelGridComponent = {
     scrollToCell(ri, ci) {
       const scrollBody = this.$refs.scrollBody
       if (!scrollBody) return
-      const rowTop = getRowTop(ri, this._rowH, this.rowHeights)
+      const rowTop = getRowTop(ri, this._rowH, this.rowHeights, ROW_LIST_EDGE_PAD)
       const rowBottom = rowTop + this.getRowH(ri)
 
       if (rowTop < scrollBody.scrollTop) scrollBody.scrollTop = rowTop
@@ -5105,9 +5117,14 @@ const ExcelGridComponent = {
       this.isMouseDown = false
     },
 
-    handleFillDragMove(e) {
+    // Resolves which (row, col) the mouse is currently over, given the
+    // scroll body's CURRENT scrollTop/scrollLeft — called both directly from
+    // mousemove and repeatedly from the edge-auto-scroll rAF loop below (as
+    // scrollTop changes on its own, the row under a STATIONARY cursor changes
+    // with it).
+    _fillDragTargetFromEvent(e) {
       const scrollBody = this.$refs.scrollBody
-      if (!scrollBody) return
+      if (!scrollBody) return null
       const rect = scrollBody.getBoundingClientRect()
       const relY = e.clientY - rect.top + scrollBody.scrollTop
       const relX = e.clientX - rect.left + scrollBody.scrollLeft
@@ -5132,12 +5149,78 @@ const ExcelGridComponent = {
         if (relX < left) { col = i; break }
         col = i
       }
+      return { row, col }
+    },
+
+    handleFillDragMove(e) {
+      this._fillDragLastEvent = e
+      const target = this._fillDragTargetFromEvent(e)
+      if (!target) return
+      this.fillDrag.currentRow = target.row
+      this.fillDrag.currentCol = target.col
+      // Covers the common case of a single big mousemove jump landing the
+      // cursor (and its computed target row/col) outside the visible window.
+      this.scrollToCell(target.row, target.col)
+      // Covers the — far more common in practice — case of the cursor
+      // PINNED at the container's edge (it usually can't travel further,
+      // since the grid typically fills its host layout down to that edge):
+      // keep scrolling for as long as it stays there. Same rAF/edge-zone
+      // pattern as _updateDragAutoScroll (column-drag reordering) below.
+      this._updateFillDragAutoScroll(e.clientX, e.clientY)
+    },
+
+    // Edge auto-scroll for fill-handle dragging — vertical AND horizontal
+    // (column-drag's _updateDragAutoScroll is horizontal-only). Speed scales
+    // with how deep into the 24px edge zone the cursor sits.
+    _updateFillDragAutoScroll(clientX, clientY) {
+      const sb = this.$refs.scrollBody
+      if (!sb) { this._fillDragScrollV = 0; this._fillDragScrollH = 0; return }
+      const rect = sb.getBoundingClientRect()
+      const ZONE = FILL_DRAG_EDGE_ZONE
+
+      let v = 0
+      if (clientY < rect.top + ZONE) v = -Math.ceil((rect.top + ZONE - clientY) / 4)
+      else if (clientY > rect.bottom - ZONE) v = Math.ceil((clientY - (rect.bottom - ZONE)) / 4)
+      this._fillDragScrollV = Math.max(-FILL_DRAG_MAX_SPEED, Math.min(FILL_DRAG_MAX_SPEED, v))
+
+      let h = 0
+      if (clientX < rect.left + ZONE) h = -Math.ceil((rect.left + ZONE - clientX) / 4)
+      else if (clientX > rect.right - ZONE) h = Math.ceil((clientX - (rect.right - ZONE)) / 4)
+      this._fillDragScrollH = Math.max(-FILL_DRAG_MAX_SPEED, Math.min(FILL_DRAG_MAX_SPEED, h))
+
+      if ((this._fillDragScrollV !== 0 || this._fillDragScrollH !== 0) && !this._fillDragScrollRAF) {
+        const step = () => {
+          this._fillDragScrollRAF = null
+          if (!this.fillDrag.active) return
+          const body = this.$refs.scrollBody
+          if (body) {
+            if (this._fillDragScrollV) body.scrollTop = Math.max(0, Math.min(body.scrollHeight - body.clientHeight, body.scrollTop + this._fillDragScrollV))
+            if (this._fillDragScrollH) body.scrollLeft = Math.max(0, Math.min(body.scrollWidth - body.clientWidth, body.scrollLeft + this._fillDragScrollH))
+            // The cursor itself hasn't moved, but the content under it has —
+            // re-derive the fill target at the new scroll position.
+            if (this._fillDragLastEvent) {
+              const target = this._fillDragTargetFromEvent(this._fillDragLastEvent)
+              if (target) { this.fillDrag.currentRow = target.row; this.fillDrag.currentCol = target.col }
+            }
+          }
+          if (this._fillDragScrollV !== 0 || this._fillDragScrollH !== 0) this._fillDragScrollRAF = requestAnimationFrame(step)
+        }
+        this._fillDragScrollRAF = requestAnimationFrame(step)
+      }
+    },
 
-      this.fillDrag.currentRow = row
-      this.fillDrag.currentCol = col
+    _stopFillDragAutoScroll() {
+      this._fillDragScrollV = 0
+      this._fillDragScrollH = 0
+      this._fillDragLastEvent = null
+      if (this._fillDragScrollRAF) {
+        cancelAnimationFrame(this._fillDragScrollRAF)
+        this._fillDragScrollRAF = null
+      }
     },
 
     async commitFillDrag() {
+      this._stopFillDragAutoScroll()
       if (this.internalLocked) { this.fillDrag.active = false; return }
       const src = this.fillDrag.sourceRange
       if (!src) { this.fillDrag.active = false; return }

package/src/utils/virtualScroll.js

@@ -75,15 +75,18 @@ export function calcVisibleRows(scrollTop, containerHeight, totalRows, rowHeight
  * @param {number}   defaultHeight
  * @param {Object}   rowHeightsMap  - sparse { index: px } overrides
  * @param {Set}      hiddenSet      - Set of hidden row indices (height = 0)
+ * @param {number}   padTop         - extra px baked into cum[0] (and every entry after it)
+ * @param {number}   padBottom      - extra px baked into the final (total-height) entry only
  * @returns {number[]} length = totalRows + 1
  */
-export function buildCumulativeHeights(totalRows, defaultHeight, rowHeightsMap = {}, hiddenSet = new Set()) {
+export function buildCumulativeHeights(totalRows, defaultHeight, rowHeightsMap = {}, hiddenSet = new Set(), padTop = 0, padBottom = 0) {
   const cum = new Array(totalRows + 1)
-  cum[0] = 0
+  cum[0] = padTop
   for (let i = 0; i < totalRows; i++) {
     const h = hiddenSet.has(i) ? 0 : (rowHeightsMap[i] !== undefined ? rowHeightsMap[i] : defaultHeight)
     cum[i + 1] = cum[i] + h
   }
+  cum[totalRows] += padBottom
   return cum
 }
 
@@ -131,9 +134,10 @@ export function findVisibleRange(scrollTop, containerHeight, totalRows, cumulati
 
 /**
  * Get the top offset of a row
+ * @param {number}   padTop - extra px offset added on top (see buildCumulativeHeights)
  */
-export function getRowTop(rowIndex, rowHeight, rowHeights = []) {
-  let top = 0
+export function getRowTop(rowIndex, rowHeight, rowHeights = [], padTop = 0) {
+  let top = padTop
   for (let i = 0; i < rowIndex; i++) {
     top += rowHeights[i] !== undefined ? rowHeights[i] : rowHeight
   }