From 04ecd8a888501461a0c50735728b4ad5acc8cf87 Mon Sep 17 00:00:00 2001 From: Collin Jackson Date: Fri, 17 Jul 2015 16:17:32 -0700 Subject: [PATCH] Support for non-alphabetic baselines --- sky/sdk/example/rendering/align_items.dart | 4 ++-- sky/sdk/example/stocks/lib/stock_row.dart | 7 ++++++- sky/sdk/lib/painting/text_style.dart | 15 ++++++++++++-- sky/sdk/lib/rendering/box.dart | 4 ++-- sky/sdk/lib/rendering/flex.dart | 24 +++++++++++++++------- sky/sdk/lib/theme/typography.dart | 23 +++++++++++---------- sky/sdk/lib/widgets/basic.dart | 5 ++++- 7 files changed, 56 insertions(+), 26 deletions(-) diff --git a/sky/sdk/example/rendering/align_items.dart b/sky/sdk/example/rendering/align_items.dart index a8c15484e3fe8..5a9c247fc8d60 100644 --- a/sky/sdk/example/rendering/align_items.dart +++ b/sky/sdk/example/rendering/align_items.dart @@ -20,7 +20,7 @@ void main() { 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); + var row = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic); style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000)); row.add(new RenderDecoratedBox( @@ -32,7 +32,7 @@ void main() { decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)), child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')])) )); - var subrow = new RenderFlex(alignItems: alignItems); + var subrow = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic); style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000)); subrow.add(new RenderDecoratedBox( decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)), diff --git a/sky/sdk/example/stocks/lib/stock_row.dart b/sky/sdk/example/stocks/lib/stock_row.dart index ab98f8a0ec570..8e9ba64200e77 100644 --- a/sky/sdk/example/stocks/lib/stock_row.dart +++ b/sky/sdk/example/stocks/lib/stock_row.dart @@ -6,6 +6,7 @@ import 'package:sky/painting/text_style.dart'; import 'package:sky/rendering/box.dart'; import 'package:sky/widgets/ink_well.dart'; import 'package:sky/widgets/basic.dart'; +import 'package:sky/widgets/default_text_style.dart'; import 'package:sky/widgets/theme.dart'; import 'stock_arrow.dart'; @@ -60,7 +61,11 @@ class StockRow extends Component { margin: const EdgeDims.only(right: 5.0) ), new Flexible( - child: new Flex(children, alignItems: FlexAlignItems.baseline) + child: new Flex( + children, + alignItems: FlexAlignItems.baseline, + textBaseline: DefaultTextStyle.of(this).textBaseline + ) ) ]) ) diff --git a/sky/sdk/lib/painting/text_style.dart b/sky/sdk/lib/painting/text_style.dart index 1ebc558fa7ca2..db5b0ecd9e4b1 100644 --- a/sky/sdk/lib/painting/text_style.dart +++ b/sky/sdk/lib/painting/text_style.dart @@ -10,6 +10,8 @@ const bold = FontWeight.w700; enum TextAlign { left, right, center } +enum TextBaseline { alphabetic, ideographic } + enum TextDecoration { none, underline, overline, lineThrough } const underline = const [TextDecoration.underline]; const overline = const [TextDecoration.overline]; @@ -24,6 +26,7 @@ class TextStyle { this.fontSize, this.fontWeight, this.textAlign, + this.textBaseline, this.height, this.decoration, this.decorationColor, @@ -35,6 +38,7 @@ class TextStyle { final double fontSize; // in pixels final FontWeight fontWeight; final TextAlign textAlign; + final TextBaseline textBaseline; final double height; // multiple of fontSize final List decoration; // TODO(ianh): Switch this to a Set<> once Dart supports constant Sets final Color decorationColor; @@ -46,6 +50,7 @@ class TextStyle { double fontSize, FontWeight fontWeight, TextAlign textAlign, + TextBaseline textBaseline, double height, List decoration, Color decorationColor, @@ -57,6 +62,7 @@ class TextStyle { fontSize: fontSize != null ? fontSize : this.fontSize, fontWeight: fontWeight != null ? fontWeight : this.fontWeight, textAlign: textAlign != null ? textAlign : this.textAlign, + textBaseline: textBaseline != null ? textBaseline : this.textBaseline, height: height != null ? height : this.height, decoration: decoration != null ? decoration : this.decoration, decorationColor: decorationColor != null ? decorationColor : this.decorationColor, @@ -71,6 +77,7 @@ class TextStyle { fontSize: other.fontSize, fontWeight: other.fontWeight, textAlign: other.textAlign, + textBaseline: other.textBaseline, height: other.height, decoration: other.decoration, decorationColor: other.decorationColor, @@ -157,10 +164,11 @@ class TextStyle { return true; return other is TextStyle && color == other.color && - fontFamily == other.fontFamily && + fontFamily == other.fontFamily && fontSize == other.fontSize && fontWeight == other.fontWeight && - textAlign == other.textAlign && + textAlign == other.textAlign && + textBaseline == other.textBaseline && decoration == other.decoration && decorationColor == other.decorationColor && decorationStyle == other.decorationStyle; @@ -174,6 +182,7 @@ class TextStyle { value = 37 * value + fontSize.hashCode; value = 37 * value + fontWeight.hashCode; value = 37 * value + textAlign.hashCode; + value = 37 * value + textBaseline.hashCode; value = 37 * value + decoration.hashCode; value = 37 * value + decorationColor.hashCode; value = 37 * value + decorationStyle.hashCode; @@ -193,6 +202,8 @@ class TextStyle { result.add('${prefix}fontWeight: $fontWeight'); if (textAlign != null) result.add('${prefix}textAlign: $textAlign'); + if (textBaseline != null) + result.add('${prefix}textBaseline: $textBaseline'); if (decoration != null) result.add('${prefix}decoration: $decoration'); if (decorationColor != null) diff --git a/sky/sdk/lib/rendering/box.dart b/sky/sdk/lib/rendering/box.dart index b07874e5d42e7..416312d81077e 100644 --- a/sky/sdk/lib/rendering/box.dart +++ b/sky/sdk/lib/rendering/box.dart @@ -7,10 +7,12 @@ import 'dart:sky' as sky; import 'package:sky/base/debug.dart'; import 'package:sky/painting/box_painter.dart'; +import 'package:sky/painting/text_style.dart'; import 'package:sky/rendering/object.dart'; import 'package:vector_math/vector_math.dart'; export 'package:sky/painting/box_painter.dart'; +export 'package:sky/painting/text_style.dart' show TextBaseline; // GENERIC BOX RENDERING // Anything that has a concept of x, y, width, height is going to derive from this @@ -253,8 +255,6 @@ class BoxParentData extends ParentData { String toString() => 'position=$position'; } -enum TextBaseline { alphabetic, ideographic } - abstract class RenderBox extends RenderObject { void setupParentData(RenderObject child) { diff --git a/sky/sdk/lib/rendering/flex.dart b/sky/sdk/lib/rendering/flex.dart index fd7d2330948d5..48792fda02069 100644 --- a/sky/sdk/lib/rendering/flex.dart +++ b/sky/sdk/lib/rendering/flex.dart @@ -47,10 +47,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin children, FlexDirection direction: FlexDirection.horizontal, FlexJustifyContent justifyContent: FlexJustifyContent.start, - FlexAlignItems alignItems: FlexAlignItems.center + FlexAlignItems alignItems: FlexAlignItems.center, + TextBaseline textBaseline }) : _direction = direction, _justifyContent = justifyContent, - _alignItems = alignItems { + _alignItems = alignItems, + _textBaseline = textBaseline { addAll(children); } @@ -81,6 +83,15 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin _textBaseline; + void set textBaseline (TextBaseline value) { + if (_textBaseline != value) { + _textBaseline = value; + markNeedsLayout(); + } + } + bool _overflowOccurredDuringLayout = false; void setupParentData(RenderBox child) { @@ -342,8 +353,8 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin new RenderFlex(direction: this.direction); RenderFlex get root => super.root; @@ -416,6 +418,7 @@ class Flex extends MultiChildRenderObjectWrapper { root.direction = direction; root.justifyContent = justifyContent; root.alignItems = alignItems; + root.textBaseline = textBaseline; } }