Mercurial > laserkard

annotate onlypaths/js/vmlrenderer.js @ 48:b2a11435a89b laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[svn r49] implemented resizing text :)
author rlm
date Sun, 31 Jan 2010 20:26:16 -0500
parents 26c2b3ad21c7
children
rev   line source
rlm@46 1 //----------------------------------------------------------------------------
rlm@46 2 // VMLRENDERER 1.0
rlm@46 3 // VML Renderer For RichDraw
rlm@46 4 // Dependencies:
rlm@46 5 // History:
rlm@46 6 // 2006-04-05 | Created
rlm@46 7 // --------------------------------------------------------------------------*/
rlm@46 8
rlm@46 9
rlm@46 10 function VMLRenderer() {
rlm@46 11 this.base = AbstractRenderer;
rlm@46 12 }
rlm@46 13
rlm@46 14
rlm@46 15 VMLRenderer.prototype = new AbstractRenderer;
rlm@46 16
rlm@46 17 VMLRenderer.prototype.bounds = function(shape) {
rlm@46 18 var rect = new Object();
rlm@46 19 rect['x'] = shape.offsetLeft;
rlm@46 20 rect['y'] = shape.offsetTop;
rlm@46 21 rect['width'] = shape.offsetWidth;
rlm@46 22 rect['height'] = shape.offsetHeight;
rlm@46 23 return rect;
rlm@46 24 }
rlm@46 25
rlm@46 26 VMLRenderer.prototype.init = function(elem)
rlm@46 27 {
rlm@46 28 this.container = elem;
rlm@46 29 // this.container.style.overflow = 'hidden';
rlm@46 30 this.container.unselectable = "on";
rlm@46 31 // Add VML includes and namespace
rlm@46 32 elem.ownerDocument.namespaces.add("v", "urn:schemas-microsoft-com:vml");
rlm@46 33 var style = elem.ownerDocument.createStyleSheet();
rlm@46 34 style.addRule('v\\:*', "behavior: url(#default#VML); display:inline-block");
rlm@46 35 //NOT VML biewBox
rlm@46 36 //http://blogs.msdn.com/ie/archive/2008/03/18/webbrowser-control-rendering-modes-in-ie8.aspx
rlm@46 37
rlm@46 38 }
rlm@46 39
rlm@46 40
rlm@46 41
rlm@46 42
rlm@46 43 var proporx=1;
rlm@46 44 var propory=1;
rlm@46 45
rlm@46 46 VMLRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {
rlm@46 47 var tokens = viewBox.split(' ');
rlm@46 48
rlm@46 49 var margin=100;
rlm@46 50 var wFront=parseInt(document.getElementById('FRONT').style.width)
rlm@46 51 var hFront=parseInt(document.getElementById('FRONT').style.height)
rlm@46 52 var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;
rlm@46 53 tokensCanvas= tC.split(' ');
rlm@46 54
rlm@46 55 var w=parseFloat(tokens[2]);
rlm@46 56 var h=parseFloat(tokens[3]);
rlm@46 57 var wImage = w - parseFloat(tokens[0]);
rlm@46 58 var hImage = h - parseFloat(tokens[1]);
rlm@46 59 var wCanvas = wFront;
rlm@46 60 var hCanvas = hFront;
rlm@46 61 proporImage = hImage / wImage;
rlm@46 62 proporCanvas = hCanvas / wCanvas;
rlm@46 63
rlm@46 64 document.title= initialFile +' '+wImage+' x '+hImage;
rlm@46 65
rlm@46 66
rlm@46 67 if(bgcolor != '')
rlm@46 68 {
rlm@46 69 this.container.style.backgroundColor=bgcolor;
rlm@46 70 } else{
rlm@46 71 this.container.style.backgroundColor="#ffffff";
rlm@46 72 }
rlm@46 73 if(viewMode=='preview')
rlm@46 74 {
rlm@46 75 if(proporCanvas==proporImage)
rlm@46 76 {
rlm@46 77 this.container.style.width =wFront+'px';
rlm@46 78 this.container.style.height =hFront+'px';
rlm@46 79 this.container.style.left =0+'px'
rlm@46 80 this.container.style.top =0+'px'
rlm@46 81 canvasLeft = 0;
rlm@46 82 canvasTop = 0;
rlm@46 83 canvasWidth =wFront ;
rlm@46 84 canvasHeight = hFront;
rlm@46 85 zoominit1= 0+' '+0+' '+wFront+' '+hFront;
rlm@46 86 zoominit = viewBox;
rlm@46 87 zoominit2 = zoominit1;
rlm@46 88
rlm@46 89
rlm@46 90 proporx = 1;
rlm@46 91 propory = 1;
rlm@46 92
rlm@46 93 }
rlm@46 94 if(proporCanvas<proporImage)
rlm@46 95 {
rlm@46 96 var proportion= wFront/hFront;
rlm@46 97 //var image_proportion= width/height;
rlm@46 98 var image_proportion= w/h;
rlm@46 99 var W=hFront*image_proportion;
rlm@46 100 var leftover=(wFront-W)/2;
rlm@46 101
rlm@46 102 this.container.style.width =W+'px';
rlm@46 103 this.container.style.height =hFront+'px';
rlm@46 104 this.container.style.left =leftover+'px'
rlm@46 105 this.container.style.top =0+'px'
rlm@46 106 //alert('Horizontal '+wFront+','+hFront+' '+image_proportion+' '+W+' '+leftover+' ____'+ this.container.style.width)
rlm@46 107 canvasLeft = leftover;
rlm@46 108 canvasTop = 0;
rlm@46 109 canvasWidth =W ;
rlm@46 110 canvasHeight = hFront;
rlm@46 111 zoominit1= viewBox;//leftover+' '+0+' '+W+' '+hFront;
rlm@46 112 zoominit1=0+' '+0+' '+W+' '+hFront;
rlm@46 113 zoominit = viewBox;
rlm@46 114 zoominit2 = zoominit1;
rlm@46 115
rlm@46 116
rlm@46 117 proporx = W/w;
rlm@46 118 propory = hFront/h;
rlm@46 119
rlm@46 120
rlm@46 121 }
rlm@46 122 if(proporCanvas>proporImage)
rlm@46 123 {
rlm@46 124 var proportion= hFront/wFront;
rlm@46 125 //var image_proportion= width/height;
rlm@46 126 var image_proportion= h/w;
rlm@46 127 var H=wFront*image_proportion;
rlm@46 128 var leftover=(hFront-H)/2;
rlm@46 129
rlm@46 130 this.container.style.width =wFront+'px';
rlm@46 131 this.container.style.height =H+'px';
rlm@46 132 this.container.style.left =0+'px'
rlm@46 133 this.container.style.top =leftover+'px'
rlm@46 134
rlm@46 135 canvasLeft = 0;
rlm@46 136 canvasTop = leftover;
rlm@46 137 canvasWidth = wFront;
rlm@46 138 canvasHeight = H;
rlm@46 139 //zoominit1 = 0+' '+leftover+' '+wFront+' '+H;
rlm@46 140 zoominit1 = 0+' '+0+' '+wFront+' '+H;
rlm@46 141 zoominit = viewBox;
rlm@46 142 zoominit2 = viewBox;//zoominit1;
rlm@46 143
rlm@46 144 proporx = wFront/w;
rlm@46 145 propory = H/h;
rlm@46 146
rlm@46 147 }
rlm@46 148 // proporx = width/tokens[2];
rlm@46 149 //propory = height/tokens[2];
rlm@46 150
rlm@46 151
rlm@46 152
rlm@46 153 }
rlm@46 154 if(viewMode=='canvas')
rlm@46 155 {
rlm@46 156 this.container.style.left = 0 + 'px';
rlm@46 157 this.container.style.top = 0 + 'px';
rlm@46 158 this.container.style.width = wFront + 'px';
rlm@46 159 this.container.style.height = hFront + 'px';
rlm@46 160
rlm@46 161 // margins 10%
rlm@46 162 var percent=10;
rlm@46 163 var percentX = wImage / percent;
rlm@46 164 var percentY = hImage / percent;
rlm@46 165 var cornerNEx = parseFloat(tokens[0])-percentX;
rlm@46 166 var cornerNEy = parseFloat(tokens[1])-percentY;
rlm@46 167 var percentRectW=wImage + percentX*2;
rlm@46 168 var percentRectH=hImage + percentY*2;
rlm@46 169
rlm@46 170 document.title= initialFile +' '+wImage+' x '+hImage;
rlm@46 171 // ajust proporImage to proporCanvas
rlm@46 172 if(proporCanvas==proporImage)
rlm@46 173 {
rlm@46 174 cornerNEx = parseFloat(tokens[0])-percentX
rlm@46 175 cornerNEy = parseFloat(tokens[1])-percentY
rlm@46 176 var wi=percentRectW;
rlm@46 177 var he=percentRectH;//hImage+percentY+addHimage;
rlm@46 178 zoominit=viewBox;
rlm@46 179 zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;
rlm@46 180 proporx =(w*(100-percent*2)/100)/w;
rlm@46 181 propory =( h*(100-percent*2)/100)/h;
rlm@46 182 zoominit2=zoominit1;
rlm@46 183 tokensZoom=tokensCanvas;//viewBox.split(' '); ;//zoominit1.split(' ');
rlm@46 184
rlm@46 185 }
rlm@46 186
rlm@46 187 if(proporCanvas<proporImage)
rlm@46 188 {
rlm@46 189
rlm@46 190 // add to hImage
rlm@46 191 var newWimage = percentRectW * ((wCanvas * percentRectH) / (hCanvas * percentRectW)) ;//newRectH *
rlm@46 192 var diffImages=newWimage-w;
rlm@46 193 cornerNEx = parseFloat(tokens[0]) - (diffImages / 2);
rlm@46 194 var wi=newWimage;
rlm@46 195 var he=percentRectH;//hImage+percentY+addHimage;
rlm@46 196 zoominit=viewBox;
rlm@46 197 //zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
rlm@46 198 //zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;
rlm@46 199 proporx =wFront/wi;
rlm@46 200 propory = wFront/wi;
rlm@46 201 var invPropor =wi/ wFront;
rlm@46 202 zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;
rlm@46 203 zoominit2=zoominit1;
rlm@46 204 var tZ = (invPropor*cornerNEx) +' '+(invPropor*cornerNEy)+' '+wi+' '+he;
rlm@46 205
rlm@46 206
rlm@46 207 tokensZoom=tokensCanvas;//tZ.split(' ');//viewBox.split(' '); ;//zoominit1.split(' ');
rlm@46 208 }
rlm@46 209 if(proporCanvas>proporImage)
rlm@46 210 {
rlm@46 211 // add to hImage
rlm@46 212 var newHimage = percentRectH * ((hCanvas * percentRectW) / (wCanvas * percentRectH)) ;//newRectH *
rlm@46 213 var diffImages=newHimage-h;
rlm@46 214 cornerNEy = parseFloat(tokens[1]) - (diffImages / 2);
rlm@46 215 var wi=percentRectW;
rlm@46 216 var he=newHimage;//hImage+percentY+addHimage;
rlm@46 217 zoominit=viewBox;
rlm@46 218 proporx =wFront/wi;
rlm@46 219 propory = wFront/wi;
rlm@46 220
rlm@46 221 zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;
rlm@46 222 zoominit2=zoominit1;
rlm@46 223 tokensZoom=zoominit1.split(' ');
rlm@46 224
rlm@46 225 }
rlm@46 226
rlm@46 227
rlm@46 228 }
rlm@46 229 }
rlm@46 230
rlm@46 231
rlm@46 232
rlm@46 233 VMLRenderer.prototype.zoomFrame = function(zoom){
rlm@46 234 myOPF.viewBox=zoom;
rlm@46 235 load(myOPF,c);
rlm@46 236 document.getElementById("source").value=myOPF.toJSONString();
rlm@46 237 }
rlm@46 238 VMLRenderer.prototype.rectDoc = function(viewBox) {
rlm@46 239 var tokens2 = zoominit2.split(' ');
rlm@46 240 var tokens = zoominit.split(' ');
rlm@46 241 var shape = document.getElementById('rectDoc');
rlm@46 242 if (shape) {
rlm@46 243 this.remove(shape);
rlm@46 244 }
rlm@46 245 var rect=this.container.ownerDocument.createElement('v:rect');
rlm@46 246 rect.id='rectDoc';
rlm@46 247 rect.style.position = 'absolute';
rlm@46 248 rect.style.left =-parseInt(tokens2[0]);
rlm@46 249 rect.style.top = -parseInt(tokens2[1]);
rlm@46 250 rect.style.width = parseInt(tokens[2]);
rlm@46 251 rect.style.height = parseInt(tokens[3]);
rlm@46 252 rect.setAttribute('filled', 'false');
rlm@46 253 rect.setAttribute('stroked', 'true');
rlm@46 254 rect.setAttribute('strokeweight', 2);
rlm@46 255 rect.setAttribute('strokecolor',"#ff0000");
rlm@46 256 //this.container.appendChild(rect);
rlm@46 257 //this.container.insertBefore(rect, this.container.firstChild );
rlm@46 258 //alert(docx+' '+docy+' '+docw+' '+doch+' '+viewBox)
rlm@46 259 }
rlm@46 260 VMLRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {
rlm@46 261
rlm@46 262 var tokens = zoominit1.split(' ');
rlm@46 263 var shape = document.getElementById('rectCanvas');
rlm@46 264 if (shape) {
rlm@46 265 this.remove(shape);
rlm@46 266 }
rlm@46 267
rlm@46 268 var rect=this.container.ownerDocument.createElement('v:rect');
rlm@46 269 rect.id='rectBackground';
rlm@46 270 rect.style.position = 'absolute';
rlm@46 271 rect.style.left = tokens[0] ;
rlm@46 272 rect.style.top =tokens[1];
rlm@46 273 rect.style.width=tokens[2];
rlm@46 274 rect.style.height= tokens[3] ;
rlm@46 275 rect.setAttribute('filled', 'true');
rlm@46 276 rect.setAttribute('fillcolor',"#666666");
rlm@46 277 rect.setAttribute('stroked', 'false');
rlm@46 278
rlm@46 279 this.container.insertBefore(rect, this.container.firstChild );
rlm@46 280
rlm@46 281 }
rlm@46 282
rlm@46 283 VMLRenderer.prototype.removeAll = function(){
rlm@46 284 while (this.container.hasChildNodes()) {
rlm@46 285 this.container.removeChild(this.container.firstChild);
rlm@46 286 }
rlm@46 287 }
rlm@46 288
rlm@46 289 function VMLviewBox(container,left,top,width,height){
rlm@46 290 var tokens = zoominit2.split(' ');
rlm@46 291 left *= proporx;
rlm@46 292 left = left - parseFloat(tokens[0]);
rlm@46 293 top *= propory;
rlm@46 294 top = top - parseFloat(tokens[1]);
rlm@46 295 width *= proporx;
rlm@46 296 height *= propory;
rlm@46 297
rlm@46 298 return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};
rlm@46 299 }
rlm@46 300 function VMLviewBox1(container,left,top,width,height){
rlm@46 301 var tokens = zoominit2.split(' ');
rlm@46 302 left *= proporx;
rlm@46 303 left = left - parseFloat(tokens[0]);
rlm@46 304 top *= propory;
rlm@46 305 top = top - parseFloat(tokens[1]);
rlm@46 306 width *= proporx;
rlm@46 307 height *= propory;
rlm@46 308
rlm@46 309 return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};
rlm@46 310 }
rlm@46 311
rlm@46 312 VMLRenderer.prototype.create = function(shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent) {
rlm@46 313 var tokens = zoominit2.split(' ');
rlm@46 314
rlm@46 315 var zoom=VMLviewBox(this.container,left,top,width,height);
rlm@46 316
rlm@46 317 left=zoom.x;
rlm@46 318 top=zoom.y;
rlm@46 319 width=zoom.w;
rlm@46 320 height=zoom.h;
rlm@46 321
rlm@46 322 var zoom=VMLviewBox(this.container,left,top,textSize,textSize);
rlm@46 323 //if(zoom.w<1){zoom.w=1}
rlm@46 324 if(zoom.y== undefined){left=0}
rlm@46 325 if(zoom.x== undefined){top=0}
rlm@46 326 if(zoom.w== undefined){width=0}
rlm@46 327 if(zoom.h== undefined){height=0}
rlm@46 328 textSize=zoom.h;
rlm@46 329
rlm@46 330 var zoom=VMLviewBox(this.container,left,top,lineWidth*2/3,lineWidth);
rlm@46 331 //if(zoom.w<1){zoom.w=1}
rlm@46 332 lineWidth=zoom.w;
rlm@46 333 var vml;
rlm@46 334 var shap=1;
rlm@46 335 if (shape == 'rect') {
rlm@46 336
rlm@46 337 vml = this.container.ownerDocument.createElement('v:rect');
rlm@46 338 vml.style.position = 'absolute';
rlm@46 339 vml.style.left = left;
rlm@46 340 vml.style.top = top;
rlm@46 341 vml.style.width = width;
rlm@46 342 vml.style.height = height;
rlm@46 343 }
rlm@46 344 else if (shape == 'roundrect') {
rlm@46 345 vml = this.container.ownerDocument.createElement('v:roundrect');
rlm@46 346 vml.style.position = 'absolute';
rlm@46 347 vml.style.left = left;
rlm@46 348 vml.style.top = top;
rlm@46 349 vml.style.width = width;
rlm@46 350 vml.style.height = height;
rlm@46 351 vml.setAttribute('arcsize', '20%');
rlm@46 352
rlm@46 353 }
rlm@46 354 else if (shape == 'ellipse') {
rlm@46 355 vml = this.container.ownerDocument.createElement('v:oval');
rlm@46 356 vml.style.left = left;
rlm@46 357 vml.style.top = top;
rlm@46 358 vml.style.width = width;
rlm@46 359 vml.style.height = height;
rlm@46 360 vml.style.position = 'absolute';
rlm@46 361 }
rlm@46 362 else if (shape == 'line') {
rlm@46 363
rlm@46 364 vml = this.container.ownerDocument.createElement('v:line');
rlm@46 365 vml.setAttribute('from', left + 'px,' + top + 'px');
rlm@46 366 vml.setAttribute('to', (left+width) + 'px,' + (top+height) + 'px');
rlm@46 367
rlm@46 368 }
rlm@46 369 else if (shape == 'polyline') {
rlm@46 370 vml = this.container.ownerDocument.createElement('v:polyline');
rlm@46 371 vml.setAttribute("points", points);
rlm@46 372
rlm@46 373 }
rlm@46 374 else if (shape == 'path')
rlm@46 375 {
rlm@46 376 vml = this.container.ownerDocument.createElement('v:shape');
rlm@46 377 var tokens = zoominit1.split(' ');
rlm@46 378 var tokens1 = zoominit1.split(' ');
rlm@46 379 var tokens2 = zoominit2.split(' ');
rlm@46 380 tokens[0]=0;
rlm@46 381 tokens[1]=0;
rlm@46 382 var path=points;
rlm@46 383 path=path.replace(/, /g, ',');
rlm@46 384 path=path.replace(/ ,/g, ',');
rlm@46 385 var ps =path.split(" ")
rlm@46 386 var pcc = "";
rlm@46 387
rlm@46 388 var re = /^[-]?\d*\.?\d*$/;
rlm@46 389 var contArc=0;
rlm@46 390 var isArc=false;
rlm@46 391 for(var i = 0; i < ps.length; i++)
rlm@46 392 {
rlm@46 393 if(ps[i].indexOf(',')>0){
rlm@46 394
rlm@46 395 var point =ps[i].split(",");
rlm@46 396 var char1=point[0].substring(0,1);
rlm@46 397
rlm@46 398 if (!char1.match(re))
rlm@46 399 {
rlm@46 400 var num0prev= parseFloat(point[0].substring(1));
rlm@46 401 var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));
rlm@46 402 num0=zoom.x;
rlm@46 403
rlm@46 404 var text=char1;
rlm@46 405 }else{
rlm@46 406 var num0prev= parseFloat(point[0]);
rlm@46 407 var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));
rlm@46 408 num0=zoom.x;
rlm@46 409
rlm@46 410 }
rlm@46 411 point[1]= parseFloat(point[1]);
rlm@46 412 var zoom=VMLviewBox(this.container,0,point[1],parseInt(tokens2[2]),parseInt(tokens2[3]));
rlm@46 413 point[1]=zoom.y;
rlm@46 414 var cx=num0+parseInt(tokens2[0]);
rlm@46 415 var cy=point[1]+parseInt(tokens2[1]);
rlm@46 416 pcc+=text+cx+','+cy+' ';
rlm@46 417 }
rlm@46 418 else
rlm@46 419 {
rlm@46 420 pcc+=ps[i]+' ';
rlm@46 421 }
rlm@46 422
rlm@46 423 }
rlm@46 424 ////////////////////
rlm@46 425 var thispath=pcc;
rlm@46 426 thispath=thispath.replace(/M/g,'m');
rlm@46 427 thispath=thispath.replace(/C/g,'c');
rlm@46 428 thispath=thispath.replace(/L/g,'l');
rlm@46 429 thispath=thispath.replace(/z/g,'x');
rlm@46 430
rlm@46 431 //document.getElementById('source').value=points+'\r\n'+thispath +'\r\n'+'________'+'\r\n'
rlm@46 432 var zoom=VMLviewBox(this.container,tokens[0],tokens[1],tokens[2],tokens[3]);
rlm@46 433
rlm@46 434 vml.style.position="absolute";
rlm@46 435 vml.style.width= zoom.w+"px";
rlm@46 436 vml.style.height=zoom.h+"px";
rlm@46 437 vml.style.left=zoom.x+"px";
rlm@46 438 vml.style.top=zoom.y+"px";
rlm@46 439 vml.setAttribute('coordsize', zoom.w+','+zoom.h);
rlm@46 440
rlm@46 441 var path01 = this.container.ownerDocument.createElement('v:path');
rlm@46 442 path01.setAttribute("v", thispath+' e');
rlm@46 443
rlm@46 444
rlm@46 445
rlm@46 446 vml.appendChild(path01)
rlm@46 447
rlm@46 448 }
rlm@46 449
rlm@46 450 else if (shape == 'controlpath')
rlm@46 451 {
rlm@46 452
rlm@46 453 vml = this.container.ownerDocument.createElement('v:shape');
rlm@46 454 vml.style.position="absolute";
rlm@46 455 vml.style.width= 700+"px";
rlm@46 456 vml.style.height=500+"px";
rlm@46 457 vml.style.left=left+"px";
rlm@46 458 vml.style.top=top+"px";
rlm@46 459 vml.setAttribute('coordsize', '700,500');
rlm@46 460
rlm@46 461 var path01 = this.container.ownerDocument.createElement('v:path');
rlm@46 462 path01.setAttribute('v', 'm '+left+','+top+' c'+(left+1)+','+(top+1)+' e ');
rlm@46 463
rlm@46 464 vml.appendChild(path01)
rlm@46 465 }
rlm@46 466 else if (shape == 'image') {
rlm@46 467 var data =imageHref;//document.forms[0].option_text_message.value;
rlm@46 468 vml = this.container.ownerDocument.createElement('v:image');
rlm@46 469 vml.setAttribute('src',imageHref);
rlm@46 470 vml.style.position="absolute";
rlm@46 471 vml.style.width=width+"px";
rlm@46 472 vml.style.height=height+"px";
rlm@46 473 vml.style.left=left+"px";
rlm@46 474 vml.style.top=top+"px";
rlm@46 475 vml.style.margin=0+"px";
rlm@46 476 vml.style.padding=0+"px";
rlm@46 477 if (fillColor != '' || fillColor != 'none') {
rlm@46 478 vml.setAttribute('filled', 'false');
rlm@46 479 vml.setAttribute('fillcolor', fillColor);
rlm@46 480 }
rlm@46 481 else {
rlm@46 482 vml.setAttribute('filled', 'false');
rlm@46 483 }
rlm@46 484 vml.setAttribute('strokeweight','0px');// parseFloat(lineWidth)+'px');
rlm@46 485 vml.setAttribute('stroked', 'false');
rlm@46 486 vml.setAttribute('strokecolor','#000000');//lineColor);
rlm@46 487
rlm@46 488
rlm@46 489 }
rlm@46 490
rlm@46 491 else if (shape == 'text')
rlm@46 492 {
rlm@46 493
rlm@46 494 var data =textMessaje;
rlm@46 495 vml = this.container.ownerDocument.createElement('v:shape');
rlm@46 496 vml.style.position="absolute";
rlm@46 497 //vml.setAttribute('coordorigin',left+', '+top);
rlm@46 498 //vml.style.coorsize= '';
rlm@46 499 coordorigin="0, 0"
rlm@46 500
rlm@46 501 var ts=isNaN(textSize)
rlm@46 502 if(ts==true){
rlm@46 503 textSize=10;
rlm@46 504 }
rlm@46 505 vml.style.width= textSize+'px';//tokens[2]+'px'
rlm@46 506 vml.style.height=textSize+'px';
rlm@46 507 vml.style.left=(left+"px");
rlm@46 508 vml.style.top=(top-(textSize*1/4)+"px");
rlm@46 509 vml.style.margin=0+"px";
rlm@46 510 vml.style.padding=0+"px";
rlm@46 511 vml.setAttribute('path','m '+0+' '+0+' r '+(textSize*data.length)+' '+0+' e');
rlm@46 512 var textPathObj = this.container.ownerDocument.createElement("v:textpath");
rlm@46 513 textPathObj.setAttribute('string', data);
rlm@46 514 textPathObj.setAttribute('fitshape','false');
rlm@46 515 textPathObj.setAttribute('trim', 'false');
rlm@46 516 textPathObj.setAttribute('fitpath', 'false');
rlm@46 517 textPathObj.setAttribute('on','true');
rlm@46 518 textPathObj.style.fontFamily=textFamily;
rlm@46 519 textPathObj.style.fontSize=textSize+'px';
rlm@46 520 textPathObj.setAttribute('vTextKern','true');
rlm@46 521 textPathObj.setAttribute('text-align','center');
rlm@46 522
rlm@46 523 var pathObj = this.container.ownerDocument.createElement("v:path");
rlm@46 524 pathObj.setAttribute('textpathok', 'true');
rlm@46 525 vml.appendChild(textPathObj);
rlm@46 526 vml.appendChild(pathObj);
rlm@46 527
rlm@46 528
rlm@46 529 }
rlm@46 530
rlm@46 531
rlm@46 532
rlm@46 533 else if (shape == 'texto')
rlm@46 534 {
rlm@46 535 vml = this.container.ownerDocument.createElement('v:shape');
rlm@46 536 vml.style.position="absolute";
rlm@46 537
rlm@46 538 vml.style.coordsize=1000+', '+1000;
rlm@46 539 vml.style.width= 1000;
rlm@46 540 vml.style.height=1000;
rlm@46 541 vml.style.left=left;
rlm@46 542 vml.style.top=top-parseFloat(textSize);
rlm@46 543
rlm@46 544 vml.style.padding=0;
rlm@46 545 var textBox = this.container.ownerDocument.createElement("v:textbox");
rlm@46 546 textBox.setAttribute('mso-rotate-with-shape',true)
rlm@46 547 var divtext = this.container.ownerDocument.createElement("div");
rlm@46 548 divtext.style.coordorigin=0+', '+(0);
rlm@46 549 divtext.style.margin=0;
rlm@46 550 divtext.style.fontFamily=textFamily;
rlm@46 551 divtext.style.margin=0;
rlm@46 552 divtext.style.padding=0;
rlm@46 553 divtext.style.vRotateLetters=true;
rlm@46 554 divtext.style.fontSize=parseFloat(textSize);
rlm@46 555
rlm@46 556
rlm@46 557
rlm@46 558
rlm@46 559
rlm@46 560
rlm@46 561 divtext.style.color=fillColor;
rlm@46 562
rlm@46 563
rlm@46 564
rlm@46 565
rlm@46 566
rlm@46 567 //divtext.setAttribute('v-rotate-letters','true');
rlm@46 568 if(transform.indexOf('rotate')>=0)
rlm@46 569 {
rlm@46 570
rlm@46 571 myRotate1=transform.split('rotate(');
rlm@46 572 myRotate2=myRotate1[1].split(')');
rlm@46 573 myRotate3=myRotate2[0].split(',');
rlm@46 574
rlm@46 575 //divtext.setAttribute('mso-rotate',myRotate3[0]);
rlm@46 576 //textBox.style.msoRotate= myRotate3[0];
rlm@46 577 //textBox.style.centerX=myRotate3[1];
rlm@46 578 //textBox.style.centerY=myRotate3[2];
rlm@46 579 //vml.style.rotation= myRotate3[0];
rlm@46 580 //vml.style.centerX=myRotate3[1];
rlm@46 581 //vml.style.centerY=myRotate3[2];
rlm@46 582 vml.setAttribute('rotation',myRotate3[0]+'Deg');
rlm@46 583 }
rlm@46 584
rlm@46 585 divtext.innerHTML=textMessaje;
rlm@46 586 textBox.appendChild(divtext);
rlm@46 587
rlm@46 588 vml.appendChild(textBox);
rlm@46 589
rlm@46 590 }
rlm@46 591 else if (shape == 'defs') {
rlm@46 592 var vml;
rlm@46 593
rlm@46 594 }
rlm@46 595
rlm@46 596 else if (shape == 'group') {
rlm@46 597 vml = this.container.ownerDocument.createElement('v:group');
rlm@46 598 vml.style.left=left+"px";
rlm@46 599 vml.style.top=top+"px";
rlm@46 600 }
rlm@46 601
rlm@46 602 if(shape == 'zoom' || shape == 'defs')
rlm@46 603 {
rlm@46 604
rlm@46 605 }else
rlm@46 606 {
rlm@46 607 if(transform.indexOf('rotate')>=0)
rlm@46 608 {
rlm@46 609 myRotate1=transform.split('rotate(');
rlm@46 610 myRotate2=myRotate1[1].split(')');
rlm@46 611 myRotate3=myRotate2[0].split(',');
rlm@46 612
rlm@46 613 vml.style.rotation= myRotate3[0]+'Deg';
rlm@46 614 vml.style.centerX=myRotate3[1];
rlm@46 615 vml.style.centerY=myRotate3[2];
rlm@46 616
rlm@46 617 }
rlm@46 618
rlm@46 619 if(shape != 'image' )
rlm@46 620 {
rlm@46 621 if (lineColor.length == 0){lineColor = 'none';}
rlm@46 622 if (fillColor.length == 0){fillColor = 'none';}
rlm@46 623 (fillColor!=''|| fillColor!=null )?vml.setAttribute('fillcolor', fillColor):vml.setAttribute('filled', 'true');
rlm@46 624
rlm@46 625 if (fillColor != '' || fillColor != 'none' )
rlm@46 626 {
rlm@46 627 vml.setAttribute('filled', 'true');
rlm@46 628 vml.setAttribute('fillcolor', fillColor);
rlm@46 629
rlm@46 630 }
rlm@46 631 else
rlm@46 632 {
rlm@46 633 vml.setAttribute('filled', 'false');
rlm@46 634 }
rlm@46 635
rlm@46 636
rlm@46 637 if(lineWidth==0 || lineWidth=='none' || lineColor== 'none' )
rlm@46 638 {
rlm@46 639 vml.setAttribute('stroked', 'false');
rlm@46 640 }
rlm@46 641 else
rlm@46 642 {
rlm@46 643 //if(isNaN(lineColor)==false){alert('-'+lineColor+'-');lineColor='#000000';lineWidth=1;}
rlm@46 644 vml.setAttribute('stroked', 'true');
rlm@46 645 vml.setAttribute('strokecolor', lineColor);
rlm@46 646 vml.setAttribute('strokeweight', lineWidth);
rlm@46 647 var stroke = this.container.ownerDocument.createElement('v:stroke');
rlm@46 648 stroke.setAttribute("opacity", parseFloat(lineOpac));
rlm@46 649 vml.appendChild(stroke);
rlm@46 650
rlm@46 651 }
rlm@46 652
rlm@46 653 if (fillOpac != '')
rlm@46 654 {
rlm@46 655 if (fillOpac == 'none' || fillColor=='none'){fillOpac=0;}
rlm@46 656 var fill = this.container.ownerDocument.createElement('v:fill');
rlm@46 657 fill.setAttribute("opacity",parseFloat(fillOpac));
rlm@46 658 //alert(fillOpac)
rlm@46 659 vml.appendChild(fill);
rlm@46 660 }
rlm@46 661 }
rlm@46 662 }
rlm@46 663 if(parent==''){
rlm@46 664 if(vml){
rlm@46 665 this.container.appendChild(vml);}
rlm@46 666 }else{
rlm@46 667 if(document.getElementById(parent)){
rlm@46 668 var parentShape = document.getElementById(parent);
rlm@46 669 if(vml||vml!=null ){
rlm@46 670 parentShape.appendChild(vml);
rlm@46 671 }
rlm@46 672 }
rlm@46 673 }
rlm@46 674 //var parentDoc = document.getElementById('mydraw');
rlm@46 675 //parentDoc.appendChild(vml);
rlm@46 676 return vml;
rlm@46 677 };
rlm@46 678
rlm@46 679 VMLRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {
rlm@46 680 var deltaX = toX - fromX;
rlm@46 681 var deltaY = toY - fromY;
rlm@46 682 if (shape.tagName == 'rect' )
rlm@46 683 {
rlm@46 684
rlm@46 685
rlm@46 686 if (deltaX < 0) {
rlm@46 687 shape.style.left=toX + 'px';
rlm@46 688 shape.style.width=-deltaX + 'px';
rlm@46 689 }
rlm@46 690 else
rlm@46 691 {
rlm@46 692 shape.style.width= deltaX + 'px';
rlm@46 693 }
rlm@46 694
rlm@46 695 if (deltaY < 0)
rlm@46 696 {
rlm@46 697 shape.style.top=toY + 'px';
rlm@46 698 shape.style.height=-deltaY + 'px';
rlm@46 699 }
rlm@46 700 else
rlm@46 701 {
rlm@46 702 shape.style.height=deltaY + 'px';
rlm@46 703 }
rlm@46 704 }
rlm@46 705 }
rlm@46 706 VMLRenderer.prototype.duplicate = function(shape)
rlm@46 707 {
rlm@46 708 var vml;
rlm@46 709 vml =shape.cloneNode(false);
rlm@46 710 //vml.setAttribute('fillcolor', "#aa00aa");
rlm@46 711 vml.setAttribute('filled', "false");
rlm@46 712 this.container.appendChild(vml);
rlm@46 713 return vml;
rlm@46 714
rlm@46 715 };
rlm@46 716 VMLRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)
rlm@46 717 {
rlm@46 718 var result = true;
rlm@46 719 var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';
rlm@46 720
rlm@46 721 //if(shape.getBBox && shape)
rlm@46 722 if( shapes.indexOf(' '+shape.tagName+',')>0)
rlm@46 723 {
rlm@46 724
rlm@46 725 var box = this.bounds(shape);
rlm@46 726 }else
rlm@46 727 {
rlm@46 728 return false;
rlm@46 729 }
rlm@46 730 var p1x = box.x;
rlm@46 731 if(Math.abs(p1x-centerx)>width){result = false}
rlm@46 732
rlm@46 733 var p1y = box.y;
rlm@46 734 if(Math.abs(p1y-centery)>height){result = false}
rlm@46 735
rlm@46 736 var p2x = box.x+box.width;
rlm@46 737 if(Math.abs(p2x-centerx)>width){result = false}
rlm@46 738
rlm@46 739 var p2y = box.y;
rlm@46 740 if(Math.abs(p2y-centery)>height){result = false}
rlm@46 741
rlm@46 742 var p3x = box.x+box.width;
rlm@46 743 if(Math.abs(p3x-centerx)>width){result = false}
rlm@46 744
rlm@46 745 var p3y = box.y+box.height;
rlm@46 746 if(Math.abs(p3y-centery)>height){result = false}
rlm@46 747
rlm@46 748 var p4x = box.x;
rlm@46 749 if(Math.abs(p4x-centerx)>width){result = false}
rlm@46 750
rlm@46 751 var p4y = box.y+box.height;
rlm@46 752 if(Math.abs(p4y-centery)>height){result = false}
rlm@46 753
rlm@46 754 if(result)
rlm@46 755 {
rlm@46 756 return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };
rlm@46 757 }
rlm@46 758 else
rlm@46 759 {
rlm@46 760 return { 'in':result }
rlm@46 761 }
rlm@46 762 //center.distanceFrom(point1);
rlm@46 763
rlm@46 764
rlm@46 765 }
rlm@46 766
rlm@46 767 VMLRenderer.prototype.searchBoxes = function()
rlm@46 768 {
rlm@46 769 var base = this.container;
rlm@46 770
rlm@46 771 var NumNodes = base.childNodes.length;
rlm@46 772 var chain= '';
rlm@46 773 for(i = 0;i < NumNodes;i++)
rlm@46 774 {
rlm@46 775 if (this.bounds(base.childNodes[i]))
rlm@46 776 {
rlm@46 777 chain+=base.childNodes[i].id + ';'
rlm@46 778 }
rlm@46 779 }
rlm@46 780 chain+=''
rlm@46 781 return chain;
rlm@46 782
rlm@46 783 }
rlm@46 784
rlm@46 785 VMLRenderer.prototype.DrawBorder= function(numNode, targetElement )
rlm@46 786 {
rlm@46 787 var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';
rlm@46 788
rlm@46 789 //if(shape.getBBox && shape)
rlm@46 790 if( shapes.indexOf(' '+targetElement.tagName+',')>0)
rlm@46 791 {
rlm@46 792 var bbox = this.bounds(targetElement);
rlm@46 793
rlm@46 794 var outline = this.container.ownerDocument.createElement('v:rect');
rlm@46 795 outline.setAttribute('x', bbox.x - 2 );
rlm@46 796 outline.setAttribute('y', bbox.y - 2 );
rlm@46 797 outline.setAttribute('width', bbox.width + 4 );
rlm@46 798 outline.setAttribute('height', bbox.height + 4 );
rlm@46 799 outline.setAttribute('stroke', '#ff00ff' );
rlm@46 800 outline.setAttribute('fill', 'none' );
rlm@46 801 outline.setAttribute('id', 'shapeBoxed'+numNode );
rlm@46 802
rlm@46 803 targetElement.parentNode.insertBefore( outline, targetElement );
rlm@46 804 return 'shapeBoxed'+numNode;
rlm@46 805 }
rlm@46 806 else
rlm@46 807 {
rlm@46 808 return false
rlm@46 809 }
rlm@46 810 }
rlm@46 811
rlm@46 812
rlm@46 813 VMLRenderer.prototype.getMarkup = function() {
rlm@46 814
rlm@46 815 //return this.container.parentNode.innerHTML;
rlm@46 816 return this.container.innerHTML;
rlm@46 817 }
rlm@46 818
rlm@46 819 VMLRenderer.prototype.remove = function(shape) {
rlm@46 820 if(shape!=null){ shape.removeNode(true); }
rlm@46 821 }
rlm@46 822
rlm@46 823 VMLRenderer.prototype.removeAll = function() {
rlm@46 824 while( this.container.hasChildNodes () ){
rlm@46 825 this.container.removeChild( this.container.firstChild );
rlm@46 826 //this.container.removeNode( this.container.firstChild );
rlm@46 827 }
rlm@46 828 }
rlm@46 829
rlm@46 830 VMLRenderer.prototype.editCommand = function(shape, cmd, value)
rlm@46 831 {
rlm@46 832 if (shape != null) {
rlm@46 833 if (cmd == 'fillcolor') {
rlm@46 834 if (value == '' || value =='none')
rlm@46 835 shape.style.fill='none';
rlm@46 836 else
rlm@46 837 shape.style.fill=value;
rlm@46 838 }
rlm@46 839 else if (cmd == 'linecolor') {
rlm@46 840 if (value != '')
rlm@46 841 shape.style.stroke=value;
rlm@46 842 else
rlm@46 843 shape.style.stroke='none';
rlm@46 844 }
rlm@46 845 else if (cmd == 'linewidth') {
rlm@46 846 if( value=='none' || value=='')
rlm@46 847 {
rlm@46 848 shape.style.strokeWidth=0;
rlm@46 849 }else{
rlm@46 850 shape.style.strokeWidth=parseInt(value) + 'px';
rlm@46 851 }
rlm@46 852 }
rlm@46 853 else if (cmd == 'fillopacity') {
rlm@46 854 if(shape.tagName=='image')
rlm@46 855 {
rlm@46 856 shape.style.opacity=parseFloat(value);
rlm@46 857 }
rlm@46 858 else
rlm@46 859 {
rlm@46 860 shape.style.fillOpacity=parseFloat(value);
rlm@46 861 }
rlm@46 862
rlm@46 863 }
rlm@46 864 else if (cmd == 'lineopacity') {
rlm@46 865
rlm@46 866 shape.style.strokeOpacity=parseFloat(value);
rlm@46 867
rlm@46 868 }
rlm@46 869 else if (cmd == 'filter')
rlm@46 870 {
rlm@46 871 if (value != '')
rlm@46 872 {
rlm@46 873 //shape.style.setProperty("filter", value) ;
rlm@46 874 shape.style.filter=value;
rlm@46 875 //alert(value)
rlm@46 876 }
rlm@46 877 }
rlm@46 878 else if (cmd == 'textContent')
rlm@46 879 {
rlm@46 880 if (value != '')
rlm@46 881 {
rlm@46 882 shape.textContent=value;
rlm@46 883 }
rlm@46 884 }
rlm@46 885 else if (cmd == 'textSize')
rlm@46 886 {
rlm@46 887 if (value != '')
rlm@46 888 {
rlm@46 889 shape.style.fontSize=parseFloat(eval(value));
rlm@46 890 }
rlm@46 891 }
rlm@46 892 else if (cmd == 'textFamily')
rlm@46 893 {
rlm@46 894 if (value != '')
rlm@46 895 {
rlm@46 896 shape.style.fontFamily=value;
rlm@46 897 }
rlm@46 898 }
rlm@46 899 else if (cmd == 'textSpacing')
rlm@46 900 {
rlm@46 901 if (value != '')
rlm@46 902 {
rlm@46 903 shape.style.letterSpacing=''+value+'em';
rlm@46 904 //alert(value) //bad letter-spacing word-spacing
rlm@46 905 }
rlm@46 906 }
rlm@46 907 else if (cmd == 'textLength')
rlm@46 908 {
rlm@46 909 if (value != '')
rlm@46 910 {
rlm@46 911 //shape.style.=''+value+'';
rlm@46 912 shape.style.lengthAdjust='spacing';//spacing spacingAndGlyphs
rlm@46 913 //alert(value) //bad textLength
rlm@46 914 }
rlm@46 915 }
rlm@46 916
rlm@46 917
rlm@46 918 else if (cmd == 'textAnchor')
rlm@46 919 {
rlm@46 920 if (value != '')
rlm@46 921 {
rlm@46 922 shape.style.textAnchor=value;
rlm@46 923 }
rlm@46 924 }
rlm@46 925 else if (cmd == 'textWeight')
rlm@46 926 {
rlm@46 927 if (value != '')
rlm@46 928 {
rlm@46 929 shape.style.fontWeight=value;
rlm@46 930 }
rlm@46 931 }
rlm@46 932 else if (cmd == 'textStyle')
rlm@46 933 {
rlm@46 934 if (value != '')
rlm@46 935 {
rlm@46 936 shape.style.fontStyle=value;
rlm@46 937 }
rlm@46 938 }
rlm@46 939 else if (cmd == 'textDecoration')
rlm@46 940 {
rlm@46 941 if (value != '')
rlm@46 942 {
rlm@46 943 shape.style.textDecoration=value;
rlm@46 944 }
rlm@46 945 //alert(value) //bad textDecoration
rlm@46 946 }
rlm@46 947 else if (cmd == 'textMode')
rlm@46 948 {
rlm@46 949 if (value != '')
rlm@46 950 {
rlm@46 951 shape.style.writingMode=value;
rlm@46 952 }
rlm@46 953 }
rlm@46 954 else if (cmd == 'textDirection')
rlm@46 955 {
rlm@46 956 if (value != '')
rlm@46 957 {
rlm@46 958 shape.style.direction=value;
rlm@46 959 }
rlm@46 960 }
rlm@46 961 else if (cmd == 'textOrientation')
rlm@46 962 {
rlm@46 963 if (value != '')
rlm@46 964 {
rlm@46 965 shape.style.glyphOrientationVertical=value;
rlm@46 966 }
rlm@46 967 }
rlm@46 968 else if (cmd == 'stopcolor')
rlm@46 969 {
rlm@46 970 if (value != '')
rlm@46 971 {
rlm@46 972 shape.style.stopColor=value;
rlm@46 973 }
rlm@46 974 }
rlm@46 975 else if (cmd == 'linearGradient')
rlm@46 976 {
rlm@46 977 if (value != '')
rlm@46 978 {
rlm@46 979 shape.style.x1=value.x1;
rlm@46 980 shape.style.y1=value.y1;
rlm@46 981 shape.style.x2=value.x2;
rlm@46 982 shape.style.y2=value.y2;
rlm@46 983 }
rlm@46 984 }
rlm@46 985 else if (cmd == 'radialGradient')
rlm@46 986 {
rlm@46 987 if (value != '')
rlm@46 988 {
rlm@46 989 shape.style.x1=value.x1;
rlm@46 990 shape.style.y1=value.y1;
rlm@46 991 shape.style.x2=value.x2;
rlm@46 992 shape.style.y2=value.y2;
rlm@46 993 }
rlm@46 994 }
rlm@46 995 else if (cmd == 'leftTop')
rlm@46 996 {
rlm@46 997 if (value != '')
rlm@46 998 {
rlm@46 999 shape.style.left=parseInt(value.left)+'px';
rlm@46 1000 shape.style.top=parseInt(value.top)+'px';
rlm@46 1001
rlm@46 1002 }
rlm@46 1003 }
rlm@46 1004 else if (cmd == 'cxcy')
rlm@46 1005 {
rlm@46 1006 if (value != '')
rlm@46 1007 {
rlm@46 1008 shape.style.cx=value.cx;
rlm@46 1009 shape.style.cy=value.cy;
rlm@46 1010
rlm@46 1011 }
rlm@46 1012 }
rlm@46 1013
rlm@46 1014 }
rlm@46 1015 }
rlm@46 1016
rlm@46 1017
rlm@46 1018 VMLRenderer.prototype.queryCommand = function(shape, cmd)
rlm@46 1019 {
rlm@46 1020 var result = '';
rlm@46 1021
rlm@46 1022 if (shape != null) {
rlm@46 1023 if (cmd == 'fillcolor') {
rlm@46 1024 result = shape.style.fill;
rlm@46 1025 if (result == 'none')
rlm@46 1026 result = '';
rlm@46 1027 }
rlm@46 1028 else if (cmd == 'linecolor') {
rlm@46 1029 result = shape.style.stroke;
rlm@46 1030 if (result == 'none')
rlm@46 1031 result = '';
rlm@46 1032 }
rlm@46 1033 else if (cmd == 'linewidth') {
rlm@46 1034 result = shape.style.stroke;
rlm@46 1035 if (result == 'none')
rlm@46 1036 result = '';
rlm@46 1037 else
rlm@46 1038 result = shape.style.strokeWidth;
rlm@46 1039 }
rlm@46 1040 else if (cmd == 'fillopacity') {
rlm@46 1041 if(shape.tagName=='image')
rlm@46 1042 {
rlm@46 1043 result= shape.style.opacity;
rlm@46 1044 }
rlm@46 1045 else
rlm@46 1046 {
rlm@46 1047 result= shape.style.fillOpacity;
rlm@46 1048 }
rlm@46 1049
rlm@46 1050 }
rlm@46 1051 else if (cmd == 'lineopacity') {
rlm@46 1052
rlm@46 1053 result= shape.style.strokeOpacity;
rlm@46 1054
rlm@46 1055 }
rlm@46 1056 else if (cmd == 'text') {
rlm@46 1057 var text1=shape.textContent;
rlm@46 1058 var text2=shape.style.fontFamily;
rlm@46 1059 var text3=parseInt(shape.style.fontSize);
rlm@46 1060
rlm@46 1061 result= {"data":text1,"family":text2,"size":text3};
rlm@46 1062
rlm@46 1063 }
rlm@46 1064 else if (cmd == 'points') {
rlm@46 1065 result=shape.style,d;
rlm@46 1066
rlm@46 1067 }
rlm@46 1068 else if (cmd == 'stopcolor') {
rlm@46 1069 result=shape.style.stopColor
rlm@46 1070
rlm@46 1071 }
rlm@46 1072 else if (cmd == 'box') {
rlm@46 1073 result= this.bounds(shape);
rlm@46 1074
rlm@46 1075 }
rlm@46 1076 else if (cmd == 'linearGradient') {
rlm@46 1077 var x1=shape.style.x1;
rlm@46 1078 var y1=shape.style.y1;
rlm@46 1079 var x2=shape.style.x2;
rlm@46 1080 var y2=shape.style.y2;
rlm@46 1081 result= {"x1":x1,"y1":y1,"x2":x2,"y2":y2};
rlm@46 1082
rlm@46 1083 }
rlm@46 1084
rlm@46 1085
rlm@46 1086 }
rlm@46 1087
rlm@46 1088 return result;
rlm@46 1089 }
rlm@46 1090
rlm@46 1091 VMLRenderer.prototype.showTracker01 = function(shape) {
rlm@46 1092 var box = this.bounds(shape);
rlm@46 1093
rlm@46 1094 var tracker = document.getElementById('tracker');
rlm@46 1095 if (tracker) {
rlm@46 1096 this.remove(tracker);
rlm@46 1097 }
rlm@46 1098
rlm@46 1099 tracker = this.container.ownerDocument.createElement('v:rect');
rlm@46 1100 tracker.id = 'tracker';
rlm@46 1101 tracker.style.position = 'absolute';
rlm@46 1102 tracker.style.left = box.x - 10;
rlm@46 1103 tracker.style.top = box.y - 10;
rlm@46 1104 tracker.style.width = box.width + 20;
rlm@46 1105 tracker.style.height = box.height + 20;
rlm@46 1106 tracker.setAttribute('filled', 'false');
rlm@46 1107 tracker.setAttribute('stroked', 'true');
rlm@46 1108 tracker.setAttribute('strokecolor', 'blue');
rlm@46 1109 tracker.setAttribute('strokeweight', '1px');
rlm@46 1110 this.container.appendChild(tracker);
rlm@46 1111 }
rlm@46 1112
rlm@46 1113
rlm@46 1114 VMLRenderer.prototype.showTracker = function(shape) {
rlm@46 1115 var box = this.bounds(shape);
rlm@46 1116 //alert(box.width+' '+shape.id)
rlm@46 1117 var trshape = parseFloat(shape.getAttribute('rotation'));
rlm@46 1118 var tracker = document.getElementById('tracker');
rlm@46 1119
rlm@46 1120 if (tracker) {
rlm@46 1121 this.remove(tracker);
rlm@46 1122 }
rlm@46 1123
rlm@46 1124 if (shape.tagName == 'shape')
rlm@46 1125 {
rlm@46 1126 shap=2;
rlm@46 1127 if(shape.children[0].tagName == 'path')
rlm@46 1128 {
rlm@46 1129
rlm@46 1130 /* $('option_path_trx').value= box.x;
rlm@46 1131 $('option_path_try').value= box.y;
rlm@46 1132 $('option_path_sclx').value= box.width;
rlm@46 1133 $('option_path_scly').value= box.height;
rlm@46 1134 $('option_path_rot').value= shape.style.rotation;
rlm@46 1135 */
rlm@46 1136 //var path=shape.children[0].getAttribute('v');
rlm@46 1137 // $('control_codebase').value=path;
rlm@46 1138 }
rlm@46 1139 }
rlm@46 1140 if (shape.tagName == 'rect') {
rlm@46 1141 /*
rlm@46 1142 $('option_rect_rot').value= shape.getAttribute('rotation');
rlm@46 1143 $('option_rect_trx').value= box.x;
rlm@46 1144 $('option_rect_try').value= box.y;
rlm@46 1145 $('option_rect_sclx').value= box.width;
rlm@46 1146 $('option_rect_scly').value= box.height;
rlm@46 1147 */
rlm@46 1148 }
rlm@46 1149
rlm@46 1150 if (shape.tagName == 'image'){
rlm@46 1151 /* $('option_img_trx').value= box.x;
rlm@46 1152 $('option_img_try').value= box.y;
rlm@46 1153 $('option_img_sclx').value= box.width;
rlm@46 1154 $('option_img_scly').value= box.height;
rlm@46 1155 $('option_img_rot').value= T.b* (Math.PI * 2 / 360);
rlm@46 1156 */
rlm@46 1157 }
rlm@46 1158 if (shape.tagName == 'text'){
rlm@46 1159 /* f$('option_text_trx').value= box.x;
rlm@46 1160 $('option_text_try').value= box.y;
rlm@46 1161 $('option_text_sclx').value= box.width;
rlm@46 1162 $('option_text_scly').value= box.height;
rlm@46 1163 $('option_text_rot').value= T.b* (Math.PI * 2 / 360);
rlm@46 1164 */
rlm@46 1165 }
rlm@46 1166 if (shape.tagName == 'line'){
rlm@46 1167 /*
rlm@46 1168 $('option_line_trx').value= box.x;
rlm@46 1169 $('option_line_try').value= box.y;
rlm@46 1170 */
rlm@46 1171 }
rlm@46 1172 if (shape.tagName == 'oval'){
rlm@46 1173 /*$('option_ellipse_trx').value= putx;
rlm@46 1174 $('option_ellipse_try').value= puty;
rlm@46 1175 $('option_ellipse_sclx').value= box.width;
rlm@46 1176 $('option_ellipse_scly').value= box.height;
rlm@46 1177 $('option_ellipse_rot').value= T.b* (Math.PI * 2 / 360);
rlm@46 1178 */
rlm@46 1179 }
rlm@46 1180
rlm@46 1181
rlm@46 1182
rlm@46 1183 /*var matrix = shape.getScreenCTM();
rlm@46 1184 var trshape= shape.getAttribute('transform');
rlm@46 1185 var shap=1;
rlm@46 1186 if (shape.tagName == 'path') { shap=2;
rlm@46 1187
rlm@46 1188
rlm@46 1189
rlm@46 1190 }
rlm@46 1191 */
rlm@46 1192 //if (shape.getAttribute('transform') ) { shap=2; }
rlm@46 1193 //var svgNamespace = 'http://www.w3.org/2000/svg';
rlm@46 1194
rlm@46 1195 tracker = this.container.ownerDocument.createElement('v:group');
rlm@46 1196 tracker.id = 'tracker';
rlm@46 1197 //tracker.setAttribute('rotation',trshape);
rlm@46 1198 tracker.setAttribute('coordorigin','0, 0');
rlm@46 1199 //tracker.setAttribute('wrapcoords',true);
rlm@46 1200
rlm@46 1201
rlm@46 1202 tracker.setAttribute('coordsize',box.width+','+ box.height);
rlm@46 1203 tracker.style.position = 'absolute';
rlm@46 1204 tracker.style.left = box.x ;
rlm@46 1205 tracker.style.top = box.y;
rlm@46 1206 tracker.style.width = box.width ;
rlm@46 1207 tracker.style.height = box.height ;
rlm@46 1208
rlm@46 1209
rlm@46 1210 ////////////////
rlm@46 1211
rlm@46 1212
rlm@46 1213 var corners = [];
rlm@46 1214 var point = createPoint(box.x, box.y, box.width, box.height);
rlm@46 1215 //point = {x:box.x, y:box.y, width: box.width, height:box.height};
rlm@46 1216 //point = createPoint(box.x, box.y, box.width, box.height);
rlm@46 1217 //1
rlm@46 1218 corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );
rlm@46 1219 point.x = box.x + box.width;
rlm@46 1220 point.y = box.y;
rlm@46 1221 //2
rlm@46 1222 corners.push( createPoint(box.x + box.width, box.y + box.height, box.width, box.height) );
rlm@46 1223 point.x = box.x + box.width;
rlm@46 1224 point.y = box.y + box.height;
rlm@46 1225 //3
rlm@46 1226 //corners.push( point.matrixTransform(matrix) );
rlm@46 1227 corners.push( createPoint(box.x , box.y + box.height, box.width, box.height) );
rlm@46 1228 point.x = box.x;
rlm@46 1229 point.y = box.y + box.height;
rlm@46 1230 //4
rlm@46 1231 corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );
rlm@46 1232
rlm@46 1233 var max = createPoint(corners[0].x, corners[0].y);
rlm@46 1234 var min = createPoint(corners[0].x, corners[0].y);
rlm@46 1235
rlm@46 1236 for (var i = 1; i < corners.length; i++) {
rlm@46 1237 var x = corners[i].x;
rlm@46 1238 var y = corners[i].y;
rlm@46 1239 if (x < min.x) {
rlm@46 1240 min.x = x;
rlm@46 1241 }
rlm@46 1242 else if (x > max.x) {
rlm@46 1243 max.x = x;
rlm@46 1244 }
rlm@46 1245 if (y < min.y) {
rlm@46 1246 min.y = y;
rlm@46 1247 }
rlm@46 1248 else if (y > max.y) {
rlm@46 1249 max.y = y;
rlm@46 1250 }
rlm@46 1251 }
rlm@46 1252
rlm@46 1253
rlm@46 1254 var border_square = this.container.ownerDocument.createElement('v:rect');
rlm@46 1255
rlm@46 1256 border_square.style.position = 'relative';
rlm@46 1257 border_square.style.left = 0 - 10;
rlm@46 1258 border_square.style.top = 0 - 10;
rlm@46 1259 border_square.style.width = box.width + 20;
rlm@46 1260 border_square.style.height = box.height + 20;
rlm@46 1261 border_square.setAttribute('filled', 'false');
rlm@46 1262 border_square.setAttribute('stroked', 'true');
rlm@46 1263 border_square.setAttribute('strokecolor', 'blue');
rlm@46 1264 border_square.setAttribute('strokeweight', '1px');
rlm@46 1265
rlm@46 1266
rlm@46 1267 var border_angle = this.container.ownerDocument.createElement('v:polyline');
rlm@46 1268 border_angle.style.position = 'relative';
rlm@46 1269
rlm@46 1270 border_angle.setAttribute('filled', 'false');
rlm@46 1271 border_angle.setAttribute('stroked', 'true');
rlm@46 1272 border_angle.setAttribute('strokecolor', 'blue');
rlm@46 1273 border_angle.setAttribute('strokeweight', '1px');
rlm@46 1274 border_angle.setAttribute("points", (box.width+10)+","+((box.height/2))+", "+(box.width+10+25)+","+((box.height/2)) );
rlm@46 1275
rlm@46 1276
rlm@46 1277 var circle1 = this.container.ownerDocument.createElement('v:oval');
rlm@46 1278 circle1.style.position = 'relative';
rlm@46 1279 circle1.style.left = ( (box.width+40)-5);
rlm@46 1280 circle1.style.top = ( (box.height / 2) -5);
rlm@46 1281 circle1.style.width = (10);
rlm@46 1282 circle1.style.height = (10);
rlm@46 1283 circle1.setAttribute('filled', 'true');
rlm@46 1284 circle1.setAttribute('stroked', 'true');
rlm@46 1285 circle1.setAttribute('fillcolor', '#ffffff');
rlm@46 1286 circle1.setAttribute('strokecolor', 'green');
rlm@46 1287 circle1.setAttribute('strokeweight', '1px');
rlm@46 1288
rlm@46 1289
rlm@46 1290 var rect1 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1291 rect1.style.position = 'relative';
rlm@46 1292 rect1.style.left = - 10-5;
rlm@46 1293 rect1.style.top = - 10-5;
rlm@46 1294 rect1.style.width = 10;
rlm@46 1295 rect1.style.height = 10;
rlm@46 1296 rect1.setAttribute('filled', 'true');
rlm@46 1297 rect1.setAttribute('stroked', 'true');
rlm@46 1298 rect1.setAttribute('fillcolor', '#ffffff');
rlm@46 1299 rect1.setAttribute('strokecolor', 'green');
rlm@46 1300 rect1.setAttribute('strokeweight', '1px');
rlm@46 1301
rlm@46 1302
rlm@46 1303 var rect2 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1304 rect2.style.position = 'relative';
rlm@46 1305 rect2.style.left = box.width +5;
rlm@46 1306 rect2.style.top = -10 -5;
rlm@46 1307 rect2.style.width = 10;
rlm@46 1308 rect2.style.height = 10;
rlm@46 1309 rect2.setAttribute('filled', 'true');
rlm@46 1310 rect2.setAttribute('stroked', 'true');
rlm@46 1311 rect2.setAttribute('fillcolor', '#ffffff');
rlm@46 1312 rect2.setAttribute('strokecolor', 'green');
rlm@46 1313 rect2.setAttribute('strokeweight', '1px');
rlm@46 1314
rlm@46 1315
rlm@46 1316 var rect3 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1317 rect3.style.position = 'relative';
rlm@46 1318 rect3.style.left = box.width+5;
rlm@46 1319 rect3.style.top = box.height+5;
rlm@46 1320 rect3.style.width = 10;
rlm@46 1321 rect3.style.height = 10;
rlm@46 1322 rect3.setAttribute('filled', 'true');
rlm@46 1323 rect3.setAttribute('stroked', 'true');
rlm@46 1324 rect3.setAttribute('fillcolor', '#ffffff');
rlm@46 1325 rect3.setAttribute('strokecolor', 'green');
rlm@46 1326 rect3.setAttribute('strokeweight', '1px');
rlm@46 1327
rlm@46 1328 var rect4 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1329 rect4.style.position = 'relative';
rlm@46 1330 rect4.style.left = -10-5;
rlm@46 1331 rect4.style.top = box.height+5;
rlm@46 1332 rect4.style.width = 10;
rlm@46 1333 rect4.style.height = 10;
rlm@46 1334 rect4.setAttribute('filled', 'true');
rlm@46 1335 rect4.setAttribute('stroked', 'true');
rlm@46 1336 rect4.setAttribute('fillcolor', '#ffffff');
rlm@46 1337 rect4.setAttribute('strokecolor', 'green');
rlm@46 1338 rect4.setAttribute('strokeweight', '1px');
rlm@46 1339
rlm@46 1340
rlm@46 1341
rlm@46 1342 var rectmid12 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1343 rectmid12.style.position = 'relative';
rlm@46 1344 rectmid12.style.left = (box.width/2) -5;
rlm@46 1345 rectmid12.style.top =- 10-5;
rlm@46 1346 rectmid12.style.width = 10;
rlm@46 1347 rectmid12.style.height = 10;
rlm@46 1348 rectmid12.setAttribute('filled', 'true');
rlm@46 1349 rectmid12.setAttribute('stroked', 'true');
rlm@46 1350 rectmid12.setAttribute('fillcolor', '#ffffff');
rlm@46 1351 rectmid12.setAttribute('strokecolor', 'green');
rlm@46 1352 rectmid12.setAttribute('strokeweight', '1px');
rlm@46 1353
rlm@46 1354 var rectmid23 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1355 rectmid23.style.position = 'relative';
rlm@46 1356 rectmid23.style.left = box.width +5;
rlm@46 1357 rectmid23.style.top = (box.height/2)-5;
rlm@46 1358 rectmid23.style.width = 10;
rlm@46 1359 rectmid23.style.height = 10;
rlm@46 1360 rectmid23.setAttribute('filled', 'true');
rlm@46 1361 rectmid23.setAttribute('stroked', 'true');
rlm@46 1362 rectmid23.setAttribute('fillcolor', '#ffffff');
rlm@46 1363 rectmid23.setAttribute('strokecolor', 'green');
rlm@46 1364 rectmid23.setAttribute('strokeweight', '1px');
rlm@46 1365
rlm@46 1366 var rectmid34 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1367 rectmid34.style.position = 'relative';
rlm@46 1368 rectmid34.style.left = (box.width/2)-5;
rlm@46 1369 rectmid34.style.top = box.height+5;
rlm@46 1370 rectmid34.style.width = 10;
rlm@46 1371 rectmid34.style.height = 10;
rlm@46 1372 rectmid34.setAttribute('filled', 'true');
rlm@46 1373 rectmid34.setAttribute('stroked', 'true');
rlm@46 1374 rectmid34.setAttribute('fillcolor', '#ffffff');
rlm@46 1375 rectmid34.setAttribute('strokecolor', '#000000');
rlm@46 1376 rectmid34.setAttribute('strokeweight', '1px');
rlm@46 1377
rlm@46 1378
rlm@46 1379 var rectmid41 = this.container.ownerDocument.createElement('v:rect');
rlm@46 1380 rectmid41.style.position = 'relative';
rlm@46 1381 rectmid41.style.left = -10-5 ;
rlm@46 1382 rectmid41.style.top =(box.height/2)-5;
rlm@46 1383 rectmid41.style.width = 10;
rlm@46 1384 rectmid41.style.height = 10;
rlm@46 1385 rectmid41.setAttribute('filled', 'true');
rlm@46 1386 rectmid41.setAttribute('stroked', 'true');
rlm@46 1387 rectmid41.setAttribute('fillcolor', '#ffffff');
rlm@46 1388 rectmid41.setAttribute('strokecolor', 'green');
rlm@46 1389 rectmid41.setAttribute('strokeweight', '1px');
rlm@46 1390
rlm@46 1391
rlm@46 1392
rlm@46 1393
rlm@46 1394 var colorin="#ff0000";
rlm@46 1395 var colorout="#ffffff"
rlm@46 1396
rlm@46 1397 circle1.attachEvent("onmouseover", function(event) {circle1.style.cursor= 's-resize'; circle1.setAttribute('fillcolor', colorin ); typeTransform='Rotate'; scaleType='nw'; }, false);
rlm@46 1398 circle1.attachEvent("onmouseout", function(event) {circle1.style.cursor= 'default'; circle1.setAttribute('fillcolor', colorout ); typeTransform='Rotate'; }, false); //typeTransform='rotate'
rlm@46 1399
rlm@46 1400
rlm@46 1401 rect1.attachEvent("onmouseover", function(event) {rect1.style.cursor= 'nw-resize'; rect1.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='nw'; }, false);
rlm@46 1402 rect1.attachEvent("onmouseout", function(event) {rect1.style.cursor= 'default'; rect1.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false); //typeTransform='rotate'
rlm@46 1403
rlm@46 1404 rect2.attachEvent("onmouseover", function(event) {rect2.style.cursor= 'ne-resize'; rect2.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='ne';}, false);
rlm@46 1405 rect2.attachEvent("onmouseout", function(event) {rect2.style.cursor= 'default'; rect2.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);
rlm@46 1406
rlm@46 1407 rect3.attachEvent("onmouseover", function(event) {rect3.style.cursor= 'se-resize'; rect3.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='se';}, false);
rlm@46 1408 rect3.attachEvent("onmouseout", function(event) {rect3.style.cursor= 'default'; rect3.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);
rlm@46 1409
rlm@46 1410 rect4.attachEvent("onmouseover", function(event) {rect4.style.cursor= 'sw-resize'; rect4.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='sw';}, false);
rlm@46 1411 rect4.attachEvent("onmouseout", function(event) {rect4.style.cursor= 'default'; rect4.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);
rlm@46 1412
rlm@46 1413 rectmid12.attachEvent("onmouseover", function(event) {rectmid12.style.cursor= 'n-resize'; rectmid12.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='n';}, false);
rlm@46 1414 rectmid12.attachEvent("onmouseout", function(event) {rectmid12.style.cursor= 'default'; rectmid12.setAttribute('fillcolor', colorout ); typeTransform=''; }, false);
rlm@46 1415
rlm@46 1416 rectmid23.attachEvent("onmouseover", function(event) {rectmid23.style.cursor= 'e-resize'; rectmid23.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='e';}, false);
rlm@46 1417 rectmid23.attachEvent("onmouseout", function(event) {rectmid23.style.cursor= 'default'; rectmid23.setAttribute('fillcolor', colorout ); typeTransform=''; }, false);
rlm@46 1418
rlm@46 1419 rectmid34.attachEvent("onmouseover", function(event) {rectmid34.style.cursor= 's-resize'; rectmid34.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='s';}, false);
rlm@46 1420 rectmid34.attachEvent("onmouseout", function(event) {rectmid34.style.cursor= 'default'; rectmid34.setAttribute('fillcolor', colorout ); typeTransform=''; }, false);
rlm@46 1421
rlm@46 1422 rectmid41.attachEvent("onmouseover", function(event) {rectmid41.style.cursor= 'w-resize'; rectmid41.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='w'; }, false);
rlm@46 1423 rectmid41.attachEvent("onmouseout", function(event) {rectmid41.style.cursor= 'default'; rectmid41.setAttribute('fillcolor', colorout ); typeTransform=''; }, false);
rlm@46 1424 //tracker.setAttribute('transform',trshape);
rlm@46 1425
rlm@46 1426
rlm@46 1427
rlm@46 1428 tracker.appendChild(border_square);
rlm@46 1429 tracker.appendChild(border_angle);
rlm@46 1430
rlm@46 1431 tracker.appendChild(circle1);
rlm@46 1432
rlm@46 1433 tracker.appendChild(rect1);
rlm@46 1434 tracker.appendChild(rect2);
rlm@46 1435 tracker.appendChild(rect3);
rlm@46 1436 tracker.appendChild(rect4);
rlm@46 1437 tracker.appendChild(rectmid12);
rlm@46 1438 tracker.appendChild(rectmid23);
rlm@46 1439 tracker.appendChild(rectmid34);
rlm@46 1440 tracker.appendChild(rectmid41);
rlm@46 1441
rlm@46 1442 /*
rlm@46 1443
rlm@46 1444
rlm@46 1445
rlm@46 1446 */
rlm@46 1447
rlm@46 1448 //alert(shape.id)
rlm@46 1449 this.container.appendChild(tracker);
rlm@46 1450
rlm@46 1451
rlm@46 1452
rlm@46 1453 }