Sky support for flexbox justify content

R=abarth@chromium.org, abarth

Review URL: https://codereview.chromium.org/1164363002

examples/lib/solid_color_box.dart

@@ -9,7 +9,7 @@ class RenderSolidColorBox extends RenderDecoratedBox {
   final Size desiredSize;
   final Color backgroundColor;
 
-  RenderSolidColorBox(Color backgroundColor, { this.desiredSize: const Size.infinite() })
+  RenderSolidColorBox(Color backgroundColor, { this.desiredSize: Size.infinite })
       : backgroundColor = backgroundColor,
         super(decoration: new BoxDecoration(backgroundColor: backgroundColor));
 

examples/raw/justify_content.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:sky';
+import 'dart:math' as math;
+import 'package:sky/framework/app.dart';
+import 'package:sky/framework/rendering/box.dart';
+import 'package:sky/framework/rendering/block.dart';
+import 'package:sky/framework/rendering/flex.dart';
+import 'package:sky/framework/rendering/object.dart';
+import 'package:sky/framework/rendering/paragraph.dart';
+import '../lib/solid_color_box.dart';
+
+AppView app;
+
+// Attempts to draw
+// http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/images/flex-pack.svg
+void main() {
+  var table = new RenderFlex(direction: FlexDirection.vertical);
+
+  void addRow(FlexJustifyContent justify) {
+    RenderParagraph paragraph = new RenderParagraph(text: "${justify}");
+    table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
+    var row = new RenderFlex(direction: FlexDirection.horizontal);
+    row.add(new RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: new Size(80.0, 60.0)));
+    row.add(new RenderSolidColorBox(const Color(0xFFCCFFCC), desiredSize: new Size(64.0, 60.0)));
+    row.add(new RenderSolidColorBox(const Color(0xFFCCCCFF), desiredSize: new Size(160.0, 60.0)));
+    row.justifyContent = justify;
+    table.add(row);
+    row.parentData.flex = 1;
+  }
+
+  addRow(FlexJustifyContent.flexStart);
+  addRow(FlexJustifyContent.flexEnd);
+  addRow(FlexJustifyContent.center);
+  addRow(FlexJustifyContent.spaceBetween);
+  addRow(FlexJustifyContent.spaceAround);
+
+  RenderDecoratedBox root = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
+    child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
+  );
+
+  app = new AppView(root);
+}

sdk/lib/framework/components2/ink_well.dart

@@ -28,7 +28,10 @@ class InkWell extends Component implements ScrollClient {
   InkWell({ Object key, this.children }) : super(key: key);
 
   UINode build() {
-    return new FlexContainer(direction: FlexDirection.horizontal, children: children);
+    return new FlexContainer(
+      direction: FlexDirection.horizontal,
+      justifyContent: FlexJustifyContent.center,
+      children: children);
     // List<UINode> childrenIncludingSplashes = [];
 
     // if (_splashes != null) {

sdk/lib/framework/fn2.dart

@@ -719,16 +719,19 @@ class FlexContainer extends MultiChildRenderObjectWrapper {
   RenderFlex createNode() => new RenderFlex(direction: this.direction);
 
   final FlexDirection direction;
+  final FlexJustifyContent justifyContent;
 
   FlexContainer({
     Object key,
     List<UINode> children,
-    this.direction: FlexDirection.horizontal
+    this.direction: FlexDirection.horizontal,
+    this.justifyContent: FlexJustifyContent.flexStart
   }) : super(key: key, children: children);
 
   void syncRenderObject(UINode old) {
     super.syncRenderObject(old);
     root.direction = direction;
+    root.justifyContent = justifyContent;
   }
 }
 

sdk/lib/framework/rendering/flex.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:math' as math;
 import 'box.dart';
 import 'object.dart';
 
@@ -16,14 +17,22 @@ class FlexBoxParentData extends BoxParentData with ContainerParentDataMixin<Rend
 }
 
 enum FlexDirection { horizontal, vertical }
+enum FlexJustifyContent {
+  flexStart,
+  flexEnd,
+  center,
+  spaceBetween,
+  spaceAround,
+}
 
 class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, FlexBoxParentData>,
                                         RenderBoxContainerDefaultsMixin<RenderBox, FlexBoxParentData> {
   // lays out RenderBox children using flexible layout
 
   RenderFlex({
-    FlexDirection direction: FlexDirection.horizontal
-  }) : _direction = direction;
+    FlexDirection direction: FlexDirection.horizontal,
+    FlexJustifyContent justifyContent: FlexJustifyContent.flexStart
+  }) : _direction = direction, _justifyContent = justifyContent;
 
   FlexDirection _direction;
   FlexDirection get direction => _direction;
@@ -34,6 +43,15 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     }
   }
 
+  FlexJustifyContent _justifyContent;
+  FlexJustifyContent get justifyContent => _justifyContent;
+  void set justifyContent (FlexJustifyContent value) {
+    if (_justifyContent != value) {
+      _justifyContent = value;
+      markNeedsLayout();
+    }
+  }
+
   void setParentData(RenderBox child) {
     if (child.parentData is! FlexBoxParentData)
       child.parentData = new FlexBoxParentData();
@@ -55,10 +73,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     // Based on http://www.w3.org/TR/css-flexbox-1/ Section 9.7 Resolving Flexible Lengths
     // Steps 1-3. Determine used flex factor, size inflexible items, calculate free space
     int totalFlex = 0;
+    int totalChildren = 0;
     assert(constraints != null);
     double freeSpace = (_direction == FlexDirection.horizontal) ? constraints.maxWidth : constraints.maxHeight;
     RenderBox child = firstChild;
     while (child != null) {
+      totalChildren++;
       int flex = _getFlex(child);
       if (flex > 0) {
         totalFlex += child.parentData.flex;
@@ -93,19 +113,54 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
             break;
         }
         child.layout(innerConstraints, parentUsesSize: true);
+        usedSpace += _direction == FlexDirection.horizontal ? child.size.width : child.size.height;
       }
+      child = child.parentData.nextSibling;
+    }
+
+    // Section 8.2: Axis Alignment using the justify-content property
+    double remainingSpace = math.max(0.0, freeSpace - usedSpace);
+    double leadingSpace;
+    double betweenSpace;
+    child = firstChild;
+    switch (_justifyContent) {
+      case FlexJustifyContent.flexStart:
+        leadingSpace = 0.0;
+        betweenSpace = 0.0;
+        break;
+      case FlexJustifyContent.flexEnd:
+        leadingSpace = remainingSpace;
+        betweenSpace = 0.0;
+        break;
+      case FlexJustifyContent.center:
+        leadingSpace = remainingSpace / 2.0;
+        betweenSpace = 0.0;
+        break;
+      case FlexJustifyContent.spaceBetween:
+        leadingSpace = 0.0;
+        betweenSpace = totalChildren > 1 ? remainingSpace / (totalChildren - 1) : 0.0;
+        break;
+      case FlexJustifyContent.spaceAround:
+        betweenSpace = totalChildren > 0 ? remainingSpace / totalChildren : 0.0;
+        leadingSpace = betweenSpace / 2.0;
+        break;
+    }
 
-      // For now, center the flex items in the cross direction
+    // Position elements. For now, center the flex items in the cross direction
+    double mainDimPosition = leadingSpace;
+    child = firstChild;
+    while (child != null) {
       switch (_direction) {
         case FlexDirection.horizontal:
-          child.parentData.position = new Point(usedSpace, size.height / 2.0 - child.size.height / 2.0);
-          usedSpace += child.size.width;
+          child.parentData.position = new Point(mainDimPosition, size.height / 2.0 - child.size.height / 2.0);
+          mainDimPosition += child.size.width;
           break;
         case FlexDirection.vertical:
-          child.parentData.position = new Point(size.width / 2.0 - child.size.width / 2.0, usedSpace);
-          usedSpace += child.size.height;
+          child.parentData.position = new Point(size.width / 2.0 - child.size.width / 2.0, mainDimPosition);
+          mainDimPosition += child.size.height;
           break;
       }
+      mainDimPosition += betweenSpace;
       child = child.parentData.nextSibling;
     }
   }