Mercurial > laserkard

     1 /*----------------------------------------------------------------------------

     2  SVGRENDERER 1.0

     3  SVG Renderer For RichDraw

     4  -----------------------------------------------------------------------------

     5  Created by Mark Finkle (mark.finkle@gmail.com)

     6  Implementation of SVG based renderer.

     7  -----------------------------------------------------------------------------

     8 */

     9 function AbstractRenderer() {

    10 

    11 };

    12 

    13 AbstractRenderer.prototype.init = function(elem) {};

    14 

    15 

    16 

    17 

    18 function SVGRenderer() {

    19 	this.base = AbstractRenderer;

    20 	this.svgRoot = null;

    21 }

    22 

    23 

    24 SVGRenderer.prototype = new AbstractRenderer;

    25 

    26 

    27 SVGRenderer.prototype.bounds = function(shape) { 

    28    

    29  var box = shape.getBBox();

    30 

    31  return { x:box.x, y:box.y, width:box.width, height: box.height }; 

    32 

    33 };

    34 

    35 SVGRenderer.prototype.init = function(elem) {

    36   this.container = elem;

    37 

    38   this.container.style.MozUserSelect = 'none';

    39     

    40   var svgNamespace = 'http://www.w3.org/2000/svg'; 

    41   

    42   this.svgRoot = this.container.ownerDocument.createElementNS(svgNamespace, "svg");

    43   this.svgRoot.setAttributeNS(null,'viewBox', zoominit);

    44   this.svgRoot.setAttributeNS(null,'preserveAspectRatio','none');

    45   this.svgRoot.setAttributeNS(null,'space','preserve');

    46   this.container.appendChild(this.svgRoot);

    47 }

    48 

    49 SVGRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {

    50   var svgNamespace = 'http://www.w3.org/2000/svg'; 

    51   var tokens = viewBox.split(' ');       

    52   var margin=100; 

    53   var wFront=parseInt(document.getElementById('FRONT').style.width)

    54   var hFront=parseInt(document.getElementById('FRONT').style.height)

    55   var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;

    56   tokensCanvas= tC.split(' '); 

    57   var w=parseFloat(tokens[2]);

    58   var h=parseFloat(tokens[3]); 

    59   var wImage = w - parseFloat(tokens[0]);  

    60   var hImage = h - parseFloat(tokens[1]);

    61   var wCanvas = wFront;

    62   var hCanvas = hFront;

    63   proporImage = hImage / wImage; 

    64   proporCanvas = hCanvas / wCanvas; 

    65 

    66   document.title= initialFile +'     '+wImage+' x '+hImage;

    67 

    68 

    69   if(bgcolor != '')

    70    {

    71     this.container.style.backgroundColor=bgcolor;

    72    } else{

    73     this.container.style.backgroundColor="#ffffff";

    74    }

    75 if(viewMode=='preview')

    76  {

    77   if(proporCanvas==proporImage)

    78    {

    79       this.container.style.width =wFront+'px';

    80       this.container.style.height =hFront+'px';

    81       this.container.style.left =0+'px' 

    82       this.container.style.top =0+'px' 

    83 

    84    }

    85   if(proporCanvas<proporImage)

    86    {    

    87       var proportion= wFront/hFront;  

    88       //var image_proportion= width/height;

    89       var image_proportion= w/h;

    90       var W=hFront*image_proportion; 

    91       var leftover=(wFront-W)/2;

    92       

    93       this.container.style.width =W+'px';

    94       this.container.style.height =hFront+'px';

    95       this.container.style.left =leftover+'px' 

    96       this.container.style.top =0+'px' 

    97       //alert('Horizontal '+wFront+','+hFront+' '+image_proportion+' '+W+' '+leftover+' ____'+ this.container.style.width)

    98  

    99     } 

   100   if(proporCanvas>proporImage)

   101    {    

   102       var proportion= hFront/wFront;  

   103       //var image_proportion= width/height;

   104       var image_proportion= h/w;

   105       var H=wFront*image_proportion; 

   106       var leftover=(hFront-H)/2;

   107       

   108       this.container.style.width =wFront+'px';

   109       this.container.style.height =H+'px';

   110       this.container.style.left =0+'px' 

   111       this.container.style.top =leftover+'px' 

   112     }   

   113  

   114     this.svgRoot.setAttributeNS(null,'x', left);

   115     this.svgRoot.setAttributeNS(null,'y', top); 

   116     this.svgRoot.setAttributeNS(null,'width', parseInt(this.container.style.width));

   117     this.svgRoot.setAttributeNS(null,'height', parseInt(this.container.style.height)); 

   118  

   119     this.svgRoot.setAttributeNS(null,'viewBox', viewBox);

   120    

   121   } 

   122 if(viewMode=='canvas')

   123  {

   124    this.container.style.left = 0 + 'px';   

   125    this.container.style.top = 0 + 'px';                                 

   126    this.container.style.width = wFront + 'px';

   127    this.container.style.height = hFront + 'px';

   128    

   129    //  margins 10%    

   130    var percent=10;

   131    var percentX = wImage / percent; 

   132    var percentY = hImage / percent; 

   133    var cornerNEx = parseFloat(tokens[0])-percentX; 

   134    var cornerNEy = parseFloat(tokens[1])-percentY;

   135    var percentRectW=wImage + percentX*2;

   136    var percentRectH=hImage + percentY*2; 

   137  

   138    document.title= initialFile +'     '+wImage+' x '+hImage;

   139    // ajust proporImage to proporCanvas

   140   if(proporCanvas==proporImage)

   141    {  

   142       cornerNEx = parseFloat(tokens[0])-percentX

   143       cornerNEy = parseFloat(tokens[1])-percentY  

   144       var wi=percentRectW;

   145       var he=percentRectH;//hImage+percentY+addHimage; 

   146       zoominit=viewBox;

   147       zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;

   148       tokensZoom=zoominit1.split(' ');  

   149    }

   150 

   151   if(proporCanvas<proporImage)

   152    {    

   153         

   154         // add to hImage

   155         var newWimage = percentRectW * ((wCanvas * percentRectH) / (hCanvas * percentRectW))  ;//newRectH *

   156         var diffImages=newWimage-w;

   157         cornerNEx = parseFloat(tokens[0]) - (diffImages / 2);

   158         var wi=newWimage;

   159         var he=percentRectH;//hImage+percentY+addHimage; 

   160         zoominit=viewBox;

   161         zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;

   162         tokensZoom=zoominit1.split(' '); 

   163          //alert(newRectW+' '+newRectH+' // '+newHimage+' // '+zoominit1+' // '+hCanvas * newRectW +' '+ wCanvas * newRectH)

   164         //alert(addHimage+' // '+zoominit1)                   

   165         //160 160 700 300

   166     }

   167   if(proporCanvas>proporImage)

   168    {    

   169         // add to hImage

   170         var newHimage = percentRectH * ((hCanvas * percentRectW) / (wCanvas * percentRectH))  ;//newRectH *

   171         var diffImages=newHimage-h;

   172         cornerNEy = parseFloat(tokens[1]) - (diffImages / 2);

   173         var wi=percentRectW;

   174         var he=newHimage;//hImage+percentY+addHimage; 

   175         zoominit=viewBox;

   176         zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;

   177         tokensZoom=zoominit1.split(' '); 

   178    } 

   179  /* this.svgRoot.setAttributeNS(null,'x', cornerNEx);

   180   this.svgRoot.setAttributeNS(null,'y', cornerNEy); 

   181   this.svgRoot.setAttributeNS(null,'width', wi);   

   182   this.svgRoot.setAttributeNS(null,'height',he); 

   183  */

   184   this.svgRoot.setAttributeNS(null,'x', 0);

   185   this.svgRoot.setAttributeNS(null,'y', 0); 

   186   this.svgRoot.setAttributeNS(null,'width', wFront);   

   187   this.svgRoot.setAttributeNS(null,'height',hFront); 

   188   this.svgRoot.setAttributeNS(null,'viewBox', zoominit1);  

   189   

   190 

   191   }

   192 }

   193 

   194 SVGRenderer.prototype.zoomFrame = function(zoom){

   195    this.svgRoot.setAttributeNS(null,'viewBox', zoom);

   196 }

   197 

   198 SVGRenderer.prototype.rectDoc = function(viewBox) {  

   199     var tokens = viewBox.split(' ');

   200   var wFront=parseInt(document.getElementById('FRONT').style.width)

   201   var hFront=parseInt(document.getElementById('FRONT').style.height)

   202   var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;

   203   tokensCanvas= tC.split(' '); 

   204     var Ey = parseFloat(tokensCanvas[3]) ; // (end) height canvas. Corner up-right

   205     var Hz = parseFloat(tokens[3]) ; // height zoom

   206     this.editor.unit = this.editor.initialUnit * (Hz/Ey) ; // 0 to 1

   207 

   208   var svgNamespace = 'http://www.w3.org/2000/svg'; 

   209         

   210   var shape = document.getElementById('rectDoc');

   211   if (shape) {

   212     this.remove(shape);

   213   } 

   214   var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');

   215   rect.setAttributeNS(null, 'id', 'rectDoc');

   216   rect.setAttributeNS(null, 'x', tokens[0] + 'px');

   217   rect.setAttributeNS(null, 'y', tokens[1] + 'px');

   218   rect.setAttributeNS(null, 'width', tokens[2]+ 'px');

   219   rect.setAttributeNS(null, 'height', tokens[3] + 'px');  

   220   rect.setAttributeNS(null, 'fill', 'none');

   221   rect.setAttributeNS(null, 'stroke', '#000000');

   222   rect.setAttributeNS(null, 'stroke-width', this.editor.unit*2+'px');

   223  // this.svgRoot.appendChild(rect) 

   224  

   225   this.svgRoot.insertBefore( rect, this.svgRoot.firstChild );

   226 }  

   227  

   228 SVGRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {   

   229  var svgNamespace = 'http://www.w3.org/2000/svg'; 

   230     var tokens = zoominit1.split(' ');    

   231   var shape = document.getElementById('rectCanvas');

   232   if (shape) {

   233     this.remove(shape);

   234   }     

   235   var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');

   236   rect.setAttributeNS(null, 'id', 'rectBackground');

   237   rect.setAttributeNS(null, 'x', tokens[0] + 'px');

   238   rect.setAttributeNS(null, 'y', tokens[1] + 'px');

   239   rect.setAttributeNS(null, 'width', tokens[2] + 'px');

   240   rect.setAttributeNS(null, 'height', tokens[3] + 'px');  

   241   rect.setAttributeNS(null, 'fill', '#666666');

   242   rect.setAttributeNS(null, 'stroke', 'none');

   243   //this.svgRoot.appendChild(rect)     

   244    this.svgRoot.insertBefore( rect, this.svgRoot.firstChild );

   245 

   246   //this.index('rectBackground',0);

   247   

   248  /*  var shape = document.getElementById('rectOverCanvas');

   249   if (shape) {

   250     this.remove(shape);

   251   } 

   252   var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');

   253   rect.setAttributeNS(null, 'id', 'rectOverCanvas');

   254   rect.setAttributeNS(null, 'x', docx + 'px');

   255   rect.setAttributeNS(null, 'y', docy + 'px');

   256   rect.setAttributeNS(null, 'width', docw + 'px');

   257   rect.setAttributeNS(null, 'height', doch + 'px');  

   258   rect.setAttributeNS(null, 'fill', 'none');

   259   rect.setAttributeNS(null, 'stroke', '#000000');

   260   rect.setAttributeNS(null, 'stroke-width', 1+'px');

   261  // this.svgRoot.appendChild(rect)  

   262   this.svgRoot.insertBefore( rect, this.svgRoot.lastChild );

   263   */

   264 }

   265 

   266 SVGRenderer.prototype.removeAll = function() 

   267 {  

   268  while( this.svgRoot.hasChildNodes () )

   269  {

   270    this.svgRoot.removeChild( this.svgRoot.firstChild );

   271  }

   272 }

   273 

   274 SVGRenderer.prototype.create = function(shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent, viewBox) {

   275   var svgNamespace = 'http://www.w3.org/2000/svg'; 

   276   var xlinkNS="http://www.w3.org/1999/xlink"; 

   277  

   278   var svg;  

   279   

   280   if (shape == 'rect') {

   281     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');

   282     svg.setAttributeNS(null, 'x', left + 'px');

   283     svg.setAttributeNS(null, 'y', top + 'px');

   284     svg.setAttributeNS(null, 'width', width + 'px');

   285     svg.setAttributeNS(null, 'height', height + 'px');  

   286     svg.setAttributeNS(null, 'rx', 0+'px');

   287     svg.setAttributeNS(null, 'ry', 0+'px');

   288 

   289     //svg.setAttributeNS(null,'transform', "translate(0,0)");

   290     //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");   

   291     svg.style.position = 'absolute';

   292   }

   293   else if (shape == 'ellipse' || shape == 'circle') {

   294     

   295     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'ellipse');

   296     svg.setAttributeNS(null, 'cx', (left + width / 2) + 'px');

   297     svg.setAttributeNS(null, 'cy', (top + height / 2) + 'px');

   298     if(shape == 'circle'){

   299      svg.setAttributeNS(null, 'rx', (width / 2) + 'px');

   300      svg.setAttributeNS(null, 'ry', (width / 2) + 'px');   

   301     }else{

   302      svg.setAttributeNS(null, 'rx', (width / 2) + 'px');

   303      svg.setAttributeNS(null, 'ry', (height / 2) + 'px');   

   304     

   305     }

   306    //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");  

   307     svg.style.position = 'absolute';

   308   }

   309   else if (shape == 'roundrect') {

   310     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');

   311     svg.setAttributeNS(null, 'x', left + 'px');

   312     svg.setAttributeNS(null, 'y', top + 'px');  

   313     if(textSize!=0 || textSize!=''){ var rounded=textSize; }else{var rounded=18;}

   314     svg.setAttributeNS(null, 'rx', rounded+'px');

   315     svg.setAttributeNS(null, 'ry', rounded+'px');

   316     svg.setAttributeNS(null, 'width', width + 'px');

   317     svg.setAttributeNS(null, 'height', height + 'px');   

   318    //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");  

   319     svg.style.position = 'absolute';

   320   }

   321   else if (shape == 'line') {

   322     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'line');

   323     svg.setAttributeNS(null, 'x1', left + 'px');

   324     svg.setAttributeNS(null, 'y1', top + 'px');

   325     svg.setAttributeNS(null, 'x2', left + width + 'px');

   326     svg.setAttributeNS(null, 'y2', top + height + 'px');  

   327     //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");  

   328     svg.style.position = 'absolute';

   329   } 

   330   else if (shape == 'polyline' || shape == 'polygon') {

   331     var xcenterpoly=xpArray;

   332     var ycenterpoly=ypArray;

   333     var thispath=''+xpArray[1]+','+ypArray[1];

   334     svg = this.container.ownerDocument.createElementNS(svgNamespace, shape);  

   335     svg.setAttributeNS(null, 'points', points);

   336     svg.style.position = 'absolute';

   337   }

   338   else if (shape == 'path')

   339     {

   340     var k = (Math.sqrt(2)-1)*4/3;

   341     var circle="M 0,1 L 0.552,1 1,0.552  1,0  1,-0.552  0.552,-1 0,-1 -0.552,-1 -1,-0.552 -1,0  -1,0.552  -0.552,1  0,1z"  // 4th

   342     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');   

   343     //svg.setAttributeNS(null, 'd', 'M '+thispath+' C'+thispath);

   344     svg.setAttributeNS(null, 'd', points);  	

   345     //svg.setAttributeNS(null,'transform', "translate(-80,-80)"); 

   346     svg.style.position = 'absolute';  

   347     } 

   348      else if (shape == 'controlpath')

   349     {

   350     var point='M '+left+','+top+' L '+(left+1)+','+(top+1)+'z'  // 4th

   351     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');   

   352     //svg.setAttributeNS(null, 'd', 'M '+thispath+' C'+thispath);

   353     svg.setAttributeNS(null, 'd', point);  	

   354     svg.setAttributeNS(null,'transform', "translate(0,0)"); 

   355     svg.style.position = 'absolute';  

   356     } 

   357   else if (shape == 'text') 

   358    {

   359     var data = this.container.ownerDocument.createTextNode(textMessaje);

   360     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'text');

   361     svg.setAttributeNS(null, 'x', parseFloat(left) + 'px');

   362     svg.setAttributeNS(null, 'y', parseFloat(top) + 'px');

   363     svg.setAttributeNS(null, 'font-family', textFamily );

   364     svg.setAttributeNS(null, 'font-size', parseFloat(textSize)); 

   365     svg.style.position = 'absolute';  

   366     svg.appendChild(data);   

   367    } 

   368     else if (shape == 'clipPath') 

   369    {

   370     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'clipPath');

   371    }    

   372     else if (shape == 'filter') 

   373    {

   374     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'filter');

   375    }  

   376     else if (shape == 'feGaussianBlur') 

   377    {

   378     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'filter');

   379     svg.setAttributeNS(null, 'in','SourceGraphic');

   380     svg.setAttributeNS(null, 'stdDeviation',parseFloat(left));

   381    }  

   382     else if (shape == 'linearGradient') 

   383    {

   384     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'linearGradient');

   385     svg.setAttributeNS(null, 'x1', left);

   386     svg.setAttributeNS(null, 'y1', top);

   387     svg.setAttributeNS(null, 'x2', width); 

   388     svg.setAttributeNS(null, 'y2', height);  

   389     svg.setAttributeNS(null, 'gradientUnits',textMessaje);//"userSpaceOnUse" 

   390     svg.setAttributeNS(xlinkNS,'href', imageHref);

   391   

   392  }  

   393  else if (shape == 'radialGradient') {

   394     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'radialGradient');

   395     svg.setAttributeNS(null, 'gradientUnits',textMessaje);//"userSpaceOnUse" 

   396     svg.setAttributeNS(null, 'cx', left);

   397     svg.setAttributeNS(null, 'cy', top );

   398     svg.setAttributeNS(null, 'fx', width);

   399     svg.setAttributeNS(null, 'fy', height);  

   400     svg.setAttributeNS(null, 'r', lineWidth);     

   401     svg.setAttributeNS(xlinkNS,'href', imageHref);

   402  }   

   403  else if (shape == 'stop') {

   404     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'stop');

   405     svg.setAttributeNS(null, 'stop-color', fillColor);

   406     svg.setAttributeNS(null, 'stop-opacity', fillOpac);

   407     svg.setAttributeNS(null, 'offset', lineOpac);  

   408  } 

   409   else if (shape == 'defs') {

   410     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'defs');

   411     //svg.setAttributeNS(null, 'id', 'defs');

   412  } 

   413   else if (shape == 'group') {

   414     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');

   415     svg.setAttributeNS(null, 'x', left + 'px');

   416     svg.setAttributeNS(null, 'y', top + 'px');

   417     svg.setAttributeNS(null, 'width', width + 'px');

   418     svg.setAttributeNS(null, 'height', height + 'px');  

   419     svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));  

   420     svg.setAttributeNS(null, 'fill', fillColor);

   421  //} 

   422 

   423   //else if (shape == 'linearGradient') {

   424     //return false

   425  } 

   426  else if (shape == 'pattern') {

   427     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'pattern');

   428     svg.setAttributeNS(null, 'x', left);

   429     svg.setAttributeNS(null, 'y', top);

   430     svg.setAttributeNS(null, 'width', width );

   431     svg.setAttributeNS(null, 'height', height);  

   432     svg.setAttributeNS(null, 'viewBox', viewBox);  

   433     svg.setAttributeNS(null, 'patternUnits', 'userSpaceOnUse');

   434  

   435  } 

   436   else if (shape == 'use') { 

   437     var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'use');

   438     svg.setAttributeNS(xlinkNS,'xlink:href', imageHref);

   439  } 

   440  else if (shape == 'image') { 

   441    /* svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');

   442     svg.setAttributeNS(null, 'x', left + 'px');

   443     svg.setAttributeNS(null, 'y', top + 'px');

   444     svg.setAttributeNS(null, 'width', width + 'px');

   445     svg.setAttributeNS(null, 'height', height + 'px');  

   446     */

   447     var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'image');

   448     svg.setAttributeNS(xlinkNS,'href', imageHref);

   449     svg.setAttributeNS(null, 'x', left  + 'px');

   450     svg.setAttributeNS(null, 'y', top + 'px');

   451     svg.setAttributeNS(null, 'width', width + 'px');

   452     svg.setAttributeNS(null, 'height', height + 'px');  

   453     svg.setAttributeNS(null, 'opacity', parseFloat(fillOpac));

   454     svg.setAttributeNS(null, 'preserveAspectRatio','none');//xMinYMin slice  

   455     //svg.setAttributeNS(null, 'viewbox', left+' '+top+' '+width+' '+height); 

   456     //Ext.get(this.container).removeAllListeners(isvg)   

   457     //svg.appendChild(isvg);

   458     /* 

   459     var rsvg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');

   460     rsvg.setAttributeNS(null, 'x', left + 'px');

   461     rsvg.setAttributeNS(null, 'y', top + 'px');

   462     rsvg.setAttributeNS(null, 'width', width + 'px');

   463     rsvg.setAttributeNS(null, 'height', height + 'px');  

   464     rsvg.style.fill = fillColor;  

   465     rsvg.style.stroke = lineColor;  

   466     rsvg.style.strokeWidth = lineWidth; 

   467     rsvg.setAttributeNS(null, 'opacity', '0.1');

   468     rsvg.style.strokOpacity = lineOpac;

   469     // Ext.get(this.container).removeAllListeners(rsvg)

   470      svg.appendChild(rsvg);   

   471 

   472      */

   473     //svg.setAttributeNS(null, 'color-rendering', fillColor);   

   474     //svg.setAttributeNS(null, 'display', 'inherit'); 

   475     

   476       //alert(fillOpac+'lkjlkj'); 

   477     //svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));

   478 

   479     /* if (fillColor.length == 0){fillColor = 'none';}

   480     if (lineColor.length == 0){lineColor = 'none';}

   481     svg.style.fill = fillColor;  

   482     svg.style.stroke = lineColor;  

   483     svg.style.strokeWidth = lineWidth; 

   484     svg.style.fillOpacity = fillOpac;

   485     svg.style.strokOpacity = lineOpac;

   486      svg.style.setAttributeNS(null, 'fill', fillColor);

   487           svg.style.setAttributeNS(null, 'stroke', lineColor);

   488           svg.style.setAttributeNS(null, 'stroke-width', lineWidth);

   489           svg.style.setAttributeNS(null, 'fill-opacity', fillOpac);  

   490           svg.style.setAttributeNS(null, 'stroke-opacity',lineOpac);

   491     

   492    */

   493  } 

   494  

   495  if(shape == 'zoom') 

   496   {

   497         

   498   }else

   499   {                                          

   500        if(transform!='')

   501         {

   502          svg.setAttributeNS(null, 'transform', transform);      

   503         }

   504         

   505              var render=true;

   506         if(shape.indexOf('image')>=0){render=false;}

   507         //if(shape.indexOf('group')>=0){render=false;}

   508         if(shape.indexOf('linearGradient')>=0){render=false;}

   509         if(shape.indexOf('radialGradient')>=0){render=false;}

   510         if(shape.indexOf('stop')>=0){render=false;}  

   511         if(shape.indexOf('def')>=0){render=false;}

   512         if(shape.indexOf('filter')>=0){render=false;}

   513         if(shape.indexOf('feGaussianBlur')>=0){render=false;}

   514        

   515         

   516           

   517         //|| shape != 'group'

   518        //if(shape != 'image'  || shape != 'stop' || shape != 'def')

   519         if(render==true) 

   520         { 

   521                                                                

   522            //var set = this.container.ownerDocument.createElementNS(svgNamespace, "style");

   523             

   524            if (lineColor.length == 0){lineColor = 'none';} 

   525            if (fillColor.length == 0){fillColor = 'none';} 

   526            //if (lineWidth == NaN || lineWidth == 0 ){lineColor = '#000000';} 

   527            

   528 

   529           // set.setAttributeNS(null, 'stroke', lineColor);

   530           //set.setAttributeNS(null, 'stroke-width', lineWidth);

   531           //set.setAttributeNS(null, 'fill-opacity', fillOpac);  

   532           //set.setAttributeNS(null, 'stroke-opacity',lineOpac);

   533             //svg.appendChild(set);

   534            //svg.setAttributeNS(null, "style","fill:"+ fillColor+";stroke:"+lineColor+";strokeWidth:"+lineWidth+";fill-opacity:"+fillOpac+";stroke-opacity:"+lineOpac);  

   535            //   

   536            (fillColor!=''|| fillColor!=null )?svg.setAttributeNS(null, 'fill', fillColor):svg.setAttributeNS(null, 'fill', '#000000');

   537           

   538           //svg.setAttributeNS(null, 'filter', filter);

   539           svg.setAttributeNS(null, 'stroke', lineColor);

   540           svg.setAttributeNS(null, 'stroke-width', parseFloat(lineWidth));

   541           svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));  

   542           svg.setAttributeNS(null, 'stroke-opacity',parseFloat(lineOpac));

   543           svg.setAttributeNS(null, 'stroke-linejoin','round')         

   544       

   545           /*     

   546           <a xlink:href="http://www.w3.org">

   547                 <ellipse cx="2.5" cy="1.5" rx="2" ry="1"  fill="red" />

   548           </a>

   549           svg.style.stroke = lineColor;  

   550            svg.style.strokeWidth = lineWidth; 

   551            svg.style.fillOpacity = fillOpac;

   552            svg.style.strokOpacity = lineOpac;   

   553           if (fillColor.length == 0){fillColor = 'none';}

   554           

   555           if (lineColor.length == 0){lineColor = 'none';}

   556           */

   557          }   

   558          

   559          

   560      if(parent==''){

   561        this.svgRoot.appendChild(svg);

   562      }else{  

   563        if(document.getElementById(parent)){   

   564          var parentShape = document.getElementById(parent);

   565          parentShape.appendChild(svg);

   566         } 

   567      }   

   568 

   569 

   570           return svg;   

   571              

   572    }        

   573   

   574 };   

   575 

   576 

   577 

   578 SVGRenderer.prototype.zoomFrame = function(zoom){

   579    this.svgRoot.setAttributeNS(null,'viewBox', zoom);

   580 

   581  

   582 }

   583 SVGRenderer.prototype.zoom = function(clicx,clicy){ 

   584 /* 

   585 function(direction, amount) { 

   586 var viewBox = this.rootNode.getAttribute('viewBox');

   587     var viewVals = viewBox.split(' ');

   588     if (amount == null) {

   589         amount = SVGElement.panFactor;

   590     }

   591     switch (direction) {

   592         case 'left':

   593             amount = 0 - amount;

   594             // intentionally fall through

   595         case 'right':

   596             var currentPosition = parseFloat(viewVals[0]);

   597             currentPosition += amount;

   598             viewVals[0] = currentPosition;

   599             break;

   600         case 'up':

   601             amount = 0 - amount;

   602             // intentionally fall through

   603         case 'down':

   604             var currentPosition = parseFloat(viewVals[1]);

   605             currentPosition += amount;

   606             viewVals[1] = currentPosition;

   607             break;

   608         case 'origin':

   609             // reset everything to initial values

   610             viewVals[0] = 0;

   611             viewVals[1] = 0;

   612             this.rootNode.currentScale = 1;

   613             this.rootNode.currentTranslate.x = 0;

   614             this.rootNode.currentTranslate.y = 0;

   615             break;

   616     }

   617     this.rootNode.setAttribute('viewBox', viewVals.join(' '));        

   618  */

   619  

   620       

   621       

   622       //canvasWidth

   623       //canvasheight

   624    if(zoommode=='frame')

   625     {   

   626        var viewBox = this.svgRoot.getAttributeNS(null,'viewBox'); 

   627      

   628        //alert(viewBox);

   629       

   630        var viewBox = zoominit;  

   631        var viewVals = viewBox.split(' ');

   632        

   633        zoomx = parseFloat(viewVals[0]); 

   634        zoomy = parseFloat(viewVals[1]);  

   635        zoomw = parseFloat(viewVals[2]); 

   636        zoomh = parseFloat(viewVals[3]);    

   637        proporDiagonal=1;

   638     }

   639      else

   640     {   

   641        

   642        var viewBox = this.svgRoot.getAttributeNS(null,'viewBox'); 

   643       

   644        var viewVals = viewBox.split(' ');

   645        var prevX = parseFloat(viewVals[0]); 

   646        var prevY = parseFloat(viewVals[1]);  

   647        var prevW = parseFloat(viewVals[2]); 

   648        var prevH = parseFloat(viewVals[3]); 

   649        var prevWidth=prevW-prevX;  

   650        var prevHeight=prevH-prevY;   

   651         

   652     }

   653    

   654       if(zoommode=='more')

   655        {             

   656         fieldViewx=prevW*0.95; 

   657         fieldViewy=prevH*0.95;  

   658         diagonalFrame=dist2p(0,0,fieldViewx,fieldViewy);

   659         //diagonalAngle=getAngle(fieldViewx,fieldViewy);                                  

   660         zoomx=(diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle+Math.PI));//-(fieldViewx/8);//-(canvasW/2)docx-fieldViewx;

   661         zoomy=(diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle+Math.PI));//-(fieldViewy/8);//-(canvasH/2);//docy-fieldViewy;

   662        zoomw=prevW*0.95;

   663        zoomh=prevH*0.95;    

   664                             

   665      

   666         proporDiagonal=diagonalFrame/diagonalinit; 

   667         //alert(proporDiagonal);

   668        }

   669       if(zoommode=='minus') 

   670        {

   671         fieldViewx=prevW*1.05; 

   672         fieldViewy=prevH*1.05;  

   673         diagonalFrame=dist2p(0,0,fieldViewx,fieldViewy);

   674        //diagonalAngle=getAngle(fieldViewx,fieldViewy);                                  

   675         zoomx=(diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle+Math.PI));//-(fieldViewx/8);//-(canvasW/2)docx-fieldViewx;

   676         zoomy=(diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle+Math.PI));//-(fieldViewy/8);//-(canvasH/2);//docy-fieldViewy;

   677         zoomw=prevW*1.05;

   678         zoomh=prevH*1.05; 

   679         proporDiagonal=diagonalFrame/diagonalinit;  

   680 

   681        } 

   682       if(zoommode=='window')

   683        {             

   684           

   685         zoomx=c.mouseDownX;

   686         zoomy=c.mouseDownY; 

   687         var dF=dist2p(c.mouseDownX,c.mouseDownY,clicx,clicy);

   688         //var mid=pmd2pb(c.clicX,c.clicX,clicx,clicy,0.5)

   689         zoomw=dF*proporDoc;//(mid[1]+(dF/2)*Math.cos(diagonalAngle+Math.PI));

   690         zoomh=dF;//(mid[2]+(dF/2)*Math.sin(diagonalAngle+Math.PI));

   691     

   692         

   693        }      

   694        var direction=0;

   695       if(zoommode=='hand') 

   696        {        

   697         direction=ang2v(clicx,clicy,centerZoomx,centerZoomy);

   698         var distance=dist2p(clicx,clicy,centerZoomx,centerZoomy);

   699         var left = prevX+distance*Math.cos(direction); 

   700         var top = prevY+distance*Math.sin(direction); 

   701         makeWorkSite(prevH,left,top); 

   702        }

   703        direction=direction*180/Math.PI;

   704         //this.svgRoot.currentScale = zoomscale+0.1;

   705         //this.svgRoot.currentTranslate.x = 0;

   706         //this.svgRoot.currentTranslate.y = 0; 

   707         //var resultPosx=clicx-((prevscalex-posx)/2);//-Math.abs(posx+clicx)

   708         //var resultPosy=clicy-((prevscalex-posy)/2);//-Math.abs(posy+clicy)

   709         //var resultPosx=-Math.abs(posx+clicx);

   710         //var resultPosy=-Math.abs(posy+clicy);        

   711 

   712   this.svgRoot.setAttributeNS(null,'viewBox', (zoomx)+' '+(zoomy)+' '+zoomw+' '+zoomh+'');

   713   var viewBox = this.svgRoot.getAttributeNS(null,'viewBox'); 

   714   //$('status').innerHTML=' '+viewBox; 

   715   //alert(direction+'__'+prevZoomCenterx+' '+prevZoomCentery+' '+centerZoomx+' '+centerZoomy);

   716 }  

   717 

   718 //this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,'',''

   719 SVGRenderer.prototype.datacreate = function(fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, transform) {

   720   var svgNamespace = 'http://www.w3.org/2000/svg';

   721   var svg;

   722   svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');   

   723   svg.setAttributeNS(null, 'd', data);  	

   724   svg.setAttributeNS(null,'transform', "translate(0,0)"); 

   725   svg.style.position = 'absolute';  

   726   if (fillColor.length == 0){fillColor = 'none';}

   727   svg.setAttributeNS(null, 'fill', fillColor);

   728   if (lineColor.length == 0){lineColor = 'none';}

   729   svg.setAttributeNS(null, 'stroke', lineColor);

   730   svg.setAttributeNS(null, 'stroke-width', lineWidth); 

   731   this.svgRoot.appendChild(svg);

   732   return svg;

   733 };

   734 

   735 SVGRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)

   736 { 

   737  var result = true;

   738   var shapes='names: g, image, rect, path, ellipse, circle, text, line, ';

   739 

   740  //if(shape.getBBox && shape) 

   741   if( shapes.indexOf(' '+shape.tagName+',')>0)

   742   {

   743  

   744   var box = shape.getBBox();

   745  }else

   746  {

   747   return false;

   748  }

   749  var p1x = box.x;

   750   if(Math.abs(p1x-centerx)>width){result = false}

   751  

   752  var p1y = box.y;

   753  if(Math.abs(p1y-centery)>height){result = false}

   754  

   755  var p2x = box.x+box.width;

   756  if(Math.abs(p2x-centerx)>width){result = false}

   757 

   758  var p2y = box.y;

   759  if(Math.abs(p2y-centery)>height){result = false}

   760  

   761  var p3x = box.x+box.width;

   762  if(Math.abs(p3x-centerx)>width){result = false}

   763 

   764  var p3y = box.y+box.height;                    

   765  if(Math.abs(p3y-centery)>height){result = false}

   766   

   767  var p4x = box.x;

   768 if(Math.abs(p4x-centerx)>width){result = false}

   769  

   770  var p4y = box.y+box.height;

   771  if(Math.abs(p4y-centery)>height){result = false}

   772  

   773  if(result)

   774   {

   775     return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };

   776   }

   777    else

   778   { 

   779      return { 'in':result } 

   780   }

   781 //center.distanceFrom(point1);

   782  

   783 

   784 }

   785 

   786 SVGRenderer.prototype.searchBoxes = function()

   787 {  

   788  var base = this.svgRoot;

   789 

   790  var  NumNodes = base.childNodes.length;

   791  var chain= '';

   792  for(i = 0;i < NumNodes;i++)

   793   {       

   794      if (base.childNodes[i].getBBox)

   795       {

   796         chain+=base.childNodes[i].id + ';'

   797       }

   798   }

   799   chain+=''

   800   return chain;

   801 

   802 }  

   803 

   804 SVGRenderer.prototype.DrawBorder= function(numNode, targetElement )

   805 {   

   806   var shapes='names: g, image, rect, path, ellipse, circle, text, line, ';

   807 

   808  //if(shape.getBBox && shape) 

   809   if( shapes.indexOf(' '+targetElement.tagName+',')>0)

   810   {

   811    var bbox = targetElement.getBBox();

   812    var svgns = 'http://www.w3.org/2000/svg';

   813 

   814    var outline = this.container.ownerDocument.createElementNS(svgns, 'rect');

   815    outline.setAttributeNS( null, 'x', bbox.x - 2 );

   816    outline.setAttributeNS( null, 'y', bbox.y - 2 );

   817    outline.setAttributeNS( null, 'width',  bbox.width + 4 );

   818    outline.setAttributeNS( null, 'height', bbox.height + 4 );

   819    outline.setAttributeNS( null, 'stroke', '#ff00ff' );

   820    outline.setAttributeNS( null, 'fill', 'none' );

   821    outline.setAttributeNS( null, 'id', 'shapeBoxed'+numNode );

   822 

   823    targetElement.parentNode.insertBefore( outline, targetElement );

   824    return 'shapeBoxed'+numNode; 

   825   } 

   826    else 

   827   {

   828    return false

   829   }

   830 }

   831 

   832 SVGRenderer.prototype.index = function(shape,order) {  

   833  

   834      if(order==-1)

   835       {

   836         this.svgRoot.appendChild( shape );

   837       }

   838       if(order==0){

   839      

   840          this.svgRoot.insertBefore( shape, shape.parentNode.firstChild );

   841       } 

   842  

   843    if(order==1 || order==2)

   844     {

   845          var id=shape.getAttributeNS(null, 'id');

   846         //alert(id);

   847         

   848         

   849         var numNodes=this.svgRoot.childNodes.length;

   850         //alert(numNodes);

   851           

   852         var num=0;

   853         for(var i = 1; i < numNodes; i++)

   854          {                                                   

   855            

   856            var etiq=this.svgRoot.childNodes[i].getAttributeNS(null, 'id');

   857            if (etiq==id)

   858             { 

   859                 num=i; 

   860                

   861             }                                                    

   862           } 

   863           //alert(num);    

   864           if(order==1) 

   865            {   

   866               if((num-1)>=-1)

   867                {  

   868                 this.svgRoot.insertBefore( shape, this.svgRoot.childNodes[num-1]);

   869                } 

   870            }

   871           if(order==2){ 

   872                if((num+1)<numNodes)

   873                {

   874                   this.svgRoot.insertBefore( shape, this.svgRoot.childNodes[num+2]);

   875                }

   876           } 

   877           

   878     } 

   879     

   880     

   881    /*var contshapes =  shape.parentNode.childNodes.length;       

   882    var elem1 = shape;//this.svgRoot.childNodes[1]; 

   883    var elem2 = shape.parentNode.childNodes[parseInt(contshapes-9)];

   884     var tmp = elem1.cloneNode( true );

   885     shape.parentNode.replaceChild( tmp, elem2 );

   886     shape.parentNode.replaceChild( elem2, elem1 ); 

   887     */

   888     //alert(elem2+' '+ elem1 ) 

   889     //return  elem2;

   890     

   891 }

   892 SVGRenderer.prototype.remove = function(shape) {

   893   //shape.parentNode.removeChild(shape);

   894   this.svgRoot.removeChild(shape);

   895 }

   896 

   897 

   898 SVGRenderer.prototype.copy = function(shape) 

   899  {

   900    var svg;

   901    svg =shape.cloneNode(false); 

   902      if(shape.tagName=="text"){  

   903         var text=shape.textContent ; 

   904         svg.textContent=text;     

   905      } 

   906     //svg.setAttributeNS(null, 'fill', "#aa00aa");

   907    return svg;

   908  };

   909 

   910 

   911 SVGRenderer.prototype.paste = function(clipboard,left,top) 

   912  {

   913    //var svg;

   914    //svg =shape;

   915    //clipboard.setAttributeNS(null, 'fill', "#0000aa");

   916    //clipboard.setAttributeNS(null,'transform', "translate("+left+","+top+")"); 

   917    this.svgRoot.appendChild(clipboard);

   918   return clipboard;

   919  };

   920 

   921 

   922 SVGRenderer.prototype.duplicate = function(shape) 

   923  {

   924    var svg;

   925    svg =shape.cloneNode(false);

   926    //svg.setAttributeNS(null, 'fill', "#aa00aa");

   927    this.svgRoot.appendChild(svg);

   928   return svg;

   929  };

   930 

   931 SVGRenderer.prototype.undo = function() 

   932  {

   933   this.svgRoot.removeChild( this.svgRoot.lastChild );

   934  };

   935  

   936  /* 

   937  function zSwap(parent, elem1, elem2)

   938 {

   939    var tmp = elem1.cloneNode( true );

   940    parent.replaceChild( tmp, elem2 );

   941    parent.replaceChild( elem2, elem1 );

   942 }

   943 

   944 SVGRenderer.prototype.moveToTop( svgNode )

   945 {

   946    this.svgRoot.appendChild( svgNode );

   947 }

   948 

   949 

   950 SVGRenderer.prototype.moveToBottom( svgNode )

   951 {

   952    this.svgRoot.insertBefore( svgNode, svgNode.parentNode.firstChild );

   953 }

   954 

   955 */

   956 

   957 

   958 

   959 

   960      

   961 var xshe=0; //bad

   962 var yshe=0;  

   963 var isArc=false;

   964 var contArc=0;    

   965 

   966 SVGRenderer.prototype.move = function(shape, left, top, fromX,fromY) {  

   967  //typeTransform='Translate';   

   968  

   969  var box = shape.getBBox(); 

   970  var angle=0;

   971  var dist=0;  

   972  var rotated=false;

   973 

   974   if (shape.hasAttributeNS(null,'transform')) {  

   975     var tran=shape.getAttributeNS(null, 'transform'); 

   976     var rot=''; 

   977     var scl=''; 

   978     var angle=0;

   979     if(tran.indexOf('rotate')!=-1)

   980      { 

   981       if(tran.indexOf('scale')!=-1)

   982       {

   983        var chain2=tran.split('),');

   984        rot= GetString(chain2[0], 'rotate(', ',');

   985        angle=parseFloat(rot);

   986        scl= GetString(tran, 'scale(', ')');

   987       }else{

   988        var chain2=tran.split(',');  

   989        var rot0=chain2[0].split('rotate(');

   990        rot='good';

   991        angle=parseFloat(rot0[1]);

   992        scl='';                  

   993        

   994       }

   995      }else{

   996       if(tran.indexOf('scale')!=-1)

   997        {

   998         scl= GetString(tran, 'scale(', ')'); 

   999         angle=0; 

  1000        }else{   

  1001          //

  1002        }

  1003      }

  1004     

  1005     //var h=shape.getAttributeNS(null, SVG_TRANSFORM_ROTATE ); 

  1006    

  1007     var centerx=box.x+(box.width/2);

  1008     var centery=box.y+(box.height/2);        

  1009     var cadRot='';                              

  1010     var cadScale=''; 

  1011     var union='';

  1012     if(angle!=0)

  1013      {   

  1014       cadRot='rotate('+(angle)+', '+centerx+', '+centery+')';

  1015      }

  1016     if(scl.length>2)

  1017      {

  1018       if(rot.length>2){ union=',';}

  1019       cadScale='scale('+scl+')';

  1020       if(scl.indexOf('-')!=-1)

  1021        {  

  1022           var dist= dist2p(left,top,box.x,box.y);

  1023            

  1024           left=left;  

  1025         }  

  1026        if(scl.indexOf(',-')!=-1 || scl.indexOf(', -')!=-1 )

  1027          {

  1028              //top=eval('-'+top);  

  1029             var dist= dist2p(left,top,box.x,box.y);

  1030             top=top; 

  1031         }

  1032         

  1033       }

  1034     //shape.setAttributeNS(null,'transform', 'rotate('+(angle)+', '+centerx+', '+centery+')'); 

  1035     shape.setAttributeNS(null,'transform', cadRot+union+cadScale);  

  1036    

  1037     //var angleRad=angle*Math.PI/180; 

  1038    

  1039    

  1040       

  1041    //dist=dist2p(x,y,left, top) ;

  1042    rotated=true;

  1043    

  1044  }

  1045   //left=left-box.x;   

  1046   //top=top-box.y;  

  1047   //left = centerx-left;

  1048   //top = centery-top;  

  1049 

  1050   contmove++;

  1051 

  1052   if (shape.tagName == 'rect'){ 

  1053   /* var dudy= shape.parentNode;  

  1054    if(dudy.tagName=='g'){

  1055       document.forms[0].code.value= 'this g ============ '; 

  1056            shape.setAttributeNS(null, 'x', left);

  1057            shape.setAttributeNS(null, 'y', top); 

  1058  

  1059            dudy.setAttributeNS(null, 'x', left);

  1060            dudy.setAttributeNS(null, 'y', top); 

  1061            dudy.childNodes[0].setAttributeNS(null, 'x', left);

  1062            dudy.childNodes[0].setAttributeNS(null, 'y', top);

  1063            

  1064     }else{

  1065      //document.forms[0].code.value= box.x+' '+box.y+' formX  Y'+ fromX+'_'+fromY+'  left '+left+'_'+top+'==============';     

  1066      //document.forms[0].code.value+= tran+' rot '+ angle+'_'+x+'_'+y+' dist '+dist;   

  1067      if(rotated){

  1068           //shape.setAttributeNS(null, 'x', box.x*Math.cos(angleRad)) ;

  1069          //shape.setAttributeNS(null, 'y', box.y*Math.sin(angleRad)) ;  

  1070            shape.setAttributeNS(null, 'x', left);

  1071            shape.setAttributeNS(null, 'y', top); 

  1072   

  1073 

  1074      }else{ 

  1075      */

  1076       shape.setAttributeNS(null, 'x', left);

  1077       shape.setAttributeNS(null, 'y', top); 

  1078      //}

  1079     //$('option_rect_trx').value= left;  

  1080     //$('option_rect_try').value= top;    

  1081        // var h=shape.getAttributeNS(null, 'height');   

  1082        //var w=shape.getAttributeNS(null, 'width'); 

  1083        //document.forms[0].code.value= h+' '+w;

  1084    //}    

  1085   } 

  1086   if (shape.tagName == 'g')

  1087    { 

  1088    //this.editor.log(shape.tagName+' ==============');  

  1089    

  1090     shape.setAttributeNS(null, 'x', left);

  1091     shape.setAttributeNS(null, 'y', top);

  1092     shape.childNodes[0].setAttributeNS(null, 'x', left + 'px');

  1093     shape.childNodes[0].setAttributeNS(null, 'y', top + 'px');

  1094     shape.childNodes[1].setAttributeNS(null, 'x', left + 'px');

  1095     shape.childNodes[1].setAttributeNS(null, 'y', top + 'px');

  1096     

  1097    }

  1098   if (shape.tagName == 'image'){

  1099     shape.setAttributeNS(null, 'x',left + 'px');

  1100     shape.setAttributeNS(null, 'y', top  + 'px');

  1101     //$('option_img_trx').value= left;  

  1102     //$('option_img_try').value= top;

  1103      var h=shape.getAttributeNS(null, 'height');   

  1104      var w=shape.getAttributeNS(null, 'width'); 

  1105     // this.editor.log( h+' '+w);

  1106   }

  1107   if (shape.tagName == 'text'){  

  1108    var size=parseFloat(shape.getAttributeNS(null, 'font-size')); 

  1109    //$('code').value=size;

  1110     shape.setAttributeNS(null, 'x',  left + 'px');

  1111     shape.setAttributeNS(null, 'y',  parseFloat(top+size) + 'px');

  1112     //$('option_text_trx').value= left;  

  1113     //$('option_text_try').value= top;

  1114 

  1115   }

  1116   if (shape.tagName == 'line'){ 

  1117     var deltaX = shape.getBBox().width;

  1118     var deltaY = shape.getBBox().height;

  1119     shape.setAttributeNS(null, 'x1', left + 'px');

  1120     shape.setAttributeNS(null, 'y1', top + 'px');

  1121 

  1122     shape.setAttributeNS(null, 'x2', left + deltaX + 'px');

  1123     shape.setAttributeNS(null, 'y2', top + deltaY + 'px');   

  1124     //$('option_line_trx').value= left;  

  1125     //$('option_line_try').value= top;

  1126 

  1127   }   

  1128   if (shape.tagName == 'ellipse'){  

  1129     var putx=left + (shape.getBBox().width / 2)    

  1130     var puty= top + (shape.getBBox().height / 2)

  1131     shape.setAttributeNS(null, 'cx', putx + 'px');

  1132     shape.setAttributeNS(null, 'cy', puty + 'px');

  1133     //$('option_ellipse_trx').value= putx;  

  1134     //$('option_ellipse_try').value= puty;

  1135 

  1136   }

  1137   if (shape.tagName == 'path' || shape.tagName == 'polyline' ) {

  1138 

  1139    if(contmove==1){ 

  1140       xshe=left;

  1141       yshe=top; 

  1142    }    

  1143  var path=shape.getAttributeNS(null, 'd');

  1144  path=path.replace(/, /g, ','); 

  1145  path=path.replace(/ ,/g, ',');

  1146  var ps =path.split(" ")

  1147  var pcc = "";

  1148  var point =ps[0].split(","); 

  1149 

  1150 

  1151  var num0= parseFloat(point[0].substring(1));

  1152  var num1= parseFloat(point[1]); 

  1153  

  1154  var ang= ang2v(box.x,box.y,left,top) ;

  1155  var angle = Math.round((ang/Math.PI* 2)* 360);

  1156  var angx = Math.cos(ang); 

  1157  var angy = Math.sin(ang);          

  1158  var dist= dist2p(left,top,box.x,box.y);

  1159  var xinc=dist*angx;

  1160  var yinc=dist*angy;   

  1161     var re = /^[-]?\d*\.?\d*$/;

  1162  for(var i = 0; i < ps.length; i++)

  1163   { 

  1164    if(ps[i].indexOf(',')>0){  

  1165      

  1166       var point =ps[i].split(","); 

  1167        var char1=point[0].substring(0,1); 

  1168        if(char1=='A' || char1=='a'){isArc=true; contArc=0;}

  1169        if(isArc==true){contArc++}

  1170        if(contArc==4){contArc=0; isArc=false}

  1171        

  1172        //if (isNaN(valnum)) 

  1173       if (!char1.match(re))        

  1174        { 

  1175            var num0= parseFloat(point[0].substring(1));

  1176            var text=char1;

  1177        }else{ 

  1178          if(isArc==true && contArc==2  )

  1179           {

  1180             var num0= point[0];

  1181           }else{  

  1182             var num0= parseFloat(point[0]);

  1183           }  

  1184          var text='';

  1185 

  1186        }

  1187  

  1188        

  1189        if(isArc==true && contArc==2)

  1190         {   

  1191            point[1]= point[1].toString() ;

  1192         }

  1193         else

  1194         {    

  1195          

  1196           num0+=xinc;    

  1197           point[1]= parseFloat(point[1]);

  1198           point[1]+=yinc;

  1199 

  1200         }  

  1201         var cx=num0; 

  1202          

  1203         var cy=point[1]; 

  1204         pcc+=text+cx+','+cy+' ';

  1205    }else{

  1206       pcc+=ps[i]+' ';

  1207    }

  1208   }

  1209   

  1210   shape.setAttributeNS(null,'d', pcc);

  1211 

  1212  }                                                                                                                            

  1213                                                                                                                            

  1214   

  1215 //$('status').innerHTML=typeTransform+': '+left+' '+top;

  1216 //$('option_select_trx').value= left;  

  1217 //$('option_select_try').value= top;  

  1218 

  1219 

  1220 

  1221 };

  1222 

  1223 

  1224 

  1225 SVGRenderer.prototype.track = function(shape) {

  1226   // TODO

  1227 };

  1228 

  1229 

  1230 SVGRenderer.prototype.clic = function(shape) {

  1231          var end='';

  1232 	if(data_path_close==true){end='z';}

  1233         var maxcont=setPoints.length;

  1234         var thispath='M'+setPoints[0]+' ';  

  1235         $('someinfo').value=maxcont;

  1236       

  1237         for(var conta=1;conta< maxcont;conta++){        

  1238           thispath+='L'+setPoints[conta]+' ';

  1239         }

  1240               //var pointshape=shape.getAttributeNS(null,"d");

  1241          	//shape.setAttributeNS(null,'d',thispath+end);

  1242          	var path=thispath+end;

  1243        

  1244          	shape.setAttributeNS(null,'d',path);

  1245                 $('control_codebase').value=path;

  1246  

  1247 }

  1248 

  1249 

  1250 SVGRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {

  1251    var deltaX = toX - fromX;

  1252   var deltaY = toY - fromY;  

  1253   

  1254      /*      if (lineColor.length == 0){lineColor = 'none';} 

  1255            if (fillColor.length == 0){fillColor = 'none';}

  1256            shape.style.fill = fillColor;  

  1257            shape.style.stroke = lineColor;  

  1258            shape.style.strokeWidth = lineWidth; 

  1259            shape.style.fillOpacity = fillOpac;

  1260            shape.style.strokOpacity = lineOpac;        

  1261       */     

  1262   if (shape.tagName == 'rect' ) 

  1263    { 

  1264     

  1265  

  1266       if (deltaX < 0) {

  1267          shape.setAttributeNS(null, 'x', toX + 'px');

  1268          shape.setAttributeNS(null, 'width', -deltaX + 'px');

  1269        }

  1270         else

  1271        {

  1272          shape.setAttributeNS(null, 'width', deltaX + 'px');

  1273        }

  1274   

  1275       if (deltaY < 0) 

  1276        {

  1277         shape.setAttributeNS(null, 'y', toY + 'px');

  1278         shape.setAttributeNS(null, 'height', -deltaY + 'px');

  1279        }

  1280         else 

  1281        {

  1282         shape.setAttributeNS(null, 'height', deltaY + 'px');

  1283        }

  1284       /*shape.style.fill = fillColor;  

  1285       shape.style.stroke = lineColor;  

  1286       shape.style.strokeWidth = lineWidth; 

  1287       shape.style.fillOpacity = fillOpac;

  1288       shape.style.strokOpacity = lineOpac;         

  1289       */

  1290       

  1291     }

  1292     

  1293   /*  if ( shape.tagName == 'simage' ) 

  1294     {   

  1295         var img=shape.firstChild;//nodeName;//nodparseFloatue;//nodes.item(0);

  1296         //alert(img);

  1297       if (deltaX < 0) {

  1298          shape.setAttributeNS(null, 'x', parseFloat(toX) + 'px');

  1299          shape.setAttributeNS(null, 'width', parseFloat(-deltaX) + 'px');

  1300          

  1301        }

  1302         else

  1303        {

  1304          shape.setAttributeNS(null, 'width', parseFloat(deltaX) + 'px');

  1305        }

  1306   

  1307       if (deltaY < 0) 

  1308        {

  1309         shape.setAttributeNS(null, 'y', parseFloat(toY) + 'px');

  1310         shape.setAttributeNS(null, 'height', parseFloat(-deltaY) + 'px');

  1311        }

  1312         else 

  1313        {

  1314         shape.setAttributeNS(null, 'height', parseFloat(deltaY) + 'px');

  1315        }  

  1316        var h=shape.getAttributeNS(null, 'height');   

  1317        var w=shape.getAttributeNS(null, 'width'); 

  1318        document.forms[0].code.value= h+' '+w;    

  1319        

  1320        

  1321        

  1322     }*/ 

  1323    if (shape.tagName == 'g' || shape.tagName == 'image') 

  1324     {

  1325           

  1326 

  1327        if (deltaX < 0) 

  1328         {  

  1329           shape.setAttributeNS(null, 'x', parseFloat(toX) + 'px' );

  1330           shape.setAttributeNS(null, 'width', parseFloat(-deltaX)  + 'px');

  1331 

  1332 

  1333         }

  1334          else

  1335         {

  1336           shape.setAttributeNS(null, 'width', parseFloat(deltaX)  + 'px');

  1337          }

  1338   

  1339        if (deltaY < 0) 

  1340         {

  1341          shape.setAttributeNS(null, 'y', parseFloat(toY)  + 'px');

  1342          shape.setAttributeNS(null, 'height', parseFloat(-deltaY) + 'px' );

  1343         }

  1344          else 

  1345         {

  1346          shape.setAttributeNS(null, 'height', parseFloat(deltaY) + 'px');

  1347  

  1348         }

  1349      

  1350    } 

  1351   if (shape.tagName == 'ellipse') {

  1352             if (deltaX < 0) {

  1353               shape.setAttributeNS(null, 'cx', (fromX + deltaX / 2) + 'px');

  1354               shape.setAttributeNS(null, 'rx', (-deltaX / 2) + 'px');

  1355             }

  1356             else {

  1357               shape.setAttributeNS(null, 'cx', (fromX + deltaX / 2) + 'px');

  1358               shape.setAttributeNS(null, 'rx', (deltaX / 2) + 'px');

  1359             }

  1360           

  1361             if (deltaY < 0) {

  1362               shape.setAttributeNS(null, 'cy', (fromY + deltaY / 2) + 'px');

  1363               shape.setAttributeNS(null, 'ry', (-deltaY / 2) + 'px');

  1364             }

  1365             else {

  1366               shape.setAttributeNS(null, 'cy', (fromY + deltaY / 2) + 'px');

  1367               shape.setAttributeNS(null, 'ry', (deltaY / 2) + 'px');

  1368             }

  1369   }

  1370   if (shape.tagName == 'line') {

  1371           shape.setAttributeNS(null, 'x2', toX);

  1372           shape.setAttributeNS(null, 'y2', toY);

  1373   } 

  1374   if (shape.tagName == 'polyline') {    

  1375         

  1376        xpArray.push(toX);

  1377           ypArray.push(toY);  

  1378                    var thispath=''+xpArray[1]+','+ypArray[1];  

  1379  		    var thispath1=''; 

  1380 		    var thispath2='';

  1381                   var maxcont=xpArray.length;

  1382       

  1383         for(var conta=2;conta< maxcont;conta++){        

  1384           thispath1+=' '+xpArray[conta]+' '+ypArray[conta];

  1385           thispath2+=' '+xpArray[conta]+', '+ypArray[conta];  

  1386 	

  1387         }

  1388 

  1389        

  1390 		shape.setAttributeNS(null,'points',thispath+thispath1);

  1391 	

  1392 	

  1393     }    

  1394     

  1395   if (shape.tagName == 'path') {

  1396         

  1397     if (selectmode == 'controlpath')

  1398      {   

  1399                 var end='';

  1400 	if(data_path_close==true){end='z';}

  1401 

  1402         var thispath='M'+setPoints[0]+' ';  

  1403         var maxcont=setPoints.length;

  1404       

  1405         for(var conta=1;conta< maxcont;conta++){        

  1406           thispath+='L'+setPoints[conta]+' ';

  1407           

  1408 	

  1409         }                               

  1410         var path=thispath+'L'+toX+','+toY+end;

  1411           //var pointshape=shape.getAttributeNS(null,"d");

  1412          	shape.setAttributeNS(null,'d',path);

  1413                document.forms[0].control_codebase.value=path;

  1414      }

  1415       else

  1416      { 

  1417   

  1418 	  xpArray.push(toX);

  1419           ypArray.push(toY);  

  1420   

  1421                     var thispath=''+xpArray[1]+','+ypArray[1];  

  1422  		    var thispath1=''; 

  1423 		    var thispath2='';

  1424                   var maxcont=xpArray.length;

  1425       

  1426         for(var conta=2;conta< maxcont;conta++){        

  1427           //thispath1+=' '+xpArray[conta]+' '+ypArray[conta];

  1428           thispath2+=' '+xpArray[conta]+','+ypArray[conta];  

  1429 	  //if((conta+2)%3==0){thispath2+=' C';}

  1430         }

  1431         var end='';

  1432 	if(data_path_close==true){end='z';}

  1433 		shape.setAttributeNS(null,'d','M '+thispath+ ' L'+thispath2+end);

  1434        

  1435        

  1436           

  1437       /*      

  1438   

  1439            var pointshape=shape.getAttributeNS(null,"points");

  1440           var thispoint=' '+toX+' '+toY;  

  1441              $('status').innerHTML =pointshape; 

  1442         shape.setAttributeNS(null,'points',pointshape+thispoint)

  1443         shape.setAttributeNS(null, 'stroke-width', "25");  

  1444         shape.setAttributeNS(null, 'fill', "#FFFF00");

  1445     

  1446     //shape.points.push(toX);

  1447     //shape.points.push(toY);

  1448     //shape.setAttribute("points",pointshape+);      

  1449          // var maxcont=xpArray.length-1;

  1450           var thispath=''+xpArray[1]+','+ypArray[1];  

  1451        var maxcont=xpArray.length;

  1452        //alert(maxcont);

  1453         for(var conta=2;conta< maxcont;conta++){        

  1454           thispath+=','+xpArray[conta]+','+ypArray[conta]; 

  1455         }

  1456         //alert(shape.points[1]);

  1457     //shape.setAttribute("points",thispath);       

  1458     //points.Value = thispath;       

  1459       var thispath=''+xpArray[1]+','+ypArray[1];  

  1460        var maxcont=xpArray.length;

  1461        //alert(maxcont);

  1462         for(var conta=1;conta< maxcont;conta++){        

  1463           thispath+=','+xpArray[conta]+','+ypArray[conta];

  1464         }

  1465         

  1466         shape.points.Value = thispath;

  1467         */  

  1468           

  1469           

  1470      

  1471   

  1472         /*

  1473  

  1474           

  1475        //this.renderer.move(this.selected, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY); 

  1476        // shape.setAttributeNS(null,'transform', "translate("+(toX)+","+(toy)+")");

  1477 

  1478         

  1479        

  1480          var thispath=''+xpArray[0]+','+ypArray[0]; 

  1481        var maxcont=xpArray.length;

  1482         //shape.setAttributeNS(null,'transform', "translate("+toX+","+toY+")");

  1483         for(var conta=1;conta< maxcont;conta++){        

  1484           thispath+=','+xpArray[conta]+','+ypArray[conta];

  1485         }

  1486            

  1487         shape.setAttributeNS(null, 'x', toX);

  1488         shape.setAttributeNS(null, 'y', toY);

  1489      shape.setAttributeNS(null, 'points', thispath);

  1490       */

  1491     }  

  1492   } 

  1493   if (shape == 'text') {}  

  1494     

  1495 }; 

  1496 SVGRenderer.prototype.tocurve = function()  

  1497 {

  1498   var points=$('control_codebase').value.split('L');

  1499      var chain='';

  1500      chain+=points[0]+'C';

  1501      var numpoints=points.length-1;

  1502      for(var a=1;a<numpoints;a++)

  1503       {

  1504        if(a%3==0)

  1505         { 

  1506          chain+=points[a]+'C';

  1507         }

  1508          else

  1509         {

  1510          chain+=points[a];       

  1511         } 

  1512       } 

  1513       if(numpoints%3==0){

  1514         chain+=points[numpoints]+'';

  1515       } 

  1516       if(numpoints%3==2){

  1517         chain+=points[numpoints-1]+'';

  1518         chain+=points[numpoints]+'';

  1519       } 

  1520       if(numpoints%3==1){ 

  1521         chain+=points[numpoints-1]+'';

  1522         chain+=points[numpoints-1]+'';

  1523         chain+=points[numpoints]+'';

  1524       } 

  1525       if(numpoints%3==3){ 

  1526         chain+=points[numpoints-1]+'';

  1527         chain+=points[numpoints-1]+'';

  1528         chain+=points[numpoints-1]+'';

  1529         chain+=points[numpoints]+'';

  1530       } 

  1531 

  1532       $('someinfo').value=numpoints+ ' '+ numpoints%3;

  1533       $('control_codebase').value=chain; 

  1534       setShape(); 

  1535  }; 

  1536  

  1537 

  1538 SVGRenderer.prototype.info = function(shape)

  1539 {   

  1540 var shInfo = {}; 

  1541 //shInfo.id =null; 

  1542 //if(shInfo.id !=null){ 

  1543 if(shape.id != "tracker") 

  1544 {  

  1545 if(shape.getAttribute('id')==null){

  1546    var nid='shape:' + createUUID(); 

  1547    shape.setAttributeNS(null, 'id',  nid);

  1548    //shInfo.id = shape.id.substr(6); 

  1549  

  1550  } 

  1551  shInfo.id =shape.getAttribute('id');  

  1552  shInfo.type = shape.tagName;

  1553  

  1554   if(shape.tagName=='svg')

  1555   { 

  1556     shInfo.type ='doc'

  1557     shInfo.left = parseFloat(shape.getAttribute('x'));

  1558     shInfo.top = parseFloat(shape.getAttribute('y'));   

  1559     shInfo.width = parseFloat(shape.getAttribute('width'));

  1560     shInfo.height = parseFloat(shape.getAttribute('height'));   

  1561     shInfo.viewBox = shape.getAttribute('viewBox');  

  1562     shInfo.bgcolor=this.container.style.backgroundColor;  

  1563     

  1564     return shInfo; 

  1565   }

  1566   else

  1567   {

  1568     

  1569   } 

  1570 

  1571  

  1572  

  1573  if (shape.hasAttributeNS(null,'transform')) { 

  1574      shInfo.transform = shape.getAttribute('transform');

  1575   }else{

  1576      shInfo.transform ='';

  1577   }   

  1578  

  1579  if (shape.tagName =='defs') 

  1580    { 

  1581     //alert('dfasd'); 

  1582     if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')

  1583      {  

  1584       

  1585       //var nid='shape:' + createUUID(); 

  1586       shape.setAttributeNS(null, 'id',  'defs');

  1587       shInfo.id=shape.getAttribute('id');

  1588      }

  1589      shInfo.id=shape.getAttribute('id');

  1590    }

  1591  if (shape.tagName == 'feGaussianBlur') 

  1592   {

  1593     shInfo.left = shape.getAttribute('stdDeviation');

  1594   } 

  1595 

  1596   if(shape.tagName == "text"){   

  1597  

  1598    shInfo.textFamily = shape.getAttribute('font-family')

  1599    shInfo.textSize = parseInt(shape.getAttribute('font-size'))

  1600    shInfo.top = parseFloat(shape.getAttribute('y'))

  1601    shInfo.left = parseFloat(shape.getAttribute('x'))

  1602    shInfo.text = shape.textContent 

  1603    shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

  1604 

  1605    //shInfo.text = shape.nodparseFloatue;

  1606    }

  1607  var rendering=true;     

  1608  if(shape.tagName =='image'){rendering=false;}

  1609  if(shape.tagName =='defs'){rendering=false;}

  1610  if(shape.tagName =='svg'){rendering=false;}

  1611  if(shape.tagName =='stop'){rendering=false;} 

  1612  

  1613  if(shape.tagName =='filter'){rendering=false;}

  1614  if(shape.tagName =='feGaussianBlur'){rendering=false;}

  1615 

  1616  

  1617  if(rendering==true)

  1618   {

  1619     shInfo.fillColor = shape.getAttribute('fill');

  1620     if((shape.getAttribute('fill')=='' || shape.getAttribute('fill')==null) && shape.parentNode.getAttribute('id')!='svg'){

  1621     

  1622       shInfo.fillColor = shape.parentNode.getAttribute('fill');

  1623           var mystyle= shape.parentNode.getAttribute('style'); 

  1624       if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)

  1625        {

  1626       

  1627        }

  1628         else

  1629        {

  1630         if(mystyle!= null){

  1631           //var estilo=shape.getAttribute('style');

  1632            var data;  

  1633    

  1634           var estilo=generateJSON(mystyle);

  1635           eval("data="+estilo);

  1636           //var data=eval('"'+estilo+'"'); 

  1637           //var data=estilo.evalJSON(); 

  1638     

  1639           (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize; 

  1640           (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily; 

  1641       

  1642           (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor; 

  1643           (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;

  1644           (data.transform)?shInfo.transform=data.transform:shInfo.transform;

  1645           (data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac; 

  1646  

  1647         }

  1648        

  1649        }

  1650     }

  1651     shInfo.filter = shape.getAttribute('filter')  

  1652     shInfo.lineColor = shape.getAttribute('stroke')  

  1653     shInfo.fillOpac = parseFloat(shape.getAttribute('fill-opacity'))

  1654     shInfo.lineOpac = parseFloat(shape.getAttribute('stroke-opacity'))

  1655     shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

  1656     

  1657     var mystyle= shape.getAttribute('style'); 

  1658     

  1659     if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)

  1660      {

  1661       

  1662      }

  1663       else

  1664      {

  1665       // shInfo.style=shape.getAttribute('style');

  1666      

  1667     if(mystyle!= null){

  1668       //var estilo=shape.getAttribute('style');

  1669       var data;  

  1670    

  1671       var estilo=generateJSON(mystyle);

  1672       eval("data="+estilo);

  1673       //var data=eval('"'+estilo+'"'); 

  1674       //var data=estilo.evalJSON(); 

  1675     

  1676       (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize; 

  1677       (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily; 

  1678       

  1679       (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor; 

  1680       (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;

  1681       (data.transform)?shInfo.transform=data.transform:shInfo.transform;

  1682       (data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac; 

  1683       //(data.color)?shInfo.lineColor=data.color:shInfo.lineColor;

  1684       

  1685        //shInfo.fillColor=data.fill;

  1686       //document.getElementById("someinfo").value +=data.fill+' ';//estilo ;//data['fill']+' ';//

  1687     }

  1688    }

  1689   }  

  1690  

  1691  

  1692  if (shape.tagName == 'rect') 

  1693    {

  1694    if(shape.getAttribute('rx') || shape.getAttribute('ry')){

  1695    shInfo.type = "rect";

  1696    shInfo.rx = parseFloat(shape.getAttribute('rx'))

  1697    shInfo.ry = parseFloat(shape.getAttribute('rx'))

  1698    }

  1699     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  1700     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  1701     shInfo.width = parseFloat(shape.getAttribute('width'));

  1702     shInfo.height = parseFloat(shape.getAttribute('height'));  

  1703    }

  1704   else if (shape.tagName == 'ellipse' || shape.tagName == 'circle') 

  1705    {     

  1706     if(shape.tagName == 'circle'){

  1707       shInfo.width = parseFloat(shape.getAttribute('r'))*2; 

  1708       shInfo.height = parseFloat(shape.getAttribute('r'))*2; 

  1709      }else{

  1710       shInfo.width = parseFloat(shape.getAttribute('rx'))*2;

  1711       shInfo.height = parseFloat(shape.getAttribute('ry'))*2;   

  1712      }

  1713     

  1714     shInfo.left =    parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);

  1715     shInfo.top =  parseFloat(shape.getAttribute('cy')) - (shInfo.height/2)  ;

  1716    }

  1717    else if(shape.tagName == 'linearGradient') { 

  1718     shInfo.text =shape.getAttribute('gradientUnits');//"userSpaceOnUse" 

  1719     shInfo.left = shape.getAttribute('x1');

  1720     shInfo.top = shape.getAttribute('y1');

  1721     shInfo.width = shape.getAttribute('x2');

  1722     shInfo.height = shape.getAttribute('y2');

  1723     shInfo.href = shape.getAttribute('xlink:href');  

  1724    } 

  1725    else if(shape.tagName == 'radialGradient') {  

  1726     shInfo.text =shape.getAttribute('gradientUnits');//"userSpaceOnUse" 

  1727     shInfo.left = shape.getAttribute('cx');

  1728     shInfo.top = shape.getAttribute('cy');

  1729     shInfo.width = shape.getAttribute('fx');

  1730     shInfo.height = shape.getAttribute('fy');  

  1731     shInfo.lineWidth = shape.getAttribute('r');

  1732     shInfo.href = shape.getAttribute('xlink:href');  

  1733    }   

  1734     else if(shape.tagName == 'stop') 

  1735    {

  1736     shInfo.fillColor = shape.getAttribute('stop-color');

  1737     shInfo.fillOpac = shape.getAttribute('stop-opacity');

  1738     shInfo.lineOpac = shape.getAttribute('offset');

  1739     var mystyle= shape.getAttribute('style');

  1740     if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)

  1741      {

  1742       

  1743      }

  1744       else

  1745      {

  1746       if(mystyle!= null)

  1747        {

  1748         var data;  

  1749         var estilo=generateJSON(mystyle);

  1750         eval("data="+estilo);

  1751         (data["stop-color"])?shInfo.fillColor=data["stop-color"]:shInfo.fillColor;

  1752         (data["stop-opacity"])?shInfo.fillOpac=data["stop-opacity"]:shInfo.fillOpac;

  1753         //document.getElementById("someinfo").value +=data["stop-color"]+' '; 

  1754        } 

  1755      }

  1756    }

  1757   else if (shape.tagName == 'line') 

  1758    {

  1759     shInfo.left = parseFloat(shape.getAttribute('x1'));

  1760     shInfo.top = parseFloat(shape.getAttribute('y1'));

  1761     shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;

  1762     shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;

  1763    } 

  1764   else if (shape.tagName == 'polyline' || shape.tagName == 'polygon') 

  1765    {

  1766     shInfo.points = shape.getAttribute('points');

  1767    } 

  1768  

  1769   else if (shape.tagName == 'g') 

  1770    { 

  1771     shInfo.type = "group";

  1772     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  1773     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  1774     shInfo.width = parseFloat(shape.getAttribute('width'));

  1775     shInfo.height = parseFloat(shape.getAttribute('height'));  

  1776     shInfo.fillColor = shape.getAttribute('fill');

  1777     if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')

  1778       {

  1779        var nid='shape:' + createUUID(); 

  1780        shape.setAttributeNS(null, 'id',  nid);

  1781        shInfo.id=shape.getAttribute('id');

  1782       } 

  1783      

  1784    }   

  1785   else if (shape.tagName == 'path')

  1786    {

  1787     shInfo.points = shape.getAttribute('d');     

  1788     //shInfo.transform = shape.getAttribute('transform'); 

  1789  

  1790     //alert(shInfo.transform);

  1791     //document.forms[0].codebase.value=shape.getAttribute('d'); 

  1792    

  1793    } 

  1794    else if (shape.tagName == 'pattern') 

  1795    { 

  1796     

  1797     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  1798     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  1799     shInfo.width = parseFloat(shape.getAttribute('width'));

  1800     shInfo.height = parseFloat(shape.getAttribute('height'));  

  1801     shInfo.viewBox = shape.getAttribute('viewBox');

  1802    

  1803     if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')

  1804       {

  1805        var nid='shape:' + createUUID(); 

  1806        shape.setAttributeNS(null, 'id',  nid);

  1807        shInfo.id=shape.getAttribute('id');

  1808       } 

  1809 

  1810    }    

  1811   else if (shape.tagName == 'image')

  1812    {                                     

  1813     

  1814     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  1815     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  1816     shInfo.width = parseFloat(shape.getAttribute('width'));

  1817     shInfo.height = parseFloat(shape.getAttribute('height'));   

  1818     shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));   

  1819     shInfo.href = shape.getAttribute('href');  

  1820      

  1821   }                                               

  1822   else if (shape.tagName == 'use')

  1823    {                                     

  1824     

  1825     shInfo.href = shape.getAttribute('xlink:href');  

  1826      

  1827   }             

  1828   if(shape.parentNode.tagName != 'svg'){

  1829     //shInfo.width = parseFloat(shape.getAttribute('width'));

  1830     //shInfo.height = parseFloat(shape.getAttribute('height'));   

  1831     //shInfo.viewBox = shape.getAttribute('viewBox');   

  1832     shInfo.parent=shape.parentNode.getAttribute('id');

  1833 

  1834   }               

  1835     

  1836     return shInfo;  

  1837   }else{

  1838    //do nothing if its the tracker

  1839    }

  1840   

  1841    	

  1842    	

  1843 };

  1844  

  1845 SVGRenderer.prototype.info01 = function(shape)

  1846 {   

  1847  var shInfo = {};

  1848 if(shape.id != "tracker"){

  1849  //shInfo.id = shape.id.substr(6); 

  1850  shInfo.id =shape.getAttribute('id');

  1851  shInfo.type = shape.tagName; 

  1852  

  1853  if(shape.tagName=='svg')

  1854   { 

  1855     shInfo.type ='doc'

  1856     shInfo.left = parseFloat(shape.getAttribute('x'));

  1857     shInfo.top = parseFloat(shape.getAttribute('y'));   

  1858     shInfo.width = parseFloat(shape.getAttribute('width'));

  1859     shInfo.height = parseFloat(shape.getAttribute('height'));   

  1860     shInfo.viewBox = shape.getAttribute('viewBox');  

  1861     shInfo.bgcolor=this.container.style.backgroundColor; 

  1862   }

  1863   

  1864  if (shape.hasAttributeNS(null,'transform')) { 

  1865      shInfo.transform = shape.getAttribute('transform');

  1866   }else{

  1867      shInfo.transform ='';

  1868   }   

  1869  

  1870   if(shape.tagName == "text"){   

  1871  

  1872    shInfo.textFamily = shape.getAttribute('font-family')

  1873    shInfo.textSize = parseInt(shape.getAttribute('font-size'))

  1874    shInfo.top = parseFloat(shape.getAttribute('y'))

  1875    shInfo.left = parseFloat(shape.getAttribute('x'))

  1876    shInfo.text = shape.textContent 

  1877    shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

  1878 

  1879    //shInfo.text = shape.nodparseFloatue;

  1880    }                          

  1881   var styled=true; 

  1882  if(shape.tagName =='image'){styled=false;}      

  1883  if(shape.tagName =='g'){styled=false;}  

  1884  if(shape.tagName =='stop'){styled=false;}  

  1885  if(shape.tagName =='svg'){styled=false;}  

  1886  if(styled)

  1887   {

  1888     shInfo.fillColor = shape.getAttribute('fill')

  1889     shInfo.lineColor = shape.getAttribute('stroke')  

  1890     shInfo.fillOpac = parseFloat(shape.getAttribute('fill-opacity'))

  1891     shInfo.lineOpac = parseFloat(shape.getAttribute('stroke-opacity'))

  1892     shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

  1893     

  1894     var mystyle= shape.getAttribute('style'); 

  1895     

  1896     if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)

  1897      {

  1898       

  1899      }

  1900       else

  1901      {

  1902       // shInfo.style=shape.getAttribute('style');

  1903      

  1904     if(mystyle!= null){

  1905       //var estilo=shape.getAttribute('style');

  1906       var data;  

  1907    

  1908       var estilo=generateJSON(mystyle);

  1909       eval("data="+estilo);

  1910       //var data=eval('"'+estilo+'"'); 

  1911       //var data=estilo.evalJSON(); 

  1912     

  1913       (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize; 

  1914       (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily; 

  1915       

  1916       (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor; 

  1917       (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;

  1918       (data.transform)?shInfo.transform=data.transform:shInfo.transform;

  1919       (data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac; 

  1920        //shInfo.fillColor=data.fill;

  1921       //document.getElementById("someinfo").value +=data.fill+' ';//estilo ;//data['fill']+' ';//

  1922     }

  1923    }

  1924   }  

  1925  

  1926  

  1927  if (shape.tagName == 'rect') 

  1928    {

  1929    if(shape.getAttribute('rx') || shape.getAttribute('ry')){

  1930    shInfo.type = "rect";

  1931    shInfo.rx = parseFloat(shape.getAttribute('rx'))

  1932    shInfo.ry = parseFloat(shape.getAttribute('rx'))

  1933    }

  1934     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  1935     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  1936     shInfo.width = parseFloat(shape.getAttribute('width'));

  1937     shInfo.height = parseFloat(shape.getAttribute('height'));  

  1938    }

  1939   else if (shape.tagName == 'ellipse' || shape.tagName == 'circle') 

  1940    {     

  1941     if(shape.tagName == 'circle'){

  1942       shInfo.width = parseFloat(shape.getAttribute('r'))*2; 

  1943       shInfo.height = parseFloat(shape.getAttribute('r'))*2; 

  1944      }else{

  1945       shInfo.width = parseFloat(shape.getAttribute('rx'))*2;

  1946       shInfo.height = parseFloat(shape.getAttribute('ry'))*2;   

  1947      }

  1948     

  1949     shInfo.left =    parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);

  1950     shInfo.top =  parseFloat(shape.getAttribute('cy')) - (shInfo.height/2)  ;

  1951    }

  1952    else if(shape.tagName == 'linearGradient') {   

  1953     shInfo.left = (shape.getAttribute( 'x1'));

  1954     shInfo.top = parseFloat(shape.getAttribute( 'y1'));

  1955     shInfo.width = parseFloat(shape.getAttribute('x2'));

  1956     shInfo.height = parseFloat(shape.getAttribute('y2'));  

  1957 

  1958    }

  1959    else if(shape.tagName == 'stop') {

  1960     shInfo.fillColor = shape.getAttribute('stop-color');

  1961     shInfo.fillOpac = shape.getAttribute('stop-opacity');

  1962     shInfo.lineOpac = shape.getAttribute('offset');

  1963     var mystyle= shape.getAttribute('style');

  1964     if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)

  1965      {

  1966       

  1967      }

  1968       else

  1969      {

  1970     if(mystyle!= null){

  1971       var data;  

  1972       var estilo=generateJSON(mystyle);

  1973       eval("data="+estilo);

  1974       (data["stop-color"])?shInfo.fillColor=data["stop-color"]:shInfo.fillColor;

  1975       (data["stop-opacity"])?shInfo.fillOpac=data["stop-opacity"]:shInfo.fillOpac;

  1976       document.getElementById("someinfo").value +=data["stop-color"]+' '; 

  1977      } 

  1978      

  1979     }

  1980    }

  1981   else if (shape.tagName == 'line') 

  1982    {

  1983     shInfo.left = parseFloat(shape.getAttribute('x1'));

  1984     shInfo.top = parseFloat(shape.getAttribute('y1'));

  1985     shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;

  1986     shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;

  1987    } 

  1988   else if (shape.tagName == 'polyline') 

  1989    {

  1990     shInfo.points = shape.getAttribute('points');

  1991    } 

  1992   else if (shape.tagName == 'g') 

  1993    { 

  1994     shInfo.type = "group";

  1995     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  1996     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  1997     shInfo.width = parseFloat(shape.getAttribute('width'));

  1998     shInfo.height = parseFloat(shape.getAttribute('height'));  

  1999     shInfo.fillColor = shape.getAttribute('fill')

  2000 

  2001    }   

  2002   else if (shape.tagName == 'path')

  2003    {

  2004     shInfo.points = shape.getAttribute('d');     

  2005     //shInfo.transform = shape.getAttribute('transform'); 

  2006  

  2007     //alert(shInfo.transform);

  2008     //document.forms[0].codebase.value=shape.getAttribute('d'); 

  2009    

  2010    }

  2011   else 

  2012   

  2013  

  2014   if (shape.tagName == 'image')

  2015    {                                     

  2016     

  2017     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  2018     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  2019     shInfo.width = parseFloat(shape.getAttribute('width'));

  2020     shInfo.height = parseFloat(shape.getAttribute('height'));   

  2021     shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));   

  2022     shInfo.href = shape.getAttribute('href');  

  2023      

  2024   } 

  2025   if(shape.parentNode.tagName != 'svg'){

  2026     //shInfo.width = parseFloat(shape.getAttribute('width'));

  2027     //shInfo.height = parseFloat(shape.getAttribute('height'));   

  2028     //shInfo.viewBox = parseFloat(shape.getAttribute('viewBox'));   

  2029     shInfo.parent=shape.parentNode.getAttribute('id');

  2030 

  2031   }

  2032     return shInfo;  

  2033   }else{

  2034    //do nothing if its the tracker

  2035    }

  2036   

  2037    	

  2038    	

  2039 };     

  2040 SVGRenderer.prototype.info01 = function(shape)

  2041 {   

  2042 

  2043 var shInfo = {};

  2044 if(shape.id != "tracker"){

  2045 shInfo.id = shape.id.substr(6);

  2046  shInfo.type = shape.tagName;

  2047  if (shape.hasAttributeNS(null,'transform')) { 

  2048      shInfo.transform = shape.getAttribute('transform');

  2049   }else{

  2050      shInfo.transform ='';

  2051   }   

  2052      

  2053  

  2054  //if(shape.tagName !='image')

  2055  // {

  2056     shInfo.fillColor = shape.getAttribute('fill')

  2057     shInfo.lineColor = shape.getAttribute('stroke')  

  2058     shInfo.fillOpac = parseFloat(shape.getAttribute('fill-opacity'))

  2059     shInfo.lineOpac = parseFloat(shape.getAttribute('stroke-opacity'))

  2060     shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

  2061  // }  

  2062  

  2063  

  2064  if (shape.tagName == 'rect') 

  2065    {

  2066    if(shape.getAttribute('rx') || shape.getAttribute('ry')){

  2067    shInfo.type = "roundrect";

  2068    shInfo.rx = parseFloat(shape.getAttribute('rx'))

  2069    shInfo.ry = parseFloat(shape.getAttribute('rx'))

  2070    }

  2071     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  2072     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  2073     shInfo.width = parseFloat(shape.getAttribute('width'));

  2074     shInfo.height = parseFloat(shape.getAttribute('height'));  

  2075    }

  2076   else if (shape.tagName == 'ellipse') 

  2077    {

  2078     shInfo.width = parseFloat(shape.getAttribute('rx'))*2;

  2079     shInfo.height = parseFloat(shape.getAttribute('ry'))*2;   

  2080     shInfo.left =    parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);

  2081     shInfo.top =  parseFloat(shape.getAttribute('cy')) - (shInfo.height/2)  ;

  2082  

  2083    }

  2084   else if (shape.tagName == 'line') 

  2085    {

  2086     shInfo.left = parseFloat(shape.getAttribute('x1'));

  2087     shInfo.top = parseFloat(shape.getAttribute('y1'));

  2088     shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;

  2089     shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;

  2090    } 

  2091   else if (shape.tagName == 'polyline') 

  2092    {

  2093     shInfo.points = shape.getAttribute('points');

  2094    }

  2095   else 

  2096   

  2097   if (shape.tagName == 'path')

  2098    {

  2099     shInfo.d = shape.getAttribute('d');     

  2100     //shInfo.transform = shape.getAttribute('transform'); 

  2101  

  2102     //alert(shInfo.transform);

  2103     //document.forms[0].codebase.value=shape.getAttribute('d'); 

  2104    

  2105    }

  2106   else 

  2107   

  2108   if(shape.tagName == "text"){   

  2109  

  2110    shInfo.textFamily = shape.getAttribute('font-family')

  2111    shInfo.textSize = parseInt(shape.getAttribute('font-size'))

  2112    shInfo.top = parseFloat(shape.getAttribute('y'))

  2113    shInfo.left = parseFloat(shape.getAttribute('x'))

  2114    shInfo.text = shape.textContent 

  2115    shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

  2116 

  2117    //shInfo.text = shape.nodparseFloatue;

  2118    }

  2119   else

  2120  

  2121   if (shape.tagName == 'image')

  2122    {                                     

  2123     

  2124     shInfo.left = parseFloat(shape.getAttribute( 'x'));

  2125     shInfo.top = parseFloat(shape.getAttribute( 'y'));

  2126     shInfo.width = parseFloat(shape.getAttribute('width'));

  2127     shInfo.height = parseFloat(shape.getAttribute('height'));   

  2128     shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));   

  2129     shInfo.href = shape.getAttribute('href');  

  2130      

  2131   }

  2132   

  2133     return shInfo;  

  2134   }else{

  2135    //do nothing if its the tracker

  2136    }

  2137 

  2138    	

  2139 }

  2140 

  2141 

  2142 

  2143 

  2144 

  2145 SVGRenderer.prototype.transformShape = function(shape,data,transform)

  2146 {      

  2147   var svgNamespace = 'http://www.w3.org/2000/svg'; 

  2148   var xlinkNS="http://www.w3.org/1999/xlink"; 

  2149    //

  2150  

  2151  if(shape.tagName == 'rect')

  2152   { 

  2153     var box = shape.getBBox();

  2154     var sdata=data.split(';'); 

  2155     

  2156     //alert(data[0]);     

  2157     shape.setAttributeNS(null,'x',parseFloat(sdata[0]));

  2158     shape.setAttributeNS(null,'y',parseFloat(sdata[1]));   

  2159     shape.setAttributeNS(null, 'width', parseFloat(sdata[2]));     

  2160     shape.setAttributeNS(null, 'height', parseFloat(sdata[3])); 

  2161     var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);

  2162     var centery=parseFloat(sdata[1])+parseFloat(box.height/2);    

  2163     shape.setAttributeNS(null, 'transform','rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')');

  2164     

  2165    //shape.nodparseFloatue=data;

  2166   }

  2167    else 

  2168  if(shape.tagName == 'text')

  2169   {    

  2170     if(data.indexOf('<;>',0)==-1 )

  2171      {  

  2172       shape.textContent = data;  

  2173      }

  2174       else

  2175      {  

  2176        var sdata=data.split('<;>'); //?????????

  2177        shape.textContent = sdata[0]; 

  2178        shape.setAttributeNS(null,'font-size',parseFloat(sdata[1])); 

  2179         shape.setAttributeNS(null,'font-family',sdata[2]);

  2180      }

  2181    //shape.nodparseFloatue=data;

  2182   }

  2183    else

  2184  if (shape.tagName == 'polyline') 

  2185   {

  2186     shape.setAttributeNS(null,'points',data);

  2187   }

  2188    else 

  2189  if (shape.tagName == 'image') 

  2190   {   

  2191     //alert(data);  

  2192     if(data.indexOf(';',0)==-1 )

  2193      {  

  2194       shape.setAttributeNS(xlinkNS,'href',data);

  2195      }

  2196       else

  2197      {  

  2198         var box = shape.getBBox();

  2199         var sdata=data.split(';');

  2200         shape.setAttributeNS(null,'x',parseFloat(sdata[0]));

  2201         shape.setAttributeNS(null,'y',parseFloat(sdata[1]));   

  2202         shape.setAttributeNS(null, 'width', parseFloat(sdata[2])); 

  2203         shape.setAttributeNS(null, 'height',parseFloat(sdata[3]));  

  2204         var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);

  2205         var centery=parseFloat(sdata[1])+parseFloat(box.height/2);    

  2206         shape.setAttributeNS(null, 'transform',' rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')');

  2207 

  2208 

  2209      } 

  2210       

  2211   }

  2212    else 

  2213  if (shape.tagName == 'path')

  2214   {     

  2215     if(data.indexOf(';',0)==-1 )

  2216      {  

  2217     	shape.setAttributeNS(null, 'd', data);  

  2218     	shape.setAttributeNS(null, 'transform', transform);  

  2219      }

  2220       else

  2221      {  

  2222         var box = shape.getBBox();

  2223         var sdata=data.split(';');

  2224         var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);

  2225         var centery=parseFloat(sdata[1])+parseFloat(box.height/2);    

  2226         shape.setAttributeNS(null, 'transform','scale('+parseFloat(sdata[2])+','+parseFloat(sdata[3])+')'+' rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')'+' translate('+parseFloat(sdata[0])+','+parseFloat(sdata[1])+')');

  2227 

  2228 

  2229      } 

  2230   }  

  2231    	                             

  2232 	                             

  2233 }

  2234 SVGRenderer.prototype.editShape = function(shape,data)

  2235 {   

  2236  if(shape.tagName == 'text'){

  2237    shape.textContent = data

  2238  }else

  2239    if (shape.tagName == 'polyline') 

  2240    {

  2241     shape.setAttributeNS(null,'points',data);

  2242    }

  2243   else 

  2244   

  2245   if (shape.tagName == 'path')

  2246    {

  2247     	shape.setAttributeNS(null, 'd', data);  

  2248     	

  2249    }  

  2250 	

  2251 }

  2252 SVGRenderer.prototype.editCommand = function(shape, cmd, value)

  2253 {

  2254   if (shape != null) {

  2255     if (cmd == 'fillcolor') {

  2256       if (value != '')

  2257         shape.setAttributeNS(null, 'fill', value);

  2258       else

  2259         shape.setAttributeNS(null, 'fill', 'none');

  2260     }

  2261     else if (cmd == 'linecolor') {

  2262       if (value != '')

  2263         shape.setAttributeNS(null, 'stroke', value);

  2264       else

  2265         shape.setAttributeNS(null, 'stroke', 'none');

  2266     }

  2267     else if (cmd == 'linewidth') {

  2268       shape.setAttributeNS(null, 'stroke-width', parseInt(value) + 'px');

  2269     } 

  2270     else if (cmd == 'fillopacity') {

  2271            if(shape.tagName=='image')

  2272             {

  2273              shape.setAttributeNS(null, 'opacity', parseFloat(value));

  2274             }

  2275              else

  2276             {

  2277                 shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));

  2278             }    

  2279       

  2280     }

  2281     else if (cmd == 'lineopacity') {         

  2282       

  2283       shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));

  2284       

  2285     }

  2286 

  2287   }

  2288 }

  2289 

  2290 

  2291 SVGRenderer.prototype.queryCommand = function(shape, cmd)

  2292 {

  2293   var result = '';

  2294   

  2295   if (shape != null) {

  2296     if (cmd == 'fillcolor') {

  2297       result = shape.getAttributeNS(null, 'fill');

  2298       if (result == 'none')

  2299         result = '';

  2300     }

  2301     else if (cmd == 'linecolor') {

  2302       result = shape.getAttributeNS(null, 'stroke');

  2303       if (result == 'none')

  2304         result = '';

  2305     }

  2306     else if (cmd == 'linewidth') {

  2307       result = shape.getAttributeNS(null, 'stroke');

  2308       if (result == 'none')

  2309         result = '';

  2310       else

  2311         result = shape.getAttributeNS(null, 'stroke-width');

  2312     }

  2313     else if (cmd == 'fillopacity') {

  2314            if(shape.tagName=='image')

  2315             {

  2316              shape.setAttributeNS(null, 'opacity', parseFloat(value));

  2317             }

  2318              else

  2319             {

  2320                 shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));

  2321             }    

  2322       

  2323     }

  2324     else if (cmd == 'lineopacity') {         

  2325       

  2326       shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));

  2327       

  2328     }

  2329 

  2330   }

  2331   

  2332   return result;

  2333 }

  2334 

  2335 SVGRenderer.prototype.getProperties = function(shape)

  2336 {

  2337   var result = '';

  2338   

  2339   if (shape != null) 

  2340    {

  2341       result = shape.getAttributeNS(null, 'fill');

  2342       if (result == 'none')

  2343        {

  2344          mefillColor.visible = 'hidden';

  2345          mefillColor.hex = '#000000'; 

  2346          filldraw=true;

  2347          setbe(1,'img_okfill');

  2348        }

  2349         else

  2350        {   

  2351          //alert(mefillColor.hex+' '+result);

  2352          mefillColor.visible = 'visible';

  2353          mefillColor.hex = result; 

  2354          var rgb=hex2rgb(result)

  2355          mefillColor.r=rgb[0];

  2356          mefillColor.g=rgb[1];

  2357          mefillColor.b=rgb[2];

  2358          filldraw=false;

  2359          setbe(1,'img_okfill');

  2360 

  2361        }

  2362 

  2363       result = shape.getAttributeNS(null, 'stroke');

  2364       if (result == 'none')

  2365        {    

  2366          mestrokeColor.visible = 'hidden'; 

  2367          mestrokeColor.hex = '#000000';

  2368          mestrokeColor.width = 0;

  2369          strokedraw=true;

  2370          setbe(2,'img_okstroke');

  2371 

  2372        }

  2373         else

  2374        { 

  2375          mestrokeColor.visible = 'visible'; 

  2376          mestrokeColor.hex = result; 

  2377          var rgb=hex2rgb(result)

  2378          mestrokeColor.r=rgb[0];

  2379          mestrokeColor.g=rgb[1];

  2380          mestrokeColor.b=rgb[2];

  2381          strokedraw=false;

  2382          setbe(2,'img_okstroke');

  2383 

  2384        }

  2385 

  2386       result = shape.getAttributeNS(null, 'stroke-width');

  2387       mestrokeColor.width = result;

  2388  

  2389       result = shape.getAttributeNS(null, 'fill-opacity'); 

  2390       mefillColor.opacity = result;

  2391 

  2392       result = shape.getAttributeNS(null, 'stroke-opacity');

  2393       mestrokeColor.opacity = result;

  2394       

  2395       setProperties();

  2396    }

  2397 }

  2398 

  2399 

  2400 SVGRenderer.prototype.showMultiSelect = function(iniX,iniY) { 

  2401   var tracker = document.getElementById('trackerMultiSelect');

  2402   if (tracker) {

  2403     this.remove(tracker);

  2404   }

  2405   

  2406   var coord=this.editor.viewInputxy;

  2407 	toX=parseFloat(coord[0]);

  2408 	toY=parseFloat(coord[1]); 

  2409 	

  2410     tracker = document.createElementNS(svgNamespace, 'rect'); 

  2411       

  2412     tracker.setAttributeNS(null, 'x', iniX);

  2413     tracker.setAttributeNS(null, 'y', iniY);    

  2414   tracker.setAttributeNS(null, 'width', toX);

  2415   tracker.setAttributeNS(null, 'height', toY);

  2416   tracker.setAttributeNS(null, 'fill', '#ffffff');

  2417   tracker.setAttributeNS(null, 'stroke', 'green');

  2418   tracker.setAttributeNS(null, 'stroke-width', widthLine);  

  2419   

  2420    this.svgRoot.appendChild(tracker);     

  2421 }

  2422 

  2423 

  2424 function mouseCoord()

  2425 {                                           

  2426    var coord=this.editor.viewInputxy;

  2427    coord[0]=parseFloat(coord[0]);

  2428    coord[1]=parseFloat(coord[1]); 

  2429    return coord

  2430 } 

  2431 /*

  2432 function nodeHit(node)

  2433 {                                           

  2434    node.addEventListener("mousemove", function(event) {nodeMove(node)}, false);            

  2435   

  2436 }

  2437 

  2438 function nodeUp(node)

  2439 {                                           

  2440    //node.stopObserving("mousemove");

  2441 }                                                                             

  2442 

  2443 function nodeMove(node)

  2444 {                                           

  2445    var mypath=$('control_codebase').value; 

  2446    var  x= $('option_path_x').value;

  2447    var y= $('option_path_y').value; 

  2448    var precoord=x+','+y; 

  2449     var coord=mouseCoord(); 

  2450    node.setAttributeNS(null, 'x', coord[0]-2); 

  2451    node.setAttributeNS(null, 'y', coord[1]-2); 

  2452 

  2453    $('option_path_x').value=parseFloat(node.getAttributeNS(null,'x'))+2; 

  2454    $('option_path_y').value=parseFloat(node.getAttributeNS(null,'y'))+2; 

  2455    

  2456     var  cadx= $('option_path_x').value;

  2457     var cady= $('option_path_y').value; 

  2458     var coord=cadx+','+cady;

  2459           var cad1=new RegExp(precoord,"g");

  2460       

  2461       

  2462       var result=mypath.replace(cad1, coord);

  2463       

  2464      

  2465       $('control_codebase').value=result; 

  2466       

  2467       $('someinfo').value=precoord;

  2468       setShape();

  2469 

  2470     

  2471     

  2472 } 

  2473 */ 

  2474                                                                              

  2475 var memoNode=null; 

  2476 var memoPrevControl=new Array();

  2477 var memoNextControl=new Array();

  2478 

  2479 SVGRenderer.prototype.nodeMove = function(newx,newy) { 

  2480     var mypath=$('control_codebase').value; 

  2481    var  x= $('option_path_x').value;

  2482    var y= $('option_path_y').value; 

  2483    var precoord=x+','+y; 

  2484    

  2485    $('option_path_x').value=newx; 

  2486    $('option_path_y').value=newy; 

  2487     

  2488       var  cadx= newx;

  2489       var cady= newy; 

  2490   

  2491       var coord=cadx+','+cady;

  2492           var cad1=new RegExp(precoord,"g");

  2493       

  2494       

  2495       var result=mypath.replace(cad1, coord);

  2496       

  2497      

  2498       $('control_codebase').value=result; 

  2499       

  2500       $('someinfo').value=precoord;

  2501       setShape();

  2502 

  2503 }

  2504 

  2505 function drawNodeControl(svg,numId){

  2506 

  2507       var svgNamespace = 'http://www.w3.org/2000/svg';

  2508       var color1='#0066ff';          

  2509            // if(parseInt(memoNode.id)==a){   

  2510                    

  2511                    var pointprev=memoPrevControl[numId].split(',');

  2512             

  2513                   var controlNode1 = document.createElementNS(svgNamespace, 'rect'); 

  2514                   controlNode1.setAttributeNS(null, 'x', pointprev[0]-widthLine*2);

  2515                   controlNode1.setAttributeNS(null, 'y', pointprev[1]-widthLine*2);

  2516           

  2517                   controlNode1.setAttributeNS(null, 'width', widthLine*4);

  2518                   controlNode1.setAttributeNS(null, 'height', widthLine*4);

  2519                   controlNode1.setAttributeNS(null, 'fill', color1);

  2520                   controlNode1.setAttributeNS(null, 'stroke', '#000000');

  2521                   controlNode1.setAttributeNS(null, 'stroke-width', '0'); 

  2522                   controlNode1.setAttributeNS(null, 'id', 'controlNode1'); 

  2523                   controlNode1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2;  }, false);

  2524                   svg.appendChild(controlNode1);  

  2525                   

  2526                    var pointnext=memoNextControl[numId].split(',');

  2527                   

  2528                

  2529                   var controlNode2 = document.createElementNS(svgNamespace, 'rect'); 

  2530                   controlNode2.setAttributeNS(null, 'x', pointnext[0]-widthLine*2);

  2531                   controlNode2.setAttributeNS(null, 'y', pointnext[1]-widthLine*2);

  2532           

  2533                   controlNode2.setAttributeNS(null, 'width', widthLine*4);

  2534                   controlNode2.setAttributeNS(null, 'height', widthLine*4);

  2535                   controlNode2.setAttributeNS(null, 'fill', color1);

  2536                   controlNode2.setAttributeNS(null, 'stroke', '#000000');

  2537                   controlNode2.setAttributeNS(null, 'stroke-width', '0'); 

  2538                   controlNode2.setAttributeNS(null, 'id', 'controlNode1'); 

  2539                   controlNode2.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2;  }, false);

  2540                   svg.appendChild(controlNode2);  

  2541 

  2542             //}

  2543 

  2544 

  2545 }  

  2546                                                                    

  2547 SVGRenderer.prototype.showNodesCurve = function(path,controlNodeNum){ 

  2548      memoNextControl=new Array();

  2549      memoPrevControl=new Array(); 

  2550       var widthLine=this.editor.unit;

  2551      var svgNamespace = 'http://www.w3.org/2000/svg';

  2552     // tracker = document.createElementNS(svgNamespace, 'g');   

  2553      var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g'); 

  2554       svg.setAttributeNS(null, 'id', 'editNodesPath'); 

  2555 

  2556      /* var group = document.getElementById('editNodesPath');

  2557       if (group) 

  2558        {

  2559            this.remove(group);

  2560        }

  2561        */

  2562 

  2563   var points=path.split(' ');

  2564      var chain='';

  2565      var segment=' ';  

  2566      prevControl=' ';

  2567      nextControl=' ';

  2568      nodePoint=' ';

  2569       var init=points[0].split('M'); 

  2570       var allcoords=init[1].split(' ');

  2571       var point=allcoords[0].split(',');

  2572           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2573         rect1.setAttributeNS(null, 'x', point[0]-widthLine*2);

  2574         rect1.setAttributeNS(null, 'y', point[1]-widthLine*2);

  2575           

  2576         rect1.setAttributeNS(null, 'width', widthLine*4);

  2577         rect1.setAttributeNS(null, 'height', widthLine*4);

  2578         rect1.setAttributeNS(null, 'fill', '#ff7700');

  2579         rect1.setAttributeNS(null, 'stroke', '#000000');

  2580         rect1.setAttributeNS(null, 'stroke-width', '0');  

  2581         rect1.setAttributeNS(null, 'id', '0'); 

  2582         //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 ); }, false);

  2583       rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2;  }, false);

  2584 

  2585         //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 );}, false);

  2586 

  2587         svg.appendChild(rect1);                                    

  2588       

  2589           if(controlNodeNum==0){ var color='#ffff00';}  

  2590          if(controlNodeNum==1){var color='#00ffff';}  

  2591          if(controlNodeNum==2){var color='#00cc00';}  

  2592          var color1='#ffff00';

  2593       

  2594      var numpoints=points.length-1;  

  2595      var recalls='';

  2596      var re = /^[-]?\d*\.?\d*$/;

  2597      for(var a=1;a<=numpoints;a++)

  2598       { 

  2599         

  2600         var ini=points[a].substring(0,1);

  2601         if (!ini.match(re))        

  2602         {                          

  2603           var end=points[a].substring(1); 

  2604           color='#0000ff';

  2605           if(ini=='L' || ini=='M')

  2606            {

  2607              color='#ffff00';

  2608            }

  2609           

  2610           if(ini=='C')

  2611           { 

  2612              recall=a+2;

  2613              //color='#ffff00';

  2614           }

  2615 

  2616         }else

  2617         { 

  2618           var end=points[a];

  2619           var ini='';  

  2620           color='#ff00ff'; 

  2621           if(a==recall)

  2622           { 

  2623              color='#ffff00';

  2624           }

  2625         } 

  2626         

  2627             

  2628         //segment=points[a].split(',');

  2629          prevControl=segment[0]+' '; 

  2630          nextControl=segment[1]+' '; 

  2631          nodePoint=segment[2]+' ';     

  2632          memoPrevControl[a]=prevControl;

  2633          memoNextControl[a]=nextControl;

  2634          if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}  

  2635          if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}  

  2636          if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}  

  2637          if(controlNodeNum==3){chain+=nodePoint; var point=nodePoint.split(',');}

  2638            

  2639             

  2640                //if (isNaN(valnum))         

  2641 

  2642          //if(ini=='C'){color='#ff00ff';}

  2643          

  2644          var point=end.split(',');

  2645          if(memoNode!=null){

  2646          }

  2647           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2648         rect1.setAttributeNS(null, 'x', point[0]-widthLine*2);

  2649         rect1.setAttributeNS(null, 'y', point[1]-widthLine*2);

  2650           

  2651         rect1.setAttributeNS(null, 'width', widthLine*4);

  2652         rect1.setAttributeNS(null, 'height', widthLine*4);

  2653         rect1.setAttributeNS(null, 'fill', color);

  2654         rect1.setAttributeNS(null, 'stroke', '#000000');

  2655         rect1.setAttributeNS(null, 'stroke-width', '0'); 

  2656         rect1.setAttributeNS(null, 'id', ''+a); 

  2657         rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );}drawNodeControl(svg,this.getAttributeNS(null,'id')); memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2;  }, false);

  2658 

  2659         //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);

  2660         // rect1.addEventListener("mousedown", function(event) {nodeHit(this);if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; document.forms[0].option_path_x.focus(); }, false);

  2661          //rect1.addEventListener("mousedown", function(event) { if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} nodeHit(this); memoNode=this;this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);

  2662          //rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} addControlPoints(segment[0],segment[1],svg); memoNode=this; this.setAttributeNS(null, 'fillColor', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);

  2663          //rect1.addEventListener("mouseup", function(event) {nodeUp(this); }, false);

  2664          //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'fillColor', '#ffcc00' ); }, false);

  2665          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'fillColor', '#00cc00' ); }, false);

  2666          

  2667 

  2668          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 ); }, false);

  2669 

  2670         svg.appendChild(rect1);                                    

  2671          

  2672       }                     

  2673       var info='';

  2674        

  2675          if(controlNodeNum==0){info='prev Control'}  

  2676          if(controlNodeNum==1){info='next Control'}  

  2677          if(controlNodeNum==2){info='points node'}   

  2678         // $('someinfo').value=numpoints+ ' '+info+':'+ chain;

  2679         $('someinfo').value='Crtl+Arrow to move';

  2680     //return chain;                                          

  2681     

  2682 

  2683       //this.svgRoot.appendChild(svg);   

  2684     

  2685     return svg;  

  2686         

  2687 };

  2688 

  2689 SVGRenderer.prototype.showNodesCurve1 = function(path,controlNodeNum){ 

  2690      memoNextControl=new Array();

  2691      memoPrevControl=new Array();

  2692      var svgNamespace = 'http://www.w3.org/2000/svg';

  2693     // tracker = document.createElementNS(svgNamespace, 'g');   

  2694      var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g'); 

  2695       svg.setAttributeNS(null, 'id', 'editNodesPath'); 

  2696 

  2697      /* var group = document.getElementById('editNodesPath');

  2698       if (group) 

  2699        {

  2700            this.remove(group);

  2701        }

  2702        */

  2703 

  2704   var points=path.split('C');

  2705      var chain='';

  2706      var segment=' ';  

  2707      prevControl=' ';

  2708      nextControl=' ';

  2709      nodePoint=' ';

  2710       var init=points[0].split('M'); 

  2711       var allcoords=init[1].split(' ');

  2712       var point=allcoords[0].split(',');

  2713           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2714         rect1.setAttributeNS(null, 'x', point[0]-2);

  2715         rect1.setAttributeNS(null, 'y', point[1]-2);

  2716           

  2717         rect1.setAttributeNS(null, 'width', 4);

  2718         rect1.setAttributeNS(null, 'height', 4);

  2719         rect1.setAttributeNS(null, 'fill', '#ff7700');

  2720         rect1.setAttributeNS(null, 'stroke', '#000000');

  2721         rect1.setAttributeNS(null, 'stroke-width', '0');  

  2722         rect1.setAttributeNS(null, 'id', '0'); 

  2723         //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 ); }, false);

  2724         rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2;  }, false);

  2725 

  2726         //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 );}, false);

  2727 

  2728         svg.appendChild(rect1);                                    

  2729       

  2730           if(controlNodeNum==0){ var color='#ffff00';}  

  2731          if(controlNodeNum==1){var color='#00ffff';}  

  2732          if(controlNodeNum==2){var color='#00cc00';}  

  2733          var color1='#ffff00';

  2734       

  2735      var numpoints=points.length-1;

  2736      for(var a=1;a<=numpoints;a++)

  2737       { 

  2738         

  2739         

  2740             

  2741         segment=points[a].split(' ');

  2742          prevControl=segment[0]+' '; 

  2743          nextControl=segment[1]+' '; 

  2744          nodePoint=segment[2]+' ';     

  2745          memoPrevControl[a]=prevControl;

  2746          memoNextControl[a]=nextControl;

  2747          if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}  

  2748          if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}  

  2749          if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}  

  2750          if(controlNodeNum==3){chain+=nodePoint; var point=nodePoint.split(',');}  

  2751       

  2752          if(memoNode!=null){

  2753          }

  2754           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2755         rect1.setAttributeNS(null, 'x', point[0]-2);

  2756         rect1.setAttributeNS(null, 'y', point[1]-2);

  2757           

  2758         rect1.setAttributeNS(null, 'width', 4);

  2759         rect1.setAttributeNS(null, 'height', 4);

  2760         rect1.setAttributeNS(null, 'fill', color);

  2761         rect1.setAttributeNS(null, 'stroke', '#000000');

  2762         rect1.setAttributeNS(null, 'stroke-width', '0'); 

  2763         rect1.setAttributeNS(null, 'id', ''+a); 

  2764         rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );}drawNodeControl(svg,this.getAttributeNS(null,'id')); memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2;  }, false);

  2765 

  2766         //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);

  2767         // rect1.addEventListener("mousedown", function(event) {nodeHit(this);if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; document.forms[0].option_path_x.focus(); }, false);

  2768          //rect1.addEventListener("mousedown", function(event) { if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} nodeHit(this); memoNode=this;this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);

  2769          //rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} addControlPoints(segment[0],segment[1],svg); memoNode=this; this.setAttributeNS(null, 'fillColor', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);

  2770          //rect1.addEventListener("mouseup", function(event) {nodeUp(this); }, false);

  2771          //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'fillColor', '#ffcc00' ); }, false);

  2772          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'fillColor', '#00cc00' ); }, false);

  2773          

  2774 

  2775          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 ); }, false);

  2776 

  2777         svg.appendChild(rect1);                                    

  2778          

  2779       }                     

  2780       var info='';

  2781        

  2782          if(controlNodeNum==0){info='prev Control'}  

  2783          if(controlNodeNum==1){info='next Control'}  

  2784          if(controlNodeNum==2){info='points node'}   

  2785         // $('someinfo').value=numpoints+ ' '+info+':'+ chain;

  2786         $('someinfo').value='Crtl+Arrow to move';

  2787     //return chain;                                          

  2788     

  2789 

  2790       //this.svgRoot.appendChild(svg);   

  2791     

  2792     return svg;  

  2793         

  2794 };

  2795 SVGRenderer.prototype.showTracker = function(shape,pathsEdit) {  

  2796 

  2797   var box = shape.getBBox();

  2798  var matrix = shape.getScreenCTM();

  2799   var trshape= shape.getAttributeNS(null, 'transform');  

  2800   var shap=1; 

  2801   var T = shape.getCTM();

  2802   //a,b,c,d,e,f

  2803   

  2804   var widthLine=this.editor.unit;

  2805     

  2806  

  2807  

  2808     //var thisTransform = {  sx: s[0], r: shape.vRotate, t: shape.vTranslate };

  2809     //if (currentTransform != null) alert(currentTransform.t);

  2810  

  2811   if (shape.tagName == 'rect') { 

  2812      

  2813      $('option_rect_rot').value= T.b* (Math.PI * 2 / 360); 

  2814      $('option_rect_trx').value= box.x;  

  2815      $('option_rect_try').value= box.y;

  2816      $('option_rect_sclx').value= box.width;  

  2817      $('option_rect_scly').value= box.height;

  2818 

  2819   }  

  2820 

  2821   if (shape.tagName == 'image'){

  2822     $('option_img_trx').value= box.x; 

  2823     $('option_img_try').value= box.y;

  2824     $('option_img_sclx').value= box.width;  

  2825     $('option_img_scly').value= box.height;

  2826     $('option_img_rot').value= T.b* (Math.PI * 2 / 360);

  2827   }

  2828   if (shape.tagName == 'text'){

  2829     //$('option_text_trx').value= box.x; 

  2830     //$('option_text_try').value= box.y; 

  2831     $('option_text_size').value= box.height;

  2832     /*$('option_text_sclx').value= box.width;  

  2833     $('option_text_scly').value= box.height;

  2834     $('option_text_rot').value= T.b* (Math.PI * 2 / 360);

  2835    */

  2836   }

  2837   if (shape.tagName == 'line'){ 

  2838     /*

  2839     $('option_line_trx').value= box.x;  

  2840     $('option_line_try').value= box.y;

  2841     */

  2842   }   

  2843   if (shape.tagName == 'ellipse'){  

  2844     /*$('option_ellipse_trx').value= putx;  

  2845     $('option_ellipse_try').value= puty;

  2846     $('option_ellipse_sclx').value= box.width;  

  2847     $('option_ellipse_scly').value= box.height;

  2848     $('option_ellipse_rot').value= T.b* (Math.PI * 2 / 360);

  2849     */

  2850   }

  2851   

  2852   

  2853   

  2854  /* if (shape.getAttributeNS(null, 'transform') ) { 

  2855         

  2856         

  2857         shap=2; }else{

  2858   }*/ 

  2859   var tracker = document.getElementById('tracker');

  2860   if (tracker) {

  2861     this.remove(tracker);

  2862   }

  2863 

  2864   var svgNamespace = 'http://www.w3.org/2000/svg';

  2865   

  2866      tracker = document.createElementNS(svgNamespace, 'g');    

  2867       tracker.setAttributeNS(null, 'id', 'tracker'); 

  2868       

  2869     var controlPoints=null;

  2870     if (shape.tagName == 'path') { shap=2; 

  2871     

  2872     /* $('option_path_trx').value= box.x;  

  2873      $('option_path_try').value= box.y;

  2874      $('option_path_sclx').value= T.a;   

  2875      $('option_path_scly').value= T.d; 

  2876      $('option_path_rot').value= T.b* (Math.PI * 2 / 360);

  2877      */                                        

  2878      var path=shape.getAttributeNS(null, 'd');

  2879       $('control_codebase').value=path;  

  2880        

  2881        //controlPoints=this.showNodesCurve(path,0);

  2882        //controlPoints=this.showNodesCurve(path,1); 

  2883        controlPoints=this.showNodesCurve(path,2);

  2884        

  2885            

  2886         /*   controlPoints=this.showNodesCurve(path,1); 

  2887    

  2888            tracker.appendChild(controlPoints);     

  2889            

  2890            controlPoints=this.showNodesCurve(path,0); 

  2891    

  2892            tracker.appendChild(controlPoints); 

  2893         */   

  2894    }        

  2895       

  2896      var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g'); 

  2897       svg.setAttributeNS(null, 'id', 'transformSquares'); 

  2898    

  2899           

  2900        //var rect = document.createElementNS(svgNamespace, 'rect');   

  2901        var border = document.createElementNS(svgNamespace, 'path');  

  2902        

  2903        var trshape='translate (0,0) rotate(0) translate(0,0) '; 

  2904        var trshape_split=trshape.split(') ');    

  2905        

  2906       // get_between (trshape, s1, s2) ;

  2907      if(shape.getAttributeNS(null, 'transform')){ 

  2908          var trshape=shape.getAttributeNS(null, 'transform') ;   

  2909          //var spl=trshape.replace(', ',' ');  

  2910          //var spl1=spl.replace(')',' ');    

  2911          var trshape_split=trshape.split(') '); 

  2912          

  2913 

  2914     }

  2915                                          

  2916   var corners = [];

  2917   var point = createPoint(box.x, box.y, box.width, box.height);

  2918  //point = {x:box.x, y:box.y, width: box.width, height:box.height};

  2919 //point = createPoint(box.x, box.y, box.width, box.height);    

  2920   //1

  2921   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );

  2922   point.x = box.x + box.width;

  2923   point.y = box.y;

  2924   //2

  2925   corners.push( createPoint(box.x + box.width, box.y + box.height, box.width, box.height) );

  2926   point.x = box.x + box.width;

  2927   point.y = box.y + box.height;

  2928   //3

  2929   //corners.push( point.matrixTransform(matrix) );

  2930   corners.push( createPoint(box.x , box.y + box.height, box.width, box.height) );

  2931   point.x = box.x;

  2932   point.y = box.y + box.height;

  2933   //4

  2934   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );   

  2935   

  2936   var max = createPoint(corners[0].x, corners[0].y);

  2937   var min = createPoint(corners[0].x, corners[0].y);

  2938 

  2939   // identify the new corner coordinates of the

  2940   // fully transformed bounding box

  2941   for (var i = 1; i < corners.length; i++) {

  2942     var x = corners[i].x;

  2943     var y = corners[i].y;

  2944     if (x < min.x) {

  2945       min.x = x;

  2946     }

  2947     else if (x > max.x) {

  2948       max.x = x;

  2949     }

  2950     if (y < min.y) {

  2951       min.y = y;

  2952     }

  2953     else if (y > max.y) {

  2954       max.y = y;

  2955     }

  2956   }

  2957   

  2958      

  2959      border.setAttributeNS(null, 'd', "M"+(min.x-(widthLine*10))+","+ (min.y-(widthLine*10))+' h'+(box.width+(widthLine*20))+','+(0)+' v'+(0)+','+(box.height+(widthLine*20))+' h'+(-box.width-(widthLine*20))+','+(0)+' z M'+(box.x+box.width+(widthLine*10))+","+ (box.y+(box.height/2)+' h'+(widthLine*25)+',0 '));   

  2960      

  2961      

  2962      border.setAttributeNS(null, 'fill', 'none');

  2963      border.setAttributeNS(null, 'stroke', '#cccccc');

  2964      border.setAttributeNS(null, 'stroke-width', widthLine); 

  2965        

  2966 // createRect(min.x, min.y, max.x - min.x, max.y - min.y);

  2967 

  2968       var circle1 = document.createElementNS(svgNamespace, 'ellipse');  

  2969       circle1.setAttributeNS(null, 'cx', (box.x + box.width+(widthLine*40)) + 'px');

  2970     circle1.setAttributeNS(null, 'cy', (box.y + box.height / 2) + 'px');

  2971     circle1.setAttributeNS(null, 'rx', (widthLine*5) + 'px');

  2972     circle1.setAttributeNS(null, 'ry', (widthLine*5) + 'px');   

  2973    circle1.setAttributeNS(null, 'fill', '#ffffff');

  2974   circle1.setAttributeNS(null, 'stroke', 'green');

  2975   circle1.setAttributeNS(null, 'stroke-width', widthLine);   

  2976 

  2977       var circleCenter = document.createElementNS(svgNamespace, 'ellipse');  

  2978       circleCenter.setAttributeNS(null, 'cx', (box.x + (box.width/2)) + 'px');

  2979     circleCenter.setAttributeNS(null, 'cy', (box.y + (box.height /2)) + 'px');

  2980     circleCenter.setAttributeNS(null, 'rx', (widthLine*10) + 'px');

  2981     circleCenter.setAttributeNS(null, 'ry', (widthLine*10) + 'px');   

  2982    circleCenter.setAttributeNS(null, 'fill', '#ffffff');

  2983   circleCenter.setAttributeNS(null, 'stroke', 'green');

  2984   circleCenter.setAttributeNS(null, 'stroke-width', widthLine);   

  2985 

  2986      var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2987   rect1.setAttributeNS(null, 'width', widthLine*10);

  2988   rect1.setAttributeNS(null, 'height', widthLine*10);

  2989   rect1.setAttributeNS(null, 'fill', '#ffffff');

  2990   rect1.setAttributeNS(null, 'stroke', 'green');

  2991   rect1.setAttributeNS(null, 'stroke-width', widthLine);  

  2992 

  2993   var rect2 = document.createElementNS(svgNamespace, 'rect');  

  2994   rect2.setAttributeNS(null, 'width', widthLine*10);

  2995   rect2.setAttributeNS(null, 'height', widthLine*10);

  2996   rect2.setAttributeNS(null, 'fill', '#ffffff');

  2997   rect2.setAttributeNS(null, 'stroke', 'green');

  2998   rect2.setAttributeNS(null, 'stroke-width', widthLine);  

  2999 

  3000   var rect3 = document.createElementNS(svgNamespace, 'rect');  

  3001   rect3.setAttributeNS(null, 'width', widthLine*10);

  3002   rect3.setAttributeNS(null, 'height', widthLine*10);

  3003   rect3.setAttributeNS(null, 'fill', '#ffffff');

  3004   rect3.setAttributeNS(null, 'stroke', 'green');

  3005   rect3.setAttributeNS(null, 'stroke-width', widthLine); 

  3006   

  3007   var rect4 = document.createElementNS(svgNamespace, 'rect');  

  3008   rect4.setAttributeNS(null, 'width', widthLine*10);

  3009   rect4.setAttributeNS(null, 'height', widthLine*10);

  3010   rect4.setAttributeNS(null, 'fill', '#ffffff');

  3011   rect4.setAttributeNS(null, 'stroke', 'green');

  3012   rect4.setAttributeNS(null, 'stroke-width', widthLine);  

  3013  

  3014   var rectmid12 = document.createElementNS(svgNamespace, 'rect');  

  3015   rectmid12.setAttributeNS(null, 'width', widthLine*10);

  3016   rectmid12.setAttributeNS(null, 'height', widthLine*10);

  3017   rectmid12.setAttributeNS(null, 'fill', '#ffffff');

  3018   rectmid12.setAttributeNS(null, 'stroke', 'green');

  3019   rectmid12.setAttributeNS(null, 'stroke-width', widthLine);  

  3020 

  3021   var rectmid23 = document.createElementNS(svgNamespace, 'rect');  

  3022   rectmid23.setAttributeNS(null, 'width', widthLine*10);

  3023   rectmid23.setAttributeNS(null, 'height', widthLine*10);

  3024   rectmid23.setAttributeNS(null, 'fill', '#ffffff');

  3025   rectmid23.setAttributeNS(null, 'stroke', 'green');

  3026   rectmid23.setAttributeNS(null, 'stroke-width', widthLine);  

  3027 

  3028   var rectmid34 = document.createElementNS(svgNamespace, 'rect');  

  3029   rectmid34.setAttributeNS(null, 'width', widthLine*10);

  3030   rectmid34.setAttributeNS(null, 'height', widthLine*10);

  3031   rectmid34.setAttributeNS(null, 'fill', '#ffffff');

  3032   rectmid34.setAttributeNS(null, 'stroke', 'green');

  3033   rectmid34.setAttributeNS(null, 'stroke-width', widthLine); 

  3034   

  3035   var rectmid41 = document.createElementNS(svgNamespace, 'rect');  

  3036   rectmid41.setAttributeNS(null, 'width', widthLine*10);

  3037   rectmid41.setAttributeNS(null, 'height', widthLine*10);

  3038   rectmid41.setAttributeNS(null, 'fill', '#ffffff');

  3039   rectmid41.setAttributeNS(null, 'stroke', 'green');

  3040   rectmid41.setAttributeNS(null, 'stroke-width', widthLine);   

  3041    // rect.setAttributeNS(null, 'x', box.x - widthLine*10);

  3042    // rect.setAttributeNS(null, 'y', box.y - widthLine*10);    

  3043     

  3044     rect1.setAttributeNS(null, 'x', box.x - widthLine*15);

  3045     rect1.setAttributeNS(null, 'y', box.y - widthLine*15);  

  3046    

  3047     

  3048     rect2.setAttributeNS(null, 'x', box.x + box.width +widthLine*5 );

  3049     rect2.setAttributeNS(null, 'y', box.y - widthLine*15);   

  3050 

  3051     rect3.setAttributeNS(null, 'x', box.x + box.width + widthLine*5 );

  3052     rect3.setAttributeNS(null, 'y', box.y + box.height + widthLine*5);

  3053                                                        

  3054     rect4.setAttributeNS(null, 'x', box.x - widthLine*15 );

  3055     rect4.setAttributeNS(null, 'y', box.y + box.height + widthLine*5);    

  3056 

  3057     

  3058 

  3059     rectmid12.setAttributeNS(null, 'x', box.x + (box.width/2) - widthLine*5);

  3060     rectmid12.setAttributeNS(null, 'y', box.y - widthLine*15);  

  3061 

  3062     rectmid23.setAttributeNS(null, 'x', box.x + box.width + widthLine*5 );

  3063     rectmid23.setAttributeNS(null, 'y', box.y + (box.height/2) - widthLine*5);   

  3064     

  3065     rectmid34.setAttributeNS(null, 'x', box.x + (box.width/2) - widthLine*5 );

  3066     rectmid34.setAttributeNS(null, 'y', box.y + box.height + widthLine*5);

  3067                                                            

  3068     rectmid41.setAttributeNS(null, 'x', box.x - widthLine*15 );

  3069     rectmid41.setAttributeNS(null, 'y', box.y + (box.height/2) - widthLine*5);

  3070      

  3071     svg.appendChild(border); 

  3072     var colorin="#ff0000";

  3073     var colorout="#ffffff" 

  3074       

  3075      circle1.addEventListener("mouseover", function(event) {circle1.setAttributeNS(null, 'cursor', 's-resize');  circle1.setAttributeNS(null, 'fill', colorin ); typeTransform='Rotate'; scaleType='nw'; }, false);

  3076      circle1.addEventListener("mouseout", function(event) {circle1.setAttributeNS(null, 'cursor', 'default');  circle1.setAttributeNS(null, 'fill', colorout ); typeTransform='Rotate'; }, false); //typeTransform='rotate'

  3077      circleCenter.addEventListener("mouseover", function(event) {circleCenter.setAttributeNS(null, 'cursor', 'move');  circleCenter.setAttributeNS(null, 'fill', colorin ); typeTransform='sp�nCenter'; scaleType='nw'; }, false);

  3078      circleCenter.addEventListener("mouseout", function(event) {circleCenter.setAttributeNS(null, 'cursor', 'default');  circleCenter.setAttributeNS(null, 'fill', colorout ); typeTransform=''; }, false); //typeTransform='rotate'

  3079  

  3080       

  3081      rect1.addEventListener("mouseover", function(event) {rect1.setAttributeNS(null, 'cursor', 'nw-resize');  rect1.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='nw';}, false);

  3082      rect1.addEventListener("mouseout", function(event) {rect1.setAttributeNS(null, 'cursor', 'default');  rect1.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); //typeTransform='rotate'

  3083     

  3084      rect2.addEventListener("mouseover", function(event) {rect2.setAttributeNS(null, 'cursor', 'ne-resize');  rect2.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='ne';}, false);  

  3085      rect2.addEventListener("mouseout", function(event) {rect2.setAttributeNS(null, 'cursor', 'default');  rect2.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);

  3086       

  3087      rect3.addEventListener("mouseover", function(event) {rect3.setAttributeNS(null, 'cursor', 'se-resize');  rect3.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='se';}, false);  

  3088      rect3.addEventListener("mouseout", function(event) {rect3.setAttributeNS(null, 'cursor', 'default');  rect3.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);

  3089      

  3090      rect4.addEventListener("mouseover", function(event) {rect4.setAttributeNS(null, 'cursor', 'sw-resize');  rect4.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='sw';}, false);  

  3091      rect4.addEventListener("mouseout", function(event) {rect4.setAttributeNS(null, 'cursor', 'default');  rect4.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);

  3092                                                     

  3093      rectmid12.addEventListener("mouseover", function(event) {rectmid12.setAttributeNS(null, 'cursor', 'n-resize');  rectmid12.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='n';}, false);  

  3094      rectmid12.addEventListener("mouseout", function(event) {rectmid12.setAttributeNS(null, 'cursor', 'default');  rectmid12.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  3095 

  3096      rectmid23.addEventListener("mouseover", function(event) {rectmid23.setAttributeNS(null, 'cursor', 'e-resize');  rectmid23.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='e';}, false);  

  3097      rectmid23.addEventListener("mouseout", function(event) {rectmid23.setAttributeNS(null, 'cursor', 'default');  rectmid23.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  3098      

  3099      rectmid34.addEventListener("mouseover", function(event) {rectmid34.setAttributeNS(null, 'cursor', 's-resize');  rectmid34.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='s';}, false);  

  3100      rectmid34.addEventListener("mouseout", function(event) {rectmid34.setAttributeNS(null, 'cursor', 'default');  rectmid34.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  3101 

  3102      rectmid41.addEventListener("mouseover", function(event) {rectmid41.setAttributeNS(null, 'cursor', 'w-resize');  rectmid41.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='w'; }, false);  

  3103      rectmid41.addEventListener("mouseout", function(event) {rectmid41.setAttributeNS(null, 'cursor', 'default');  rectmid41.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  3104      

  3105      //////////

  3106      svg.setAttributeNS(null, 'transform',trshape); 

  3107   

  3108     svg.appendChild(circle1);    

  3109     //tracker.appendChild(circleCenter);  

  3110    if (shape.tagName == 'text'){   

  3111     svg.appendChild(rect1); 

  3112     svg.appendChild(rect2);   

  3113     svg.appendChild(rect3); 

  3114     svg.appendChild(rect4);  

  3115   }else{

  3116     svg.appendChild(rect1); 

  3117     svg.appendChild(rect2);   

  3118     svg.appendChild(rect3); 

  3119     svg.appendChild(rect4);  

  3120     svg.appendChild(rectmid12);  

  3121     svg.appendChild(rectmid23);

  3122     svg.appendChild(rectmid34);

  3123     svg.appendChild(rectmid41);                                    

  3124 

  3125   }  

  3126     if(pathsEdit)

  3127      {    

  3128         controlPoints.setAttributeNS(null, 'transform',trshape); 

  3129         tracker.appendChild(controlPoints);      

  3130      }else{   

  3131         tracker.appendChild(svg); 

  3132      }   

  3133   this.svgRoot.appendChild(tracker);  

  3134       

  3135 }

  3136 

  3137 

  3138 SVGRenderer.prototype.getMarkup = function() { 

  3139        

  3140   return this.container.innerHTML;

  3141 }   

  3142 

  3143 

  3144 /////////////////////////////////

  3145 var rotatexxx=0; 

  3146  

  3147 var scaleType=''; 

  3148 var xrot=0;

  3149 var yrot=0;  

  3150 

  3151 var point = {x:0, y:0, width: 0, height:0};

  3152 

  3153 function createPoint (x, y, width, height) {

  3154     //var point = {x:34, y:22, width: 22, height:23};

  3155     //point.x = x;

  3156     //point.y = y;   

  3157     point = {x:x, y:y, width: width, height:height};

  3158     return point;

  3159   }

  3160 

  3161 ///////////////////////////////

  3162 

  3163 SVGRenderer.prototype.restruct= function(shape)

  3164 {

  3165  //alert('end');       

  3166  //forceRedraw(); 

  3167 //clearWorkspace();  

  3168 //document.getElementById('richdraw').style.cursor='default';    

  3169 };        

  3170 

  3171 

  3172 

  3173 SVGRenderer.prototype.transform = function() {

  3174     //document.forms[0].code.value='Im tranforming';

  3175 };

  3176 

  3177 SVGRenderer.prototype.scaleShape = function(shape,previus, toX, toY) {

  3178 

  3179 	 var box = shape.getBBox();  

  3180 	 var prevbox=previus.getBBox();

  3181 	var centerx= box.x+(box.width/2);

  3182 	var centery= box.y+(box.height/2); 

  3183 	var coord=this.editor.viewInputxy;

  3184 	toX=parseFloat(coord[0]);

  3185 	toY=parseFloat(coord[1]); 

  3186 	var d2p_center=dist2p(centerx,centery,toX,toY);       

  3187 

  3188 	var d2p=dist2p(box.x,box.y,toX,toY);

  3189 

  3190 	var shareScale=box.width/d2p;

  3191 

  3192 	var trans_ShareScale='';

  3193 	var tx, ty, tw, yh;

  3194 

  3195 	if(scaleType.length==1){

  3196 		if(scaleType== 'w')

  3197 		 {

  3198 			trans_ShareScale=shareScale+",1";  

  3199 			tx=toX; 

  3200 			ty=prevbox.y; 

  3201 			var dist=prevbox.x-toX;

  3202 			var w=dist+prevbox.width;

  3203 			if(w<1){w=1;}

  3204 			tw=w;

  3205 			th=prevbox.height;

  3206 			//document.forms[0].code.value=box.x+' '+toX+' '+dist+''; 

  3207 		 }        

  3208 		if(scaleType== 'e')

  3209 		 {

  3210 		        trans_ShareScale=shareScale+",1"; 

  3211 			tx=prevbox.x; 

  3212 			ty=prevbox.y; 

  3213 			var dist=toX-(prevbox.x+prevbox.width); //dist2p(toX,b,c,d);

  3214 			var w=dist+prevbox.width;

  3215 			if(w<1){w=1;}

  3216 			tw=w;

  3217 			th=prevbox.height;

  3218  

  3219 		 }        

  3220 		if(scaleType== 'n')

  3221 		 {

  3222 			trans_ShareScale="1,"+shareScale; 

  3223 			

  3224 			tx=prevbox.x; 

  3225 			ty=toY; 

  3226 			var dist=prevbox.y-toY;

  3227 			var h=dist+prevbox.height;

  3228 			if(h<1){h=1;}

  3229 			tw=prevbox.width;

  3230 			th=h;

  3231 

  3232 		 }

  3233                 if( scaleType== 's')

  3234                  {

  3235                         trans_ShareScale="1,"+shareScale;  

  3236 

  3237 			tx=prevbox.x; 

  3238 			ty=prevbox.y; 

  3239 			var dist=toY-(prevbox.y+prevbox.height); //dist2p(toX,b,c,d);

  3240 			var h=dist+prevbox.height;

  3241 			if(h<1){h=1;}

  3242 			tw=prevbox.width;

  3243 			th=h;

  3244 

  3245 	         }

  3246         }

  3247 	if(scaleType.length==2){

  3248 		if(scaleType== 'nw'){

  3249 			trans_ShareScale=shareScale+","+shareScale; 

  3250           

  3251       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  3252       			  var angle_diagonal=ang2v(prevbox.x,prevbox.y,prevbox.x+prevbox.width,prevbox.y+prevbox.height)

  3253             

  3254                         var ax= prevbox.x;

  3255                         var ay= prevbox.y;

  3256                         var bx= prevbox.x+prevbox.width; 

  3257                         var by= prevbox.y+prevbox.height; 

  3258                         

  3259                         var cx= toX;

  3260                         var cy= toY;

  3261                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  3262                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2));  

  3263                         

  3264                         var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  3265                  this.editor.log(angle_diagonal* 180 / Math.PI);       

  3266                     

  3267                 var tx= section_a[1];

  3268                 var ty= section_a[2];

  3269                 

  3270                         var ax= section_a[1];

  3271                         var ay= section_a[2];

  3272                         var bx= 0;

  3273                         var by= section_a[2] ; 

  3274                         

  3275                         var cx=prevbox.x+prevbox.width; 

  3276                         var cy= prevbox.y;

  3277 

  3278                         var dx= prevbox.x+prevbox.width;  

  3279                         var dy= 0;

  3280                         

  3281                       

  3282                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3283 

  3284                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  3285 

  3286               

  3287                 

  3288                         var ax= section_a[1];

  3289                         var ay= section_a[2];

  3290                         var bx= section_a[1] 

  3291                         var by= 0; 

  3292                         

  3293                         var cx= prevbox.x; 

  3294                         var cy= prevbox.y+prevbox.height; 

  3295 

  3296                         var dx= 0; 

  3297                         var dy= prevbox.y+prevbox.height;

  3298                         

  3299                       

  3300                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3301                 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  3302                 

  3303                 

  3304 

  3305                     

  3306                         if(distx<1){distx=1;}    

  3307 			

  3308          		

  3309 			if(disty<1){disty=1;}

  3310                         //document.forms[0].code.value=distx+' '+disty;

  3311 			tw=distx;

  3312 			th=disty;

  3313 

  3314 			

  3315 		}                  

  3316 		

  3317 	//////////////////// SE

  3318 		

  3319            if( scaleType== 'se'){

  3320 			trans_ShareScale=shareScale+","+shareScale;   

  3321 			

  3322 	          

  3323       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  3324        			var angle_diagonal=ang2v(prevbox.x,prevbox.y,prevbox.x+prevbox.width,prevbox.y+prevbox.height)

  3325 		

  3326 			

  3327 			

  3328                         var ax= prevbox.x;

  3329                         var ay= prevbox.y;

  3330                         var bx= prevbox.x+prevbox.width; 

  3331                         var by= prevbox.y+prevbox.height; 

  3332                         

  3333                         var cx= toX;

  3334                         var cy= toY;   

  3335                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  3336                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2)); 

  3337       

  3338                 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  3339                 

  3340                                          

  3341                  var svgNamespace = 'http://www.w3.org/2000/svg';  

  3342                  var tracker = document.getElementById('tracker');

  3343 

  3344                 //////////

  3345                 var tx= prevbox.x;

  3346                 var ty= prevbox.y;

  3347                 

  3348                         var ax= section_a[1];

  3349                         var ay= section_a[2];

  3350                         var bx= 0;

  3351                         var by= section_a[2] ; 

  3352                         

  3353                         var cx=prevbox.x; 

  3354                         var cy= prevbox.y;

  3355 

  3356                         var dx= prevbox.x;  

  3357                         var dy= 0;

  3358                         

  3359                       

  3360                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3361                

  3362                /////////////////

  3363                

  3364                

  3365                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  3366 

  3367              

  3368                         var ax= section_a[1];

  3369                         var ay= section_a[2];

  3370                         var bx= section_a[1] 

  3371                         var by= 0; 

  3372                         

  3373                         var cx= prevbox.x; 

  3374                         var cy= prevbox.y; 

  3375 

  3376                         var dx=0;

  3377                         var dy= prevbox.y;

  3378                         

  3379                       

  3380                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3381                

  3382                ///////////////

  3383                

  3384                 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  3385                 

  3386    

  3387                     

  3388                         if(distx<1){distx=1;}    

  3389 			

  3390          		

  3391 			if(disty<1){disty=1;}

  3392                         

  3393 			tw=distx;

  3394 			th=disty;

  3395 

  3396 			

  3397 		}

  3398 

  3399 		if(scaleType== 'ne'){  

  3400 		        

  3401 			trans_ShareScale=shareScale+","+shareScale;   

  3402 			

  3403 	                var angle_diagonal=ang2v(prevbox.x,prevbox.y+prevbox.height,prevbox.x+prevbox.width,prevbox.y)

  3404       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  3405  		

  3406 			

  3407 				

  3408 			

  3409                         var ax= prevbox.x;

  3410                         var ay= prevbox.y+prevbox.height;

  3411                         var bx= prevbox.x+prevbox.width; 

  3412                         var by= prevbox.y;

  3413                        

  3414                         var cx= toX;

  3415                         var cy= toY;   

  3416                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  3417                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2)); 

  3418 

  3419 

  3420                       this.editor.log(angle_diagonal);

  3421 

  3422       

  3423                 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  3424                 

  3425                                          

  3426                  var svgNamespace = 'http://www.w3.org/2000/svg';  

  3427                  var tracker = document.getElementById('tracker');

  3428 

  3429                 //////////

  3430                 var tx= prevbox.x;

  3431                 var ty= section_a[2];

  3432                 

  3433                         var ax= section_a[1];

  3434                         var ay= section_a[2];

  3435                         var bx= 0;

  3436                         var by= section_a[2] ; 

  3437                         

  3438                         var cx=prevbox.x; 

  3439                         var cy= prevbox.y;

  3440 

  3441                         var dx= prevbox.x;  

  3442                         var dy= 0;

  3443                         

  3444                       

  3445                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3446                

  3447                /////////////////

  3448                

  3449                

  3450                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  3451 

  3452              

  3453                         var ax= section_a[1];

  3454                         var ay= section_a[2];

  3455                         var bx= section_a[1]; 

  3456                         var by= 0; 

  3457                         

  3458                         var cx= prevbox.x; 

  3459                         var cy= prevbox.y+prevbox.height; 

  3460 

  3461                         var dx=0;

  3462                         var dy= prevbox.y+prevbox.height;

  3463                         

  3464                       

  3465                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3466                

  3467                ///////////////

  3468                

  3469                 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  3470                 

  3471 

  3472                     

  3473                         if(distx<1){distx=1;}    

  3474 			

  3475          		

  3476 			if(disty<1){disty=1;}

  3477                         //document.forms[0].code.value=distx+' '+disty;

  3478 			tw=distx;

  3479 			th=disty;

  3480 			

  3481 			

  3482 			

  3483 			

  3484 			

  3485 		}

  3486 		if(scaleType== 'sw'){

  3487 			trans_ShareScale=shareScale+","+shareScale;  

  3488 			

  3489 			

  3490 				

  3491 			

  3492 	                var angle_diagonal=ang2v(prevbox.x,prevbox.y+prevbox.height,prevbox.x+prevbox.width,prevbox.y)

  3493       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  3494  		

  3495 			

  3496 				

  3497 			

  3498                         var ax= prevbox.x;

  3499                         var ay= prevbox.y+prevbox.height;

  3500                         var bx= prevbox.x+prevbox.width; 

  3501                         var by= prevbox.y;

  3502                        

  3503                         var cx= toX;

  3504                         var cy= toY;   

  3505                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  3506                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2)); 

  3507 

  3508 

  3509                       this.editor.log(angle_diagonal);

  3510 

  3511       

  3512                 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  3513                 

  3514                                          

  3515                  var svgNamespace = 'http://www.w3.org/2000/svg';  

  3516                  var tracker = document.getElementById('tracker');

  3517 

  3518                 //////////

  3519                 var tx= section_a[1];

  3520                 var ty= prevbox.y;

  3521                 

  3522                         var ax= section_a[1];

  3523                         var ay= section_a[2];

  3524                         var bx= 0;

  3525                         var by= section_a[2] ; 

  3526                         

  3527                         var cx=prevbox.x+prevbox.width; 

  3528                         var cy= prevbox.y+prevbox.height;

  3529 

  3530                         var dx= prevbox.x+prevbox.width;  

  3531                         var dy= 0;

  3532                         

  3533                       

  3534                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3535                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  3536 

  3537                /////////////////             

  3538                         var ax= section_a[1];

  3539                         var ay= section_a[2];

  3540                         var bx= section_a[1];

  3541                         var by= 0; 

  3542                           

  3543                         var cx= prevbox.x; 

  3544                         var cy= prevbox.y; 

  3545 

  3546                         var dx=0;

  3547                         var dy= prevbox.y;

  3548                         

  3549                       

  3550                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  3551                   var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  3552               ///////////////

  3553                 

  3554    

  3555                     

  3556                         if(distx<1){distx=1;}    

  3557 			

  3558          		

  3559 			if(disty<1){disty=1;}

  3560                         //document.forms[0].code.value=distx+' '+disty;

  3561 			tw=distx;

  3562 			th=disty;

  3563 			

  3564 		}

  3565 

  3566 	}  

  3567 

  3568 

  3569 

  3570  if(shape.tagName == 'rect')

  3571   { 

  3572     //alert(data[0]);     

  3573    shape.setAttributeNS(null,'x',tx);

  3574     shape.setAttributeNS(null,'y',ty);   

  3575     shape.setAttributeNS(null, 'width', tw);     

  3576     shape.setAttributeNS(null, 'height', th); 

  3577     

  3578    //shape.nodparseFloatue=data;

  3579   }

  3580    else 

  3581  if(shape.tagName == 'text')

  3582   { 

  3583     

  3584     var tsize=shape.getAttributeNS(null, 'font-size') ; 

  3585       // var d2p_center=dist2p(centerx,centery,toX,toY);       

  3586 

  3587     	var d2p=dist2p(0,box.y,0,toY);

  3588  //shape.setAttributeNS(null, 'x', tx + 'px');

  3589     //shape.setAttributeNS(null, 'y', ty + 'px'); 

  3590     //var mysize=box.height+1 ; 

  3591      //if((toX - centerx)<0){tsize++}else{tsize--}

  3592      tsize=d2p;

  3593     //var mysize=parseInt(Math.round(th));

  3594     

  3595     if(scaleType== 'ne'){ shape.setAttributeNS(null, 'font-size',tsize);}  

  3596     if(scaleType== 'se'){ shape.setAttributeNS(null, 'font-size',tsize);}  

  3597     if(scaleType== 'nw'){ shape.setAttributeNS(null, 'font-size',tsize);}  

  3598     if(scaleType== 'sw'){ shape.setAttributeNS(null, 'font-size',tsize);}  

  3599 

  3600       //shape.setAttributeNS(null, 'font-size', mysize);  

  3601       

  3602    

  3603    /*

  3604     shape.setAttributeNS(null,'x',tx);

  3605     shape.setAttributeNS(null,'y',ty);   

  3606     shape.setAttributeNS(null, 'width', tw);     

  3607     shape.setAttributeNS(null, 'height', th); 

  3608     

  3609     //previus.setAttributeNS(null,'transform', "scale("+trans_ShareScale+")");

  3610     shape.setAttributeNS(null, 'x', tx + 'px');

  3611     shape.setAttributeNS(null, 'y', ty + 'px');

  3612 

  3613     shape.setAttributeNS(null, 'textLength', parseInt(Math.round(tw)));    

  3614     

  3615      */

  3616   } 

  3617    else 

  3618  if(shape.tagName == 'ellipse')

  3619   {

  3620     //shape.getAttributeNS(null, 'transform)

  3621     shape.setAttributeNS(null, 'cx', (tx + (box.width / 2)) + 'px');

  3622     shape.setAttributeNS(null, 'cy', (ty + (box.height / 2)) + 'px');

  3623     shape.setAttributeNS(null, 'rx', (tw / 2) + 'px');

  3624     shape.setAttributeNS(null, 'ry', (th / 2) + 'px');   

  3625  

  3626         

  3627   }

  3628    else 

  3629  if(shape.tagName == 'line')

  3630   { 

  3631     shape.setAttributeNS(null, 'x1', tx + 'px');

  3632     shape.setAttributeNS(null, 'y1', ty + 'px');

  3633     shape.setAttributeNS(null, 'x2', tx + tw + 'px');

  3634     shape.setAttributeNS(null, 'y2', ty + th + 'px');  

  3635          

  3636   }

  3637    else

  3638  if (shape.tagName == 'polyline') 

  3639   {

  3640    

  3641   }

  3642    else 

  3643  if (shape.tagName == 'image') 

  3644   {   

  3645     shape.setAttributeNS(null,'x',tx);

  3646     shape.setAttributeNS(null,'y',ty);   

  3647     shape.setAttributeNS(null, 'width', tw);     

  3648     shape.setAttributeNS(null, 'height', th); 

  3649       

  3650   }

  3651    else 

  3652  if (shape.tagName == 'path')

  3653   {     

  3654      // var xscale=  box.width/tw;

  3655      // var yscale=  box.height/th;  

  3656       var xscale=  tw/box.width;

  3657       var yscale=  th/box.height;  

  3658       var xinc=xscale;//dist*angx;

  3659       var yinc=yscale/ty;//dist*angy;   

  3660 

  3661    if(scaleType== 'n')

  3662     {

  3663        tx=box.x+(box.width/2);

  3664        ty=box.y+box.height; 

  3665        var xinc=1;

  3666        var yinc=box.y/toY;//dist*angy;   

  3667 

  3668     } 

  3669    if(scaleType== 's')

  3670     {

  3671        tx=box.x+(box.width/2);

  3672        ty=box.y; 

  3673        var xinc=1;

  3674        var yinc=toY/(box.y+box.height);//dist*angy;   

  3675     }    

  3676    if(scaleType== 'e')

  3677     {

  3678        tx=box.x;

  3679        ty=box.y+(box.height/2);  

  3680        var xinc=toX/(box.x+box.width);

  3681        var yinc=1;   

  3682 

  3683     }         

  3684    if(scaleType== 'w')

  3685     {

  3686        tx=box.x+box.width;

  3687        ty=box.y+(box.height/2); 

  3688        var xinc=box.x/toX;

  3689        var yinc=1;   

  3690 

  3691     }

  3692    if(scaleType== 'ne')

  3693     {

  3694        tx=box.x;

  3695        ty=box.y+box.height; 

  3696        var xinc=toX/(box.x+box.width);

  3697        var yinc=xinc;   

  3698     }  

  3699   if(scaleType== 'nw')

  3700     {

  3701        tx=box.x+box.width;

  3702        ty=box.y+box.height; 

  3703        var xinc=box.x/toX;

  3704        var yinc=xinc;   

  3705     } 

  3706    if(scaleType== 'se')

  3707     {

  3708        tx=box.x;

  3709        ty=box.y; 

  3710        var xinc=toX/(box.x+box.width);

  3711        var yinc=xinc;   

  3712     }    

  3713    if(scaleType== 'sw')

  3714     {

  3715        tx=(box.x+box.width);

  3716        ty=box.y; 

  3717        var xinc=box.x/toX;

  3718        var yinc=xinc;   

  3719     }        

  3720       if(xinc==0){ xinc= 0.0000001;}

  3721       if(yinc==0){ yinc= 0.0000001; }

  3722       var prevpath=previus.getAttributeNS(null, 'd');

  3723      var path=shape.getAttributeNS(null, 'd');

  3724 ////////////

  3725 

  3726 

  3727       //xshe=left;

  3728       //yshe=top;

  3729        

  3730  path=path.replace(/, /g, ','); 

  3731  path=path.replace(/ ,/g, ',');

  3732  var ps =path.split(" ")

  3733  var pcc = "";

  3734  var point =ps[0].split(","); 

  3735 

  3736 

  3737  var num0= parseFloat(point[0].substring(1));

  3738  var num1= parseFloat(point[1]);     

  3739  

  3740 

  3741  var ang= ang2v(box.x,box.y,tx,ty) ;

  3742  var angle = Math.round((ang/Math.PI* 2)* 360);

  3743  var angx = Math.cos(ang); 

  3744  var angy = Math.sin(ang);          

  3745  var dist= dist2p(tx,ty,box.x,box.y);

  3746  //var xinc=xscale;//dist*angx;

  3747  //var yinc=yscale;//dist*angy;   

  3748     var re = /^[-]?\d*\.?\d*$/; 

  3749     var axis = $V([tx,ty]);

  3750  for(var i = 0; i < ps.length; i++)

  3751   { 

  3752    if(ps[i].indexOf(',')>0){  

  3753      

  3754       var point =ps[i].split(","); 

  3755        var char1=point[0].substring(0,1); 

  3756        if(char1=='A' || char1=='a'){isArc=true; contArc=0;}

  3757        if(isArc==true){contArc++}

  3758        if(contArc==4){contArc=0; isArc=false}

  3759        

  3760        //if (isNaN(valnum)) 

  3761       if (!char1.match(re))        

  3762        { 

  3763            var num0= parseFloat(point[0].substring(1));

  3764            var text=char1;

  3765        }else{ 

  3766          if(isArc==true && contArc==2  )

  3767           {

  3768             var num0= point[0];

  3769           }else{  

  3770             var num0= parseFloat(point[0]);

  3771           }  

  3772          var text='';

  3773 

  3774        }

  3775  

  3776        

  3777        if(isArc==true && contArc==2)

  3778         {   

  3779            point[1]= point[1].toString() ;

  3780         }

  3781         else

  3782         {    

  3783          

  3784           //num0*=xinc;    

  3785           point[1]= parseFloat(point[1]);

  3786           //point[1]*=yinc;

  3787           var pointIni=$V([num0,point[1],1]);

  3788           var matrT = $M([[1,0,-tx],[0,1,-ty],[0,0,1]]);

  3789           var matrS = $M([[xinc,0,0],[0,yinc,0],[0,0,1]]); 

  3790           var matrR = $M([[1,0,tx],[0,1,ty],[0,0,1]]);

  3791           var matr1= matrT.x(pointIni);  

  3792           var matr2= matrS.x(matr1);

  3793           //var pointR=pointIni.Random(1) 

  3794           //var pointR=pointIni.rotate(Math.PI/180,axis);

  3795           //var pointRc=pointIni.cross(axis); 

  3796           //var pointR=matr2;

  3797           var pointR=matrR.x(matr2);  

  3798           num0=pointR.elements[0];

  3799            point[1]=pointR.elements[1];

  3800            $('code').value=pointIni.elements[0]+','+pointR.elements[1]+' ';

  3801         }  

  3802        var cx=num0; 

  3803         var cy=point[1];   

  3804         pcc+=text+cx+','+cy+' ';

  3805         //pcc+=text+cx+','+cy+' '; 

  3806        

  3807    }else{

  3808       pcc+=ps[i]+' ';

  3809    }

  3810   }

  3811   

  3812   shape.setAttributeNS(null,'d', pcc);

  3813 

  3814 

  3815 

  3816 //////////////

  3817 /*

  3818  path=path.replace(/, /g, ','); 

  3819  path=path.replace(/ ,/g, ',');

  3820  var ps =path.split(" ")

  3821  var pcc = "";

  3822 

  3823  var xinc=tx-prevbox.x;

  3824  var yinc=ty-prevbox.y;

  3825   

  3826     var re = /^[-]?\d*\.?\d*$/;

  3827  for(var i = 0; i < ps.length; i++)

  3828   { 

  3829    if(ps[i].indexOf(',')>0){  

  3830      

  3831       var point =ps[i].split(","); 

  3832        var char1=point[0].substring(0,1);

  3833        point[1]= parseFloat(point[1]); 

  3834        

  3835        // var valnum =char1.charAt(0); 

  3836        //if (isNaN(valnum))

  3837        if (!char1.match(re)) 

  3838         

  3839        {

  3840          var num0= parseFloat(point[0].substring(1));

  3841          var text=char1;

  3842        }else{

  3843          var num0= parseFloat(point[0]);

  3844          var text='';

  3845 

  3846        }

  3847        //num0+=dist*angx;

  3848        //point[1]+=dist*angy;

  3849          num0*=xscale;

  3850         point[1]*=yscale;   

  3851         

  3852       // num0+=xinc;

  3853       // point[1]+=yinc;

  3854        

  3855       

  3856         

  3857         var cx=num0;

  3858         var cy=point[1]; 

  3859         pcc+=text+cx+','+cy+' ';

  3860    }else{

  3861       pcc+=ps[i]+' ';

  3862    }

  3863   }

  3864 

  3865 

  3866    

  3867     

  3868   

  3869    // $('code').value=dist+' '+ ang+' '+'__'+x+'= '+left+'/ '+y+'= ' +top+'';

  3870     

  3871        //shape.setAttributeNS(null,'transform', "rotate("+left+")");

  3872        

  3873        // shape.setAttributeNS(null,'transform', "translate("+trax+","+tray+") rotate("+0+") scale(1,1)");

  3874          shape.setAttributeNS(null,'d', pcc);

  3875 

  3876     

  3877     

  3878     

  3879     

  3880     

  3881     

  3882        //document.forms[0].code.value='';

  3883        //shape.setAttributeNS(null,'transform', "scale("+trans_ShareScale+")"); 

  3884  */      

  3885 

  3886   }  

  3887    	                             

  3888 

  3889 

  3890 

  3891 

  3892 

  3893 

  3894 

  3895 	

  3896 	

  3897 	

  3898 	

  3899 	

  3900 //$('status').innerHTML=typeTransform+': '+shareScale;  

  3901        

  3902   

  3903 };

  3904 

  3905 

  3906 SVGRenderer.prototype.rotateShape = function(shape, previus, toX, toY) {

  3907       

  3908     //document.getElementById('richdraw').style.cursor='e-resize';

  3909      	 var box = shape.getBBox();  

  3910 	 var prevbox=previus.getBBox();

  3911 	var centerx= box.x+(box.width/2);

  3912 	var centery= box.y+(box.height/2); 

  3913 	var coord=this.editor.viewInputxy;

  3914 

  3915        var actual_angle=ang2v(centerx,centery,coord[0], coord[1]);

  3916        

  3917        if(xrot<toX) { rotatexxx+=1;}else{rotatexxx-=1;}

  3918        xrot=toX;

  3919        yrot=toY;  

  3920        

  3921 	var xtr=0;

  3922         var ytr=0;

  3923                 

  3924         var box= shape.getBBox();  

  3925         var tr1x=  box.x;  

  3926          var tr1y=  box.y;

  3927 

  3928  

  3929  

  3930     toX+=xtr;

  3931         toY+=xtr;

  3932 

  3933       //var trax=parseFloat(toX-box.x);   var tray= parseFloat(toY-box.y);      

  3934       var trax=parseFloat(box.x/2);   var tray= parseFloat(box.y/2); 

  3935        var angler=Math.atan2(toX,toY);

  3936          var angle=angler*180/Math.PI;  

  3937           var T = shape.getCTM(); 

  3938           var rotini=T.a*(180 / Math.PI);

  3939                    var angle=rotini*180/Math.PI;

  3940           var rot_angle=actual_angle*180/Math.PI;  

  3941           this.editor.log(centerx+' '+centery+' '+coord[0]+' '+coord[1]+'____ '+rot_angle+' '+actual_angle*180/Math.PI);

  3942           

  3943           

  3944          // matrix( a, b, c, d, e, f )

  3945          // a c e

  3946          // b d f

  3947          // 0 0 1

  3948          //a scale factor of 2, a rotation of 30 deg and a translation of (500,50)

  3949          //T     1.732   -1   500     1   1.732   50     0   0   1

  3950          //T      1  ad-bc      d  -c -de+cf   -b  a  be-df    0   0   1

  3951          

  3952          //shape.setAttributeNS(null,'transform', "translate("+(-xshe)+","+(-yshe)+")");

  3953  

  3954          // shape.setAttributeNS(null,"transform", "  matrix( a, b, c, d, e, f )");

  3955           // shape.setAttributeNS(null,'transform', "translate("+(box.x+(box.width/2))+","+(box.y+(box.height/2))+")  rotate("+rotatexxx+") ");

  3956            //shape.setAttributeNS(null,'transform', "translate("+(box.x+(box.width/2))+","+(box.y+(box.height/2))+") rotate("+rotatexxx+") translate("+(-box.x-(box.width/2))+","+(-box.y-(box.height/2))+") ");

  3957          //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+","+(box.x+(box.width/2))+","+(box.y+(box.height/2))+")");

  3958          //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+","+(prevbox.x+(prevbox.width/2))+","+(prevbox.y+(prevbox.height/2))+")");

  3959          shape.setAttributeNS(null,'transform', "rotate("+rot_angle+","+(prevbox.x+(prevbox.width/2))+","+(prevbox.y+(prevbox.height/2))+")");

  3960                           

  3961          

  3962          //alert('[  ['+T.a+'  '+T.c+'  '+T.e+']  ['+T.b+'  '+T.d+'  '+T.f+']  [0  0  1]  ]');

  3963         //a,b,c,d,e,f  

  3964            

  3965           // shape.setAttributeNS(null,'transform', 'matrix('+T.a+', '+T.b+', '+ T.c+', '+ T.d+', '+ T.e+', '+ T.f+')' );

  3966           

  3967           var x1=T.e;

  3968           var y1=T.f;

  3969           var sp = Math.sin(rotatexxx*(Math.PI / 180));

  3970           var cp = Math.cos(rotatexxx*(Math.PI / 180));

  3971           var x2 = 0 + r*rotatexxx*(Math.PI / 180);

  3972           var y2 = 0;

  3973           var r=0; 

  3974            

  3975           var a=cp;

  3976           var c=sp;

  3977           var e=T.e;

  3978           var b=T.b;

  3979           var d=(-x1*cp+y1*sp+x2); 

  3980           var f=(-x1*sp-y1*cp+y2);

  3981       

  3982       var inv=T.inverse;  

  3983       var inv_mat=T.multiply(inv); 

  3984        //var matrix = "matrix(" + cp +"," + sp + "," + (-sp) + "," + cp + ","+ (-x1*cp+y1*sp+x2) + ","+ (-x1*sp-y1*cp+y2) + ")";

  3985        //var matrix = "matrix(" + a +"," + c + "," + e + "," + b + ","+ d + ","+ f + ")";

  3986       var matrix='matrix('+inv_mat.a+' '+inv_mat.b+' '+inv_mat.c+' '+inv_mat.d+' '+inv_mat.e+' '+inv_mat.f+')'

  3987       

  3988        //++ shape.setAttributeNS(null,'transform',matrix); 

  3989         

  3990         //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+")"); 

  3991         // shape.setAttributeNS(null,'transform', "translate("+(box.x)+","+(box.y)+")");

  3992         

  3993          //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+")");

  3994                //shape.setAttributeNS(null, 'x', -box.width/2 + 'px');

  3995                //shape.setAttributeNS(null, 'y', -box.height/2 + 'px');

  3996          //shape.setAttributeNS(null,"transform", "matrix("+Math.cos(angle)+", "+Math.sin(angle)+", "+Math.sin(-angle)+", "+Math.cos(angle)+", 0, 0 )");

  3997            //shape.setAttributeNS(null,'transform', "rotate("+10+")"); 

  3998    

  3999                //shape.setAttributeNS(null, 'x', box.width/2 + 'px');

  4000                //shape.setAttributeNS(null, 'y', box.height/2 + 'px');

  4001       

  4002                 

  4003   

  4004           //$('status').innerHTML = 'Mode: Draw '+pointshape +'_'+xsh +' '+ ysh+' '+trshape;

  4005           

  4006   //$('status').innerHTML=typeTransform+': '+rotatexxx;  

  4007     

  4008 };

  4009 

  4010 

  4011 

  4012 // x(u) = x0*(1-u) + x1*u = x0 + (x1-x0)*u

  4013 // y(u) = y0*(1-u) + y1*u = y0 + (y1-y0)*u

  4014       

  4015 

  4016 

  4017 SVGRenderer.prototype.getshapes = function(){ 

  4018   var shape = document.getElementById('rectDoc');

  4019   if (shape) {

  4020     this.remove(shape);

  4021   }  

  4022   var shape = document.getElementById('tracker'); 

  4023   if (shape) {

  4024     this.remove(shape);

  4025   } 

  4026  return this.svgRoot.childNodes;

  4027  // return this.container.childNodes

  4028     //return this.svgRoot

  4029 } 

  4030 

  4031 SVGRenderer.prototype.reflect = function(HorV) {

  4032    var shape= c.selected; 

  4033    var box = shape.getBBox();  

  4034     

  4035  if(shape.tagName=="path")

  4036   {

  4037   

  4038       var tx=box.x+(box.width/2);

  4039       var ty=box.y+(box.height/2);  

  4040     

  4041     if(HorV=='V'){  

  4042        var xinc=-1;

  4043        var yinc=1;   

  4044      }

  4045     if(HorV=='H'){  

  4046        var xinc=1;

  4047        var yinc=-1;   

  4048      }

  4049 

  4050 

  4051    var path=shape.getAttributeNS(null, 'd');

  4052    path=path.replace(/, /g, ','); 

  4053    path=path.replace(/ ,/g, ',');

  4054    var ps =path.split(" ")

  4055    var pcc = "";

  4056    var point =ps[0].split(","); 

  4057 

  4058 

  4059    var num0= parseFloat(point[0].substring(1));

  4060    var num1= parseFloat(point[1]);     

  4061  

  4062     var re = /^[-]?\d*\.?\d*$/; 

  4063     var axis = $V([tx,ty]);

  4064 

  4065    for(var i = 0; i < ps.length; i++)

  4066     { 

  4067      if(ps[i].indexOf(',')>0){  

  4068      

  4069       var point =ps[i].split(","); 

  4070        var char1=point[0].substring(0,1); 

  4071        if(char1=='A' || char1=='a'){isArc=true; contArc=0;}

  4072        if(isArc==true){contArc++}

  4073        if(contArc==4){contArc=0; isArc=false}

  4074        

  4075        //if (isNaN(valnum)) 

  4076       if (!char1.match(re))        

  4077        { 

  4078            var num0= parseFloat(point[0].substring(1));

  4079            var text=char1;

  4080        }else{ 

  4081          if(isArc==true && contArc==2  )

  4082           {

  4083             var num0= point[0];

  4084           }else{  

  4085             var num0= parseFloat(point[0]);

  4086           }  

  4087          var text='';

  4088 

  4089        }

  4090  

  4091        

  4092        if(isArc==true && contArc==2)

  4093         {   

  4094            point[1]= point[1].toString() ;

  4095         }

  4096         else

  4097         {    

  4098          

  4099           //num0*=xinc;    

  4100           point[1]= parseFloat(point[1]);

  4101           //point[1]*=yinc;

  4102           var pointIni=$V([num0,point[1],1]);

  4103           var matrT = $M([[1,0,-tx],[0,1,-ty],[0,0,1]]);

  4104           var matrS = $M([[xinc,0,0],[0,yinc,0],[0,0,1]]); 

  4105           var matrR = $M([[1,0,tx],[0,1,ty],[0,0,1]]);

  4106           var matr1= matrT.x(pointIni);  

  4107           var matr2= matrS.x(matr1);

  4108           //var pointR=pointIni.Random(1) 

  4109           //var pointR=pointIni.rotate(Math.PI/180,axis);

  4110           //var pointRc=pointIni.cross(axis); 

  4111           //var pointR=matr2;

  4112           var pointR=matrR.x(matr2);  

  4113           num0=pointR.elements[0];

  4114            point[1]=pointR.elements[1];

  4115            $('code').value=pointIni.elements[0]+','+pointR.elements[1]+' ';

  4116         }  

  4117        var cx=num0; 

  4118         var cy=point[1];   

  4119         pcc+=text+cx+','+cy+' ';

  4120         //pcc+=text+cx+','+cy+' '; 

  4121        

  4122      }else{

  4123        pcc+=ps[i]+' ';

  4124      }

  4125     } 

  4126     var svg =shape.cloneNode(false); 

  4127     svg.setAttributeNS(null,'d', pcc);  

  4128     this.svgRoot.appendChild(svg); 

  4129     return svg;

  4130  }

  4131   else

  4132  { 

  4133   if(shape.tagName=="text" || shape.tagName=="image" )

  4134   {

  4135 

  4136   

  4137     var tr='';  

  4138     var turn0='';

  4139     var svg =shape.cloneNode(false); 

  4140     var x= shape.getAttributeNS(null, 'x');

  4141     var y= shape.getAttributeNS(null, 'y');  

  4142     x+=box.width/2;

  4143     y+=box.height/2;

  4144     if(HorV=='V')

  4145      {  

  4146        svg.setAttributeNS(null,'x',-parseFloat(x));  

  4147        var scaleSim='-1, 1';

  4148        svg.setAttributeNS(null,'transform','scale('+scaleSim+')');  

  4149        //svg.setAttributeNS(null,'y',parseFloat(x));  

  4150        svg.setAttributeNS(null,'x',-parseFloat(x));  

  4151 

  4152 

  4153      }

  4154     if(HorV=='H')

  4155      {  

  4156        var scaleSim='1, -1';

  4157        svg.setAttributeNS(null,'y',-parseFloat(y));  

  4158        svg.setAttributeNS(null,'transform','scale('+scaleSim+')');  

  4159        //svg.setAttributeNS(null,'x',parseFloat(x));  

  4160        svg.setAttributeNS(null,'y',-parseFloat(y));  

  4161 

  4162 

  4163      } 

  4164 

  4165     if(shape.hasAttributeNS(null, 'transform'))

  4166      { 

  4167       tr=shape.getAttributeNS(null, 'transform');  

  4168       turn0=GetString(tr,'rotate(',')');

  4169 

  4170       svg.setAttributeNS(null,'transform','rotate('+turn+'),scale('+scaleSim+')');  

  4171       svg.setAttributeNS(null,'x',parseFloat(x));  

  4172       svg.setAttributeNS(null,'y',parseFloat(y));  

  4173       

  4174       //svg.setAttributeNS(null,'transform','rotate('+turn+'),scale('+'');  

  4175      }else{

  4176        

  4177      }   

  4178      

  4179     

  4180     

  4181      if(shape.tagName=="text"){  

  4182         var text=shape.textContent ; 

  4183         svg.textContent=text;     

  4184      }

  4185      //svg.setAttributeNS(null,'writing-mode',mode); 

  4186      //svg.setAttributeNS(null,'glyph-orientation-horizontal','0deg');

  4187      //

  4188      //svg.appendChild(text); 

  4189    

  4190      this.svgRoot.appendChild(svg); 

  4191      return svg;

  4192   }

  4193   else

  4194   {

  4195   if(shape.hasAttributeNS(null, 'transform'))

  4196    { 

  4197    

  4198      

  4199      var tr=shape.getAttributeNS(null, 'transform');  

  4200      var turn0=GetString(tr, 'rotate(',',');

  4201      turn0=parseFloat(turn0); 

  4202      //alert(turn0);

  4203      

  4204      if(HorV=='V'){  

  4205        var angle=180;

  4206        //var turn=(turn0+angle)-(turn0-90);  

  4207        var turn=turn0+((angle-turn0)*2); 

  4208      }

  4209     if(HorV=='H'){  

  4210        var angle=90;

  4211        var turn=turn0+((angle-turn0)*2);   

  4212      }       

  4213      var centerx= box.x+(box.width/2);

  4214      var centery= box.y+(box.height/2); 

  4215      //this.editor.log(centerx+' '+centery+' '+coord[0]+' '+coord[1]+'____ '+rot_angle+' '+actual_angle*180/Math.PI);

  4216      var svg =shape.cloneNode(false); 

  4217      svg.setAttributeNS(null,'transform', "rotate("+turn+","+centerx+","+centery+")");

  4218      this.svgRoot.appendChild(svg); 

  4219     return svg;

  4220    }

  4221     else

  4222    {  

  4223      var centerx= box.x+(box.width/2);

  4224      var centery= box.y+(box.height/2); 

  4225      shape.setAttributeNS(null,'transform', "rotate("+180+","+centerx+","+centery+")");

  4226 

  4227    }

  4228   } 

  4229  }

  4230 };

  4231 //http://dev.opera.com/articles/view/svg-evolution-2-our-first-steps-into-sv/?page=3

  4232 //http://www.w3.org/TR/2000/03/WD-SVG-20000303/exchange.html#StylingAttributes

  4233 //http://www.xml.com/lpt/a/1390

  4234 

  4235 

  4236 

  4237 

  4238 

  4239 

  4240 

  4241 //http://xml-utils.com/conferencia-svg.html#d0e527

  4242 //http://www.xml.com/lpt/a/1321

  4243 //http://phrogz.net/objjob/object.asp?id=101

  4244 //http://admisource.gouv.fr/plugins/scmcvs/cvsweb.php/Cassini-ihm/js-yosemite/mapApp.js?rev=1.1;cvsroot=cassini

  4245 //http://groups.google.com/group/prototype-graphic/msg/0547c0caea8869c6 

  4246 //http://sylvester.jcoglan.com/
author	rlm
date	Sun, 14 Mar 2010 03:08:07 -0400
parents	26c2b3ad21c7
children