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">) {
 293       </span><span class="jsdoc-var">this.calculateHSV</span><span class="jsdoc-syntax">();
 294     }
 295
 296     </span><span class="jsdoc-comment">// return the HSV components
 297     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 298       </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsv.h</span><span class="jsdoc-syntax">,
 299       </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsv.s</span><span class="jsdoc-syntax">,
 300       </span><span class="jsdoc-string">'v' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsv.v</span><span class="jsdoc-syntax">,
 301       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.alpha
 302     </span><span class="jsdoc-syntax">};
 303
 304   },
 305
 306   </span><span class="jsdoc-comment">/**
 307    * getHSL
 308    * @return {Object} the HSL and alpha components of this Color as an object with h,
 309    * s, l, and a properties. h is in the range [0,360), s and l are in the range
 310    * [0,100], and a is in the range [0,1].
 311    */
 312   </span><span class="jsdoc-var">getHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 313
 314
 315     </span><span class="jsdoc-comment">// calculate the HSV components if necessary
 316     </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">(); }
 317
 318     </span><span class="jsdoc-comment">// return the HSL components
 319     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 320       </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.h</span><span class="jsdoc-syntax">,
 321       </span><span class="jsdoc-string">'s' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.s</span><span class="jsdoc-syntax">,
 322       </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.l</span><span class="jsdoc-syntax">,
 323       </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.alpha
 324     </span><span class="jsdoc-syntax">};
 325
 326   }
 327
 328
 329 });
 330
 331
 332 </span><span class="jsdoc-comment">/**
 333  * @class Roo.lib.RGBColor
 334  * @extends Roo.lib.Color
 335  * Creates a Color specified in the RGB Color space, with an optional alpha
 336  * component. The parameters are:
 337  * @constructor
 338  *
 339
 340  * @param {Number} r - the red component, clipped to the range [0,255]
 341  * @param {Number} g - the green component, clipped to the range [0,255]
 342  * @param {Number} b - the blue component, clipped to the range [0,255]
 343  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
 344  *     optional and defaults to 1
 345  */
 346 </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">){
 347
 348   </span><span class="jsdoc-comment">// store the alpha component after clipping it if necessary
 349   </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">)));
 350
 351   </span><span class="jsdoc-comment">// store the RGB components after clipping them if necessary
 352   </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 353       {
 354         </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">)),
 355         </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">)),
 356         </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">))
 357       };
 358
 359   </span><span class="jsdoc-comment">// initialise the HSV and HSL components to null
 360
 361
 362   /*
 363    * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
 364    * range [0,360). The parameters are:
 365    *
 366    * maximum - the maximum of the RGB component values
 367    * range   - the range of the RGB component values
 368    */
 369
 370
 371 </span><span class="jsdoc-syntax">}
 372 </span><span class="jsdoc-comment">// this does an 'exteds'
 373 </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">, {
 374
 375
 376     </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">)
 377     {
 378       </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">;
 379
 380       </span><span class="jsdoc-comment">// check whether the range is zero
 381       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">== 0){
 382
 383         </span><span class="jsdoc-comment">// set the hue to zero (any hue is acceptable as the Color is grey)
 384         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hue </span><span class="jsdoc-syntax">= 0;
 385
 386       }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 387
 388         </span><span class="jsdoc-comment">// determine which of the components has the highest value and set the hue
 389         </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maximum</span><span class="jsdoc-syntax">){
 390
 391           </span><span class="jsdoc-comment">// red has the highest value
 392           </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">rgb.r</span><span class="jsdoc-syntax">:
 393             </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;
 394             </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; }
 395             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 396
 397           </span><span class="jsdoc-comment">// green has the highest value
 398           </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">rgb.g</span><span class="jsdoc-syntax">:
 399             </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;
 400             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 401
 402           </span><span class="jsdoc-comment">// blue has the highest value
 403           </span><span class="jsdoc-keyword">case </span><span class="jsdoc-var">rgb.b</span><span class="jsdoc-syntax">:
 404             </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;
 405             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 406
 407         }
 408
 409       }
 410
 411       </span><span class="jsdoc-comment">// return the hue
 412       </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">hue</span><span class="jsdoc-syntax">;
 413
 414     },
 415
 416   </span><span class="jsdoc-comment">/* //private Calculates and stores the HSV components of this RGBColor so that they can
 417    * be returned be the getHSV function.
 418    */
 419    </span><span class="jsdoc-var">calculateHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 420     </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">;
 421     </span><span class="jsdoc-comment">// get the maximum and range of the RGB component values
 422     </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">);
 423     </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">);
 424
 425     </span><span class="jsdoc-comment">// store the HSV components
 426     </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
 427         {
 428           </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">),
 429           </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">),
 430           </span><span class="jsdoc-string">'v' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maximum </span><span class="jsdoc-syntax">/ 2.55
 431         };
 432
 433   },
 434
 435   </span><span class="jsdoc-comment">/* //private Calculates and stores the HSL components of this RGBColor so that they can
 436    * be returned be the getHSL function.
 437    */
 438    </span><span class="jsdoc-var">calculateHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 439     </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">;
 440     </span><span class="jsdoc-comment">// get the maximum and range of the RGB component values
 441     </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">);
 442     </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">);
 443
 444     </span><span class="jsdoc-comment">// determine the lightness in the range [0,1]
 445     </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;
 446
 447     </span><span class="jsdoc-comment">// store the HSL components
 448     </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
 449         {
 450           </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">),
 451           </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)),
 452           </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: 100 * </span><span class="jsdoc-var">l
 453         </span><span class="jsdoc-syntax">};
 454
 455   }
 456
 457 });
 458
 459 </span><span class="jsdoc-comment">/**
 460  * @class Roo.lib.HSVColor
 461  * @extends Roo.lib.Color
 462  * Creates a Color specified in the HSV Color space, with an optional alpha
 463  * component. The parameters are:
 464  * @constructor
 465  *
 466  * @param {Number} h - the hue component, wrapped to the range [0,360)
 467  * @param {Number} s - the saturation component, clipped to the range [0,100]
 468  * @param {Number} v - the value component, clipped to the range [0,100]
 469  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
 470  *     optional and defaults to 1
 471  */
 472 </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">){
 473
 474   </span><span class="jsdoc-comment">// store the alpha component after clipping it if necessary
 475   </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">)));
 476
 477   </span><span class="jsdoc-comment">// store the HSV components after clipping or wrapping them if necessary
 478   </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
 479       {
 480         </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,
 481         </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">)),
 482         </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">))
 483       };
 484
 485   </span><span class="jsdoc-comment">// initialise the RGB and HSL components to null
 486   </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 487   </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 488 }
 489
 490 </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">, {
 491   </span><span class="jsdoc-comment">/* Calculates and stores the RGB components of this HSVColor so that they can
 492    * be returned be the getRGB function.
 493    */
 494   </span><span class="jsdoc-var">calculateRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
 495   {
 496     </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">;
 497     </span><span class="jsdoc-comment">// check whether the saturation is zero
 498     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hsv.s </span><span class="jsdoc-syntax">== 0){
 499
 500       </span><span class="jsdoc-comment">// set the Color to the appropriate shade of grey
 501       </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">;
 502       </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">;
 503       </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">;
 504
 505     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 506
 507       </span><span class="jsdoc-comment">// set some temporary values
 508       </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);
 509       </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);
 510       </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">);
 511       </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">));
 512
 513       </span><span class="jsdoc-comment">// set the RGB Color components to their temporary values
 514       </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)){
 515         </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">;
 516         </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">;
 517         </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">;
 518         </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">;
 519         </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">;
 520         </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">;
 521       }
 522
 523     }
 524
 525     </span><span class="jsdoc-comment">// store the RGB components
 526     </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 527         {
 528           </span><span class="jsdoc-string">'r' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">* 2.55,
 529           </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">g </span><span class="jsdoc-syntax">* 2.55,
 530           </span><span class="jsdoc-string">'b' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">* 2.55
 531         };
 532
 533   },
 534
 535   </span><span class="jsdoc-comment">/* Calculates and stores the HSL components of this HSVColor so that they can
 536    * be returned be the getHSL function.
 537    */
 538   </span><span class="jsdoc-var">calculateHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(){
 539
 540     </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">;
 541     </span><span class="jsdoc-comment">// determine the lightness in the range [0,100]
 542     </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;
 543
 544     </span><span class="jsdoc-comment">// store the HSL components
 545     </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
 546         {
 547           </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">hsv.h</span><span class="jsdoc-syntax">,
 548           </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),
 549           </span><span class="jsdoc-string">'l' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">l
 550         </span><span class="jsdoc-syntax">};
 551
 552     </span><span class="jsdoc-comment">// correct a division-by-zero error
 553     </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; }
 554
 555   }
 556
 557
 558 });
 559
 560
 561 </span><span class="jsdoc-comment">/**
 562  * @class Roo.lib.HSLColor
 563  * @extends Roo.lib.Color
 564  *
 565  * @constructor
 566  * Creates a Color specified in the HSL Color space, with an optional alpha
 567  * component. The parameters are:
 568  *
 569  * @param {Number} h - the hue component, wrapped to the range [0,360)
 570  * @param {Number} s - the saturation component, clipped to the range [0,100]
 571  * @param {Number} l - the lightness component, clipped to the range [0,100]
 572  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
 573  *     optional and defaults to 1
 574  */
 575
 576 </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">){
 577
 578   </span><span class="jsdoc-comment">// store the alpha component after clipping it if necessary
 579   </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">)));
 580
 581   </span><span class="jsdoc-comment">// store the HSL components after clipping or wrapping them if necessary
 582   </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
 583       {
 584         </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,
 585         </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">)),
 586         </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">))
 587       };
 588
 589   </span><span class="jsdoc-comment">// initialise the RGB and HSV components to null
 590 </span><span class="jsdoc-syntax">}
 591
 592 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.HSLColor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Color</span><span class="jsdoc-syntax">, {
 593
 594   </span><span class="jsdoc-comment">/* Calculates and stores the RGB components of this HSLColor so that they can
 595    * be returned be the getRGB function.
 596    */
 597   </span><span class="jsdoc-var">calculateRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(){
 598
 599     </span><span class="jsdoc-comment">// check whether the saturation is zero
 600     </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){
 601
 602       </span><span class="jsdoc-comment">// store the RGB components representing the appropriate shade of grey
 603       </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 604           {
 605             </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,
 606             </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,
 607             </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
 608           };
 609
 610     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 611
 612       </span><span class="jsdoc-comment">// set some temporary values
 613       </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
 614             ? </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)
 615             : </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;
 616       </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">;
 617
 618       </span><span class="jsdoc-comment">// initialise the RGB components
 619       </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
 620           {
 621             </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,
 622             </span><span class="jsdoc-string">'g' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">/ 60,
 623             </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
 624           };
 625
 626       </span><span class="jsdoc-comment">// loop over the RGB components
 627       </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">){
 628
 629         </span><span class="jsdoc-comment">// ensure that the property is not inherited from the root object
 630         </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">)){
 631
 632           </span><span class="jsdoc-comment">// set the component to its value in the range [0,100]
 633           </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){
 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">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">];
 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; 3){
 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">p</span><span class="jsdoc-syntax">;
 637           }</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){
 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">+ (</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">]);
 639           }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 640             </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">;
 641           }
 642
 643           </span><span class="jsdoc-comment">// set the component to its value in the range [0,255]
 644           </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;
 645
 646         }
 647
 648       }
 649
 650     }
 651
 652   },
 653
 654   </span><span class="jsdoc-comment">/* Calculates and stores the HSV components of this HSLColor so that they can
 655    * be returned be the getHSL function.
 656    */
 657    </span><span class="jsdoc-var">calculateHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 658
 659     </span><span class="jsdoc-comment">// set a temporary value
 660     </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;
 661
 662     </span><span class="jsdoc-comment">// store the HSV components
 663     </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
 664         {
 665           </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hsl.h</span><span class="jsdoc-syntax">,
 666           </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">),
 667           </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
 668         </span><span class="jsdoc-syntax">};
 669
 670     </span><span class="jsdoc-comment">// correct a division-by-zero error
 671     </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; }
 672
 673   }
 674
 675
 676 });
 677 </span></code></body></html>