diff --git a/platform/features/layout/res/templates/fixed.html b/platform/features/layout/res/templates/fixed.html index fb537d6ff9..25639c2997 100644 --- a/platform/features/layout/res/templates/fixed.html +++ b/platform/features/layout/res/templates/fixed.html @@ -20,14 +20,13 @@ at runtime from the About dialog for additional information. -->
+ ng-controller="FixedController as controller">
-
-
@@ -60,4 +59,4 @@
- \ No newline at end of file + diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js index e461568853..42e6b6dbce 100644 --- a/platform/features/layout/src/FixedController.js +++ b/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_EXTENT = [4, 4]; + DEFAULT_GRID_SIZE = [64, 16]; /** * 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) { @@ -289,6 +273,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); @@ -298,19 +285,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]`. @@ -319,19 +294,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. diff --git a/platform/features/layout/test/FixedControllerSpec.js b/platform/features/layout/test/FixedControllerSpec.js index 4f3d548908..b95bbc9eb5 100644 --- a/platform/features/layout/test/FixedControllerSpec.js +++ b/platform/features/layout/test/FixedControllerSpec.js @@ -142,11 +142,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); @@ -271,25 +266,19 @@ define( expect(elements[2].value).toEqual("Formatted 31.42"); }); - it("adds grid cells to fill boundaries", function () { - var s1 = { - width: testGrid[0] * 8, - height: testGrid[1] * 4 - }, - s2 = { - width: testGrid[0] * 10, - height: testGrid[1] * 6 - }; + it("updates elements styles when grid size changes", function () { + var originalLeft; + mockScope.domainObject = mockDomainObject; mockScope.model = testModel; + findWatch("domainObject")(mockDomainObject); + findWatch("model.modified")(1); findWatch("model.composition")(mockScope.model.composition); - - // Set first bounds - controller.setBounds(s1); - expect(controller.getCellStyles().length).toEqual(32); // 8 * 4 - // Set new bounds - controller.setBounds(s2); - expect(controller.getCellStyles().length).toEqual(60); // 10 * 6 + findWatch("model.layoutGrid")([10, 10]); + originalLeft = controller.getElements()[0].style.left; + findWatch("model.layoutGrid")([20, 20]); + expect(controller.getElements()[0].style.left) + .not.toEqual(originalLeft); }); it("listens for drop events", function () { @@ -352,6 +341,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);