Merge remote-tracking branch 'origin/open1344' into open-1348

platform/features/layout/res/templates/fixed.html

@@ -20,8 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="t-fixed-position l-fixed-position"
-     ng-controller="FixedController as controller"
+     ng-controller="FixedController as controller">
-     mct-resize="controller.setBounds(bounds)">
 
     <!-- Background grid -->
     <div class="l-grid-holder" ng-click="controller.clearSelection()">

platform/features/layout/src/FixedController.js

@@ -27,8 +27,7 @@ define(
         "use strict";
 
         var DEFAULT_DIMENSIONS = [ 2, 1 ],
-            DEFAULT_GRID_SIZE = [64, 16],
+            DEFAULT_GRID_SIZE = [64, 16];
-            DEFAULT_GRID_EXTENT = [4, 4];
 
         /**
          * The FixedController is responsible for supporting the
@@ -40,10 +39,8 @@ define(
          */
         function FixedController($scope, $q, dialogService, telemetrySubscriber, telemetryFormatter) {
             var gridSize = DEFAULT_GRID_SIZE,
-                gridExtent = DEFAULT_GRID_EXTENT,
                 dragging,
                 subscription,
-                cellStyles = [],
                 elementProxies = [],
                 names = {}, // Cache names by ID
                 values = {}, // Cache values by ID
@@ -52,29 +49,6 @@ define(
                 moveHandle,
                 selection;
 
-            // Refresh cell styles (e.g. because grid extent changed)
-            function refreshCellStyles() {
-                var x, y;
-
-                // Clear previous styles
-                cellStyles = [];
-
-                // Update grid size from model
-                gridSize = ($scope.model || {}).layoutGrid || gridSize;
-
-                for (x = 0; x < gridExtent[0]; x += 1) {
-                    for (y = 0; y < gridExtent[1]; y += 1) {
-                        // Position blocks; subtract out border size from w/h
-                        cellStyles.push({
-                            left: x * gridSize[0] + 'px',
-                            top: y * gridSize[1] + 'px',
-                            width: gridSize[0] - 1 + 'px',
-                            height: gridSize[1] - 1 + 'px'
-                        });
-                    }
-                }
-            }
-
             // Convert from element x/y/width/height to an
             // apropriate ng-style argument, to position elements.
             function convertPosition(elementProxy) {
@@ -143,6 +117,16 @@ define(
                 }
             }
 
+            // Update element positions when grid size changes
+            function updateElementPositions(layoutGrid) {
+                // Update grid size from model
+                gridSize = layoutGrid || DEFAULT_GRID_SIZE;
+
+                elementProxies.forEach(function (elementProxy) {
+                    elementProxy.style = convertPosition(elementProxy);
+                });
+            }
+
             // Update telemetry values based on new data available
             function updateValues() {
                 if (subscription) {
@@ -284,6 +268,9 @@ define(
             // Position panes when the model field changes
             $scope.$watch("model.composition", updateComposition);
 
+            // Detect changes to grid size
+            $scope.$watch("model.layoutGrid", updateElementPositions);
+
             // Subscribe to telemetry when an object is available
             $scope.$watch("domainObject", subscribe);
 
@@ -293,19 +280,7 @@ define(
             // Position panes where they are dropped
             $scope.$on("mctDrop", handleDrop);
 
-            // Initialize styles (position etc.) for cells
-            refreshCellStyles();
-
             return {
-                /**
-                 * Get styles for all background cells, as will populate the
-                 * ng-style tag.
-                 * @memberof FixedController#
-                 * @returns {Array} cell styles
-                 */
-                getCellStyles: function () {
-                    return cellStyles;
-                },
                 /**
                  * Get the size of the grid, in pixels. The returned array
                  * is in the form `[x, y]`.
@@ -314,19 +289,6 @@ define(
                 getGridSize: function () {
                     return gridSize;
                 },
-                /**
-                 * Set the size of the viewable fixed position area.
-                 * @memberof FixedController#
-                 * @param bounds the width/height, as reported by mct-resize
-                 */
-                setBounds: function (bounds) {
-                    var w = Math.ceil(bounds.width / gridSize[0]),
-                        h = Math.ceil(bounds.height / gridSize[1]);
-                    if (w !== gridExtent[0] || h !== gridExtent[1]) {
-                        gridExtent = [w, h];
-                        refreshCellStyles();
-                    }
-                },
                 /**
                  * Get an array of elements in this panel; these are
                  * decorated proxies for both selection and display.

platform/features/layout/test/FixedControllerSpec.js

@@ -137,11 +137,6 @@ define(
                 );
             });
 
-            it("provides styles for cells", function () {
-                expect(controller.getCellStyles())
-                    .toEqual(jasmine.any(Array));
-            });
-
             it("subscribes when a domain object is available", function () {
                 mockScope.domainObject = mockDomainObject;
                 findWatch("domainObject")(mockDomainObject);
@@ -266,25 +261,19 @@ define(
                 expect(elements[2].value).toEqual("Formatted 31.42");
             });
 
-            it("adds grid cells to fill boundaries", function () {
+            it("updates elements styles when grid size changes", function () {
-                var s1 = {
+                var originalLeft;
-                        width: testGrid[0] * 8,
-                        height: testGrid[1] * 4
-                    },
-                    s2 = {
-                        width: testGrid[0] * 10,
-                        height: testGrid[1] * 6
-                    };
 
+                mockScope.domainObject = mockDomainObject;
                 mockScope.model = testModel;
+                findWatch("domainObject")(mockDomainObject);
+                findWatch("model.modified")(1);
                 findWatch("model.composition")(mockScope.model.composition);
-
+                findWatch("model.layoutGrid")([10, 10]);
-                // Set first bounds
+                originalLeft = controller.getElements()[0].style.left;
-                controller.setBounds(s1);
+                findWatch("model.layoutGrid")([20, 20]);
-                expect(controller.getCellStyles().length).toEqual(32); // 8 * 4
+                expect(controller.getElements()[0].style.left)
-                // Set new bounds
+                    .not.toEqual(originalLeft);
-                controller.setBounds(s2);
-                expect(controller.getCellStyles().length).toEqual(60); // 10 * 6
             });
 
             it("listens for drop events", function () {
@@ -328,6 +317,7 @@ define(
             });
 
             it("exposes its grid size", function () {
+                findWatch('model.layoutGrid')(testGrid);
                 // Template needs to be able to pass this into line
                 // elements to size SVGs appropriately
                 expect(controller.getGridSize()).toEqual(testGrid);