Split layout2.dart into several files

Previously layout2.dart was a thousand lines long.

R=ianh@google.com

Review URL: https://codereview.chromium.org/1161003002

examples/raw/render_paragraph.dart

@@ -4,7 +4,10 @@
 
 import 'dart:sky';
 import 'package:sky/framework/app.dart';
-import 'package:sky/framework/layout2.dart';
+import 'package:sky/framework/rendering/render_box.dart';
+import 'package:sky/framework/rendering/render_node.dart';
+import 'package:sky/framework/rendering/render_flex.dart';
+import 'package:sky/framework/rendering/render_paragraph.dart';
 
 class RenderSolidColor extends RenderDecoratedBox {
   final Size desiredSize;
@@ -15,7 +18,7 @@ class RenderSolidColor extends RenderDecoratedBox {
         super(decoration: new BoxDecoration(backgroundColor: backgroundColor));
 
   Size getIntrinsicDimensions(BoxConstraints constraints) {
-    return constraints.constrain(new Size(desiredWidth, desiredHeight));
+    return constraints.constrain(desiredSize);
   }
 
   void performLayout() {

examples/raw/sector-layout.dart → examples/raw/sector_layout.dart

@@ -5,7 +5,8 @@
 import 'dart:math' as math;
 import 'dart:sky' as sky;
 import 'package:sky/framework/app.dart';
-import 'package:sky/framework/layout2.dart';
+import 'package:sky/framework/rendering/render_box.dart';
+import 'package:sky/framework/rendering/render_node.dart';
 
 const double kTwoPi = 2 * math.PI;
 

examples/raw/simple_render_tree.dart

-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'dart:sky' as sky;
-import 'package:sky/framework/app.dart';
-import 'package:sky/framework/layout2.dart';
-
-class RenderSolidColor extends RenderDecoratedBox {
-  final sky.Size desiredSize;
-  final int backgroundColor;
-
-  RenderSolidColor(int backgroundColor, { this.desiredSize: const sky.Size.infinite() })
-      : backgroundColor = backgroundColor,
-        super(decoration: new BoxDecoration(backgroundColor: backgroundColor)) {
-  }
-
-  BoxDimensions getIntrinsicDimensions(BoxConstraints constraints) {
-    return new BoxDimensions.withConstraints(constraints,
-                                             width: desiredSize.width,
-                                             height: desiredSize.height);
-  }
-
-  void performLayout() {
-    size = constraints.constrain(desiredSize);
-  }
-
-  void handlePointer(sky.PointerEvent event) {
-    if (event.type == 'pointerdown')
-      decoration = new BoxDecoration(backgroundColor: 0xFFFF0000);
-    else if (event.type == 'pointerup')
-      decoration = new BoxDecoration(backgroundColor: backgroundColor);
-  }
-}
-
-AppView app;
-
-void main() {
-  RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
-
-  RenderNode root = new RenderDecoratedBox(
-    decoration: new BoxDecoration(backgroundColor: 0xFF000000),
-    child: flexRoot
-  );
-
-  void addFlexChildSolidColor(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
-    RenderNode child = new RenderSolidColor(backgroundColor);
-    parent.add(child);
-    child.parentData.flex = flex;
-  }
-
-  // Yellow bar at top
-  addFlexChildSolidColor(flexRoot, 0xFFFFFF00, flex: 1);
-
-  // Turquoise box
-  flexRoot.add(new RenderSolidColor(0x7700FFFF, desiredSize: new sky.Size(100.0, 100.0)));
-
-  // Green and cyan render block with padding
-  var renderBlock = new RenderBlock();
-
-  renderBlock.add(new RenderSolidColor(0xFF00FF00, desiredSize: new sky.Size(100.0, 50.0)));
-  renderBlock.add(new RenderSolidColor(0x7700FFFF, desiredSize: new sky.Size(50.0, 100.0)));
-
-  var renderDecoratedBlock = new RenderDecoratedBox(
-    decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
-    child: renderBlock
-  );
-
-  flexRoot.add(new RenderPadding(const EdgeDims(10.0, 10.0, 10.0, 10.0), renderDecoratedBlock));
-
-  var row = new RenderFlex(direction: FlexDirection.Horizontal);
-
-  // Purple and blue cells
-  addFlexChildSolidColor(row, 0x77FF00FF, flex: 1);
-  addFlexChildSolidColor(row, 0xFF0000FF, flex: 2);
-
-  var decoratedRow = new RenderDecoratedBox(
-    decoration: new BoxDecoration(backgroundColor: 0xFF333333),
-    child: row
-  );
-
-  flexRoot.add(decoratedRow);
-  decoratedRow.parentData.flex = 3;
-
-  app = new AppView(root);
-
-}

examples/raw/touch_demo.dart

@@ -5,7 +5,8 @@
 import 'dart:math';
 import 'dart:sky';
 import 'package:sky/framework/app.dart';
-import 'package:sky/framework/layout2.dart';
+import 'package:sky/framework/rendering/render_box.dart';
+import 'package:sky/framework/rendering/render_node.dart';
 
 // Material design colors. :p
 List<int> colors = [

examples/stocks2/lib/stock_app.dart

@@ -23,7 +23,6 @@ import 'stock_data.dart';
 // import 'stock_menu.dart';
 
 import 'dart:async';
-import 'package:sky/framework/layout2.dart';
 
 enum StockMode { Optimistic, Pessimistic }
 

examples/stocks2/lib/stock_arrow.dart

@@ -4,7 +4,6 @@
 
 import 'dart:math';
 import 'package:sky/framework/fn2.dart';
-import 'package:sky/framework/layout2.dart';
 
 class StockArrow extends Component {
   static final Style _style = new Style('''

examples/stocks2/lib/stock_menu.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import 'package:sky/framework/fn2.dart';
-import 'package:sky/framework/layout2.dart';
 import 'package:sky/framework/components2/popup_menu.dart';
 import 'package:sky/framework/components2/checkbox.dart';
 import 'package:sky/framework/theme/view_configuration.dart';

examples/stocks2/lib/stock_row.dart

@@ -4,7 +4,6 @@
 
 import 'package:sky/framework/components2/ink_well.dart';
 import 'package:sky/framework/fn2.dart';
-import 'package:sky/framework/layout2.dart';
 import 'package:sky/framework/theme/typography.dart' as typography;
 import 'stock_arrow.dart';
 import 'stock_data.dart';

sdk/BUILD.gn

@@ -92,10 +92,14 @@ dart_pkg("sdk") {
     "lib/framework/fn.dart",
     "lib/framework/fn2.dart",
     "lib/framework/layout.dart",
-    "lib/framework/layout2.dart",
     "lib/framework/net/fetch.dart",
     "lib/framework/node.dart",
     "lib/framework/reflect.dart",
+    "lib/framework/rendering/render_block.dart",
+    "lib/framework/rendering/render_box.dart",
+    "lib/framework/rendering/render_flex.dart",
+    "lib/framework/rendering/render_node.dart",
+    "lib/framework/rendering/render_paragraph.dart",
     "lib/framework/shell.dart",
     "lib/framework/theme/colors.dart",
     "lib/framework/theme/shadows.dart",

sdk/lib/framework/app.dart

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'layout2.dart';
 import 'dart:sky' as sky;
+import 'rendering/render_box.dart';
+import 'rendering/render_node.dart';
 
 class AppView {
 

sdk/lib/framework/components2/checkbox.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../layout2.dart';
 import 'button_base.dart';
 import 'dart:sky' as sky;
 

sdk/lib/framework/components2/drawer_header.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../layout2.dart';
 import '../theme/colors.dart';
 import '../theme/view_configuration.dart';
 

sdk/lib/framework/components2/ink_splash.dart

@@ -8,7 +8,6 @@ import '../fn2.dart';
 import '../theme/view_configuration.dart' as config;
 import 'dart:async';
 import 'dart:math' as math;
-import '../layout2.dart';
 
 const double _kSplashConfirmedDuration = 350.0;
 const double _kSplashUnconfirmedDuration = config.kDefaultLongPressTimeout;

sdk/lib/framework/components2/ink_well.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../layout2.dart';
 import 'dart:collection';
 import 'dart:sky' as sky;
 import 'ink_splash.dart';

sdk/lib/framework/components2/input.dart

@@ -6,7 +6,6 @@ import '../editing/editable_string.dart';
 import '../editing/editable_text.dart';
 import '../editing/keyboard.dart';
 import '../fn2.dart';
-import '../layout2.dart';
 import '../theme/colors.dart';
 import '../theme/typography.dart' as typography;
 import 'dart:sky' as sky;

sdk/lib/framework/components2/menu_item.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../layout2.dart';
 import 'button_base.dart';
 import 'icon.dart';
 import 'ink_well.dart';

sdk/lib/framework/components2/scaffold.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../layout2.dart';
 import '../theme/typography.dart' as typography;
 import 'dart:sky' as sky;
 

sdk/lib/framework/components2/tool_bar.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../fn2.dart';
-import '../layout2.dart';
 import '../theme/view_configuration.dart';
 import 'material.dart';
 

sdk/lib/framework/fn2.dart

@@ -9,8 +9,12 @@ import 'dart:collection';
 import 'dart:mirrors';
 import 'dart:sky' as sky;
 import 'reflect.dart' as reflect;
-import 'layout2.dart';
 import 'app.dart';
+import 'rendering/render_block.dart';
+import 'rendering/render_box.dart';
+import 'rendering/render_flex.dart';
+import 'rendering/render_node.dart';
+import 'rendering/render_paragraph.dart';
 
 // final sky.Tracing _tracing = sky.window.tracing;
 

sdk/lib/framework/rendering/render_block.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:sky' as sky;
+import 'render_box.dart';
+import 'render_node.dart';
+
+class BlockParentData extends BoxParentData with ContainerParentDataMixin<RenderBox> { }
+
+class RenderBlock extends RenderBox 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
+
+  void setParentData(RenderBox child) {
+    if (child.parentData is! BlockParentData)
+      child.parentData = new BlockParentData();
+  }
+
+  // override this to report what dimensions you would have if you
+  // 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)
+  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
+    double height = 0.0;
+    double width = constraints.constrainWidth(constraints.maxWidth);
+    assert(width < double.INFINITY);
+    RenderBox child = firstChild;
+    BoxConstraints innerConstraints = new BoxConstraints(minWidth: width,
+                                                         maxWidth: width);
+    while (child != null) {
+      height += child.getIntrinsicDimensions(innerConstraints).height;
+      assert(child.parentData is BlockParentData);
+      child = child.parentData.nextSibling;
+    }
+
+    return new sky.Size(width, constraints.constrainHeight(height));
+  }
+
+  void performLayout() {
+    assert(constraints is BoxConstraints);
+    double width = constraints.constrainWidth(constraints.maxWidth);
+    double y = 0.0;
+    RenderBox child = firstChild;
+    while (child != null) {
+      child.layout(new BoxConstraints(minWidth: width, maxWidth: width), parentUsesSize: true);
+      assert(child.parentData is BlockParentData);
+      child.parentData.position = new sky.Point(0.0, y);
+      y += child.size.height;
+      child = child.parentData.nextSibling;
+    }
+    size = new sky.Size(width, constraints.constrainHeight(y));
+    assert(size.width < double.INFINITY);
+    assert(size.height < double.INFINITY);
+  }
+
+  void hitTestChildren(HitTestResult result, { sky.Point position }) {
+    defaultHitTestChildren(result, position: position);
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    defaultPaint(canvas);
+  }
+
+}
+

sdk/lib/framework/rendering/render_box.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'render_node.dart';
+import 'dart:sky' as sky;
+
+// GENERIC BOX RENDERING
+// Anything that has a concept of x, y, width, height is going to derive from this
+
+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 BoxConstraints {
+  const BoxConstraints({
+    this.minWidth: 0.0,
+    this.maxWidth: double.INFINITY,
+    this.minHeight: 0.0,
+    this.maxHeight: double.INFINITY});
+
+  BoxConstraints.tight(sky.Size size)
+    : minWidth = size.width,
+      maxWidth = size.width,
+      minHeight = size.height,
+      maxHeight = size.height;
+
+  BoxConstraints deflate(EdgeDims edges) {
+    assert(edges != null);
+    return new BoxConstraints(
+      minWidth: minWidth,
+      maxWidth: maxWidth - (edges.left + edges.right),
+      minHeight: minHeight,
+      maxHeight: maxHeight - (edges.top + edges.bottom)
+    );
+  }
+
+  final double minWidth;
+  final double maxWidth;
+  final double minHeight;
+  final double maxHeight;
+
+  double constrainWidth(double width) {
+    return clamp(min: minWidth, max: maxWidth, value: width);
+  }
+
+  double constrainHeight(double height) {
+    return clamp(min: minHeight, max: maxHeight, value: height);
+  }
+
+  sky.Size constrain(sky.Size size) {
+    return new sky.Size(constrainWidth(size.width), constrainHeight(size.height));
+  }
+
+  bool get isInfinite => maxWidth >= double.INFINITY || maxHeight >= double.INFINITY;
+}
+
+class BoxParentData extends ParentData {
+  sky.Point position = new sky.Point(0.0, 0.0);
+}
+
+abstract class RenderBox extends RenderNode {
+
+  void setParentData(RenderNode child) {
+    if (child.parentData is! BoxParentData)
+      child.parentData = new BoxParentData();
+  }
+
+  // override this to report what dimensions you would have if you
+  // 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)
+  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
+    return constraints.constrain(new sky.Size(0.0, 0.0));
+  }
+
+  BoxConstraints get constraints => super.constraints as BoxConstraints;
+  void performResize() {
+    // default behaviour for subclasses that have sizedByParent = true
+    size = constraints.constrain(new sky.Size(0.0, 0.0));
+    assert(size.height < double.INFINITY);
+    assert(size.width < double.INFINITY);
+  }
+  void performLayout() {
+    // descendants have to either override performLayout() to set both
+    // width and height and lay out children, or, set sizedByParent to
+    // true so that performResize()'s logic above does its thing.
+    assert(sizedByParent);
+  }
+
+  bool hitTest(HitTestResult result, { sky.Point position }) {
+    hitTestChildren(result, position: position);
+    result.add(this);
+    return true;
+  }
+  void hitTestChildren(HitTestResult result, { sky.Point position }) { }
+
+  sky.Size size = new sky.Size(0.0, 0.0);
+}
+
+abstract class RenderProxyBox extends RenderBox with RenderNodeWithChildMixin<RenderBox> {
+  RenderProxyBox(RenderBox child) {
+    this.child = child;
+  }
+
+  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
+    if (child != null)
+      return child.getIntrinsicDimensions(constraints);
+    return super.getIntrinsicDimensions(constraints);
+  }
+
+  void performLayout() {
+    if (child != null) {
+      child.layout(constraints, parentUsesSize: true);
+      size = child.size;
+    } else {
+      performResize();
+    }
+  }
+
+  void hitTestChildren(HitTestResult result, { sky.Point position }) {
+    if (child != null)
+      child.hitTest(result, position: position);
+    else
+      super.hitTestChildren(result, position: position);
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    if (child != null)
+      child.paint(canvas);
+  }
+}
+
+class RenderSizedBox extends RenderProxyBox {
+  final sky.Size desiredSize;
+
+  RenderSizedBox({
+    RenderBox child, 
+    this.desiredSize: const sky.Size.infinite()
+  }) : super(child);
+
+  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
+    return constraints.constrain(desiredSize);
+  }
+
+  void performLayout() {
+    size = constraints.constrain(desiredSize);
+    child.layout(new BoxConstraints.tight(size));
+  }
+}
+
+class RenderPadding extends RenderBox with RenderNodeWithChildMixin<RenderBox> {
+
+  RenderPadding(EdgeDims padding, RenderBox child) {
+    assert(padding != null);
+    this.padding = padding;
+    this.child = child;
+  }
+
+  EdgeDims _padding;
+  EdgeDims get padding => _padding;
+  void set padding (EdgeDims value) {
+    assert(value != null);
+    if (_padding != value) {
+      _padding = value;
+      markNeedsLayout();
+    }
+  }
+
+  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
+    assert(padding != null);
+    constraints = constraints.deflate(padding);
+    if (child == null)
+      return super.getIntrinsicDimensions(constraints);
+    return child.getIntrinsicDimensions(constraints);
+  }
+
+  void performLayout() {
+    assert(padding != null);
+    BoxConstraints innerConstraints = constraints.deflate(padding);
+    if (child == null) {
+      size = innerConstraints.constrain(
+          new sky.Size(padding.left + padding.right, padding.top + padding.bottom));
+      return;
+    }
+    child.layout(innerConstraints, parentUsesSize: true);
+    assert(child.parentData is BoxParentData);
+    child.parentData.position = new sky.Point(padding.left, padding.top);
+    size = constraints.constrain(new sky.Size(padding.left + child.size.width + padding.right,
+                                              padding.top + child.size.height + padding.bottom));
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    if (child != null)
+      canvas.paintChild(child, child.parentData.position);
+  }
+
+  void hitTestChildren(HitTestResult result, { sky.Point position }) {
+    if (child != null) {
+      assert(child.parentData is BoxParentData);
+      sky.Rect childBounds = new sky.Rect.fromPointAndSize(child.parentData.position, child.size);
+      if (childBounds.contains(position)) {
+        child.hitTest(result, position: new sky.Point(position.x - child.parentData.position.x,
+                                                      position.y - child.parentData.position.y));
+      }
+    }
+  }
+
+}
+
+// This must be immutable, because we won't notice when it changes
+class BoxDecoration {
+  const BoxDecoration({
+    this.backgroundColor
+  });
+
+  final int backgroundColor;
+}
+
+class RenderDecoratedBox extends RenderProxyBox {
+
+  RenderDecoratedBox({
+    BoxDecoration decoration,
+    RenderBox child
+  }) : _decoration = decoration, super(child);
+
+  BoxDecoration _decoration;
+  BoxDecoration get decoration => _decoration;
+  void set decoration (BoxDecoration value) {
+    if (value == _decoration)
+      return;
+    _decoration = value;
+    markNeedsPaint();
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    assert(size.width != null);
+    assert(size.height != null);
+
+    if (_decoration == null)
+      return;
+
+    if (_decoration.backgroundColor != null) {
+      sky.Paint paint = new sky.Paint()..color = _decoration.backgroundColor;
+      canvas.drawRect(new sky.Rect.fromLTRB(0.0, 0.0, size.width, size.height), paint);
+    }
+    super.paint(canvas);
+  }
+
+}
+
+
+// RENDER VIEW LAYOUT MANAGER
+
+class ViewConstraints {
+
+  const ViewConstraints({
+    this.width: 0.0, this.height: 0.0, this.orientation: null
+  });
+
+  final double width;
+  final double height;
+  final int orientation;
+
+}
+
+class RenderView extends RenderNode with RenderNodeWithChildMixin<RenderBox> {
+
+  RenderView({
+    RenderBox child,
+    this.timeForRotation: const Duration(microseconds: 83333)
+  }) {
+    this.child = child;
+  }
+
+  sky.Size _size = new sky.Size(0.0, 0.0);
+  double get width => _size.width;
+  double get height => _size.height;
+
+  int _orientation; // 0..3
+  int get orientation => _orientation;
+  Duration timeForRotation;
+
+  ViewConstraints get constraints => super.constraints as ViewConstraints;
+  bool get sizedByParent => true;
+  void performResize() {
+    if (constraints.orientation != _orientation) {
+      if (_orientation != null && child != null)
+        child.rotate(oldAngle: _orientation, newAngle: constraints.orientation, time: timeForRotation);
+      _orientation = constraints.orientation;
+    }
+    _size = new sky.Size(constraints.width, constraints.height);
+    assert(_size.height < double.INFINITY);
+    assert(_size.width < double.INFINITY);
+  }
+  void performLayout() {
+    if (child != null) {
+      child.layout(new BoxConstraints.tight(_size));
+      assert(child.size.width == width);
+      assert(child.size.height == height);
+    }
+  }
+
+  void rotate({ int oldAngle, int newAngle, Duration time }) {
+    assert(false); // nobody tells the screen to rotate, the whole rotate() dance is started from our performResize()
+  }
+
+  bool hitTest(HitTestResult result, { sky.Point position }) {
+    if (child != null) {
+      sky.Rect childBounds = new sky.Rect.fromSize(child.size);
+      if (childBounds.contains(position))
+        child.hitTest(result, position: position);
+    }
+    result.add(this);
+    return true;
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    if (child != null)
+      canvas.paintChild(child, new sky.Point(0.0, 0.0));
+  }
+
+  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> {
+
+  void defaultHitTestChildren(HitTestResult result, { sky.Point position }) {
+    // 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 ParentDataType);
+      sky.Rect childBounds = new sky.Rect.fromPointAndSize(child.parentData.position, child.size);
+      if (childBounds.contains(position)) {
+        if (child.hitTest(result, position: new sky.Point(position.x - child.parentData.position.x,
+                                                          position.y - child.parentData.position.y)))
+          break;
+      }
+      child = child.parentData.previousSibling;
+    }
+  }
+
+  void defaultPaint(RenderNodeDisplayList canvas) {
+    RenderBox child = firstChild;
+    while (child != null) {
+      assert(child.parentData is ParentDataType);
+      canvas.paintChild(child, child.parentData.position);
+      child = child.parentData.nextSibling;
+    }
+  }
+}

sdk/lib/framework/rendering/render_flex.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:sky' as sky;
+import 'render_node.dart';
+import 'render_box.dart';
+import 'render_node.dart';
+
+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 { Horizontal, Vertical }
+
+class RenderFlex extends RenderBox with ContainerRenderNodeMixin<RenderBox, FlexBoxParentData>,
+                                        RenderBoxContainerDefaultsMixin<RenderBox, FlexBoxParentData> {
+  // lays out RenderBox children using flexible layout
+
+  RenderFlex({
+    FlexDirection direction: FlexDirection.Horizontal
+  }) : _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();
+  }
+
+  bool get sizedByParent => true;
+  void performResize() {
+    size = constraints.constrain(new sky.Size(constraints.maxWidth, constraints.maxHeight));
+    assert(size.height < double.INFINITY);
+    assert(size.width < double.INFINITY);
+  }
+
+  int _getFlex(RenderBox child) {
+    assert(child.parentData is FlexBoxParentData);
+    return child.parentData.flex != null ? child.parentData.flex : 0;
+  }
+
+  void performLayout() {
+    // 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 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) {
+        totalFlex += child.parentData.flex;
+      } else {
+        BoxConstraints innerConstraints = new BoxConstraints(maxHeight: constraints.maxHeight,
+                                                             maxWidth: constraints.maxWidth);
+        child.layout(innerConstraints, parentUsesSize: true);
+        freeSpace -= (_direction == FlexDirection.Horizontal) ? child.size.width : child.size.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 innerConstraints;
+        switch (_direction) {
+          case FlexDirection.Horizontal:
+            innerConstraints = new BoxConstraints(maxHeight: constraints.maxHeight,
+                                                  minWidth: spaceForChild,
+                                                  maxWidth: spaceForChild);
+            break;
+          case FlexDirection.Vertical:
+            innerConstraints = new BoxConstraints(minHeight: spaceForChild,
+                                                  maxHeight: spaceForChild,
+                                                  maxWidth: constraints.maxWidth);
+            break;
+        }
+        child.layout(innerConstraints, parentUsesSize: true);
+      }
+
+      // For now, center the flex items in the cross direction
+      switch (_direction) {
+        case FlexDirection.Horizontal:
+          child.parentData.position = new sky.Point(usedSpace, size.height / 2.0 - child.size.height / 2.0);
+          usedSpace += child.size.width;
+          break;
+        case FlexDirection.Vertical:
+          child.parentData.position = new sky.Point(size.width / 2.0 - child.size.width / 2.0, usedSpace);
+          usedSpace += child.size.height;
+          break;
+      }
+      child = child.parentData.nextSibling;
+    }
+  }
+
+  void hitTestChildren(HitTestResult result, { sky.Point position }) {
+    defaultHitTestChildren(result, position: position);
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    defaultPaint(canvas);
+  }
+}

sdk/lib/framework/rendering/render_paragraph.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:sky' as sky;
+import 'render_box.dart';
+import 'render_node.dart';
+
+class RenderInline extends RenderNode {
+  String data;
+
+  RenderInline(this.data);
+}
+
+class RenderParagraph extends RenderBox {
+
+  RenderParagraph({
+    String text,
+    int color
+  }) : _color = color {
+    _layoutRoot.rootElement = _document.createElement('p');
+    this.text = text;
+  }
+
+  final sky.Document _document = new sky.Document();
+  final sky.LayoutRoot _layoutRoot = new sky.LayoutRoot();
+
+  String get text => (_layoutRoot.rootElement.firstChild as sky.Text).data;
+  void set text (String value) {
+    _layoutRoot.rootElement.setChild(_document.createText(value));
+    markNeedsLayout();
+  }
+
+  int _color = 0xFF000000;
+  int get color => _color;
+  void set color (int value) {
+    if (_color != value) {
+      _color = value;
+      markNeedsPaint();
+    }
+  }
+
+  sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
+    assert(false);
+    return null;
+    // we don't currently support this for RenderParagraph
+  }
+
+  void performLayout() {
+    _layoutRoot.maxWidth = constraints.maxWidth;
+    _layoutRoot.minWidth = constraints.minWidth;
+    _layoutRoot.minHeight = constraints.minHeight;
+    _layoutRoot.maxHeight = constraints.maxHeight;
+    _layoutRoot.layout();
+    size = constraints.constrain(new sky.Size(_layoutRoot.rootElement.width, _layoutRoot.rootElement.height));
+  }
+
+  void paint(RenderNodeDisplayList canvas) {
+    // _layoutRoot.rootElement.style['color'] = 'rgba(' + ...color... + ')';
+    _layoutRoot.paint(canvas);
+  }
+
+  // we should probably expose a way to do precise (inter-glpyh) hit testing
+}

tests/raw/render_box.dart

@@ -5,7 +5,7 @@
 import '../resources/third_party/unittest/unittest.dart';
 import '../resources/unit.dart';
 import 'dart:sky' as sky;
-import 'package:sky/framework/layout2.dart';
+import 'package:sky/framework/rendering/render_box.dart';
 
 void main() {
   initUnit();

tests/raw/render_flex.dart

@@ -6,7 +6,9 @@ import '../resources/third_party/unittest/unittest.dart';
 import '../resources/unit.dart';
 import 'dart:sky' as sky;
 import 'package:sky/framework/app.dart';
-import 'package:sky/framework/layout2.dart';
+import 'package:sky/framework/rendering/render_block.dart';
+import 'package:sky/framework/rendering/render_box.dart';
+import 'package:sky/framework/rendering/render_flex.dart';
 
 class RenderSolidColor extends RenderDecoratedBox {
   final sky.Size desiredSize;
@@ -41,13 +43,13 @@ void main() {
   test("should flex", () {
     RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
 
-    RenderNode root = new RenderDecoratedBox(
+    RenderDecoratedBox root = new RenderDecoratedBox(
       decoration: new BoxDecoration(backgroundColor: 0xFF000000),
       child: flexRoot
     );
 
     void addFlexChildSolidColor(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
-      RenderNode child = new RenderSolidColor(backgroundColor);
+      RenderSolidColor child = new RenderSolidColor(backgroundColor);
       parent.add(child);
       child.parentData.flex = flex;
     }