[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.

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);
 

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);
+            });
         });
     }
 );