WIP Flexbox Layout Manager for Sky framework.

sky/examples/raw/simple_render_tree.dart

Index: sky/examples/raw/simple_render_tree.dart
diff --git a/sky/examples/raw/simple_render_tree.dart b/sky/examples/raw/simple_render_tree.dart
index a9e559b0ac463e4a76993062457d67cc548bd9ee..33ad75c861253771a0f233f3911adb0ceb3cd160 100644
--- a/sky/examples/raw/simple_render_tree.dart
+++ b/sky/examples/raw/simple_render_tree.dart
@@ -13,16 +13,6 @@ class RenderSolidColor extends RenderDecoratedBox {
       : super(new BoxDecoration(backgroundColor: backgroundColor)),
         backgroundColor = backgroundColor;
 
-  BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
-    return new BoxDimensions.withConstraints(constraints, height: 200.0);
-  }
-
-  void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
-    width = constraints.constrainWidth(constraints.maxWidth);
-    height = constraints.constrainHeight(200.0);
-    layoutDone();
-  }
-
   bool handlePointer(PointerEvent event, { double x: 0.0, double y: 0.0 }) {
     if (event.type == 'pointerdown') {
       setBoxDecoration(new BoxDecoration(backgroundColor: 0xFFFF0000));
@@ -38,6 +28,37 @@ class RenderSolidColor extends RenderDecoratedBox {
   }
 }
 
+class RenderSolidColorBlock extends RenderSolidColor {

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

Don't need two classes here, just have the one class then put the flex info into
the parent data on the outside.

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

Acknowledged.

+  final double desiredHeight;
+
+  RenderSolidColorBlock(int backgroundColor, { double desiredHeight : 100.0 })
+      : super(backgroundColor), desiredHeight = desiredHeight;
+
+  BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
+    return new BoxDimensions.withConstraints(constraints, height: requestedHeight);
+  }
+
+  void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
+    width = constraints.constrainWidth(constraints.maxWidth);
+    height = constraints.constrainHeight(desiredHeight);
+    layoutDone();
+  }
+}
+
+class RenderSolidColorFlex extends RenderSolidColor {
+  RenderSolidColorFlex(int backgroundColor, flex)
+      : super(backgroundColor) {
+    parentData = new FlexBoxParentData();

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

children should never create their parent's parentdata.

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

Acknowledged.

+    parentData.flex = flex;
+  }
+
+  void layout(BoxConstraints constraints, { RenderNode relayoutSubtreeRoot }) {
+    width = constraints.constrainWidth(constraints.maxWidth);
+    height = constraints.constrainHeight(constraints.maxHeight);
+    layoutDone();
+  }
+}
+
 RenderView renderView;
 
 void beginFrame(double timeStamp) {
@@ -56,12 +77,20 @@ void main() {
   view.setEventCallback(handleEvent);
   view.setBeginFrameCallback(beginFrame);
 
-  var root = new RenderBlock(
-      decoration: new BoxDecoration(backgroundColor: 0xFF00FFFF),
+  var root = new RenderFlex(
+      direction: FlexDirection.Column,
+      decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF));
+
+  var block = new RenderBlock(
+      decoration: new BoxDecoration(backgroundColor: 0x77000000),
       padding: const EdgeDims(10.0, 10.0, 10.0, 10.0));
+  block.add(new RenderSolidColorBlock(0xFF00FF00));
+  block.add(new RenderSolidColorBlock(0x3300FFFF));
 
-  root.add(new RenderSolidColor(0xFF00FF00));
-  root.add(new RenderSolidColor(0xFF0000FF));
+  root.add(new RenderSolidColorFlex(0xFFFFFF00, 1));

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

Have a helper function here which creates the node, adds it to root, then sets
child.parentData.flex.

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

Acknowledged.

+  root.add(block);
+  root.add(new RenderSolidColorFlex(0xFF0000FF, 1));
+  root.add(new RenderSolidColorFlex(0x77FF00FF, 2));
 
   renderView = new RenderView(root: root);
   renderView.layout(newWidth: view.width, newHeight: view.height);