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">
3 <span class="jsdoc-comment">/**
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].
18 * Functions for Color handling and processing.
20 * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
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.
27 * For more free and public domain JavaScript code by the same author, visit:
28 * http://www.safalra.com/web-design/javascript/
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">() { }
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">, {
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">,
40 </span><span class="jsdoc-comment">/**
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].
46 </span><span class="jsdoc-var">getIntegerRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">};
61 </span><span class="jsdoc-comment">/**
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].
67 </span><span class="jsdoc-var">getPercentageRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">};
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.
88 </span><span class="jsdoc-var">getCSSHexadecimalRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">();
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);
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">);
107 </span><span class="jsdoc-comment">/**
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].
113 </span><span class="jsdoc-var">getCSSIntegerRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">;
123 </span><span class="jsdoc-comment">/**
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].
129 </span><span class="jsdoc-var">getCSSIntegerRGBA </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">;
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].
145 </span><span class="jsdoc-var">getCSSPercentageRGB </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">;
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].
161 </span><span class="jsdoc-var">getCSSPercentageRGBA </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">;
171 </span><span class="jsdoc-comment">/**
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].
177 </span><span class="jsdoc-var">getCSSHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">;
187 </span><span class="jsdoc-comment">/**
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].
193 </span><span class="jsdoc-var">getCSSHSLA </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">();
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">;
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:
207 * @param {DomElement} node - the node whose Color should be set
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">){
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">();
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
221 * @param {DomElement} node - the node whose background Color should be set
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">){
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">();
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">()
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">);
236 </span><span class="jsdoc-var">toHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">);
244 </span><span class="jsdoc-var">toHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">);
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">)
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">);
264 </span><span class="jsdoc-comment">/**
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
270 </span><span class="jsdoc-var">getRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">};
282 </span><span class="jsdoc-comment">/**
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].
288 </span><span class="jsdoc-var">getHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">();
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">};
306 </span><span class="jsdoc-comment">/**
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].
312 </span><span class="jsdoc-var">getHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">(); }
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">};
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:
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
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">){
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">)));
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">=
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">))
359 </span><span class="jsdoc-comment">// initialise the HSV and HSL components to null
363 * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
364 * range [0,360). The parameters are:
366 * maximum - the maximum of the RGB component values
367 * range - the range of the RGB component values
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">, {
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">)
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">;
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){
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;
386 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
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">){
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">< 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">;
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">;
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">;
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">;
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.
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">);
425 </span><span class="jsdoc-comment">// store the HSV components
426 </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
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
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.
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">);
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;
447 </span><span class="jsdoc-comment">// store the HSL components
448 </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
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">< 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">};
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:
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
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">){
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">)));
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">=
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">))
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">;
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.
494 </span><span class="jsdoc-var">calculateRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
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){
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">;
505 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
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">));
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">;
525 </span><span class="jsdoc-comment">// store the RGB components
526 </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
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
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.
538 </span><span class="jsdoc-var">calculateHSL </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(){
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;
544 </span><span class="jsdoc-comment">// store the HSL components
545 </span><span class="jsdoc-var">this.hsl </span><span class="jsdoc-syntax">=
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">< 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">};
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; }
561 </span><span class="jsdoc-comment">/**
562 * @class Roo.lib.HSLColor
563 * @extends Roo.lib.Color
566 * Creates a Color specified in the HSL Color space, with an optional alpha
567 * component. The parameters are:
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
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">){
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">)));
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">=
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">))
589 </span><span class="jsdoc-comment">// initialise the RGB and HSV components to null
590 </span><span class="jsdoc-syntax">}
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">, {
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.
597 </span><span class="jsdoc-var">calculateRGB</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(){
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){
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">=
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
610 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
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">< 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">;
618 </span><span class="jsdoc-comment">// initialise the RGB components
619 </span><span class="jsdoc-var">this.rgb </span><span class="jsdoc-syntax">=
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
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">){
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">)){
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">] < 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">] < 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">] < 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">;
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;
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.
657 </span><span class="jsdoc-var">calculateHSV </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
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">< 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;
662 </span><span class="jsdoc-comment">// store the HSV components
663 </span><span class="jsdoc-var">this.hsv </span><span class="jsdoc-syntax">=
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">};
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; }
677 </span></code></body></html>