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 AbstractRenderer.prototype.bounds = function(shape) { return { x:0, y:0, width:0, height: 0 }; };

    15 

    16 function SVGRenderer() {

    17 	this.base = AbstractRenderer;

    18 	this.svgRoot = null;

    19 }

    20 

    21 

    22 SVGRenderer.prototype = new AbstractRenderer;

    23 

    24 

    25 

    26 

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

    28   this.container = elem;

    29 

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

    31     

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

    33   

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

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

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

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

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

    39 }

    40 

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

    42  if(mode=='preview')

    43  {

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

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

    46    var prx=100;

    47    this.container.style.top =(parseInt(document.getElementById('FRONT').style.height)-height)/2+'px' 

    48 

    49    this.container.style.width = width;//document.getElementById('FRONT').style.width; 

    50    this.container.style.height =height;//document.getElementById('FRONT').style.height;     

    51    //alert(this.container.style.width+' '+width)     

    52    //alert(this.container.style.height+' '+height)

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

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

    55    this.svgRoot.setAttributeNS(null,'width', width);

    56    this.svgRoot.setAttributeNS(null,'height', height); 

    57    

    58    var x=parseFloat(tokens[0])-prx*4;

    59    var y=parseFloat(tokens[1])-prx*2;

    60    var w=parseFloat(tokens[2])+prx;

    61    var h=parseFloat(tokens[3])+prx;

    62    //workspace= x+''+y+''+w+''+h;

    63    //workspace= left+''+top+''+width+''+heigth;    

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

    65    //this.svgRoot.setAttributeNS(null,'viewBox', workspace); 

    66    //zoominit = workspace;

    67   } 

    68    else

    69   {     

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

    71 

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

    73         proporImage= (parseFloat(tokens[2])-parseFloat(tokens[0]))/(parseFloat(tokens[3])-parseFloat(tokens[1])); 

    74         //alert(proporImage +' '+proporCanvas) 

    75         //if(marginx<=parseInt(document.getElementById('FRONT').style.width)){marginx=0;}

    76         docx=parseFloat(tokens[0]);

    77         docy=parseFloat(tokens[1]);

    78         docw=parseFloat(tokens[2]);

    79         doch=parseFloat(tokens[3]);

    80  

    81          marginx=(parseInt(document.getElementById('FRONT').style.width)-(parseFloat(tokens[2])-parseFloat(tokens[0])))/2;

    82          marginy=(parseInt(document.getElementById('FRONT').style.height)-(parseFloat(tokens[3])-parseFloat(tokens[1])))/2;

    83         //if(marginx<=0){marginx=0;}

    84         //if(marginy<=0){marginy=0;}

    85         var x=(parseFloat(tokens[0])-marginx);

    86         var y=(parseFloat(tokens[1])-marginy);

    87         var w=(parseFloat(tokens[2])+marginx*2);

    88         var h=(parseFloat(tokens[3])+marginy*2); 

    89         //alert(tokens[3]+' '+tokens[1]+' / '+(parseFloat(tokens[3])-parseFloat(tokens[1]))+' '+parseInt(document.getElementById('FRONT').style.height)+' /'+h+' '+height);

    90         //if(h>=parseInt(document.getElementById('FRONT').style.height)){h=parseInt(document.getElementById('FRONT').style.height);}

    91         //if(h>=parseInt(document.getElementById('FRONT').style.height)){y=0;h=600;}//parseInt(document.getElementById('FRONT').style.height)*2}

    92         zoominit1 = x+' '+y+' '+w+' '+h;  

    93         //alert(this.container.style.height+' '+height+' '+h+' '+zoominit1)

    94         this.svgRoot.setAttributeNS(null,'width', w);   

    95         this.svgRoot.setAttributeNS(null,'height', h); 

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

    97         zoomx=x;

    98         zoomy=y;       

    99         //this.svgRoot.setAttributeNS(null,'viewBox', zoominit;

   100         //this.rectCanvas(x,y,w,h,zoominit)

   101         //this.rectCanvas(left,top,width,height,viewBox) 

   102         

   103   }

   104 }

   105 

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

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

   108 }

   109 

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

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

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

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

   114   if (shape) {

   115     this.remove(shape);

   116   } 

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

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

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

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

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

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

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

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

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

   126  // this.svgRoot.appendChild(rect)  

   127   this.svgRoot.appendChild(rect);  

   128   

   129 }

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

   131 

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

   133  

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

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

   136   if (shape) {

   137     this.remove(shape);

   138   }     

   139   

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

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

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

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

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

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

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

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

   148   //this.svgRoot.appendChild(rect)     

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

   150 

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

   152   

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

   154   if (shape) {

   155     this.remove(shape);

   156   } 

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

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

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

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

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

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

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

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

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

   166  // this.svgRoot.appendChild(rect)  

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

   168   */

   169 }

   170 

   171 SVGRenderer.prototype.removeAll = function() 

   172 {  

   173  while( this.svgRoot.hasChildNodes () )

   174  {

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

   176  }

   177 }

   178 

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

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

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

   182  

   183   var svg;  

   184   

   185   if (shape == 'rect') {

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

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

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

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

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

   191     svg.style.position = 'absolute';

   192   }

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

   194     

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

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

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

   198     if(shape == 'circle'){

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

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

   201     }else{

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

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

   204     

   205     }

   206     svg.style.position = 'absolute';

   207   }

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

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

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

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

   212     

   213     var percent = width*20/100;

   214     if(width<height)

   215     var percent = width*20/100;  

   216     else

   217     var percent = height*20/100;

   218     

   219     svg.setAttributeNS(null, 'rx', percent+'px');

   220     svg.setAttributeNS(null, 'ry', percent+'px');

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

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

   223     svg.style.position = 'absolute';

   224   }

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

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

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

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

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

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

   231     svg.style.position = 'absolute';

   232   } 

   233   else if (shape == 'polyline') {

   234     var xcenterpoly=xpArray;

   235     var ycenterpoly=ypArray;

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

   237     svg = this.container.ownerDocument.createElementNS(svgNamespace, 'polyline');  

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

   239     svg.style.position = 'absolute';

   240   }

   241   else if (shape == 'path')

   242     {

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

   244     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

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

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

   247     svg.style.position = 'absolute';  

   248     } 

   249      else if (shape == 'controlpath')

   250     {

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

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

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

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

   255     svg.style.position = 'absolute';  

   256     } 

   257  else if (shape == 'text') {

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

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

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

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

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

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

   264     svg.setAttributeNS(null, 'text-anchor','middle'); 

   265     

   266     svg.style.position = 'absolute';  

   267     svg.appendChild(data);   

   268  } 

   269   else if (shape == 'clipPath') {

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

   271      

   272 

   273  }  

   274  else if (shape == 'linearGradient') {

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

   276     svg.setAttributeNS(null, 'x1', parseFloat(left));

   277     svg.setAttributeNS(null, 'y1', parseFloat(top ));

   278     svg.setAttributeNS(null, 'x2', parseFloat(width));

   279     svg.setAttributeNS(null, 'y2', parseFloat(height));  

   280 

   281  }  

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

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

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

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

   286     svg.setAttributeNS(null, 'offset', parseFloat(lineOpac));  

   287 

   288  } 

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

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

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

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

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

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

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

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

   297  } 

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

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

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

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

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

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

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

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

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

   307  } 

   308  

   309  if(shape == 'zoom') 

   310   {

   311         

   312   }else

   313   {                                          

   314        if(transform!='')

   315         {

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

   317         }

   318        if(shape != 'image' || shape != 'group' || shape != 'stop' )

   319 

   320         { 

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

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

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

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

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

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

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

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

   329       

   330          }   

   331          

   332          

   333      if(parent==''){

   334        this.svgRoot.appendChild(svg);

   335      }else{  

   336        if(document.getElementById(parent)){   

   337          var parentShape = document.getElementById(parent);

   338          parentShape.appendChild(svg);

   339         } 

   340      }   

   341 

   342           return svg;   

   343              

   344    }        

   345   

   346 }; 

   347 

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

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

   350 

   351  

   352 }

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

   354 /* 

   355 function(direction, amount) { 

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

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

   358     if (amount == null) {

   359         amount = SVGElement.panFactor;

   360     }

   361     switch (direction) {

   362         case 'left':

   363             amount = 0 - amount;

   364             // intentionally fall through

   365         case 'right':

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

   367             currentPosition += amount;

   368             viewVals[0] = currentPosition;

   369             break;

   370         case 'up':

   371             amount = 0 - amount;

   372             // intentionally fall through

   373         case 'down':

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

   375             currentPosition += amount;

   376             viewVals[1] = currentPosition;

   377             break;

   378         case 'origin':

   379             // reset everything to initial values

   380             viewVals[0] = 0;

   381             viewVals[1] = 0;

   382             this.rootNode.currentScale = 1;

   383             this.rootNode.currentTranslate.x = 0;

   384             this.rootNode.currentTranslate.y = 0;

   385             break;

   386     }

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

   388  */

   389  

   390       

   391       

   392       //canvasWidth

   393       //canvasheight

   394    if(zoommode=='frame')

   395     {   

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

   397      

   398        //alert(viewBox);

   399       

   400        var viewBox = zoominit;  

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

   402        

   403        zoomx = parseFloat(viewVals[0]); 

   404        zoomy = parseFloat(viewVals[1]);  

   405        zoomw = parseFloat(viewVals[2]); 

   406        zoomh = parseFloat(viewVals[3]);    

   407        proporDiagonal=1;

   408     }

   409      else

   410     {   

   411        

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

   413       

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

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

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

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

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

   419        var prevWidth=prevW-prevX;  

   420        var prevHeight=prevH-prevY;   

   421         

   422     }

   423    

   424       if(zoommode=='more')

   425        {             

   426         fieldViewx=prevW*0.95; 

   427         fieldViewy=prevH*0.95;  

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

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

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

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

   432        zoomw=prevW*0.95;

   433        zoomh=prevH*0.95;    

   434                             

   435      

   436         proporDiagonal=diagonalFrame/diagonalinit; 

   437         //alert(proporDiagonal);

   438        }

   439       if(zoommode=='minus') 

   440        {

   441         fieldViewx=prevW*1.05; 

   442         fieldViewy=prevH*1.05;  

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

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

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

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

   447         zoomw=prevW*1.05;

   448         zoomh=prevH*1.05; 

   449         proporDiagonal=diagonalFrame/diagonalinit;  

   450 

   451        } 

   452       if(zoommode=='window')

   453        {             

   454           

   455         zoomx=c.mouseDownX;

   456         zoomy=c.mouseDownY; 

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

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

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

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

   461     

   462         

   463        }      

   464        var direction=0;

   465       if(zoommode=='hand') 

   466        {        

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

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

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

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

   471         makeWorkSite(prevH,left,top); 

   472        }

   473        direction=direction*180/Math.PI;

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

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

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

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

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

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

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

   481 

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

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

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

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

   486 }  

   487 

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

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

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

   491   var svg;

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

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

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

   495   svg.style.position = 'absolute';  

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

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

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

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

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

   501   this.svgRoot.appendChild(svg);

   502   return svg;

   503 };

   504 

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

   506  

   507      if(order==-1)

   508       {

   509         this.svgRoot.appendChild( shape );

   510       }

   511       if(order==0){

   512      

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

   514       } 

   515  

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

   517     {

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

   519         //alert(id);

   520         

   521         

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

   523         //alert(numNodes);

   524           

   525         var num=0;

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

   527          {                                                   

   528            

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

   530            if (etiq==id)

   531             { 

   532                 num=i; 

   533                

   534             }                                                    

   535           } 

   536           //alert(num);    

   537           if(order==1) 

   538            {   

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

   540                {  

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

   542                } 

   543            }

   544           if(order==2){ 

   545                if((num+1)<numNodes)

   546                {

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

   548                }

   549           } 

   550           

   551     } 

   552     

   553     

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

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

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

   557     var tmp = elem1.cloneNode( true );

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

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

   560     */

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

   562     //return  elem2;

   563     

   564 }

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

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

   567   this.svgRoot.removeChild(shape);

   568 }

   569 

   570 

   571 SVGRenderer.prototype.copy = function(shape) 

   572  {

   573    var svg;

   574    svg =shape.cloneNode(false); 

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

   576         var text=shape.textContent ; 

   577         svg.textContent=text;     

   578      } 

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

   580    return svg;

   581  };

   582 

   583 

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

   585  {

   586    //var svg;

   587    //svg =shape;

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

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

   590    this.svgRoot.appendChild(clipboard);

   591   return clipboard;

   592  };

   593 

   594 

   595 SVGRenderer.prototype.duplicate = function(shape) 

   596  {

   597    var svg;

   598    svg =shape.cloneNode(false);

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

   600    this.svgRoot.appendChild(svg);

   601   return svg;

   602  };

   603 

   604 SVGRenderer.prototype.undo = function() 

   605  {

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

   607  };

   608  

   609  /* 

   610  function zSwap(parent, elem1, elem2)

   611 {

   612    var tmp = elem1.cloneNode( true );

   613    parent.replaceChild( tmp, elem2 );

   614    parent.replaceChild( elem2, elem1 );

   615 }

   616 

   617 SVGRenderer.prototype.moveToTop( svgNode )

   618 {

   619    this.svgRoot.appendChild( svgNode );

   620 }

   621 

   622 

   623 SVGRenderer.prototype.moveToBottom( svgNode )

   624 {

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

   626 }

   627 

   628 */

   629 

   630 

   631 

   632 

   633      

   634 var xshe=0; //bad

   635 var yshe=0;  

   636 var isArc=false;

   637 var contArc=0;

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

   639  //typeTransform='Translate';   

   640  

   641  var box = shape.getBBox(); 

   642  var angle=0;

   643  var dist=0;  

   644  var rotated=false;

   645 

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

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

   648     var rot=''; 

   649     var scl=''; 

   650     var angle=0;

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

   652      { 

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

   654       {

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

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

   657        angle=parseFloat(rot);

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

   659       }else{

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

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

   662        rot='good';

   663        angle=parseFloat(rot0[1]);

   664        scl='';                  

   665        

   666       }

   667      }else{

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

   669        {

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

   671         angle=0; 

   672        }else{   

   673          //

   674        }

   675      }

   676     

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

   678    

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

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

   681     var cadRot='';                              

   682     var cadScale=''; 

   683     var union='';

   684     if(angle!=0)

   685      {   

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

   687      }

   688     if(scl.length>2)

   689      {

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

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

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

   693        {  

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

   695            

   696           left=left;  

   697         }  

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

   699          {

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

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

   702             top=top; 

   703         }

   704         

   705       }

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

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

   708    

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

   710    

   711    

   712       

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

   714    rotated=true;

   715    

   716  }

   717  

   718     contmove++;

   719 

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

   721   /* var dudy= shape.parentNode;  

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

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

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

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

   726  

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

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

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

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

   731            

   732     }else{

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

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

   735      if(rotated){

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

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

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

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

   740   

   741 

   742      }else{ 

   743      */

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

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

   746      //}

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

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

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

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

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

   752    //}    

   753   } 

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

   755    { 

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

   757    

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

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

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

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

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

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

   764     

   765    }

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

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

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

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

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

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

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

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

   774   }

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

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

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

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

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

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

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

   782 

   783   }

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

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

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

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

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

   789 

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

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

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

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

   794 

   795   }   

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

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

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

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

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

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

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

   803 

   804   }

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

   806 

   807    if(contmove==1){ 

   808       xshe=left;

   809       yshe=top; 

   810    }    

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

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

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

   814  var ps =path.split(" ")

   815  var pcc = "";

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

   817 

   818 

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

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

   821  

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

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

   824  var angx = Math.cos(ang); 

   825  var angy = Math.sin(ang);          

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

   827  var xinc=dist*angx;

   828  var yinc=dist*angy;   

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

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

   831   { 

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

   833      

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

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

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

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

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

   839        

   840        //if (isNaN(valnum)) 

   841       if (!char1.match(re))        

   842        { 

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

   844            var text=char1;

   845        }else{ 

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

   847           {

   848             var num0= point[0];

   849           }else{  

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

   851           }  

   852          var text='';

   853 

   854        }

   855  

   856        

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

   858         {   

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

   860         }

   861         else

   862         {    

   863          

   864           num0+=xinc;    

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

   866           point[1]+=yinc;

   867 

   868         }  

   869         var cx=num0; 

   870          

   871         var cy=point[1]; 

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

   873    }else{

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

   875    }

   876   }

   877   

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

   879 

   880  }                                                                                                                            

   881                                                                                                                            

   882   

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

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

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

   886 

   887 

   888 

   889 };

   890 

   891 

   892 

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

   894   // TODO

   895 };

   896 

   897 

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

   899          var end='';

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

   901         var maxcont=setPoints.length;

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

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

   904       

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

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

   907         }

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

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

   910          	var path=thispath+end;

   911        

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

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

   914  

   915 }

   916 

   917 

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

   919    var deltaX = toX - fromX;

   920   var deltaY = toY - fromY;  

   921   

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

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

   924            shape.style.fill = fillColor;  

   925            shape.style.stroke = lineColor;  

   926            shape.style.strokeWidth = lineWidth; 

   927            shape.style.fillOpacity = fillOpac;

   928            shape.style.strokOpacity = lineOpac;        

   929       */     

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

   931    { 

   932     

   933  

   934       if (deltaX < 0) {

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

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

   937        }

   938         else

   939        {

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

   941        }

   942   

   943       if (deltaY < 0) 

   944        {

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

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

   947        }

   948         else 

   949        {

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

   951        }

   952       /*shape.style.fill = fillColor;  

   953       shape.style.stroke = lineColor;  

   954       shape.style.strokeWidth = lineWidth; 

   955       shape.style.fillOpacity = fillOpac;

   956       shape.style.strokOpacity = lineOpac;         

   957       */

   958       

   959     }

   960     

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

   962     {   

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

   964         //alert(img);

   965       if (deltaX < 0) {

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

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

   968          

   969        }

   970         else

   971        {

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

   973        }

   974   

   975       if (deltaY < 0) 

   976        {

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

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

   979        }

   980         else 

   981        {

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

   983        }  

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

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

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

   987        

   988        

   989        

   990     }*/ 

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

   992     {

   993           

   994 

   995        if (deltaX < 0) 

   996         {  

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

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

   999 

  1000 

  1001         }

  1002          else

  1003         {

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

  1005          }

  1006   

  1007        if (deltaY < 0) 

  1008         {

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

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

  1011         }

  1012          else 

  1013         {

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

  1015  

  1016         }

  1017      

  1018    } 

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

  1020             if (deltaX < 0) {

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

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

  1023             }

  1024             else {

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

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

  1027             }

  1028           

  1029             if (deltaY < 0) {

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

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

  1032             }

  1033             else {

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

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

  1036             }

  1037   }

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

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

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

  1041   } 

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

  1043         

  1044        xpArray.push(toX);

  1045           ypArray.push(toY);  

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

  1047  		    var thispath1=''; 

  1048 		    var thispath2='';

  1049                   var maxcont=xpArray.length;

  1050       

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

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

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

  1054 	

  1055         }

  1056 

  1057        

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

  1059 	

  1060 	

  1061     }    

  1062     

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

  1064         

  1065     if (selectmode == 'controlpath')

  1066      {   

  1067                 var end='';

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

  1069 

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

  1071         var maxcont=setPoints.length;

  1072       

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

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

  1075           

  1076 	

  1077         }                               

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

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

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

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

  1082      }

  1083       else

  1084      { 

  1085   

  1086 	  xpArray.push(toX);

  1087           ypArray.push(toY);  

  1088   

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

  1090  		    var thispath1=''; 

  1091 		    var thispath2='';

  1092                   var maxcont=xpArray.length;

  1093       

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

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

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

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

  1098         }

  1099         var end='';

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

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

  1102        

  1103        

  1104           

  1105       /*      

  1106   

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

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

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

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

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

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

  1113     

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

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

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

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

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

  1119        var maxcont=xpArray.length;

  1120        //alert(maxcont);

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

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

  1123         }

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

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

  1126     //points.Value = thispath;       

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

  1128        var maxcont=xpArray.length;

  1129        //alert(maxcont);

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

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

  1132         }

  1133         

  1134         shape.points.Value = thispath;

  1135         */  

  1136           

  1137           

  1138      

  1139   

  1140         /*

  1141  

  1142           

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

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

  1145 

  1146         

  1147        

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

  1149        var maxcont=xpArray.length;

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

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

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

  1153         }

  1154            

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

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

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

  1158       */

  1159     }  

  1160   } 

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

  1162     

  1163 }; 

  1164 SVGRenderer.prototype.tocurve = function()  

  1165 {

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

  1167      var chain='';

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

  1169      var numpoints=points.length-1;

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

  1171       {

  1172        if(a%3==0)

  1173         { 

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

  1175         }

  1176          else

  1177         {

  1178          chain+=points[a];       

  1179         } 

  1180       } 

  1181       if(numpoints%3==0){

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

  1183       } 

  1184       if(numpoints%3==2){

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

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

  1187       } 

  1188       if(numpoints%3==1){ 

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

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

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

  1192       } 

  1193       if(numpoints%3==3){ 

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

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

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

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

  1198       } 

  1199 

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

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

  1202       setShape(); 

  1203  }; 

  1204 SVGRenderer.prototype.info = function(shape)

  1205 {   

  1206  var shInfo = {};

  1207 if(shape.id != "tracker"){

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

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

  1210  shInfo.type = shape.tagName;

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

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

  1213   }else{

  1214      shInfo.transform ='';

  1215   }   

  1216  

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

  1218  

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

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

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

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

  1223    shInfo.text = shape.textContent 

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

  1225 

  1226    //shInfo.text = shape.nodparseFloatue;

  1227    }

  1228       

  1229  

  1230  if(shape.tagName !='image' || shape.tagName !='g' || shape.tagName !='stop')

  1231   {

  1232     shInfo.fillColor = shape.getAttribute('fill')

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

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

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

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

  1237     

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

  1239     

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

  1241      {

  1242       

  1243      }

  1244       else

  1245      {

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

  1247      

  1248     if(mystyle!= null){

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

  1250       var data;  

  1251    

  1252       var estilo=generateJSON(mystyle);

  1253       eval("data="+estilo);

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

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

  1256     

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

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

  1259       

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

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

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

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

  1264        //shInfo.fillColor=data.fill;

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

  1266     }

  1267    }

  1268   }  

  1269  

  1270  

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

  1272    {

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

  1274    shInfo.type = "roundrect";

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

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

  1277    }

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

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

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

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

  1282    }

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

  1284    {     

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

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

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

  1288      }else{

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

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

  1291      }

  1292     

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

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

  1295    }

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

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

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

  1299     shInfo.width = parseFloat(shape.getAttribute('x2'));

  1300     shInfo.height = parseFloat(shape.getAttribute('y2'));  

  1301 

  1302    }

  1303    else if(shape.tagName == 'stop') {

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

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

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

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

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

  1309      {

  1310       

  1311      }

  1312       else

  1313      {

  1314     if(mystyle!= null){

  1315       var data;  

  1316       var estilo=generateJSON(mystyle);

  1317       eval("data="+estilo);

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

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

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

  1321      } 

  1322      

  1323     }

  1324    }

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

  1326    {

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

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

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

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

  1331    } 

  1332   else if (shape.tagName == 'polyline') 

  1333    {

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

  1335    } 

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

  1337    { 

  1338     shInfo.type = "group";

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

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

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

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

  1343     shInfo.fillColor = shape.getAttribute('fill')

  1344 

  1345    }   

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

  1347    {

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

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

  1350  

  1351     //alert(shInfo.transform);

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

  1353    

  1354    }

  1355   else 

  1356   

  1357  

  1358   if (shape.tagName == 'image')

  1359    {                                     

  1360     

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

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

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

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

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

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

  1367      

  1368   } 

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

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

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

  1372     //shInfo.viewBox = parseFloat(shape.getAttribute('viewBox'));   

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

  1374 

  1375   }

  1376     return shInfo;  

  1377   }else{

  1378    //do nothing if its the tracker

  1379    }

  1380   

  1381    	

  1382    	

  1383 };     

  1384 SVGRenderer.prototype.info01 = function(shape)

  1385 {   

  1386 

  1387 var shInfo = {};

  1388 if(shape.id != "tracker"){

  1389 shInfo.id = shape.id.substr(6);

  1390  shInfo.type = shape.tagName;

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

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

  1393   }else{

  1394      shInfo.transform ='';

  1395   }   

  1396      

  1397  

  1398  if(shape.tagName !='image')

  1399   {

  1400     shInfo.fillColor = shape.getAttribute('fill')

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

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

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

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

  1405   }  

  1406  

  1407  

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

  1409    {

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

  1411    shInfo.type = "roundrect";

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

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

  1414    }

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

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

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

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

  1419    }

  1420   else if (shape.tagName == 'ellipse') 

  1421    {

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

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

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

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

  1426  

  1427    }

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

  1429    {

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

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

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

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

  1434    } 

  1435   else if (shape.tagName == 'polyline') 

  1436    {

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

  1438    }

  1439   else 

  1440   

  1441   if (shape.tagName == 'path')

  1442    {

  1443     shInfo.d = shape.getAttribute('d');     

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

  1445  

  1446     //alert(shInfo.transform);

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

  1448    

  1449    }

  1450   else 

  1451   

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

  1453  

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

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

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

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

  1458    shInfo.text = shape.textContent 

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

  1460 

  1461    //shInfo.text = shape.nodparseFloatue;

  1462    }

  1463   else

  1464  

  1465   if (shape.tagName == 'image')

  1466    {                                     

  1467     

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

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

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

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

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

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

  1474      

  1475   }

  1476   

  1477     return shInfo;  

  1478   }else{

  1479    //do nothing if its the tracker

  1480    }

  1481 

  1482    	

  1483 }

  1484 

  1485 

  1486 

  1487 

  1488 

  1489 SVGRenderer.prototype.transformShape = function(shape,data,transform)

  1490 {      

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

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

  1493    //

  1494  

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

  1496   { 

  1497     var box = shape.getBBox();

  1498     var sdata=data.split(';'); 

  1499     

  1500     //alert(data[0]);     

  1501     shape.setAttributeNS(null,'x',parseFloat(sdata[0]));

  1502     shape.setAttributeNS(null,'y',parseFloat(sdata[1]));   

  1503     shape.setAttributeNS(null, 'width', parseFloat(sdata[2]));     

  1504     shape.setAttributeNS(null, 'height', parseFloat(sdata[3])); 

  1505     var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);

  1506     var centery=parseFloat(sdata[1])+parseFloat(box.height/2);    

  1507     shape.setAttributeNS(null, 'transform','rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')');

  1508     

  1509    //shape.nodparseFloatue=data;

  1510   }

  1511    else 

  1512  if(shape.tagName == 'text')

  1513   {    

  1514     if(data.indexOf('<;>',0)==-1 )

  1515      {  

  1516       shape.textContent = data;  

  1517      }

  1518       else

  1519      {  

  1520        var sdata=data.split('<;>'); //?????????

  1521        shape.textContent = sdata[0]; 

  1522        shape.setAttributeNS(null,'font-size',parseFloat(sdata[1])); 

  1523         shape.setAttributeNS(null,'font-family',sdata[2]);

  1524      }

  1525    //shape.nodparseFloatue=data;

  1526   }

  1527    else

  1528  if (shape.tagName == 'polyline') 

  1529   {

  1530     shape.setAttributeNS(null,'points',data);

  1531   }

  1532    else 

  1533  if (shape.tagName == 'image') 

  1534   {   

  1535     //alert(data);  

  1536     if(data.indexOf(';',0)==-1 )

  1537      {  

  1538       shape.setAttributeNS(xlinkNS,'href',data);

  1539      }

  1540       else

  1541      {  

  1542         var box = shape.getBBox();

  1543         var sdata=data.split(';');

  1544         shape.setAttributeNS(null,'x',parseFloat(sdata[0]));

  1545         shape.setAttributeNS(null,'y',parseFloat(sdata[1]));   

  1546         shape.setAttributeNS(null, 'width', parseFloat(sdata[2])); 

  1547         shape.setAttributeNS(null, 'height',parseFloat(sdata[3]));  

  1548         var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);

  1549         var centery=parseFloat(sdata[1])+parseFloat(box.height/2);    

  1550         shape.setAttributeNS(null, 'transform',' rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')');

  1551 

  1552 

  1553      } 

  1554       

  1555   }

  1556    else 

  1557  if (shape.tagName == 'path')

  1558   {     

  1559     if(data.indexOf(';',0)==-1 )

  1560      {  

  1561     	shape.setAttributeNS(null, 'd', data);  

  1562     	shape.setAttributeNS(null, 'transform', transform);  

  1563      }

  1564       else

  1565      {  

  1566         var box = shape.getBBox();

  1567         var sdata=data.split(';');

  1568         var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);

  1569         var centery=parseFloat(sdata[1])+parseFloat(box.height/2);    

  1570         shape.setAttributeNS(null, 'transform','scale('+parseFloat(sdata[2])+','+parseFloat(sdata[3])+')'+' rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')'+' translate('+parseFloat(sdata[0])+','+parseFloat(sdata[1])+')');

  1571 

  1572 

  1573      } 

  1574   }  

  1575    	                             

  1576 	                             

  1577 }

  1578 SVGRenderer.prototype.editShape = function(shape,data)

  1579 {   

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

  1581    shape.textContent = data

  1582  }else

  1583    if (shape.tagName == 'polyline') 

  1584    {

  1585     shape.setAttributeNS(null,'points',data);

  1586    }

  1587   else 

  1588   

  1589   if (shape.tagName == 'path')

  1590    {

  1591     	shape.setAttributeNS(null, 'd', data);  

  1592     	

  1593    }  

  1594 	

  1595 }

  1596 SVGRenderer.prototype.editCommand = function(shape, cmd, value)

  1597 {

  1598   if (shape != null) {

  1599     if (cmd == 'fillcolor') {

  1600       if (value != '')

  1601         shape.setAttributeNS(null, 'fill', value);

  1602       else

  1603         shape.setAttributeNS(null, 'fill', 'none');

  1604     }

  1605     else if (cmd == 'linecolor') {

  1606       if (value != '')

  1607         shape.setAttributeNS(null, 'stroke', value);

  1608       else

  1609         shape.setAttributeNS(null, 'stroke', 'none');

  1610     }

  1611     else if (cmd == 'linewidth') {

  1612       shape.setAttributeNS(null, 'stroke-width', parseInt(value) + 'px');

  1613     } 

  1614     else if (cmd == 'fillopacity') {

  1615            if(shape.tagName=='image')

  1616             {

  1617              shape.setAttributeNS(null, 'opacity', parseFloat(value));

  1618             }

  1619              else

  1620             {

  1621                 shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));

  1622             }    

  1623       

  1624     }

  1625     else if (cmd == 'lineopacity') {         

  1626       

  1627       shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));

  1628       

  1629     }

  1630 

  1631   }

  1632 }

  1633 

  1634 

  1635 SVGRenderer.prototype.queryCommand = function(shape, cmd)

  1636 {

  1637   var result = '';

  1638   

  1639   if (shape != null) {

  1640     if (cmd == 'fillcolor') {

  1641       result = shape.getAttributeNS(null, 'fill');

  1642       if (result == 'none')

  1643         result = '';

  1644     }

  1645     else if (cmd == 'linecolor') {

  1646       result = shape.getAttributeNS(null, 'stroke');

  1647       if (result == 'none')

  1648         result = '';

  1649     }

  1650     else if (cmd == 'linewidth') {

  1651       result = shape.getAttributeNS(null, 'stroke');

  1652       if (result == 'none')

  1653         result = '';

  1654       else

  1655         result = shape.getAttributeNS(null, 'stroke-width');

  1656     }

  1657     else if (cmd == 'fillopacity') {

  1658            if(shape.tagName=='image')

  1659             {

  1660              shape.setAttributeNS(null, 'opacity', parseFloat(value));

  1661             }

  1662              else

  1663             {

  1664                 shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));

  1665             }    

  1666       

  1667     }

  1668     else if (cmd == 'lineopacity') {         

  1669       

  1670       shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));

  1671       

  1672     }

  1673 

  1674   }

  1675   

  1676   return result;

  1677 }

  1678 

  1679 SVGRenderer.prototype.getProperties = function(shape)

  1680 {

  1681   var result = '';

  1682   

  1683   if (shape != null) 

  1684    {

  1685       result = shape.getAttributeNS(null, 'fill');

  1686       if (result == 'none')

  1687        {

  1688          mefillColor.visible = 'hidden';

  1689          mefillColor.hex = '#000000'; 

  1690          filldraw=true;

  1691          setbe(1,'img_okfill');

  1692        }

  1693         else

  1694        {   

  1695          //alert(mefillColor.hex+' '+result);

  1696          mefillColor.visible = 'visible';

  1697          mefillColor.hex = result; 

  1698          var rgb=hex2rgb(result)

  1699          mefillColor.r=rgb[0];

  1700          mefillColor.g=rgb[1];

  1701          mefillColor.b=rgb[2];

  1702          filldraw=false;

  1703          setbe(1,'img_okfill');

  1704 

  1705        }

  1706 

  1707       result = shape.getAttributeNS(null, 'stroke');

  1708       if (result == 'none')

  1709        {    

  1710          mestrokeColor.visible = 'hidden'; 

  1711          mestrokeColor.hex = '#000000';

  1712          mestrokeColor.width = 0;

  1713          strokedraw=true;

  1714          setbe(2,'img_okstroke');

  1715 

  1716        }

  1717         else

  1718        { 

  1719          mestrokeColor.visible = 'visible'; 

  1720          mestrokeColor.hex = result; 

  1721          var rgb=hex2rgb(result)

  1722          mestrokeColor.r=rgb[0];

  1723          mestrokeColor.g=rgb[1];

  1724          mestrokeColor.b=rgb[2];

  1725          strokedraw=false;

  1726          setbe(2,'img_okstroke');

  1727 

  1728        }

  1729 

  1730       result = shape.getAttributeNS(null, 'stroke-width');

  1731       mestrokeColor.width = result;

  1732  

  1733       result = shape.getAttributeNS(null, 'fill-opacity'); 

  1734       mefillColor.opacity = result;

  1735 

  1736       result = shape.getAttributeNS(null, 'stroke-opacity');

  1737       mestrokeColor.opacity = result;

  1738       

  1739       setProperties();

  1740    }

  1741 }

  1742 

  1743 

  1744 SVGRenderer.prototype.showMultiSelect = function(iniX,iniY) { 

  1745   var tracker = document.getElementById('trackerMultiSelect');

  1746   if (tracker) {

  1747     this.remove(tracker);

  1748   }

  1749   

  1750   var coord=this.editor.inputxy;

  1751 	toX=parseFloat(coord[0]);

  1752 	toY=parseFloat(coord[1]); 

  1753 	

  1754     tracker = document.createElementNS(svgNamespace, 'rect'); 

  1755       

  1756     tracker.setAttributeNS(null, 'x', iniX);

  1757     tracker.setAttributeNS(null, 'y', iniY);    

  1758   tracker.setAttributeNS(null, 'width', toX);

  1759   tracker.setAttributeNS(null, 'height', toY);

  1760   tracker.setAttributeNS(null, 'fill', '#ffffff');

  1761   tracker.setAttributeNS(null, 'stroke', 'green');

  1762   tracker.setAttributeNS(null, 'stroke-width', '1');  

  1763   

  1764    this.svgRoot.appendChild(tracker);     

  1765 }

  1766 

  1767 

  1768 function mouseCoord()

  1769 {                                           

  1770    var coord=this.editor.inputxy;

  1771    coord[0]=parseFloat(coord[0]);

  1772    coord[1]=parseFloat(coord[1]); 

  1773    return coord

  1774 } 

  1775 /*

  1776 function nodeHit(node)

  1777 {                                           

  1778    node.addEventListener("mousemove", function(event) {nodeMove(node)}, false);            

  1779   

  1780 }

  1781 

  1782 function nodeUp(node)

  1783 {                                           

  1784    //node.stopObserving("mousemove");

  1785 }                                                                             

  1786 

  1787 function nodeMove(node)

  1788 {                                           

  1789    var mypath=$('control_codebase').value; 

  1790    var  x= $('option_path_x').value;

  1791    var y= $('option_path_y').value; 

  1792    var precoord=x+','+y; 

  1793     var coord=mouseCoord(); 

  1794    node.setAttributeNS(null, 'x', coord[0]-2); 

  1795    node.setAttributeNS(null, 'y', coord[1]-2); 

  1796 

  1797    $('option_path_x').value=parseFloat(node.getAttributeNS(null,'x'))+2; 

  1798    $('option_path_y').value=parseFloat(node.getAttributeNS(null,'y'))+2; 

  1799    

  1800     var  cadx= $('option_path_x').value;

  1801     var cady= $('option_path_y').value; 

  1802     var coord=cadx+','+cady;

  1803           var cad1=new RegExp(precoord,"g");

  1804       

  1805       

  1806       var result=mypath.replace(cad1, coord);

  1807       

  1808      

  1809       $('control_codebase').value=result; 

  1810       

  1811       $('someinfo').value=precoord;

  1812       setShape();

  1813 

  1814     

  1815     

  1816 } 

  1817 */                                                                              

  1818 var memoNode=null; 

  1819 var memoPrevControl=new Array();

  1820 var memoNextControl=new Array();

  1821 SVGRenderer.prototype.nodeMove = function(newx,newy) { 

  1822     var mypath=$('control_codebase').value; 

  1823    var  x= $('option_path_x').value;

  1824    var y= $('option_path_y').value; 

  1825    var precoord=x+','+y; 

  1826    

  1827    $('option_path_x').value=newx; 

  1828    $('option_path_y').value=newy; 

  1829     

  1830       var  cadx= newx;

  1831       var cady= newy; 

  1832   

  1833       var coord=cadx+','+cady;

  1834           var cad1=new RegExp(precoord,"g");

  1835       

  1836       

  1837       var result=mypath.replace(cad1, coord);

  1838       

  1839      

  1840       $('control_codebase').value=result; 

  1841       

  1842       $('someinfo').value=precoord;

  1843       setShape();

  1844 

  1845 }

  1846 

  1847 function drawNodeControl(svg,numId){

  1848 

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

  1850       var color1='#0066ff';          

  1851            // if(parseInt(memoNode.id)==a){   

  1852                    

  1853                    var pointprev=memoPrevControl[numId].split(',');

  1854             

  1855                   var controlNode1 = document.createElementNS(svgNamespace, 'rect'); 

  1856                   controlNode1.setAttributeNS(null, 'x', pointprev[0]-2);

  1857                   controlNode1.setAttributeNS(null, 'y', pointprev[1]-2);

  1858           

  1859                   controlNode1.setAttributeNS(null, 'width', 4);

  1860                   controlNode1.setAttributeNS(null, 'height', 4);

  1861                   controlNode1.setAttributeNS(null, 'fill', color1);

  1862                   controlNode1.setAttributeNS(null, 'stroke', '#000000');

  1863                   controlNode1.setAttributeNS(null, 'stroke-width', '0'); 

  1864                   controlNode1.setAttributeNS(null, 'id', 'controlNode1'); 

  1865                   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);

  1866                   svg.appendChild(controlNode1);  

  1867                   

  1868                    var pointnext=memoNextControl[numId].split(',');

  1869                   

  1870                

  1871                   var controlNode2 = document.createElementNS(svgNamespace, 'rect'); 

  1872                   controlNode2.setAttributeNS(null, 'x', pointnext[0]-2);

  1873                   controlNode2.setAttributeNS(null, 'y', pointnext[1]-2);

  1874           

  1875                   controlNode2.setAttributeNS(null, 'width', 4);

  1876                   controlNode2.setAttributeNS(null, 'height', 4);

  1877                   controlNode2.setAttributeNS(null, 'fill', color1);

  1878                   controlNode2.setAttributeNS(null, 'stroke', '#000000');

  1879                   controlNode2.setAttributeNS(null, 'stroke-width', '0'); 

  1880                   controlNode2.setAttributeNS(null, 'id', 'controlNode1'); 

  1881                   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);

  1882                   svg.appendChild(controlNode2);  

  1883 

  1884             //}

  1885 

  1886 

  1887 }  

  1888                                                                    

  1889 SVGRenderer.prototype.showNodesCurve = function(path,controlNodeNum){ 

  1890      memoNextControl=new Array();

  1891      memoPrevControl=new Array();

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

  1893     // tracker = document.createElementNS(svgNamespace, 'g');   

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

  1895       svg.setAttributeNS(null, 'id', 'editNodesPath'); 

  1896 

  1897      /* var group = document.getElementById('editNodesPath');

  1898       if (group) 

  1899        {

  1900            this.remove(group);

  1901        }

  1902        */

  1903 

  1904   var points=path.split(' ');

  1905      var chain='';

  1906      var segment=' ';  

  1907      prevControl=' ';

  1908      nextControl=' ';

  1909      nodePoint=' ';

  1910       var init=points[0].split('M'); 

  1911       var allcoords=init[1].split(' ');

  1912       var point=allcoords[0].split(',');

  1913           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  1914         rect1.setAttributeNS(null, 'x', point[0]-2);

  1915         rect1.setAttributeNS(null, 'y', point[1]-2);

  1916           

  1917         rect1.setAttributeNS(null, 'width', 4);

  1918         rect1.setAttributeNS(null, 'height', 4);

  1919         rect1.setAttributeNS(null, 'fill', '#ff7700');

  1920         rect1.setAttributeNS(null, 'stroke', '#000000');

  1921         rect1.setAttributeNS(null, 'stroke-width', '0');  

  1922         rect1.setAttributeNS(null, 'id', '0'); 

  1923         //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 ); }, false);

  1924       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);

  1925 

  1926         //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 );}, false);

  1927 

  1928         svg.appendChild(rect1);                                    

  1929       

  1930           if(controlNodeNum==0){ var color='#ffff00';}  

  1931          if(controlNodeNum==1){var color='#00ffff';}  

  1932          if(controlNodeNum==2){var color='#00cc00';}  

  1933          var color1='#ffff00';

  1934       

  1935      var numpoints=points.length-1;  

  1936      var recalls='';

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

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

  1939       { 

  1940         

  1941         var ini=points[a].substring(0,1);

  1942         if (!ini.match(re))        

  1943         {                          

  1944           var end=points[a].substring(1); 

  1945           color='#0000ff';

  1946           if(ini=='L' || ini=='M')

  1947            {

  1948              color='#ffff00';

  1949            }

  1950           

  1951           if(ini=='C')

  1952           { 

  1953              recall=a+2;

  1954              //color='#ffff00';

  1955           }

  1956 

  1957         }else

  1958         { 

  1959           var end=points[a];

  1960           var ini='';  

  1961           color='#ff00ff'; 

  1962           if(a==recall)

  1963           { 

  1964              color='#ffff00';

  1965           }

  1966         } 

  1967         

  1968             

  1969         //segment=points[a].split(',');

  1970          /*prevControl=segment[0]+' '; 

  1971          nextControl=segment[1]+' '; 

  1972          nodePoint=segment[2]+' ';     

  1973          memoPrevControl[a]=prevControl;

  1974          memoNextControl[a]=nextControl;

  1975          if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}  

  1976          if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}  

  1977          if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}  

  1978          if(controlNodeNum==3){chain+=nodePoint; var point=nodePoint.split(',');}

  1979            

  1980          */    

  1981                //if (isNaN(valnum))         

  1982 

  1983          //if(ini=='C'){color='#ff00ff';}

  1984          

  1985          var point=end.split(',');

  1986          if(memoNode!=null){

  1987          }

  1988           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  1989         rect1.setAttributeNS(null, 'x', point[0]-2);

  1990         rect1.setAttributeNS(null, 'y', point[1]-2);

  1991           

  1992         rect1.setAttributeNS(null, 'width', 4);

  1993         rect1.setAttributeNS(null, 'height', 4);

  1994         rect1.setAttributeNS(null, 'fill', color);

  1995         rect1.setAttributeNS(null, 'stroke', '#000000');

  1996         rect1.setAttributeNS(null, 'stroke-width', '0'); 

  1997         rect1.setAttributeNS(null, 'id', ''+a); 

  1998         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);

  1999 

  2000         //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);

  2001         // 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);

  2002          //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);

  2003          //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);

  2004          //rect1.addEventListener("mouseup", function(event) {nodeUp(this); }, false);

  2005          //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'fillColor', '#ffcc00' ); }, false);

  2006          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'fillColor', '#00cc00' ); }, false);

  2007          

  2008 

  2009          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 ); }, false);

  2010 

  2011         svg.appendChild(rect1);                                    

  2012          

  2013       }                     

  2014       var info='';

  2015        

  2016          if(controlNodeNum==0){info='prev Control'}  

  2017          if(controlNodeNum==1){info='next Control'}  

  2018          if(controlNodeNum==2){info='points node'}   

  2019         // $('someinfo').value=numpoints+ ' '+info+':'+ chain;

  2020         $('someinfo').value='Crtl+Arrow to move';

  2021     //return chain;                                          

  2022     

  2023 

  2024       //this.svgRoot.appendChild(svg);   

  2025     

  2026     return svg;  

  2027         

  2028 };

  2029 

  2030 SVGRenderer.prototype.showNodesCurve1 = function(path,controlNodeNum){ 

  2031      memoNextControl=new Array();

  2032      memoPrevControl=new Array();

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

  2034     // tracker = document.createElementNS(svgNamespace, 'g');   

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

  2036       svg.setAttributeNS(null, 'id', 'editNodesPath'); 

  2037 

  2038      /* var group = document.getElementById('editNodesPath');

  2039       if (group) 

  2040        {

  2041            this.remove(group);

  2042        }

  2043        */

  2044 

  2045   var points=path.split('C');

  2046      var chain='';

  2047      var segment=' ';  

  2048      prevControl=' ';

  2049      nextControl=' ';

  2050      nodePoint=' ';

  2051       var init=points[0].split('M'); 

  2052       var allcoords=init[1].split(' ');

  2053       var point=allcoords[0].split(',');

  2054           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2055         rect1.setAttributeNS(null, 'x', point[0]-2);

  2056         rect1.setAttributeNS(null, 'y', point[1]-2);

  2057           

  2058         rect1.setAttributeNS(null, 'width', 4);

  2059         rect1.setAttributeNS(null, 'height', 4);

  2060         rect1.setAttributeNS(null, 'fill', '#ff7700');

  2061         rect1.setAttributeNS(null, 'stroke', '#000000');

  2062         rect1.setAttributeNS(null, 'stroke-width', '0');  

  2063         rect1.setAttributeNS(null, 'id', '0'); 

  2064         //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 ); }, false);

  2065         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);

  2066 

  2067         //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 );}, false);

  2068 

  2069         svg.appendChild(rect1);                                    

  2070       

  2071           if(controlNodeNum==0){ var color='#ffff00';}  

  2072          if(controlNodeNum==1){var color='#00ffff';}  

  2073          if(controlNodeNum==2){var color='#00cc00';}  

  2074          var color1='#ffff00';

  2075       

  2076      var numpoints=points.length-1;

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

  2078       { 

  2079         

  2080         

  2081             

  2082         segment=points[a].split(' ');

  2083          prevControl=segment[0]+' '; 

  2084          nextControl=segment[1]+' '; 

  2085          nodePoint=segment[2]+' ';     

  2086          memoPrevControl[a]=prevControl;

  2087          memoNextControl[a]=nextControl;

  2088          if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}  

  2089          if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}  

  2090          if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}  

  2091          if(controlNodeNum==3){chain+=nodePoint; var point=nodePoint.split(',');}  

  2092       

  2093          if(memoNode!=null){

  2094          }

  2095           var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2096         rect1.setAttributeNS(null, 'x', point[0]-2);

  2097         rect1.setAttributeNS(null, 'y', point[1]-2);

  2098           

  2099         rect1.setAttributeNS(null, 'width', 4);

  2100         rect1.setAttributeNS(null, 'height', 4);

  2101         rect1.setAttributeNS(null, 'fill', color);

  2102         rect1.setAttributeNS(null, 'stroke', '#000000');

  2103         rect1.setAttributeNS(null, 'stroke-width', '0'); 

  2104         rect1.setAttributeNS(null, 'id', ''+a); 

  2105         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);

  2106 

  2107         //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);

  2108         // 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);

  2109          //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);

  2110          //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);

  2111          //rect1.addEventListener("mouseup", function(event) {nodeUp(this); }, false);

  2112          //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'fillColor', '#ffcc00' ); }, false);

  2113          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'fillColor', '#00cc00' ); }, false);

  2114          

  2115 

  2116          //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 ); }, false);

  2117 

  2118         svg.appendChild(rect1);                                    

  2119          

  2120       }                     

  2121       var info='';

  2122        

  2123          if(controlNodeNum==0){info='prev Control'}  

  2124          if(controlNodeNum==1){info='next Control'}  

  2125          if(controlNodeNum==2){info='points node'}   

  2126         // $('someinfo').value=numpoints+ ' '+info+':'+ chain;

  2127         $('someinfo').value='Crtl+Arrow to move';

  2128     //return chain;                                          

  2129     

  2130 

  2131       //this.svgRoot.appendChild(svg);   

  2132     

  2133     return svg;  

  2134         

  2135 };

  2136 SVGRenderer.prototype.showTracker = function(shape,pathsEdit) {  

  2137 

  2138   var box = shape.getBBox();

  2139  var matrix = shape.getScreenCTM();

  2140   var trshape= shape.getAttributeNS(null, 'transform');  

  2141   var shap=1; 

  2142   var T = shape.getCTM();

  2143   //a,b,c,d,e,f

  2144 

  2145     

  2146  

  2147  

  2148     //var thisTransform = {  sx: s[0], r: shape.vRotate, t: shape.vTranslate };

  2149     //if (currentTransform != null) alert(currentTransform.t);

  2150  

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

  2152      

  2153      $('option_rect_rot').value= T.b* (Math.PI * 2 / 360); 

  2154      $('option_rect_trx').value= box.x;  

  2155      $('option_rect_try').value= box.y;

  2156      $('option_rect_sclx').value= box.width;  

  2157      $('option_rect_scly').value= box.height;

  2158 

  2159   }  

  2160 

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

  2162     $('option_img_trx').value= box.x; 

  2163     $('option_img_try').value= box.y;

  2164     $('option_img_sclx').value= box.width;  

  2165     $('option_img_scly').value= box.height;

  2166     $('option_img_rot').value= T.b* (Math.PI * 2 / 360);

  2167   }

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

  2169    /* f$('option_text_trx').value= box.x; 

  2170     $('option_text_try').value= box.y;

  2171     $('option_text_sclx').value= box.width;  

  2172     $('option_text_scly').value= box.height;

  2173     $('option_text_rot').value= T.b* (Math.PI * 2 / 360);

  2174    */

  2175   }

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

  2177     /*

  2178     $('option_line_trx').value= box.x;  

  2179     $('option_line_try').value= box.y;

  2180     */

  2181   }   

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

  2183     /*$('option_ellipse_trx').value= putx;  

  2184     $('option_ellipse_try').value= puty;

  2185     $('option_ellipse_sclx').value= box.width;  

  2186     $('option_ellipse_scly').value= box.height;

  2187     $('option_ellipse_rot').value= T.b* (Math.PI * 2 / 360);

  2188     */

  2189   }

  2190   

  2191   

  2192   

  2193  /* if (shape.getAttributeNS(null, 'transform') ) { 

  2194         

  2195         

  2196         shap=2; }else{

  2197   }*/ 

  2198   var tracker = document.getElementById('tracker');

  2199   if (tracker) {

  2200     this.remove(tracker);

  2201   }

  2202 

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

  2204   

  2205      tracker = document.createElementNS(svgNamespace, 'g');    

  2206       tracker.setAttributeNS(null, 'id', 'tracker'); 

  2207       

  2208     var controlPoints=null;

  2209     if (shape.tagName == 'path') { shap=2; 

  2210     

  2211     /* $('option_path_trx').value= box.x;  

  2212      $('option_path_try').value= box.y;

  2213      $('option_path_sclx').value= T.a;   

  2214      $('option_path_scly').value= T.d; 

  2215      $('option_path_rot').value= T.b* (Math.PI * 2 / 360);

  2216      */                                        

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

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

  2219        

  2220        //controlPoints=this.showNodesCurve(path,0);

  2221        //controlPoints=this.showNodesCurve(path,1); 

  2222        controlPoints=this.showNodesCurve(path,2);

  2223        

  2224            

  2225         /*   controlPoints=this.showNodesCurve(path,1); 

  2226    

  2227            tracker.appendChild(controlPoints);     

  2228            

  2229            controlPoints=this.showNodesCurve(path,0); 

  2230    

  2231            tracker.appendChild(controlPoints); 

  2232         */   

  2233    }        

  2234       

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

  2236       svg.setAttributeNS(null, 'id', 'transformSquares'); 

  2237    

  2238           

  2239        //var rect = document.createElementNS(svgNamespace, 'rect');   

  2240        var border = document.createElementNS(svgNamespace, 'path');  

  2241        

  2242        var trshape='translate (0,0) rotate(0) translate(0,0) '; 

  2243        var trshape_split=trshape.split(') ');    

  2244        

  2245       // get_between (trshape, s1, s2) ;

  2246      if(shape.getAttributeNS(null, 'transform')){ 

  2247          var trshape=shape.getAttributeNS(null, 'transform') ;   

  2248          //var spl=trshape.replace(', ',' ');  

  2249          //var spl1=spl.replace(')',' ');    

  2250          var trshape_split=trshape.split(') '); 

  2251          

  2252 

  2253     }

  2254                                          

  2255   var corners = [];

  2256   var point = createPoint(box.x, box.y, box.width, box.height);

  2257  //point = {x:box.x, y:box.y, width: box.width, height:box.height};

  2258 //point = createPoint(box.x, box.y, box.width, box.height);    

  2259   //1

  2260   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );

  2261   point.x = box.x + box.width;

  2262   point.y = box.y;

  2263   //2

  2264   corners.push( createPoint(box.x + box.width, box.y + box.height, box.width, box.height) );

  2265   point.x = box.x + box.width;

  2266   point.y = box.y + box.height;

  2267   //3

  2268   //corners.push( point.matrixTransform(matrix) );

  2269   corners.push( createPoint(box.x , box.y + box.height, box.width, box.height) );

  2270   point.x = box.x;

  2271   point.y = box.y + box.height;

  2272   //4

  2273   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );   

  2274   

  2275   var max = createPoint(corners[0].x, corners[0].y);

  2276   var min = createPoint(corners[0].x, corners[0].y);

  2277 

  2278   // identify the new corner coordinates of the

  2279   // fully transformed bounding box

  2280   for (var i = 1; i < corners.length; i++) {

  2281     var x = corners[i].x;

  2282     var y = corners[i].y;

  2283     if (x < min.x) {

  2284       min.x = x;

  2285     }

  2286     else if (x > max.x) {

  2287       max.x = x;

  2288     }

  2289     if (y < min.y) {

  2290       min.y = y;

  2291     }

  2292     else if (y > max.y) {

  2293       max.y = y;

  2294     }

  2295   }

  2296   

  2297   // return the bounding box as an SVGRect object

  2298   //rect = document.createElementNS(svgNamespace, 'rect');

  2299    //rect.setAttributeNS(null, 'x', min.x-10);

  2300     //rect.setAttributeNS(null, 'y', min.y-10);   

  2301     

  2302     //rect.setAttributeNS(null, 'width', max.x - min.x+20);

  2303     //rect.setAttributeNS(null, 'height', max.y - min.y+20);   

  2304      

  2305      border.setAttributeNS(null, 'd', "M"+(min.x-10)+","+ (min.y-10)+' h'+(box.width+20)+','+(0)+' v'+(0)+','+(box.height+20)+' h'+(-box.width-20)+','+(0)+' z M'+(box.x+box.width+10)+","+ (box.y+(box.height/2)+' h'+(25)+',0 '));   

  2306      

  2307      

  2308      border.setAttributeNS(null, 'fill', 'none');

  2309      border.setAttributeNS(null, 'stroke', '#cccccc');

  2310      border.setAttributeNS(null, 'stroke-width', '1'); 

  2311        

  2312 // createRect(min.x, min.y, max.x - min.x, max.y - min.y);

  2313 

  2314       var circle1 = document.createElementNS(svgNamespace, 'ellipse');  

  2315       circle1.setAttributeNS(null, 'cx', (box.x + box.width+40) + 'px');

  2316     circle1.setAttributeNS(null, 'cy', (box.y + box.height / 2) + 'px');

  2317     circle1.setAttributeNS(null, 'rx', (5) + 'px');

  2318     circle1.setAttributeNS(null, 'ry', (5) + 'px');   

  2319    circle1.setAttributeNS(null, 'fill', '#ffffff');

  2320   circle1.setAttributeNS(null, 'stroke', 'green');

  2321   circle1.setAttributeNS(null, 'stroke-width', '1');   

  2322 

  2323       var circleCenter = document.createElementNS(svgNamespace, 'ellipse');  

  2324       circleCenter.setAttributeNS(null, 'cx', (box.x + (box.width/2)) + 'px');

  2325     circleCenter.setAttributeNS(null, 'cy', (box.y + (box.height /2)) + 'px');

  2326     circleCenter.setAttributeNS(null, 'rx', (10) + 'px');

  2327     circleCenter.setAttributeNS(null, 'ry', (10) + 'px');   

  2328    circleCenter.setAttributeNS(null, 'fill', '#ffffff');

  2329   circleCenter.setAttributeNS(null, 'stroke', 'green');

  2330   circleCenter.setAttributeNS(null, 'stroke-width', '1');   

  2331 

  2332      var rect1 = document.createElementNS(svgNamespace, 'rect');  

  2333   rect1.setAttributeNS(null, 'width', 10);

  2334   rect1.setAttributeNS(null, 'height', 10);

  2335   rect1.setAttributeNS(null, 'fill', '#ffffff');

  2336   rect1.setAttributeNS(null, 'stroke', 'green');

  2337   rect1.setAttributeNS(null, 'stroke-width', '1');  

  2338 

  2339   var rect2 = document.createElementNS(svgNamespace, 'rect');  

  2340   rect2.setAttributeNS(null, 'width', 10);

  2341   rect2.setAttributeNS(null, 'height', 10);

  2342   rect2.setAttributeNS(null, 'fill', '#ffffff');

  2343   rect2.setAttributeNS(null, 'stroke', 'green');

  2344   rect2.setAttributeNS(null, 'stroke-width', '1');  

  2345 

  2346   var rect3 = document.createElementNS(svgNamespace, 'rect');  

  2347   rect3.setAttributeNS(null, 'width', 10);

  2348   rect3.setAttributeNS(null, 'height', 10);

  2349   rect3.setAttributeNS(null, 'fill', '#ffffff');

  2350   rect3.setAttributeNS(null, 'stroke', 'green');

  2351   rect3.setAttributeNS(null, 'stroke-width', '1'); 

  2352   

  2353   var rect4 = document.createElementNS(svgNamespace, 'rect');  

  2354   rect4.setAttributeNS(null, 'width', 10);

  2355   rect4.setAttributeNS(null, 'height', 10);

  2356   rect4.setAttributeNS(null, 'fill', '#ffffff');

  2357   rect4.setAttributeNS(null, 'stroke', 'green');

  2358   rect4.setAttributeNS(null, 'stroke-width', '1');  

  2359  

  2360   var rectmid12 = document.createElementNS(svgNamespace, 'rect');  

  2361   rectmid12.setAttributeNS(null, 'width', 10);

  2362   rectmid12.setAttributeNS(null, 'height', 10);

  2363   rectmid12.setAttributeNS(null, 'fill', '#ffffff');

  2364   rectmid12.setAttributeNS(null, 'stroke', 'green');

  2365   rectmid12.setAttributeNS(null, 'stroke-width', '1');  

  2366 

  2367   var rectmid23 = document.createElementNS(svgNamespace, 'rect');  

  2368   rectmid23.setAttributeNS(null, 'width', 10);

  2369   rectmid23.setAttributeNS(null, 'height', 10);

  2370   rectmid23.setAttributeNS(null, 'fill', '#ffffff');

  2371   rectmid23.setAttributeNS(null, 'stroke', 'green');

  2372   rectmid23.setAttributeNS(null, 'stroke-width', '1');  

  2373 

  2374   var rectmid34 = document.createElementNS(svgNamespace, 'rect');  

  2375   rectmid34.setAttributeNS(null, 'width', 10);

  2376   rectmid34.setAttributeNS(null, 'height', 10);

  2377   rectmid34.setAttributeNS(null, 'fill', '#ffffff');

  2378   rectmid34.setAttributeNS(null, 'stroke', 'green');

  2379   rectmid34.setAttributeNS(null, 'stroke-width', '1'); 

  2380   

  2381   var rectmid41 = document.createElementNS(svgNamespace, 'rect');  

  2382   rectmid41.setAttributeNS(null, 'width', 10);

  2383   rectmid41.setAttributeNS(null, 'height', 10);

  2384   rectmid41.setAttributeNS(null, 'fill', '#ffffff');

  2385   rectmid41.setAttributeNS(null, 'stroke', 'green');

  2386   rectmid41.setAttributeNS(null, 'stroke-width', '1');   

  2387    // rect.setAttributeNS(null, 'x', box.x - 10);

  2388    // rect.setAttributeNS(null, 'y', box.y - 10);    

  2389     

  2390     rect1.setAttributeNS(null, 'x', box.x - 10-5);

  2391     rect1.setAttributeNS(null, 'y', box.y - 10-5);  

  2392    

  2393     

  2394     rect2.setAttributeNS(null, 'x', box.x + box.width +5 );

  2395     rect2.setAttributeNS(null, 'y', box.y -10 -5);   

  2396 

  2397     rect3.setAttributeNS(null, 'x', box.x + box.width+5 );

  2398     rect3.setAttributeNS(null, 'y', box.y + box.height+5);

  2399                                                        

  2400     rect4.setAttributeNS(null, 'x', box.x -10-5 );

  2401     rect4.setAttributeNS(null, 'y', box.y + box.height+5);    

  2402 

  2403     

  2404 

  2405     rectmid12.setAttributeNS(null, 'x', box.x + (box.width/2) -5);

  2406     rectmid12.setAttributeNS(null, 'y', box.y - 10-5);  

  2407 

  2408     rectmid23.setAttributeNS(null, 'x', box.x + box.width +5 );

  2409     rectmid23.setAttributeNS(null, 'y', box.y + (box.height/2)-5);   

  2410     

  2411     rectmid34.setAttributeNS(null, 'x', box.x + (box.width/2)-5 );

  2412     rectmid34.setAttributeNS(null, 'y', box.y + box.height+5);

  2413                                                            

  2414     rectmid41.setAttributeNS(null, 'x', box.x -10-5 );

  2415     rectmid41.setAttributeNS(null, 'y', box.y + (box.height/2)-5);

  2416      

  2417     svg.appendChild(border); 

  2418     //tracker.appendChild(getScreenBBox (shape));

  2419     //currentTranslate

  2420     //currentScale

  2421    // 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))+") ");

  2422 

  2423    //var trshape=shape.getAttributeNS(null, 'transform') ; 

  2424   //----tracker.setAttributeNS(null,'transform', "translate("+(box.x+(box.width/2))+","+(box.y+(box.height/2))+") "+trshape_split[1]+") translate("+(-box.x-(box.width/2))+","+(-box.y-(box.height/2))+") ");

  2425 

  2426     

  2427     

  2428   //}  

  2429    // tracker.appendChild(getScreenBBox (shape));

  2430      var colorin="#ff0000";

  2431       var colorout="#ffffff" 

  2432       

  2433         circle1.addEventListener("mouseover", function(event) {circle1.setAttributeNS(null, 'cursor', 's-resize');  circle1.setAttributeNS(null, 'fill', colorin ); typeTransform='Rotate'; scaleType='nw'; }, false);

  2434      circle1.addEventListener("mouseout", function(event) {circle1.setAttributeNS(null, 'cursor', 'default');  circle1.setAttributeNS(null, 'fill', colorout ); typeTransform='Rotate'; }, false); //typeTransform='rotate'

  2435      circleCenter.addEventListener("mouseover", function(event) {circleCenter.setAttributeNS(null, 'cursor', 'move');  circleCenter.setAttributeNS(null, 'fill', colorin ); typeTransform='sp�nCenter'; scaleType='nw'; }, false);

  2436      circleCenter.addEventListener("mouseout", function(event) {circleCenter.setAttributeNS(null, 'cursor', 'default');  circleCenter.setAttributeNS(null, 'fill', colorout ); typeTransform=''; }, false); //typeTransform='rotate'

  2437  

  2438       

  2439      //rect1.addEventListener("mouseover", cursore1in, false);    

  2440      rect1.addEventListener("mouseover", function(event) {rect1.setAttributeNS(null, 'cursor', 'nw-resize');  rect1.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='nw';}, false);

  2441      rect1.addEventListener("mouseout", function(event) {rect1.setAttributeNS(null, 'cursor', 'default');  rect1.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); //typeTransform='rotate'

  2442      //rect1.addEventListener("click", function(event) { rect1.setAttributeNS(null, 'fill', '#00ff00' ); typeTransform='Scale'; }, false);

  2443     

  2444      rect2.addEventListener("mouseover", function(event) {rect2.setAttributeNS(null, 'cursor', 'ne-resize');  rect2.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='ne';}, false);  

  2445      rect2.addEventListener("mouseout", function(event) {rect2.setAttributeNS(null, 'cursor', 'default');  rect2.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);

  2446       

  2447      rect3.addEventListener("mouseover", function(event) {rect3.setAttributeNS(null, 'cursor', 'se-resize');  rect3.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='se';}, false);  

  2448      rect3.addEventListener("mouseout", function(event) {rect3.setAttributeNS(null, 'cursor', 'default');  rect3.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);

  2449      

  2450      rect4.addEventListener("mouseover", function(event) {rect4.setAttributeNS(null, 'cursor', 'sw-resize');  rect4.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='sw';}, false);  

  2451      rect4.addEventListener("mouseout", function(event) {rect4.setAttributeNS(null, 'cursor', 'default');  rect4.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);

  2452                                                     

  2453      rectmid12.addEventListener("mouseover", function(event) {rectmid12.setAttributeNS(null, 'cursor', 'n-resize');  rectmid12.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='n';}, false);  

  2454      rectmid12.addEventListener("mouseout", function(event) {rectmid12.setAttributeNS(null, 'cursor', 'default');  rectmid12.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  2455 

  2456      rectmid23.addEventListener("mouseover", function(event) {rectmid23.setAttributeNS(null, 'cursor', 'e-resize');  rectmid23.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='e';}, false);  

  2457      rectmid23.addEventListener("mouseout", function(event) {rectmid23.setAttributeNS(null, 'cursor', 'default');  rectmid23.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  2458      

  2459      rectmid34.addEventListener("mouseover", function(event) {rectmid34.setAttributeNS(null, 'cursor', 's-resize');  rectmid34.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='s';}, false);  

  2460      rectmid34.addEventListener("mouseout", function(event) {rectmid34.setAttributeNS(null, 'cursor', 'default');  rectmid34.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  2461 

  2462      rectmid41.addEventListener("mouseover", function(event) {rectmid41.setAttributeNS(null, 'cursor', 'w-resize');  rectmid41.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='w'; }, false);  

  2463      rectmid41.addEventListener("mouseout", function(event) {rectmid41.setAttributeNS(null, 'cursor', 'default');  rectmid41.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); 

  2464      

  2465      //////////

  2466      svg.setAttributeNS(null, 'transform',trshape); 

  2467   

  2468     svg.appendChild(circle1);    

  2469     //tracker.appendChild(circleCenter);  

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

  2471     svg.appendChild(rect1); 

  2472     svg.appendChild(rect2);   

  2473     svg.appendChild(rect3); 

  2474     svg.appendChild(rect4);  

  2475   }else{

  2476     svg.appendChild(rect1); 

  2477     svg.appendChild(rect2);   

  2478     svg.appendChild(rect3); 

  2479     svg.appendChild(rect4);  

  2480     svg.appendChild(rectmid12);  

  2481     svg.appendChild(rectmid23);

  2482     svg.appendChild(rectmid34);

  2483     svg.appendChild(rectmid41);                                    

  2484 

  2485   }  

  2486     if(pathsEdit)

  2487      {    

  2488         controlPoints.setAttributeNS(null, 'transform',trshape); 

  2489         tracker.appendChild(controlPoints);      

  2490      }else{   

  2491         tracker.appendChild(svg); 

  2492      }   

  2493   this.svgRoot.appendChild(tracker);  

  2494       

  2495 }

  2496 

  2497 

  2498 SVGRenderer.prototype.getMarkup = function() { 

  2499        

  2500   return this.container.innerHTML;

  2501 }   

  2502 

  2503 

  2504 /////////////////////////////////

  2505 var rotatexxx=0; 

  2506  

  2507 var scaleType=''; 

  2508 var xrot=0;

  2509 var yrot=0;  

  2510 

  2511 var point = {x:0, y:0, width: 0, height:0};

  2512 

  2513 function createPoint (x, y, width, height) {

  2514     //var point = {x:34, y:22, width: 22, height:23};

  2515     //point.x = x;

  2516     //point.y = y;   

  2517     point = {x:x, y:y, width: width, height:height};

  2518     return point;

  2519   }

  2520 

  2521 ///////////////////////////////

  2522 

  2523 SVGRenderer.prototype.restruct= function(shape)

  2524 {

  2525  //alert('end');       

  2526  //forceRedraw(); 

  2527 //clearWorkspace();  

  2528 //document.getElementById('richdraw').style.cursor='default';    

  2529 };        

  2530 

  2531 

  2532 

  2533 SVGRenderer.prototype.transform = function() {

  2534     //document.forms[0].code.value='Im tranforming';

  2535 };

  2536 

  2537 SVGRenderer.prototype.scaleShape = function(shape,previus, toX, toY) {

  2538 

  2539 	 var box = shape.getBBox();  

  2540 	 var prevbox=previus.getBBox();

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

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

  2543 	var coord=this.editor.inputxy;

  2544 	toX=parseFloat(coord[0]);

  2545 	toY=parseFloat(coord[1]); 

  2546 	var d2p_center=dist2p(centerx,centery,toX,toY);       

  2547 

  2548 	var d2p=dist2p(box.x,box.y,toX,toY);

  2549 

  2550 	var shareScale=box.width/d2p;

  2551 

  2552 	var trans_ShareScale='';

  2553 	var tx, ty, tw, yh;

  2554 

  2555 	if(scaleType.length==1){

  2556 		if(scaleType== 'w')

  2557 		 {

  2558 			trans_ShareScale=shareScale+",1";  

  2559 			tx=toX; 

  2560 			ty=prevbox.y; 

  2561 			var dist=prevbox.x-toX;

  2562 			var w=dist+prevbox.width;

  2563 			if(w<1){w=1;}

  2564 			tw=w;

  2565 			th=prevbox.height;

  2566 			//document.forms[0].code.value=box.x+' '+toX+' '+dist+''; 

  2567 		 }        

  2568 		if(scaleType== 'e')

  2569 		 {

  2570 		        trans_ShareScale=shareScale+",1"; 

  2571 			tx=prevbox.x; 

  2572 			ty=prevbox.y; 

  2573 			var dist=toX-(prevbox.x+prevbox.width); //dist2p(toX,b,c,d);

  2574 			var w=dist+prevbox.width;

  2575 			if(w<1){w=1;}

  2576 			tw=w;

  2577 			th=prevbox.height;

  2578  

  2579 		 }        

  2580 		if(scaleType== 'n')

  2581 		 {

  2582 			trans_ShareScale="1,"+shareScale; 

  2583 			

  2584 			tx=prevbox.x; 

  2585 			ty=toY; 

  2586 			var dist=prevbox.y-toY;

  2587 			var h=dist+prevbox.height;

  2588 			if(h<1){h=1;}

  2589 			tw=prevbox.width;

  2590 			th=h;

  2591 

  2592 		 }

  2593                 if( scaleType== 's')

  2594                  {

  2595                         trans_ShareScale="1,"+shareScale;  

  2596 

  2597 			tx=prevbox.x; 

  2598 			ty=prevbox.y; 

  2599 			var dist=toY-(prevbox.y+prevbox.height); //dist2p(toX,b,c,d);

  2600 			var h=dist+prevbox.height;

  2601 			if(h<1){h=1;}

  2602 			tw=prevbox.width;

  2603 			th=h;

  2604 

  2605 	         }

  2606         }

  2607 	if(scaleType.length==2){

  2608 		if(scaleType== 'nw'){

  2609 			trans_ShareScale=shareScale+","+shareScale; 

  2610           

  2611       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  2612       			  var angle_diagonal=ang2v(prevbox.x,prevbox.y,prevbox.x+prevbox.width,prevbox.y+prevbox.height)

  2613             

  2614                         var ax= prevbox.x;

  2615                         var ay= prevbox.y;

  2616                         var bx= prevbox.x+prevbox.width; 

  2617                         var by= prevbox.y+prevbox.height; 

  2618                         

  2619                         var cx= toX;

  2620                         var cy= toY;

  2621                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  2622                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2));  

  2623                         

  2624                         var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  2625                  this.editor.log(angle_diagonal* 180 / Math.PI);       

  2626                     

  2627                 var tx= section_a[1];

  2628                 var ty= section_a[2];

  2629                 

  2630                         var ax= section_a[1];

  2631                         var ay= section_a[2];

  2632                         var bx= 0;

  2633                         var by= section_a[2] ; 

  2634                         

  2635                         var cx=prevbox.x+prevbox.width; 

  2636                         var cy= prevbox.y;

  2637 

  2638                         var dx= prevbox.x+prevbox.width;  

  2639                         var dy= 0;

  2640                         

  2641                       

  2642                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2643 

  2644                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  2645 

  2646               

  2647                 

  2648                         var ax= section_a[1];

  2649                         var ay= section_a[2];

  2650                         var bx= section_a[1] 

  2651                         var by= 0; 

  2652                         

  2653                         var cx= prevbox.x; 

  2654                         var cy= prevbox.y+prevbox.height; 

  2655 

  2656                         var dx= 0; 

  2657                         var dy= prevbox.y+prevbox.height;

  2658                         

  2659                       

  2660                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2661                 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  2662                 

  2663                 

  2664 

  2665                     

  2666                         if(distx<1){distx=1;}    

  2667 			

  2668          		

  2669 			if(disty<1){disty=1;}

  2670                         //document.forms[0].code.value=distx+' '+disty;

  2671 			tw=distx;

  2672 			th=disty;

  2673 

  2674 			

  2675 		}                  

  2676 		

  2677 	//////////////////// SE

  2678 		

  2679            if( scaleType== 'se'){

  2680 			trans_ShareScale=shareScale+","+shareScale;   

  2681 			

  2682 	          

  2683       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  2684        			var angle_diagonal=ang2v(prevbox.x,prevbox.y,prevbox.x+prevbox.width,prevbox.y+prevbox.height)

  2685 		

  2686 			

  2687 			

  2688                         var ax= prevbox.x;

  2689                         var ay= prevbox.y;

  2690                         var bx= prevbox.x+prevbox.width; 

  2691                         var by= prevbox.y+prevbox.height; 

  2692                         

  2693                         var cx= toX;

  2694                         var cy= toY;   

  2695                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  2696                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2)); 

  2697       

  2698                 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  2699                 

  2700                                          

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

  2702                  var tracker = document.getElementById('tracker');

  2703 

  2704                 //////////

  2705                 var tx= prevbox.x;

  2706                 var ty= prevbox.y;

  2707                 

  2708                         var ax= section_a[1];

  2709                         var ay= section_a[2];

  2710                         var bx= 0;

  2711                         var by= section_a[2] ; 

  2712                         

  2713                         var cx=prevbox.x; 

  2714                         var cy= prevbox.y;

  2715 

  2716                         var dx= prevbox.x;  

  2717                         var dy= 0;

  2718                         

  2719                       

  2720                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2721                

  2722                /////////////////

  2723                

  2724                

  2725                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  2726 

  2727              

  2728                         var ax= section_a[1];

  2729                         var ay= section_a[2];

  2730                         var bx= section_a[1] 

  2731                         var by= 0; 

  2732                         

  2733                         var cx= prevbox.x; 

  2734                         var cy= prevbox.y; 

  2735 

  2736                         var dx=0;

  2737                         var dy= prevbox.y;

  2738                         

  2739                       

  2740                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2741                

  2742                ///////////////

  2743                

  2744                 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  2745                 

  2746    

  2747                     

  2748                         if(distx<1){distx=1;}    

  2749 			

  2750          		

  2751 			if(disty<1){disty=1;}

  2752                         

  2753 			tw=distx;

  2754 			th=disty;

  2755 

  2756 			

  2757 		}

  2758 

  2759 		if(scaleType== 'ne'){  

  2760 		        

  2761 			trans_ShareScale=shareScale+","+shareScale;   

  2762 			

  2763 	                var angle_diagonal=ang2v(prevbox.x,prevbox.y+prevbox.height,prevbox.x+prevbox.width,prevbox.y)

  2764       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  2765  		

  2766 			

  2767 				

  2768 			

  2769                         var ax= prevbox.x;

  2770                         var ay= prevbox.y+prevbox.height;

  2771                         var bx= prevbox.x+prevbox.width; 

  2772                         var by= prevbox.y;

  2773                        

  2774                         var cx= toX;

  2775                         var cy= toY;   

  2776                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  2777                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2)); 

  2778 

  2779 

  2780                       this.editor.log(angle_diagonal);

  2781 

  2782       

  2783                 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  2784                 

  2785                                          

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

  2787                  var tracker = document.getElementById('tracker');

  2788 

  2789                 //////////

  2790                 var tx= prevbox.x;

  2791                 var ty= section_a[2];

  2792                 

  2793                         var ax= section_a[1];

  2794                         var ay= section_a[2];

  2795                         var bx= 0;

  2796                         var by= section_a[2] ; 

  2797                         

  2798                         var cx=prevbox.x; 

  2799                         var cy= prevbox.y;

  2800 

  2801                         var dx= prevbox.x;  

  2802                         var dy= 0;

  2803                         

  2804                       

  2805                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2806                

  2807                /////////////////

  2808                

  2809                

  2810                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  2811 

  2812              

  2813                         var ax= section_a[1];

  2814                         var ay= section_a[2];

  2815                         var bx= section_a[1]; 

  2816                         var by= 0; 

  2817                         

  2818                         var cx= prevbox.x; 

  2819                         var cy= prevbox.y+prevbox.height; 

  2820 

  2821                         var dx=0;

  2822                         var dy= prevbox.y+prevbox.height;

  2823                         

  2824                       

  2825                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2826                

  2827                ///////////////

  2828                

  2829                 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  2830                 

  2831 

  2832                     

  2833                         if(distx<1){distx=1;}    

  2834 			

  2835          		

  2836 			if(disty<1){disty=1;}

  2837                         //document.forms[0].code.value=distx+' '+disty;

  2838 			tw=distx;

  2839 			th=disty;

  2840 			

  2841 			

  2842 			

  2843 			

  2844 			

  2845 		}

  2846 		if(scaleType== 'sw'){

  2847 			trans_ShareScale=shareScale+","+shareScale;  

  2848 			

  2849 			

  2850 				

  2851 			

  2852 	                var angle_diagonal=ang2v(prevbox.x,prevbox.y+prevbox.height,prevbox.x+prevbox.width,prevbox.y)

  2853       			//var angle_diagonal=getAngle(prevbox.width,prevbox.height);

  2854  		

  2855 			

  2856 				

  2857 			

  2858                         var ax= prevbox.x;

  2859                         var ay= prevbox.y+prevbox.height;

  2860                         var bx= prevbox.x+prevbox.width; 

  2861                         var by= prevbox.y;

  2862                        

  2863                         var cx= toX;

  2864                         var cy= toY;   

  2865                         var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2)); 

  2866                         var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2)); 

  2867 

  2868 

  2869                       this.editor.log(angle_diagonal);

  2870 

  2871       

  2872                 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);   

  2873                 

  2874                                          

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

  2876                  var tracker = document.getElementById('tracker');

  2877 

  2878                 //////////

  2879                 var tx= section_a[1];

  2880                 var ty= prevbox.y;

  2881                 

  2882                         var ax= section_a[1];

  2883                         var ay= section_a[2];

  2884                         var bx= 0;

  2885                         var by= section_a[2] ; 

  2886                         

  2887                         var cx=prevbox.x+prevbox.width; 

  2888                         var cy= prevbox.y+prevbox.height;

  2889 

  2890                         var dx= prevbox.x+prevbox.width;  

  2891                         var dy= 0;

  2892                         

  2893                       

  2894                 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2895                 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);         

  2896 

  2897                /////////////////             

  2898                         var ax= section_a[1];

  2899                         var ay= section_a[2];

  2900                         var bx= section_a[1];

  2901                         var by= 0; 

  2902                           

  2903                         var cx= prevbox.x; 

  2904                         var cy= prevbox.y; 

  2905 

  2906                         var dx=0;

  2907                         var dy= prevbox.y;

  2908                         

  2909                       

  2910                 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);

  2911                   var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);         

  2912               ///////////////

  2913                 

  2914    

  2915                     

  2916                         if(distx<1){distx=1;}    

  2917 			

  2918          		

  2919 			if(disty<1){disty=1;}

  2920                         //document.forms[0].code.value=distx+' '+disty;

  2921 			tw=distx;

  2922 			th=disty;

  2923 			

  2924 		}

  2925 

  2926 	}  

  2927 

  2928 

  2929 

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

  2931   { 

  2932     //alert(data[0]);     

  2933    shape.setAttributeNS(null,'x',tx);

  2934     shape.setAttributeNS(null,'y',ty);   

  2935     shape.setAttributeNS(null, 'width', tw);     

  2936     shape.setAttributeNS(null, 'height', th); 

  2937     

  2938    //shape.nodparseFloatue=data;

  2939   }

  2940    else 

  2941  if(shape.tagName == 'text')

  2942   { 

  2943     

  2944     var tsize=shape.getAttributeNS(null, 'font-size') ;

  2945     tsize=eval(tsize);

  2946     //shape.setAttributeNS(null, 'x', tx + 'px');

  2947     //shape.setAttributeNS(null, 'y', ty + 'px'); 

  2948     //var mysize=box.height+1 ;

  2949     var mysize=parseInt(Math.round(th));

  2950     

  2951     if(scaleType== 'ne'){ shape.setAttributeNS(null, 'font-size',tsize+1);}  

  2952       //shape.setAttributeNS(null, 'font-size', mysize);  

  2953       

  2954    

  2955    /*

  2956     shape.setAttributeNS(null,'x',tx);

  2957     shape.setAttributeNS(null,'y',ty);   

  2958     shape.setAttributeNS(null, 'width', tw);     

  2959     shape.setAttributeNS(null, 'height', th); 

  2960     

  2961     //previus.setAttributeNS(null,'transform', "scale("+trans_ShareScale+")");

  2962     shape.setAttributeNS(null, 'x', tx + 'px');

  2963     shape.setAttributeNS(null, 'y', ty + 'px');

  2964 

  2965     shape.setAttributeNS(null, 'textLength', parseInt(Math.round(tw)));    

  2966     

  2967      */

  2968   } 

  2969    else 

  2970  if(shape.tagName == 'ellipse')

  2971   {

  2972     //shape.getAttributeNS(null, 'transform)

  2973     shape.setAttributeNS(null, 'cx', (tx + (box.width / 2)) + 'px');

  2974     shape.setAttributeNS(null, 'cy', (ty + (box.height / 2)) + 'px');

  2975     shape.setAttributeNS(null, 'rx', (tw / 2) + 'px');

  2976     shape.setAttributeNS(null, 'ry', (th / 2) + 'px');   

  2977  

  2978         

  2979   }

  2980    else 

  2981  if(shape.tagName == 'line')

  2982   { 

  2983     shape.setAttributeNS(null, 'x1', tx + 'px');

  2984     shape.setAttributeNS(null, 'y1', ty + 'px');

  2985     shape.setAttributeNS(null, 'x2', tx + tw + 'px');

  2986     shape.setAttributeNS(null, 'y2', ty + th + 'px');  

  2987          

  2988   }

  2989    else

  2990  if (shape.tagName == 'polyline') 

  2991   {

  2992    

  2993   }

  2994    else 

  2995  if (shape.tagName == 'image') 

  2996   {   

  2997     shape.setAttributeNS(null,'x',tx);

  2998     shape.setAttributeNS(null,'y',ty);   

  2999     shape.setAttributeNS(null, 'width', tw);     

  3000     shape.setAttributeNS(null, 'height', th); 

  3001       

  3002   }

  3003    else 

  3004  if (shape.tagName == 'path')

  3005   {     

  3006      // var xscale=  box.width/tw;

  3007      // var yscale=  box.height/th;  

  3008       var xscale=  tw/box.width;

  3009       var yscale=  th/box.height;  

  3010       var xinc=xscale;//dist*angx;

  3011       var yinc=yscale/ty;//dist*angy;   

  3012 

  3013    if(scaleType== 'n')

  3014     {

  3015        tx=box.x+(box.width/2);

  3016        ty=box.y+box.height; 

  3017        var xinc=1;

  3018        var yinc=box.y/toY;//dist*angy;   

  3019 

  3020     } 

  3021    if(scaleType== 's')

  3022     {

  3023        tx=box.x+(box.width/2);

  3024        ty=box.y; 

  3025        var xinc=1;

  3026        var yinc=toY/(box.y+box.height);//dist*angy;   

  3027     }    

  3028    if(scaleType== 'e')

  3029     {

  3030        tx=box.x;

  3031        ty=box.y+(box.height/2);  

  3032        var xinc=toX/(box.x+box.width);

  3033        var yinc=1;   

  3034 

  3035     }         

  3036    if(scaleType== 'w')

  3037     {

  3038        tx=box.x+box.width;

  3039        ty=box.y+(box.height/2); 

  3040        var xinc=box.x/toX;

  3041        var yinc=1;   

  3042 

  3043     }

  3044    if(scaleType== 'ne')

  3045     {

  3046        tx=box.x;

  3047        ty=box.y+box.height; 

  3048        var xinc=toX/(box.x+box.width);

  3049        var yinc=xinc;   

  3050     }  

  3051   if(scaleType== 'nw')

  3052     {

  3053        tx=box.x+box.width;

  3054        ty=box.y+box.height; 

  3055        var xinc=box.x/toX;

  3056        var yinc=xinc;   

  3057     } 

  3058    if(scaleType== 'se')

  3059     {

  3060        tx=box.x;

  3061        ty=box.y; 

  3062        var xinc=toX/(box.x+box.width);

  3063        var yinc=xinc;   

  3064     }    

  3065    if(scaleType== 'sw')

  3066     {

  3067        tx=(box.x+box.width);

  3068        ty=box.y; 

  3069        var xinc=box.x/toX;

  3070        var yinc=xinc;   

  3071     }        

  3072       if(xinc==0){ xinc= 0.0000001;}

  3073       if(yinc==0){ yinc= 0.0000001; }

  3074       var prevpath=previus.getAttributeNS(null, 'd');

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

  3076 ////////////

  3077 

  3078 

  3079       //xshe=left;

  3080       //yshe=top;

  3081        

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

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

  3084  var ps =path.split(" ")

  3085  var pcc = "";

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

  3087 

  3088 

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

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

  3091  

  3092 

  3093  var ang= ang2v(box.x,box.y,tx,ty) ;

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

  3095  var angx = Math.cos(ang); 

  3096  var angy = Math.sin(ang);          

  3097  var dist= dist2p(tx,ty,box.x,box.y);

  3098  //var xinc=xscale;//dist*angx;

  3099  //var yinc=yscale;//dist*angy;   

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

  3101     var axis = $V([tx,ty]);

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

  3103   { 

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

  3105      

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

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

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

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

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

  3111        

  3112        //if (isNaN(valnum)) 

  3113       if (!char1.match(re))        

  3114        { 

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

  3116            var text=char1;

  3117        }else{ 

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

  3119           {

  3120             var num0= point[0];

  3121           }else{  

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

  3123           }  

  3124          var text='';

  3125 

  3126        }

  3127  

  3128        

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

  3130         {   

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

  3132         }

  3133         else

  3134         {    

  3135          

  3136           //num0*=xinc;    

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

  3138           //point[1]*=yinc;

  3139           var pointIni=$V([num0,point[1],1]);

  3140           var matrT = $M([[1,0,-tx],[0,1,-ty],[0,0,1]]);

  3141           var matrS = $M([[xinc,0,0],[0,yinc,0],[0,0,1]]); 

  3142           var matrR = $M([[1,0,tx],[0,1,ty],[0,0,1]]);

  3143           var matr1= matrT.x(pointIni);  

  3144           var matr2= matrS.x(matr1);

  3145           //var pointR=pointIni.Random(1) 

  3146           //var pointR=pointIni.rotate(Math.PI/180,axis);

  3147           //var pointRc=pointIni.cross(axis); 

  3148           //var pointR=matr2;

  3149           var pointR=matrR.x(matr2);  

  3150           num0=pointR.elements[0];

  3151            point[1]=pointR.elements[1];

  3152            $('code').value=pointIni.elements[0]+','+pointR.elements[1]+' ';

  3153         }  

  3154        var cx=num0; 

  3155         var cy=point[1];   

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

  3157         //pcc+=text+cx+','+cy+' '; 

  3158        

  3159    }else{

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

  3161    }

  3162   }

  3163   

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

  3165 

  3166 

  3167 

  3168 //////////////

  3169 /*

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

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

  3172  var ps =path.split(" ")

  3173  var pcc = "";

  3174 

  3175  var xinc=tx-prevbox.x;

  3176  var yinc=ty-prevbox.y;

  3177   

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

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

  3180   { 

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

  3182      

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

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

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

  3186        

  3187        // var valnum =char1.charAt(0); 

  3188        //if (isNaN(valnum))

  3189        if (!char1.match(re)) 

  3190         

  3191        {

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

  3193          var text=char1;

  3194        }else{

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

  3196          var text='';

  3197 

  3198        }

  3199        //num0+=dist*angx;

  3200        //point[1]+=dist*angy;

  3201          num0*=xscale;

  3202         point[1]*=yscale;   

  3203         

  3204       // num0+=xinc;

  3205       // point[1]+=yinc;

  3206        

  3207       

  3208         

  3209         var cx=num0;

  3210         var cy=point[1]; 

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

  3212    }else{

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

  3214    }

  3215   }

  3216 

  3217 

  3218    

  3219     

  3220   

  3221    // $('code').value=dist+' '+ ang+' '+'__'+x+'= '+left+'/ '+y+'= ' +top+'';

  3222     

  3223        //shape.setAttributeNS(null,'transform', "rotate("+left+")");

  3224        

  3225        // shape.setAttributeNS(null,'transform', "translate("+trax+","+tray+") rotate("+0+") scale(1,1)");

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

  3227 

  3228     

  3229     

  3230     

  3231     

  3232     

  3233     

  3234        //document.forms[0].code.value='';

  3235        //shape.setAttributeNS(null,'transform', "scale("+trans_ShareScale+")"); 

  3236  */      

  3237 

  3238   }  

  3239    	                             

  3240 

  3241 

  3242 

  3243 

  3244 

  3245 

  3246 

  3247 	

  3248 	

  3249 	

  3250 	

  3251 	

  3252 //$('status').innerHTML=typeTransform+': '+shareScale;  

  3253        

  3254   

  3255 };

  3256 

  3257 

  3258 SVGRenderer.prototype.rotateShape = function(shape, previus, toX, toY) {

  3259  

  3260     //document.getElementById('richdraw').style.cursor='e-resize';

  3261      	 var box = shape.getBBox();  

  3262 	 var prevbox=previus.getBBox();

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

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

  3265 	var coord=this.editor.inputxy;

  3266 

  3267        var actual_angle=ang2v(centerx,centery,coord[0], coord[1]);

  3268        

  3269        if(xrot<toX) { rotatexxx+=1;}else{rotatexxx-=1;}

  3270        xrot=toX;

  3271        yrot=toY;  

  3272        

  3273 	var xtr=0;

  3274         var ytr=0;

  3275                 

  3276         var box= shape.getBBox();  

  3277         var tr1x=  box.x;  

  3278          var tr1y=  box.y;

  3279 

  3280  

  3281  

  3282     toX+=xtr;

  3283         toY+=xtr;

  3284 

  3285       //var trax=parseFloat(toX-box.x);   var tray= parseFloat(toY-box.y);      

  3286       var trax=parseFloat(box.x/2);   var tray= parseFloat(box.y/2); 

  3287        var angler=Math.atan2(toX,toY);

  3288          var angle=angler*180/Math.PI;  

  3289           var T = shape.getCTM(); 

  3290           var rotini=T.a*(180 / Math.PI);

  3291                    var angle=rotini*180/Math.PI;

  3292           var rot_angle=actual_angle*180/Math.PI;  

  3293           this.editor.log(centerx+' '+centery+' '+coord[0]+' '+coord[1]+'____ '+rot_angle+' '+actual_angle*180/Math.PI);

  3294           

  3295           

  3296          // matrix( a, b, c, d, e, f )

  3297          // a c e

  3298          // b d f

  3299          // 0 0 1

  3300          //a scale factor of 2, a rotation of 30 deg and a translation of (500,50)

  3301          //T     1.732   -1   500     1   1.732   50     0   0   1

  3302          //T      1  ad-bc      d  -c -de+cf   -b  a  be-df    0   0   1

  3303          

  3304          //shape.setAttributeNS(null,'transform', "translate("+(-xshe)+","+(-yshe)+")");

  3305  

  3306          // shape.setAttributeNS(null,"transform", "  matrix( a, b, c, d, e, f )");

  3307           // shape.setAttributeNS(null,'transform', "translate("+(box.x+(box.width/2))+","+(box.y+(box.height/2))+")  rotate("+rotatexxx+") ");

  3308            //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))+") ");

  3309          //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+","+(box.x+(box.width/2))+","+(box.y+(box.height/2))+")");

  3310          //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+","+(prevbox.x+(prevbox.width/2))+","+(prevbox.y+(prevbox.height/2))+")");

  3311          shape.setAttributeNS(null,'transform', "rotate("+rot_angle+","+(prevbox.x+(prevbox.width/2))+","+(prevbox.y+(prevbox.height/2))+")");

  3312                           

  3313          

  3314          //alert('[  ['+T.a+'  '+T.c+'  '+T.e+']  ['+T.b+'  '+T.d+'  '+T.f+']  [0  0  1]  ]');

  3315         //a,b,c,d,e,f  

  3316            

  3317           // shape.setAttributeNS(null,'transform', 'matrix('+T.a+', '+T.b+', '+ T.c+', '+ T.d+', '+ T.e+', '+ T.f+')' );

  3318           

  3319           var x1=T.e;

  3320           var y1=T.f;

  3321           var sp = Math.sin(rotatexxx*(Math.PI / 180));

  3322           var cp = Math.cos(rotatexxx*(Math.PI / 180));

  3323           var x2 = 0 + r*rotatexxx*(Math.PI / 180);

  3324           var y2 = 0;

  3325           var r=0; 

  3326            

  3327           var a=cp;

  3328           var c=sp;

  3329           var e=T.e;

  3330           var b=T.b;

  3331           var d=(-x1*cp+y1*sp+x2); 

  3332           var f=(-x1*sp-y1*cp+y2);

  3333       

  3334       var inv=T.inverse;  

  3335       var inv_mat=T.multiply(inv); 

  3336        //var matrix = "matrix(" + cp +"," + sp + "," + (-sp) + "," + cp + ","+ (-x1*cp+y1*sp+x2) + ","+ (-x1*sp-y1*cp+y2) + ")";

  3337        //var matrix = "matrix(" + a +"," + c + "," + e + "," + b + ","+ d + ","+ f + ")";

  3338       var matrix='matrix('+inv_mat.a+' '+inv_mat.b+' '+inv_mat.c+' '+inv_mat.d+' '+inv_mat.e+' '+inv_mat.f+')'

  3339       

  3340        //++ shape.setAttributeNS(null,'transform',matrix); 

  3341         

  3342         //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+")"); 

  3343         // shape.setAttributeNS(null,'transform', "translate("+(box.x)+","+(box.y)+")");

  3344         

  3345          //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+")");

  3346                //shape.setAttributeNS(null, 'x', -box.width/2 + 'px');

  3347                //shape.setAttributeNS(null, 'y', -box.height/2 + 'px');

  3348          //shape.setAttributeNS(null,"transform", "matrix("+Math.cos(angle)+", "+Math.sin(angle)+", "+Math.sin(-angle)+", "+Math.cos(angle)+", 0, 0 )");

  3349            //shape.setAttributeNS(null,'transform', "rotate("+10+")"); 

  3350    

  3351                //shape.setAttributeNS(null, 'x', box.width/2 + 'px');

  3352                //shape.setAttributeNS(null, 'y', box.height/2 + 'px');

  3353       

  3354                 

  3355   

  3356           //$('status').innerHTML = 'Mode: Draw '+pointshape +'_'+xsh +' '+ ysh+' '+trshape;

  3357           

  3358   //$('status').innerHTML=typeTransform+': '+rotatexxx;  

  3359     

  3360 };

  3361 

  3362 

  3363 

  3364 // x(u) = x0*(1-u) + x1*u = x0 + (x1-x0)*u

  3365 // y(u) = y0*(1-u) + y1*u = y0 + (y1-y0)*u

  3366       

  3367 

  3368 

  3369 SVGRenderer.prototype.getshapes = function(){

  3370 return this.svgRoot.childNodes;

  3371 } 

  3372 

  3373 SVGRenderer.prototype.reflect = function(HorV) {

  3374    var shape= c.selected; 

  3375    var box = shape.getBBox();  

  3376     

  3377  if(shape.tagName=="path")

  3378   {

  3379   

  3380       var tx=box.x+(box.width/2);

  3381       var ty=box.y+(box.height/2);  

  3382     

  3383     if(HorV=='V'){  

  3384        var xinc=-1;

  3385        var yinc=1;   

  3386      }

  3387     if(HorV=='H'){  

  3388        var xinc=1;

  3389        var yinc=-1;   

  3390      }

  3391 

  3392 

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

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

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

  3396    var ps =path.split(" ")

  3397    var pcc = "";

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

  3399 

  3400 

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

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

  3403  

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

  3405     var axis = $V([tx,ty]);

  3406 

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

  3408     { 

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

  3410      

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

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

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

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

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

  3416        

  3417        //if (isNaN(valnum)) 

  3418       if (!char1.match(re))        

  3419        { 

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

  3421            var text=char1;

  3422        }else{ 

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

  3424           {

  3425             var num0= point[0];

  3426           }else{  

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

  3428           }  

  3429          var text='';

  3430 

  3431        }

  3432  

  3433        

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

  3435         {   

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

  3437         }

  3438         else

  3439         {    

  3440          

  3441           //num0*=xinc;    

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

  3443           //point[1]*=yinc;

  3444           var pointIni=$V([num0,point[1],1]);

  3445           var matrT = $M([[1,0,-tx],[0,1,-ty],[0,0,1]]);

  3446           var matrS = $M([[xinc,0,0],[0,yinc,0],[0,0,1]]); 

  3447           var matrR = $M([[1,0,tx],[0,1,ty],[0,0,1]]);

  3448           var matr1= matrT.x(pointIni);  

  3449           var matr2= matrS.x(matr1);

  3450           //var pointR=pointIni.Random(1) 

  3451           //var pointR=pointIni.rotate(Math.PI/180,axis);

  3452           //var pointRc=pointIni.cross(axis); 

  3453           //var pointR=matr2;

  3454           var pointR=matrR.x(matr2);  

  3455           num0=pointR.elements[0];

  3456            point[1]=pointR.elements[1];

  3457            $('code').value=pointIni.elements[0]+','+pointR.elements[1]+' ';

  3458         }  

  3459        var cx=num0; 

  3460         var cy=point[1];   

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

  3462         //pcc+=text+cx+','+cy+' '; 

  3463        

  3464      }else{

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

  3466      }

  3467     } 

  3468     var svg =shape.cloneNode(false); 

  3469     svg.setAttributeNS(null,'d', pcc);  

  3470     this.svgRoot.appendChild(svg); 

  3471     return svg;

  3472  }

  3473   else

  3474  { 

  3475   if(shape.tagName=="text" || shape.tagName=="image" )

  3476   {

  3477 

  3478   

  3479     var tr='';  

  3480     var turn0='';

  3481     var svg =shape.cloneNode(false); 

  3482     var x= shape.getAttributeNS(null, 'x');

  3483     var y= shape.getAttributeNS(null, 'y');  

  3484     x+=box.width/2;

  3485     y+=box.height/2;

  3486     if(HorV=='V')

  3487      {  

  3488        svg.setAttributeNS(null,'x',-parseFloat(x));  

  3489        var scaleSim='-1, 1';

  3490        svg.setAttributeNS(null,'transform','scale('+scaleSim+')');  

  3491        //svg.setAttributeNS(null,'y',parseFloat(x));  

  3492        svg.setAttributeNS(null,'x',-parseFloat(x));  

  3493 

  3494 

  3495      }

  3496     if(HorV=='H')

  3497      {  

  3498        var scaleSim='1, -1';

  3499        svg.setAttributeNS(null,'y',-parseFloat(y));  

  3500        svg.setAttributeNS(null,'transform','scale('+scaleSim+')');  

  3501        //svg.setAttributeNS(null,'x',parseFloat(x));  

  3502        svg.setAttributeNS(null,'y',-parseFloat(y));  

  3503 

  3504 

  3505      } 

  3506 

  3507     if(shape.hasAttributeNS(null, 'transform'))

  3508      { 

  3509       tr=shape.getAttributeNS(null, 'transform');  

  3510       turn0=GetString(tr,'rotate(',')');

  3511 

  3512       svg.setAttributeNS(null,'transform','rotate('+turn+'),scale('+scaleSim+')');  

  3513       svg.setAttributeNS(null,'x',parseFloat(x));  

  3514       svg.setAttributeNS(null,'y',parseFloat(y));  

  3515       

  3516       //svg.setAttributeNS(null,'transform','rotate('+turn+'),scale('+'');  

  3517      }else{

  3518        

  3519      }   

  3520      

  3521     

  3522     

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

  3524         var text=shape.textContent ; 

  3525         svg.textContent=text;     

  3526      }

  3527      //svg.setAttributeNS(null,'writing-mode',mode); 

  3528      //svg.setAttributeNS(null,'glyph-orientation-horizontal','0deg');

  3529      //

  3530      //svg.appendChild(text); 

  3531    

  3532      this.svgRoot.appendChild(svg); 

  3533      return svg;

  3534   }

  3535   else

  3536   {

  3537   if(shape.hasAttributeNS(null, 'transform'))

  3538    { 

  3539    

  3540      

  3541      var tr=shape.getAttributeNS(null, 'transform');  

  3542      var turn0=GetString(tr, 'rotate(',',');

  3543      turn0=parseFloat(turn0); 

  3544      //alert(turn0);

  3545      

  3546      if(HorV=='V'){  

  3547        var angle=180;

  3548        //var turn=(turn0+angle)-(turn0-90);  

  3549        var turn=turn0+((angle-turn0)*2); 

  3550      }

  3551     if(HorV=='H'){  

  3552        var angle=90;

  3553        var turn=turn0+((angle-turn0)*2);   

  3554      }       

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

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

  3557      //this.editor.log(centerx+' '+centery+' '+coord[0]+' '+coord[1]+'____ '+rot_angle+' '+actual_angle*180/Math.PI);

  3558      var svg =shape.cloneNode(false); 

  3559      svg.setAttributeNS(null,'transform', "rotate("+turn+","+centerx+","+centery+")");

  3560      this.svgRoot.appendChild(svg); 

  3561     return svg;

  3562    }

  3563     else

  3564    {  

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

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

  3567      shape.setAttributeNS(null,'transform', "rotate("+180+","+centerx+","+centery+")");

  3568 

  3569    }

  3570   } 

  3571  }

  3572 };

  3573 //http://dev.opera.com/articles/view/svg-evolution-2-our-first-steps-into-sv/?page=3

  3574 //http://www.w3.org/TR/2000/03/WD-SVG-20000303/exchange.html#StylingAttributes

  3575 //http://www.xml.com/lpt/a/1390

  3576 

  3577 

  3578 

  3579 

  3580 

  3581 

  3582 

  3583 //http://xml-utils.com/conferencia-svg.html#d0e527

  3584 //http://www.xml.com/lpt/a/1321

  3585 //http://phrogz.net/objjob/object.asp?id=101

  3586 //http://admisource.gouv.fr/plugins/scmcvs/cvsweb.php/Cassini-ihm/js-yosemite/mapApp.js?rev=1.1;cvsroot=cassini

  3587 //http://groups.google.com/group/prototype-graphic/msg/0547c0caea8869c6 

  3588 //http://sylvester.jcoglan.com/
author	Robert McIntyre <rlm@mit.edu>
date	Tue, 22 Jun 2010 20:15:19 -0400
parents	26c2b3ad21c7
children