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