Merge pull request #2490 from edmondpr/fix-column-move-horizontal-scroll

Fix #2489: Column moving not working well with horizontal scrolling

Author: PaulL1

src/features/move-columns/js/column-movable.js

@@ -291,6 +291,15 @@
                         //Hide column menu
                         uiGridCtrl.fireEvent('hide-menu');
 
+                        //Calculate total column width
+                        var columns = $scope.grid.columns;
+                        var totalColumnWidth = 0;
+                        for (var i = 0; i < columns.length; i++) {
+                          if (angular.isUndefined(columns[i].colDef.visible) || columns[i].colDef.visible === true) {
+                            totalColumnWidth += columns[i].drawnWidth || columns[i].width || columns[i].colDef.width;
+                          }
+                        }
+
                         //Calculate new position of left of column
                         var currentElmLeft = movingElm[0].getBoundingClientRect().left - 1;
                         var currentElmRight = movingElm[0].getBoundingClientRect().right;
@@ -307,13 +316,31 @@
                         if ((currentElmLeft >= gridLeft || changeValue > 0) && (currentElmRight <= rightMoveLimit || changeValue < 0)) {
                           movingElm.css({visibility: 'visible', 'left': newElementLeft + 'px'});
                         }
-                        else {
+                        else if (totalColumnWidth > Math.ceil(uiGridCtrl.grid.gridWidth)) {
                           changeValue *= 8;
                           var scrollEvent = new ScrollEvent($scope.col.grid, null, null, 'uiGridHeaderCell.moveElement');
                           scrollEvent.x = {pixels: changeValue};
                           scrollEvent.fireScrollingEvent();
                         }
-                        totalMouseMovement += changeValue;
+
+                        //Calculate total width of columns on the left of the moving column and the mouse movement
+                        var totalColumnsLeftWidth = 0;
+                        for (var il = 0; il < columns.length; il++) {
+                          if (angular.isUndefined(columns[il].colDef.visible) || columns[il].colDef.visible === true) {
+                            if (columns[il].colDef.name !== $scope.col.colDef.name) {
+                              totalColumnsLeftWidth += columns[il].drawnWidth || columns[il].width || columns[il].colDef.width;
+                            }
+                            else {
+                              break;
+                            }
+                          }
+                        }
+                        if ($scope.newScrollLeft === undefined) {
+                          totalMouseMovement += changeValue;
+                        }
+                        else {
+                          totalMouseMovement = $scope.newScrollLeft + newElementLeft - totalColumnsLeftWidth;
+                        }
 
                         //Increase width of moving column, in case the rightmost column was moved and its width was
                         //decreased because of overflow
@@ -324,6 +351,9 @@
                       };
 
                       var mouseMoveHandler = function (evt) {
+                        //Disable text selection in Chrome during column move
+                        document.onselectstart = function() { return false; };
+
                         var changeValue = evt.pageX - previousMouseX;
                         if (!elmCloned && Math.abs(changeValue) > 50) {
                           cloneElement();
@@ -345,6 +375,8 @@
                       $document.on('mousemove', mouseMoveHandler);
 
                       var mouseUpHandler = function (evt) {
+                        //Re-enable text selection after column move
+                        document.onselectstart = null;
 
                         //Remove the cloned element on mouse up.
                         if (movingElm) {

src/js/core/directives/ui-grid-render-container.js

@@ -99,6 +99,9 @@
                 containerCtrl.prevScrollArgs = args;
                 var newScrollLeft = args.getNewScrollLeft(colContainer,containerCtrl.viewport);
 
+                // Make the current horizontal scroll position available in the $scope
+                $scope.newScrollLeft = newScrollLeft;                
+
                 if (containerCtrl.headerViewport) {
                   containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.headerViewport, newScrollLeft);
                 }

src/js/core/factories/GridRenderContainer.js

@@ -410,14 +410,16 @@ angular.module('ui.grid')
 
     var newRange = [];
     if (columnCache.length > self.grid.options.columnVirtualizationThreshold && self.getCanvasWidth() > self.getViewportWidth()) {
+      /* Commented the following lines because otherwise the moved column wasn't visible immediately on the new position
+       * in the case of many columns with horizontal scroll, one had to scroll left or right and then return in order to see it
       // Have we hit the threshold going down?
       if (self.prevScrollLeft < scrollLeft && colIndex < self.prevColumnScrollIndex + self.grid.options.horizontalScrollThreshold && colIndex < maxColumnIndex) {
         return;
       }
       //Have we hit the threshold going up?
       if (self.prevScrollLeft > scrollLeft && colIndex > self.prevColumnScrollIndex - self.grid.options.horizontalScrollThreshold && colIndex < maxColumnIndex) {
         return;
-      }
+      }*/
 
       var rangeStart = Math.max(0, colIndex - self.grid.options.excessColumns);
       var rangeEnd = Math.min(columnCache.length, colIndex + minCols + self.grid.options.excessColumns);