Mercurial > laserkard

annotate onlypaths/js/me.js @ 66:5a490c918444 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[svn r67] New format, brings down the (new) image to left-align with text
author hong
date Sun, 04 Apr 2010 22:44:40 -0400
parents 26c2b3ad21c7
children
rev   line source
rlm@46 1 /*
rlm@46 2 * Ext JS Library 2.1
rlm@46 3 * Copyright(c) 2006-2008, Ext JS, LLC.
rlm@46 4 * licensing@extjs.com
rlm@46 5 *
rlm@46 6 * http://extjs.com/license
rlm@46 7 */
rlm@46 8 Ext.BLANK_IMAGE_URL = 'theme/images/default/s.gif';
rlm@46 9 var mefillColor = {r:255,g:0,b:0,hex:'#ff0000',visible:'visible',color:'#ff0000',opacity:'1',gradient:'no'};
rlm@46 10 var mestrokeColor = {r:0,g:0,b:255,hex:'#000000',visible:'visible',color:'#ff0000',width:'1',opacity:'1',gradient:'no'};
rlm@46 11
rlm@46 12 var fillhex="#ff0000";
rlm@46 13 var squarecont=0;
rlm@46 14 var squarerows=6;
rlm@46 15 var squarecols=6;
rlm@46 16 var squarelist=new Array(squarerows);
rlm@46 17 var filldraw=true;
rlm@46 18 var strokedraw=true;
rlm@46 19 var mode_render_fill=2;
rlm@46 20 var mode_render_stroke=2;
rlm@46 21
rlm@46 22 var prevselect_fill='no-fill-gradient';
rlm@46 23 var prevselect_stroke='no-stroke-gradient';
rlm@46 24
rlm@46 25 for (i = 0; i < squarerows; i++)
rlm@46 26 {
rlm@46 27 squarelist[i]=new Array(squarecols);
rlm@46 28 }
rlm@46 29
rlm@46 30 function rgb2hex(r,g,b){
rlm@46 31 var rh= toHex(r);
rlm@46 32 var gh= toHex(g);
rlm@46 33 var bh= toHex(b);
rlm@46 34 return '#'+rh + '' + gh + '' + bh;
rlm@46 35 // document.getElementById('inputfillhex').value=fillhex;
rlm@46 36 //parent.c.editCommand('mefillcolor', color);
rlm@46 37 }
rlm@46 38
rlm@46 39 function hex2rgb(hex)
rlm@46 40 {
rlm@46 41 var regexp = new RegExp('^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$');
rlm@46 42 var match = hex.toLowerCase().match(regexp);
rlm@46 43
rlm@46 44 if (match)
rlm@46 45 {
rlm@46 46 var rgb = new Array(parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16));
rlm@46 47 return(rgb);
rlm@46 48 }
rlm@46 49 else
rlm@46 50 {
rlm@46 51 var rgb = new Array(0,0,0);
rlm@46 52 return(rgb);
rlm@46 53 }
rlm@46 54 }
rlm@46 55
rlm@46 56 function toHex(color){
rlm@46 57 color=parseInt(color).toString(16);
rlm@46 58 return color.length<2?"0"+color:color;
rlm@46 59 }
rlm@46 60
rlm@46 61 function squareDump(r,g,b,container) {
rlm@46 62 squareArray(r,g,b);
rlm@46 63 for (i = 0; i < squarerows; i++)
rlm@46 64 {
rlm@46 65 for (j = 0; j < squarecols; j++)
rlm@46 66 {
rlm@46 67 document.getElementById(container+i+'_'+j).style.backgroundColor = squarelist[i][j];
rlm@46 68 }
rlm@46 69 squarecont++;
rlm@46 70 }
rlm@46 71 squarecont=0;
rlm@46 72 }
rlm@46 73
rlm@46 74
rlm@46 75
rlm@46 76 function squareArray(r,g,b) {
rlm@46 77
rlm@46 78 var l00_05=ccnp(r,g,b,0,0,0,(squarerows+0));
rlm@46 79 var color00_05=l00_05.split("_");
rlm@46 80
rlm@46 81 var l05_55=ccnp(255,255,255,255-r,255-g,255-b,(squarerows+0));
rlm@46 82 var color05_55=l05_55.split("_");
rlm@46 83
rlm@46 84 var cols0, cols5, rowy;
rlm@46 85 var cad='';
rlm@46 86 for(var i=0;i<squarerows;i++){
rlm@46 87 cols0=color00_05[i].split(",");
rlm@46 88 cols5=color05_55[i].split(",");
rlm@46 89 //for(var j=0;j<squarecols;j++){
rlm@46 90 rowy=ccnprmtrc(parseInt(cols0[0]),parseInt(cols0[1]),parseInt(cols0[2]),parseInt(cols5[0]),parseInt(cols5[1]),parseInt(cols5[2]),squarecols+0);
rlm@46 91 squarelist[i]=rowy.split("_");
rlm@46 92 cad+=squarelist[i].join(" ");
rlm@46 93 //}
rlm@46 94 }
rlm@46 95
rlm@46 96 //alert(l00_60);
rlm@46 97 //document.getElementById('texta').value=cad;
rlm@46 98 }
rlm@46 99 function ccnp(a,b,c,d,e,f,nPartes){
rlm@46 100 var q=0
rlm@46 101 var crdnds='';
rlm@46 102 var h = 1 / (nPartes);
rlm@46 103 var k = (1 - q)* a + q * d;
rlm@46 104 var l = (1 - q)* b + q * e;
rlm@46 105 var m = (1 - q)* c + q * f;
rlm@46 106 // crdnds += k +" "+ l +" "+ m +", "+ R;
rlm@46 107 for (var i=0; i<=(nPartes) ;i++)
rlm@46 108 {
rlm@46 109 k = (1 - q)* a + q * d;
rlm@46 110 l = (1 - q)* b + q * e;
rlm@46 111 m = (1 - q)* c + q * f;
rlm@46 112 q = q + h;
rlm@46 113 if(i==(nPartes)){
rlm@46 114 crdnds+=''+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +"" ;
rlm@46 115 }else{
rlm@46 116 crdnds+=''+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +"_";
rlm@46 117
rlm@46 118 }
rlm@46 119 }
rlm@46 120 return crdnds;
rlm@46 121 }
rlm@46 122 function ccnprmtrc(a,b,c,d,e,f,nPartes){
rlm@46 123 var q=0
rlm@46 124 var crdnds='';
rlm@46 125 var h = 1 / (nPartes);
rlm@46 126 var k = (1 - q)* a + q * d;
rlm@46 127 var l = (1 - q)* b + q * e;
rlm@46 128 var m = (1 - q)* c + q * f;
rlm@46 129 // crdnds += k +" "+ l +" "+ m +", "+ R;
rlm@46 130 for (var i=0; i<=(nPartes) ;i++)
rlm@46 131 {
rlm@46 132 k = (1 - q)* a + q * d;
rlm@46 133 l = (1 - q)* b + q * e;
rlm@46 134 m = (1 - q)* c + q * f;
rlm@46 135 q = q + h;
rlm@46 136 if(i==(nPartes)){
rlm@46 137 crdnds+='rgb('+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +")" ;
rlm@46 138 }else{
rlm@46 139 crdnds+='rgb('+ parseInt(Math.round(k)) +","+ parseInt(Math.round(l)) +","+ parseInt(Math.round(m)) +")_";
rlm@46 140
rlm@46 141 }
rlm@46 142 }
rlm@46 143 return crdnds;
rlm@46 144 }
rlm@46 145
rlm@46 146
rlm@46 147 /**
rlm@46 148 * Converts an HSL color value to RGB. Conversion formula adapted from
rlm@46 149 * http://en.wikipedia.org/wiki/HSL_color_space. Assumes h, s, and l are
rlm@46 150 * contained in the set [0, 1] and returns r, g, and b in the set [0, 255].
rlm@46 151 *
rlm@46 152 * @param {Number} h The hue
rlm@46 153 * @param {Number} s The saturation
rlm@46 154 * @param {Number} l The lightness
rlm@46 155 * @return {Array} The RGB representation
rlm@46 156 */
rlm@46 157 var hslToRgb = function(h, s, l){
rlm@46 158 var r, g, b;
rlm@46 159
rlm@46 160 if(s == 0){
rlm@46 161 r = g = b = l; // achromatic
rlm@46 162 }else{
rlm@46 163 function hue2rgb(p, q, t){
rlm@46 164 if(t < 0) t += 1;
rlm@46 165 if(t > 1) t -= 1;
rlm@46 166 if(t < 1/6) return p + (q - p) * 6 * t;
rlm@46 167 if(t < 1/2) return q;
rlm@46 168 if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
rlm@46 169 return p;
rlm@46 170 };
rlm@46 171
rlm@46 172 var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
rlm@46 173 var p = 2 * l - q;
rlm@46 174 r = hue2rgb(p, q, h + 1/3);
rlm@46 175 g = hue2rgb(p, q, h);
rlm@46 176 b = hue2rgb(p, q, h - 1/3);
rlm@46 177 }
rlm@46 178
rlm@46 179 return [parseInt(r * 255), parseInt(g * 255), parseInt(b * 255)];
rlm@46 180 };
rlm@46 181 /**
rlm@46 182 * Converts an RGB color value to HSL. Conversion formula adapted from
rlm@46 183 * http://en.wikipedia.org/wiki/HSL_color_space. Assumes r, g, and b are
rlm@46 184 * contained in the set [0, 255] and returns h, s, and l in the set [0, 1].
rlm@46 185 *
rlm@46 186 * @param {Number} r The red color value
rlm@46 187 * @param {Number} g The green color value
rlm@46 188 * @param {Number} b The blue color value
rlm@46 189 * @return {Array} The HSL representation
rlm@46 190 */
rlm@46 191 var rgbToHsl = function(r, g, b){
rlm@46 192 r /= 255, g /= 255, b /= 255;
rlm@46 193 var max = Math.max(r, g, b), min = Math.min(r, g, b);
rlm@46 194 var h, s, l = (max + min) / 2;
rlm@46 195
rlm@46 196 if(max == min){
rlm@46 197 h = s = 0; // achromatic
rlm@46 198 }else{
rlm@46 199 var d = max - min;
rlm@46 200 s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
rlm@46 201 switch(max){
rlm@46 202 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
rlm@46 203 case g: h = (b - r) / d + 2; break;
rlm@46 204 case b: h = (r - g) / d + 4; break;
rlm@46 205 }
rlm@46 206 h /= 6;
rlm@46 207 }
rlm@46 208
rlm@46 209 return [h, s, l];
rlm@46 210 };
rlm@46 211 function selectSquare(x,y,container){
rlm@46 212 movecolors=0;
rlm@46 213 //$("#square"+x+"_"+y).css("border", "1px solid #000");
rlm@46 214 // $("#square"+x+"_"+y).mouseover(function(){
rlm@46 215
rlm@46 216 // }).mouseout(function(){
rlm@46 217 // $("#square"+x+"_"+y).css("border", "0px solid #000");
rlm@46 218 // });
rlm@46 219 var cadcolor=document.getElementById('square_'+container+(x)+'_'+y).style.backgroundColor
rlm@46 220 //document.getElementById('texta').value=cadcolor;
rlm@46 221 var treecolors=GetString(cadcolor, '(', ')');
rlm@46 222
rlm@46 223 //OPCTION?
rlm@46 224 var rgb=treecolors.split(', ');
rlm@46 225 //squareDump(rgb[0],rgb[1],rgb[2],'square_'+container);
rlm@46 226 if(container=='stroke')
rlm@46 227 {
rlm@46 228 Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});
rlm@46 229 //--document.forms.formstrokedata.mestrokecolor.value=rgb[0]+','+rgb[1]+','+rgb[2];
rlm@46 230 mestrokeColor.r=rgb[0];
rlm@46 231 mestrokeColor.g=rgb[1];
rlm@46 232 mestrokeColor.b=rgb[2];
rlm@46 233 mestrokeColor.hex=rgb2hex(rgb[0],rgb[1],rgb[2]);
rlm@46 234 c.editCommand('linecolor',mestrokeColor.hex);
rlm@46 235 }
rlm@46 236 else
rlm@46 237 {
rlm@46 238 //--document.forms.formfilldata.mefillcolor.value=rgb[0]+','+rgb[1]+','+rgb[2];
rlm@46 239 mefillColor.r=rgb[0]; mefillColor.g=rgb[1];mefillColor.b=rgb[2];
rlm@46 240 mefillColor.hex=rgb2hex(rgb[0],rgb[1],rgb[2]);
rlm@46 241 c.editCommand('fillcolor',mefillColor.hex);
rlm@46 242
rlm@46 243 }
rlm@46 244 Ext.get('opacity-slider-'+container).applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});
rlm@46 245 Ext.get(container+'-square').applyStyles({'background-color':'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')'});
rlm@46 246
rlm@46 247 //document.getElementById('texta').value=rgb[0]+' '+rgb[1]+' '+rgb[2];
rlm@46 248 /* if(actualEdit ==1){
rlm@46 249 fillMemory();
rlm@46 250 }else{
rlm@46 251 strokeMemory();
rlm@46 252 }
rlm@46 253 $('.slider1').SliderSetValues([[Math.round(rgb[0]*45/255),0]]);
rlm@46 254 $('.slider2').SliderSetValues([[Math.round(rgb[1]*45/255),0]]);
rlm@46 255 $('.slider3').SliderSetValues([[Math.round(rgb[2]*45/255),0]]); //-(mefillColor.b*45/255)
rlm@46 256 */
rlm@46 257
rlm@46 258
rlm@46 259 }
rlm@46 260 function setbe(num,id)
rlm@46 261 {
rlm@46 262 if(num == 1)
rlm@46 263 {
rlm@46 264 if(filldraw==true)
rlm@46 265 {
rlm@46 266
rlm@46 267 Ext.get(id).dom.src ='img/theme/images/no.gif';
rlm@46 268 filldraw=false;
rlm@46 269 //--document.forms.formfilldata.fillvisible.value='hidden';
rlm@46 270 mefillColor.visible='hidden';
rlm@46 271 c.editCommand('fillcolor','none');
rlm@46 272 // $('#tape').show("slow");
rlm@46 273
rlm@46 274 }
rlm@46 275 else
rlm@46 276 {
rlm@46 277 Ext.get(id).dom.src ='img/theme/images/ok.gif';
rlm@46 278 filldraw=true;
rlm@46 279 //--document.forms.formfilldata.fillvisible.value='visible';
rlm@46 280 mefillColor.visible='visible';
rlm@46 281 c.editCommand('fillcolor',mefillColor.hex);
rlm@46 282 // $('#tape').hide("slow");
rlm@46 283 }
rlm@46 284 }
rlm@46 285
rlm@46 286 if( num== 2) // stroke
rlm@46 287 {
rlm@46 288 if(strokedraw==true)
rlm@46 289 {
rlm@46 290 Ext.get(id).dom.src ='img/theme/images/no.gif';
rlm@46 291 strokedraw=false;
rlm@46 292 //--document.forms.formstrokedata.strokevisible.value='hidden';
rlm@46 293 mestrokeColor.visible='hidden';
rlm@46 294 c.editCommand('linecolor','none');
rlm@46 295 //$('#tape').show("slow");
rlm@46 296 }
rlm@46 297 else
rlm@46 298 {
rlm@46 299 Ext.get(id).dom.src ='img/theme/images/ok.gif';
rlm@46 300 strokedraw=true;
rlm@46 301 //--document.forms.formstrokedata.strokevisible.value='visible';
rlm@46 302 mestrokeColor.visible='visible';
rlm@46 303 c.editCommand('linecolor',mestrokeColor.hex);
rlm@46 304 //$('#tape').hide("slow");
rlm@46 305 }
rlm@46 306 }
rlm@46 307 }
rlm@46 308
rlm@46 309 ///////////
rlm@46 310
rlm@46 311 function onColorChange(){
rlm@46 312 c.lineColor =mestrokeColor.hex;
rlm@46 313 c.fillColor = mefillColor.hex;
rlm@46 314 c.lineWidth =mestrokeColor.width;
rlm@46 315 c.lineOpac = mestrokeColor.opacity;
rlm@46 316 c.fillOpac = mefillColor.opacity;
rlm@46 317 if(mefillColor.visible=='hidden')
rlm@46 318 {
rlm@46 319 c.fillColor = 'none';
rlm@46 320 }
rlm@46 321 if(mestrokeColor.visible=='hidden')
rlm@46 322 {
rlm@46 323 c.lineColor = 'none';
rlm@46 324 }
rlm@46 325 return;
rlm@46 326 }
rlm@46 327
rlm@46 328 ///////////
rlm@46 329
rlm@46 330 function setProperties(){
rlm@46 331
rlm@46 332 Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+mefillColor.r+','+mefillColor.g+','+mefillColor.b+')'});
rlm@46 333 Ext.get('fill-square').applyStyles({'background-color':'rgb('+mefillColor.r+','+mefillColor.g+','+mefillColor.b+')'});
rlm@46 334 squareDump(mefillColor.r,mefillColor.g,mefillColor.b,'square_fill');
rlm@46 335
rlm@46 336 Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});
rlm@46 337 Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});
rlm@46 338 Ext.get('stroke-square').applyStyles({'background-color':'rgb('+mestrokeColor.r+','+mestrokeColor.g+','+mestrokeColor.b+')'});
rlm@46 339 squareDump(mestrokeColor.r,mestrokeColor.g,mestrokeColor.b,'square_stroke');
rlm@46 340
rlm@46 341 }
rlm@46 342 //////////
rlm@46 343
rlm@46 344
rlm@46 345 function GetString(source, start, end){
rlm@46 346 var st = source.indexOf(start) + start.length;
rlm@46 347 var en = source.indexOf(end, start);
rlm@46 348 return source.substring(st, en);//trimAll(source.substring(st, en));
rlm@46 349 }
rlm@46 350
rlm@46 351
rlm@46 352
rlm@46 353
rlm@46 354 var basicColors=new Array(" ",
rlm@46 355 "ff0000","ff8800","ffcc00",
rlm@46 356 "ffff00","ccff00","88ff00","00ff00","00ff88","00ffcc","00ffff",
rlm@46 357 "00ccff","0088ff","0000ff","8800ff","cc00ff","ff00ff","ff00cc","ff0088"
rlm@46 358 );
rlm@46 359
rlm@46 360 var str=''
rlm@46 361 for(var a=1;a<basicColors.length;a++){
rlm@46 362 str+='<span id="s'+a+'" style="background-color:'+basicColors[a]+'; width:2px;font-size:0.95em">.</span>';
rlm@46 363 }
rlm@46 364 var str1=''
rlm@46 365 for(var a=basicColors.length;a>0;a--){
rlm@46 366 str1+='<span id="s'+a+'" style="background-color:'+basicColors[a]+'; width:2px;font-size:8px">&nbsp;</span>';
rlm@46 367 }
rlm@46 368
rlm@46 369
rlm@46 370 var str2='';
rlm@46 371 var contx=0;
rlm@46 372 var conty=0;
rlm@46 373 var unitx=8;
rlm@46 374 var unity=8;
rlm@46 375 var widthsq='width: '+unitx+'px;';
rlm@46 376 for (i = 0; i < squarerows; i++)
rlm@46 377 {
rlm@46 378 contx=0;
rlm@46 379 for (j = 0; j < squarecols; j++)
rlm@46 380 {
rlm@46 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>';
rlm@46 382 contx+=unitx;
rlm@46 383 }
rlm@46 384 conty+=unity;
rlm@46 385 }
rlm@46 386
rlm@46 387
rlm@46 388 var str3='';
rlm@46 389 var contx=0;
rlm@46 390 var conty=0;
rlm@46 391 var unitx=8;
rlm@46 392 var unity=8;
rlm@46 393 var widthsq='width: '+unitx+'px;';
rlm@46 394 for (i = 0; i < squarerows; i++)
rlm@46 395 {
rlm@46 396 contx=0;
rlm@46 397 for (j = 0; j < squarecols; j++)
rlm@46 398 {
rlm@46 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>';
rlm@46 400 contx+=unitx;
rlm@46 401 }
rlm@46 402 conty+=unity;
rlm@46 403 }
rlm@46 404
rlm@46 405 /////////////////////
rlm@46 406
rlm@46 407 var str4='';
rlm@46 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;';
rlm@46 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;';
rlm@46 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>';
rlm@46 411
rlm@46 412 /////////////////////
rlm@46 413
rlm@46 414 var str5='';
rlm@46 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;';
rlm@46 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;';
rlm@46 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>';
rlm@46 418
rlm@46 419 /////////////////////
rlm@46 420
rlm@46 421 var str6=''; //<form name="formfilldata">
rlm@46 422 str6+='<input type="text" class="field" name="fillvisible" title="Fill visible" value="visible" size="2">';
rlm@46 423 str6+='<input type="text" class="field" name="fillcolor" title="Fill color"value="255,0,0" size="2">';
rlm@46 424 str6+='<input type="text" class="field" name="fillopacity" title="Fill opacity" value="100" size="2">';
rlm@46 425 str6+='<input type="text" class="field" name="fillgradient" title="Fill gradient" value="no" size="2">';
rlm@46 426 str6+='';
rlm@46 427
rlm@46 428 var str7=''; // <form name="formstrokedata">
rlm@46 429 str7+='<input type="text" class="field" title="Stroke visible" name="strokevisible" value="visible" size="2">';
rlm@46 430 str7+='<input type="text" class="field" title="Stroke color" name="strokecolor" value="0,0,0" size="2">';
rlm@46 431 str7+='<input type="text" class="field" title="Stroke width" name="strokewidth" value="1" size="2">';
rlm@46 432 str7+='<input type="text" class="field" title="Stroke opacity" name="strokeopacity" value="100" size="2">';
rlm@46 433 str7+='<input type="text" class="field" title="Stroke gradienr" name="strokegradient" value="no" size="2">';
rlm@46 434
rlm@46 435 str7+='';
rlm@46 436
rlm@46 437
rlm@46 438 //ONREADY
rlm@46 439
rlm@46 440 Ext.onReady(function() {
rlm@46 441
rlm@46 442
rlm@46 443 // Ext.get("mefillColor").dom.innerHTML=(str);
rlm@46 444 // Ext.get("mestrokeColor").dom.innerHTML=(str1);
rlm@46 445
rlm@46 446
rlm@46 447
rlm@46 448
rlm@46 449 Ext.get("fillContainer").dom.innerHTML=(str2);
rlm@46 450 Ext.get("strokeContainer").dom.innerHTML=(str3);
rlm@46 451 //Ext.get("toolbox_fill").dom.innerHTML=(str4);
rlm@46 452 //Ext.get("toolbox_stroke").dom.innerHTML=(str5);
rlm@46 453 // Ext.get("divformfill").dom.innerHTML=(str6);
rlm@46 454 //Ext.get("divformstroke").dom.innerHTML=(str7);
rlm@46 455
rlm@46 456
rlm@46 457 Ext.get('fill-square').applyStyles({'background-color':'rgb(255,0,0)'});
rlm@46 458 Ext.get('stroke-square').applyStyles({'background-color':'rgb(0,0,0)'});
rlm@46 459 //Ext.get('no-stroke-gradient').applyStyles({'background-position':'0 0'});
rlm@46 460 //Ext.get('no-fill-gradient').applyStyles({'background-position':'0 0'});
rlm@46 461
rlm@46 462 var color=hslToRgb(0, 1, 0.5);
rlm@46 463 squareDump(color[0],color[1],color[2],'square_fill');
rlm@46 464
rlm@46 465 var color=hslToRgb(0, 0, 0);
rlm@46 466 squareDump(color[0],color[1],color[2],'square_stroke');
rlm@46 467
rlm@46 468 //console.log('The windows has been loaded','fill-square' );
rlm@46 469 new Ext.Slider({
rlm@46 470 renderTo: 'slider-fill',
rlm@46 471 width: 62,
rlm@46 472 height: 5,
rlm@46 473 minValue: -1,
rlm@46 474 maxValue: 360,
rlm@46 475 value: 10,
rlm@46 476 plugins: new Ext.ux.SliderFillColor()
rlm@46 477 });
rlm@46 478 new Ext.Slider({
rlm@46 479 renderTo: 'opacity-slider-fill',
rlm@46 480 width: 55,
rlm@46 481 minValue: 0,
rlm@46 482 maxValue: 100,
rlm@46 483 value: 100,
rlm@46 484 plugins: new Ext.ux.SliderOpacityFill()
rlm@46 485 });
rlm@46 486
rlm@46 487 new Ext.Slider({
rlm@46 488 renderTo: 'slider-stroke',
rlm@46 489 width: 62,
rlm@46 490 minValue: -1,
rlm@46 491 maxValue: 360,
rlm@46 492 value: -1,
rlm@46 493 plugins: new Ext.ux.SliderStrokeColor()
rlm@46 494 });
rlm@46 495
rlm@46 496 new Ext.Slider({
rlm@46 497 renderTo: 'opacity-slider-stroke',
rlm@46 498 width: 57,
rlm@46 499 minValue: 0,
rlm@46 500 maxValue: 100,
rlm@46 501 value: 100,
rlm@46 502 plugins: new Ext.ux.SliderOpacityStroke()
rlm@46 503 });
rlm@46 504 new Ext.Slider({
rlm@46 505 renderTo: 'width-slider-stroke',
rlm@46 506 width: 57,
rlm@46 507 minValue: 0,
rlm@46 508 maxValue: 50,
rlm@46 509 value: 1,
rlm@46 510 plugins: new Ext.ux.SliderWidth()
rlm@46 511 });
rlm@46 512
rlm@46 513
rlm@46 514 });
rlm@46 515
rlm@46 516 // end ONREADY
rlm@46 517
rlm@46 518
rlm@46 519
rlm@46 520
rlm@46 521
rlm@46 522 Ext.ux.SliderFillColor = Ext.extend(Ext.Tip, {
rlm@46 523 minWidth: 10,
rlm@46 524 offsets : [0, -10],
rlm@46 525 init : function(slider){
rlm@46 526 slider.on('dragstart', this.onSlide, this);
rlm@46 527 slider.on('drag', this.onSlide, this);
rlm@46 528 slider.on('dragend', this.hide, this);
rlm@46 529 slider.on('destroy', this.destroy, this);
rlm@46 530 },
rlm@46 531
rlm@46 532 onSlide : function(slider){
rlm@46 533 //this.show();
rlm@46 534 //this.doAutoWidth();
rlm@46 535 //this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
rlm@46 536 if(this.getText(slider)<0 || this.getText(slider)>359)
rlm@46 537 {
rlm@46 538 var color=new Array();
rlm@46 539 color[0]='0';
rlm@46 540 color[1]='0';
rlm@46 541 color[2]='0';
rlm@46 542
rlm@46 543 if(this.getText(slider)>359)
rlm@46 544 {
rlm@46 545
rlm@46 546 color[0]='245';
rlm@46 547 color[1]='245';
rlm@46 548 color[2]='245';
rlm@46 549 }
rlm@46 550 Ext.get('fill-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 551 Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 552
rlm@46 553 }
rlm@46 554 else
rlm@46 555 {
rlm@46 556 var color=hslToRgb((this.getText(slider)/359), 1, 0.5);
rlm@46 557 Ext.get('fill-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 558 Ext.get('opacity-slider-fill').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 559 //var color=hslToRgb((this.getText(slider)/359), 1, 0.5);
rlm@46 560 }
rlm@46 561
rlm@46 562 squareDump(color[0],color[1],color[2],'square_fill');
rlm@46 563 //Ext.get("fillcolor").dom.innerHTML=(color[0]+','+color[1]+','+color[2]);
rlm@46 564 //--document.forms.formfilldata.fillcolor.value=color[0]+','+color[1]+','+color[2];
rlm@46 565 mefillColor.r=color[0]; mefillColor.g=color[1]; mefillColor.b=color[2];
rlm@46 566 mefillColor.hex=rgb2hex(color[0],color[1],color[2]);
rlm@46 567 c.editCommand('fillcolor',mefillColor.hex);
rlm@46 568
rlm@46 569 //Ext.get("squareFill0_0").applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 570 // Ext.get("squareFill0_5").applyStyles({'background-color':'rgb(255,255,255)'});
rlm@46 571 //Ext.get("squareFill5_5").applyStyles({'background-color':'rgb('+Math.abs(color[0]-255)+','+Math.abs(color[1]-255)+','+Math.abs(color[2]-255)+')'});
rlm@46 572 // Ext.get("squareFill5_0").applyStyles({'background-color':'rgb(0,0,0)'});
rlm@46 573 //Ext.get("text").dom.innerHTML=color[0];
rlm@46 574
rlm@46 575 },
rlm@46 576
rlm@46 577 getText : function(slider){
rlm@46 578 return slider.getValue();
rlm@46 579 }
rlm@46 580 });
rlm@46 581
rlm@46 582
rlm@46 583
rlm@46 584
rlm@46 585 Ext.ux.SliderStrokeColor = Ext.extend(Ext.Tip, {
rlm@46 586 minWidth: 10,
rlm@46 587 offsets : [0, -10],
rlm@46 588 init : function(slider){
rlm@46 589 slider.on('dragstart', this.onSlide, this);
rlm@46 590 slider.on('drag', this.onSlide, this);
rlm@46 591 slider.on('dragend', this.hide, this);
rlm@46 592 slider.on('destroy', this.destroy, this);
rlm@46 593 },
rlm@46 594
rlm@46 595 onSlide : function(slider){
rlm@46 596 //this.show();
rlm@46 597 //this.doAutoWidth();
rlm@46 598 //this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
rlm@46 599 if(this.getText(slider)<0 || this.getText(slider)>359)
rlm@46 600 {
rlm@46 601 var color=new Array();
rlm@46 602 color[0]='0';
rlm@46 603 color[1]='0';
rlm@46 604 color[2]='0';
rlm@46 605
rlm@46 606 if(this.getText(slider)>359)
rlm@46 607 {
rlm@46 608
rlm@46 609 color[0]='245';
rlm@46 610 color[1]='245';
rlm@46 611 color[2]='245';
rlm@46 612 }
rlm@46 613 Ext.get('stroke-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 614 Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 615 Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 616
rlm@46 617 }
rlm@46 618 else
rlm@46 619 {
rlm@46 620 var color=hslToRgb((this.getText(slider)/359), 1, 0.5);
rlm@46 621 Ext.get('stroke-square').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 622 Ext.get('opacity-slider-stroke').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 623 Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'rgb('+color[0]+','+color[1]+','+color[2]+')'});
rlm@46 624
rlm@46 625 /*Ext.get('stroke-square').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46 626 Ext.get('opacity-slider-stroke').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46 627 var color=hslToRgb((this.getText(slider)/359), 1, 0.5);
rlm@46 628 Ext.get('width-slider-stroke-mask').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46 629 */
rlm@46 630 }
rlm@46 631
rlm@46 632
rlm@46 633
rlm@46 634 //Ext.get('stroke-square').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46 635 //Ext.get('opacity-slider-stroke').applyStyles({'background-color':'hsl('+this.getText(slider)+',100%,50%)'});
rlm@46 636
rlm@46 637 //var color=hslToRgb((this.getText(slider)/359), 1, 0.5);
rlm@46 638 squareDump(color[0],color[1],color[2],'square_stroke');
rlm@46 639 //--document.forms.formstrokedata.strokecolor.value=color[0]+','+color[1]+','+color[2];
rlm@46 640 mestrokeColor.r=color[0]; mestrokeColor.g=color[1]; mestrokeColor.b=color[2];
rlm@46 641 mestrokeColor.hex=rgb2hex(color[0],color[1],color[2]);
rlm@46 642 c.editCommand('linecolor',mestrokeColor.hex);
rlm@46 643 // this.body.update(''+this.getText(slider));
rlm@46 644
rlm@46 645 },
rlm@46 646
rlm@46 647 getText : function(slider){
rlm@46 648 return slider.getValue();
rlm@46 649 }
rlm@46 650 });
rlm@46 651
rlm@46 652
rlm@46 653
rlm@46 654 Ext.ux.SliderOpacityFill = Ext.extend(Ext.Tip, {
rlm@46 655 minWidth: 10,
rlm@46 656 offsets : [0, -10],
rlm@46 657 init : function(slider){
rlm@46 658 slider.on('dragstart', this.onSlide, this);
rlm@46 659 slider.on('drag', this.onSlide, this);
rlm@46 660 slider.on('dragend', this.hide, this);
rlm@46 661 slider.on('destroy', this.destroy, this);
rlm@46 662 },
rlm@46 663
rlm@46 664 onSlide : function(slider){
rlm@46 665 this.show();
rlm@46 666 this.body.update(''+this.getText(slider)+'%');
rlm@46 667 this.doAutoWidth();
rlm@46 668 this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
rlm@46 669 changeOpacity(this.getText(slider)/100, 'opacity-slider-fill');
rlm@46 670 //--document.forms.formfilldata.fillopacity.value=this.getText(slider);
rlm@46 671 mefillColor.opacity=this.getText(slider)/100;
rlm@46 672 c.editCommand('fillopacity',mefillColor.opacity);
rlm@46 673 },
rlm@46 674
rlm@46 675 getText : function(slider){
rlm@46 676 return slider.getValue();
rlm@46 677 }
rlm@46 678 });
rlm@46 679 Ext.ux.SliderOpacityStroke = Ext.extend(Ext.Tip, {
rlm@46 680 minWidth: 10,
rlm@46 681 offsets : [0, -10],
rlm@46 682 init : function(slider){
rlm@46 683 slider.on('dragstart', this.onSlide, this);
rlm@46 684 slider.on('drag', this.onSlide, this);
rlm@46 685 slider.on('dragend', this.hide, this);
rlm@46 686 slider.on('destroy', this.destroy, this);
rlm@46 687 },
rlm@46 688
rlm@46 689 onSlide : function(slider){
rlm@46 690 this.show();
rlm@46 691 this.body.update(''+this.getText(slider)+'%');
rlm@46 692 this.doAutoWidth();
rlm@46 693 this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
rlm@46 694 changeOpacity(this.getText(slider)/100, 'opacity-slider-stroke');
rlm@46 695 //--document.forms.formstrokedata.strokeopacity.value=this.getText(slider);
rlm@46 696 mestrokeColor.opacity=this.getText(slider)/100;
rlm@46 697 c.editCommand('lineopacity',mestrokeColor.opacity);
rlm@46 698 },
rlm@46 699
rlm@46 700 getText : function(slider){
rlm@46 701 return slider.getValue();
rlm@46 702 }
rlm@46 703 });
rlm@46 704
rlm@46 705 Ext.ux.SliderWidth = Ext.extend(Ext.Tip, {
rlm@46 706 minWidth: 10,
rlm@46 707 offsets : [0, -10],
rlm@46 708 init : function(slider){
rlm@46 709 slider.on('dragstart', this.onSlide, this);
rlm@46 710 slider.on('drag', this.onSlide, this);
rlm@46 711 slider.on('dragend', this.hide, this);
rlm@46 712 slider.on('destroy', this.destroy, this);
rlm@46 713 },
rlm@46 714
rlm@46 715 onSlide : function(slider){
rlm@46 716 this.show();
rlm@46 717 this.body.update(''+this.getText(slider)+'px');
rlm@46 718 this.doAutoWidth();
rlm@46 719 this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
rlm@46 720 Ext.get('width-slider-stroke-mask').applyStyles({'width':this.getText(slider)+'px'});
rlm@46 721 //--document.forms.formstrokedata.strokewidth.value=this.getText(slider);
rlm@46 722 mestrokeColor.width=this.getText(slider);
rlm@46 723 c.editCommand('linewidth',mestrokeColor.width);
rlm@46 724 },
rlm@46 725
rlm@46 726 getText : function(slider){
rlm@46 727 return slider.getValue();
rlm@46 728 }
rlm@46 729 });
rlm@46 730
rlm@46 731
rlm@46 732
rlm@46 733
rlm@46 734
rlm@46 735 //===================================
rlm@46 736 //===================================
rlm@46 737
rlm@46 738 function select(select,action,type){
rlm@46 739 var id=select.id;
rlm@46 740 if(type==0){var text='lineal';}
rlm@46 741 if(type==1){var text='radial';}
rlm@46 742 if(type==2){var text='no';}
rlm@46 743 // && mode_render_fill!=type
rlm@46 744 if(action==0 && mode_render_fill!=type)
rlm@46 745 {
rlm@46 746 Ext.get(id).applyStyles({'background-position':'0 12px'});
rlm@46 747
rlm@46 748
rlm@46 749 }
rlm@46 750 if(action==1 && mode_render_fill!=type)
rlm@46 751 {
rlm@46 752 Ext.get(id).applyStyles({'background-position':'0 0'});
rlm@46 753
rlm@46 754 }
rlm@46 755 if(action==2)
rlm@46 756 {
rlm@46 757 mode_render_fill=type;
rlm@46 758 if(id.indexOf('fill')!=-1)
rlm@46 759 {
rlm@46 760 Ext.get(prevselect_fill).applyStyles({'background-position':'0 12px'});
rlm@46 761 prevselect_fill=id;
rlm@46 762 //--document.forms.formfilldata.fillgradient.value=text;
rlm@46 763 }else{
rlm@46 764
rlm@46 765 Ext.get(prevselect_stroke).applyStyles({'background-position':'0 12px'});
rlm@46 766 prevselect_stroke=id;
rlm@46 767 //--document.forms.formstrokedata.strokegradient.value=text;
rlm@46 768 }
rlm@46 769 Ext.get(id).applyStyles({'background-position':'0 0'});
rlm@46 770
rlm@46 771
rlm@46 772 }
rlm@46 773 }
rlm@46 774
rlm@46 775 function changeOpacity(opacity, id)
rlm@46 776 {
rlm@46 777 var object = document.getElementById(id).style;
rlm@46 778 object.opacity = (opacity );
rlm@46 779 object.MozOpacity = (opacity);
rlm@46 780 object.KhtmlOpacity = (opacity);
rlm@46 781 object.filter = "alpha(opacity=" + parseFloat(opacity*100) + ")";
rlm@46 782 }
rlm@46 783
rlm@46 784 //print() function will just create a window similar to the default alert function within the page.
rlm@46 785 //Arguments
rlm@46 786 // txt - The message that appears in the box.
rlm@46 787 // title - The title of the box(OPTIONAL)
rlm@46 788
rlm@46 789 /*
rlm@46 790 if(typeof console != 'object') {
rlm@46 791 console = {};
rlm@46 792 console.log = function(){return false;};
rlm@46 793 }
rlm@46 794
rlm@46 795
rlm@46 796 /////////////////
rlm@46 797 var Docs = function(){
rlm@46 798 return {
rlm@46 799 init : function(){
rlm@46 800 var loading = Ext.get('loading');
rlm@46 801 var mask = Ext.get('loading-mask');
rlm@46 802 mask.setOpacity(.1);
rlm@46 803 mask.shift({
rlm@46 804 xy:loading.getXY(),
rlm@46 805 width:loading.getWidth(),
rlm@46 806 height:loading.getHeight(),
rlm@46 807 remove:true,
rlm@46 808 duration:1,
rlm@46 809 opacity:.8,
rlm@46 810 easing:'bounceOut',
rlm@46 811 callback : function(){
rlm@46 812 loading.fadeOut({duration:.1,remove:true});
rlm@46 813 }
rlm@46 814 });
rlm@46 815 }
rlm@46 816 };
rlm@46 817 }();
rlm@46 818 Ext.onReady(Docs.init, Docs, true);
rlm@46 819 */