OLD | NEW |
1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 /** Representations of CSS styles. */ | 5 /** Representations of CSS styles. */ |
6 | 6 |
7 part of csslib.parser; | 7 part of csslib.parser; |
8 | 8 |
9 // TODO(terry): Prune down this file we do need some of the code in this file | 9 // TODO(terry): Prune down this file we do need some of the code in this file |
10 // for darker, lighter, how to represent a Font, etc but alot of | 10 // for darker, lighter, how to represent a Font, etc but alot of |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 * RGB takes three values. The [red], [green], and [blue] parameters are | 72 * RGB takes three values. The [red], [green], and [blue] parameters are |
73 * the intensity of those components where '0' is the least and '256' is the | 73 * the intensity of those components where '0' is the least and '256' is the |
74 * greatest. | 74 * greatest. |
75 * | 75 * |
76 * If [alpha] is provided, it is the level of translucency which ranges from | 76 * If [alpha] is provided, it is the level of translucency which ranges from |
77 * '0' (completely transparent) to '1.0' (completely opaque). It will | 77 * '0' (completely transparent) to '1.0' (completely opaque). It will |
78 * internally be mapped to an int between '0' and '255' like the other color | 78 * internally be mapped to an int between '0' and '255' like the other color |
79 * components. | 79 * components. |
80 */ | 80 */ |
81 Color.createRgba(int red, int green, int blue, [num alpha]) | 81 Color.createRgba(int red, int green, int blue, [num alpha]) |
82 : this._argb = Color.convertToHexString(Color._clamp(red, 0, 255), | 82 : this._argb = Color.convertToHexString( |
83 Color._clamp(green, 0, 255), Color._clamp(blue, 0, 255), | 83 Color._clamp(red, 0, 255), |
84 alpha != null ? Color._clamp(alpha, 0, 1) : alpha); | 84 Color._clamp(green, 0, 255), |
| 85 Color._clamp(blue, 0, 255), |
| 86 alpha != null ? Color._clamp(alpha, 0, 1) : alpha); |
85 | 87 |
86 /** | 88 /** |
87 * Creates a new color from a CSS color string. For more information, see | 89 * Creates a new color from a CSS color string. For more information, see |
88 * <https://developer.mozilla.org/en/CSS/color>. | 90 * <https://developer.mozilla.org/en/CSS/color>. |
89 */ | 91 */ |
90 Color.css(String color) : this._argb = Color._convertCssToArgb(color); | 92 Color.css(String color) : this._argb = Color._convertCssToArgb(color); |
91 | 93 |
92 // TODO(jmesserly): I found the use of percents a bit suprising. | 94 // TODO(jmesserly): I found the use of percents a bit suprising. |
93 /** | 95 /** |
94 * HSL takes three values. The [hueDegree] degree on the color wheel; '0' is | 96 * HSL takes three values. The [hueDegree] degree on the color wheel; '0' is |
95 * the least and '100' is the greatest. The value '0' or '360' is red, '120' | 97 * the least and '100' is the greatest. The value '0' or '360' is red, '120' |
96 * is green, '240' is blue. Numbers in between reflect different shades. | 98 * is green, '240' is blue. Numbers in between reflect different shades. |
97 * The [saturationPercent] percentage; where'0' is the least and '100' is the | 99 * The [saturationPercent] percentage; where'0' is the least and '100' is the |
98 * greatest (100 represents full color). The [lightnessPercent] percentage; | 100 * greatest (100 represents full color). The [lightnessPercent] percentage; |
99 * where'0' is the least and '100' is the greatest. The value 0 is dark or | 101 * where'0' is the least and '100' is the greatest. The value 0 is dark or |
100 * black, 100 is light or white and 50 is a medium lightness. | 102 * black, 100 is light or white and 50 is a medium lightness. |
101 * | 103 * |
102 * If [alpha] is provided, it is the level of translucency which ranges from | 104 * If [alpha] is provided, it is the level of translucency which ranges from |
103 * '0' (completely transparent foreground) to '1.0' (completely opaque | 105 * '0' (completely transparent foreground) to '1.0' (completely opaque |
104 * foreground). | 106 * foreground). |
105 */ | 107 */ |
106 Color.createHsla(num hueDegree, num saturationPercent, num lightnessPercent, | 108 Color.createHsla(num hueDegree, num saturationPercent, num lightnessPercent, |
107 [num alpha]) | 109 [num alpha]) |
108 : this._argb = new Hsla(Color._clamp(hueDegree, 0, 360) / 360, | 110 : this._argb = new Hsla( |
109 Color._clamp(saturationPercent, 0, 100) / 100, | 111 Color._clamp(hueDegree, 0, 360) / 360, |
110 Color._clamp(lightnessPercent, 0, 100) / 100, | 112 Color._clamp(saturationPercent, 0, 100) / 100, |
111 alpha != null ? Color._clamp(alpha, 0, 1) : alpha).toHexArgbString(); | 113 Color._clamp(lightnessPercent, 0, 100) / 100, |
| 114 alpha != null ? Color._clamp(alpha, 0, 1) : alpha) |
| 115 .toHexArgbString(); |
112 | 116 |
113 /** | 117 /** |
114 * The hslaRaw takes three values. The [hue] degree on the color wheel; '0' | 118 * The hslaRaw takes three values. The [hue] degree on the color wheel; '0' |
115 * is the least and '1' is the greatest. The value '0' or '1' is red, the | 119 * is the least and '1' is the greatest. The value '0' or '1' is red, the |
116 * ratio of 120/360 is green, and the ratio of 240/360 is blue. Numbers in | 120 * ratio of 120/360 is green, and the ratio of 240/360 is blue. Numbers in |
117 * between reflect different shades. The [saturation] is a percentage; '0' | 121 * between reflect different shades. The [saturation] is a percentage; '0' |
118 * is the least and '1' is the greatest. The value of '1' is equivalent to | 122 * is the least and '1' is the greatest. The value of '1' is equivalent to |
119 * 100% (full colour). The [lightness] is a percentage; '0' is the least and | 123 * 100% (full colour). The [lightness] is a percentage; '0' is the least and |
120 * '1' is the greatest. The value of '0' is dark (black), the value of '1' | 124 * '1' is the greatest. The value of '0' is dark (black), the value of '1' |
121 * is light (white), and the value of '.50' is a medium lightness. | 125 * is light (white), and the value of '.50' is a medium lightness. |
122 * | 126 * |
123 * The fourth optional parameter is: | 127 * The fourth optional parameter is: |
124 * [alpha] level of translucency range of values is 0..1, zero is a | 128 * [alpha] level of translucency range of values is 0..1, zero is a |
125 * completely transparent foreground and 1 is a completely | 129 * completely transparent foreground and 1 is a completely |
126 * opaque foreground. | 130 * opaque foreground. |
127 */ | 131 */ |
128 Color.hslaRaw(num hue, num saturation, num lightness, [num alpha]) | 132 Color.hslaRaw(num hue, num saturation, num lightness, [num alpha]) |
129 : this._argb = new Hsla(Color._clamp(hue, 0, 1), | 133 : this._argb = new Hsla( |
130 Color._clamp(saturation, 0, 1), Color._clamp(lightness, 0, 1), | 134 Color._clamp(hue, 0, 1), |
131 alpha != null ? Color._clamp(alpha, 0, 1) : alpha).toHexArgbString(); | 135 Color._clamp(saturation, 0, 1), |
| 136 Color._clamp(lightness, 0, 1), |
| 137 alpha != null ? Color._clamp(alpha, 0, 1) : alpha) |
| 138 .toHexArgbString(); |
132 | 139 |
133 /** | 140 /** |
134 * Generate a real constant for pre-defined colors (no leading #). | 141 * Generate a real constant for pre-defined colors (no leading #). |
135 */ | 142 */ |
136 const Color.hex(this._argb); | 143 const Color.hex(this._argb); |
137 | 144 |
138 // TODO(jmesserly): this is needed by the example so leave it exposed for now. | 145 // TODO(jmesserly): this is needed by the example so leave it exposed for now. |
139 String toString() => cssExpression; | 146 String toString() => cssExpression; |
140 | 147 |
141 // TODO(terry): Regardless of how color is set (rgb, num, css or hsl) we'll | 148 // TODO(terry): Regardless of how color is set (rgb, num, css or hsl) we'll |
(...skipping 380 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
522 this.g = Color._clamp(green, 0, 255), | 529 this.g = Color._clamp(green, 0, 255), |
523 this.b = Color._clamp(blue, 0, 255), | 530 this.b = Color._clamp(blue, 0, 255), |
524 this.a = (alpha != null) ? Color._clamp(alpha, 0, 1) : alpha; | 531 this.a = (alpha != null) ? Color._clamp(alpha, 0, 1) : alpha; |
525 | 532 |
526 factory Rgba.fromString(String hexValue) => | 533 factory Rgba.fromString(String hexValue) => |
527 new Color.css("#${Color._convertCssToArgb(hexValue)}").rgba; | 534 new Color.css("#${Color._convertCssToArgb(hexValue)}").rgba; |
528 | 535 |
529 factory Rgba.fromColor(Color color) => color.rgba; | 536 factory Rgba.fromColor(Color color) => color.rgba; |
530 | 537 |
531 factory Rgba.fromArgbValue(num value) { | 538 factory Rgba.fromArgbValue(num value) { |
532 return new Rgba(((value.toInt() & 0xff000000) >> 0x18), /* a */ | 539 return new Rgba( |
533 ((value.toInt() & 0xff0000) >> 0x10), /* r */ | 540 ((value.toInt() & 0xff000000) >> 0x18), // a |
534 ((value.toInt() & 0xff00) >> 8), /* g */ | 541 ((value.toInt() & 0xff0000) >> 0x10), // r |
535 ((value.toInt() & 0xff))); /* b */ | 542 ((value.toInt() & 0xff00) >> 8), // g |
| 543 ((value.toInt() & 0xff))); // b |
536 } | 544 } |
537 | 545 |
538 factory Rgba.fromHsla(Hsla hsla) { | 546 factory Rgba.fromHsla(Hsla hsla) { |
539 // Convert to Rgba. | 547 // Convert to Rgba. |
540 // See site <http://easyrgb.com/index.php?X=MATH> for good documentation | 548 // See site <http://easyrgb.com/index.php?X=MATH> for good documentation |
541 // and color conversion routines. | 549 // and color conversion routines. |
542 | 550 |
543 num h = hsla.hue; | 551 num h = hsla.hue; |
544 num s = hsla.saturation; | 552 num s = hsla.saturation; |
545 num l = hsla.lightness; | 553 num l = hsla.lightness; |
(...skipping 476 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1022 // Where width to display the text is also important in computing the line | 1030 // Where width to display the text is also important in computing the line |
1023 // height. Classic typography suggest the ratio be 1.5. See | 1031 // height. Classic typography suggest the ratio be 1.5. See |
1024 // <http://www.pearsonified.com/2011/12/golden-ratio-typography.php> and | 1032 // <http://www.pearsonified.com/2011/12/golden-ratio-typography.php> and |
1025 // <http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/>. | 1033 // <http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/>. |
1026 /** | 1034 /** |
1027 * Create a font using [size] of font in pixels, [family] name of font(s) | 1035 * Create a font using [size] of font in pixels, [family] name of font(s) |
1028 * using [FontFamily], [style] of the font using [FontStyle], [variant] using | 1036 * using [FontFamily], [style] of the font using [FontStyle], [variant] using |
1029 * [FontVariant], and [lineHeight] extra space (leading) around the font in | 1037 * [FontVariant], and [lineHeight] extra space (leading) around the font in |
1030 * pixels, if not specified it's 1.2 the font size. | 1038 * pixels, if not specified it's 1.2 the font size. |
1031 */ | 1039 */ |
1032 const Font({this.size, this.family, this.weight, this.style, this.variant, | 1040 const Font( |
| 1041 {this.size, |
| 1042 this.family, |
| 1043 this.weight, |
| 1044 this.style, |
| 1045 this.variant, |
1033 this.lineHeight}); | 1046 this.lineHeight}); |
1034 | 1047 |
1035 /** | 1048 /** |
1036 * Merge the two fonts and return the result. See [Style.merge] for | 1049 * Merge the two fonts and return the result. See [Style.merge] for |
1037 * more information. | 1050 * more information. |
1038 */ | 1051 */ |
1039 factory Font.merge(Font a, Font b) { | 1052 factory Font.merge(Font a, Font b) { |
1040 if (a == null) return b; | 1053 if (a == null) return b; |
1041 if (b == null) return a; | 1054 if (b == null) return a; |
1042 return new Font._merge(a, b); | 1055 return new Font._merge(a, b); |
(...skipping 182 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1225 */ | 1238 */ |
1226 num get width => (left != null ? left : 0) + (right != null ? right : 0); | 1239 num get width => (left != null ? left : 0) + (right != null ? right : 0); |
1227 | 1240 |
1228 /** | 1241 /** |
1229 * The total size of the vertical edges. Equal to [top] + [bottom], where | 1242 * The total size of the vertical edges. Equal to [top] + [bottom], where |
1230 * null is interpreted as 0px. | 1243 * null is interpreted as 0px. |
1231 */ | 1244 */ |
1232 num get height => (top != null ? top : 0) + (bottom != null ? bottom : 0); | 1245 num get height => (top != null ? top : 0) + (bottom != null ? bottom : 0); |
1233 } | 1246 } |
1234 | 1247 |
1235 _mergeVal(x, y) => y != null ? y : x; | 1248 /*=T*/ _mergeVal/*<T>*/(/*=T*/ x, /*=T*/ y) => y != null ? y : x; |
OLD | NEW |