Merge pull request #95 from collinjackson/baseline

Fix #57 Flex needs to understand baselines

Author: collinjackson

sky/sdk/example/rendering/align_items.dart

@@ -0,0 +1,53 @@
+// 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 'package:sky/painting/text_style.dart';
+import 'package:sky/rendering/box.dart';
+import 'package:sky/rendering/flex.dart';
+import 'package:sky/rendering/object.dart';
+import 'package:sky/rendering/paragraph.dart';
+import 'package:sky/rendering/sky_binding.dart';
+
+import 'solid_color_box.dart';
+
+void main() {
+  var table = new RenderFlex(direction: FlexDirection.vertical);
+
+  for(FlexAlignItems alignItems in FlexAlignItems.values) {
+    TextStyle style = const TextStyle(color: const Color(0xFF000000));
+    RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${alignItems}")]));
+    table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
+    var row = new RenderFlex(alignItems: alignItems);
+
+    style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
+    row.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0x7FFFCCCC)),
+      child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
+    ));
+    style = new TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
+    row.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
+      child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
+    ));
+    var subrow = new RenderFlex(alignItems: alignItems);
+    style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
+    subrow.add(new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),
+      child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo foo')]))
+    ));
+    subrow.add(new RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: new Size(30.0, 40.0)));
+    row.add(subrow);
+    table.add(row);
+    row.parentData.flex = 1;
+  }
+
+  RenderDecoratedBox root = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
+    child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
+  );
+
+  new SkyBinding(root: root);
+}

sky/sdk/example/stocks/lib/stock_row.dart

@@ -26,10 +26,6 @@ class StockRow extends Component {
     if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
 
     List<Widget> children = [
-      new Container(
-        child: new StockArrow(percentChange: stock.percentChange),
-        margin: const EdgeDims.only(right: 5.0)
-      ),
       new Flexible(
         child: new Text(stock.symbol),
         flex: 2
@@ -58,7 +54,13 @@ class StockRow extends Component {
             bottom: new BorderSide(color: Theme.of(this).dividerColor)
           )
         ),
-        child: new Flex(children)
+        child: new Flex([
+          new Container(
+            child: new StockArrow(percentChange: stock.percentChange),
+            margin: const EdgeDims.only(right: 5.0)
+          ),
+          new Flex(children, alignItems: FlexAlignItems.baseline)
+        ])
       )
     );
   }

sky/sdk/lib/rendering/box.dart

@@ -1662,7 +1662,7 @@ abstract class RenderBoxContainerDefaultsMixin<ChildType extends RenderBox, Pare
       assert(child.parentData is ParentDataType);
       double candidate = child.getDistanceToActualBaseline(baseline);
       if (candidate != null) {
-        candidate += child.parentData.position.x;
+        candidate += child.parentData.position.y;
         if (result != null)
           result = math.min(result, candidate);
         else

sky/sdk/lib/rendering/flex.dart

@@ -34,6 +34,7 @@ enum FlexAlignItems {
   end,
   center,
   stretch,
+  baseline,
 }
 
 typedef double _ChildSizingFunction(RenderBox child, BoxConstraints constraints);
@@ -315,6 +316,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     // Steps 4-5. Distribute remaining space to flexible children.
     double spacePerFlex = totalFlex > 0 ? (freeSpace / totalFlex) : 0.0;
     double usedSpace = 0.0;
+    double maxBaselineDistance = 0.0;
     child = firstChild;
     while (child != null) {
       int flex = _getFlex(child);
@@ -337,6 +339,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         usedSpace += _getMainSize(child);
         crossSize = math.max(crossSize, _getCrossSize(child));
       }
+      if (alignItems == FlexAlignItems.baseline) {
+        // TODO(jackson): Support for non-alphabetic baselines
+        double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
+        if (distance != null)
+          maxBaselineDistance = math.max(maxBaselineDistance, distance);
+      }
       assert(child.parentData is FlexBoxParentData);
       child = child.parentData.nextSibling;
     }
@@ -345,7 +353,6 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     double remainingSpace = math.max(0.0, freeSpace - usedSpace);
     double leadingSpace;
     double betweenSpace;
-    child = firstChild;
     switch (_justifyContent) {
       case FlexJustifyContent.start:
         leadingSpace = 0.0;
@@ -380,7 +387,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         break;
     }
 
-    // Position elements. For now, center the flex items in the cross direction
+    // Position elements
     double childMainPosition = leadingSpace;
     child = firstChild;
     while (child != null) {
@@ -397,6 +404,16 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         case FlexAlignItems.center:
           childCrossPosition = crossSize / 2.0 - _getCrossSize(child) / 2.0;
           break;
+        case FlexAlignItems.baseline:
+          childCrossPosition = 0.0;
+          // TODO(jackson): Support for vertical baselines
+          if (_direction == FlexDirection.horizontal) {
+            // TODO(jackson): Support for non-alphabetic baselines
+            double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
+            if (distance != null)
+              childCrossPosition = maxBaselineDistance - distance;
+          }
+          break;
       }
       switch (_direction) {
         case FlexDirection.horizontal: