Mercurial > laserkard
view onlypaths/js/vmlrenderer.js @ 48:b2a11435a89b laserkard
[svn r49] implemented resizing text :)
author | rlm |
---|---|
date | Sun, 31 Jan 2010 20:26:16 -0500 |
parents | 26c2b3ad21c7 |
children |
line wrap: on
line source
1 //----------------------------------------------------------------------------2 // VMLRENDERER 1.03 // VML Renderer For RichDraw4 // Dependencies:5 // History:6 // 2006-04-05 | Created7 // --------------------------------------------------------------------------*/10 function VMLRenderer() {11 this.base = AbstractRenderer;12 }15 VMLRenderer.prototype = new AbstractRenderer;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 }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 namespace32 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 biewBox36 //http://blogs.msdn.com/ie/archive/2008/03/18/webbrowser-control-rendering-modes-in-ie8.aspx38 }43 var proporx=1;44 var propory=1;46 VMLRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {47 var tokens = viewBox.split(' ');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(' ');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;64 document.title= initialFile +' '+wImage+' x '+hImage;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;90 proporx = 1;91 propory = 1;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;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;117 proporx = W/w;118 propory = hFront/h;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;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'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;144 proporx = wFront/w;145 propory = H/h;147 }148 // proporx = width/tokens[2];149 //propory = height/tokens[2];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';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;170 document.title= initialFile +' '+wImage+' x '+hImage;171 // ajust proporImage to proporCanvas172 if(proporCanvas==proporImage)173 {174 cornerNEx = parseFloat(tokens[0])-percentX175 cornerNEy = parseFloat(tokens[1])-percentY176 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(' ');185 }187 if(proporCanvas<proporImage)188 {190 // add to hImage191 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;207 tokensZoom=tokensCanvas;//tZ.split(' ');//viewBox.split(' '); ;//zoominit1.split(' ');208 }209 if(proporCanvas>proporImage)210 {211 // add to hImage212 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;221 zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;222 zoominit2=zoominit1;223 tokensZoom=zoominit1.split(' ');225 }228 }229 }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) {262 var tokens = zoominit1.split(' ');263 var shape = document.getElementById('rectCanvas');264 if (shape) {265 this.remove(shape);266 }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');279 this.container.insertBefore(rect, this.container.firstChild );281 }283 VMLRenderer.prototype.removeAll = function(){284 while (this.container.hasChildNodes()) {285 this.container.removeChild(this.container.firstChild);286 }287 }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;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;309 return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};310 }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(' ');315 var zoom=VMLviewBox(this.container,left,top,width,height);317 left=zoom.x;318 top=zoom.y;319 width=zoom.w;320 height=zoom.h;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;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') {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%');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') {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');368 }369 else if (shape == 'polyline') {370 vml = this.container.ownerDocument.createElement('v:polyline');371 vml.setAttribute("points", points);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 = "";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){395 var point =ps[i].split(",");396 var char1=point[0].substring(0,1);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;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;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 else419 {420 pcc+=ps[i]+' ';421 }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');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]);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);441 var path01 = this.container.ownerDocument.createElement('v:path');442 path01.setAttribute("v", thispath+' e');446 vml.appendChild(path01)448 }450 else if (shape == 'controlpath')451 {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');461 var path01 = this.container.ownerDocument.createElement('v:path');462 path01.setAttribute('v', 'm '+left+','+top+' c'+(left+1)+','+(top+1)+' e ');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);489 }491 else if (shape == 'text')492 {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"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');523 var pathObj = this.container.ownerDocument.createElement("v:path");524 pathObj.setAttribute('textpathok', 'true');525 vml.appendChild(textPathObj);526 vml.appendChild(pathObj);529 }533 else if (shape == 'texto')534 {535 vml = this.container.ownerDocument.createElement('v:shape');536 vml.style.position="absolute";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);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);561 divtext.style.color=fillColor;567 //divtext.setAttribute('v-rotate-letters','true');568 if(transform.indexOf('rotate')>=0)569 {571 myRotate1=transform.split('rotate(');572 myRotate2=myRotate1[1].split(')');573 myRotate3=myRotate2[0].split(',');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 }585 divtext.innerHTML=textMessaje;586 textBox.appendChild(divtext);588 vml.appendChild(textBox);590 }591 else if (shape == 'defs') {592 var vml;594 }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 }602 if(shape == 'zoom' || shape == 'defs')603 {605 }else606 {607 if(transform.indexOf('rotate')>=0)608 {609 myRotate1=transform.split('rotate(');610 myRotate2=myRotate1[1].split(')');611 myRotate3=myRotate2[0].split(',');613 vml.style.rotation= myRotate3[0]+'Deg';614 vml.style.centerX=myRotate3[1];615 vml.style.centerY=myRotate3[2];617 }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');625 if (fillColor != '' || fillColor != 'none' )626 {627 vml.setAttribute('filled', 'true');628 vml.setAttribute('fillcolor', fillColor);630 }631 else632 {633 vml.setAttribute('filled', 'false');634 }637 if(lineWidth==0 || lineWidth=='none' || lineColor== 'none' )638 {639 vml.setAttribute('stroked', 'false');640 }641 else642 {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);651 }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 };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 {686 if (deltaX < 0) {687 shape.style.left=toX + 'px';688 shape.style.width=-deltaX + 'px';689 }690 else691 {692 shape.style.width= deltaX + 'px';693 }695 if (deltaY < 0)696 {697 shape.style.top=toY + 'px';698 shape.style.height=-deltaY + 'px';699 }700 else701 {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;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, ';721 //if(shape.getBBox && shape)722 if( shapes.indexOf(' '+shape.tagName+',')>0)723 {725 var box = this.bounds(shape);726 }else727 {728 return false;729 }730 var p1x = box.x;731 if(Math.abs(p1x-centerx)>width){result = false}733 var p1y = box.y;734 if(Math.abs(p1y-centery)>height){result = false}736 var p2x = box.x+box.width;737 if(Math.abs(p2x-centerx)>width){result = false}739 var p2y = box.y;740 if(Math.abs(p2y-centery)>height){result = false}742 var p3x = box.x+box.width;743 if(Math.abs(p3x-centerx)>width){result = false}745 var p3y = box.y+box.height;746 if(Math.abs(p3y-centery)>height){result = false}748 var p4x = box.x;749 if(Math.abs(p4x-centerx)>width){result = false}751 var p4y = box.y+box.height;752 if(Math.abs(p4y-centery)>height){result = false}754 if(result)755 {756 return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };757 }758 else759 {760 return { 'in':result }761 }762 //center.distanceFrom(point1);765 }767 VMLRenderer.prototype.searchBoxes = function()768 {769 var base = this.container;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;783 }785 VMLRenderer.prototype.DrawBorder= function(numNode, targetElement )786 {787 var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';789 //if(shape.getBBox && shape)790 if( shapes.indexOf(' '+targetElement.tagName+',')>0)791 {792 var bbox = this.bounds(targetElement);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 );803 targetElement.parentNode.insertBefore( outline, targetElement );804 return 'shapeBoxed'+numNode;805 }806 else807 {808 return false809 }810 }813 VMLRenderer.prototype.getMarkup = function() {815 //return this.container.parentNode.innerHTML;816 return this.container.innerHTML;817 }819 VMLRenderer.prototype.remove = function(shape) {820 if(shape!=null){ shape.removeNode(true); }821 }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 }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 else837 shape.style.fill=value;838 }839 else if (cmd == 'linecolor') {840 if (value != '')841 shape.style.stroke=value;842 else843 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 else859 {860 shape.style.fillOpacity=parseFloat(value);861 }863 }864 else if (cmd == 'lineopacity') {866 shape.style.strokeOpacity=parseFloat(value);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-spacing905 }906 }907 else if (cmd == 'textLength')908 {909 if (value != '')910 {911 //shape.style.=''+value+'';912 shape.style.lengthAdjust='spacing';//spacing spacingAndGlyphs913 //alert(value) //bad textLength914 }915 }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 textDecoration946 }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';1002 }1003 }1004 else if (cmd == 'cxcy')1005 {1006 if (value != '')1007 {1008 shape.style.cx=value.cx;1009 shape.style.cy=value.cy;1011 }1012 }1014 }1015 }1018 VMLRenderer.prototype.queryCommand = function(shape, cmd)1019 {1020 var result = '';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 else1038 result = shape.style.strokeWidth;1039 }1040 else if (cmd == 'fillopacity') {1041 if(shape.tagName=='image')1042 {1043 result= shape.style.opacity;1044 }1045 else1046 {1047 result= shape.style.fillOpacity;1048 }1050 }1051 else if (cmd == 'lineopacity') {1053 result= shape.style.strokeOpacity;1055 }1056 else if (cmd == 'text') {1057 var text1=shape.textContent;1058 var text2=shape.style.fontFamily;1059 var text3=parseInt(shape.style.fontSize);1061 result= {"data":text1,"family":text2,"size":text3};1063 }1064 else if (cmd == 'points') {1065 result=shape.style,d;1067 }1068 else if (cmd == 'stopcolor') {1069 result=shape.style.stopColor1071 }1072 else if (cmd == 'box') {1073 result= this.bounds(shape);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};1083 }1086 }1088 return result;1089 }1091 VMLRenderer.prototype.showTracker01 = function(shape) {1092 var box = this.bounds(shape);1094 var tracker = document.getElementById('tracker');1095 if (tracker) {1096 this.remove(tracker);1097 }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 }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');1120 if (tracker) {1121 this.remove(tracker);1122 }1124 if (shape.tagName == 'shape')1125 {1126 shap=2;1127 if(shape.children[0].tagName == 'path')1128 {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 }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 }1183 /*var matrix = shape.getScreenCTM();1184 var trshape= shape.getAttribute('transform');1185 var shap=1;1186 if (shape.tagName == 'path') { shap=2;1190 }1191 */1192 //if (shape.getAttribute('transform') ) { shap=2; }1193 //var svgNamespace = 'http://www.w3.org/2000/svg';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);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 ;1210 ////////////////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 //11218 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 //21222 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 //31226 //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 //41231 corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );1233 var max = createPoint(corners[0].x, corners[0].y);1234 var min = createPoint(corners[0].x, corners[0].y);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 }1254 var border_square = this.container.ownerDocument.createElement('v:rect');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');1267 var border_angle = this.container.ownerDocument.createElement('v:polyline');1268 border_angle.style.position = 'relative';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)) );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');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');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');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');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');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');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');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');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');1394 var colorin="#ff0000";1395 var colorout="#ffffff"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'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'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);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);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);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);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);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);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);1428 tracker.appendChild(border_square);1429 tracker.appendChild(border_angle);1431 tracker.appendChild(circle1);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);1442 /*1446 */1448 //alert(shape.id)1449 this.container.appendChild(tracker);1453 }