Mercurial > laserkard

     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  	 */