fix(gridlist): Tile ordering improved

Fixes #2553, Fixes #2225, Closes #2568.

* ng-repeated and static tiles can now be mixed
* Ordering should work properly once and for all. There's no more state
  maintenance in the grid controller. Whenever the grid re-renders, the
  DOM is queried to determine the tiles involved

Author: Scott Hyndman

src/components/gridList/gridList.js

@@ -155,45 +155,46 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
      * Invokes the layout engine, and uses its results to lay out our
      * tile elements.
      *
-     * @param {boolean} tilesAdded Whether tiles have been added since the last
-     *    layout. This is to avoid situations where tiles are replaced with
-     *    properties identical to their removed counterparts.
+     * @param {boolean} tilesInvalidated Whether tiles have been
+     *    added/removed/moved since the last layout. This is to avoid situations
+     *    where tiles are replaced with properties identical to their removed
+     *    counterparts.
      */
-    function layoutDelegate(tilesAdded) {
+    function layoutDelegate(tilesInvalidated) {
+      var tiles = getTileElements();
       var props = {
-        tileSpans: getTileSpans(),
+        tileSpans: getTileSpans(tiles),
         colCount: getColumnCount(),
         rowMode: getRowMode(),
         rowHeight: getRowHeight(),
         gutter: getGutter()
       };
 
-      if (!tilesAdded && angular.equals(props, lastLayoutProps)) {
+      if (!tilesInvalidated && angular.equals(props, lastLayoutProps)) {
         return;
       }
 
-      var tiles = getTileElements(),
-          performance =
-            $mdGridLayout(props.colCount, props.tileSpans, tiles)
-              .map(function(tilePositions, rowCount) {
+      var performance =
+        $mdGridLayout(props.colCount, props.tileSpans, tiles)
+          .map(function(tilePositions, rowCount) {
+            return {
+              grid: {
+                element: element,
+                style: getGridStyle(props.colCount, rowCount,
+                    props.gutter, props.rowMode, props.rowHeight)
+              },
+              tiles: tilePositions.map(function(ps, i) {
                 return {
-                  grid: {
-                    element: element,
-                    style: getGridStyle(props.colCount, rowCount,
-                        props.gutter, props.rowMode, props.rowHeight)
-                  },
-                  tiles: tilePositions.map(function(ps, i) {
-                    return {
-                      element: angular.element(tiles[i]),
-                      style: getTileStyle(ps.position, ps.spans,
-                          props.colCount, props.rowCount,
-                          props.gutter, props.rowMode, props.rowHeight)
-                    }
-                  })
+                  element: angular.element(tiles[i]),
+                  style: getTileStyle(ps.position, ps.spans,
+                      props.colCount, props.rowCount,
+                      props.gutter, props.rowMode, props.rowHeight)
                 }
               })
-              .reflow()
-              .performance();
+            }
+          })
+          .reflow()
+          .performance();
 
       // Report layout
       scope.mdOnLayout({
@@ -345,20 +346,23 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
     }
 
     function getTileElements() {
-      return ctrl.tiles.map(function(tile) { return tile.element });
+      return [].filter.call(element.children(), function(ele) {
+        return ele.tagName == 'MD-GRID-TILE';
+      });
     }
 
     /**
      * Gets an array of objects containing the rowspan and colspan for each tile.
      * @returns {Array<{row: number, col: number}>}
      */
-    function getTileSpans() {
-      return ctrl.tiles.map(function(tile) {
+    function getTileSpans(tileElements) {
+      return [].map.call(tileElements, function(ele) {
+        var ctrl = angular.element(ele).controller('mdGridTile');
         return {
           row: parseInt(
-              $mdMedia.getResponsiveAttribute(tile.attrs, 'md-rowspan'), 10) || 1,
+              $mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-rowspan'), 10) || 1,
           col: parseInt(
-              $mdMedia.getResponsiveAttribute(tile.attrs, 'md-colspan'), 10) || 1
+              $mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-colspan'), 10) || 1
         };
       });
     }
@@ -407,58 +411,33 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
 
 /* @ngInject */
 function GridListController($timeout) {
-  this.invalidated = false;
-  this.tilesAdded = false;
+  this.layoutInvalidated = false;
+  this.tilesInvalidated = false;
   this.$timeout_ = $timeout;
-  this.tiles = [];
   this.layoutDelegate = angular.noop;
 }
 
 GridListController.prototype = {
-  addTile: function(tileElement, tileAttrs, idx) {
-    var tile = { element: tileElement, attrs: tileAttrs };
-    if (angular.isUndefined(idx)) {
-      this.tiles.push(tile);
-    } else {
-      this.tiles.splice(idx, 0, tile);
-    }
-    this.tilesAdded = true;
-    this.invalidateLayout();
-  },
-
-  removeTile: function(tileElement, tileAttrs) {
-    var idx = this._findTileIndex(tileAttrs);
-    if (idx === -1) {
-      return;
-    }
-    this.tiles.splice(idx, 1);
+  invalidateTiles: function() {
+    this.tilesInvalidated = true;
     this.invalidateLayout();
   },
 
   invalidateLayout: function() {
-    if (this.invalidated) {
+    if (this.layoutInvalidated) {
       return;
     }
-    this.invalidated = true;
+    this.layoutInvalidated = true;
     this.$timeout_(angular.bind(this, this.layout));
   },
 
   layout: function() {
     try {
-      this.layoutDelegate(this.tilesAdded);
+      this.layoutDelegate(this.tilesInvalidated);
     } finally {
-      this.invalidated = false;
-      this.tilesAdded = false;
+      this.layoutInvalidated = false;
+      this.tilesInvalidated = false;
     }
-  },
-
-  _findTileIndex: function(tileAttrs) {
-    for (var i = 0; i < this.tiles.length; i++) {
-      if (this.tiles[i].attrs == tileAttrs) {
-        return i;
-      }
-    }
-    return -1;
   }
 };
 
@@ -724,6 +703,10 @@ function GridTileDirective($mdMedia) {
     template: '<figure ng-transclude></figure>',
     transclude: true,
     scope: {},
+    // Simple controller that exposes attributes to the grid directive
+    controller: function($attrs) {
+      this.$attrs = $attrs;
+    },
     link: postLink
   };
 
@@ -736,24 +719,25 @@ function GridTileDirective($mdMedia) {
         attrs, angular.bind(gridCtrl, gridCtrl.invalidateLayout));
 
     // Tile registration/deregistration
-    // TODO(shyndman): Kind of gross to access parent scope like this.
-    //    Consider other options.
-    gridCtrl.addTile(element, attrs, scope.$parent.$index);
+    gridCtrl.invalidateTiles();
     scope.$on('$destroy', function() {
       unwatchAttrs();
-      gridCtrl.removeTile(element, attrs);
+      gridCtrl.invalidateLayout();
     });
 
     if (angular.isDefined(scope.$parent.$index)) {
       scope.$watch(function() { return scope.$parent.$index; },
         function indexChanged(newIdx, oldIdx) {
-          gridCtrl.removeTile(element, attrs);
-          gridCtrl.addTile(element, attrs, newIdx);
+          if (newIdx === oldIdx) {
+            return;
+          }
+          gridCtrl.invalidateTiles();
         });
     }
   }
 }
 
+
 function GridTileCaptionDirective() {
   return {
     template: '<figcaption ng-transclude></figcaption>',