WIP Flexbox Layout Manager for Sky framework.

sky/sdk/lib/framework/layout2.dart

 library layout;
 
 // This version of layout.dart is an update to the other one, this one using new APIs.
 // It will not work in a stock Sky setup currently.
 
 import 'node.dart';
 
 import 'dart:sky' as sky;
 
 // ABSTRACT LAYOUT
@@ skipping 443 matching lines @@
   BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
     return new BoxDimensions.withConstraints(constraints);
   }
 
   void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
     width = constraints.constrainWidth(0.0);
     height = constraints.constrainHeight(0.0);
     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;
 }
 
 class BoxDecoration {
   const BoxDecoration({
     this.backgroundColor
   });
 
   final int backgroundColor;
@@ skipping 201 matching lines @@
       assert(child.parentData is BlockParentData);
       child.parentData.x = _padding.left;
       child.parentData.y = y;
       y += child.height;
       child = child.parentData.nextSibling;
     }
     height = clamp(min: _minHeight, value: y + _padding.bottom, max: _maxHeight);
     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;
     while (child != null) {
       assert(child.parentData is BlockParentData);
       canvas.paintChild(child, child.parentData.x, child.parentData.y);
       child = child.parentData.nextSibling;
     }
   }
 
 }
 
-class FlexBoxParentData extends BoxParentData {
+// FLEXBOX LAYOUT MANAGER
+
+class FlexBoxParentData extends BoxParentData with ContainerParentDataMixin<RenderBox> {
   int flex;
   void merge(FlexBoxParentData other) {
     if (other.flex != null)
       flex = other.flex;
     super.merge(other);
   }
 }
 
 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
 
 // a sample special-purpose layout manager
 
 class ScaffoldBox extends RenderBox {
 
   ScaffoldBox(this.toolbar, this.body, this.statusbar, this.drawer) {
     assert(body != null);
   }
@@ skipping 55 matching lines @@
     canvas.paintChild(body, (body.parentData as BoxParentData).x, (body.parentData as BoxParentData).y);
     if (statusbar != null)
       canvas.paintChild(statusbar, (statusbar.parentData as BoxParentData).x, (statusbar.parentData as BoxParentData).y);
     if (toolbar != null)
       canvas.paintChild(toolbar, (toolbar.parentData as BoxParentData).x, (toolbar.parentData as BoxParentData).y);
     if (drawer != null)
       canvas.paintChild(drawer, (drawer.parentData as BoxParentData).x, (drawer.parentData as BoxParentData).y);
   }
 
 }