Mercurial > laserkard

     1 /*

     2  * Ext JS Library 2.1

     3  * Copyright(c) 2006-2008, Ext JS, LLC.

     4  * licensing@extjs.com

     5  * 

     6  * http://extjs.com/license

     7  */ 

     8 Ext.BLANK_IMAGE_URL = 'theme/images/default/s.gif';

     9 var mefillColor = {r:255,g:0,b:0,hex:'#ff0000',visible:'visible',color:'#ff0000',opacity:'1',gradient:'no'};

    10 var mestrokeColor = {r:0,g:0,b:255,hex:'#000000',visible:'visible',color:'#ff0000',width:'1',opacity:'1',gradient:'no'};

    11  

    12 var fillhex="#ff0000";  

    13 var squarecont=0;

    14 var squarerows=6;

    15 var squarecols=6;  

    16 var squarelist=new Array(squarerows);  

    17 var filldraw=true;

    18 var strokedraw=true;

    19 var mode_render_fill=2;

    20 var mode_render_stroke=2;

    21 

    22 var prevselect_fill='no-fill-gradient';

    23 var prevselect_stroke='no-stroke-gradient'; 

    24 

    25 for (i = 0; i < squarerows; i++)

    26  {

    27      squarelist[i]=new Array(squarecols);

    28  }

    29 

    30 function rgb2hex(r,g,b){                

    31  var rh= toHex(r);

    32  var gh= toHex(g);

    33  var bh= toHex(b);  

    34  return '#'+rh + '' + gh + '' + bh;

    35 // document.getElementById('inputfillhex').value=fillhex;

    36  //parent.c.editCommand('mefillcolor', color);

    37 }

    38  

    39 function hex2rgb(hex)

    40    {

    41      var regexp = new RegExp('^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$');

    42      var match = hex.toLowerCase().match(regexp);

    43   

    44       if (match)

    45       {

    46           var rgb = new Array(parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16));

    47           return(rgb);

    48       }

    49       else

    50       {

    51           var rgb = new Array(0,0,0);

    52           return(rgb);

    53       }

    54   }

    55   

    56 function toHex(color){

    57 	color=parseInt(color).toString(16);

    58 	return color.length<2?"0"+color:color;

    59 } 

    60 

    61 function squareDump(r,g,b,container) {  

    62  squareArray(r,g,b);

    63  for (i = 0; i < squarerows; i++)

    64    {

    65   for (j = 0; j < squarecols; j++) 

    66    { 

    67         document.getElementById(container+i+'_'+j).style.backgroundColor = squarelist[i][j];

    68    } 

    69    squarecont++;            

    70  }              

    71  squarecont=0;

    72 } 

    73 

    74 

    75 

    76 function squareArray(r,g,b) {     

    77  

    78   var l00_05=ccnp(r,g,b,0,0,0,(squarerows+0));

    79  var color00_05=l00_05.split("_"); 

    80  

    81  var l05_55=ccnp(255,255,255,255-r,255-g,255-b,(squarerows+0));

    82  var color05_55=l05_55.split("_"); 

    83 

    84  var cols0, cols5, rowy;

    85  var cad='';

    86  for(var i=0;i<squarerows;i++){

    87         cols0=color00_05[i].split(",");

    88         cols5=color05_55[i].split(",");

    89         //for(var j=0;j<squarecols;j++){

    90         rowy=ccnprmtrc(parseInt(cols0[0]),parseInt(cols0[1]),parseInt(cols0[2]),parseInt(cols5[0]),parseInt(cols5[1]),parseInt(cols5[2]),squarecols+0);

    91         squarelist[i]=rowy.split("_");

    92         cad+=squarelist[i].join("  ");

    93         //}        

    94  }

    95 

    96 //alert(l00_60);  

    97 //document.getElementById('texta').value=cad;

    98 }

    99 function ccnp(a,b,c,d,e,f,nPartes){

   100 	var q=0

   101 	 var crdnds='';

   102 	 var h = 1 / (nPartes);

   103 	 var k = (1 - q)* a +  q * d;

   104 	 var l = (1 - q)* b +  q * e;

   105 	 var m = (1 - q)* c + q * f;

   106 	// crdnds += k +" "+ l +" "+ m +", "+ R;

   107       for (var i=0; i<=(nPartes) ;i++)

   108        { 

   109 	 k = (1 - q)* a +  q * d;

   110 	 l = (1 - q)* b +  q * e;

   111 	 m = (1 - q)* c +  q * f;

   112 	q = q + h;

   113 	if(i==(nPartes)){

   114 	   crdnds+=''+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +"" ;

   115 	 }else{

   116   	   crdnds+=''+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +"_";

   117 

   118 	 }   

   119        }  

   120 	return  crdnds;

   121 }

   122 function ccnprmtrc(a,b,c,d,e,f,nPartes){

   123 	var q=0

   124 	 var crdnds='';

   125 	 var h = 1 / (nPartes);

   126 	 var k = (1 - q)* a +  q * d;

   127 	 var l = (1 - q)* b +  q * e;

   128 	 var m = (1 - q)* c + q * f;

   129 	// crdnds += k +" "+ l +" "+ m +", "+ R;

   130       for (var i=0; i<=(nPartes) ;i++)

   131        { 

   132 	 k = (1 - q)* a +  q * d;

   133 	 l = (1 - q)* b +  q * e;

   134 	 m = (1 - q)* c +  q * f;

   135 	q = q + h;

   136 	if(i==(nPartes)){

   137 	   crdnds+='rgb('+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +")" ;

   138 	 }else{

   139   	   crdnds+='rgb('+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +")_";

   140 

   141 	 }   

   142        }  

   143 	return  crdnds;

   144 } 

   145 

   146 

   147 /**

   148  * Converts an HSL color value to RGB. Conversion formula adapted from

   149  * http://en.wikipedia.org/wiki/HSL_color_space. Assumes h, s, and l are

   150  * contained in the set [0, 1] and returns r, g, and b in the set [0, 255].

   151  *

   152  * @param   {Number}    h       The hue

   153  * @param   {Number}    s       The saturation

   154  * @param   {Number}    l       The lightness

   155  * @return  {Array}             The RGB representation

   156  */

   157 var hslToRgb = function(h, s, l){

   158     var r, g, b;

   159 

   160     if(s == 0){

   161         r = g = b = l; // achromatic

   162     }else{

   163         function hue2rgb(p, q, t){

   164             if(t < 0) t += 1;

   165             if(t > 1) t -= 1;

   166             if(t < 1/6) return p + (q - p) * 6 * t;

   167             if(t < 1/2) return q;

   168             if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;

   169             return p;

   170         };

   171 

   172         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;

   173         var p = 2 * l - q;

   174         r = hue2rgb(p, q, h + 1/3);

   175         g = hue2rgb(p, q, h);

   176         b = hue2rgb(p, q, h - 1/3);

   177     }

   178 

   179     return [parseInt(r * 255), parseInt(g * 255), parseInt(b * 255)];

   180 };  

   181 /**

   182  * Converts an RGB color value to HSL. Conversion formula adapted from

   183  * http://en.wikipedia.org/wiki/HSL_color_space. Assumes r, g, and b are

   184  * contained in the set [0, 255] and returns h, s, and l in the set [0, 1].

   185  *

   186  * @param   {Number}    r       The red color value

   187  * @param   {Number}    g       The green color value

   188  * @param   {Number}    b       The blue color value

   189  * @return  {Array}             The HSL representation

   190  */

   191 var rgbToHsl = function(r, g, b){

   192     r /= 255, g /= 255, b /= 255;

   193     var max = Math.max(r, g, b), min = Math.min(r, g, b);

   194     var h, s, l = (max + min) / 2;

   195 

   196     if(max == min){

   197         h = s = 0; // achromatic

   198     }else{

   199         var d = max - min;

   200         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

   201         switch(max){

   202             case r: h = (g - b) / d + (g < b ? 6 : 0); break;

   203             case g: h = (b - r) / d + 2; break;

   204             case b: h = (r - g) / d + 4; break;

   205         }

   206         h /= 6;

   207     }

   208 

   209     return [h, s, l];

   210 };

   211 function selectSquare(x,y,container){   

   212    movecolors=0;

   213   //$("#square"+x+"_"+y).css("border", "1px solid #000");

   214    //  $("#square"+x+"_"+y).mouseover(function(){

   215       

   216    // }).mouseout(function(){

   217      //  $("#square"+x+"_"+y).css("border", "0px solid #000");

   218    // });  

   219    var cadcolor=document.getElementById('square_'+container+(x)+'_'+y).style.backgroundColor

   220    //document.getElementById('texta').value=cadcolor; 

   221    var treecolors=GetString(cadcolor, '(', ')');

   222    

   223    //OPCTION? 

   224    var rgb=treecolors.split(', '); 

   225    //squareDump(rgb[0],rgb[1],rgb[2],'square_'+container);

   226    if(container=='stroke')

   227     {

   228         Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});

   229         //--document.forms.formstrokedata.mestrokecolor.value=rgb[0]+','+rgb[1]+','+rgb[2];

   230         mestrokeColor.r=rgb[0]; 

   231         mestrokeColor.g=rgb[1]; 

   232         mestrokeColor.b=rgb[2];

   233         mestrokeColor.hex=rgb2hex(rgb[0],rgb[1],rgb[2]);

   234         c.editCommand('linecolor',mestrokeColor.hex);

   235     }

   236      else

   237     {

   238          //--document.forms.formfilldata.mefillcolor.value=rgb[0]+','+rgb[1]+','+rgb[2];

   239          mefillColor.r=rgb[0]; mefillColor.g=rgb[1];mefillColor.b=rgb[2];

   240          mefillColor.hex=rgb2hex(rgb[0],rgb[1],rgb[2]);

   241          c.editCommand('fillcolor',mefillColor.hex);

   242 

   243     }

   244    Ext.get('opacity-slider-'+container).applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});

   245    Ext.get(container+'-square').applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});

   246    

   247     //document.getElementById('texta').value=rgb[0]+' '+rgb[1]+' '+rgb[2]; 

   248  /*   if(actualEdit ==1){

   249       fillMemory();    

   250     }else{

   251      strokeMemory();   

   252     }

   253         $('.slider1').SliderSetValues([[Math.round(rgb[0]*45/255),0]]);  

   254         $('.slider2').SliderSetValues([[Math.round(rgb[1]*45/255),0]]);

   255         $('.slider3').SliderSetValues([[Math.round(rgb[2]*45/255),0]]);  //-(mefillColor.b*45/255)

   256  */

   257      

   258 

   259 } 

   260 function setbe(num,id)

   261  { 

   262   if(num == 1)

   263    { 

   264      if(filldraw==true)

   265       {

   266        

   267         Ext.get(id).dom.src ='img/theme/images/no.gif';  

   268         filldraw=false;  

   269         //--document.forms.formfilldata.fillvisible.value='hidden';

   270          mefillColor.visible='hidden';

   271          c.editCommand('fillcolor','none');

   272        // $('#tape').show("slow"); 

   273         

   274       }

   275        else 

   276       {

   277         Ext.get(id).dom.src ='img/theme/images/ok.gif';   

   278         filldraw=true; 

   279         //--document.forms.formfilldata.fillvisible.value='visible';

   280         mefillColor.visible='visible';

   281          c.editCommand('fillcolor',mefillColor.hex);

   282        // $('#tape').hide("slow"); 

   283       }

   284    }

   285 

   286   if( num== 2)  // stroke

   287    {

   288      if(strokedraw==true)

   289       {

   290         Ext.get(id).dom.src ='img/theme/images/no.gif';     

   291         strokedraw=false; 

   292         //--document.forms.formstrokedata.strokevisible.value='hidden';

   293         mestrokeColor.visible='hidden'; 

   294         c.editCommand('linecolor','none');

   295         //$('#tape').show("slow"); 

   296       }

   297        else 

   298       {

   299         Ext.get(id).dom.src ='img/theme/images/ok.gif';   

   300         strokedraw=true; 

   301         //--document.forms.formstrokedata.strokevisible.value='visible'; 

   302         mestrokeColor.visible='visible';          

   303         c.editCommand('linecolor',mestrokeColor.hex);

   304         //$('#tape').hide("slow"); 

   305       }

   306    }

   307  }                

   308  

   309 ///////////

   310 

   311 function onColorChange(){

   312 c.lineColor =mestrokeColor.hex;

   313 c.fillColor = mefillColor.hex;

   314 c.lineWidth =mestrokeColor.width;

   315 c.lineOpac = mestrokeColor.opacity;

   316 c.fillOpac = mefillColor.opacity;

   317 if(mefillColor.visible=='hidden')

   318 {

   319 c.fillColor = 'none';

   320 }

   321 if(mestrokeColor.visible=='hidden')

   322 {

   323 c.lineColor = 'none';

   324 }

   325 return;

   326 }

   327  

   328 ///////////

   329 

   330 function setProperties(){   

   331    

   332    Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+mefillColor.r+','+mefillColor.g+','+mefillColor.b+')'});

   333    Ext.get('fill-square').applyStyles({'background-color':'rgb('+mefillColor.r+','+mefillColor.g+','+mefillColor.b+')'});

   334    squareDump(mefillColor.r,mefillColor.g,mefillColor.b,'square_fill'); 

   335    

   336    Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});

   337    Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});

   338    Ext.get('stroke-square').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});

   339    squareDump(mestrokeColor.r,mestrokeColor.g,mestrokeColor.b,'square_stroke');  

   340 

   341 }                      

   342 //////////

   343 

   344 

   345 function GetString(source, start, end){

   346 var st = source.indexOf(start) + start.length;

   347 var en = source.indexOf(end, start);

   348  return source.substring(st, en);//trimAll(source.substring(st, en));

   349 }

   350 

   351 

   352 

   353 

   354 var basicColors=new Array(" ",

   355 "ff0000","ff8800","ffcc00",

   356 "ffff00","ccff00","88ff00","00ff00","00ff88","00ffcc","00ffff",

   357  "00ccff","0088ff","0000ff","8800ff","cc00ff","ff00ff","ff00cc","ff0088"

   358 ); 

   359 

   360 var str=''

   361 for(var a=1;a<basicColors.length;a++){

   362  str+='<span id="s'+a+'" style="background-color:'+basicColors[a]+'; width:2px;font-size:0.95em">.</span>';

   363 } 

   364 var str1=''

   365 for(var a=basicColors.length;a>0;a--){

   366  str1+='<span id="s'+a+'" style="background-color:'+basicColors[a]+'; width:2px;font-size:8px">&nbsp;</span>';

   367 } 

   368 

   369 

   370   var str2='';

   371   var contx=0;

   372   var conty=0;

   373   var unitx=8;  

   374   var unity=8;

   375   var widthsq='width: '+unitx+'px;';

   376   for (i = 0; i < squarerows; i++) 

   377    { 

   378     contx=0;

   379     for (j = 0; j < squarecols; j++) 

   380      { 

   381         str2+='<div class="colorFillSquare" id="square_fill'+i+'_'+j+'" style="'+widthsq+' left:'+contx+'px; top:'+conty+'px;" onmouseover="this.style.borderWidth=\'1px\'; this.style.zIndex=100" onmouseout="this.style.borderWidth=\'0px\';this.style.zIndex=0" onclick="selectSquare('+i+','+j+',\'fill\')"></div>';

   382         contx+=unitx;

   383      } 

   384      conty+=unity;

   385    } 

   386 

   387  

   388   var str3='';

   389   var contx=0;

   390   var conty=0;

   391   var unitx=8;  

   392   var unity=8;

   393   var widthsq='width: '+unitx+'px;';

   394   for (i = 0; i < squarerows; i++) 

   395    { 

   396     contx=0;

   397     for (j = 0; j < squarecols; j++) 

   398      { 

   399         str3+='<div class="colorStrokeSquare" id="square_stroke'+i+'_'+j+'" style="'+widthsq+' left:'+contx+'px; top:'+conty+'px;" onmouseover="this.style.borderWidth=\'1px\'; this.style.zIndex=100" onmouseout="this.style.borderWidth=\'0px\';this.style.zIndex=0" onclick="selectSquare('+i+','+j+',\'stroke\')"></div>';

   400         contx+=unitx;

   401      } 

   402      conty+=unity;

   403    } 

   404 

   405 ///////////////////// 

   406 

   407    var str4='';

   408        str4+='<span id="linear-fill-gradient" class="toolboxItem" title="Linear gradient" onmouseout="select(this,0,0)" onmouseover="select(this,1,0)" onclick="select(this,2,0)"><img  src="theme/images/gradient_linear.gif"></span>&nbsp;&nbsp;';

   409        str4+='<span id="radial-fill-gradient" class="toolboxItem" title="Radial gradient" onmouseout="select(this,0,1)" onmouseover="select(this,1,1)" onclick="select(this,2,1)"><img src="theme/images/gradient_radial.gif"></span>&nbsp;&nbsp;';

   410        str4+='<span id="no-fill-gradient" class="toolboxItem" title="No gradient" onmouseout="select(this,0,2)" onmouseover="select(this,1,2)" onclick="select(this,2,2)"><img src="theme/images/gradient_no.gif"></span>';

   411 

   412 /////////////////////

   413 

   414    var str5='';

   415        str5+='<span id="linear-stroke-gradient" class="toolboxItem" title="Linear gradient" onmouseout="select(this,0,0)" onmouseover="select(this,1,0)" onclick="select(this,2,0)"><img  src="theme/images/gradient_linear.gif"></span>&nbsp;&nbsp;';

   416        str5+='<span id="radial-stroke-gradient" class="toolboxItem" title="Radial gradient" onmouseout="select(this,0,1)" onmouseover="select(this,1,1)" onclick="select(this,2,1)"><img src="theme/images/gradient_radial.gif"></span>&nbsp;&nbsp;';

   417        str5+='<span id="no-stroke-gradient" class="toolboxItem" title="No gradient" onmouseout="select(this,0,2)" onmouseover="select(this,1,2)" onclick="select(this,2,2)"><img src="theme/images/gradient_no.gif"></span>';

   418 

   419 /////////////////////

   420 

   421  var str6='';   //<form name="formfilldata">

   422  str6+='<input type="text" class="field" name="fillvisible" title="Fill visible" value="visible"  size="2">';

   423  str6+='<input type="text" class="field" name="fillcolor" title="Fill color"value="255,0,0" size="2">';  

   424  str6+='<input type="text" class="field" name="fillopacity" title="Fill opacity" value="100" size="2">';

   425  str6+='<input type="text" class="field" name="fillgradient" title="Fill gradient" value="no" size="2">';

   426   str6+='';

   427 

   428  var str7=''; // <form name="formstrokedata">

   429  str7+='<input type="text" class="field" title="Stroke visible" name="strokevisible" value="visible"  size="2">';

   430  str7+='<input type="text" class="field" title="Stroke color" name="strokecolor" value="0,0,0" size="2">';  

   431   str7+='<input type="text" class="field" title="Stroke width" name="strokewidth" value="1" size="2">';

   432  str7+='<input type="text" class="field" title="Stroke opacity" name="strokeopacity" value="100" size="2">';

   433    str7+='<input type="text" class="field" title="Stroke gradienr" name="strokegradient" value="no" size="2">';

   434 

   435   str7+='';

   436 

   437 

   438 //ONREADY

   439 

   440 Ext.onReady(function() {

   441 

   442       

   443    //  Ext.get("mefillColor").dom.innerHTML=(str);

   444    //   Ext.get("mestrokeColor").dom.innerHTML=(str1); 

   445   

   446 

   447 

   448     

   449    Ext.get("fillContainer").dom.innerHTML=(str2);      

   450    Ext.get("strokeContainer").dom.innerHTML=(str3); 

   451    //Ext.get("toolbox_fill").dom.innerHTML=(str4);

   452    //Ext.get("toolbox_stroke").dom.innerHTML=(str5); 

   453   // Ext.get("divformfill").dom.innerHTML=(str6); 

   454    //Ext.get("divformstroke").dom.innerHTML=(str7); 

   455 

   456    

   457    Ext.get('fill-square').applyStyles({'background-color':'rgb(255,0,0)'});

   458    Ext.get('stroke-square').applyStyles({'background-color':'rgb(0,0,0)'});

   459   //Ext.get('no-stroke-gradient').applyStyles({'background-position':'0 0'});  

   460   //Ext.get('no-fill-gradient').applyStyles({'background-position':'0 0'});

   461   

   462          var color=hslToRgb(0, 1, 0.5); 

   463          squareDump(color[0],color[1],color[2],'square_fill');  

   464  

   465         var color=hslToRgb(0, 0, 0); 

   466         squareDump(color[0],color[1],color[2],'square_stroke');  

   467          

   468      //console.log('The windows has been loaded','fill-square' );      

   469      new Ext.Slider({

   470         renderTo: 'slider-fill',

   471         width: 62, 

   472         height: 5,

   473         minValue: -1,

   474         maxValue: 360, 

   475         value: 10,

   476         plugins: new Ext.ux.SliderFillColor()

   477     });

   478        new Ext.Slider({

   479         renderTo: 'opacity-slider-fill',

   480         width: 55,

   481         minValue: 0,

   482         maxValue: 100,

   483         value: 100,

   484         plugins: new Ext.ux.SliderOpacityFill()

   485     });     

   486         

   487         new Ext.Slider({

   488         renderTo: 'slider-stroke',

   489         width: 62,

   490         minValue: -1,

   491         maxValue: 360,

   492         value: -1,

   493         plugins: new Ext.ux.SliderStrokeColor()

   494     });   

   495    

   496       new Ext.Slider({

   497         renderTo: 'opacity-slider-stroke',

   498         width: 57,

   499         minValue: 0,

   500         maxValue: 100,

   501         value: 100, 

   502         plugins: new Ext.ux.SliderOpacityStroke()

   503     });  

   504       new Ext.Slider({

   505         renderTo: 'width-slider-stroke',

   506         width: 57,

   507         minValue: 0,

   508         maxValue: 50, 

   509         value: 1,

   510         plugins: new Ext.ux.SliderWidth()

   511     }); 

   512 

   513    

   514 }); 

   515 

   516 //  end ONREADY

   517 

   518 

   519 

   520 

   521 

   522 Ext.ux.SliderFillColor = Ext.extend(Ext.Tip, {

   523     minWidth: 10,

   524     offsets : [0, -10],

   525     init : function(slider){

   526         slider.on('dragstart', this.onSlide, this);

   527         slider.on('drag', this.onSlide, this);

   528         slider.on('dragend', this.hide, this);

   529         slider.on('destroy', this.destroy, this);

   530     },

   531 

   532     onSlide : function(slider){

   533         //this.show();

   534         //this.doAutoWidth();

   535         //this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 

   536          if(this.getText(slider)<0 || this.getText(slider)>359)

   537           {  

   538             var color=new Array();  

   539             color[0]='0';

   540             color[1]='0';

   541             color[2]='0'; 

   542 

   543             if(this.getText(slider)>359)

   544              { 

   545  

   546               color[0]='245';

   547               color[1]='245';

   548               color[2]='245'; 

   549              }  

   550             Ext.get('fill-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   551             Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   552       

   553           }

   554            else

   555           {  

   556               var color=hslToRgb((this.getText(slider)/359), 1, 0.5); 

   557              Ext.get('fill-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   558              Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   559              //var color=hslToRgb((this.getText(slider)/359), 1, 0.5);       

   560           }

   561        

   562          squareDump(color[0],color[1],color[2],'square_fill'); 

   563          //Ext.get("fillcolor").dom.innerHTML=(color[0]+','+color[1]+','+color[2]);

   564          //--document.forms.formfilldata.fillcolor.value=color[0]+','+color[1]+','+color[2];

   565          mefillColor.r=color[0]; mefillColor.g=color[1]; mefillColor.b=color[2];

   566          mefillColor.hex=rgb2hex(color[0],color[1],color[2]);

   567          c.editCommand('fillcolor',mefillColor.hex);

   568 

   569          //Ext.get("squareFill0_0").applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'}); 

   570        // Ext.get("squareFill0_5").applyStyles({'background-color':'rgb(255,255,255)'});

   571         //Ext.get("squareFill5_5").applyStyles({'background-color':'rgb('+Math.abs(color[0]-255)+','+Math.abs(color[1]-255)+','+Math.abs(color[2]-255)+')'});

   572           //      Ext.get("squareFill5_0").applyStyles({'background-color':'rgb(0,0,0)'});

   573         //Ext.get("text").dom.innerHTML=color[0];

   574         

   575     },

   576 

   577     getText : function(slider){ 

   578        return slider.getValue();

   579     }

   580 });

   581 

   582 

   583 

   584  

   585 Ext.ux.SliderStrokeColor = Ext.extend(Ext.Tip, {

   586     minWidth: 10,

   587     offsets : [0, -10],

   588     init : function(slider){

   589         slider.on('dragstart', this.onSlide, this);

   590         slider.on('drag', this.onSlide, this);

   591         slider.on('dragend', this.hide, this);

   592         slider.on('destroy', this.destroy, this);

   593     },

   594 

   595     onSlide : function(slider){

   596         //this.show();

   597         //this.doAutoWidth();

   598         //this.el.alignTo(slider.thumb, 'b-t?', this.offsets);

   599         if(this.getText(slider)<0 || this.getText(slider)>359)

   600           {  

   601             var color=new Array();  

   602             color[0]='0';

   603             color[1]='0';

   604             color[2]='0'; 

   605 

   606             if(this.getText(slider)>359)

   607              { 

   608  

   609               color[0]='245';

   610               color[1]='245';

   611               color[2]='245'; 

   612              }  

   613             Ext.get('stroke-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   614             Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   615              Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   616 

   617           }

   618            else

   619           { 

   620               var color=hslToRgb((this.getText(slider)/359), 1, 0.5); 

   621              Ext.get('stroke-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   622              Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   623              Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});

   624 

   625              /*Ext.get('stroke-square').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});

   626              Ext.get('opacity-slider-stroke').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});

   627              var color=hslToRgb((this.getText(slider)/359), 1, 0.5);

   628              Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});

   629             */

   630           }

   631    

   632         

   633          

   634         //Ext.get('stroke-square').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});

   635         //Ext.get('opacity-slider-stroke').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});

   636 

   637         //var color=hslToRgb((this.getText(slider)/359), 1, 0.5); 

   638         squareDump(color[0],color[1],color[2],'square_stroke'); 

   639         //--document.forms.formstrokedata.strokecolor.value=color[0]+','+color[1]+','+color[2];

   640         mestrokeColor.r=color[0]; mestrokeColor.g=color[1]; mestrokeColor.b=color[2];

   641         mestrokeColor.hex=rgb2hex(color[0],color[1],color[2]);

   642         c.editCommand('linecolor',mestrokeColor.hex);

   643         // this.body.update(''+this.getText(slider));

   644 

   645     },

   646 

   647     getText : function(slider){ 

   648        return slider.getValue();

   649     }

   650   }); 

   651 

   652 

   653 

   654   Ext.ux.SliderOpacityFill = Ext.extend(Ext.Tip, {

   655     minWidth: 10,

   656     offsets : [0, -10],

   657     init : function(slider){

   658         slider.on('dragstart', this.onSlide, this);

   659         slider.on('drag', this.onSlide, this);

   660         slider.on('dragend', this.hide, this);

   661         slider.on('destroy', this.destroy, this);

   662     },

   663 

   664     onSlide : function(slider){

   665         this.show();

   666         this.body.update(''+this.getText(slider)+'%');

   667         this.doAutoWidth();

   668         this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 

   669         changeOpacity(this.getText(slider)/100, 'opacity-slider-fill');

   670         //--document.forms.formfilldata.fillopacity.value=this.getText(slider);

   671         mefillColor.opacity=this.getText(slider)/100;

   672         c.editCommand('fillopacity',mefillColor.opacity);

   673     },

   674 

   675     getText : function(slider){

   676         return slider.getValue();

   677     }

   678   });                                      

   679   Ext.ux.SliderOpacityStroke = Ext.extend(Ext.Tip, {

   680     minWidth: 10,

   681     offsets : [0, -10],

   682     init : function(slider){

   683         slider.on('dragstart', this.onSlide, this);

   684         slider.on('drag', this.onSlide, this);

   685         slider.on('dragend', this.hide, this);

   686         slider.on('destroy', this.destroy, this);

   687     },

   688 

   689     onSlide : function(slider){

   690         this.show();

   691         this.body.update(''+this.getText(slider)+'%');

   692         this.doAutoWidth();

   693         this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 

   694         changeOpacity(this.getText(slider)/100, 'opacity-slider-stroke');

   695         //--document.forms.formstrokedata.strokeopacity.value=this.getText(slider);

   696         mestrokeColor.opacity=this.getText(slider)/100; 

   697         c.editCommand('lineopacity',mestrokeColor.opacity);

   698     },

   699 

   700     getText : function(slider){

   701         return slider.getValue();

   702     }

   703   }); 

   704 

   705   Ext.ux.SliderWidth = Ext.extend(Ext.Tip, {

   706     minWidth: 10,

   707     offsets : [0, -10],

   708     init : function(slider){

   709         slider.on('dragstart', this.onSlide, this);

   710         slider.on('drag', this.onSlide, this);

   711         slider.on('dragend', this.hide, this);

   712         slider.on('destroy', this.destroy, this);

   713     },

   714 

   715     onSlide : function(slider){

   716         this.show();

   717         this.body.update(''+this.getText(slider)+'px');

   718         this.doAutoWidth();

   719         this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 

   720         Ext.get('width-slider-stroke-mask').applyStyles({'width':this.getText(slider)+'px'});

   721         //--document.forms.formstrokedata.strokewidth.value=this.getText(slider);

   722         mestrokeColor.width=this.getText(slider);  

   723         c.editCommand('linewidth',mestrokeColor.width);

   724     },

   725 

   726     getText : function(slider){

   727         return slider.getValue();

   728     }

   729   }); 

   730 

   731 

   732 

   733 

   734                                      

   735 //===================================

   736 //===================================

   737 

   738 function select(select,action,type){  

   739  var id=select.id;

   740  if(type==0){var text='lineal';}   

   741  if(type==1){var text='radial';}  

   742  if(type==2){var text='no';}  

   743  // && mode_render_fill!=type

   744  if(action==0 && mode_render_fill!=type)

   745   {

   746    Ext.get(id).applyStyles({'background-position':'0 12px'});  

   747     

   748 

   749   }

   750  if(action==1 && mode_render_fill!=type)

   751   {

   752    Ext.get(id).applyStyles({'background-position':'0 0'}); 

   753    

   754   } 

   755  if(action==2)

   756   { 

   757    mode_render_fill=type; 

   758    if(id.indexOf('fill')!=-1)

   759     {

   760       Ext.get(prevselect_fill).applyStyles({'background-position':'0 12px'});

   761       prevselect_fill=id; 

   762       //--document.forms.formfilldata.fillgradient.value=text;

   763     }else{ 

   764     

   765       Ext.get(prevselect_stroke).applyStyles({'background-position':'0 12px'}); 

   766       prevselect_stroke=id;

   767       //--document.forms.formstrokedata.strokegradient.value=text;

   768     }  

   769    Ext.get(id).applyStyles({'background-position':'0 0'});

   770    

   771  

   772   }  

   773 } 

   774 

   775 function changeOpacity(opacity, id)

   776  {  

   777        var object = document.getElementById(id).style;  

   778        object.opacity = (opacity );

   779        object.MozOpacity = (opacity);  

   780        object.KhtmlOpacity = (opacity);  

   781        object.filter = "alpha(opacity=" + parseFloat(opacity*100) + ")";  

   782  } 

   783 

   784  //print() function will just create a window similar to the default alert function within the page.

   785 //Arguments

   786 // txt  - The message that appears in the box.

   787 // title - The title of the box(OPTIONAL) 

   788 

   789 /*

   790 if(typeof console != 'object') {

   791 console = {};

   792 console.log = function(){return false;};

   793 }                

   794 

   795 

   796 /////////////////

   797 var Docs = function(){

   798 return {

   799 init : function(){

   800 var loading = Ext.get('loading');

   801 var mask = Ext.get('loading-mask');

   802 mask.setOpacity(.1);

   803 mask.shift({

   804 xy:loading.getXY(),

   805 width:loading.getWidth(),

   806 height:loading.getHeight(),

   807 remove:true,

   808 duration:1,

   809 opacity:.8,

   810 easing:'bounceOut',

   811 callback : function(){

   812 loading.fadeOut({duration:.1,remove:true});

   813 }

   814 });

   815 }

   816 };

   817 }();

   818 Ext.onReady(Docs.init, Docs, true);

   819  */