vue2-excel-grid 2.6.2 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-excel-grid",
-  "version": "2.6.2",
+  "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

@@ -994,6 +994,8 @@ 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
@@ -2632,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"
@@ -2716,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)
@@ -5106,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
@@ -5133,13 +5149,78 @@ const ExcelGridComponent = {
         if (relX < left) { col = i; break }
         col = i
       }
+      return { row, col }
+    },
 
-      this.fillDrag.currentRow = row
-      this.fillDrag.currentCol = col
-      this.scrollToCell(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)
+      }
+    },
+
+    _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 }