Skip to content

Commit f0f168c

Browse files
c0brac0bra
committed
Merge pull request #2084 from angular-ui/cellnav-and-speed-improvements
Cellnav rewrite and speed improvements
2 parents 2b25f24 + f3a45ef commit f0f168c

File tree

10 files changed

+365
-69
lines changed

10 files changed

+365
-69
lines changed

‎src/features/cellnav/js/cellnav.js‎

Lines changed: 264 additions & 33 deletions
Large diffs are not rendered by default.

‎src/features/cellnav/less/cellNav.less‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
@import '../../../less/variables';
22

3-
.ui-grid-cell-contents:focus {
3+
// .ui-grid-cell-contents:focus {
4+
// outline: 0;
5+
// background-color: @focusedCell;
6+
// }
7+
8+
.ui-grid-cell-focus {
49
outline: 0;
510
background-color: @focusedCell;
611
}

‎src/features/edit/js/gridEdit.js‎

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -369,13 +369,14 @@
369369
*
370370
*/
371371
module.directive('uiGridCell',
372-
['$compile', 'uiGridConstants', 'uiGridEditConstants', 'gridUtil', '$parse', 'uiGridEditService',
373-
function ($compile, uiGridConstants, uiGridEditConstants, gridUtil, $parse, uiGridEditService) {
372+
['$compile', '$injector', 'uiGridConstants', 'uiGridEditConstants', 'gridUtil', '$parse', 'uiGridEditService',
373+
function ($compile, $injector, uiGridConstants, uiGridEditConstants, gridUtil, $parse, uiGridEditService) {
374374
return {
375375
priority: -100, // run after default uiGridCell directive
376376
restrict: 'A',
377377
scope: false,
378-
link: function ($scope, $elm, $attrs) {
378+
require: '?^uiGrid',
379+
link: function ($scope, $elm, $attrs, uiGridCtrl) {
379380
if (!$scope.col.colDef.enableCellEdit) {
380381
return;
381382
}
@@ -406,10 +407,34 @@
406407

407408
function beginEditFocus(evt) {
408409
// gridUtil.logDebug('begin edit');
410+
if (uiGridCtrl && uiGridCtrl.cellNav) {
411+
// NOTE(c0bra): This is causing a loop where focusCell causes beginEditFocus to be called....
412+
uiGridCtrl.cellNav.focusCell($scope.row, $scope.col);
413+
}
414+
409415
evt.stopPropagation();
410416
beginEdit();
411417
}
412418

419+
// If the cellNagv module is installed and we can get the uiGridCellNavConstants value injected,
420+
// then if the column has enableCellEditOnFocus set to true, we need to listen for cellNav events
421+
// to this cell and start editing when the "focus" reaches us
422+
try {
423+
var uiGridCellNavConstants = $injector.get('uiGridCellNavConstants');
424+
425+
if ($scope.col.colDef.enableCellEditOnFocus) {
426+
$scope.$on(uiGridCellNavConstants.CELL_NAV_EVENT, function (evt, rowCol) {
427+
if (rowCol.row === $scope.row && rowCol.col === $scope.col) {
428+
beginEdit();
429+
}
430+
else {
431+
endEdit();
432+
}
433+
});
434+
}
435+
}
436+
catch (e) {}
437+
413438
function beginEditKeyDown(evt) {
414439
if (uiGridEditService.isStartEditKey(evt)) {
415440
beginEdit();
@@ -488,6 +513,11 @@
488513
*
489514
*/
490515
function beginEdit() {
516+
// If we are already editing, then just skip this so we don't try editing twice...
517+
if (inEdit) {
518+
return;
519+
}
520+
491521
if (!shouldEdit($scope.col, $scope.row)) {
492522
return;
493523
}
@@ -521,15 +551,15 @@
521551

522552
var cellElement;
523553
$scope.$apply(function () {
524-
inEdit = true;
525-
cancelBeginEditEvents();
526-
cellElement = $compile(html)($scope.$new());
527-
var gridCellContentsEl = angular.element($elm.children()[0]);
528-
isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus');
529-
gridCellContentsEl.addClass('ui-grid-cell-contents-hidden');
530-
$elm.append(cellElement);
531-
}
532-
);
554+
inEdit = true;
555+
cancelBeginEditEvents();
556+
var cellElement = angular.element(html);
557+
$elm.append(cellElement);
558+
$compile(cellElement)($scope.$new());
559+
var gridCellContentsEl = angular.element($elm.children()[0]);
560+
isFocusedBeforeEdit = gridCellContentsEl.hasClass('ui-grid-cell-focus');
561+
gridCellContentsEl.addClass('ui-grid-cell-contents-hidden');
562+
});
533563

534564
//stop editing when grid is scrolled
535565
var deregOnGridScroll = $scope.$on(uiGridConstants.events.GRID_SCROLL, function () {
@@ -564,7 +594,7 @@
564594
angular.element($elm.children()[1]).remove();
565595
gridCellContentsEl.removeClass('ui-grid-cell-contents-hidden');
566596
if (retainFocus && isFocusedBeforeEdit) {
567-
gridCellContentsEl.focus();
597+
gridCellContentsEl[0].focus();
568598
}
569599
isFocusedBeforeEdit = false;
570600
inEdit = false;
@@ -608,18 +638,23 @@
608638
function (uiGridConstants, uiGridEditConstants) {
609639
return {
610640
scope: true,
641+
require: ['?^uiGrid', '?^uiGridRenderContainer'],
611642
compile: function () {
612643
return {
613644
pre: function ($scope, $elm, $attrs) {
614645

615646
},
616-
post: function ($scope, $elm, $attrs) {
647+
post: function ($scope, $elm, $attrs, controllers) {
648+
var uiGridCtrl, renderContainerCtrl;
649+
if (controllers[0]) { uiGridCtrl = controllers[0]; }
650+
if (controllers[1]) { renderContainerCtrl = controllers[1]; }
617651

618652
//set focus at start of edit
619653
$scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () {
620654
$elm[0].focus();
621655
$elm[0].select();
622656
$elm.on('blur', function (evt) {
657+
console.log('stop edit!');
623658
$scope.stopEdit(evt);
624659
});
625660
});
@@ -672,6 +707,11 @@
672707
break;
673708
}
674709
}
710+
// Pass the keydown event off to the cellNav service, if it exists
711+
else if (uiGridCtrl && uiGridCtrl.hasOwnProperty('cellNav') && renderContainerCtrl) {
712+
evt.uiGridTargetRenderContainerId = renderContainerCtrl.containerId;
713+
uiGridCtrl.cellNav.handleKeyDown(evt);
714+
}
675715

676716
return true;
677717
});

‎src/js/core/directives/ui-grid-header-cell.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -213,14 +213,16 @@
213213
var filterDeregisters = [];
214214
angular.forEach($scope.col.filters, function(filter, i) {
215215
filterDeregisters.push($scope.$watch('col.filters[' + i + '].term', function(n, o) {
216-
uiGridCtrl.grid.api.core.raise.filterChanged();
217-
uiGridCtrl.grid.refresh()
218-
.then(function () {
219-
if (uiGridCtrl.prevScrollArgs && uiGridCtrl.prevScrollArgs.y && uiGridCtrl.prevScrollArgs.y.percentage) {
220-
uiGridCtrl.fireScrollingEvent({ y: { percentage: uiGridCtrl.prevScrollArgs.y.percentage } });
221-
}
222-
// uiGridCtrl.fireEvent('force-vertical-scroll');
223-
});
216+
if (n !== o) {
217+
uiGridCtrl.grid.api.core.raise.filterChanged();
218+
uiGridCtrl.grid.refresh()
219+
.then(function () {
220+
if (uiGridCtrl.prevScrollArgs && uiGridCtrl.prevScrollArgs.y && uiGridCtrl.prevScrollArgs.y.percentage) {
221+
uiGridCtrl.fireScrollingEvent({ y: { percentage: uiGridCtrl.prevScrollArgs.y.percentage } });
222+
}
223+
// uiGridCtrl.fireEvent('force-vertical-scroll');
224+
});
225+
}
224226
}));
225227
});
226228
$scope.$on('$destroy', function() {

‎src/js/core/directives/ui-grid-menu.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,11 @@ function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants) {
123123

124124
// *** Auto hide when click elsewhere ******
125125
var applyHideMenu = function(){
126-
$scope.$apply(function () {
127-
$scope.hideMenu();
128-
});
126+
if ($scope.shown) {
127+
$scope.$apply(function () {
128+
$scope.hideMenu();
129+
});
130+
}
129131
};
130132

131133
if (typeof($scope.autoHide) === 'undefined' || $scope.autoHide === undefined) {

‎src/js/core/factories/Grid.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1235,6 +1235,7 @@ angular.module('ui.grid')
12351235
*/
12361236
Grid.prototype.queueRefresh = function queueRefresh() {
12371237
var self = this;
1238+
12381239
if (self.refreshCanceller) {
12391240
$timeout.cancel(self.refreshCanceller);
12401241
}
@@ -1598,7 +1599,7 @@ angular.module('ui.grid')
15981599
*
15991600
*/
16001601
Grid.prototype.refresh = function refresh() {
1601-
// gridUtil.logDebug('grid refresh');
1602+
gridUtil.logDebug('grid refresh');
16021603

16031604
var self = this;
16041605

@@ -1664,6 +1665,11 @@ angular.module('ui.grid')
16641665
if (self.renderContainers.hasOwnProperty(containerId)) {
16651666
var container = self.renderContainers[containerId];
16661667

1668+
// Skip containers that have no canvasWidth set yet
1669+
if (container.canvasWidth === null || isNaN(container.canvasWidth)) {
1670+
continue;
1671+
}
1672+
16671673
if (container.header) {
16681674
containerHeadersToRecalc.push(container);
16691675
}
@@ -1684,6 +1690,11 @@ angular.module('ui.grid')
16841690
for (i = 0; i < containerHeadersToRecalc.length; i++) {
16851691
container = containerHeadersToRecalc[i];
16861692

1693+
// Skip containers that have no canvasWidth set yet
1694+
if (container.canvasWidth === null || isNaN(container.canvasWidth)) {
1695+
continue;
1696+
}
1697+
16871698
if (container.header) {
16881699
var oldHeaderHeight = container.headerHeight;
16891700
var headerHeight = gridUtil.outerElementHeight(container.header);

‎src/js/core/factories/GridRenderContainer.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,9 @@ angular.module('ui.grid')
279279
return;
280280
}
281281

282-
scrollTop = this.getCanvasHeight() * scrollPercentage;
282+
if (typeof(scrollTop) === 'undefined' || scrollTop === undefined || scrollTop === null) {
283+
scrollTop = (this.getCanvasHeight() - this.getCanvasWidth()) * scrollPercentage;
284+
}
283285

284286
this.adjustRows(scrollTop, scrollPercentage);
285287

@@ -294,10 +296,9 @@ angular.module('ui.grid')
294296
return;
295297
}
296298

297-
// scrollLeft = uiGridCtrl.canvas[0].scrollWidth * scrollPercentage;
298-
scrollLeft = this.getCanvasWidth() * scrollPercentage;
299-
300-
//gridUtil.logDebug('scrollPercentage', scrollPercentage);
299+
if (typeof(scrollLeft) === 'undefined' || scrollLeft === undefined || scrollLeft === null) {
300+
scrollLeft = (this.getCanvasWidth() - this.getViewportWidth()) * scrollPercentage;
301+
}
301302

302303
this.adjustColumns(scrollLeft, scrollPercentage);
303304

‎src/js/core/services/ui-grid-util.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -735,12 +735,11 @@ module.service('gridUtil', ['$log', '$window', '$document', '$http', '$templateC
735735
* @description wraps the $log method, allowing us to choose different
736736
* treatment within ui-grid if we so desired. At present we only log
737737
* debug messages if uiGridConstants.LOG_DEBUG_MESSAGES is set to true
738-
* @param {string} logMessage message to be logged to the console
739738
*
740739
*/
741-
logDebug: function( logMessage ){
740+
logDebug: function() {
742741
if ( uiGridConstants.LOG_DEBUG_MESSAGES ){
743-
$log.debug( logMessage );
742+
$log.debug.apply($log, arguments);
744743
}
745744
}
746745

‎src/less/body.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
// overflow: hidden;
55

66
.border-radius(0, @gridBorderRadius, @gridBorderRadius, 0);
7+
8+
// Prevent an outline from showing if we focus the render container element
9+
&:focus {
10+
outline: none;
11+
}
712
}
813

914
.ui-grid-viewport {

‎src/templates/ui-grid/uiGridViewport.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="ui-grid-viewport">
22
<div class="ui-grid-canvas">
3-
<div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by row.uid" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
3+
<div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="containerCtrl.rowStyle(rowRenderIndex)">
44
<div ui-grid-row="row" row-render-index="rowRenderIndex"></div>
55
</div>
66
</div>

0 commit comments

Comments
 (0)