Mercurial > laserkard

view onlypaths/js/application_mini.js @ 77:bf68c9ea9528 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
saving
author Robert McIntyre <rlm@mit.edu>
date Thu, 22 Jul 2010 09:30:45 -0400
parents 26c2b3ad21c7
children
line wrap: on
line source
     1 



     2 /*



     3  * 



     4  */ 



     5 



     6 Ext.BLANK_IMAGE_URL = 'theme/images/default/s.gif';



     7 



     8 if(typeof console != 'object') {



     9   console = {};



    10   console.log = function(){return false;};



    11 }     



    12 



    13 



    14   function $(e){return Ext.get(e).dom}



    15   var c, browser, browserpath; 



    16   var colorpage="#ccccdd"; 



    17   var colorpage1a="#ee00aa"; //north  



    18   var colorpage1b="#ee00cc"; 



    19   var colorpage1c="#ee00ee"; 



    20   var colorpage2="#77aaaa";  //sud



    21   var colorpage3="#ddee00";  //est



    22   var colorpage4="#ccee00";  //west           



    23   



    24   var selectmode='';



    25   var selectedit='';



    26   



    27   



    28   ie = navigator.appVersion.match(/MSIE (\d\.\d)/);



    29   opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);



    30   



    31   



    32   



    33   window.onresize = doResize; 



    34   var initialFile='big01.txt';



    35   var docx=0;



    36   var docy=0;



    37   var docw=600;



    38   var doch=400;



    39   var canvasWidth=600;//FRONTsize[0];  



    40   var canvasW=canvasWidth;  



    41   var canvasHeight=400;//FRONTsize[1];  



    42   var canvasH=canvasHeight;



    43   var canvasX=0; 



    44   var canvasY=0; 



    45   var zoomx=docx;



    46   var zoomy=docy;



    47   var zoomw=docw;



    48   var zoomh=doch;   



    49   var marginx=0;



    50   var marginy=0;      



    51   var margin=100;   



    52   var screenSize=myWorkSize();



    53   var scrW = screenSize[0];//screen.availWidth;



    54   var scrH = screenSize[1];//screen.availHeight; 



    55   



    56   var canvasYpercent=100;



    57   var canvasXpercent=100;



    58   



    59  



    60 //?



    61   var wndW=scrW;//window.width;



    62   var wndH=scrH;//window.height;



    63 //  



    64   var proporWindow= scrW/scrH;



    65   var proporCanvas=canvasW/canvasH;  



    66   var proporDoc=docw/doch; 



    67   var proporZoom= zoomw/zoomh; 



    68   var proporx=proporCanvas; //IE  



    69   var propory=1;      //IE  



    70   var mode='canvas';//'canvas' or 'preview'



    71 



    72   var zoominit=docx+' '+docy+' '+docw+' '+doch; 



    73   var zoominit1 =zoominit;  



    74   var zoominit2 =zoominit;



    75 



    76   var fieldViewx=Math.round(canvasH*proporCanvas); 



    77   var fieldViewy=canvasH;  



    78   var diagonalFrame=dist2p(0,0,fieldViewx,fieldViewy);



    79   var diagonalAngle=getAngle(fieldViewx,fieldViewy);                                  



    80   var diagonalinit=diagonalFrame;  



    81   //alert(diagonalinit);



    82   



    83   // double?



    84   var diagonalMidx=fieldViewx/2; 



    85   var diagonalMidy=fieldViewy/2;   



    86   var centerZoomx=diagonalMidx;//Math.round(zoomw/2);



    87   var centerZoomy=diagonalMidy;//Math.round(zoomh/2);        



    88   //



    89   



    90   



    91   var proporDiagonal=diagonalFrame/diagonalinit; 



    92   //////////////////////////



    93   



    94   var wProportion={x:35, y:24}



    95   



    96   var vertexNORTHmenu={};



    97   var vertexNORTHglobals={};



    98   var vertexNORTHoptions={};    



    99   var vertexSUD={};



   100   var vertexEST={};



   101   var vertexWEST={};



   102   var vertexFRONT={};



   103  



   104   var NORTHmenusize=[];



   105   var NORTHglobalssize=[];



   106   var NORTHoptionssize=[];  



   107   var SUDsize=[]; 



   108   var ESTsize=[]; 



   109   var WESTsize=[]; 



   110   var FRONTsize=[]; 



   111   



   112   



   113   vertexFrames();



   114  



   115 



   116   var FRONT='';



   117   FRONT+='  <div id="richdraw"  style="background-image:url();background-color:#ff0000;position:relative; border:0px outset black;left:'+canvasX+'px;top:'+canvasY+'px;width:'+canvasW+'px;height:'+canvasH+'px; "></div>';



   118   



   119   var NORTHmenu='';



   120   NORTHmenu+='&nbsp;&nbsp;<span id="file">File</span>&nbsp;&nbsp;<span id="edit">Edit</span>';   



   121  



   122   var NORTHglobals='';



   123   NORTHglobals+='<span id="options_select" style="visibility:visible;position:relative;top:0px;left:'+canvasX+'px; padding:1px; margin-top:1px; background-color:tranparent;">';



   124   NORTHglobals+=' <img id="select_deleteone" title="Delete one" onclick="selectedit='+"'"+'deleteone'+"'"+';info_select()" src="img/delete.gif" >';    



   125   NORTHglobals+=' <img id="select_deleteall" title="Delete all" onclick="selectedit='+"'"+'deleteall'+"'"+';info_select()" src="img/reset.gif" >'    



   126   NORTHglobals+=' <img id="select_tothetop" title="To the top" onclick="selectedit='+"'"+'tothetop'+"'"+';info_select()" src="img/tothetop.gif" >';    



   127   NORTHglobals+=' <img id="select_totheback" title="To the back" onclick="selectedit='+"'"+'totheback'+"'"+';info_select()" src="img/totheback.gif" >';    



   128   NORTHglobals+=' <img id="select_onetop" title="One top" onclick="selectedit='+"'"+'onetop'+"'"+';info_select()" src="img/onetop.gif" >';    



   129   NORTHglobals+=' <img id="select_oneback" title="One back" onclick="selectedit='+"'"+'oneback'+"'"+';info_select()" src="img/oneback.gif" >';    



   130   NORTHglobals+=' <img id="select_reflectV" title="Vertical reflect" onclick="selectedit='+"'"+'reflectV'+"'"+';info_select()" src="img/reflect_h.gif" >',    



   131   NORTHglobals+=' <img id="select_reflectH" title="Horizontal reflect" onclick="selectedit='+"'"+'reflectH'+"'"+';info_select()" src="img/reflect_v.gif" >';    



   132   NORTHglobals+='</span>';



   133 



   134   var NORTHoptions='';  



   135     // <!-- OPTIONS_SELECT_PATH --> 



   136   NORTHoptions+='<div id="options_select_path" style="font-size:9px;visibility:hidden;position:absolute;top:0px;left:5px;height:14px;width:100%; padding:1px; margin-top:1px; background-color:none;">';



   137   NORTHoptions+='<input type="text" name="codebase" id="codebase" style="height:15px;width:600px; padding:1px 1px 1px 4px; margin:0px; background-color:#ffffff;" value=""><img id="envshape" style="background-color:orange;" align="top"  title="Submit Shape" onclick="setShape();" border="0px" src="img/setpath1.gif">';



   138   NORTHoptions+='</div>'; 



   139   // <!-- OPTIONS_RECT --> 



   140   NORTHoptions+='<div id="options_rect" style="font-size:9px;visibility:hidden;position:absolute;top:0px;left:5px;height:14px;width:100%; padding:1px; margin-top:1px; background-color:none;">';



   141   NORTHoptions+='   trX<input id="option_rect_trx" type="text" size="1"  style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">'; 



   142   NORTHoptions+='   trY<input id="option_rect_try" type="text" size="1"  style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">'; 



   143   NORTHoptions+='   wx<input id="option_rect_sclx" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">'; 



   144   NORTHoptions+='   wy<input id="option_rect_scly" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';   



   145   NORTHoptions+='   rot<input id="option_rect_rot" type="text" size="1" style="background-color:#ffdddd"  value="0" onKeyPress="return edit(this,event)">'; 



   146   NORTHoptions+='</div>';



   147   // <!-- OPTIONS_IMAGE -->



   148   NORTHoptions+='<div id="options_image" style="font-size:9px;visibility:hidden;position:absolute;top:0px;left:5px;height:14px;width:100%; padding:1px; margin-top:1px; background-color:none;">';



   149   NORTHoptions+=' trX<input id="option_img_trx" type="text" size="1"  style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">'; 



   150   NORTHoptions+=' trY<input id="option_img_try" type="text" size="1"  style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">'; 



   151   NORTHoptions+=' wx<input id="option_img_sclx" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">'; 



   152   NORTHoptions+=' wy<input id="option_img_scly" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';   



   153   NORTHoptions+=' rot<input id="option_img_rot" type="text" size="1" style="background-color:#ffdddd"  value="0" onKeyPress="return edit(this,event)">'; 



   154   NORTHoptions+=' Source: <input name="option_image_href" type="text" size="62" id="option_image_href"  value="http://tavmjong.free.fr/INKSCAPE/MANUAL/images/QUICKSTART/SOUPCAN/SoupCan_SoupedUp.png" onmouseover="" onKeyPress="return edit(this,event)">';



   155   NORTHoptions+='</div>';  



   156   //<!-- OPTIONS_PATH -->



   157   NORTHoptions+='<div id="options_path" style="font-size:9px;visibility:hidden;position:absolute;top:0px;left:5px;height:14px;width:100%; padding:1px; margin-top:1px; background-color:none;">';



   158   NORTHoptions+=' trX<input id="option_path_trx" type="text" size="1"  style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">'; 



   159   NORTHoptions+=' trY<input id="option_path_try" type="text" size="1"  style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">'; 



   160   NORTHoptions+=' <input id="option_path_sclx" type="hidden" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">'; 



   161   NORTHoptions+=' <input id="option_path_scly" type="hidden" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';   



   162   NORTHoptions+=' rot<input id="option_path_rot" type="text" size="1" style="background-color:#ffdddd"  value="0" onKeyPress="return edit(this,event)">'; 



   163   NORTHoptions+=' Open/Close: <input CHECKED name="option_path_close"  id="option_path_close" type="checkbox">';



   164   NORTHoptions+=' <input type="text" name="control_codebase" id="control_codebase" style="height:15px;width:300px; padding:1px 1px 1px 4px; margin:0px; background-color:#ffffff;" onmouseover="" value="" onKeyPress="return edit(this,event)">';



   165   NORTHoptions+=' <img style="cursor:pointer" align="top" title="to curve" onclick="c.renderer.tocurve();" src="img/tocurve.gif">';



   166   NORTHoptions+=' <input id="option_path_num" type="hidden" size="1" style="background-color:#ffdddd"  value="0">';



   167   NORTHoptions+=' Px<input id="option_path_x" type="text" size="1" style="background-color:#ffdddd"  value="0" onKeyPress="return editPath(this,event)">';



   168   NORTHoptions+=' Py<input id="option_path_y" type="text" size="1" style="background-color:#ffdddd"  value="0" onKeyPress="return editPath(this,event)">';   



   169   NORTHoptions+='</div>';



   170   //<!--OPTIONS ELLIPSE-->    



   171   NORTHoptions+='<div id="options_ellipse" style="font-size:9px;visibility:hidden;position:absolute;top:0px;left:5px;height:14px;width:100%; padding:1px; margin-top:1px; background-color:none;">';



   172   NORTHoptions+=' trX<input id="option_ellipse_trx" type="text" size="1"  style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">'; 



   173   NORTHoptions+=' trY<input id="option_ellipse_try" type="text" size="1"  style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">'; 



   174   NORTHoptions+=' wx<input id="option_ellipse_sclx" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">'; 



   175   NORTHoptions+=' wy<input id="option_ellipse_scly" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';   



   176   NORTHoptions+=' rot<input id="option_ellipse_rot" type="text" size="1" style="background-color:#ffdddd"  value="0" onKeyPress="return edit(this,event)">'; 



   177   NORTHoptions+='</div>';



   178   //<!-- OPTIONS_ZOOM -->



   179   NORTHoptions+='<div id="options_zoom" style="font-size:9px;visibility:hidden;position:relative;top:0px;left:'+canvasX+'px; padding:0px; margin-top:0px; background-color:tranparent;">';



   180   NORTHoptions+=' <img id="zoom_more" title="More zoom" onclick="zoommode='+"'"+'more'+"'"+';info_zoom()" src="img/zoom_more.gif" >';    



   181   NORTHoptions+=' <img id="zoom_minus" title="Minus zoom" onclick="zoommode='+"'"+'minus'+"'"+';info_zoom()" src="img/zoom_minus.gif" >';    



   182   NORTHoptions+=' <img id="zoom_frame" title="Frame zoom" onclick="zoommode='+"'"+'frame'+"'"+';info_zoom()" src="img/zoom_frame.gif" >';    



   183   NORTHoptions+=' <img id="zoom_window" title="Window zoom" onclick="zoommode='+"'"+'window'+"'"+';info_zoom()" src="img/zoom_window.gif" >';    



   184   NORTHoptions+=' <img id="zoom_hand" title="Hand zoom" onclick="zoommode='+"'"+'hand'+"'"+';info_zoom()" src="img/zoom_hand.gif" >';    



   185   NORTHoptions+='</div>';



   186   //<!-- OPTIONS TEXT-->



   187   NORTHoptions+='<div id="options_text" style="font-size:9px;visibility:hidden;position:absolute;top:0px;left:90px;width:100%; padding:1px; margin-top:1px;z-index:200; background-color:transparent;">';



   188   NORTHoptions+=' <input name="option_text_message"  type="text"   size="22" id="option_text_message"  value="My text" onKeyPress="return edit(this,event)" style="visibility:inherit!important" />'; 



   189   NORTHoptions+=' Size:<input type="text" size="3" id="option_text_size"  name="option_text_size" value="30" onKeyPress="return edit(this,event)" style="">'; 



   190   NORTHoptions+=' Family:<select id="select_option_text_family" name="select_option_text_family" onchange="setTextFamily(this);" style="font-size:9px;">';



   191   NORTHoptions+='     <option style="font-family:Arial;" value="Arial">Arial</option>';



   192   NORTHoptions+='    <option  style="font-family:Verdana;"  value="Verdana">Verdana</option>';



   193   NORTHoptions+='    <option  style="font-family:Times;" value="Times">Times</option>'; 



   194   NORTHoptions+='    <option  style="font-family:Times;" value="Tahoma">Tahoma</option>';



   195   NORTHoptions+='    <option  style="font-family:Times;" value="Impact">Impact</option>';



   196   NORTHoptions+='  </select>';



   197   NORTHoptions+='  <input type="hidden" name="option_text_family" id="option_text_family" value="Arial" >';



   198   NORTHoptions+='</div>';  



   199   



   200   



   201   var EST='';



   202    EST+='<img id="select" title="Select shapes" onclick="c.pathsEdit=false; setMode('+"'"+'select'+"'"+', '+"'"+'Selection'+"'"+');" src="img/select3.gif" >';



   203    EST+='<img id="pathsEdit" title="Edit path" onclick="c.pathsEdit=true; setMode('+"'"+'pathsEdit'+"'"+', '+"'"+'Path Edit'+"'"+');" src="img/editpath.gif" >';



   204    EST+='<img id="zoom" title="Select zoom" onclick="setMode('+"'"+'zoom'+"'"+', '+"'"+'Zoom'+"'"+');" src="img/zoom.gif" >';



   205    EST+='<img id="rect" title="Draw a rectangle" onclick="setMode('+"'"+'rect'+"'"+', '+"'"+'Rectangle'+"'"+');" src="img/rectangle.gif" >';



   206    EST+='<img id="roundrect" title="Draw a rounded rectangle" onclick="setMode('+"'"+'roundrect'+"'"+', '+"'"+'Rounded Rectangle'+"'"+');" src="img/roundrect.gif" >';



   207    EST+='<img id="ellipse" title="Draw an ellipse" onclick="setMode('+"'"+'ellipse'+"'"+', '+"'"+'Ellipse / Circle'+"'"+');" src="img/circle.gif" >';



   208    EST+='<img id="line" title="Draw a line" onclick="setMode('+"'"+'line'+"'"+', '+"'"+'Line'+"'"+');" src="img/line.gif" >';  



   209    EST+='<img id="path" title="Draw a path" onclick="setMode('+"'"+'path'+"'"+', '+"'"+'Path'+"'"+');" src="img/path2.gif">';



   210    EST+='<img id="controlpath" title="Draw a path" onclick="setMode('+"'"+'controlpath'+"'"+', '+"'"+'controlPath'+"'"+');" src="img/path3.gif">';



   211    EST+='<img id="text" title="Write a text" onclick="setMode('+"'"+'text'+"'"+', '+"'"+'Text'+"'"+');" src="img/text.gif">';   



   212    EST+='<img id="shape" title="Open a shape" onclick="setMode('+"'"+'shape'+"'"+', '+"'"+'Shape'+"'"+');" src="img/shape.gif">';



   213    EST+='<img id="image" title="Put a image" onclick="setMode('+"'"+'image'+"'"+', '+"'"+'Image'+"'"+');" src="img/image.gif" >';    



   214 



   215    var WEST='';   



   216    WEST+='<div id="xyinput"  style="width:40px;background-color:none">0,0</div>';



   217    WEST+='<div style="font-size:9px">Grid:</div>';



   218    WEST+='<select id="gridwidth" style="font-size:9px">';



   219        var chain='';



   220        for(var num=1;num<=30;num++)



   221        {



   222          chain+='<option value="'+num+'">'+num+'px</option>';



   223        }   



   224    WEST+=chain;    



   225    WEST+='</select>';



   226    WEST+='<br>'; 



   227  



   228    WEST+=' <div name="me-container">';



   229    WEST+=' <div id="fill-me">'; 



   230    WEST+=' <img style=" padding:0px; border:0px solid orange;" id="img_okfill" onclick="setbe(1,'+"'"+'img_okfill'+"'"+')" src="img/theme/images/ok.gif">Fill<div id="fill-square"></div>';



   231    WEST+=' <div id="slider-fill"></div>'; 



   232    WEST+=' <div id="fillContainer"></div>';  



   233    WEST+=' <div id="opacity-slider-fill" title="Fill opacity"></div>';  



   234    WEST+=' </div>'; 



   235    WEST+=' <div id="stroke-me">'; 



   236    WEST+='  <img style=" padding:0px; border:0px solid orange;" id="img_okstroke" onclick="setbe(2,'+"'"+'img_okstroke'+"'"+')" src="img/theme/images/ok.gif">Line<div id="stroke-square"></div>';



   237    WEST+=' <div id="slider-stroke"></div>';



   238    WEST+=' <div id="strokeContainer"></div>'; 



   239    WEST+='  <div id="width-slider-stroke-mask"></div><div id="width-slider-stroke" title="Stroke width"></div>'; 



   240    WEST+='  <div id="opacity-slider-stroke" title="Stroke opacity"></div>'; 



   241    WEST+='  </div>'; 



   242    WEST+='  <div id="divformfill">'; 



   243    WEST+='  </div>';



   244    WEST+='  <div id="divformstroke">'; 



   245    WEST+='  </div>';



   246  



   247    WEST+='</div>';



   248    WEST+=' <div id="panel_shapes" style="overflow:auto;font-size:9px;visibility:hidden;position:absolute;top:200px;left:0px;height:122px;width:200px; padding:1px; margin-top:1px; background-color:none;">';



   249    WEST+='    <iframe id="linksPaths" style="visibility:hidden;overflow:auto;padding:0px;border-style:outset;border-width:0px;margin:0px;width:200px;height:122px;background-color:wheat;" src="svgpaths.htm"></iframe>';



   250    WEST+=' </div> ';



   251 



   252    var SUD="";



   253    //SUD+='<img id="showcode" title="Show the code" alt="" onclick="showMarkupCode();" src="img/viewcode.gif" style="border-color:#dd7700" >';



   254    //SUD+='<img id="showmarkup" title="Show the raw markup" alt="" onclick="shm();" src="img/viewcode.gif" >';



   255    //SUD+='<img id="loadmarkup" title="Load the raw markup" alt="" onclick="lcm();" src="img/loadcode.gif" >';



   256    //SUD+='<br>&nbsp;';



   257    SUD+='<br>&nbsp;';



   258    SUD+='<input type="text"  id="someinfo" value="No Data" name="someinfo" style="width:80%;">';



   259   // SUD+='<textarea name="code" id="code"  style="width:420px;height:200px;padding:0px"></textarea>';



   260   // SUD+='<div>';



   261   // SUD+='</div>';



   262 



   263  var currentEditStatus='off'; 



   264  var currentFileStatus='off';



   265   var infoFrame, docFrame;



   266 Ext.onReady(function() {  



   267 



   268 



   269   //var map = new Ext.KeyMap(document, {  



   270   // key: [Ext.EventObject.LEFT, Ext.EventObject.RIGHT],  



   271   // ctrl: true,  



   272   // fn: keypresshandler  



   273   //});  



   274   Ext.get("FRONT").dom.innerHTML=(FRONT);



   275   Ext.get("NORTHmenu").dom.innerHTML=(NORTHmenu); 



   276   Ext.get("NORTHglobals").dom.innerHTML=(NORTHglobals);  



   277   Ext.get("NORTHoptions").dom.innerHTML=(NORTHoptions);



   278   Ext.get("EST").dom.innerHTML=(EST);



   279   Ext.get("WEST").dom.innerHTML=(WEST);    



   280   Ext.get("SUD").dom.innerHTML=(SUD); 



   281   



   282   resizeFrame();



   283   var map= new Ext.KeyMap(document, [



   284     {



   285         key: [46],//DELETE



   286         fn: function(){ c.deleteSelection(); }



   287     }, {



   288         key: "x",



   289         ctrl:true,



   290         fn: function(){ 	



   291         	c.clipboard=c.renderer.copy(c.selected);



   292 	     	c.deleteSelection();  



   293 	      }    



   294     }, {



   295         key: "c",



   296         ctrl:true,



   297         fn: function(){ 	



   298 			 c.clipboard=c.renderer.copy(c.selected);



   299 	      }	      



   300     }, {



   301         key: "d",



   302         ctrl:true,



   303         fn: function(){ 	



   304 			 c.selected=c.renderer.duplicate(c.selected);



   305 			 c.selected.id = 'shape:' + createUUID();



   306     			Ext.get(c.selected).on( "mousedown", c.onHit,c);  



   307 	      }	      



   308     }, {



   309         key: "v",



   310         ctrl:true,



   311         fn: function(){ 	



   312 			 c.selected=c.renderer.paste(c.clipboard,c.mouseDownX,c.mouseDownY);



   313 			 c.selected.id = 'shape:' + createUUID();



   314  			Ext.get(c.selected).on( "mousedown", c.onHit,c);  



   315 	      }	      



   316     }, {



   317         key: "z", //UNDO



   318         ctrl:true,



   319         shift:false,



   320         fn: function(){ c.clipboard=c.renderer.undo(); }



   321     }



   322 ]);                                  



   323 



   324   /*



   325   Ext.get("richdraw").dom.style.width=(canvasWidth);



   326   Ext.get("richdraw").dom.style.height=(canvasHeight);



   327   Ext.get("richdraw").dom.style.left=(canvasX);



   328   Ext.get("richdraw").dom.style.top=(canvasY);



   329  */ 



   330   



   331   



   332   



   333  menuEdit = new Ext.menu.Menu({



   334   id: 'menuedit',



   335   items: [



   336    {icon: "img/viewcode.gif", text: 'Copy all     ', handler: shm},



   337    {icon: "img/viewcode.gif", text: 'Paste all    ', handler: lcm},



   338    {icon: "img/viewcode.gif", text: 'Delete all   ', handler: deleteAllShapes},



   339    {icon: "img/viewcode.gif", text: 'Duplicate&nbsp;&nbsp;<b>Ctrl+d</b>', handler: duplicateSelected},



   340    {icon: "img/viewcode.gif", text: 'Cut&nbsp;&nbsp;&nbsp;&nbsp;<b>Ctrl+x</b>', handler: cutSelected},



   341    {icon: "img/viewcode.gif", text: 'Copy&nbsp;&nbsp;&nbsp;&nbsp;<b>Ctrl+c</b>', handler: copySelected},



   342    {icon: "img/viewcode.gif", text: 'Paste&nbsp;&nbsp;<b>Ctrl+v</b>', handler: pasteSelected},



   343    {icon: "img/viewcode.gif", text: 'Delete&nbsp;&nbsp;&nbsp;<b>Supr</b>', handler: deleteShape},



   344    {icon: "img/viewcode.gif", text: 'Delete last&nbsp;<b>Ctrl+z</b>', handler: deleteLastShapes},



   345 



   346   ] 



   347  });   



   348  



   349  menuFile = new Ext.menu.Menu({



   350   id: 'menufile',  



   351    



   352   items: [  



   353    new Ext.menu.Item({ icon: "img/viewcode.gif", text: 'Open    ', handler: openFile   }),



   354    new Ext.menu.Item({ icon: "img/viewcode.gif", text: 'View SVG code    ', handler: showMarkupCode   }),



   355    new Ext.menu.Item({icon: "img/viewcode.gif", text: 'View OPF code    ', handler: showMarkup   }), 



   356    new Ext.menu.Item({icon: "img/viewcode.gif", text: 'Document properties    ', handler: documentProperties   })



   357   ] 



   358  });



   359 /*



   360   items: [ 



   361    {icon: "img/viewcode.gif", text: 'View SVG code    ', handler: showMarkupCode },



   362    {icon: "img/viewcode.gif", text: 'View OPF code    ', handler: showMarkup }, 



   363    {icon: "img/viewcode.gif", text: 'Document properties    ', handler: documentProperties },



   364 



   365   ] 



   366 */ 



   367 // define the handler for mouseover/out of either button or menu itself



   368  var editHandler = function(e) 



   369  {



   370   if(currentEditStatus=='on')



   371    {



   372     var edit = menuEdit.getEl();



   373     var buttonEdit = Ext.get('edit');



   374     if(!edit.getRegion().contains(e.getPoint()) && !buttonEdit.getRegion().contains(e.getPoint()))



   375      {



   376       menuEdit.hide();



   377       currentEditStatus='off';



   378      }



   379    }



   380     else



   381    {



   382     menuEdit.show('edit');



   383     currentEditStatus='on';



   384    }



   385  }



   386 



   387  var fileHandler = function(e) 



   388  {



   389   if(currentFileStatus=='on')



   390    {



   391     var file = menuFile.getEl();



   392     var buttonFile = Ext.get('file');



   393     if(!file.getRegion().contains(e.getPoint()) && !buttonFile.getRegion().contains(e.getPoint()))



   394      {



   395       menuFile.hide();



   396       currentFileStatus='off';



   397      }



   398    }



   399     else



   400    {



   401     menuFile.show('file');



   402     currentFileStatus='on';



   403    }



   404  }



   405 



   406  // define the events to observe 



   407  Ext.get('edit').on('mouseover',editHandler);



   408  Ext.get('edit').on('mouseout',editHandler);



   409  menuEdit.getEl().on('mouseout',editHandler); 



   410  



   411  Ext.get('file').on('mouseover',fileHandler);



   412  Ext.get('file').on('mouseout',fileHandler);



   413  menuFile.getEl().on('mouseout',fileHandler);



   414 



   415 



   416  



   417 



   418 }); 



   419 



   420 //  end ONREADY 



   421 



   422 function borderDoc(){  



   423  //c.rectCanvas(docx,docy,docw,doch,viewBox)



   424      if(mode=='canvas')



   425          {  



   426          var obj=document.getElementById("rectDoc"); 



   427          if(obj){c.renderer.remove(obj) }



   428          c.renderer.rectDoc(zoominit1); 



   429          //pst.id = "rectCanvas";



   430                //c.selected=obj;



   431                 // c.renderer.remove(obj) 



   432          //var clip=c.renderer.copy(obj);



   433         



   434          



   435          



   436          //var pst=c.container.appendChild( clip );



   437          //c.renderer.paste(clip,0,0); 



   438          //pst.id = "rectCanvas";



   439          



   440          



   441          //pasteSelected();



   442 



   443           //c.renderer.duplicate(document.getElementById("rectCanvas"))



   444           //c.renderer.remove(document.getElementById("rectCanvas"));



   445          }



   446 }



   447  function demo() {   



   448     _dom=document.all?3:(document.getElementById?1:(document.layers?2:0));



   449 



   450     var renderer;



   451 



   452     if ((!ie) || (opera)) {



   453       renderer = new SVGRenderer();



   454       browser='svg';



   455       browserpath="linkspath.htm";



   456     }



   457     else {



   458       renderer = new VMLRenderer(); 



   459       browser='vml';



   460       browserpath="vmlpaths.htm";



   461     }



   462 



   463     c = new RichDrawEditor(document.getElementById('richdraw'), renderer); 



   464    



   465     c.onInputXY = function(x,y){$('xyinput').innerHTML = parseInt(x)+','+parseInt(y)}//[x,y].join("<br>")}



   466     



   467     c.onselect = onSelect;



   468     c.onunselect = onUnselect;  



   469    



   470      



   471 



   472     // c.onkeydown = keypresshandler;     



   473    //c.onkeypress = c.onKeyPress;



   474     //document.onkeypress = c.onKeyPress;



   475        



   476     



   477     



   478     c.editCommand('fillcolor', 'red');



   479     c.editCommand('linecolor', 'black');



   480     c.editCommand('linewidth', '1px');   



   481     



   482   



   483     //setMode('path', 'Path');



   484     setMode('select', 'Selection');



   485 



   486    document.body.style.backgroundColor = colorpage;     



   487  



   488 



   489   //alert(vertexSUD.SUD1[0]+' '+vertexSUD.SUD1[1]+ '--'+wndW+' '+wndH);



   490 



   491   setTimeout(loadDemo,500)    



   492   //Ext.get("richdraw").on('keydown', function(e){alert('dfsd'); }, false);



   493    //Ext.get("richdraw").on('keydown', function(e){alert(e.keyCode); });



   494     //document.onkeydown = keypresshandler;



   495 //richdraw.svgRoot.setAttributeNS(null,'viewBox', '0 0 700 500');



   496 



   497   //setTimeout(borderDoc,500)  



   498 



   499   }   //END demo



   500 



   501 



   502 /////////////////



   503 



   504 



   505 //////////////////



   506 var Docs = function(){



   507  return {



   508    init : function(){



   509     var loading = Ext.get('loading');



   510     var mask = Ext.get('loading-mask');



   511     mask.setOpacity(.7);



   512     mask.shift({



   513      xy:loading.getXY(),



   514      width:loading.getWidth(),



   515      height:loading.getHeight(),



   516      remove:true,



   517      duration:2,



   518      opacity:.8,



   519      easing:'bounceOut',



   520      callback : function(){



   521       loading.fadeOut({duration:.2,remove:true});



   522      }



   523     });



   524    }



   525   };



   526 }();



   527 



   528 



   529 Ext.onReady(Docs.init, Docs, true);



   530 



   531 function showinfoFrame(wtitle) {   



   532       var win = new Ext.Window({   



   533         closeAction: 'hide',



   534         renderTo: 'showInfo',



   535         autoScroll:true,



   536         modal:true,



   537 	width: '440',



   538 	height:'300', 



   539 	x: '120',



   540 	y: '40',



   541 	title: wtitle, 



   542 	draggable :true,



   543 	html: '', 



   544 	hidden: true,



   545 	contentEl: 'divCode',



   546 	collapsed: true 



   547 	



   548  });  



   549  win.show();



   550 } 



   551 function showdocFrame(wtitle) {   



   552       var win = new Ext.Window({ 



   553         closeAction: 'hide', 



   554         renderTo: 'showInfo',



   555        	width: '340',



   556 	height:'300', 



   557 	x: '120',



   558 	y: '40',



   559 	title: wtitle, 



   560 	draggable :true,



   561 	html: '', 



   562 	hidden: true,



   563 	contentEl: 'docProperties',



   564 	collapsed: true 



   565 	



   566  });  



   567  win.show();



   568 }    



   569 function showopenFile(wtitle) {   



   570       var win = new Ext.Window({  



   571         autoScroll:true,



   572         closeAction: 'hide', 



   573         renderTo: 'showInfo',



   574        	width: '440',



   575 	height:'300', 



   576 	x: '120',



   577 	y: '40',



   578 	title: wtitle, 



   579 	draggable :true,



   580 	html: '', 



   581 	hidden: true,



   582 	contentEl: 'divopenFile',



   583 	collapsed: true 



   584 	



   585  });  



   586  win.show();



   587 }      



   588 



   589 /////////////////////////////



   590 //FUNCTIONS 



   591 /////////////////////////////



   592 



   593 function changeInitialFile() 



   594 {  



   595    initialFile=document.forms[0].file.value; 



   596    c.renderer.removeAll()



   597    loadDemo(); 



   598   



   599 } 



   600  



   601  function setMode(mode, status) 



   602    { 



   603     



   604    



   605     selectmode=mode;



   606     if(mode=='shape')



   607      { 



   608             c.editCommand('mode', 'select');



   609      }else{              



   610             if(mode=='pathsEdit' )



   611              {



   612                 mode='select';



   613              }



   614             c.editCommand('mode', mode);



   615      }



   616      



   617      var imgs = $('EST').getElementsByTagName('img');



   618      



   619      for (var i=0; i<imgs.length; i++) 



   620      {



   621        imgs[i].style.backgroundColor = '';



   622      }



   623      if(c.pathsEdit==true){



   624        $('pathsEdit').style.backgroundColor = 'orange';



   625      }else{



   626       $(mode).style.backgroundColor = 'orange';



   627      } 



   628      



   629      



   630      if (mode == 'select') 



   631       {



   632        //$('status').innerHTML = 'Select/Move' ;



   633        info_select();



   634       } 



   635      else



   636       {



   637        //$('status').innerHTML = 'Draw ' + status;



   638       } 



   639     



   640     ///////////



   641     



   642     hiddenAllMenus();



   643 



   644     if(mode=='text')



   645      {



   646 	info_text();



   647      }



   648 



   649     if(mode=='shape')



   650      {



   651 	info_shape();



   652      }



   653     if(mode=='ellipse')



   654      {



   655 	info_ellipse();



   656      }



   657 



   658      if(mode=='rect')



   659      {



   660 	info_rect();



   661      }  



   662      



   663      if(mode=='image')



   664      {



   665 	info_image();



   666      }  



   667 



   668      if(mode=='path')



   669      {



   670 	info_path();



   671      }  



   672      if(mode=='controlpath')



   673      {



   674 	info_controlpath();



   675      }  



   676      if(mode=='zoom')



   677      {



   678 	info_zoom();



   679 	



   680      } 



   681      if(mode=='select')



   682      {  



   683         if(c.pathsEdit==true)



   684          { 



   685           info_pathsEdit();



   686          }



   687           else



   688          { 



   689 	  info_select();



   690 	 } 



   691 	



   692      }



   693      //c.renderer.zoom(0,0);   



   694      //document.getElementById('richdraw').focus();



   695      



   696   } 



   697  



   698  ///////////////////////// 



   699  



   700   function hiddenAllMenus()



   701    {     



   702         document.getElementById('richdraw').style.cursor='default'; 



   703   	$('options_text').style.visibility = 'hidden';



   704   	$('options_select_path').style.visibility = 'hidden';  



   705   	$('panel_shapes').style.visibility = 'hidden'; 



   706   	$('linksPaths').style.visibility = 'hidden';  



   707         $('options_rect').style.visibility = 'hidden';



   708         $('options_ellipse').style.visibility = 'hidden';      



   709         $('options_image').style.visibility = 'hidden';  



   710         $('options_path').style.visibility = 'hidden';   



   711         //$('options_controlpath').style.visibility = 'hidden';   



   712         $('options_zoom').style.visibility = 'hidden';   



   713         $('options_select').style.visibility = 'hidden';



   714         



   715         



   716         selectedit='';



   717    }



   718   



   719   function info_text()



   720    {



   721 	$('options_text').style.visibility = 'visible';



   722    }



   723   function info_shape()



   724    {



   725 	$('options_select_path').style.visibility = 'visible';  



   726 	$('linksPaths').style.visibility = 'visible'; 



   727 	$('panel_shapes').style.visibility= 'visible';  



   728    }



   729   function info_rect()



   730    {



   731 	$('options_rect').style.visibility = 'visible';  



   732    } 



   733   function info_ellipse()



   734    {



   735 	$('options_ellipse').style.visibility = 'visible';  



   736    } 



   737 



   738   function info_image()



   739    {



   740 	$('options_image').style.visibility = 'visible';  



   741    }   



   742   function info_path()



   743    {



   744 	$('options_path').style.visibility = 'visible'; 



   745 	



   746    }



   747   function info_controlpath()



   748    {



   749 	$('options_path').style.visibility = 'visible'; 



   750 	



   751    } 



   752    function info_zoom()



   753    {



   754 	$('options_zoom').style.visibility = 'visible';   



   755 	//$('options_zoom').style.backgroundColor = colorpage; 



   756 	if(zoommode=='hand')



   757 	 {



   758 	   document.getElementById('richdraw').style.cursor='move'; 



   759 	   



   760 	 }else{ 



   761 	    if(zoommode=='window')



   762 	     {



   763 	     



   764 	     }else{



   765 	      c.renderer.zoom(0,0);       



   766 	     }



   767 	 }



   768         var imgs = $('options_zoom').getElementsByTagName('img');



   769         for (var i=0; i<imgs.length; i++) 



   770          {



   771             imgs[i].style.backgroundColor = '';



   772          }



   773         $('zoom_'+zoommode).style.backgroundColor = 'orange';



   774         



   775        



   776         



   777    }   



   778    



   779    function info_pathsEdit(){



   780 	$('options_path').style.visibility = 'visible'; 



   781    }



   782 



   783    function info_select()



   784    {



   785 	$('options_select').style.visibility = 'visible';   



   786 	//$('options_select').style.backgroundColor = colorpage; 



   787 



   788 	if(selectedit=='deleteone')



   789 	 {



   790 	     deleteShape();



   791 	 }



   792 	if(selectedit=='deleteall')



   793 	 {



   794 	     deleteAllShapes();



   795 	 }



   796 	if(selectedit=='tothetop')



   797 	 {



   798 	     toFront(-1);



   799 	 }



   800  	if(selectedit=='totheback')



   801 	 {



   802 	     toFront(0);



   803 	 }



   804   	if(selectedit=='oneback')



   805 	 {



   806 	     toFront(1);



   807 	 }



   808    	if(selectedit=='onetop')



   809 	 {



   810 	     toFront(2);



   811 	 }



   812    	if(selectedit=='reflectV')



   813 	 {



   814 	     c.reflect('V');



   815 	 } 



   816 	if(selectedit=='reflectH')



   817 	 {



   818 	     c.reflect('H');



   819 	 }



   820 



   821         var imgs = $('options_select').getElementsByTagName('img');



   822         for (var i=0; i<imgs.length; i++) 



   823          {



   824             imgs[i].style.backgroundColor = '';



   825          } 



   826         if(selectedit != '')



   827         {



   828                 $('select_'+selectedit).style.backgroundColor = 'orange';



   829         } 



   830         



   831    }   



   832   



   833    



   834 ////////////////////////////



   835 



   836         



   837   function setShape() 



   838    {   



   839        if(selectmode=='select' || selectmode=='control_path' || selectmode=='path'){



   840           c.submitShape(document.forms[0].control_codebase.value);



   841         }else{



   842           setMode('path', 'Path'); 



   843           c.submitShape(document.forms[0].codebase.value);  



   844         }



   845    }



   846   



   847   //function onKeyPress(){



   848     //c.onKeyPress();



   849   //}



   850   



   851   



   852   function deleteShape() 



   853    {



   854     c.deleteSelection();



   855    } 



   856    



   857   function deleteAllShapes() 



   858    {



   859     c.deleteAll();



   860    } 



   861 



   862   function deleteLastShapes() 



   863    {



   864     //c.deleteLast();



   865     c.clipboard=c.renderer.undo();



   866    } 



   867   function toFront(num) 



   868    {



   869     c.toFront(num);



   870    } 



   871   function cutSelected()



   872    { 



   873      



   874      c.clipboard=c.renderer.copy(c.selected);



   875      c.deleteSelection();



   876    }   



   877   function copySelected()



   878    {



   879     c.clipboard=c.renderer.copy(c.selected);



   880    }



   881   function pasteSelected()



   882    {



   883     c.selected=c.renderer.paste(c.clipboard,c.mouseDownX,c.mouseDownY);



   884     c.selected.id = 'shape:' + createUUID();



   885     Ext.get(c.selected).on( "mousedown", c.onHit,c);  



   886    } 



   887   function duplicateSelected()



   888    { 



   889     c.selected=c.renderer.duplicate(c.selected);



   890     c.selected.id = 'shape:' + createUUID();



   891     Ext.get(c.selected).on( "mousedown", c.onHit,c);  



   892   }                           



   893 ///////////////////////////



   894 



   895                     



   896   function setFillColor(color)   //colors --



   897    {



   898     //-- var color = colors.options[colors.selectedIndex].value;



   899     //-- colors.style.backgroundColor = color;



   900     



   901     c.editCommand('fillcolor', color);



   902    }



   903   



   904   function setLineColor(color)  //colors -- 



   905    {



   906     //--var color = colors.options[colors.selectedIndex].value;



   907     //-- colors.style.backgroundColor = color;



   908 



   909     c.editCommand('linecolor', color);



   910    }



   911   



   912   function setLineWidth(width) //width --



   913    {



   914     //-- var width = widths.options[widths.selectedIndex].value;



   915     c.editCommand('linewidth', width);



   916    }



   917   ////



   918   //++



   919   function setFillOpacity(opacity) 



   920    {



   921      c.editCommand('fillopacity', opacity);



   922    } 



   923    ////



   924    //++



   925    function setLineOpacity(opacity) 



   926     {



   927      c.editCommand('lineopacity', opacity);



   928     }



   929 



   930   function setTextFamily(types) 



   931    {



   932     var type = types.options[types.selectedIndex].value;



   933     document.forms[0].option_text_family.value=type; //bad :-(



   934     data_text_family = type;



   935     c.submitShape($('option_text_message').value+'<;>'+$('option_text_size').value+'<;>'+$('option_text_family').value);



   936    }



   937 



   938   function setGridWidth(widths) 



   939    {



   940     var width = eval(widths.options[widths.selectedIndex].value);



   941     RichDrawEditor.prototype.setGrid(width, width);



   942    }



   943 



   944 ///////////////////////////////



   945   



   946 



   947   function getOptionByValue(select, value)



   948   {



   949     /*for (var i=0; i<select.length; i++) 



   950      {



   951         if (select.options[i].value == value) 



   952          {



   953             return i;



   954          }



   955     }



   956     return -1;



   957     */



   958   }      



   959   



   960 /////////////////////////////



   961 



   962  function showMarkupCode() 



   963   {



   964     $('code').value = c.renderer.getMarkup(); 



   965     //document.forms[0].code.focus();



   966     //$('code').select; 



   967     showinfoFrame('SVG code')



   968     //infoFrame.setTitle('SVG code');  



   969     //infoFrame.show();



   970     



   971   }



   972  function openFile() 



   973   {



   974     $('file').value = initialFile; 



   975     //document.forms[0].code.focus();



   976     //$('code').select; 



   977     showopenFile('Open File')



   978     //infoFrame.setTitle('SVG code');  



   979     //infoFrame.show();



   980     



   981   }



   982  function showMarkup() 



   983   {



   984    document.forms[0].code.value=Ext.util.JSON.encode(canvas(c));



   985     //infoFrame.setTitle('OPF code');



   986     //infoFrame.show();



   987      showinfoFrame('OPF code')



   988 



   989    



   990   }



   991 



   992   function shm()



   993    {



   994    var json = Ext.util.JSON.encode(canvas(c))



   995     $('someinfo').value = "JSON File Format Saved : "+( c.renderer.getMarkup().length - json.length )+" characters; JSON Character Total: "+json.length



   996     $('code').value=json;



   997    }



   998   



   999   function lcm()



  1000    {



  1001         load(Ext.util.JSON.decode(document.forms[0].code.value),c)   



  1002        



  1003    }



  1004 



  1005 ////////////////////////////////////////



  1006 



  1007   



  1008   function onSelect() 



  1009    {



  1010     /*$('fillcolor').selectedIndex = getOptionByValue($('fillcolor'), c.queryCommand('fillcolor'));



  1011     $('fillcolor').style.backgroundColor = c.queryCommand('fillcolor');



  1012     $('linecolor').selectedIndex = getOptionByValue($('linecolor'), c.queryCommand('linecolor'));



  1013     $('linecolor').style.backgroundColor = c.queryCommand('linecolor');



  1014     $('linewidth').selectedIndex = getOptionByValue($('linewidth'), c.queryCommand('linewidth'));



  1015     */ 



  1016     hiddenAllMenus();



  1017     info_select();



  1018       



  1019     if (c.selected.tagName == 'rect'){



  1020         //setMode('rect', 'Rectangle')



  1021          info_rect();



  1022      } 



  1023     if (c.selected.tagName == 'image'){



  1024          info_image();



  1025      }



  1026     if (c.selected.tagName == 'text'){



  1027           info_text();



  1028      }



  1029     if (c.selected.tagName == 'line'){ 



  1030            //info_line();



  1031      }   



  1032     if (c.selected.tagName == 'ellipse'){



  1033            info_ellipse()



  1034      }



  1035     if (c.selected.tagName == 'path') { 



  1036        



  1037            info_path();



  1038      }  



  1039     if (c.selected.tagName == 'shape'){



  1040          var detail=c.selected.children[0].tagName;



  1041          $('someinfo').value=detail;



  1042          if(detail=='path'){ info_path(); }  



  1043           if(detail=='textpath'){ info_text(); }



  1044     } 



  1045     if (c.selected.tagName == 'oval') { 



  1046        



  1047            info_ellipse();



  1048      }  



  1049  



  1050       //frames['mondrianstyle'].setcolorhex(c.queryCommand('linecolor'),'stroke');



  1051       //frames['mondrianstyle'].setcolorhex(c.queryCommand('fillcolor'),'fill');       



  1052    }



  1053 



  1054   function onUnselect() 



  1055    {  



  1056    



  1057    /*



  1058     $('fillcolor').selectedIndex = getOptionByValue($('fillcolor'), c.queryCommand('fillcolor'));



  1059     $('fillcolor').style.backgroundColor = c.queryCommand('fillcolor');



  1060     $('linecolor').selectedIndex = getOptionByValue($('linecolor'), c.queryCommand('linecolor'));



  1061     $('linecolor').style.backgroundColor = c.queryCommand('linecolor');



  1062     $('linewidth').selectedIndex = getOptionByValue($('linewidth'), c.queryCommand('linewidth'));



  1063     */ 



  1064     



  1065    } 



  1066  



  1067  function editPath(myfield,e)



  1068    {  



  1069 



  1070     var keycode;



  1071     



  1072     



  1073     // ++? if (window.event) keycode = window.event.e;



  1074      



  1075       e= (e) ? e : ((window.event) ? event : null);



  1076      keycode=e.keyCode;



  1077     var shs= myfield.id.split('_');



  1078     var sh=shs[1];  



  1079     



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



  1081     



  1082     



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



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



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



  1086 



  1087     



  1088     var mypointNum=$('option_path_num').value;



  1089     var controlNodeNum=2;  



  1090     



  1091      if (keycode == 38)//#26



  1092      {  



  1093           myfield.value=eval(myfield.value)+1; 



  1094      }    



  1095     if (keycode == 40)// #28



  1096      {       



  1097         myfield.value=eval(myfield.value)-1;   



  1098      }    



  1099     if (keycode == 13  || keycode == 40   || keycode == 38)



  1100      {



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



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



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



  1104                     



  1105       //$('code').value=coord;  



  1106       



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



  1108       



  1109       



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



  1111       



  1112       $('control_codebase').value=' ';



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



  1114       



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



  1116       //alert(myfield.id);



  1117       setShape(); //c.renderer.tocurve();



  1118 



  1119       return false;



  1120       



  1121      } 



  1122     else



  1123     return true;



  1124   }



  1125 



  1126 



  1127   function editPathXX(myfield,e)



  1128    {  



  1129 



  1130     var keycode;



  1131     



  1132     



  1133     // ++? if (window.event) keycode = window.event.e;



  1134      



  1135       e= (e) ? e : ((window.event) ? event : null);



  1136      keycode=e.keyCode;



  1137     var shs= myfield.id.split('_');



  1138     var sh=shs[1];  



  1139     



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



  1141     var mypointNum=$('option_path_num').value;



  1142     var controlNodeNum=2;  



  1143     



  1144      if (keycode == 38)//#26



  1145      {  



  1146           myfield.value=eval(myfield.value)+1; 



  1147      }    



  1148     if (keycode == 40)// #28



  1149      {       



  1150         myfield.value=eval(myfield.value)-1;   



  1151      }    



  1152   



  1153    



  1154      var points=mypath.split('C');



  1155      var chain='';



  1156      var segment=' ';  



  1157      prevControl=' ';



  1158      nextControl=' ';



  1159      nodePoint=' ';



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



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



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



  1163       



  1164       if(mypointNum==0){



  1165       



  1166              point[1]= $('option_path_x').value;



  1167              point[2]= $('option_path_y').value;



  1168              var change=point.join(',')



  1169         



  1170         chain+='M' + change+' ';



  1171          }else{  



  1172            chain+='M'+points[0]+' '; 



  1173          }  



  1174       



  1175      var numpoints=points.length-1;



  1176      if(numpoints>1){



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



  1178       { 



  1179         



  1180          if(a==mypointNum){



  1181           



  1182         segment=points[a].split(' ');



  1183          prevControl=segment[0]+' '; 



  1184          nextControl=segment[1]+' '; 



  1185          nodePoint=segment[2]+' '; 



  1186          



  1187            



  1188          /*if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}  



  1189          if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}  



  1190          if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}  



  1191          */ 



  1192          



  1193         var point=nodePoint.split(',');



  1194              point[1]= $('option_path_x').value;



  1195              point[2]= $('option_path_y').value;



  1196              var change=point.join(',')



  1197         



  1198         chain+='C'+prevControl+ nextControl + change+' ';



  1199          }else{  



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



  1201          }           



  1202          



  1203       }



  1204       



  1205      }else{                      



  1206        chain+='C'+points[1]; 



  1207      



  1208      }                      



  1209       //$('someinfo').value= chain;



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



  1211       



  1212 



  1213        



  1214     



  1215     



  1216     if (keycode == 13  || keycode == 40   || keycode == 38)



  1217      { 



  1218       //alert(myfield.id);



  1219        c.renderer.tocurve();



  1220 



  1221       return false;



  1222       



  1223      } 



  1224     else



  1225     return true;



  1226   }



  1227 



  1228 



  1229   



  1230   function edit(myfield,e)



  1231    { 



  1232    



  1233     var keycode;



  1234     



  1235     



  1236     // ++? if (window.event) keycode = window.event.e;



  1237     //else if (e) keycode = e.which;



  1238      



  1239       e= (e) ? e : ((window.event) ? event : null);



  1240      keycode=e.keyCode;



  1241    //var keycode = e.which?e.which:e.keycode 



  1242     



  1243     //document.layers ? e.which :



  1244     //document.all ? e.keyCode :



  1245     //document.getElementById ? e.keyCode : 0;



  1246     //else return true;               



  1247     var keyChar = String.fromCharCode(keycode);



  1248     //var numCheck = /\d/;



  1249      //if (((keyChar=='.')&&(obj.value.indexOf('.')==-1))¦¦(keycode<32)¦¦numCheck.test(keyChar)¦¦((keycode>=37)&&(keycode<=40)&&(!e.modifiers&&!e.shiftKey))) { 



  1250     



  1251     //alert(keycode+' _ '+keyChar); 



  1252     var shs= myfield.id.split('_');



  1253     var sh=shs[1];



  1254   if(myfield.id.indexOf('control_codebase')<=0) 



  1255   {



  1256      if (keycode == 38)//#26



  1257      {  



  1258        



  1259        if(eval(myfield.value)>0) 



  1260         {   



  1261           myfield.value=eval(myfield.value)+1; 



  1262           //alert(myfield.value);



  1263         }  



  1264        //return false;



  1265        //alert('keycode')         



  1266        



  1267      }    



  1268     if (keycode == 40)// #28



  1269      {       



  1270         myfield.value=eval(myfield.value)-1;   



  1271         if(myfield.id=='option_path_sclx'  || myfield.id=='option_path_scly')



  1272          {



  1273            if( eval(myfield.value)<=0  )



  1274             {



  1275               myfield.value=1;



  1276             }



  1277          }  



  1278          



  1279         if(myfield.id=='option_text_size')



  1280          {



  1281            if( eval(myfield.value)<=0  )



  1282             {



  1283               myfield.value=1;



  1284             }



  1285          }



  1286      }    



  1287        



  1288   }  



  1289     



  1290     if (keycode == 13  || keycode == 40   || keycode == 38)



  1291      { 



  1292       var check=0;



  1293       if(myfield.id=='control_codebase') 



  1294        { 



  1295          //alert(myfield.id)



  1296          //c.submitShape($('control_codebase').value+'');



  1297          check=1;



  1298          setShape();



  1299        }  



  1300 



  1301       if(myfield.id.indexOf('href')>0) 



  1302        {



  1303          c.submitShape(myfield.value)



  1304        }



  1305          



  1306       if(myfield.id.indexOf('tr')>0 || myfield.id.indexOf('scl')>0)



  1307        {



  1308              if(check==0)



  1309               {



  1310                  c.submitShape($('option_'+sh+'_trx').value+';'+$('option_'+sh+'_try').value+';'+$('option_'+sh+'_sclx').value+';'+$('option_'+sh+'_scly').value+';'+$('option_'+sh+'_rot').value)



  1311                }  



  1312        } 



  1313        



  1314       if(myfield.id.indexOf('rot')>0) 



  1315        {



  1316          c.submitShape($('option_'+sh+'_trx').value+';'+$('option_'+sh+'_try').value+';'+$('option_'+sh+'_sclx').value+';'+$('option_'+sh+'_scly').value+';'+$('option_'+sh+'_rot').value)



  1317        }  



  1318        



  1319       if(myfield.id.indexOf('text')>0) 



  1320        {



  1321          c.submitShape($('option_text_message').value+'<;>'+$('option_text_size').value+'<;>'+$('option_text_family').value);



  1322        }  



  1323       //alert(myfield.id);



  1324       return false;



  1325       



  1326      } 



  1327     else



  1328     return true;



  1329   }



  1330 



  1331 



  1332  



  1333 



  1334 function env(myfield,delta)



  1335  {



  1336   



  1337     //alert(keycode+' _ '+keyChar); 



  1338     



  1339      if (delta >0)//#26



  1340      {     



  1341        myfield.value=eval(myfield.value)+1; 



  1342        //return false;



  1343        //alert('keycode')



  1344      }    



  1345       else



  1346            {     



  1347        myfield.value=eval(myfield.value)-1;



  1348        //return false;



  1349      }



  1350     



  1351     



  1352       if(myfield.id=='option_image_href') 



  1353        {



  1354          c.submitShape(myfield.value)



  1355        }  



  1356        if(myfield.id=='option_select_trx' || myfield.id=='option_select_try' || myfield.id=='option_select_sclx'  || myfield.id=='option_select_scly') 



  1357        {



  1358          c.submitShape($('option_select_trx').value+';'+$('option_select_try').value+';'+$('option_select_sclx').value+';'+$('option_select_scly').value+';'+$('option_select_rot').value)



  1359        }



  1360        if(myfield.id=='option_select_rot') 



  1361        {



  1362          c.submitShape($('option_select_trx').value+';'+$('option_select_try').value+';'+$('option_select_sclx').value+';'+$('option_select_scly').value+';'+$('option_select_rot').value)



  1363        }  



  1364  



  1365     }  



  1366 



  1367 



  1368    function clockdata(){



  1369   //////////////



  1370   //++



  1371         



  1372    data_path_close = $('option_path_close').checked;



  1373    data_text_family = $('option_text_family').value; 



  1374    data_text_size = parseFloat($('option_text_size').value);



  1375    data_text_messaje = $('option_text_message').value;  



  1376    data_image_href = $('option_image_href').value;



  1377  



  1378   ////////////          



  1379   }



  1380 



  1381  function myWorkSize() {



  1382   var myWidth = 0, myHeight = 0;



  1383   if( typeof( window.innerWidth ) == 'number' ) {



  1384     //Non-IE



  1385     myWidth = window.innerWidth;



  1386     myHeight = window.innerHeight;



  1387   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {



  1388     //IE 6+ in 'standards compliant mode'



  1389     myWidth = document.documentElement.clientWidth;



  1390     myHeight = document.documentElement.clientHeight;



  1391   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {



  1392     //IE 4 compatible



  1393     myWidth = document.body.clientWidth;



  1394     myHeight = document.body.clientHeight;



  1395   }



  1396   return [ myWidth, myHeight] ;



  1397 } 



  1398  



  1399 function doResize(){  



  1400      //deleteAllShapes(); 



  1401  vertexFrames();



  1402  resizeFrame();  



  1403     //c.renderer.zoomFrame(zoominit); 



  1404  //c.renderer.view(canvasX,canvasY,canvasW,canvasH,zoominit)



  1405  //c.renderer.view(docx,docy,docw,doch,zoominit1)  



  1406     // delete rectCanvas 



  1407  //   var vB=zoomx+' '+zoomy+' '+zoomw+' '+zoomh;



  1408     



  1409      //c.renderer.rectCanvas(docx,docy,docw,doch,vB);



  1410 }



  1411 



  1412 function vertexFrames(){



  1413 



  1414   var screenSize=myWorkSize();



  1415    scrW = screenSize[0];//screen.availWidth;



  1416    scrH = screenSize[1];//screen.availHeight; 



  1417   



  1418    wndW=scrW;//window.width;



  1419    wndH=scrH;//window.height;



  1420   



  1421   



  1422   if (scrW != wndW || scrH != wndH) {



  1423       //window.resizeTo(scrW, scrH);



  1424       //window.moveTo(0, 0);



  1425   }



  1426   //var wProportion={x:35, y:24}



  1427   



  1428    vertexNORTHmenu={ NORTHmenu1:[0,0],NORTHmenu2:[scrW,0],NORTHmenu3:[0,wProportion.y],NORTHmenu4:[scrW,wProportion.y] };



  1429    vertexNORTHglobals={ NORTHglobals1:[0,wProportion.y],NORTHglobals2:[scrW,wProportion.y],NORTHglobals3:[0,wProportion.y*2],NORTHglobals4:[scrW,wProportion.y*2] };



  1430    vertexNORTHoptions={ NORTHoptions1:[0,wProportion.y*2],NORTHoptions2:[scrW,wProportion.y*2],NORTHoptions3:[0,wProportion.y*3],NORTHoptions4:[scrW,wProportion.y*3] };    



  1431    vertexSUD={ SUD1:[0,wndH-wProportion.y*3], SUD2:[scrW,(wndH-wProportion.y*3)], SUD3:[0,wndH], SUD4:[scrW,wndH]};



  1432    vertexEST={ EST1:[0,wProportion.y*3], EST2:[wProportion.x,wProportion.y*3], EST3:[0,(wndH-wProportion.y*3)], EST4:[wProportion.x,(wndH-wProportion.y*3)] };



  1433    vertexWEST={ WEST1:[(scrW-wProportion.x*3),wProportion.y*3], WEST2:[scrW,wProportion.y*3], WEST3:[(scrW-wProportion.x*3),(wndH-wProportion.y*3)], WEST4:[scrW,(wndH-wProportion.y*3)] };



  1434    vertexFRONT={ FRONT1:[vertexEST.EST2[0],vertexEST.EST2[1]], FRONT2:[vertexWEST.WEST1[0],vertexWEST.WEST1[1]], FRONT3:[vertexEST.EST4[0],vertexEST.EST4[1]], FRONT4:[vertexWEST.WEST3[0],vertexWEST.WEST3[1]] };



  1435  



  1436    NORTHmenusize=[vertexNORTHmenu.NORTHmenu4[0]-vertexNORTHmenu.NORTHmenu1[0],vertexNORTHmenu.NORTHmenu4[1]-vertexNORTHmenu.NORTHmenu1[1]];



  1437    NORTHglobalssize=[vertexNORTHglobals.NORTHglobals4[0]-vertexNORTHglobals.NORTHglobals1[0],vertexNORTHglobals.NORTHglobals4[1]-vertexNORTHglobals.NORTHglobals1[1]];



  1438    NORTHoptionssize=[vertexNORTHoptions.NORTHoptions4[0]-vertexNORTHoptions.NORTHoptions1[0],vertexNORTHoptions.NORTHoptions4[1]-vertexNORTHoptions.NORTHoptions1[1]];  



  1439    SUDsize=[vertexSUD.SUD4[0]-vertexSUD.SUD1[0],vertexSUD.SUD4[1]-vertexSUD.SUD1[1]]; 



  1440    ESTsize=[vertexEST.EST4[0]-vertexEST.EST1[0],vertexEST.EST4[1]-vertexEST.EST1[1]]; 



  1441    WESTsize=[vertexWEST.WEST4[0]-vertexWEST.WEST1[0],vertexWEST.WEST4[1]-vertexWEST.WEST1[1]]; 



  1442    FRONTsize=[vertexFRONT.FRONT4[0]-vertexFRONT.FRONT1[0],vertexFRONT.FRONT4[1]-vertexFRONT.FRONT1[1]]; 



  1443    



  1444 



  1445    



  1446    //percent of FRONTsize



  1447    proporDoc= FRONTsize[0]/FRONTsize[1];



  1448    canvasYpercent=100;



  1449    canvasXpercent=100;



  1450    canvasWidth=Math.round(FRONTsize[0]*canvasXpercent/100);//FRONTsize[0];  



  1451    canvasW=canvasWidth;  



  1452    canvasHeight=Math.round(canvasYpercent*FRONTsize[1]/100);//FRONTsize[1];  



  1453    canvasH=canvasHeight;



  1454    canvasX=Math.round((FRONTsize[0]-canvasW)/2); 



  1455    canvasY=Math.round((FRONTsize[1]-canvasH)/2);



  1456 



  1457 



  1458    //vertexFRONTcanvas={ FRONT1:[vertexEST.EST2[0],vertexEST.EST2[1]], FRONT2:[vertexWEST.WEST1[0],vertexWEST.WEST1[1]], FRONT3:[vertexEST.EST4[0],vertexEST.EST4[1]], FRONT4:[vertexWEST.WEST3[0],vertexWEST.WEST3[1]] };



  1459    //FRONTcanvassize=[vertexFRONT.FRONT4[0]-vertexFRONT.FRONT1[0],vertexFRONT.FRONT4[1]-vertexFRONT.FRONT1[1]]; 



  1460 



  1461    



  1462    //centerZoomx=Math.round(canvasWidth/2);



  1463    //centerZoomy=Math.round(canvasHeight/2);  



  1464     if(canvasH==0){ canvasH=0.00000001; }



  1465     proporCanvas= canvasW/canvasH ;    



  1466    //zoominit='0 0 '+zoomw+' '+zoomh;// 



  1467    



  1468    makeWorkSite(canvasH,(-canvasW/2)+(docw/2),(-canvasH/2)+(doch/2));



  1469    diagonalinit=diagonalFrame;



  1470    proporDiagonal=diagonalFrame/diagonalinit;  



  1471    zoominit=(zoomx)+' '+(zoomy)+' '+zoomw+' '+zoomh;  



  1472    //$('someinfo').value= zoominit;



  1473    //document.forms[0].someinfo.value= zoominit; 



  1474    //document.getElementById("someinfo").value = zoominit



  1475    //Ext.get('richdraw').dom.style.scrollTop = ('40%');



  1476    //alert(zoominit);



  1477 }



  1478 



  1479 function resizeFrame(){



  1480   



  1481   Ext.get('NORTHmenu').dom.style.backgroundColor = (colorpage1a);   



  1482   Ext.get('NORTHglobals').dom.style.backgroundColor = (colorpage1b);   



  1483   Ext.get('NORTHoptions').dom.style.backgroundColor = (colorpage1c);   



  1484 



  1485   Ext.get('SUD').dom.style.backgroundColor = (colorpage2); 



  1486   Ext.get('EST').dom.style.backgroundColor = (colorpage3); 



  1487   Ext.get('WEST').dom.style.backgroundColor = (colorpage4);   



  1488   



  1489   Ext.get('linksPaths').dom.style.backgroundColor = (colorpage); // bad



  1490   



  1491 



  1492   Ext.get('NORTHmenu').dom.style.left =(vertexNORTHmenu.NORTHmenu1[0]+'px'); Ext.get('NORTHmenu').dom.style.top =(vertexNORTHmenu.NORTHmenu1[1]+'px');Ext.get('NORTHmenu').dom.style.width =(NORTHmenusize[0]+'px'); Ext.get('NORTHmenu').dom.style.height = (NORTHmenusize[1]+'px');



  1493   Ext.get('NORTHglobals').dom.style.left =(vertexNORTHglobals.NORTHglobals1[0]+'px'); Ext.get('NORTHglobals').dom.style.top =(vertexNORTHglobals.NORTHglobals1[1]+'px');Ext.get('NORTHglobals').dom.style.width =(NORTHglobalssize[0]+'px'); Ext.get('NORTHglobals').dom.style.height =(NORTHglobalssize[1]+'px');



  1494   Ext.get('NORTHoptions').dom.style.left =(vertexNORTHoptions.NORTHoptions1[0]+'px'); Ext.get('NORTHoptions').dom.style.top =(vertexNORTHoptions.NORTHoptions1[1]+'px');Ext.get('NORTHoptions').dom.style.width =(NORTHoptionssize[0]+'px'); Ext.get('NORTHoptions').dom.style.height =(NORTHoptionssize[1]+'px');



  1495   Ext.get('SUD').dom.style.left =(vertexSUD.SUD1[0]+'px'); Ext.get('SUD').dom.style.top =(vertexSUD.SUD1[1]+'px');Ext.get('SUD').dom.style.width=(SUDsize[0]+'px'); Ext.get('SUD').dom.style.height =(SUDsize[1]+'px');



  1496   Ext.get('EST').dom.style.left =(vertexEST.EST1[0]+'px'); Ext.get('EST').dom.style.top =(vertexEST.EST1[1]+'px');Ext.get('EST').dom.style.width=(ESTsize[0]+'px'); Ext.get('EST').dom.style.height =((ESTsize[1]+'px'));



  1497   Ext.get('WEST').dom.style.left =(vertexWEST.WEST1[0]+'px'); Ext.get('WEST').dom.style.top =(vertexWEST.WEST1[1]+'px');Ext.get('WEST').dom.style.width=(WESTsize[0]+'px'); Ext.get('WEST').dom.style.height =((WESTsize[1]+'px'));



  1498   Ext.get('FRONT').dom.style.left =(vertexFRONT.FRONT1[0]+'px'); Ext.get('FRONT').dom.style.top =(vertexFRONT.FRONT1[1]+'px');Ext.get('FRONT').dom.style.width=(FRONTsize[0]+'px'); Ext.get('FRONT').dom.style.height =(FRONTsize[1]+'px');



  1499   



  1500   Ext.get('richdraw').dom.style.left =(canvasX+'px'); Ext.get('richdraw').dom.style.top =(canvasY+'px');Ext.get('richdraw').dom.style.width=(canvasW+'px'); Ext.get('richdraw').dom.style.height =(canvasH+'px');



  1501  



  1502 }



  1503 



  1504 function documentProperties(){   



  1505     document.forms[0].xDocument.value=docx;



  1506     document.forms[0].yDocument.value=docy;



  1507 



  1508     document.forms[0].widthDocument.value=docw;



  1509     document.forms[0].heightDocument.value=doch; 



  1510     showdocFrame('Document properties')



  1511     //docFrame.setTitle('Document properties');



  1512     //docFrame.show();



  1513 



  1514 }



  1515 function changeDocumentProperties(){ 



  1516 



  1517     //percent of FRONTsize



  1518    proporSpace= FRONTsize[0]/FRONTsize[1];



  1519    //PERCENT 



  1520    



  1521    //canvasYpercent=95;



  1522    //canvasXpercent=97;



  1523    /*



  1524    canvasWidth=Math.round(FRONTsize[0]*canvasXpercent/100);//FRONTsize[0];  



  1525    canvasW=canvasWidth;  



  1526    canvasHeight=Math.round(canvasYpercent*FRONTsize[1]/100);//FRONTsize[1];  



  1527    canvasH=canvasHeight;



  1528    */ 



  1529    docx=eval(document.forms[0].xDocument.value);



  1530    docy=eval(document.forms[0].yDocument.value); 



  1531 



  1532    docw=eval(document.forms[0].widthDocument.value);



  1533    doch=eval(document.forms[0].heightDocument.value); 



  1534    zoominit1= docx+' '+docy+' '+docw+' '+doch;



  1535    c.renderer.view(docx,docy,docw,doch,zoominit1);



  1536     borderDoc();



  1537   



  1538    //doResize();



  1539    //canvasX=Math.round((FRONTsize[0]-canvasW)/2); 



  1540    //canvasY=Math.round((FRONTsize[1]-canvasH)/2);



  1541 



  1542  



  1543   //Ext.get('richdraw').dom.style.left =(canvasX+'px'); Ext.get('richdraw').dom.style.top =(canvasY+'px');Ext.get('richdraw').dom.style.width=(canvasW+'px'); Ext.get('richdraw').dom.style.height =(canvasH+'px');



  1544 



  1545 }                 



  1546 function makeWorkSite(width,left,top) {



  1547     fieldViewx=Math.round(width*proporCanvas)*1; 



  1548     fieldViewy=width*1;  



  1549     diagonalFrame=dist2p(0,0,fieldViewx*1,fieldViewy*1);



  1550     diagonalAngle=getAngle(fieldViewx,fieldViewy);                                  



  1551     diagonalMidx=fieldViewx/2; 



  1552     diagonalMidy=fieldViewy/2;   



  1553     centerZoomx=diagonalMidx;



  1554     centerZoomy=diagonalMidy;   



  1555        



  1556     //alert(diagonalinit+' '+diagonalFrame+'    '+proporDiagonal);



  1557     //alert(canvasW+''+canvasW+' propor:'+proporCanvas+' Docy:'+docy+' fieldView:'+fieldViewx+' '+fieldViewy);



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



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



  1560     zoomw=diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle);//fieldViewx*1.25;//docw+fieldViewx*2;



  1561     zoomh=diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle);//fieldViewy*1.25;//doch+fieldViewy*2;    



  1562 }



  1563 function RichDrawViewer(elem, renderer) {



  1564 this.container = elem;



  1565 this.renderer = renderer;



  1566 this.renderer.init(this.container);



  1567 this.renderer.editor = this;



  1568 }          



  1569 /*



  1570 onResize : function(){



  1571 	        Ext.TabPanel.superclass.onResize.apply(this, arguments);



  1572  	        this.delegateUpdates();



  1573  	    },



  1574  	 */