From a4c704a5a2cea4bc0573bccaf4f559707aaabd09 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 3 Aug 2015 12:18:49 -0700 Subject: [PATCH] [Layout] Ensure minimum frame size Ensure default frame size in a layout is not small, even if the grid size for the layout is very small. WTD-1424. --- .../features/layout/src/LayoutController.js | 30 +++++++++++++++++-- .../layout/test/LayoutControllerSpec.js | 17 +++++++++++ 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/platform/features/layout/src/LayoutController.js b/platform/features/layout/src/LayoutController.js index 1c58f92988..622508f939 100644 --- a/platform/features/layout/src/LayoutController.js +++ b/platform/features/layout/src/LayoutController.js @@ -27,7 +27,8 @@ define( "use strict"; var DEFAULT_DIMENSIONS = [ 12, 8 ], - DEFAULT_GRID_SIZE = [32, 32]; + DEFAULT_GRID_SIZE = [32, 32], + MINIMUM_FRAME_SIZE = [ 320, 180 ]; /** * The LayoutController is responsible for supporting the @@ -67,12 +68,22 @@ define( }; } + // Generate default positions for a new panel + function defaultDimensions() { + return MINIMUM_FRAME_SIZE.map(function (min, i) { + return Math.max( + Math.ceil(min / gridSize[i]), + DEFAULT_DIMENSIONS[i] + ); + }); + } + // Generate a default position (in its raw format) for a frame. // Use an index to ensure that default positions are unique. function defaultPosition(index) { return { position: [index, index], - dimensions: DEFAULT_DIMENSIONS + dimensions: defaultDimensions() }; } @@ -107,6 +118,18 @@ define( ids.forEach(populatePosition); } + // Update grid size when it changed + function updateGridSize(layoutGrid) { + var oldSize = gridSize; + + gridSize = layoutGrid || DEFAULT_GRID_SIZE; + + // Only update panel positions if this actually changed things + if (gridSize[0] !== oldSize[0] || gridSize[1] !== oldSize[1]) { + lookupPanels(Object.keys(positions)); + } + } + // Position a panel after a drop event function handleDrop(e, id, position) { if (e.defaultPrevented) { @@ -138,6 +161,9 @@ define( e.preventDefault(); } + // Watch for changes to the grid size in the model + $scope.$watch("model.layoutGrid", updateGridSize); + // Position panes when the model field changes $scope.$watch("model.composition", lookupPanels); diff --git a/platform/features/layout/test/LayoutControllerSpec.js b/platform/features/layout/test/LayoutControllerSpec.js index 5ec80755f4..b0ab7a13fb 100644 --- a/platform/features/layout/test/LayoutControllerSpec.js +++ b/platform/features/layout/test/LayoutControllerSpec.js @@ -175,6 +175,23 @@ define( ); expect(testConfiguration.panels.d).not.toBeDefined(); }); + + it("ensures a minimum frame size", function () { + var styleB, styleC; + + // Start with a very small frame size + testModel.layoutGrid = [ 1, 1 ]; + + // White-boxy; we know which watch is which + mockScope.$watch.calls[0].args[1](testModel.layoutGrid); + mockScope.$watch.calls[1].args[1](testModel.composition); + + styleB = controller.getFrameStyle("b"); + + // Resulting size should still be reasonably large pixel-size + expect(parseInt(styleB.width, 10)).toBeGreaterThan(63); + expect(parseInt(styleB.width, 10)).toBeGreaterThan(31); + }); }); } );