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

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