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 }) {

[Hixie, 2015/05/22 20:32:16]

This can't be in a class above ContainerRenderNodeMixin in the hierarchy. To
reuse code use a helper function.

[jackson, 2015/05/23 00:21:04]

Acknowledged.

+    // 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 }
+enum FlexDirection { Horizontal, Vertical }
 
-// TODO(ianh): FlexBox
+class RenderFlex extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, FlexBoxParentData> {
+  // 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 = clamp(min: _constraints.minWidth, max: _constraints.maxWidth);

[Hixie, 2015/05/22 20:32:16]

width = _constraints.constrainWidth(0.0);

[jackson, 2015/05/23 00:21:04]

Acknowledged.

+    height = clamp(min: _constraints.minHeight, max: _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 = freeSpace / totalFlex;

[Hixie, 2015/05/22 20:32:16]

check what happens when totalFlex is 0.0 and either way put a comment describing
what happens.

[jackson, 2015/05/23 00:21:04]

Acknowledged.

+    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();
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    super.paint(canvas);
+    RenderBox child = _firstChild;

[Hixie, 2015/05/22 20:32:16]

maybe do the same as for handlePointer() (with a helper function used by
BlockBox as well)

[jackson, 2015/05/23 00:21:04]

Acknowledged.

+    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);
   }
 
 }