refactor(core): Change scrolling events. Various performance improvements in scrolling

Before this change, scrolling Events were being fire for each render container.  Now, a ScrollBegin and ScrollEnd event is fired once for the grid.  ScrollTo methods were moved from cellNav into core and also changed to return a promise.

 BREAKING CHANGE:
 Two events are now emitted on scroll:

 grid.api.core.ScrollBegin
 grid.api.core.ScrollEnd

 Before:
 grid.api.core.ScrollEvent
 After:
grid.api.core.ScrollBegin

ScrollToIfNecessary and ScrollTo moved from cellNav to core and grid removed from arguments
Before:
grid.api.cellNav.ScrollToIfNecessary(grid, gridRow, gridCol)
grid.api.cellNav.ScrollTo(grid, rowEntity, colDef)

After:
grid.api.core.ScrollToIfNecessary(gridRow, gridCol)
grid.api.core.ScrollTo(rowEntity, colDef)

GridEdit/cellNav
When using cellNav, a cell no longer receives focus.  Instead the viewport always receives focus.  This eliminated many bugs associated with scrolling and focus.

If you have a custom editor, you will no longer receive keyDown/Up events from the readonly cell.  Use the cellNav api viewPortKeyDown to capture any needed keydown events.  see GridEdit.js for an example

Author: swalters

misc/tutorial/202_cellnav.ngdoc

@@ -68,7 +68,7 @@ extract values of selected cells.
         };
 
         $scope.scrollTo = function( rowIndex, colIndex ) {
-          $scope.gridApi.cellNav.scrollTo( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
+          $scope.gridApi.core.scrollTo( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
         };
 
         $scope.scrollToFocus = function( rowIndex, colIndex ) {

misc/tutorial/211_two_grids.ngdoc

@@ -18,7 +18,7 @@ each other.
       };
 
       $scope.scrollTo = function( rowIndex, colIndex ) {
-        $scope.gridApi.cellNav.scrollTo( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
+        $scope.gridApi.core.scrollTo( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
       };
 
       $http.get('/data/100.json')

src/features/cellnav/js/cellnav.js

@@ -33,7 +33,7 @@ describe('ui.grid.cellNav directive', function () {
 
   it('should not throw exceptions when scrolling when a grid does NOT have the ui-grid-cellNav directive', function () {
     expect(function () {
-      $scope.gridApi.core.raise.scrollEvent({});
+      $scope.gridApi.core.raise.scrollBegin({});
     }).not.toThrow();
   });
 

src/features/cellnav/test/uiGridCellNavDirective.spec.js

@@ -5,19 +5,23 @@ describe('ui.grid.edit uiGridCellNavService', function () {
   var uiGridConstants;
   var uiGridCellNavConstants;
   var $rootScope;
+  var $timeout;
 
   beforeEach(module('ui.grid.cellNav'));
 
-  beforeEach(inject(function (_uiGridCellNavService_, _gridClassFactory_, $templateCache, _uiGridConstants_, _uiGridCellNavConstants_, _$rootScope_) {
+  beforeEach(inject(function (_uiGridCellNavService_, _gridClassFactory_, $templateCache, _uiGridConstants_, _uiGridCellNavConstants_, _$rootScope_, _$timeout_) {
     uiGridCellNavService = _uiGridCellNavService_;
     gridClassFactory = _gridClassFactory_;
     uiGridConstants = _uiGridConstants_;
     uiGridCellNavConstants = _uiGridCellNavConstants_;
     $rootScope = _$rootScope_;
+    $timeout = _$timeout_;
 
     $templateCache.put('ui-grid/uiGridCell', '<div/>');
 
     grid = gridClassFactory.createGrid();
+    //throttled scrolling isn't working in tests for some reason
+    grid.options.scrollDebounce = 0;
     grid.options.columnDefs = [
       {name: 'col0', allowCellFocus: true},
       {name: 'col1', allowCellFocus: false},
@@ -192,15 +196,17 @@ describe('ui.grid.edit uiGridCellNavService', function () {
 
       grid.setVisibleColumns(grid.columns);
       grid.setVisibleRows(grid.rows);
-      
+
+      grid.renderContainers.body.headerHeight = 0;
+
       for ( i = 0; i < 11; i++ ){
         grid.columns[i].drawnWidth = i < 6 ? 100 : 200;
       }
 
       $scope = $rootScope.$new();
 
       args = null;
-      grid.api.core.on.scrollEvent($scope, function( receivedArgs ){
+      grid.api.core.on.scrollEnd($scope, function( receivedArgs ){
         args = receivedArgs;
       });
 
@@ -211,51 +217,79 @@ describe('ui.grid.edit uiGridCellNavService', function () {
     // but it means these unit tests are now mostly checking that it is the same it used to
     // be, not that it is giving some specified result (i.e. I just updated them to what they were)
     it('should request scroll to row and column', function () {
-      uiGridCellNavService.scrollTo( grid, grid.options.data[4], grid.columns[4].colDef);
-      
+      $timeout(function () {
+        grid.scrollTo(grid.options.data[4], grid.columns[4].colDef);
+      });
+      $timeout.flush();
+
       expect(args.grid).toEqual(grid);
-      expect(args.y).toEqual( { percentage : 5/11 });
+      expect(args.y.percentage).toBe(0.41515151515151516);
       expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request scroll to row only - first row', function () {
-      uiGridCellNavService.scrollTo( grid, grid.options.data[0], null);
+      $timeout(function () {
+        grid.scrollTo( grid.options.data[0], null);
+      });
+      $timeout.flush();
 
-      expect(args.y).toEqual( { percentage : 2/11 });
+      expect(args.y.percentage).toBe(0.14242424242424243);
     });
 
     it('should request scroll to row only - last row', function () {
-      uiGridCellNavService.scrollTo( grid, grid.options.data[10], null);
+      $timeout(function () {
+        grid.scrollTo( grid.options.data[10], null);
+      });
+      $timeout.flush();
 
-      expect(args.y).toEqual( { percentage : 1 });
+      expect(args.y.percentage).toBeGreaterThan(0.5);
+      expect(args.x).toBe(null);
     });
 
     it('should request scroll to row only - row 4', function () {
-      uiGridCellNavService.scrollTo( grid, grid.options.data[5], null);
+      $timeout(function () {
+        grid.scrollTo( grid.options.data[5], null);
+      });
+      $timeout.flush();
 
-      expect(args.y).toEqual( { percentage : 6/11 });
+      expect(args.y.percentage).toEqual( 0.5060606060606061);
+      expect(args.x).toBe(null);
     });
 
     it('should request scroll to column only - first column', function () {
-      uiGridCellNavService.scrollTo( grid, null, grid.columns[0].colDef);
-      
+      $timeout(function () {
+        grid.scrollTo( null, grid.columns[0].colDef);
+      });
+      $timeout.flush();
+
+
       expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request scroll to column only - last column', function () {
-      uiGridCellNavService.scrollTo( grid, null, grid.columns[10].colDef);
-      
+      $timeout(function () {
+        grid.scrollTo( null, grid.columns[10].colDef);
+      });
+      $timeout.flush();
+
+
       expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request scroll to column only - column 7', function () {
-      uiGridCellNavService.scrollTo( grid,  null, grid.columns[8].colDef);
+      $timeout(function () {
+        grid.scrollTo(  null, grid.columns[8].colDef);
+      });
+      $timeout.flush();
 
       expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request no scroll as no row or column', function () {
-      uiGridCellNavService.scrollTo( grid,  null, null );
+      $timeout(function () {
+        grid.scrollTo( null, null );
+      });
+      $timeout.flush();
 
       expect(args).toEqual( null );
     });