Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(91)

Side by Side Diff: sky/sdk/lib/framework/rendering/paragraph.dart

Issue 1178913003: Add support for text styles. (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Fix test per jackson's review Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « sky/examples/stocks2/lib/stock_row.dart ('k') | sky/sdk/lib/framework/theme2/typography.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 import 'dart:sky' as sky; 5 import 'dart:sky' as sky;
6 import 'box.dart'; 6 import 'box.dart';
7 import 'object.dart'; 7 import 'object.dart';
8 8
9 class RenderInline extends RenderObject { 9 class RenderInline extends RenderObject {
10 RenderInline(this.data); 10 RenderInline(this.data);
11 String data; 11 String data;
12 } 12 }
13 13
14 enum FontWeight {
15 light, // 300
16 regular, // 400
17 medium, // 500
18 }
19
20 enum TextAlign {
21 left,
22 right,
23 center
24 }
25
26 class TextStyle {
27 const TextStyle({
28 this.color,
29 this.fontSize,
30 this.fontWeight,
31 this.textAlign
32 });
33
34 final Color color;
35 final double fontSize; // in pixels
36 final FontWeight fontWeight;
37 final TextAlign textAlign;
38
39 TextStyle copyWith({
abarth-chromium 2015/06/12 03:11:17 In BoxConstraints, we call a similar function "app
40 Color color,
41 double fontSize,
42 FontWeight fontWeight,
43 TextAlign textAlign
44 }) {
45 return new TextStyle(
46 color: color != null ? color : this.color,
47 fontSize: fontSize != null ? fontSize : this.fontSize,
48 fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
49 textAlign: textAlign != null ? textAlign : this.textAlign
50 );
51 }
52
53 bool operator ==(other) {
54 return other is TextStyle &&
55 color == other.color &&
56 fontSize == other.fontSize &&
57 fontWeight == other.fontWeight &&
58 textAlign == other.textAlign;
59 }
60
61 int get hashCode {
62 // Use Quiver: https://github.com/domokit/mojo/issues/236
63 int value = 373;
64 value = 37 * value + color.hashCode;
65 value = 37 * value + fontSize.hashCode;
66 value = 37 * value + fontWeight.hashCode;
67 value = 37 * value + textAlign.hashCode;
68 return value;
69 }
70 }
71
14 // Unfortunately, using full precision floating point here causes bad layouts 72 // Unfortunately, using full precision floating point here causes bad layouts
15 // because floating point math isn't associative. If we add and subtract 73 // because floating point math isn't associative. If we add and subtract
16 // padding, for example, we'll get different values when we estimate sizes and 74 // padding, for example, we'll get different values when we estimate sizes and
17 // when we actually compute layout because the operations will end up associated 75 // when we actually compute layout because the operations will end up associated
18 // differently. To work around this problem for now, we round fractional pixel 76 // differently. To work around this problem for now, we round fractional pixel
19 // values up to the nearest whole pixel value. The right long-term fix is to do 77 // values up to the nearest whole pixel value. The right long-term fix is to do
20 // layout using fixed precision arithmetic. 78 // layout using fixed precision arithmetic.
21 double _applyFloatingPointHack(double layoutValue) { 79 double _applyFloatingPointHack(double layoutValue) {
22 return layoutValue.ceilToDouble(); 80 return layoutValue.ceilToDouble();
23 } 81 }
24 82
25 class RenderParagraph extends RenderBox { 83 class RenderParagraph extends RenderBox {
26 84
27 RenderParagraph({ 85 RenderParagraph({
28 String text, 86 String text,
29 Color color 87 Color color,
30 }) : _color = color { 88 TextStyle style
89 }) : _style = style {
31 _layoutRoot.rootElement = _document.createElement('p'); 90 _layoutRoot.rootElement = _document.createElement('p');
32 this.text = text; 91 this.text = text;
33 } 92 }
34 93
35 final sky.Document _document = new sky.Document(); 94 final sky.Document _document = new sky.Document();
36 final sky.LayoutRoot _layoutRoot = new sky.LayoutRoot(); 95 final sky.LayoutRoot _layoutRoot = new sky.LayoutRoot();
37 96
38 String get text => (_layoutRoot.rootElement.firstChild as sky.Text).data; 97 String get text => (_layoutRoot.rootElement.firstChild as sky.Text).data;
39 void set text (String value) { 98 void set text (String value) {
40 _layoutRoot.rootElement.setChild(_document.createText(value)); 99 _layoutRoot.rootElement.setChild(_document.createText(value));
41 markNeedsLayout(); 100 markNeedsLayout();
42 } 101 }
43 102
44 Color _color = const Color(0xFF000000); 103 TextStyle _style;
45 Color get color => _color; 104 TextStyle get style => _style;
46 void set color (Color value) { 105 void set style (TextStyle value) {
47 if (_color != value) { 106 if (_style != value) {
48 _color = value; 107 // TODO(hansmuller): decide if a new layout or paint is needed
49 markNeedsPaint(); 108 markNeedsLayout();
109 _style = value;
50 } 110 }
51 } 111 }
52 112
53 BoxConstraints _constraintsForCurrentLayout; 113 BoxConstraints _constraintsForCurrentLayout;
54 114
55 sky.Element _layout(BoxConstraints constraints) { 115 sky.Element _layout(BoxConstraints constraints) {
56 _layoutRoot.maxWidth = constraints.maxWidth; 116 _layoutRoot.maxWidth = constraints.maxWidth;
57 _layoutRoot.minWidth = constraints.minWidth; 117 _layoutRoot.minWidth = constraints.minWidth;
58 _layoutRoot.minHeight = constraints.minHeight; 118 _layoutRoot.minHeight = constraints.minHeight;
59 _layoutRoot.maxHeight = constraints.maxHeight; 119 _layoutRoot.maxHeight = constraints.maxHeight;
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
99 // Ideally we could compute the min/max intrinsic width/height with a 159 // Ideally we could compute the min/max intrinsic width/height with a
100 // non-destructive operation. However, currently, computing these values 160 // non-destructive operation. However, currently, computing these values
101 // will destroy state inside the layout root. If that happens, we need to 161 // will destroy state inside the layout root. If that happens, we need to
102 // get back the correct state by calling _layout again. 162 // get back the correct state by calling _layout again.
103 // 163 //
104 // TODO(abarth): Make computing the min/max intrinsic width/height a 164 // TODO(abarth): Make computing the min/max intrinsic width/height a
105 // non-destructive operation. 165 // non-destructive operation.
106 if (_constraintsForCurrentLayout != constraints && constraints != null) 166 if (_constraintsForCurrentLayout != constraints && constraints != null)
107 _layout(constraints); 167 _layout(constraints);
108 168
109 if (_color != null) { 169 if (style != null) {
110 _layoutRoot.rootElement.style['color'] = 170 var cssStyle = _layoutRoot.rootElement.style;
111 'rgba(${_color.red}, ${_color.green}, ${_color.blue}, ${_color.alpha / 255.0 })'; 171 if (style.color != null) {
172 Color c = style.color;
173 cssStyle['color'] =
174 'rgba(${c.red}, ${c.green}, ${c.blue}, ${c.alpha / 255.0})';
175 }
176 if (style.fontSize != null) {
177 cssStyle['font-size'] = "${style.fontSize}px";
178 }
179 if (style.fontWeight != null) {
180 cssStyle['font-weight'] = {
abarth-chromium 2015/06/12 03:11:17 const { That will make the map a compile-time con
181 FontWeight.light: '300',
182 FontWeight.regular: '400',
183 FontWeight.medium: '500',
184 }[style.fontWeight];
185 }
186 if (style.textAlign != null) {
187 cssStyle['text-align'] = {
abarth-chromium 2015/06/12 03:11:17 const {
188 TextAlign.left: 'left',
189 TextAlign.right: 'right',
190 TextAlign.center: 'center',
191 }[style.textAlign];
192 }
112 } 193 }
113 _layoutRoot.paint(canvas); 194 _layoutRoot.paint(canvas);
114 } 195 }
115 196
116 // we should probably expose a way to do precise (inter-glpyh) hit testing 197 // we should probably expose a way to do precise (inter-glpyh) hit testing
117 198
118 String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings( prefix)}${prefix}color: ${color}\n${prefix}text: ${text}\n'; 199 String debugDescribeSettings(String prefix) => '${super.debugDescribeSettings( prefix)}${prefix}color: ${color}\n${prefix}text: ${text}\n';
119 } 200 }
OLDNEW
« no previous file with comments | « sky/examples/stocks2/lib/stock_row.dart ('k') | sky/sdk/lib/framework/theme2/typography.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698