← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/runtime/draw2d/ColorDialog.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/runtime/draw2d/ColorDialog.js
 
1
/* This notice must be untouched at all times.
 
2
 
 
3
Open-jACOB Draw2D
 
4
The latest version is available at
 
5
http://www.openjacob.org
 
6
 
 
7
Copyright (c) 2006 Andreas Herz. All rights reserved.
 
8
Created 5. 11. 2006 by Andreas Herz (Web: http://www.freegroup.de )
 
9
 
 
10
LICENSE: LGPL
 
11
 
 
12
This library is free software; you can redistribute it and/or
 
13
modify it under the terms of the GNU Lesser General Public
 
14
License (LGPL) as published by the Free Software Foundation; either
 
15
version 2.1 of the License, or (at your option) any later version.
 
16
 
 
17
This library is distributed in the hope that it will be useful,
 
18
but WITHOUT ANY WARRANTY; without even the implied warranty of
 
19
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 
20
Lesser General Public License for more details.
 
21
 
 
22
You should have received a copy of the GNU Lesser General Public
 
23
License along with this library; if not, write to the Free Software
 
24
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA,
 
25
or see http://www.gnu.org/copyleft/lesser.html
 
26
*/
 
27
 
 
28
/**
 
29
 * 
 
30
 * @version 0.9.14
 
31
 * @author Andreas Herz
 
32
 * @constructor
 
33
 */
 
34
draw2d.ColorDialog=function()
 
35
{
 
36
  /** @private **/
 
37
  this.maxValue={'h':'359','s':'100','v':'100'};
 
38
  /** @private **/
 
39
  this.HSV={0:359,1:100,2:100};
 
40
  /** @private **/
 
41
  this.slideHSV={0:359,1:100,2:100};
 
42
 
 
43
  /** @private **/
 
44
  this.SVHeight=165;
 
45
  /** @private **/
 
46
  this.wSV=162;
 
47
  /** @private **/
 
48
  this.wH=162;
 
49
 
 
50
  draw2d.Dialog.call(this,"Color Chooser");
 
51
 
 
52
  this.loadSV();
 
53
  this.setColor(new  draw2d.Color(255,0,0));
 
54
 
 
55
  this.setDimension(219,244);
 
56
}
 
57
 
 
58
draw2d.ColorDialog.prototype = new draw2d.Dialog;
 
59
  /** @private **/
 
60
draw2d.ColorDialog.prototype.type="ColorDialog";
 
61
 
 
62
 
 
63
/**
 
64
 * @private
 
65
 **/
 
66
draw2d.ColorDialog.prototype.createHTMLElement=function()
 
67
{
 
68
  var oThis = this;
 
69
  var item = draw2d.Dialog.prototype.createHTMLElement.call(this);
 
70
 
 
71
  this.outerDiv = document.createElement("div");
 
72
  this.outerDiv.id="plugin";
 
73
  this.outerDiv.style.top ="15px";
 
74
  this.outerDiv.style.left ="0px";
 
75
  this.outerDiv.style.width="201px";
 
76
  this.outerDiv.style.position="absolute";
 
77
  this.outerDiv.style.padding="9px";
 
78
  this.outerDiv.display="block";
 
79
  this.outerDiv.style.background="#0d0d0d";
 
80
 
 
81
  this.plugHEX = document.createElement("div");
 
82
  this.plugHEX.id = "plugHEX";
 
83
  this.plugHEX.innerHTML="F1FFCC";
 
84
  this.plugHEX.style.color="white";
 
85
  this.plugHEX.style.font="normal 10px verdana";
 
86
  this.outerDiv.appendChild(this.plugHEX);
 
87
 
 
88
 
 
89
  this.SV = document.createElement("div");
 
90
  this.SV.onmousedown=function(event){oThis.mouseDownSV(oThis.SVslide,event);};
 
91
  this.SV.id ="SV";
 
92
  this.SV.style.cursor="crosshair";
 
93
  this.SV.style.background="#FF0000 url(SatVal.png)";
 
94
  this.SV.style.position="absolute";
 
95
  this.SV.style.height="166px";
 
96
  this.SV.style.width="167px";
 
97
  this.SV.style.marginRight="10px";
 
98
  this.SV.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='SatVal.png', sizingMethod='scale')";
 
99
  this.SV.style['float']="left";
 
100
  this.outerDiv.appendChild(this.SV);
 
101
 
 
102
  this.SVslide = document.createElement("div");
 
103
  this.SVslide.onmousedown=function(event){oThis.mouseDownSV(event)};
 
104
  this.SVslide.style.top = "40px";
 
105
  this.SVslide.style.left= "40px";
 
106
  this.SVslide.style.position="absolute";
 
107
  this.SVslide.style.cursor="crosshair";
 
108
  this.SVslide.style.background="url(slide.gif)";
 
109
  this.SVslide.style.height="9px";
 
110
  this.SVslide.style.width="9px";
 
111
  this.SVslide.style.lineHeight="1px";
 
112
  this.outerDiv.appendChild(this.SVslide);
 
113
 
 
114
  this.H = document.createElement("form");
 
115
  this.H.id="H";
 
116
  this.H.onmousedown=function(event){oThis.mouseDownH(event)};
 
117
  this.H.style.border="1px solid #000000";
 
118
  this.H.style.cursor="crosshair";
 
119
  this.H.style.position="absolute";
 
120
  this.H.style.width="19px";
 
121
  this.H.style.top="28px";
 
122
  this.H.style.left="191px";
 
123
  this.outerDiv.appendChild(this.H);
 
124
 
 
125
  this.Hslide = document.createElement("div");
 
126
  this.Hslide.style.top = "-7px";
 
127
  this.Hslide.style.left= "-8px";
 
128
  this.Hslide.style.background= "url(slideHue.gif)";
 
129
  this.Hslide.style.height= "5px";
 
130
  this.Hslide.style.width = "33px";
 
131
  this.Hslide.style.position= "absolute";
 
132
  this.Hslide.style.lineHeight= "1px";
 
133
  this.H.appendChild(this.Hslide);
 
134
 
 
135
  this.Hmodel = document.createElement("div");
 
136
  this.Hmodel.style.height= "1px";
 
137
  this.Hmodel.style.width= "19px";
 
138
  this.Hmodel.style.lineHeight= "1px";
 
139
  this.Hmodel.style.margin= "0px";
 
140
  this.Hmodel.style.padding= "0px";
 
141
  this.Hmodel.style.fontSize= "1px";
 
142
  this.H.appendChild(this.Hmodel);
 
143
 
 
144
  item.appendChild(this.outerDiv);
 
145
 
 
146
  return item;
 
147
}
 
148
 
 
149
/**
 
150
 *
 
151
 **/
 
152
draw2d.ColorDialog.prototype.onOk=function()
 
153
{
 
154
  draw2d.Dialog.prototype.onOk.call(this);
 
155
}
 
156
 
 
157
 
 
158
 
 
159
draw2d.browser=function(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
 
160
 
 
161
/**
 
162
 * @private
 
163
 **/
 
164
draw2d.ColorDialog.prototype.showColor=function(c)
 
165
{
 
166
  this.plugHEX.style.background="#"+c;
 
167
  this.plugHEX.innerHTML=c;
 
168
}
 
169
 
 
170
/**
 
171
 * @private
 
172
 **/
 
173
draw2d.ColorDialog.prototype.getSelectedColor=function()
 
174
{
 
175
  var rgb = this.hex2rgb(this.plugHEX.innerHTML);
 
176
  return new  draw2d.Color(rgb[0],rgb[1],rgb[2]);
 
177
}
 
178
 
 
179
/**
 
180
 * @private
 
181
 **/
 
182
draw2d.ColorDialog.prototype.setColor=function(/*:draw2d.Color*/ color)
 
183
{
 
184
  if(color==null)
 
185
    color = new  draw2d.Color(100,100,100);
 
186
  var hex = this.rgb2hex(Array(color.getRed(),color.getGreen(),color.getBlue()));
 
187
  this.updateH(hex);
 
188
}
 
189
 
 
190
/**
 
191
 * @private
 
192
 **/
 
193
draw2d.ColorDialog.prototype.XY=function(e,v)
 
194
{ 
 
195
  var z=draw2d.browser('msie')?Array(event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop):Array(e.pageX,e.pageY); 
 
196
  return z[v];
 
197
}
 
198
 
 
199
/**
 
200
 * @private
 
201
 **/
 
202
draw2d.ColorDialog.prototype.mkHSV=function(a,b,c) 
 
203
{
 
204
    return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); 
 
205
}
 
206
 
 
207
/**
 
208
 * @private
 
209
 **/
 
210
draw2d.ColorDialog.prototype.ckHSV=function(a,b)
 
211
{
 
212
  if(a>=0 && a<=b)
 
213
    return(a); 
 
214
  else if(a>b) 
 
215
    return(b); 
 
216
  else if(a<0)
 
217
    return('-'+oo);
 
218
}
 
219
 
 
220
/**
 
221
 * @private
 
222
 **/
 
223
draw2d.ColorDialog.prototype.mouseDownH=function(e)
 
224
{
 
225
    this.slideHSV[0]=this.HSV[0];
 
226
    var oThis = this;
 
227
    this.H.onmousemove=function(e){oThis.dragH(e)};
 
228
    this.H.onmouseup=function(e){oThis.H.onmousemove=''; oThis.H.onmouseup='';};
 
229
    this.dragH(e);
 
230
}
 
231
 
 
232
/**
 
233
 * @private
 
234
 **/
 
235
draw2d.ColorDialog.prototype.dragH=function(e)
 
236
{
 
237
    var y=this.XY(e,1)-this.getY()-40;
 
238
    this.Hslide.style.top=(this.ckHSV(y,this.wH)-5)+'px'; 
 
239
    this.slideHSV[0]=this.mkHSV(359,this.wH,this.Hslide.style.top);
 
240
    this.updateSV();
 
241
    this.showColor(this.commit());
 
242
    this.SV.style.backgroundColor='#'+this.hsv2hex(Array(this.HSV[0],100,100));
 
243
}
 
244
 
 
245
/**
 
246
 * @private
 
247
 **/
 
248
draw2d.ColorDialog.prototype.mouseDownSV=function(o,e)
 
249
{
 
250
    this.slideHSV[0]=this.HSV[0];
 
251
    var oThis = this;
 
252
    function reset()
 
253
    {
 
254
       oThis.SV.onmousemove=''; 
 
255
       oThis.SV.onmouseup='';
 
256
       oThis.SVslide.onmousemove=''; 
 
257
       oThis.SVslide.onmouseup=''; 
 
258
    };
 
259
    this.SV.onmousemove=function(e){oThis.dragSV(e)};
 
260
    this.SV.onmouseup=reset;
 
261
    this.SVslide.onmousemove=function(e){oThis.dragSV(e)};
 
262
    this.SVslide.onmouseup=reset;
 
263
 
 
264
    this.dragSV(e);
 
265
}
 
266
 
 
267
/**
 
268
 * @private
 
269
 **/
 
270
draw2d.ColorDialog.prototype.dragSV=function( e)
 
271
{
 
272
    var x=this.XY(e,0)-this.getX()-1;
 
273
    var y=this.XY(e,1)-this.getY()-20;
 
274
    this.SVslide.style.left=this.ckHSV(x,this.wSV)+'px'; 
 
275
    this.SVslide.style.top=this.ckHSV(y,this.wSV)+'px';
 
276
    this.slideHSV[1]=this.mkHSV(100,this.wSV,this.SVslide.style.left); 
 
277
    this.slideHSV[2]=100-this.mkHSV(100,this.wSV,this.SVslide.style.top); 
 
278
    this.updateSV();
 
279
}
 
280
 
 
281
 
 
282
/**
 
283
 * @private
 
284
 **/
 
285
draw2d.ColorDialog.prototype.commit=function()
 
286
{
 
287
  var r='hsv';
 
288
  var z={};
 
289
  var j='';
 
290
  for(var i=0; i<=r.length-1; i++) 
 
291
  {
 
292
    j=r.substr(i,1);
 
293
    z[i]=(j=='h')?this.maxValue[j]-this.mkHSV(this.maxValue[j],this.wH,this.Hslide.style.top):this.HSV[i];
 
294
  }
 
295
  return(this.updateSV(this.hsv2hex(z)));
 
296
}
 
297
 
 
298
 
 
299
/**
 
300
 * @private
 
301
 **/
 
302
draw2d.ColorDialog.prototype.updateSV=function(v) 
 
303
{
 
304
  this.HSV=v?this.hex2hsv(v):Array(this.slideHSV[0],this.slideHSV[1],this.slideHSV[2]);
 
305
  if(!v)
 
306
    v=this.hsv2hex(Array(this.slideHSV[0],this.slideHSV[1],this.slideHSV[2]));
 
307
  this.showColor(v);
 
308
  return v;
 
309
}
 
310
 
 
311
/**
 
312
 * @private
 
313
 **/
 
314
draw2d.ColorDialog.prototype.loadSV=function() 
 
315
{ 
 
316
  var z='';
 
317
  for(var i=this.SVHeight; i>=0; i--)
 
318
    z+="<div style=\"background:#"+this.hsv2hex(Array(Math.round((359/this.SVHeight)*i),100,100))+";\"><br/><\/div>";
 
319
  this.Hmodel.innerHTML=z;
 
320
}
 
321
 
 
322
/**
 
323
 * @private
 
324
 **/
 
325
draw2d.ColorDialog.prototype.updateH=function(v) 
 
326
{ 
 
327
  this.plugHEX.innerHTML=v;
 
328
  this.HSV=this.hex2hsv(v);
 
329
  this.SV.style.backgroundColor='#'+this.hsv2hex(Array(this.HSV[0],100,100)); 
 
330
  this.SVslide.style.top= (parseInt(this.wSV-this.wSV*(this.HSV[1]/100))+20)+'px';
 
331
  this.SVslide.style.left=(parseInt(this.wSV*(this.HSV[1]/100))+5)+'px';
 
332
  this.Hslide.style.top=(parseInt(this.wH*((this.maxValue['h']-this.HSV[0])/this.maxValue['h']))-7)+'px';
 
333
}
 
334
 
 
335
 
 
336
/**
 
337
 * @private
 
338
 **/
 
339
draw2d.ColorDialog.prototype.toHex=function(v) 
 
340
{
 
341
  v=Math.round(Math.min(Math.max(0,v),255));
 
342
  return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16));
 
343
}
 
344
 
 
345
/**
 
346
 * @private
 
347
 **/
 
348
draw2d.ColorDialog.prototype.hex2rgb=function(r) 
 
349
{
 
350
  return(
 
351
         {0:parseInt(r.substr(0,2),16),
 
352
          1:parseInt(r.substr(2,2),16),
 
353
          2:parseInt(r.substr(4,2),16)}
 
354
         );
 
355
}
 
356
 
 
357
/**
 
358
 * @private
 
359
 **/
 
360
draw2d.ColorDialog.prototype.rgb2hex=function(r) 
 
361
{ 
 
362
  return(this.toHex(r[0])+this.toHex(r[1])+this.toHex(r[2])); 
 
363
}
 
364
 
 
365
/**
 
366
 * @private
 
367
 **/
 
368
draw2d.ColorDialog.prototype.hsv2hex=function(h) 
 
369
{ 
 
370
  return(this.rgb2hex(this.hsv2rgb(h))); 
 
371
}
 
372
 
 
373
/**
 
374
 * @private
 
375
 **/
 
376
draw2d.ColorDialog.prototype.hex2hsv=function(v) 
 
377
{
 
378
  return(this.rgb2hsv(this.hex2rgb(v)));
 
379
}
 
380
 
 
381
/**
 
382
 * @private
 
383
 **/
 
384
draw2d.ColorDialog.prototype.rgb2hsv=function(r)
 
385
{
 
386
  var max=Math.max(r[0],r[1],r[2]);
 
387
  var delta=max-Math.min(r[0],r[1],r[2]);
 
388
  var H;
 
389
  var S;
 
390
  var V;
 
391
 
 
392
  if(max!=0) 
 
393
  { 
 
394
    S=Math.round(delta/max*100);
 
395
    if(r[0]==max)
 
396
      H=(r[1]-r[2])/delta;
 
397
    else if(r[1]==max)
 
398
      H=2+(r[2]-r[0])/delta;
 
399
    else if(r[2]==max)
 
400
      H=4+(r[0]-r[1])/delta;
 
401
    var H=Math.min(Math.round(H*60),360);
 
402
    if(H<0) 
 
403
      H+=360;
 
404
   }
 
405
   return({0:H?H:0,1:S?S:0,2:Math.round((max/255)*100)});
 
406
}
 
407
 
 
408
/**
 
409
 * @private
 
410
 **/
 
411
draw2d.ColorDialog.prototype.hsv2rgb=function(r) 
 
412
{
 
413
  var R;
 
414
  var B;
 
415
  var G;
 
416
  var S=r[1]/100;
 
417
  var V=r[2]/100;
 
418
  var H=r[0]/360;
 
419
  if(S>0) 
 
420
  { 
 
421
    if(H>=1) 
 
422
      H=0;
 
423
 
 
424
    H=6*H; 
 
425
    F=H-Math.floor(H);
 
426
    A=Math.round(255*V*(1.0-S));
 
427
    B=Math.round(255*V*(1.0-(S*F)));
 
428
    C=Math.round(255*V*(1.0-(S*(1.0-F))));
 
429
    V=Math.round(255*V); 
 
430
 
 
431
    switch(Math.floor(H)) 
 
432
    {
 
433
      case 0: R=V; G=C; B=A; break;
 
434
      case 1: R=B; G=V; B=A; break;
 
435
      case 2: R=A; G=V; B=C; break;
 
436
      case 3: R=A; G=B; B=V; break;
 
437
      case 4: R=C; G=A; B=V; break;
 
438
      case 5: R=V; G=A; B=B; break;
 
439
    }
 
440
    return({0:R?R:0,1:G?G:0,2:B?B:0});
 
441
  }
 
442
  else 
 
443
    return({0:(V=Math.round(V*255)),1:V,2:V});
 
444
}
 
 
b'\\ No newline at end of file'