WIP Flexbox Layout Manager for Sky framework.

sky/sdk/lib/framework/layout2.dart

Index: sky/sdk/lib/framework/layout2.dart
diff --git a/sky/sdk/lib/framework/layout2.dart b/sky/sdk/lib/framework/layout2.dart
index 0284dc845acb6614d0ece7aed9ff830258694cbe..763d6f105b19ce91eccd24127f8e8c2aa4879936 100644
--- a/sky/sdk/lib/framework/layout2.dart
+++ b/sky/sdk/lib/framework/layout2.dart
@@ -461,6 +461,22 @@ abstract class RenderBox extends RenderNode {
     layoutDone();
   }
 
+  bool handlePointer(sky.PointerEvent event, { double x: 0.0, double y: 0.0 }) {
+    // the x, y parameters have the top left of the node's box as the origin
+    RenderBox child = _lastChild;
+    while (child != null) {
+      assert(child.parentData is BoxParentData);
+      if ((x >= child.parentData.x) && (x < child.parentData.x + child.width) &&
+          (y >= child.parentData.y) && (y < child.parentData.y + child.height)) {
+        if (child.handlePointer(event, x: x-child.parentData.x, y: y-child.parentData.y))
+          return true;
+        break;
+      }
+      child = child.parentData.previousSibling;
+    }
+    return super.handlePointer(event, x: x, y: y);
+  }
+
   double width;
   double height;
 }
@@ -682,22 +698,6 @@ class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin<Rende
     layoutDone();
   }
 
-  bool handlePointer(sky.PointerEvent event, { double x: 0.0, double y: 0.0 }) {
-    // the x, y parameters have the top left of the node's box as the origin
-    RenderBox child = _lastChild;
-    while (child != null) {
-      assert(child.parentData is BlockParentData);
-      if ((x >= child.parentData.x) && (x < child.parentData.x + child.width) &&
-          (y >= child.parentData.y) && (y < child.parentData.y + child.height)) {
-        if (child.handlePointer(event, x: x-child.parentData.x, y: y-child.parentData.y))
-          return true;
-        break;
-      }
-      child = child.parentData.previousSibling;
-    }
-    return super.handlePointer(event, x: x, y: y);
-  }
-
   void paint(RenderNodeDisplayList canvas) {
     super.paint(canvas);
     RenderBox child = _firstChild;
@@ -710,7 +710,9 @@ class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin<Rende
 
 }
 
-class FlexBoxParentData extends BoxParentData {
+// FLEXBOX LAYOUT MANAGER
+
+class FlexBoxParentData extends BoxParentData with ContainerParentDataMixin<RenderBox> {
   int flex;
   void merge(FlexBoxParentData other) {
     if (other.flex != null)
@@ -721,8 +723,110 @@ class FlexBoxParentData extends BoxParentData {
 
 enum FlexDirection { Row, Column }
 
-// TODO(ianh): FlexBox
+class RenderFlex extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, FlexBoxParentData> {
+  // lays out RenderBox children in a vertical stack using flexible layout
+  // uses the maximum width and height provided by the parent
+
+  RenderFlex({
+    BoxDecoration decoration,
+    FlexDirection direction: FlexDirection.Row
+  }) : super(decoration), _direction = direction;
+
+  FlexDirection _direction;
+  FlexDirection get direction => _direction;
+  void set direction (FlexDirection value) {
+    _direction = value;

[abarth-chromium, 2015/05/22 06:26:23]

Should early out when the newDirection and _direction match.

[jackson, 2015/05/22 20:06:54]

Acknowledged.

+    relayout();

[abarth-chromium, 2015/05/22 06:26:23]

Should markForLayout instead of calling relayout.  The markForLayout function
marks this node as dirty and in need of a layout.  If you call relayout here,
we'll relayout immediately, which could be wasted work.

[jackson, 2015/05/22 20:06:55]

Acknowledged.

+  }
+
+  void setParentData(RenderBox child) {
+    if (child.parentData is! FlexBoxParentData)
+      child.parentData = new FlexBoxParentData();
+  }
+
+  void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
+    width = clamp(min: constraints.minWidth, max: constraints.maxWidth);
+    height = clamp(min: constraints.minHeight, max: constraints.maxHeight);
+    relayout();
+  }
+
+  void relayout() {
+    internalLayout(this);
+  }

[abarth-chromium, 2015/05/22 06:26:22]

layout and relayout don't quite seem right.  You might want to talk it over with
hixie to see what he has in mind for these functions.

[jackson, 2015/05/22 20:06:54]

Acknowledged.

+
+  int getFlex(RenderBox child) {

[abarth-chromium, 2015/05/22 06:26:22]

s/getFlex/_getFlex/ to mark the function as private to this library.

[jackson, 2015/05/22 20:06:54]

Acknowledged.

+    assert(child.parentData is FlexBoxParentData);
+    return (child.parentData.flex != null ? child.parentData.flex : 0);
+  }
+
+  void internalLayout(RenderNode relayoutSubtreeRoot) {
+    // 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 numFlexibleChildren = 0;
+    int totalFlex = 0;
+    double freeSpace = (_direction == FlexDirection.Row) ? width : height;
+    RenderBox child = _firstChild;
+    while (child != null) {
+      int flex = getFlex(child);
+      if (flex > 0) {
+        numFlexibleChildren++;
+        totalFlex += child.parentData.flex;
+      } else {
+        child.layout(new BoxConstraints(minWidth: width, maxWidth: width),

[abarth-chromium, 2015/05/22 06:26:23]

Should the BoxConstraints depend on the flex direction?  For example, is the
width really this constrained for a row flex direction?

[jackson, 2015/05/22 20:06:54]

Acknowledged.

+                     relayoutSubtreeRoot: relayoutSubtreeRoot);

[abarth-chromium, 2015/05/22 06:26:23]

I think you're supposed to call getIntrinsicDimensions here because you just
want an estimate of the size of the elements.  Again, hixie is the right person
to ask.

[jackson, 2015/05/22 20:06:54]

I talked to hixie, he said that it's ok to call layout here as long as we're
only calling it once since we're going to have to call it once at some point in
this method. If we find ourselves calling layout more than once then I'll change
it to use getIntrinsicDimensions instead.

+        freeSpace -= (_direction == FlexDirection.Row) ? child.width : child.height;
+      }
+      child = child.parentData.nextSibling;
+    }
+
+    // Steps 4-5. Distribute remaining space to flexible children.
+    double spacePerFlex = freeSpace / totalFlex;
+    double usedSpace = 0.0;
+    child = _firstChild;
+    while (child != null) {
+      int flex = getFlex(child);
+      if (flex > 0) {
+        double spaceForChild = spacePerFlex * flex;
+        BoxConstraints constraints;
+        switch (_direction) {
+          case FlexDirection.Row:

[ojan, 2015/05/22 06:48:11]

Not directly related to this patch, but I noticed it while looking it over. We
should s/Row/Horizontal/ and s/Column/Vertical/. The web has these really
confusing names because it's trying to be generic WRT vertical writing modes
which we don't have and if we do add them, we'll have Horizontal and Vertical be
the logical values instead of the physical ones.

[jackson, 2015/05/22 20:06:55]

Acknowledged.

+            constraints = new BoxConstraints(maxHeight: height, maxWidth: spaceForChild);

[abarth-chromium, 2015/05/22 06:26:22]

Do we want to set the minWidth to spaceForChild as well to force the child to be
exactly that wide?

[jackson, 2015/05/22 20:06:54]

Acknowledged.

+            break;
+          case FlexDirection.Column:
+            constraints = new BoxConstraints(maxHeight: spaceForChild, maxWidth: width);

[abarth-chromium, 2015/05/22 06:26:22]

Same here for minHeight?

[jackson, 2015/05/22 20:06:55]

Acknowledged.

+            break;
+        }
+        child.layout(constraints, relayoutSubtreeRoot: relayoutSubtreeRoot);
+      }
+
+      switch (_direction) {
+        // always center the item
+        case FlexDirection.Row:
+          child.parentData.x = usedSpace;
+          usedSpace += child.width;
+          child.parentData.y = height / 2 - child.height / 2;
+          break;
+        case FlexDirection.Column:
+          child.parentData.y = usedSpace;
+          usedSpace += child.height;
+          child.parentData.x = width / 2 - child.width / 2;
+          break;
+      }
+      child = child.parentData.nextSibling;
+    }
+    layoutDone();
+  }
 
+  void paint(RenderNodeDisplayList canvas) {
+    super.paint(canvas);
+    RenderBox child = _firstChild;
+    while (child != null) {
+      assert(child.parentData is FlexBoxParentData);
+      canvas.paintChild(child, child.parentData.x, child.parentData.y);
+      child = child.parentData.nextSibling;
+    }
+  }
+}
 
 // SCAFFOLD LAYOUT MANAGER