From 791504584d69dcfe6425957a285eabacdc7356e4 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 25 Jun 2015 10:45:50 -0700 Subject: [PATCH 1/4] [Fixed Position] Update positions when grid size changes Update positions of elements in a fixed position view when grid size changes (e.g. when switching from one domain object to another.) WTD-1344. --- platform/features/layout/src/FixedController.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js index b87a6cb9d2..0bd52e6d59 100644 --- a/platform/features/layout/src/FixedController.js +++ b/platform/features/layout/src/FixedController.js @@ -60,7 +60,7 @@ define( cellStyles = []; // Update grid size from model - gridSize = ($scope.model || {}).layoutGrid || gridSize; + gridSize = ($scope.model || {}).layoutGrid || DEFAULT_GRID_SIZE; for (x = 0; x < gridExtent[0]; x += 1) { for (y = 0; y < gridExtent[1]; y += 1) { @@ -136,6 +136,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) { @@ -277,6 +287,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); @@ -372,4 +385,4 @@ define( return FixedController; } -); \ No newline at end of file +); From 4279c9e4bfa1d4bf85770342c56f8e02edf5c6d2 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 25 Jun 2015 10:48:49 -0700 Subject: [PATCH 2/4] [Fixed Position] Remove obsolete cell styles Remove obsolete cell style calculations; background grid is handled by CSS now. Changed in the context of WTD-1344. --- .../features/layout/src/FixedController.js | 37 ------------------- 1 file changed, 37 deletions(-) diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js index 0bd52e6d59..09e964f42c 100644 --- a/platform/features/layout/src/FixedController.js +++ b/platform/features/layout/src/FixedController.js @@ -43,7 +43,6 @@ define( gridExtent = DEFAULT_GRID_EXTENT, dragging, subscription, - cellStyles = [], elementProxies = [], names = {}, // Cache names by ID values = {}, // Cache values by ID @@ -52,29 +51,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 || DEFAULT_GRID_SIZE; - - 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) { @@ -299,19 +275,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]`. @@ -330,7 +294,6 @@ define( h = Math.ceil(bounds.height / gridSize[1]); if (w !== gridExtent[0] || h !== gridExtent[1]) { gridExtent = [w, h]; - refreshCellStyles(); } }, /** From 9e55befb2a5804c564c3508d55a6a1118262fef9 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 25 Jun 2015 10:58:01 -0700 Subject: [PATCH 3/4] [Fixed Controller] Add test cases Add test cases for updating position of elements in a fixed position view, WTD-1344. --- .../layout/test/FixedControllerSpec.js | 34 +++++++------------ 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/platform/features/layout/test/FixedControllerSpec.js b/platform/features/layout/test/FixedControllerSpec.js index a858910d76..fed1e7775a 100644 --- a/platform/features/layout/test/FixedControllerSpec.js +++ b/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 () { - 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 () { @@ -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); @@ -403,4 +393,4 @@ define( }); }); } -); \ No newline at end of file +); From 482f355a08a0912cbba8e2b171f7e08999b3cb60 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 25 Jun 2015 11:00:15 -0700 Subject: [PATCH 4/4] [Fixed Controller] Stop tracking bounds Stop tracking size of a fixed position view; no longer necessary now that background grid is handled by CSS. Change made in the context of WTD-1344. --- .../features/layout/res/templates/fixed.html | 9 ++++----- platform/features/layout/src/FixedController.js | 16 +--------------- 2 files changed, 5 insertions(+), 20 deletions(-) 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 09e964f42c..5ebdb4a1c6 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,7 +39,6 @@ define( */ function FixedController($scope, $q, dialogService, telemetrySubscriber, telemetryFormatter) { var gridSize = DEFAULT_GRID_SIZE, - gridExtent = DEFAULT_GRID_EXTENT, dragging, subscription, elementProxies = [], @@ -284,18 +282,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]; - } - }, /** * Get an array of elements in this panel; these are * decorated proxies for both selection and display.