diff --git a/examples/raw/render_paragraph.dart b/examples/raw/render_paragraph.dart index f2e444d4a8043bf64d1171b8f1319161b23fe119..6c20d91db376eef202d892060571665f200904e6 100644 --- a/examples/raw/render_paragraph.dart +++ b/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); diff --git a/examples/raw/sector-layout.dart b/examples/raw/sector-layout.dart index ae8b43fdf698a6f8b35e812312abeac8f13f3ac4..c4c4627aba9248212b9e697946565b607e25a873 100644 --- a/examples/raw/sector-layout.dart +++ b/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; diff --git a/examples/raw/simple_render_tree.dart b/examples/raw/simple_render_tree.dart new file mode 100644 index 0000000000000000000000000000000000000000..58d4e934e2ec0c3e1126e82eb1da8dda96a32865 --- /dev/null +++ b/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); + +} diff --git a/sdk/lib/framework/components2/tool_bar.dart b/sdk/lib/framework/components2/tool_bar.dart index 283c85c1e45084113adb067bed86b8f2b68c4f68..cbcd795716051981a6c21384eb77c3568acb8733 100644 --- a/sdk/lib/framework/components2/tool_bar.dart +++ b/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); diff --git a/sdk/lib/framework/layout2.dart b/sdk/lib/framework/layout2.dart index daef6c14b759a3236d0c3d66383d9130f32eabfc..c644c317484495b9f278c117caf047c206a390dd 100644 --- a/sdk/lib/framework/layout2.dart +++ b/sdk/lib/framework/layout2.dart @@ -502,28 +502,40 @@ abstract class RenderProxyBox extends RenderBox with RenderNodeWithChildMixin _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); } + super.paint(canvas); } -} - -class RenderDecoratedCircle extends RenderDecoratedBox with RenderNodeWithChildMixin { - RenderDecoratedCircle({ - BoxDecoration decoration, - RenderBox child - }) : super(decoration) { - this.child = child; - } - - 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 { } -class RenderBlock extends RenderDecoratedBox with ContainerRenderNodeMixin, - RenderBoxContainerDefaultsMixin { +class RenderBlock extends RenderBox with ContainerRenderNodeMixin, + RenderBoxContainerDefaultsMixin { // 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, - RenderBoxContainerDefaultsMixin { +class RenderFlex extends RenderBox with ContainerRenderNodeMixin, + RenderBoxContainerDefaultsMixin { // 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 (_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 + } diff --git a/tests/raw/render_box.dart b/tests/raw/render_box.dart index 82a79783c9ed9873a83138897cc73cfe10b1129f..fafbbe50a38f5535628f332cd506e70ec6492c70 100644 --- a/tests/raw/render_box.dart +++ b/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)); diff --git a/tests/raw/render_flex.dart b/tests/raw/render_flex.dart index 3cb5090813c85f013e36780d4fffda59a649e857..97ea459c43d9223dc3207264874f43f8cccfc7b3 100644 --- a/tests/raw/render_flex.dart +++ b/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 + ); + + flexRoot.add(new RenderPadding(const EdgeDims(10.0, 10.0, 10.0, 10.0), renderDecoratedBlock)); - var row = new RenderFlex( - direction: FlexDirection.Horizontal, - decoration: new BoxDecoration(backgroundColor: 0xFF333333)); + 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)); + }); }