git.roojs.org Git - roojs1/blob - docs/src/Roo_lib_Color.js.html

   1 <html><head><title>Roo/lib/Color.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
   2
   3 <span class="jsdoc-comment">/**
   4  * @class Roo.lib.Color
   5  * @constructor
   6  * An abstract Color implementation. Concrete Color implementations should use
   7  * an instance of this function as their prototype, and implement the getRGB and
   8  * getHSL functions. getRGB should return an object representing the RGB
   9  * components of this Color, with the red, green, and blue components in the
  10  * range [0,255] and the alpha component in the range [0,100]. getHSL should
  11  * return an object representing the HSL components of this Color, with the hue
  12  * component in the range [0,360), the saturation and lightness components in
  13  * the range [0,100], and the alpha component in the range [0,1].
  14  *
  15  *
  16  * Color.js
  17  *
  18  * Functions for Color handling and processing.
  19  *
  20  * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
  21  *
  22  * The author of this program, Safalra (Stephen Morley), irrevocably releases all
  23  * rights to this program, with the intention of it becoming part of the public
  24  * domain. Because this program is released into the public domain, it comes with
  25  * no warranty either expressed or implied, to the extent permitted by law.
  26  *
  27  * For more free and public domain JavaScript code by the same author, visit:
  28  * http://www.safalra.com/web-design/javascript/
  29  *
  30  */
  31 </span><span class="jsdoc-var">Roo.lib.Color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { }
  32
  33
  34 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Color.prototype</span><span class="jsdoc-syntax">, {
  35
  36   </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  37   </span><span class="jsdoc-var">hsv </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  38   </span><span class="jsdoc-var">hsl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  39
  40   </span><span class="jsdoc-comment">/**
  41    * getIntegerRGB
  42    * @return {Object} an object representing the RGBA components of this Color. The red,
  43    * green, and blue components are converted to integers in the range [0,255].
  44    * The alpha is a value in the range [0,1].
  45    */
  46   </span><span class="jsdoc-var">getIntegerRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  47
  48     </span><span class="jsdoc-comment">// get the RGB components of this Color
  49     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getRGB</span><span class="jsdoc-syntax">();
  50
  51     </span><span class="jsdoc-comment">// return the integer components
  52     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
  53       </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">),
  54       </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">),
  55       </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">),
  56       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rgb.a
  57     </span><span class="jsdoc-syntax">};
  58
  59   },
  60
  61   </span><span class="jsdoc-comment">/**
  62    * getPercentageRGB
  63    * @return {Object} an object representing the RGBA components of this Color. The red,
  64    * green, and blue components are converted to numbers in the range [0,100].
  65    * The alpha is a value in the range [0,1].
  66    */
  67   </span><span class="jsdoc-var">getPercentageRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  68
  69     </span><span class="jsdoc-comment">// get the RGB components of this Color
  70     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getRGB</span><span class="jsdoc-syntax">();
  71
  72     </span><span class="jsdoc-comment">// return the percentage components
  73     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
  74       </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: 100 * </span><span class="jsdoc-var">rgb.r </span><span class="jsdoc-syntax">/ 255,
  75       </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: 100 * </span><span class="jsdoc-var">rgb.g </span><span class="jsdoc-syntax">/ 255,
  76       </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: 100 * </span><span class="jsdoc-var">rgb.b </span><span class="jsdoc-syntax">/ 255,
  77       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rgb.a
  78     </span><span class="jsdoc-syntax">};
  79
  80   },
  81
  82   </span><span class="jsdoc-comment">/**
  83    * getCSSHexadecimalRGB
  84    * @return {String} a string representing this Color as a CSS hexadecimal RGB Color
  85    * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
  86    * are two-digit hexadecimal numbers.
  87    */
  88   </span><span class="jsdoc-var">getCSSHexadecimalRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  89   {
  90
  91     </span><span class="jsdoc-comment">// get the integer RGB components
  92     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getIntegerRGB</span><span class="jsdoc-syntax">();
  93
  94     </span><span class="jsdoc-comment">// determine the hexadecimal equivalents
  95     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r16 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rgb.r.toString</span><span class="jsdoc-syntax">(16);
  96     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g16 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rgb.g.toString</span><span class="jsdoc-syntax">(16);
  97     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b16 </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rgb.b.toString</span><span class="jsdoc-syntax">(16);
  98
  99     </span><span class="jsdoc-comment">// return the CSS RGB Color value
 100     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'#'
 101         </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">r16.length </span><span class="jsdoc-syntax">== 2 ? </span><span class="jsdoc-var">r16 </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">r16</span><span class="jsdoc-syntax">)
 102         + (</span><span class="jsdoc-var">g16.length </span><span class="jsdoc-syntax">== 2 ? </span><span class="jsdoc-var">g16 </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">g16</span><span class="jsdoc-syntax">)
 103         + (</span><span class="jsdoc-var">b16.length </span><span class="jsdoc-syntax">== 2 ? </span><span class="jsdoc-var">b16 </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">b16</span><span class="jsdoc-syntax">);
 104
 105   },
 106
 107   </span><span class="jsdoc-comment">/**
 108    * getCSSIntegerRGB
 109    * @return {String} a string representing this Color as a CSS integer RGB Color
 110    * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
 111    * are integers in the range [0,255].
 112    */
 113   </span><span class="jsdoc-var">getCSSIntegerRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 114
 115     </span><span class="jsdoc-comment">// get the integer RGB components
 116     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getIntegerRGB</span><span class="jsdoc-syntax">();
 117
 118     </span><span class="jsdoc-comment">// return the CSS RGB Color value
 119     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'rgb(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.r </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.g </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.b </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">;
 120
 121   },
 122
 123   </span><span class="jsdoc-comment">/**
 124    * getCSSIntegerRGBA
 125    * @return {String} Returns a string representing this Color as a CSS integer RGBA Color
 126    * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
 127    * b are integers in the range [0,255] and a is in the range [0,1].
 128    */
 129   </span><span class="jsdoc-var">getCSSIntegerRGBA </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 130
 131     </span><span class="jsdoc-comment">// get the integer RGB components
 132     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getIntegerRGB</span><span class="jsdoc-syntax">();
 133
 134     </span><span class="jsdoc-comment">// return the CSS integer RGBA Color value
 135     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'rgb(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.r </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.g </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.b </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.a </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">;
 136
 137   },
 138
 139   </span><span class="jsdoc-comment">/**
 140    * getCSSPercentageRGB
 141    * @return {String} a string representing this Color as a CSS percentage RGB Color
 142    * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
 143    * b are in the range [0,100].
 144    */
 145   </span><span class="jsdoc-var">getCSSPercentageRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 146
 147     </span><span class="jsdoc-comment">// get the percentage RGB components
 148     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPercentageRGB</span><span class="jsdoc-syntax">();
 149
 150     </span><span class="jsdoc-comment">// return the CSS RGB Color value
 151     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'rgb(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.r </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.g </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.b </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%)'</span><span class="jsdoc-syntax">;
 152
 153   },
 154
 155   </span><span class="jsdoc-comment">/**
 156    * getCSSPercentageRGBA
 157    * @return {String} a string representing this Color as a CSS percentage RGBA Color
 158    * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
 159    * and b are in the range [0,100] and a is in the range [0,1].
 160    */
 161   </span><span class="jsdoc-var">getCSSPercentageRGBA </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 162
 163     </span><span class="jsdoc-comment">// get the percentage RGB components
 164     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPercentageRGB</span><span class="jsdoc-syntax">();
 165
 166     </span><span class="jsdoc-comment">// return the CSS percentage RGBA Color value
 167     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'rgb(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.r </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.g </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.b </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">rgb.a </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">;
 168
 169   },
 170
 171   </span><span class="jsdoc-comment">/**
 172    * getCSSHSL
 173    * @return {String} a string representing this Color as a CSS HSL Color value - that
 174    * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
 175    * s and l are in the range [0,100].
 176    */
 177   </span><span class="jsdoc-var">getCSSHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 178
 179     </span><span class="jsdoc-comment">// get the HSL components
 180     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHSL</span><span class="jsdoc-syntax">();
 181
 182     </span><span class="jsdoc-comment">// return the CSS HSL Color value
 183     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'hsl(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.h </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.s </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.l </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%)'</span><span class="jsdoc-syntax">;
 184
 185   },
 186
 187   </span><span class="jsdoc-comment">/**
 188    * getCSSHSLA
 189    * @return {String} a string representing this Color as a CSS HSLA Color value - that
 190    * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
 191    * s and l are in the range [0,100], and a is in the range [0,1].
 192    */
 193   </span><span class="jsdoc-var">getCSSHSLA </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 194
 195     </span><span class="jsdoc-comment">// get the HSL components
 196     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHSL</span><span class="jsdoc-syntax">();
 197
 198     </span><span class="jsdoc-comment">// return the CSS HSL Color value
 199     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">'hsl(' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.h </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.s </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.l </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'%,' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.a </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">')'</span><span class="jsdoc-syntax">;
 200
 201   },
 202
 203   </span><span class="jsdoc-comment">/**
 204    * Sets the Color of the specified node to this Color. This functions sets
 205    * the CSS 'color' property for the node. The parameter is:
 206    *
 207    * @param {DomElement} node - the node whose Color should be set
 208    */
 209   </span><span class="jsdoc-var">setNodeColor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">){
 210
 211     </span><span class="jsdoc-comment">// set the Color of the node
 212     </span><span class="jsdoc-var">node.style.color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getCSSHexadecimalRGB</span><span class="jsdoc-syntax">();
 213
 214   },
 215
 216   </span><span class="jsdoc-comment">/**
 217    * Sets the background Color of the specified node to this Color. This
 218    * functions sets the CSS 'background-color' property for the node. The
 219    * parameter is:
 220    *
 221    * @param {DomElement} node - the node whose background Color should be set
 222    */
 223   </span><span class="jsdoc-var">setNodeBackgroundColor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">){
 224
 225     </span><span class="jsdoc-comment">// set the background Color of the node
 226     </span><span class="jsdoc-var">node.style.backgroundColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getCSSHexadecimalRGB</span><span class="jsdoc-syntax">();
 227
 228   },
 229   </span><span class="jsdoc-comment">// convert between formats..
 230   </span><span class="jsdoc-var">toRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 231   {
 232     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getIntegerRGB</span><span class="jsdoc-syntax">();
 233     </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.lib.RGBColor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.r</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">r.g</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">r.b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">r.a</span><span class="jsdoc-syntax">);
 234
 235   },
 236   </span><span class="jsdoc-var">toHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 237   {
 238      </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHSL</span><span class="jsdoc-syntax">();
 239   </span><span class="jsdoc-comment">// return the CSS HSL Color value
 240     </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.lib.HSLColor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsl.h</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">hsl.s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hsl.l </span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">hsl.a </span><span class="jsdoc-syntax">);
 241
 242   },
 243
 244   </span><span class="jsdoc-var">toHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 245   {
 246     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toRGB</span><span class="jsdoc-syntax">();
 247     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rgb.getHSV</span><span class="jsdoc-syntax">();
 248    </span><span class="jsdoc-comment">// return the CSS HSL Color value
 249     </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.lib.HSVColor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsv.h</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">hsv.s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">hsv.a </span><span class="jsdoc-syntax">);
 250
 251   },
 252
 253   </span><span class="jsdoc-comment">// modify  v = 0 ... 1 (eg. 0.5)
 254   </span><span class="jsdoc-var">saturate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">)
 255   {
 256       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toRGB</span><span class="jsdoc-syntax">();
 257       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rgb.getHSV</span><span class="jsdoc-syntax">();
 258       </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.lib.HSVColor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsv.h</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">hsv.a </span><span class="jsdoc-syntax">);
 259
 260
 261   },
 262
 263
 264   </span><span class="jsdoc-comment">/**
 265    * getRGB
 266    * @return {Object} the RGB and alpha components of this Color as an object with r,
 267    * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
 268    * the range [0,1].
 269    */
 270   </span><span class="jsdoc-var">getRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 271
 272     </span><span class="jsdoc-comment">// return the RGB components
 273     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 274       </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.rgb.r</span><span class="jsdoc-syntax">,
 275       </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.rgb.g</span><span class="jsdoc-syntax">,
 276       </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.rgb.b</span><span class="jsdoc-syntax">,
 277       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.alpha
 278     </span><span class="jsdoc-syntax">};
 279
 280   },
 281
 282   </span><span class="jsdoc-comment">/**
 283    * getHSV
 284    * @return {Object} the HSV and alpha components of this Color as an object with h,
 285    * s, v, and a properties. h is in the range [0,360), s and v are in the range
 286    * [0,100], and a is in the range [0,1].
 287    */
 288   </span><span class="jsdoc-var">getHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 289   {
 290
 291     </span><span class="jsdoc-comment">// calculate the HSV components if necessary
 292     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">this.calculateHSV</span><span class="jsdoc-syntax">();
 293
 294     </span><span class="jsdoc-comment">// return the HSV components
 295     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 296       </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsv.h</span><span class="jsdoc-syntax">,
 297       </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsv.s</span><span class="jsdoc-syntax">,
 298       </span><span class="jsdoc-string">'v' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsv.v</span><span class="jsdoc-syntax">,
 299       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.alpha
 300     </span><span class="jsdoc-syntax">};
 301
 302   },
 303
 304   </span><span class="jsdoc-comment">/**
 305    * getHSL
 306    * @return {Object} the HSL and alpha components of this Color as an object with h,
 307    * s, l, and a properties. h is in the range [0,360), s and l are in the range
 308    * [0,100], and a is in the range [0,1].
 309    */
 310   </span><span class="jsdoc-var">getHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 311
 312
 313     </span><span class="jsdoc-comment">// calculate the HSV components if necessary
 314     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) </span><span class="jsdoc-var">this.calculateHSL</span><span class="jsdoc-syntax">();
 315
 316     </span><span class="jsdoc-comment">// return the HSL components
 317     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 318       </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.h</span><span class="jsdoc-syntax">,
 319       </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.s</span><span class="jsdoc-syntax">,
 320       </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.l</span><span class="jsdoc-syntax">,
 321       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.alpha
 322     </span><span class="jsdoc-syntax">};
 323
 324   }
 325
 326
 327 });
 328
 329
 330 </span><span class="jsdoc-comment">/**
 331  * @class Roo.lib.RGBColor
 332  * @extends Roo.lib.Color
 333  * Creates a Color specified in the RGB Color space, with an optional alpha
 334  * component. The parameters are:
 335  * @constructor
 336  *
 337
 338  * @param {Number} r - the red component, clipped to the range [0,255]
 339  * @param {Number} g - the green component, clipped to the range [0,255]
 340  * @param {Number} b - the blue component, clipped to the range [0,255]
 341  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
 342  *     optional and defaults to 1
 343  */
 344 </span><span class="jsdoc-var">Roo.lib.RGBColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
 345
 346   </span><span class="jsdoc-comment">// store the alpha component after clipping it if necessary
 347   </span><span class="jsdoc-var">this.alpha </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? 1 : </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">)));
 348
 349   </span><span class="jsdoc-comment">// store the RGB components after clipping them if necessary
 350   </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 351       {
 352         </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(255, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">)),
 353         </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(255, </span><span class="jsdoc-var">g</span><span class="jsdoc-syntax">)),
 354         </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(255, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">))
 355       };
 356
 357   </span><span class="jsdoc-comment">// initialise the HSV and HSL components to null
 358
 359
 360   /*
 361    * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
 362    * range [0,360). The parameters are:
 363    *
 364    * maximum - the maximum of the RGB component values
 365    * range   - the range of the RGB component values
 366    */
 367
 368
 369 </span><span class="jsdoc-syntax">}
 370 </span><span class="jsdoc-comment">// this does an 'exteds'
 371 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.RGBColor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Color</span><span class="jsdoc-syntax">, {
 372
 373
 374     </span><span class="jsdoc-var">getHue  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maximum</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">)
 375     {
 376       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">;
 377
 378       </span><span class="jsdoc-comment">// check whether the range is zero
 379       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">== 0){
 380
 381         </span><span class="jsdoc-comment">// set the hue to zero (any hue is acceptable as the Color is grey)
 382         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">= 0;
 383
 384       }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 385
 386         </span><span class="jsdoc-comment">// determine which of the components has the highest value and set the hue
 387         </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maximum</span><span class="jsdoc-syntax">){
 388
 389           </span><span class="jsdoc-comment">// red has the highest value
 390           </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">:
 391             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">rgb.g </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">* 60;
 392             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">&lt; 0) </span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">+= 360;
 393             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 394
 395           </span><span class="jsdoc-comment">// green has the highest value
 396           </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">:
 397             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">rgb.b </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">* 60 + 120;
 398             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 399
 400           </span><span class="jsdoc-comment">// blue has the highest value
 401           </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">:
 402             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">rgb.r </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">* 60 + 240;
 403             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 404
 405         }
 406
 407       }
 408
 409       </span><span class="jsdoc-comment">// return the hue
 410       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">hue</span><span class="jsdoc-syntax">;
 411
 412     },
 413
 414   </span><span class="jsdoc-comment">/* //private Calculates and stores the HSV components of this RGBColor so that they can
 415    * be returned be the getHSV function.
 416    */
 417    </span><span class="jsdoc-var">calculateHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 418     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">;
 419     </span><span class="jsdoc-comment">// get the maximum and range of the RGB component values
 420     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">);
 421     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">);
 422
 423     </span><span class="jsdoc-comment">// store the HSV components
 424     </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
 425         {
 426           </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getHue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maximum</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">),
 427           </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">== 0 ? 0 : 100 * </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">maximum</span><span class="jsdoc-syntax">),
 428           </span><span class="jsdoc-string">'v' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">/ 2.55
 429         };
 430
 431   },
 432
 433   </span><span class="jsdoc-comment">/* //private Calculates and stores the HSL components of this RGBColor so that they can
 434    * be returned be the getHSL function.
 435    */
 436    </span><span class="jsdoc-var">calculateHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 437     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">;
 438     </span><span class="jsdoc-comment">// get the maximum and range of the RGB component values
 439     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">);
 440     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">);
 441
 442     </span><span class="jsdoc-comment">// determine the lightness in the range [0,1]
 443     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">/ 255 - </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">/ 510;
 444
 445     </span><span class="jsdoc-comment">// store the HSL components
 446     </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
 447         {
 448           </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getHue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maximum</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">),
 449           </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">== 0 ? 0 : </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">/ 2.55 / (</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">&lt; 0.5 ? </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">* 2 : 2 - </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">* 2)),
 450           </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: 100 * </span><span class="jsdoc-var">l
 451         </span><span class="jsdoc-syntax">};
 452
 453   }
 454
 455 });
 456
 457 </span><span class="jsdoc-comment">/**
 458  * @class Roo.lib.HSVColor
 459  * @extends Roo.lib.Color
 460  * Creates a Color specified in the HSV Color space, with an optional alpha
 461  * component. The parameters are:
 462  * @constructor
 463  *
 464  * @param {Number} h - the hue component, wrapped to the range [0,360)
 465  * @param {Number} s - the saturation component, clipped to the range [0,100]
 466  * @param {Number} v - the value component, clipped to the range [0,100]
 467  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
 468  *     optional and defaults to 1
 469  */
 470 </span><span class="jsdoc-var">Roo.lib.HSVColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
 471
 472   </span><span class="jsdoc-comment">// store the alpha component after clipping it if necessary
 473   </span><span class="jsdoc-var">this.alpha </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? 1 : </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">)));
 474
 475   </span><span class="jsdoc-comment">// store the HSV components after clipping or wrapping them if necessary
 476   </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
 477       {
 478         </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">% 360 + 360) % 360,
 479         </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">)),
 480         </span><span class="jsdoc-string">'v' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">))
 481       };
 482
 483   </span><span class="jsdoc-comment">// initialise the RGB and HSL components to null
 484   </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 485   </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 486 }
 487
 488 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.HSVColor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Color</span><span class="jsdoc-syntax">, {
 489   </span><span class="jsdoc-comment">/* Calculates and stores the RGB components of this HSVColor so that they can
 490    * be returned be the getRGB function.
 491    */
 492   </span><span class="jsdoc-var">calculateRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
 493   {
 494     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hsv</span><span class="jsdoc-syntax">;
 495     </span><span class="jsdoc-comment">// check whether the saturation is zero
 496     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">== 0){
 497
 498       </span><span class="jsdoc-comment">// set the Color to the appropriate shade of grey
 499       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">;
 500       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">;
 501       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">;
 502
 503     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 504
 505       </span><span class="jsdoc-comment">// set some temporary values
 506       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.h </span><span class="jsdoc-syntax">/ 60 - </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsv.h </span><span class="jsdoc-syntax">/ 60);
 507       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">* (1 - </span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">/ 100);
 508       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">q  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">* (1 - </span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">/ 100 * </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">);
 509       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">* (1 - </span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">/ 100 * (1 - </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">));
 510
 511       </span><span class="jsdoc-comment">// set the RGB Color components to their temporary values
 512       </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsv.h </span><span class="jsdoc-syntax">/ 60)){
 513         </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">0: </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 514         </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">1: </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 515         </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">2: </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 516         </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">3: </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 517         </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">4: </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 518         </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">5: </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">hsv.v</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">; </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 519       }
 520
 521     }
 522
 523     </span><span class="jsdoc-comment">// store the RGB components
 524     </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 525         {
 526           </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">* 2.55,
 527           </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">* 2.55,
 528           </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">* 2.55
 529         };
 530
 531   },
 532
 533   </span><span class="jsdoc-comment">/* Calculates and stores the HSL components of this HSVColor so that they can
 534    * be returned be the getHSL function.
 535    */
 536   </span><span class="jsdoc-var">calculateHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(){
 537
 538     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hsv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hsv</span><span class="jsdoc-syntax">;
 539     </span><span class="jsdoc-comment">// determine the lightness in the range [0,100]
 540     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= (2 - </span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">/ 100) * </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">/ 2;
 541
 542     </span><span class="jsdoc-comment">// store the HSL components
 543     </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
 544         {
 545           </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">hsv.h</span><span class="jsdoc-syntax">,
 546           </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">hsv.v </span><span class="jsdoc-syntax">/ (</span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">&lt; 50 ? </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">* 2 : 200 - </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">* 2),
 547           </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">l
 548         </span><span class="jsdoc-syntax">};
 549
 550     </span><span class="jsdoc-comment">// correct a division-by-zero error
 551     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsl.s</span><span class="jsdoc-syntax">)) </span><span class="jsdoc-var">hsl.s </span><span class="jsdoc-syntax">= 0;
 552
 553   }
 554
 555
 556 });
 557
 558
 559 </span><span class="jsdoc-comment">/**
 560  * @class Roo.lib.HSLColor
 561  * @extends Roo.lib.Color
 562  *
 563  * @constructor
 564  * Creates a Color specified in the HSL Color space, with an optional alpha
 565  * component. The parameters are:
 566  *
 567  * @param {Number} h - the hue component, wrapped to the range [0,360)
 568  * @param {Number} s - the saturation component, clipped to the range [0,100]
 569  * @param {Number} l - the lightness component, clipped to the range [0,100]
 570  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
 571  *     optional and defaults to 1
 572  */
 573
 574 </span><span class="jsdoc-var">Roo.lib.HSLColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){
 575
 576   </span><span class="jsdoc-comment">// store the alpha component after clipping it if necessary
 577   </span><span class="jsdoc-var">this.alpha </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? 1 : </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">)));
 578
 579   </span><span class="jsdoc-comment">// store the HSL components after clipping or wrapping them if necessary
 580   </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
 581       {
 582         </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">% 360 + 360) % 360,
 583         </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">)),
 584         </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">))
 585       };
 586
 587   </span><span class="jsdoc-comment">// initialise the RGB and HSV components to null
 588 </span><span class="jsdoc-syntax">}
 589
 590 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.HSL</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Color</span><span class="jsdoc-syntax">, {
 591
 592   </span><span class="jsdoc-comment">/* Calculates and stores the RGB components of this HSLColor so that they can
 593    * be returned be the getRGB function.
 594    */
 595   </span><span class="jsdoc-var">calculateRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(){
 596
 597     </span><span class="jsdoc-comment">// check whether the saturation is zero
 598     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hsl.s </span><span class="jsdoc-syntax">== 0){
 599
 600       </span><span class="jsdoc-comment">// store the RGB components representing the appropriate shade of grey
 601       </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 602           {
 603             </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">* 2.55,
 604             </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">* 2.55,
 605             </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">* 2.55
 606           };
 607
 608     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 609
 610       </span><span class="jsdoc-comment">// set some temporary values
 611       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">&lt; 50
 612             ? </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">* (1 + </span><span class="jsdoc-var">hsl.s </span><span class="jsdoc-syntax">/ 100)
 613             : </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">hsl.s </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">hsl.l </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">hsl.s </span><span class="jsdoc-syntax">/ 100;
 614       </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= 2 * </span><span class="jsdoc-var">hsl.l </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
 615
 616       </span><span class="jsdoc-comment">// initialise the RGB components
 617       </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 618           {
 619             </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+ 120) / 60 % 6,
 620             </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">/ 60,
 621             </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">+ 240) / 60 % 6
 622           };
 623
 624       </span><span class="jsdoc-comment">// loop over the RGB components
 625       </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">){
 626
 627         </span><span class="jsdoc-comment">// ensure that the property is not inherited from the root object
 628         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rgb.hasOwnProperty</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">)){
 629
 630           </span><span class="jsdoc-comment">// set the component to its value in the range [0,100]
 631           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] &lt; 1){
 632             </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">];
 633           }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] &lt; 3){
 634             </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
 635           }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] &lt; 4){
 636             </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">) * (4 - </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">]);
 637           }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 638             </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">;
 639           }
 640
 641           </span><span class="jsdoc-comment">// set the component to its value in the range [0,255]
 642           </span><span class="jsdoc-var">this.rgb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] *= 2.55;
 643
 644         }
 645
 646       }
 647
 648     }
 649
 650   },
 651
 652   </span><span class="jsdoc-comment">/* Calculates and stores the HSV components of this HSLColor so that they can
 653    * be returned be the getHSL function.
 654    */
 655    </span><span class="jsdoc-var">calculateHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 656
 657     </span><span class="jsdoc-comment">// set a temporary value
 658     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hsl.s </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">&lt; 50 ? </span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">: 100 - </span><span class="jsdoc-var">this.hsl.l</span><span class="jsdoc-syntax">) / 100;
 659
 660     </span><span class="jsdoc-comment">// store the HSV components
 661     </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
 662         {
 663           </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.h</span><span class="jsdoc-syntax">,
 664           </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: 200 * </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">/ (</span><span class="jsdoc-var">this.hsl.l </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">),
 665           </span><span class="jsdoc-string">'v' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.hsl.l
 666         </span><span class="jsdoc-syntax">};
 667
 668     </span><span class="jsdoc-comment">// correct a division-by-zero error
 669     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isNaN</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hsv.s</span><span class="jsdoc-syntax">)) </span><span class="jsdoc-var">this.hsv.s </span><span class="jsdoc-syntax">= 0;
 670
 671   }
 672
 673
 674 });
 675 </span></code></body></html>