| 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 |