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 203 matching lines @@
     int newAngle, // 0..3
     Duration time
   }) { }
 
 
   // HIT TESTING  
 
   bool handlePointer(sky.PointerEvent event, { double x: 0.0, double y: 0.0 }) {
     // override this if you have children, to hand it to the appropriate child
     // override this if you want to do anything with the pointer event
+    return false;
   }
 
 
   // PAINTING
 
   static bool _debugDoingPaint = false;
   void markNeedsPaint() {
     assert(!_debugDoingPaint);
     // TODO(abarth): It's very redunant to call this for every node in the
     // render tree during layout. We should instead compute a summary bit and
@@ skipping 184 matching lines @@
 
   double constrainHeight(double height) {
     return clamp(min: minHeight, max: maxHeight, value: height);
   }
 }
 
 class BoxDimensions {
   const BoxDimensions({this.width, this.height});
 
   BoxDimensions.withConstraints(
-      BoxConstraints constraints, {double width: 0.0, double height: 0.0}) {
-    this.width = constraints.constrainWidth(width);
-    this.height = constraints.constrainHeight(height);
-  }
+      BoxConstraints constraints, {double width: 0.0, double height: 0.0})
+    : width = constraints.constrainWidth(width),
+      height = constraints.constrainHeight(height);
 
   final double width;
   final double height;
 }
 
 class BoxParentData extends ParentData {
   double x = 0.0;
   double y = 0.0;
 }
 
@@ skipping 131 matching lines @@
   void paintFrame() {
     RenderNode._debugDoingPaint = true;
     var canvas = new RenderNodeDisplayList(sky.view.width, sky.view.height);
     paint(canvas);
     sky.view.picture = canvas.endRecording();
     RenderNode._debugDoingPaint = false;
   }
 
 }
 
+// DEFAULT BEHAVIORS FOR RENDERBOX CONTAINERS
+abstract class RenderBoxContainerDefaultsMixin<ChildType extends RenderBox, ParentDataType extends ContainerParentDataMixin<ChildType>> implements ContainerRenderNodeMixin<ChildType, ParentDataType> {
+  bool defaultHandlePointer(sky.PointerEvent event, double x, double y) {
+    // the x, y parameters have the top left of the node's box as the origin
+    ChildType 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 false;
+  }
+
+  void defaultPaint(RenderNodeDisplayList canvas) {
+    RenderBox child = firstChild;
+    while (child != null) {
+      assert(child.parentData is BoxParentData);
+      canvas.paintChild(child, child.parentData.x, child.parentData.y);
+      child = child.parentData.nextSibling;
+    }
+  }
+}
 
 // BLOCK LAYOUT MANAGER
 
 class EdgeDims {
   // used for e.g. padding
   const EdgeDims(this.top, this.right, this.bottom, this.left);
   final double top;
   final double right;
   final double bottom;
   final double left;
   operator ==(EdgeDims other) => (top == other.top) ||
                                  (right == other.right) ||
                                  (bottom == other.bottom) ||
                                  (left == other.left);
 }
 
 class BlockParentData extends BoxParentData with ContainerParentDataMixin<RenderBox> { }
 
-class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, BlockParentData> {
+class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, BlockParentData>,
+                                                  RenderBoxContainerDefaultsMixin<RenderBox, BlockParentData> {
   // lays out RenderBox children in a vertical stack
   // uses the maximum width provided by the parent
   // sizes itself to the height of its child stack
 
   RenderBlock({
     BoxDecoration decoration,
     EdgeDims padding: const EdgeDims(0.0, 0.0, 0.0, 0.0)
   }) : super(decoration), _padding = padding;
 
   EdgeDims _padding;
@@ skipping 15 matching lines @@
   // were laid out with the given constraints this can walk the tree
   // if it must, but it should be as cheap as possible; just get the
   // dimensions and nothing else (e.g. don't calculate hypothetical
   // child positions if they're not needed to determine dimensions)
   BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
     double outerHeight = _padding.top + _padding.bottom;
     double outerWidth = constraints.constrainWidth(constraints.maxWidth);
     assert(outerWidth < double.INFINITY);
     double innerWidth = outerWidth - (_padding.left + _padding.right);
     RenderBox child = _firstChild;
-    BoxConstraints constraints = new BoxConstraints(minWidth: innerWidth,
-                                                    maxWidth: innerWidth);
+    BoxConstraints innerConstraints = new BoxConstraints(minWidth: innerWidth,
+                                                         maxWidth: innerWidth);
     while (child != null) {
-      outerHeight += child.getIntrinsicDimensions(constraints).height;
+      outerHeight += child.getIntrinsicDimensions(innerConstraints).height;
       assert(child.parentData is BlockParentData);
       child = child.parentData.nextSibling;
     }
 
     return new BoxDimensions(width: outerWidth,
                              height: constraints.constrainHeight(outerHeight));
   }
 
   double _minHeight; // value cached from parent for relayout call
   double _maxHeight; // value cached from parent for relayout call
@@ skipping 25 matching lines @@
       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);
+    return defaultHandlePointer(event, x, y) || 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;
-    }
+    defaultPaint(canvas);
   }
 
 }
 
-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 }
+enum FlexDirection { Horizontal, Vertical }
 
-// TODO(ianh): FlexBox
+class RenderFlex extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, FlexBoxParentData>,
+                                                 RenderBoxContainerDefaultsMixin<RenderBox, BlockParentData> {
+  // lays out RenderBox children using flexible layout
 
+  RenderFlex({
+    BoxDecoration decoration,
+    FlexDirection direction: FlexDirection.Horizontal
+  }) : super(decoration), _direction = direction;
+
+  FlexDirection _direction;
+  FlexDirection get direction => _direction;
+  void set direction (FlexDirection value) {
+    if (_direction != value) {
+      _direction = value;
+      markNeedsLayout();
+    }
+  }
+
+  void setParentData(RenderBox child) {
+    if (child.parentData is! FlexBoxParentData)
+      child.parentData = new FlexBoxParentData();
+  }
+
+  BoxConstraints _constraints;  // value cached from parent for relayout call
+  void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
+    if (relayoutSubtreeRoot != null)
+      saveRelayoutSubtreeRoot(relayoutSubtreeRoot);
+    relayoutSubtreeRoot = relayoutSubtreeRoot == null ? this : relayoutSubtreeRoot;
+    _constraints = constraints;
+    width = _constraints.constrainWidth(_constraints.maxWidth);
+    height = _constraints.constrainHeight(_constraints.maxHeight);
+    assert(height < double.INFINITY);
+    assert(width < double.INFINITY);
+    internalLayout(relayoutSubtreeRoot);
+  }
+
+  void relayout() {
+    internalLayout(this);
+  }
+
+  int _getFlex(RenderBox child) {
+    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;
+    assert(_constraints != null);
+    double freeSpace = (_direction == FlexDirection.Horizontal) ? _constraints.maxWidth : _constraints.maxHeight;
+    RenderBox child = _firstChild;
+    while (child != null) {
+      int flex = _getFlex(child);
+      if (flex > 0) {
+        numFlexibleChildren++;
+        totalFlex += child.parentData.flex;
+      } else {
+        BoxConstraints constraints = new BoxConstraints(maxHeight: _constraints.maxHeight,
+                                                        maxWidth: _constraints.maxWidth);
+        child.layout(constraints,
+                     relayoutSubtreeRoot: relayoutSubtreeRoot);
+        freeSpace -= (_direction == FlexDirection.Horizontal) ? child.width : child.height;
+      }
+      child = child.parentData.nextSibling;
+    }
+
+    // Steps 4-5. Distribute remaining space to flexible children.
+    double spacePerFlex = totalFlex > 0 ? (freeSpace / totalFlex) : 0.0;
+    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.Horizontal:
+            constraints = new BoxConstraints(maxHeight: _constraints.maxHeight,
+                                             minWidth: spaceForChild,
+                                             maxWidth: spaceForChild);
+            break;
+          case FlexDirection.Vertical:
+            constraints = new BoxConstraints(minHeight: spaceForChild,
+                                             maxHeight: spaceForChild,
+                                             maxWidth: _constraints.maxWidth);
+            break;
+        }
+        child.layout(constraints, relayoutSubtreeRoot: relayoutSubtreeRoot);
+      }
+
+      // For now, center the flex items in the cross direction
+      switch (_direction) {
+        case FlexDirection.Horizontal:
+          child.parentData.x = usedSpace;
+          usedSpace += child.width;
+          child.parentData.y = height / 2 - child.height / 2;
+          break;
+        case FlexDirection.Vertical:
+          child.parentData.y = usedSpace;
+          usedSpace += child.height;
+          child.parentData.x = width / 2 - child.width / 2;
+          break;
+      }
+      child = child.parentData.nextSibling;
+    }
+    layoutDone();
+  }
+
+  bool handlePointer(sky.PointerEvent event, { double x: 0.0, double y: 0.0 }) {
+    return defaultHandlePointer(event, x, y) || super.handlePointer(event, x: x, y: y);
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    super.paint(canvas);
+    defaultPaint(canvas);
+  }
+}
 
 // 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);
   }
 
 }