Make RenderParagraph mutable, and make it fit the new RenderNode protocols

R=abarth@chromium.org, eseidel@chromium.org

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

examples/raw/render_paragraph.dart

@@ -7,22 +7,19 @@ import 'package:sky/framework/app.dart';
 import 'package:sky/framework/layout2.dart';
 
 class RenderSolidColor extends RenderDecoratedBox {
-  final double desiredHeight;
-  final double desiredWidth;
+  final Size desiredSize;
   final int backgroundColor;
 
-  RenderSolidColor(int backgroundColor, { this.desiredHeight: double.INFINITY,
-                                          this.desiredWidth: double.INFINITY })
+  RenderSolidColor(int backgroundColor, { this.desiredSize: const Size.infinite() })
       : backgroundColor = backgroundColor,
-        super(new BoxDecoration(backgroundColor: backgroundColor));
+        super(decoration: new BoxDecoration(backgroundColor: backgroundColor));
 
   Size getIntrinsicDimensions(BoxConstraints constraints) {
     return constraints.constrain(new Size(desiredWidth, desiredHeight));
   }
 
   void performLayout() {
-    width = constraints.constrainWidth(desiredWidth);
-    height = constraints.constrainHeight(desiredHeight);
+    size = constraints.constrain(desiredSize);
   }
 
   void handlePointer(PointerEvent event) {
@@ -36,12 +33,15 @@ class RenderSolidColor extends RenderDecoratedBox {
 AppView app;
 
 void main() {
-  var root = new RenderFlex(
-      direction: FlexDirection.Vertical,
-      decoration: new BoxDecoration(backgroundColor: 0xFF000000));
+  RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
+
+  RenderNode root = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: 0xFF606060),
+    child: flexRoot
+  );
 
   RenderNode child = new RenderSolidColor(0xFFFFFF00);
-  root.add(child);
+  flexRoot.add(child);
   child.parentData.flex = 2;
 
   // The internet is a beautiful place.  https://baconipsum.com/
@@ -51,8 +51,11 @@ andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola
 alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl.
 Pancetta meatball tongue tenderloin rump tail jowl boudin.""";
 
-  child = new RenderParagraph(meatyString);
-  root.add(child);
+  child = new RenderDecoratedBox(
+    decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
+    child: new RenderParagraph(text: meatyString, color: 0xFF009900)
+  );
+  flexRoot.add(child);
   child.parentData.flex = 1;
 
   app = new AppView(root);

examples/raw/sector-layout.dart

@@ -416,7 +416,9 @@ class RenderBoxToRenderSectorAdapter extends RenderBox {
     } else {
       assert(child is RenderSector);
       assert(!constraints.isInfinite);
+      print("constraint maxes: ${constraints.maxWidth} and ${constraints.maxHeight}");
       double maxChildDeltaRadius = math.min(constraints.maxWidth, constraints.maxHeight) / 2.0 - innerRadius;
+      print("maxChildDeltaRadius = $maxChildDeltaRadius");
       assert(child.parentData is SectorParentData);
       child.parentData.radius = innerRadius;
       child.parentData.theta = 0.0;

examples/raw/simple_render_tree.dart

@@ -0,0 +1,87 @@
+// 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);
+
+}

sdk/lib/framework/components2/tool_bar.dart

@@ -39,7 +39,6 @@ class ToolBar extends Component {
 
     return new Material(
       content: new FlexContainer(
-        style: _style,
         children: children,
         direction: FlexDirection.Row),
       level: 2);

sdk/lib/framework/layout2.dart

@@ -502,28 +502,40 @@ abstract class RenderProxyBox extends RenderBox with RenderNodeWithChildMixin<Re
   }
 
   sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
-    return child.getIntrinsicDimensions(constraints);
+    if (child != null)
+      return child.getIntrinsicDimensions(constraints);
+    return super.getIntrinsicDimensions(constraints);
   }
 
   void performLayout() {
-    child.layout(constraints, parentUsesSize: true);
-    size = child.size;
+    if (child != null) {
+      child.layout(constraints, parentUsesSize: true);
+      size = child.size;
+    } else {
+      performResize();
+    }
   }
 
   void hitTestChildren(HitTestResult result, { sky.Point position }) {
-    child.hitTest(result, position: position);
+    if (child != null)
+      child.hitTest(result, position: position);
+    else
+      super.hitTestChildren(result, position: position);
   }
 
   void paint(RenderNodeDisplayList canvas) {
-    child.paint(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);
+  RenderSizedBox({
+    RenderBox child, 
+    this.desiredSize: const sky.Size.infinite()
+  }) : super(child);
 
   sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
     return constraints.constrain(desiredSize);
@@ -603,9 +615,12 @@ class BoxDecoration {
   final int backgroundColor;
 }
 
-class RenderDecoratedBox extends RenderBox {
+class RenderDecoratedBox extends RenderProxyBox {
 
-  RenderDecoratedBox(BoxDecoration decoration) : _decoration = decoration;
+  RenderDecoratedBox({
+    BoxDecoration decoration,
+    RenderBox child
+  }) : _decoration = decoration, super(child);
 
   BoxDecoration _decoration;
   BoxDecoration get decoration => _decoration;
@@ -616,10 +631,6 @@ class RenderDecoratedBox extends RenderBox {
     markNeedsPaint();
   }
 
-  void performLayout() {
-    size = constraints.constrain(new sky.Size.infinite());
-  }
-
   void paint(RenderNodeDisplayList canvas) {
     assert(size.width != null);
     assert(size.height != null);
@@ -631,29 +642,9 @@ class RenderDecoratedBox extends RenderBox {
       sky.Paint paint = new sky.Paint()..color = _decoration.backgroundColor;
       canvas.drawRect(new sky.Rect.fromLTRB(0.0, 0.0, size.width, size.height), paint);
     }
-  }
-}
-
-class RenderDecoratedCircle extends RenderDecoratedBox with RenderNodeWithChildMixin<RenderBox> {
-  RenderDecoratedCircle({
-    BoxDecoration decoration,
-    RenderBox child
-  }) : super(decoration) {
-    this.child = child;
+    super.paint(canvas);
   }
 
-  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.drawCircle(0.0, 0.0, (size.width + size.height) / 2, paint);
-    }
-  }
 }
 
 
@@ -769,16 +760,12 @@ abstract class RenderBoxContainerDefaultsMixin<ChildType extends RenderBox, Pare
 
 class BlockParentData extends BoxParentData with ContainerParentDataMixin<RenderBox> { }
 
-class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, BlockParentData>,
-                                                  RenderBoxContainerDefaultsMixin<RenderBox, BlockParentData> {
+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
 
-  RenderBlock({
-    BoxDecoration decoration
-  }) : super(decoration);
-
   void setParentData(RenderBox child) {
     if (child.parentData is! BlockParentData)
       child.parentData = new BlockParentData();
@@ -827,7 +814,6 @@ class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin<Rende
   }
 
   void paint(RenderNodeDisplayList canvas) {
-    super.paint(canvas);
     defaultPaint(canvas);
   }
 
@@ -846,14 +832,13 @@ class FlexBoxParentData extends BoxParentData with ContainerParentDataMixin<Rend
 
 enum FlexDirection { Horizontal, Vertical }
 
-class RenderFlex extends RenderDecoratedBox with ContainerRenderNodeMixin<RenderBox, FlexBoxParentData>,
-                                                 RenderBoxContainerDefaultsMixin<RenderBox, BlockParentData> {
+class RenderFlex extends RenderBox 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;
+  }) : _direction = direction;
 
   FlexDirection _direction;
   FlexDirection get direction => _direction;
@@ -945,7 +930,6 @@ class RenderFlex extends RenderDecoratedBox with ContainerRenderNodeMixin<Render
   }
 
   void paint(RenderNodeDisplayList canvas) {
-    super.paint(canvas);
     defaultPaint(canvas);
   }
 }
@@ -956,16 +940,38 @@ class RenderInline extends RenderNode {
   RenderInline(this.data);
 }
 
-class RenderParagraph extends RenderDecoratedBox {
-  String text;
-  sky.LayoutRoot _layoutRoot = new sky.LayoutRoot();
-  sky.Document _document;
+class RenderParagraph extends RenderBox {
 
-  RenderParagraph(String this.text) :
-   super(new BoxDecoration(backgroundColor: 0xFFFFFFFF)) {
-    _document = new sky.Document();
+  RenderParagraph({
+    String text,
+    int color
+  }) : _color = color {
     _layoutRoot.rootElement = _document.createElement('p');
-    _layoutRoot.rootElement.appendChild(_document.createText(this.text));
+    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() {
@@ -974,17 +980,14 @@ class RenderParagraph extends RenderDecoratedBox {
     _layoutRoot.minHeight = constraints.minHeight;
     _layoutRoot.maxHeight = constraints.maxHeight;
     _layoutRoot.layout();
-    width = _layoutRoot.rootElement.width;
-    // TODO(eseidel): LayoutRoot will not expand to fill height. :(
-    height = _constraints.constrainHeight(_layoutRoot.rootElement.height);
-  }
-
-  void hitTestChildren(HitTestResult result, { double x, double y }) {
-    // defaultHitTestChildren(result, x: x, y: y);
+    size = constraints.constrain(new sky.Size(_layoutRoot.rootElement.width, _layoutRoot.rootElement.height));
   }
 
   void paint(RenderNodeDisplayList canvas) {
-    super.paint(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

@@ -12,7 +12,10 @@ void main() {
 
   test("should size to render view", () {
     RenderSizedBox root = new RenderSizedBox(
-        new RenderDecoratedBox(new BoxDecoration(backgroundColor: 0xFF00FF00)));
+      child: new RenderDecoratedBox(
+        decoration: new BoxDecoration(backgroundColor: 0xFF00FF00)
+      )
+    );
     RenderView renderView = new RenderView(child: root);
     renderView.layout(new ViewConstraints(width: sky.view.width, height: sky.view.height));
     expect(root.size.width, equals(sky.view.width));

tests/raw/render_flex.dart

@@ -14,7 +14,7 @@ class RenderSolidColor extends RenderDecoratedBox {
 
   RenderSolidColor(int backgroundColor, { this.desiredSize: const sky.Size.infinite() })
       : backgroundColor = backgroundColor,
-        super(new BoxDecoration(backgroundColor: backgroundColor)) {
+        super(decoration: new BoxDecoration(backgroundColor: backgroundColor)) {
   }
 
   sky.Size getIntrinsicDimensions(BoxConstraints constraints) {
@@ -39,45 +39,57 @@ void main() {
   initUnit();
 
   test("should flex", () {
-    var root = new RenderFlex(
-        direction: FlexDirection.Vertical,
-        decoration: new BoxDecoration(backgroundColor: 0xFF000000));
+    RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
 
-    void addFlexChild(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
+    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
-    addFlexChild(root, 0xFFFFFF00, flex: 1);
+    addFlexChildSolidColor(flexRoot, 0xFFFFFF00, flex: 1);
 
     // Turquoise box
-    root.add(new RenderSolidColor(0x7700FFFF, desiredSize: new sky.Size(100.0, 100.0)));
+    flexRoot.add(new RenderSolidColor(0x7700FFFF, desiredSize: new sky.Size(100.0, 100.0)));
 
     // Green and cyan render block with padding
-    var renderBlock = new RenderBlock(decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF));
+    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)));
 
-    root.add(new RenderPadding(const EdgeDims(10.0, 10.0, 10.0, 10.0), renderBlock));
+    var renderDecoratedBlock = new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
+      child: renderBlock
+    );
 
-    var row = new RenderFlex(
-      direction: FlexDirection.Horizontal,
-      decoration: new BoxDecoration(backgroundColor: 0xFF333333));
+    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
-    addFlexChild(row, 0x77FF00FF, flex: 1);
-    addFlexChild(row, 0xFF0000FF, flex: 2);
+    addFlexChildSolidColor(row, 0x77FF00FF, flex: 1);
+    addFlexChildSolidColor(row, 0xFF0000FF, flex: 2);
 
-    root.add(row);
-    row.parentData.flex = 3;
+    var decoratedRow = new RenderDecoratedBox(
+      decoration: new BoxDecoration(backgroundColor: 0xFF333333),
+      child: row
+    );
+
+    flexRoot.add(decoratedRow);
+    decoratedRow.parentData.flex = 3;
 
     app = new AppView(root);
 
     expect(root.size.width, equals(sky.view.width));
     expect(root.size.height, equals(sky.view.height));
     expect(renderBlock.size.width, equals(sky.view.width - 20.0));
+
   });
 }