Mercurial > laserkard

     1 //----------------------------------------------------------------------------

     2 // VMLRENDERER 1.0

     3 // VML Renderer For RichDraw

     4 // Dependencies:

     5 // History:

     6 // 2006-04-05 | Created

     7 // --------------------------------------------------------------------------*/

     8 

     9 

    10 function VMLRenderer() {

    11 	this.base = AbstractRenderer;

    12 }

    13 

    14 

    15 VMLRenderer.prototype = new AbstractRenderer; 

    16 

    17 VMLRenderer.prototype.bounds = function(shape) {

    18   var rect = new Object();

    19   rect['x'] = shape.offsetLeft;

    20   rect['y'] = shape.offsetTop;

    21   rect['width'] =  shape.offsetWidth;

    22   rect['height'] = shape.offsetHeight;

    23   return rect;

    24 }

    25 

    26 VMLRenderer.prototype.init = function(elem) 

    27  {

    28   this.container = elem;

    29   // this.container.style.overflow = 'hidden';

    30   this.container.unselectable = "on";

    31   // Add VML includes and namespace

    32   elem.ownerDocument.namespaces.add("v", "urn:schemas-microsoft-com:vml");

    33   var style = elem.ownerDocument.createStyleSheet();

    34   style.addRule('v\\:*', "behavior: url(#default#VML); display:inline-block");

    35   //NOT VML biewBox

    36   //http://blogs.msdn.com/ie/archive/2008/03/18/webbrowser-control-rendering-modes-in-ie8.aspx 

    37 

    38  } 

    39 

    40 

    41 

    42 

    43 var proporx=1;

    44 var propory=1;

    45 

    46 VMLRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {

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

    48        

    49   var margin=100; 

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

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

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

    53   tokensCanvas= tC.split(' '); 

    54 

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

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

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

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

    59   var wCanvas = wFront;

    60   var hCanvas = hFront;

    61   proporImage = hImage / wImage; 

    62   proporCanvas = hCanvas / wCanvas; 

    63 

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

    65 

    66 

    67   if(bgcolor != '')

    68    {

    69     this.container.style.backgroundColor=bgcolor;

    70    } else{

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

    72    }

    73 if(viewMode=='preview')

    74  {

    75   if(proporCanvas==proporImage)

    76    {

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

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

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

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

    81       canvasLeft = 0;

    82    canvasTop = 0; 

    83    canvasWidth =wFront ;

    84    canvasHeight = hFront; 

    85    zoominit1= 0+' '+0+' '+wFront+' '+hFront;

    86    zoominit = viewBox;

    87    zoominit2 = zoominit1;  

    88   

    89   

    90    proporx = 1;

    91    propory = 1;

    92    

    93    }

    94   if(proporCanvas<proporImage)

    95    {    

    96       var proportion= wFront/hFront;  

    97       //var image_proportion= width/height;

    98       var image_proportion= w/h;

    99       var W=hFront*image_proportion; 

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

   101       

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

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

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

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

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

   107    canvasLeft = leftover;

   108    canvasTop = 0; 

   109    canvasWidth =W ;

   110    canvasHeight = hFront; 

   111    zoominit1= viewBox;//leftover+' '+0+' '+W+' '+hFront;

   112    zoominit1=0+' '+0+' '+W+' '+hFront;    

   113    zoominit = viewBox;

   114    zoominit2 = zoominit1;  

   115   

   116   

   117    proporx = W/w;

   118    propory = hFront/h;

   119    

   120  

   121     } 

   122   if(proporCanvas>proporImage)

   123    {    

   124       var proportion= hFront/wFront;  

   125       //var image_proportion= width/height;

   126       var image_proportion= h/w;

   127       var H=wFront*image_proportion; 

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

   129       

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

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

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

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

   134       

   135    canvasLeft = 0;

   136    canvasTop = leftover; 

   137    canvasWidth = wFront;

   138    canvasHeight = H; 

   139    //zoominit1 = 0+' '+leftover+' '+wFront+' '+H;

   140    zoominit1 = 0+' '+0+' '+wFront+' '+H;    

   141    zoominit = viewBox;

   142    zoominit2 = viewBox;//zoominit1;  

   143 

   144    proporx = wFront/w;

   145    propory = H/h;

   146  

   147     }   

   148      // proporx = width/tokens[2];

   149      //propory = height/tokens[2];

   150 

   151 

   152    

   153   } 

   154 if(viewMode=='canvas')

   155  {

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

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

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

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

   160    

   161    //  margins 10%    

   162    var percent=10;

   163    var percentX = wImage / percent; 

   164    var percentY = hImage / percent; 

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

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

   167    var percentRectW=wImage + percentX*2;

   168    var percentRectH=hImage + percentY*2; 

   169  

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

   171    // ajust proporImage to proporCanvas

   172   if(proporCanvas==proporImage)

   173    {  

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

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

   176       var wi=percentRectW;

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

   178       zoominit=viewBox;

   179       zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;

   180       proporx =(w*(100-percent*2)/100)/w;

   181       propory =( h*(100-percent*2)/100)/h; 

   182       zoominit2=zoominit1; 

   183       tokensZoom=tokensCanvas;//viewBox.split(' '); ;//zoominit1.split(' '); 

   184       

   185    }

   186 

   187   if(proporCanvas<proporImage)

   188    {    

   189         

   190         // add to hImage

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

   192         var diffImages=newWimage-w;

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

   194         var wi=newWimage;

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

   196         zoominit=viewBox;

   197         //zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;

   198       //zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;

   199       proporx =wFront/wi;

   200       propory = wFront/wi; 

   201       var invPropor =wi/ wFront; 

   202      zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;

   203       zoominit2=zoominit1; 

   204       var tZ = (invPropor*cornerNEx) +' '+(invPropor*cornerNEy)+' '+wi+' '+he;

   205 

   206        

   207         tokensZoom=tokensCanvas;//tZ.split(' ');//viewBox.split(' '); ;//zoominit1.split(' ');  

   208      }

   209   if(proporCanvas>proporImage)

   210    {    

   211         // add to hImage

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

   213         var diffImages=newHimage-h;

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

   215         var wi=percentRectW;

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

   217         zoominit=viewBox;                                    

   218       proporx =wFront/wi;

   219       propory = wFront/wi; 

   220      

   221      zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;

   222      zoominit2=zoominit1; 

   223      tokensZoom=zoominit1.split(' '); 

   224  

   225    } 

   226 

   227 

   228   }

   229 }

   230 

   231 

   232 

   233 VMLRenderer.prototype.zoomFrame = function(zoom){ 

   234    myOPF.viewBox=zoom;  

   235    load(myOPF,c);

   236    document.getElementById("source").value=myOPF.toJSONString();

   237 }

   238 VMLRenderer.prototype.rectDoc = function(viewBox) {

   239      var tokens2 = zoominit2.split(' ');    

   240      var tokens = zoominit.split(' ');

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

   242   if (shape) {

   243     this.remove(shape);

   244   } 

   245   var rect=this.container.ownerDocument.createElement('v:rect');

   246   rect.id='rectDoc';

   247   rect.style.position = 'absolute';

   248   rect.style.left =-parseInt(tokens2[0]); 

   249   rect.style.top = -parseInt(tokens2[1]);

   250   rect.style.width = parseInt(tokens[2]);

   251   rect.style.height = parseInt(tokens[3]);

   252   rect.setAttribute('filled', 'false');

   253    rect.setAttribute('stroked', 'true'); 

   254   rect.setAttribute('strokeweight', 2); 

   255   rect.setAttribute('strokecolor',"#ff0000"); 

   256    //this.container.appendChild(rect);

   257    //this.container.insertBefore(rect, this.container.firstChild );

   258   //alert(docx+' '+docy+' '+docw+' '+doch+' '+viewBox) 

   259 }   

   260 VMLRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {

   261   

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

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

   264   if (shape) {

   265     this.remove(shape);

   266   }

   267   

   268   var rect=this.container.ownerDocument.createElement('v:rect');

   269   rect.id='rectBackground'; 

   270   rect.style.position = 'absolute';

   271   rect.style.left = tokens[0] ;

   272   rect.style.top =tokens[1];

   273   rect.style.width=tokens[2];

   274   rect.style.height= tokens[3] ;  

   275   rect.setAttribute('filled', 'true');

   276   rect.setAttribute('fillcolor',"#666666"); 

   277   rect.setAttribute('stroked', 'false');  

   278   

   279    this.container.insertBefore(rect, this.container.firstChild );

   280   

   281 }

   282 

   283 VMLRenderer.prototype.removeAll = function(){

   284 	while (this.container.hasChildNodes()) {

   285 		this.container.removeChild(this.container.firstChild);

   286 	}

   287 }   

   288 

   289 function VMLviewBox(container,left,top,width,height){

   290   var tokens = zoominit2.split(' ');  

   291   left *= proporx;

   292   left = left - parseFloat(tokens[0]);

   293   top *= propory; 

   294   top = top - parseFloat(tokens[1]);   

   295   width *= proporx;

   296   height *= propory; 

   297   

   298   return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};

   299 }   

   300 function VMLviewBox1(container,left,top,width,height){

   301   var tokens = zoominit2.split(' ');  

   302   left *= proporx;

   303   left = left - parseFloat(tokens[0]);

   304   top *= propory; 

   305   top = top - parseFloat(tokens[1]);   

   306   width *= proporx;

   307   height *= propory; 

   308   

   309   return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};

   310 }   

   311 

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

   313    var tokens = zoominit2.split(' ');  

   314 

   315    var zoom=VMLviewBox(this.container,left,top,width,height);

   316    

   317    left=zoom.x;  

   318    top=zoom.y;

   319    width=zoom.w;

   320    height=zoom.h;

   321 

   322    var zoom=VMLviewBox(this.container,left,top,textSize,textSize);

   323    //if(zoom.w<1){zoom.w=1}    

   324    if(zoom.y== undefined){left=0}

   325    if(zoom.x== undefined){top=0} 

   326    if(zoom.w== undefined){width=0}   

   327    if(zoom.h== undefined){height=0}

   328    textSize=zoom.h;  

   329 

   330    var zoom=VMLviewBox(this.container,left,top,lineWidth*2/3,lineWidth);

   331    //if(zoom.w<1){zoom.w=1}

   332    lineWidth=zoom.w;  

   333    var vml;

   334  var shap=1;

   335   if (shape == 'rect') { 

   336   

   337     vml = this.container.ownerDocument.createElement('v:rect');  

   338     vml.style.position = 'absolute';

   339     vml.style.left = left; 

   340     vml.style.top = top;

   341     vml.style.width = width;

   342     vml.style.height = height;

   343   }

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

   345             vml = this.container.ownerDocument.createElement('v:roundrect'); 

   346             vml.style.position = 'absolute';

   347             vml.style.left = left;

   348             vml.style.top = top;

   349             vml.style.width = width;    

   350             vml.style.height = height;

   351             vml.setAttribute('arcsize', '20%');   

   352             

   353   }

   354   else if (shape == 'ellipse') {

   355     vml = this.container.ownerDocument.createElement('v:oval');  

   356     vml.style.left = left;

   357     vml.style.top = top;

   358     vml.style.width = width; 

   359     vml.style.height = height;

   360     vml.style.position = 'absolute';

   361   }

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

   363     

   364     vml = this.container.ownerDocument.createElement('v:line'); 

   365     vml.setAttribute('from', left + 'px,' + top + 'px');

   366     vml.setAttribute('to', (left+width) + 'px,' + (top+height) + 'px');

   367 

   368   }   

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

   370     vml = this.container.ownerDocument.createElement('v:polyline');

   371     vml.setAttribute("points", points); 

   372     

   373   }    

   374   else if (shape == 'path') 

   375    {   

   376     vml = this.container.ownerDocument.createElement('v:shape');  

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

   378     var tokens1 = zoominit1.split(' ');         

   379     var tokens2 = zoominit2.split(' ');   

   380     tokens[0]=0;

   381     tokens[1]=0;

   382     var path=points;

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

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

   385     var ps =path.split(" ")

   386     var pcc = "";

   387    

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

   389     var contArc=0; 

   390     var isArc=false;

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

   392     { 

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

   394       

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

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

   397      

   398        if (!char1.match(re))        

   399         { 

   400            var num0prev= parseFloat(point[0].substring(1));

   401            var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));

   402            num0=zoom.x;  

   403    

   404            var text=char1;

   405         }else{ 

   406             var num0prev= parseFloat(point[0]);

   407             var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));

   408             num0=zoom.x;  

   409   

   410         }  

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

   412        var zoom=VMLviewBox(this.container,0,point[1],parseInt(tokens2[2]),parseInt(tokens2[3]));

   413        point[1]=zoom.y;  

   414        var cx=num0+parseInt(tokens2[0]); 

   415        var cy=point[1]+parseInt(tokens2[1]);   

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

   417      }

   418       else

   419      {  

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

   421      }

   422    

   423     }

   424    ////////////////////   

   425     var thispath=pcc;

   426     thispath=thispath.replace(/M/g,'m');

   427     thispath=thispath.replace(/C/g,'c');  

   428     thispath=thispath.replace(/L/g,'l'); 

   429     thispath=thispath.replace(/z/g,'x');      

   430    

   431    //document.getElementById('source').value=points+'\r\n'+thispath +'\r\n'+'________'+'\r\n'

   432    var zoom=VMLviewBox(this.container,tokens[0],tokens[1],tokens[2],tokens[3]);

   433    

   434     vml.style.position="absolute";  

   435     vml.style.width= zoom.w+"px";

   436     vml.style.height=zoom.h+"px";

   437     vml.style.left=zoom.x+"px";  

   438     vml.style.top=zoom.y+"px";    

   439     vml.setAttribute('coordsize', zoom.w+','+zoom.h); 

   440  

   441     var path01 = this.container.ownerDocument.createElement('v:path');  

   442     path01.setAttribute("v", thispath+' e'); 

   443  

   444  

   445     

   446     vml.appendChild(path01)

   447     

   448    }

   449    

   450    else if (shape == 'controlpath')

   451    {

   452     

   453     vml = this.container.ownerDocument.createElement('v:shape');  

   454       vml.style.position="absolute";  

   455     vml.style.width= 700+"px";

   456     vml.style.height=500+"px";

   457     vml.style.left=left+"px";  

   458     vml.style.top=top+"px";  

   459     vml.setAttribute('coordsize', '700,500');   

   460      

   461     var path01 = this.container.ownerDocument.createElement('v:path');  

   462     path01.setAttribute('v', 'm '+left+','+top+' c'+(left+1)+','+(top+1)+' e ');  

   463 

   464      vml.appendChild(path01)

   465     } 

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

   467      var data =imageHref;//document.forms[0].option_text_message.value;

   468      vml = this.container.ownerDocument.createElement('v:image'); 

   469      vml.setAttribute('src',imageHref);

   470      vml.style.position="absolute";  

   471      vml.style.width=width+"px";

   472      vml.style.height=height+"px";

   473      vml.style.left=left+"px";  

   474      vml.style.top=top+"px";  

   475      vml.style.margin=0+"px";  

   476      vml.style.padding=0+"px";  

   477      if (fillColor != ''  || fillColor != 'none') {

   478        vml.setAttribute('filled', 'false');

   479        vml.setAttribute('fillcolor', fillColor);

   480      }

   481      else {

   482        vml.setAttribute('filled', 'false');

   483      }

   484     vml.setAttribute('strokeweight','0px');// parseFloat(lineWidth)+'px');

   485    vml.setAttribute('stroked', 'false');  

   486    vml.setAttribute('strokecolor','#000000');//lineColor);

   487    

   488    

   489     }

   490     

   491  else if (shape == 'text') 

   492   {   

   493    

   494     var data =textMessaje;

   495     vml = this.container.ownerDocument.createElement('v:shape');

   496     vml.style.position="absolute";  

   497     //vml.setAttribute('coordorigin',left+', '+top);

   498      //vml.style.coorsize= '';

   499      coordorigin="0, 0" 

   500      

   501      var ts=isNaN(textSize)

   502      if(ts==true){

   503      textSize=10;

   504      }

   505     vml.style.width= textSize+'px';//tokens[2]+'px'

   506     vml.style.height=textSize+'px';

   507     vml.style.left=(left+"px");  

   508     vml.style.top=(top-(textSize*1/4)+"px");  

   509     vml.style.margin=0+"px"; 

   510      vml.style.padding=0+"px";  

   511      vml.setAttribute('path','m '+0+' '+0+' r '+(textSize*data.length)+' '+0+' e'); 

   512      var textPathObj = this.container.ownerDocument.createElement("v:textpath");

   513      textPathObj.setAttribute('string', data); 

   514       textPathObj.setAttribute('fitshape','false'); 

   515      textPathObj.setAttribute('trim', 'false'); 

   516      textPathObj.setAttribute('fitpath', 'false');

   517      textPathObj.setAttribute('on','true');  

   518      textPathObj.style.fontFamily=textFamily;  

   519      textPathObj.style.fontSize=textSize+'px'; 

   520      textPathObj.setAttribute('vTextKern','true');  

   521      textPathObj.setAttribute('text-align','center');  

   522      

   523       var pathObj = this.container.ownerDocument.createElement("v:path");

   524      pathObj.setAttribute('textpathok', 'true');  

   525       vml.appendChild(textPathObj);  

   526      vml.appendChild(pathObj);  

   527     

   528     

   529   }    

   530 

   531 

   532     

   533  else if (shape == 'texto') 

   534   {  

   535     vml = this.container.ownerDocument.createElement('v:shape');

   536     vml.style.position="absolute";  

   537    

   538      vml.style.coordsize=1000+', '+1000;

   539     vml.style.width= 1000;

   540     vml.style.height=1000;

   541     vml.style.left=left;  

   542     vml.style.top=top-parseFloat(textSize);  

   543      

   544      vml.style.padding=0;  

   545     var textBox = this.container.ownerDocument.createElement("v:textbox");

   546      textBox.setAttribute('mso-rotate-with-shape',true)

   547      var divtext = this.container.ownerDocument.createElement("div");  

   548      divtext.style.coordorigin=0+', '+(0);      

   549      divtext.style.margin=0;   

   550      divtext.style.fontFamily=textFamily; 

   551      divtext.style.margin=0; 

   552      divtext.style.padding=0; 

   553      divtext.style.vRotateLetters=true;

   554      divtext.style.fontSize=parseFloat(textSize); 

   555     

   556      

   557            

   558     

   559 

   560      

   561     divtext.style.color=fillColor;

   562      

   563      

   564      

   565      

   566      

   567      //divtext.setAttribute('v-rotate-letters','true');

   568     if(transform.indexOf('rotate')>=0)

   569     {

   570      

   571       myRotate1=transform.split('rotate(');

   572       myRotate2=myRotate1[1].split(')');  

   573       myRotate3=myRotate2[0].split(',');  

   574      

   575       //divtext.setAttribute('mso-rotate',myRotate3[0]);

   576       //textBox.style.msoRotate= myRotate3[0];

   577       //textBox.style.centerX=myRotate3[1]; 

   578       //textBox.style.centerY=myRotate3[2];

   579       //vml.style.rotation= myRotate3[0];

   580       //vml.style.centerX=myRotate3[1]; 

   581       //vml.style.centerY=myRotate3[2];

   582         vml.setAttribute('rotation',myRotate3[0]+'Deg'); 

   583     }        

   584 

   585      divtext.innerHTML=textMessaje;

   586      textBox.appendChild(divtext);       

   587     

   588      vml.appendChild(textBox);  

   589     

   590   } 

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

   592    var vml; 

   593    

   594  } 

   595    

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

   597     vml = this.container.ownerDocument.createElement('v:group'); 

   598     vml.style.left=left+"px";  

   599     vml.style.top=top+"px";  

   600   }

   601  

   602   if(shape == 'zoom' || shape == 'defs') 

   603   {

   604         

   605   }else

   606   {   

   607     if(transform.indexOf('rotate')>=0)

   608     {

   609       myRotate1=transform.split('rotate(');

   610       myRotate2=myRotate1[1].split(')');  

   611       myRotate3=myRotate2[0].split(',');  

   612      

   613        vml.style.rotation= myRotate3[0]+'Deg';

   614        vml.style.centerX=myRotate3[1]; 

   615        vml.style.centerY=myRotate3[2];

   616        

   617     }                                     

   618        

   619         if(shape != 'image' )

   620          {      

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

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

   623            (fillColor!=''|| fillColor!=null )?vml.setAttribute('fillcolor', fillColor):vml.setAttribute('filled', 'true');

   624 

   625                     if (fillColor != ''  || fillColor != 'none' ) 

   626                     { 

   627                       vml.setAttribute('filled', 'true'); 

   628                       vml.setAttribute('fillcolor', fillColor); 

   629                       

   630                     }

   631                      else 

   632                     {

   633                       vml.setAttribute('filled', 'false');

   634                     }

   635 

   636          

   637                 if(lineWidth==0 || lineWidth=='none' || lineColor== 'none' )    

   638                 {

   639                   vml.setAttribute('stroked', 'false');  

   640                 }

   641                  else 

   642                 {  

   643                   //if(isNaN(lineColor)==false){alert('-'+lineColor+'-');lineColor='#000000';lineWidth=1;}

   644                   vml.setAttribute('stroked', 'true');

   645                   vml.setAttribute('strokecolor', lineColor);

   646                   vml.setAttribute('strokeweight', lineWidth);

   647                   var stroke = this.container.ownerDocument.createElement('v:stroke'); 

   648                   stroke.setAttribute("opacity", parseFloat(lineOpac));

   649                   vml.appendChild(stroke);

   650                   

   651                 }

   652 

   653                if (fillOpac != '') 

   654                 { 

   655                   if (fillOpac == 'none' || fillColor=='none'){fillOpac=0;}

   656                   var fill = this.container.ownerDocument.createElement('v:fill'); 

   657                   fill.setAttribute("opacity",parseFloat(fillOpac));  

   658                   //alert(fillOpac)

   659                   vml.appendChild(fill);

   660                 }

   661           }     

   662   } 

   663   if(parent==''){   

   664    if(vml){

   665    this.container.appendChild(vml);}

   666   }else{ 

   667     if(document.getElementById(parent)){ 

   668      var parentShape = document.getElementById(parent);

   669      if(vml||vml!=null ){ 

   670       parentShape.appendChild(vml);

   671      } 

   672     } 

   673   }  

   674    //var parentDoc = document.getElementById('mydraw');

   675    //parentDoc.appendChild(vml);

   676   return vml;

   677 };   

   678 

   679 VMLRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {

   680    var deltaX = toX - fromX;

   681    var deltaY = toY - fromY;  

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

   683    { 

   684     

   685  

   686       if (deltaX < 0) {

   687          shape.style.left=toX + 'px';

   688          shape.style.width=-deltaX + 'px';

   689        }

   690         else

   691        {

   692          shape.style.width= deltaX + 'px';

   693        }

   694   

   695       if (deltaY < 0) 

   696        {

   697         shape.style.top=toY + 'px';

   698         shape.style.height=-deltaY + 'px';

   699        }

   700         else 

   701        {

   702         shape.style.height=deltaY + 'px';

   703        }

   704     }

   705 }  

   706 VMLRenderer.prototype.duplicate = function(shape) 

   707  {

   708    var vml;

   709    vml =shape.cloneNode(false);

   710    //vml.setAttribute('fillcolor', "#aa00aa");

   711    vml.setAttribute('filled', "false");

   712    this.container.appendChild(vml);

   713   return vml;

   714   

   715  };

   716 VMLRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)

   717 { 

   718  var result = true;

   719   var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';

   720 

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

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

   723   {

   724  

   725   var box =  this.bounds(shape);

   726  }else

   727  {

   728   return false;

   729  }

   730  var p1x = box.x;

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

   732  

   733  var p1y = box.y;

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

   735  

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

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

   738 

   739  var p2y = box.y;

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

   741  

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

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

   744 

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

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

   747   

   748  var p4x = box.x;

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

   750  

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

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

   753  

   754  if(result)

   755   {

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

   757   }

   758    else

   759   { 

   760      return { 'in':result } 

   761   }

   762 //center.distanceFrom(point1);

   763  

   764 

   765 }

   766 

   767 VMLRenderer.prototype.searchBoxes = function()

   768 {  

   769  var base = this.container;

   770 

   771  var  NumNodes = base.childNodes.length;

   772  var chain= '';

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

   774   {       

   775      if (this.bounds(base.childNodes[i]))

   776       {

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

   778       }

   779   }

   780   chain+=''

   781   return chain;

   782 

   783 }  

   784 

   785 VMLRenderer.prototype.DrawBorder= function(numNode, targetElement )

   786 {   

   787   var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';

   788 

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

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

   791   {

   792    var bbox = this.bounds(targetElement);

   793 

   794    var outline = this.container.ownerDocument.createElement('v:rect');  

   795    outline.setAttribute('x', bbox.x - 2 );

   796    outline.setAttribute('y', bbox.y - 2 );

   797    outline.setAttribute('width',  bbox.width + 4 );

   798    outline.setAttribute('height', bbox.height + 4 );

   799    outline.setAttribute('stroke', '#ff00ff' );

   800    outline.setAttribute('fill', 'none' );

   801    outline.setAttribute('id', 'shapeBoxed'+numNode );

   802 

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

   804    return 'shapeBoxed'+numNode; 

   805   } 

   806    else 

   807   {

   808    return false

   809   }

   810 }

   811 

   812 

   813 VMLRenderer.prototype.getMarkup = function() { 

   814       

   815   //return this.container.parentNode.innerHTML;  

   816   return this.container.innerHTML;

   817 }

   818 

   819 VMLRenderer.prototype.remove = function(shape) {

   820   if(shape!=null){ shape.removeNode(true); }

   821 } 

   822 

   823 VMLRenderer.prototype.removeAll = function() {  

   824  while( this.container.hasChildNodes () ){

   825    this.container.removeChild( this.container.firstChild );

   826    //this.container.removeNode( this.container.firstChild );

   827  } 

   828 }

   829 

   830 VMLRenderer.prototype.editCommand = function(shape, cmd, value)

   831 {

   832   if (shape != null) {

   833     if (cmd == 'fillcolor') {

   834       if (value == '' || value =='none')

   835         shape.style.fill='none';

   836       else

   837         shape.style.fill=value;

   838     }

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

   840       if (value != '')

   841         shape.style.stroke=value;

   842       else

   843         shape.style.stroke='none';

   844     }

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

   846       if( value=='none' || value=='')

   847        {

   848         shape.style.strokeWidth=0;

   849        }else{

   850         shape.style.strokeWidth=parseInt(value) + 'px';

   851        } 

   852     } 

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

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

   855             {

   856              shape.style.opacity=parseFloat(value);

   857             }

   858              else

   859             {

   860                 shape.style.fillOpacity=parseFloat(value);

   861             }    

   862       

   863     }

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

   865       

   866       shape.style.strokeOpacity=parseFloat(value);

   867       

   868     }

   869     else if (cmd == 'filter') 

   870      {

   871        if (value != '')

   872         {                

   873         //shape.style.setProperty("filter", value) ;

   874          shape.style.filter=value;

   875          //alert(value)

   876         }

   877      }  

   878     else if (cmd == 'textContent') 

   879      {

   880        if (value != '')

   881         {                

   882          shape.textContent=value;

   883         }

   884      }   

   885      else if (cmd == 'textSize') 

   886      {

   887        if (value != '')

   888         {                

   889           shape.style.fontSize=parseFloat(eval(value));

   890         }

   891      }

   892      else if (cmd == 'textFamily') 

   893      {

   894        if (value != '')

   895         {                

   896           shape.style.fontFamily=value;

   897         }

   898      } 

   899     else if (cmd == 'textSpacing') 

   900      {

   901        if (value != '')

   902         {                

   903           shape.style.letterSpacing=''+value+'em';

   904           //alert(value) //bad letter-spacing word-spacing

   905         }

   906      } 

   907     else if (cmd == 'textLength') 

   908      {

   909        if (value != '')

   910         {                

   911           //shape.style.=''+value+'';

   912           shape.style.lengthAdjust='spacing';//spacing spacingAndGlyphs

   913           //alert(value) //bad textLength

   914         }

   915      } 

   916      

   917      

   918     else if (cmd == 'textAnchor') 

   919      {

   920        if (value != '')

   921         {                

   922           shape.style.textAnchor=value;

   923         }

   924      }

   925     else if (cmd == 'textWeight') 

   926      {

   927        if (value != '')

   928         {                

   929           shape.style.fontWeight=value;

   930         }

   931      }  

   932     else if (cmd == 'textStyle') 

   933      {

   934        if (value != '')

   935         {                

   936           shape.style.fontStyle=value;

   937         }

   938      }

   939     else if (cmd == 'textDecoration') 

   940      {

   941        if (value != '')

   942         {                

   943           shape.style.textDecoration=value;

   944         }  

   945           //alert(value) //bad  textDecoration

   946      }                  

   947     else if (cmd == 'textMode') 

   948      {

   949        if (value != '')

   950         {                

   951           shape.style.writingMode=value;

   952         }

   953      } 

   954     else if (cmd == 'textDirection') 

   955      {

   956        if (value != '')

   957         {                

   958           shape.style.direction=value;

   959         }

   960      }  

   961     else if (cmd == 'textOrientation') 

   962      {

   963        if (value != '')

   964         {                

   965           shape.style.glyphOrientationVertical=value;

   966         }

   967      } 

   968     else if (cmd == 'stopcolor') 

   969      {

   970        if (value != '')

   971         {                

   972           shape.style.stopColor=value;

   973         }

   974      } 

   975     else if (cmd == 'linearGradient') 

   976      {

   977        if (value != '')

   978         { 

   979           shape.style.x1=value.x1;

   980           shape.style.y1=value.y1;

   981           shape.style.x2=value.x2;

   982           shape.style.y2=value.y2;

   983         }

   984      }  

   985     else if (cmd == 'radialGradient') 

   986      {

   987        if (value != '')

   988         { 

   989           shape.style.x1=value.x1;

   990           shape.style.y1=value.y1;

   991           shape.style.x2=value.x2;

   992           shape.style.y2=value.y2;

   993         }

   994      }  

   995     else if (cmd == 'leftTop') 

   996      {

   997        if (value != '')

   998         { 

   999           shape.style.left=parseInt(value.left)+'px';

  1000           shape.style.top=parseInt(value.top)+'px';

  1001           

  1002         }

  1003      }  

  1004     else if (cmd == 'cxcy') 

  1005      {

  1006        if (value != '')

  1007         { 

  1008           shape.style.cx=value.cx;

  1009           shape.style.cy=value.cy;

  1010           

  1011         }

  1012      }  

  1013  

  1014   }

  1015 }

  1016 

  1017 

  1018 VMLRenderer.prototype.queryCommand = function(shape, cmd)

  1019 {

  1020   var result = '';

  1021   

  1022   if (shape != null) {

  1023     if (cmd == 'fillcolor') {

  1024       result = shape.style.fill;

  1025       if (result == 'none')

  1026         result = '';

  1027     }

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

  1029       result = shape.style.stroke;

  1030       if (result == 'none')

  1031         result = '';

  1032     }

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

  1034       result = shape.style.stroke;

  1035       if (result == 'none')

  1036         result = '';

  1037       else

  1038         result = shape.style.strokeWidth;

  1039     }

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

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

  1042             {

  1043              result= shape.style.opacity;

  1044             }

  1045              else

  1046             {

  1047              result= shape.style.fillOpacity;

  1048             }    

  1049       

  1050     }

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

  1052       

  1053      result= shape.style.strokeOpacity;

  1054       

  1055     }

  1056     else if (cmd == 'text') {         

  1057          var text1=shape.textContent;

  1058          var text2=shape.style.fontFamily;

  1059          var text3=parseInt(shape.style.fontSize);

  1060       

  1061       result= {"data":text1,"family":text2,"size":text3};

  1062       

  1063     } 

  1064     else if (cmd == 'points') {         

  1065          result=shape.style,d;

  1066       

  1067     }    

  1068     else if (cmd == 'stopcolor') {         

  1069          result=shape.style.stopColor

  1070       

  1071     }

  1072     else if (cmd == 'box') {         

  1073       result= this.bounds(shape);

  1074       

  1075     }

  1076     else if (cmd == 'linearGradient') {         

  1077          var x1=shape.style.x1;

  1078          var y1=shape.style.y1;

  1079          var x2=shape.style.x2;

  1080          var y2=shape.style.y2;

  1081       result= {"x1":x1,"y1":y1,"x2":x2,"y2":y2};

  1082       

  1083     }

  1084  

  1085  

  1086   }

  1087   

  1088   return result;

  1089 } 

  1090 

  1091  VMLRenderer.prototype.showTracker01 = function(shape) {

  1092   var box = this.bounds(shape);

  1093 

  1094   var tracker = document.getElementById('tracker');

  1095   if (tracker) {

  1096     this.remove(tracker);

  1097   }

  1098 

  1099   tracker = this.container.ownerDocument.createElement('v:rect');

  1100   tracker.id = 'tracker';

  1101   tracker.style.position = 'absolute';

  1102   tracker.style.left = box.x - 10;

  1103   tracker.style.top = box.y - 10;

  1104   tracker.style.width = box.width + 20;

  1105   tracker.style.height = box.height + 20;

  1106   tracker.setAttribute('filled', 'false');

  1107   tracker.setAttribute('stroked', 'true');

  1108   tracker.setAttribute('strokecolor', 'blue');

  1109   tracker.setAttribute('strokeweight', '1px');

  1110   this.container.appendChild(tracker);

  1111 }

  1112 

  1113 

  1114 VMLRenderer.prototype.showTracker = function(shape) {

  1115   var box = this.bounds(shape);  

  1116    //alert(box.width+' '+shape.id)

  1117   var trshape = parseFloat(shape.getAttribute('rotation'));  

  1118   var tracker = document.getElementById('tracker');

  1119 

  1120   if (tracker) {

  1121     this.remove(tracker);

  1122   }

  1123   

  1124   if (shape.tagName == 'shape') 

  1125    { 

  1126       shap=2; 

  1127       if(shape.children[0].tagName == 'path') 

  1128        {

  1129       

  1130             /* $('option_path_trx').value= box.x;  

  1131              $('option_path_try').value= box.y;

  1132              $('option_path_sclx').value= box.width;   

  1133              $('option_path_scly').value= box.height; 

  1134              $('option_path_rot').value= shape.style.rotation;

  1135              */  

  1136              //var path=shape.children[0].getAttribute('v');

  1137              // $('control_codebase').value=path;

  1138        }        

  1139    }     

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

  1141    /*  

  1142      $('option_rect_rot').value= shape.getAttribute('rotation');

  1143      $('option_rect_trx').value= box.x;  

  1144      $('option_rect_try').value= box.y;

  1145      $('option_rect_sclx').value= box.width;  

  1146      $('option_rect_scly').value= box.height;

  1147      */

  1148   }  

  1149 

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

  1151   /*  $('option_img_trx').value= box.x; 

  1152     $('option_img_try').value= box.y;

  1153     $('option_img_sclx').value= box.width;  

  1154     $('option_img_scly').value= box.height;

  1155     $('option_img_rot').value= T.b* (Math.PI * 2 / 360);   

  1156       */

  1157   }

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

  1159    /* f$('option_text_trx').value= box.x; 

  1160     $('option_text_try').value= box.y;

  1161     $('option_text_sclx').value= box.width;  

  1162     $('option_text_scly').value= box.height;

  1163     $('option_text_rot').value= T.b* (Math.PI * 2 / 360);

  1164    */

  1165   }

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

  1167     /*

  1168     $('option_line_trx').value= box.x;  

  1169     $('option_line_try').value= box.y;

  1170     */

  1171   }   

  1172   if (shape.tagName == 'oval'){  

  1173     /*$('option_ellipse_trx').value= putx;  

  1174     $('option_ellipse_try').value= puty;

  1175     $('option_ellipse_sclx').value= box.width;  

  1176     $('option_ellipse_scly').value= box.height;

  1177     $('option_ellipse_rot').value= T.b* (Math.PI * 2 / 360);

  1178     */

  1179   }

  1180   

  1181   

  1182   

  1183  /*var matrix = shape.getScreenCTM();

  1184   var trshape= shape.getAttribute('transform');  

  1185   var shap=1;

  1186   if (shape.tagName == 'path') { shap=2; 

  1187         

  1188         

  1189         

  1190   }

  1191   */  

  1192   //if (shape.getAttribute('transform') ) { shap=2; } 

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

  1194   

  1195    tracker = this.container.ownerDocument.createElement('v:group');

  1196    tracker.id = 'tracker'; 

  1197   //tracker.setAttribute('rotation',trshape);

  1198   tracker.setAttribute('coordorigin','0, 0');

  1199   //tracker.setAttribute('wrapcoords',true);

  1200  

  1201    

  1202   tracker.setAttribute('coordsize',box.width+','+ box.height);

  1203   tracker.style.position = 'absolute';   

  1204   tracker.style.left = box.x ;

  1205   tracker.style.top = box.y;

  1206   tracker.style.width = box.width ;

  1207   tracker.style.height = box.height ;

  1208  

  1209      

  1210     ////////////////

  1211 

  1212                                          

  1213  var corners = [];

  1214   var point = createPoint(box.x, box.y, box.width, box.height);

  1215  //point = {x:box.x, y:box.y, width: box.width, height:box.height};

  1216 //point = createPoint(box.x, box.y, box.width, box.height);    

  1217   //1

  1218   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );

  1219   point.x = box.x + box.width;

  1220   point.y = box.y;

  1221   //2

  1222   corners.push( createPoint(box.x + box.width, box.y + box.height, box.width, box.height) );

  1223   point.x = box.x + box.width;

  1224   point.y = box.y + box.height;

  1225   //3

  1226   //corners.push( point.matrixTransform(matrix) );

  1227   corners.push( createPoint(box.x , box.y + box.height, box.width, box.height) );

  1228   point.x = box.x;

  1229   point.y = box.y + box.height;

  1230   //4

  1231   corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );   

  1232   

  1233   var max = createPoint(corners[0].x, corners[0].y);

  1234   var min = createPoint(corners[0].x, corners[0].y);

  1235   

  1236   for (var i = 1; i < corners.length; i++) {

  1237     var x = corners[i].x;

  1238     var y = corners[i].y;

  1239     if (x < min.x) {

  1240       min.x = x;

  1241     }

  1242     else if (x > max.x) {

  1243       max.x = x;

  1244     }

  1245     if (y < min.y) {

  1246       min.y = y;

  1247     }

  1248     else if (y > max.y) {

  1249       max.y = y;

  1250     }

  1251   } 

  1252       

  1253       

  1254  var border_square = this.container.ownerDocument.createElement('v:rect');

  1255   

  1256   border_square.style.position = 'relative';

  1257   border_square.style.left = 0 - 10;

  1258   border_square.style.top = 0 - 10;

  1259   border_square.style.width = box.width + 20;

  1260   border_square.style.height = box.height + 20;

  1261   border_square.setAttribute('filled', 'false');

  1262   border_square.setAttribute('stroked', 'true');

  1263   border_square.setAttribute('strokecolor', 'blue');

  1264   border_square.setAttribute('strokeweight', '1px');  

  1265   

  1266   

  1267   var border_angle = this.container.ownerDocument.createElement('v:polyline');  

  1268   border_angle.style.position = 'relative';

  1269  

  1270   border_angle.setAttribute('filled', 'false');

  1271   border_angle.setAttribute('stroked', 'true');

  1272   border_angle.setAttribute('strokecolor', 'blue');

  1273   border_angle.setAttribute('strokeweight', '1px'); 

  1274   border_angle.setAttribute("points", (box.width+10)+","+((box.height/2))+", "+(box.width+10+25)+","+((box.height/2)) );

  1275                   

  1276 

  1277      var circle1 = this.container.ownerDocument.createElement('v:oval'); 

  1278       circle1.style.position = 'relative'; 

  1279         circle1.style.left = ( (box.width+40)-5);

  1280     circle1.style.top = ( (box.height / 2) -5);

  1281     circle1.style.width = (10);

  1282     circle1.style.height = (10);

  1283     circle1.setAttribute('filled', 'true');

  1284    circle1.setAttribute('stroked', 'true'); 

  1285    circle1.setAttribute('fillcolor', '#ffffff');

  1286    circle1.setAttribute('strokecolor', 'green');

  1287    circle1.setAttribute('strokeweight', '1px');

  1288 

  1289    

  1290   var rect1 = this.container.ownerDocument.createElement('v:rect');

  1291   rect1.style.position = 'relative';

  1292   rect1.style.left =  - 10-5;

  1293   rect1.style.top =  - 10-5;

  1294   rect1.style.width = 10;

  1295   rect1.style.height = 10;

  1296   rect1.setAttribute('filled', 'true');

  1297   rect1.setAttribute('stroked', 'true'); 

  1298   rect1.setAttribute('fillcolor', '#ffffff');

  1299   rect1.setAttribute('strokecolor', 'green');

  1300   rect1.setAttribute('strokeweight', '1px');

  1301 

  1302     

  1303   var rect2 = this.container.ownerDocument.createElement('v:rect');

  1304   rect2.style.position = 'relative';

  1305   rect2.style.left =   box.width +5;

  1306   rect2.style.top = -10 -5;

  1307   rect2.style.width = 10;

  1308   rect2.style.height = 10;

  1309   rect2.setAttribute('filled', 'true');

  1310   rect2.setAttribute('stroked', 'true'); 

  1311   rect2.setAttribute('fillcolor', '#ffffff');

  1312   rect2.setAttribute('strokecolor', 'green');

  1313   rect2.setAttribute('strokeweight', '1px');

  1314 

  1315                                                         

  1316   var rect3 = this.container.ownerDocument.createElement('v:rect');

  1317   rect3.style.position = 'relative';

  1318   rect3.style.left =   box.width+5;

  1319   rect3.style.top =  box.height+5;

  1320   rect3.style.width = 10;

  1321   rect3.style.height = 10;

  1322   rect3.setAttribute('filled', 'true');

  1323   rect3.setAttribute('stroked', 'true'); 

  1324   rect3.setAttribute('fillcolor', '#ffffff');

  1325   rect3.setAttribute('strokecolor', 'green');

  1326   rect3.setAttribute('strokeweight', '1px');

  1327    

  1328   var rect4 = this.container.ownerDocument.createElement('v:rect');

  1329   rect4.style.position = 'relative';

  1330   rect4.style.left =  -10-5;

  1331   rect4.style.top = box.height+5;

  1332   rect4.style.width = 10;

  1333   rect4.style.height = 10;

  1334   rect4.setAttribute('filled', 'true');

  1335   rect4.setAttribute('stroked', 'true'); 

  1336   rect4.setAttribute('fillcolor', '#ffffff');

  1337   rect4.setAttribute('strokecolor', 'green');

  1338   rect4.setAttribute('strokeweight', '1px');

  1339  

  1340  

  1341  

  1342   var rectmid12 = this.container.ownerDocument.createElement('v:rect');

  1343   rectmid12.style.position = 'relative';

  1344   rectmid12.style.left = (box.width/2) -5;

  1345   rectmid12.style.top =- 10-5;

  1346   rectmid12.style.width = 10;

  1347   rectmid12.style.height = 10;

  1348   rectmid12.setAttribute('filled', 'true');

  1349   rectmid12.setAttribute('stroked', 'true'); 

  1350   rectmid12.setAttribute('fillcolor', '#ffffff');

  1351   rectmid12.setAttribute('strokecolor', 'green');

  1352   rectmid12.setAttribute('strokeweight', '1px');

  1353 

  1354  var rectmid23 = this.container.ownerDocument.createElement('v:rect');

  1355   rectmid23.style.position = 'relative';

  1356   rectmid23.style.left = box.width +5;

  1357   rectmid23.style.top = (box.height/2)-5;

  1358   rectmid23.style.width = 10;

  1359   rectmid23.style.height = 10;

  1360   rectmid23.setAttribute('filled', 'true');

  1361   rectmid23.setAttribute('stroked', 'true'); 

  1362   rectmid23.setAttribute('fillcolor', '#ffffff');

  1363   rectmid23.setAttribute('strokecolor', 'green');

  1364   rectmid23.setAttribute('strokeweight', '1px');

  1365 

  1366  var rectmid34 = this.container.ownerDocument.createElement('v:rect');

  1367   rectmid34.style.position = 'relative';

  1368   rectmid34.style.left = (box.width/2)-5;

  1369   rectmid34.style.top = box.height+5;

  1370   rectmid34.style.width = 10;

  1371   rectmid34.style.height = 10;

  1372   rectmid34.setAttribute('filled', 'true');

  1373   rectmid34.setAttribute('stroked', 'true'); 

  1374   rectmid34.setAttribute('fillcolor', '#ffffff');

  1375   rectmid34.setAttribute('strokecolor', '#000000');

  1376   rectmid34.setAttribute('strokeweight', '1px');

  1377 

  1378  

  1379  var rectmid41 = this.container.ownerDocument.createElement('v:rect');

  1380   rectmid41.style.position = 'relative';

  1381   rectmid41.style.left =  -10-5 ;

  1382   rectmid41.style.top =(box.height/2)-5;

  1383   rectmid41.style.width = 10;

  1384   rectmid41.style.height = 10;

  1385   rectmid41.setAttribute('filled', 'true');

  1386   rectmid41.setAttribute('stroked', 'true'); 

  1387   rectmid41.setAttribute('fillcolor', '#ffffff');

  1388   rectmid41.setAttribute('strokecolor', 'green');

  1389   rectmid41.setAttribute('strokeweight', '1px');

  1390   

  1391        

  1392   

  1393 

  1394      var colorin="#ff0000";

  1395       var colorout="#ffffff" 

  1396     

  1397         circle1.attachEvent("onmouseover", function(event) {circle1.style.cursor= 's-resize';  circle1.setAttribute('fillcolor', colorin ); typeTransform='Rotate'; scaleType='nw'; }, false);

  1398      circle1.attachEvent("onmouseout", function(event) {circle1.style.cursor= 'default';  circle1.setAttribute('fillcolor', colorout ); typeTransform='Rotate'; }, false); //typeTransform='rotate'

  1399      

  1400       

  1401      rect1.attachEvent("onmouseover", function(event) {rect1.style.cursor= 'nw-resize';  rect1.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='nw';  }, false);

  1402      rect1.attachEvent("onmouseout", function(event) {rect1.style.cursor= 'default';  rect1.setAttribute('fillcolor', colorout ); typeTransform='Scale';  }, false); //typeTransform='rotate'

  1403     

  1404      rect2.attachEvent("onmouseover", function(event) {rect2.style.cursor= 'ne-resize';  rect2.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='ne';}, false);  

  1405      rect2.attachEvent("onmouseout", function(event) {rect2.style.cursor= 'default';  rect2.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);

  1406       

  1407      rect3.attachEvent("onmouseover", function(event) {rect3.style.cursor= 'se-resize';  rect3.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='se';}, false);  

  1408      rect3.attachEvent("onmouseout", function(event) {rect3.style.cursor= 'default';  rect3.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);

  1409      

  1410      rect4.attachEvent("onmouseover", function(event) {rect4.style.cursor= 'sw-resize';  rect4.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='sw';}, false);  

  1411      rect4.attachEvent("onmouseout", function(event) {rect4.style.cursor= 'default';  rect4.setAttribute('fillcolor', colorout ); typeTransform='Scale'; }, false);

  1412                                                     

  1413      rectmid12.attachEvent("onmouseover", function(event) {rectmid12.style.cursor= 'n-resize';  rectmid12.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='n';}, false);  

  1414      rectmid12.attachEvent("onmouseout", function(event) {rectmid12.style.cursor= 'default';  rectmid12.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 

  1415 

  1416      rectmid23.attachEvent("onmouseover", function(event) {rectmid23.style.cursor= 'e-resize';  rectmid23.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='e';}, false);  

  1417      rectmid23.attachEvent("onmouseout", function(event) {rectmid23.style.cursor= 'default';  rectmid23.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 

  1418      

  1419      rectmid34.attachEvent("onmouseover", function(event) {rectmid34.style.cursor= 's-resize';  rectmid34.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='s';}, false);  

  1420      rectmid34.attachEvent("onmouseout", function(event) {rectmid34.style.cursor= 'default';  rectmid34.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 

  1421 

  1422      rectmid41.attachEvent("onmouseover", function(event) {rectmid41.style.cursor= 'w-resize';  rectmid41.setAttribute('fillcolor', colorin ); typeTransform='Scale'; scaleType='w'; }, false);  

  1423      rectmid41.attachEvent("onmouseout", function(event) {rectmid41.style.cursor= 'default';  rectmid41.setAttribute('fillcolor', colorout ); typeTransform=''; }, false); 

  1424    //tracker.setAttribute('transform',trshape); 

  1425  

  1426    

  1427   

  1428   tracker.appendChild(border_square); 

  1429   tracker.appendChild(border_angle);  

  1430    

  1431   tracker.appendChild(circle1);  

  1432   

  1433   tracker.appendChild(rect1);    

  1434   tracker.appendChild(rect2);   

  1435   tracker.appendChild(rect3); 

  1436   tracker.appendChild(rect4);    

  1437   tracker.appendChild(rectmid12);  

  1438   tracker.appendChild(rectmid23);

  1439   tracker.appendChild(rectmid34);

  1440   tracker.appendChild(rectmid41);  

  1441   

  1442   /*

  1443    

  1444   

  1445  

  1446   */

  1447 

  1448    //alert(shape.id)

  1449    this.container.appendChild(tracker);

  1450   

  1451 

  1452 

  1453 }