Commit c80f1c7c authored by Collin Jackson's avatar Collin Jackson

Merge pull request #95 from collinjackson/baseline

Fix #57 Flex needs to understand baselines
parents f3d913c5 695a1358
// 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';
import 'package:sky/painting/text_style.dart';
import 'package:sky/rendering/box.dart';
import 'package:sky/rendering/flex.dart';
import 'package:sky/rendering/object.dart';
import 'package:sky/rendering/paragraph.dart';
import 'package:sky/rendering/sky_binding.dart';
import 'solid_color_box.dart';
void main() {
var table = new RenderFlex(direction: FlexDirection.vertical);
for(FlexAlignItems alignItems in FlexAlignItems.values) {
TextStyle style = const TextStyle(color: const Color(0xFF000000));
RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${alignItems}")]));
table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
var row = new RenderFlex(alignItems: alignItems);
style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
row.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FFFCCCC)),
child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
));
style = new TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
row.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
));
var subrow = new RenderFlex(alignItems: alignItems);
style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
subrow.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),
child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo foo')]))
));
subrow.add(new RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: new Size(30.0, 40.0)));
row.add(subrow);
table.add(row);
row.parentData.flex = 1;
}
RenderDecoratedBox root = new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
);
new SkyBinding(root: root);
}
...@@ -26,10 +26,6 @@ class StockRow extends Component { ...@@ -26,10 +26,6 @@ class StockRow extends Component {
if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice; if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
List<Widget> children = [ List<Widget> children = [
new Container(
child: new StockArrow(percentChange: stock.percentChange),
margin: const EdgeDims.only(right: 5.0)
),
new Flexible( new Flexible(
child: new Text(stock.symbol), child: new Text(stock.symbol),
flex: 2 flex: 2
...@@ -58,7 +54,13 @@ class StockRow extends Component { ...@@ -58,7 +54,13 @@ class StockRow extends Component {
bottom: new BorderSide(color: Theme.of(this).dividerColor) bottom: new BorderSide(color: Theme.of(this).dividerColor)
) )
), ),
child: new Flex(children) child: new Flex([
new Container(
child: new StockArrow(percentChange: stock.percentChange),
margin: const EdgeDims.only(right: 5.0)
),
new Flex(children, alignItems: FlexAlignItems.baseline)
])
) )
); );
} }
......
...@@ -1662,7 +1662,7 @@ abstract class RenderBoxContainerDefaultsMixin<ChildType extends RenderBox, Pare ...@@ -1662,7 +1662,7 @@ abstract class RenderBoxContainerDefaultsMixin<ChildType extends RenderBox, Pare
assert(child.parentData is ParentDataType); assert(child.parentData is ParentDataType);
double candidate = child.getDistanceToActualBaseline(baseline); double candidate = child.getDistanceToActualBaseline(baseline);
if (candidate != null) { if (candidate != null) {
candidate += child.parentData.position.x; candidate += child.parentData.position.y;
if (result != null) if (result != null)
result = math.min(result, candidate); result = math.min(result, candidate);
else else
......
...@@ -34,6 +34,7 @@ enum FlexAlignItems { ...@@ -34,6 +34,7 @@ enum FlexAlignItems {
end, end,
center, center,
stretch, stretch,
baseline,
} }
typedef double _ChildSizingFunction(RenderBox child, BoxConstraints constraints); typedef double _ChildSizingFunction(RenderBox child, BoxConstraints constraints);
...@@ -315,6 +316,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl ...@@ -315,6 +316,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
// Steps 4-5. Distribute remaining space to flexible children. // Steps 4-5. Distribute remaining space to flexible children.
double spacePerFlex = totalFlex > 0 ? (freeSpace / totalFlex) : 0.0; double spacePerFlex = totalFlex > 0 ? (freeSpace / totalFlex) : 0.0;
double usedSpace = 0.0; double usedSpace = 0.0;
double maxBaselineDistance = 0.0;
child = firstChild; child = firstChild;
while (child != null) { while (child != null) {
int flex = _getFlex(child); int flex = _getFlex(child);
...@@ -337,6 +339,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl ...@@ -337,6 +339,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
usedSpace += _getMainSize(child); usedSpace += _getMainSize(child);
crossSize = math.max(crossSize, _getCrossSize(child)); crossSize = math.max(crossSize, _getCrossSize(child));
} }
if (alignItems == FlexAlignItems.baseline) {
// TODO(jackson): Support for non-alphabetic baselines
double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
if (distance != null)
maxBaselineDistance = math.max(maxBaselineDistance, distance);
}
assert(child.parentData is FlexBoxParentData); assert(child.parentData is FlexBoxParentData);
child = child.parentData.nextSibling; child = child.parentData.nextSibling;
} }
...@@ -345,7 +353,6 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl ...@@ -345,7 +353,6 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
double remainingSpace = math.max(0.0, freeSpace - usedSpace); double remainingSpace = math.max(0.0, freeSpace - usedSpace);
double leadingSpace; double leadingSpace;
double betweenSpace; double betweenSpace;
child = firstChild;
switch (_justifyContent) { switch (_justifyContent) {
case FlexJustifyContent.start: case FlexJustifyContent.start:
leadingSpace = 0.0; leadingSpace = 0.0;
...@@ -380,7 +387,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl ...@@ -380,7 +387,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
break; break;
} }
// Position elements. For now, center the flex items in the cross direction // Position elements
double childMainPosition = leadingSpace; double childMainPosition = leadingSpace;
child = firstChild; child = firstChild;
while (child != null) { while (child != null) {
...@@ -397,6 +404,16 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl ...@@ -397,6 +404,16 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
case FlexAlignItems.center: case FlexAlignItems.center:
childCrossPosition = crossSize / 2.0 - _getCrossSize(child) / 2.0; childCrossPosition = crossSize / 2.0 - _getCrossSize(child) / 2.0;
break; break;
case FlexAlignItems.baseline:
childCrossPosition = 0.0;
// TODO(jackson): Support for vertical baselines
if (_direction == FlexDirection.horizontal) {
// TODO(jackson): Support for non-alphabetic baselines
double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
if (distance != null)
childCrossPosition = maxBaselineDistance - distance;
}
break;
} }
switch (_direction) { switch (_direction) {
case FlexDirection.horizontal: case FlexDirection.horizontal:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment