draggable.grid.header.toolbar.SortZone: add drag to scroll support #6378 WIP

Author: tobiu

src/draggable/grid/header/toolbar/SortZone.mjs

@@ -189,6 +189,7 @@ class SortZone extends BaseSortZone {
             });
 
             NeoArray.move(columnPositions, index1, index2);
+            // console.log(index1, columnPositions[index1].dataField, index2, columnPositions[index2].dataField);
 
             column1Cells.forEach(node => {
                 node.style.left  = columnPositions[index2].x     + 'px';

src/draggable/toolbar/SortZone.mjs

@@ -149,9 +149,9 @@ class SortZone extends DragZone {
     /**
      * @param {Object} data
      */
-    onDragMove(data) {
+    async onDragMove(data) {
         // the method can trigger before we got the client rects from the main thread
-        if (!this.itemRects) {
+        if (!this.itemRects || this.isScrolling) {
             return
         }
 
@@ -174,18 +174,30 @@ class SortZone extends DragZone {
         if (index > 0 && (!reversed && delta < 0 || reversed && delta > 0)) {
             if (Math.abs(delta) > itemRects[index - 1][itemWidth] * moveFactor) {
                 me.currentIndex--;
+
+                if (data.clientX < me.boundaryContainerRect.left) {
+                    me.isScrolling = true;
+                    await me.owner.scrollToIndex?.(me.currentIndex, itemRects[me.currentIndex]);
+                    await me.timeout(50);
+                    me.isScrolling = false
+                }
+
                 me.switchItems(index, me.currentIndex)
             }
         }
 
         else if (index < maxItems && (!reversed && delta > 0 || reversed && delta < 0)) {
             if (Math.abs(delta) > itemRects[index + 1][itemWidth] * moveFactor) {
+                me.currentIndex++;
+
                 if (data.clientX > me.boundaryContainerRect.right) {
-                    console.log(delta, me.currentIndex, data, me.boundaryContainerRect);
-                } else {
-                    me.currentIndex++;
-                    me.switchItems(index, me.currentIndex)
+                    me.isScrolling = true;
+                    await me.owner.scrollToIndex?.(me.currentIndex, itemRects[me.currentIndex]);
+                    await me.timeout(50);
+                    me.isScrolling = false
                 }
+
+                me.switchItems(index, me.currentIndex)
             }
         }
     }

src/grid/View.mjs

@@ -652,13 +652,14 @@ class GridView extends Component {
      * @returns {Object[]}
      */
     getColumnCells(dataField) {
-        let me       = this,
-            cells    = [],
-            vdomRoot = me.getVdomRoot(),
-            firstRow = vdomRoot.cn[0],
-            i        = 0,
-            len      = firstRow.cn.length,
-            cell, columnIndex;
+        let me          = this,
+            cells       = [],
+            columnIndex = -1,
+            vdomRoot    = me.getVdomRoot(),
+            firstRow    = vdomRoot.cn[0],
+            i           = 0,
+            len         = firstRow.cn.length,
+            cell;
 
         // Columns might get moved via drag&drop, so let's check for the current match
         for (; i < len; i++) {
@@ -668,10 +669,14 @@ class GridView extends Component {
             }
         }
 
-        vdomRoot.cn.forEach(row => {
-            cell = row.cn[columnIndex];
-            cell && cells.push(cell)
-        });
+        if (columnIndex > -1) {
+            vdomRoot.cn.forEach(row => {
+                cell = row.cn[columnIndex];
+                cell && cells.push(cell)
+            })
+        }
+
+        console.log('getColumnCells', dataField, columnIndex, cells, Neo.clone(firstRow.cn, true));
 
         return cells
     }

src/grid/header/Toolbar.mjs

@@ -227,6 +227,19 @@ class Toolbar extends BaseToolbar {
             })
         }
     }
+
+    /**
+     * @param {Number}  index
+     * @param {DOMRect} itemRect
+     * @returns {Promise<void>}
+     */
+    async scrollToIndex(index, itemRect) {
+        await Neo.main.DomAccess.scrollIntoView({
+            delay   : 200,
+            id      : this.items[index].id,
+            windowId: this.windowId
+        })
+    }
 }
 
 export default Neo.setupClass(Toolbar);