Mercurial > laserkard

annotate onlypaths/js/application.js @ 73:5fb0e5db5926 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
ready to load live site to server
author Robert McIntyre <rlm@mit.edu>
date Wed, 23 Jun 2010 10:14:46 -0400
parents 26c2b3ad21c7
children
rev   line source
rlm@46 1
rlm@46 2 /*
rlm@46 3 *
rlm@46 4 */
rlm@46 5
rlm@46 6 Ext.BLANK_IMAGE_URL = 'theme/images/default/s.gif';
rlm@46 7
rlm@46 8 if(typeof console != 'object') {
rlm@46 9 console = {};
rlm@46 10 console.log = function(){return false;};
rlm@46 11 }
rlm@46 12
rlm@46 13
rlm@46 14 function $(e){return Ext.get(e).dom}
rlm@46 15 var c, browser, browserpath;
rlm@46 16 var colorpage="#ccccdd";
rlm@46 17 var colorpage1a="#ee00aa"; //north
rlm@46 18 var colorpage1b="#ee00cc";
rlm@46 19 var colorpage1c="#ee00ee";
rlm@46 20 var colorpage2="#77aaaa"; //sud
rlm@46 21 var colorpage3="#ddee00"; //est
rlm@46 22 var colorpage4="#ccee00"; //west
rlm@46 23
rlm@46 24 var selectmode='';
rlm@46 25 var selectedit='';
rlm@46 26
rlm@46 27
rlm@46 28 ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
rlm@46 29 opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
rlm@46 30
rlm@46 31
rlm@46 32
rlm@46 33 window.onresize = doResize;
rlm@46 34 var initialFile='onerobot.txt';
rlm@46 35 var docx=0;
rlm@46 36 var docy=0;
rlm@46 37 var docw=600;
rlm@46 38 var doch=400;
rlm@46 39 var canvasWidth=600;//FRONTsize[0];
rlm@46 40 var canvasW=canvasWidth;
rlm@46 41 var canvasHeight=400;//FRONTsize[1];
rlm@46 42 var canvasH=canvasHeight;
rlm@46 43 var canvasX=0;
rlm@46 44 var canvasY=0;
rlm@46 45 var zoomx=docx;
rlm@46 46 var zoomy=docy;
rlm@46 47 var zoomw=docw;
rlm@46 48 var zoomh=doch;
rlm@46 49 var marginx=0;
rlm@46 50 var marginy=0;
rlm@46 51 var margin=100;
rlm@46 52 var screenSize=myWorkSize();
rlm@46 53 var scrW = screenSize[0];//screen.availWidth;
rlm@46 54 var scrH = screenSize[1];//screen.availHeight;
rlm@46 55
rlm@46 56 var canvasYpercent=100;
rlm@46 57 var canvasXpercent=100;
rlm@46 58
rlm@46 59
rlm@46 60 //?
rlm@46 61 var wndW=scrW;//window.width;
rlm@46 62 var wndH=scrH;//window.height;
rlm@46 63 //
rlm@46 64 var proporWindow= scrW/scrH;
rlm@46 65 var proporCanvas=canvasW/canvasH;
rlm@46 66 var proporDoc=docw/doch;
rlm@46 67 var proporZoom= zoomw/zoomh;
rlm@46 68 var proporx=proporCanvas; //IE
rlm@46 69 var propory=1; //IE
rlm@46 70 var viewMode='canvas';//'canvas' or 'preview'
rlm@46 71
rlm@46 72 var zoominit=docx+' '+docy+' '+docw+' '+doch;
rlm@46 73 var zoominit1 =zoominit;
rlm@46 74 var zoominit2 =zoominit;
rlm@46 75
rlm@46 76 var fieldViewx=Math.round(canvasH*proporCanvas);
rlm@46 77 var fieldViewy=canvasH;
rlm@46 78 var diagonalFrame=dist2p(0,0,fieldViewx,fieldViewy);
rlm@46 79 var diagonalAngle=getAngle(fieldViewx,fieldViewy);
rlm@46 80 var diagonalinit=diagonalFrame;
rlm@46 81 //alert(diagonalinit);
rlm@46 82
rlm@46 83 // double?
rlm@46 84 var diagonalMidx=fieldViewx/2;
rlm@46 85 var diagonalMidy=fieldViewy/2;
rlm@46 86 var centerZoomx=diagonalMidx;//Math.round(zoomw/2);
rlm@46 87 var centerZoomy=diagonalMidy;//Math.round(zoomh/2);
rlm@46 88 //
rlm@46 89
rlm@46 90
rlm@46 91 var proporDiagonal=diagonalFrame/diagonalinit;
rlm@46 92 //////////////////////////
rlm@46 93
rlm@46 94 var wProportion={x:35, y:24}
rlm@46 95
rlm@46 96 var vertexNORTHmenu={};
rlm@46 97 var vertexNORTHglobals={};
rlm@46 98 var vertexNORTHoptions={};
rlm@46 99 var vertexSUD={};
rlm@46 100 var vertexEST={};
rlm@46 101 var vertexWEST={};
rlm@46 102 var vertexFRONT={};
rlm@46 103
rlm@46 104 var NORTHmenusize=[];
rlm@46 105 var NORTHglobalssize=[];
rlm@46 106 var NORTHoptionssize=[];
rlm@46 107 var SUDsize=[];
rlm@46 108 var ESTsize=[];
rlm@46 109 var WESTsize=[];
rlm@46 110 var FRONTsize=[];
rlm@46 111
rlm@46 112
rlm@46 113 vertexFrames();
rlm@46 114
rlm@46 115
rlm@46 116 var FRONT='';
rlm@46 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>';
rlm@46 118
rlm@46 119 var NORTHmenu='';
rlm@46 120 NORTHmenu+='&nbsp;&nbsp;<span id="file">File</span>&nbsp;&nbsp;<span id="edit">Edit</span>&nbsp;&nbsp;<span id="view">View</span>';
rlm@46 121
rlm@46 122 var NORTHglobals='';
rlm@46 123 NORTHglobals+='<span id="options_select" style="visibility:visible;position:relative;top:0px;left:'+canvasX+'px; padding:1px; margin-top:1px; background-color:transparent;">';
rlm@46 124 NORTHglobals+=' <img id="select_deleteone" title="Delete one" onclick="selectedit='+"'"+'deleteone'+"'"+';info_select()" src="img/delete.gif" >';
rlm@46 125 NORTHglobals+=' <img id="select_deleteall" title="Delete all" onclick="selectedit='+"'"+'deleteall'+"'"+';info_select()" src="img/reset.gif" >'
rlm@46 126 NORTHglobals+=' <img id="select_tothetop" title="To the top" onclick="selectedit='+"'"+'tothetop'+"'"+';info_select()" src="img/tothetop.gif" >';
rlm@46 127 NORTHglobals+=' <img id="select_totheback" title="To the back" onclick="selectedit='+"'"+'totheback'+"'"+';info_select()" src="img/totheback.gif" >';
rlm@46 128 NORTHglobals+=' <img id="select_onetop" title="One top" onclick="selectedit='+"'"+'onetop'+"'"+';info_select()" src="img/onetop.gif" >';
rlm@46 129 NORTHglobals+=' <img id="select_oneback" title="One back" onclick="selectedit='+"'"+'oneback'+"'"+';info_select()" src="img/oneback.gif" >';
rlm@46 130 NORTHglobals+=' <img id="select_reflectV" title="Vertical reflect" onclick="selectedit='+"'"+'reflectV'+"'"+';info_select()" src="img/reflect_h.gif" >',
rlm@46 131 NORTHglobals+=' <img id="select_reflectH" title="Horizontal reflect" onclick="selectedit='+"'"+'reflectH'+"'"+';info_select()" src="img/reflect_v.gif" >';
rlm@46 132 NORTHglobals+='</span>';
rlm@46 133
rlm@46 134 var NORTHoptions='';
rlm@46 135 // <!-- OPTIONS_SELECT_PATH -->
rlm@46 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:transparent;">';
rlm@46 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">';
rlm@46 138 NORTHoptions+='</div>';
rlm@46 139 // <!-- OPTIONS_RECT -->
rlm@46 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:transparent;">';
rlm@46 141 NORTHoptions+=' trX<input id="option_rect_trx" type="text" size="1" style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 142 NORTHoptions+=' trY<input id="option_rect_try" type="text" size="1" style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">';
rlm@46 143 NORTHoptions+=' wx<input id="option_rect_sclx" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 144 NORTHoptions+=' wy<input id="option_rect_scly" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 145 NORTHoptions+=' rot<input id="option_rect_rot" type="text" size="1" style="background-color:#ffdddd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 146 NORTHoptions+='</div>';
rlm@46 147 // <!-- OPTIONS_IMAGE -->
rlm@46 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:transparent;">';
rlm@46 149 NORTHoptions+=' trX<input id="option_img_trx" type="text" size="1" style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 150 NORTHoptions+=' trY<input id="option_img_try" type="text" size="1" style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">';
rlm@46 151 NORTHoptions+=' wx<input id="option_img_sclx" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 152 NORTHoptions+=' wy<input id="option_img_scly" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 153 NORTHoptions+=' rot<input id="option_img_rot" type="text" size="1" style="background-color:#ffdddd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 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)">';
rlm@46 155 NORTHoptions+='</div>';
rlm@46 156 //<!-- OPTIONS_PATH -->
rlm@46 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:transparent;">';
rlm@46 158 NORTHoptions+=' trX<input id="option_path_trx" type="text" size="1" style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 159 NORTHoptions+=' trY<input id="option_path_try" type="text" size="1" style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">';
rlm@46 160 NORTHoptions+=' <input id="option_path_sclx" type="hidden" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 161 NORTHoptions+=' <input id="option_path_scly" type="hidden" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 162 NORTHoptions+=' rot<input id="option_path_rot" type="text" size="1" style="background-color:#ffdddd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 163 NORTHoptions+=' Open/Close: <input CHECKED name="option_path_close" id="option_path_close" type="checkbox">';
rlm@46 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)">';
rlm@46 165 NORTHoptions+=' <img style="cursor:pointer" align="top" title="to curve" onclick="c.renderer.tocurve();" src="img/tocurve.gif">';
rlm@46 166 NORTHoptions+=' <input id="option_path_num" type="hidden" size="1" style="background-color:#ffdddd" value="0">';
rlm@46 167 NORTHoptions+=' Px<input id="option_path_x" type="text" size="1" style="background-color:#ffdddd" value="0" onKeyPress="return editPath(this,event)">';
rlm@46 168 NORTHoptions+=' Py<input id="option_path_y" type="text" size="1" style="background-color:#ffdddd" value="0" onKeyPress="return editPath(this,event)">';
rlm@46 169 NORTHoptions+='</div>';
rlm@46 170 //<!--OPTIONS ELLIPSE-->
rlm@46 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:transparent;">';
rlm@46 172 NORTHoptions+=' trX<input id="option_ellipse_trx" type="text" size="1" style="background-color:#ffffdd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 173 NORTHoptions+=' trY<input id="option_ellipse_try" type="text" size="1" style="background-color:#ffffdd" value="0"onKeyPress="return edit(this,event)">';
rlm@46 174 NORTHoptions+=' wx<input id="option_ellipse_sclx" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 175 NORTHoptions+=' wy<input id="option_ellipse_scly" type="text" size="1" style="background-color:#ddffdd" value="1" onKeyPress="return edit(this,event)">';
rlm@46 176 NORTHoptions+=' rot<input id="option_ellipse_rot" type="text" size="1" style="background-color:#ffdddd" value="0" onKeyPress="return edit(this,event)">';
rlm@46 177 NORTHoptions+='</div>';
rlm@46 178 //<!-- OPTIONS_ZOOM -->
rlm@46 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:transparent;">';
rlm@46 180 NORTHoptions+=' <img id="zoom_more" title="More zoom" onclick="zoommode='+"'"+'more'+"'"+';info_zoom()" src="img/zoom_more.gif" >';
rlm@46 181 NORTHoptions+=' <img id="zoom_minus" title="Minus zoom" onclick="zoommode='+"'"+'minus'+"'"+';info_zoom()" src="img/zoom_minus.gif" >';
rlm@46 182 NORTHoptions+=' <img id="zoom_frame" title="Frame zoom" onclick="zoommode='+"'"+'frame'+"'"+';info_zoom()" src="img/zoom_frame.gif" >';
rlm@46 183 NORTHoptions+=' <img id="zoom_window" title="Window zoom" onclick="zoommode='+"'"+'window'+"'"+';info_zoom()" src="img/zoom_window.gif" >';
rlm@46 184 NORTHoptions+=' <img id="zoom_hand" title="Hand zoom" onclick="zoommode='+"'"+'hand'+"'"+';info_zoom()" src="img/zoom_hand.gif" >';
rlm@46 185 NORTHoptions+='</div>';
rlm@46 186 //<!-- OPTIONS TEXT-->
rlm@46 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;">';
rlm@46 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" />';
rlm@46 189 NORTHoptions+=' Size:<input type="text" size="3" id="option_text_size" name="option_text_size" value="30" onKeyPress="return edit(this,event)" style="">';
rlm@46 190 NORTHoptions+=' Family:<select id="select_option_text_family" name="select_option_text_family" onchange="setTextFamily(this);" style="font-size:9px;">';
rlm@46 191 NORTHoptions+=' <option style="font-family:Arial;" value="Arial">Arial</option>';
rlm@46 192 NORTHoptions+=' <option style="font-family:Verdana;" value="Verdana">Verdana</option>';
rlm@46 193 NORTHoptions+=' <option style="font-family:Times;" value="Times">Times</option>';
rlm@46 194 NORTHoptions+=' <option style="font-family:Times;" value="Tahoma">Tahoma</option>';
rlm@46 195 NORTHoptions+=' <option style="font-family:Times;" value="Impact">Impact</option>';
rlm@46 196 NORTHoptions+=' </select>';
rlm@46 197 NORTHoptions+=' <input type="hidden" name="option_text_family" id="option_text_family" value="Arial" >';
rlm@46 198 NORTHoptions+='</div>';
rlm@46 199
rlm@46 200
rlm@46 201 var EST='';
rlm@46 202 EST+='<img id="select" title="Select shapes" onclick="c.pathsEdit=false; setMode('+"'"+'select'+"'"+', '+"'"+'Selection'+"'"+');" src="img/select3.gif" >';
rlm@46 203 EST+='<img id="pathsEdit" title="Edit path" onclick="c.pathsEdit=true; setMode('+"'"+'pathsEdit'+"'"+', '+"'"+'Path Edit'+"'"+');" src="img/editpath.gif" >';
rlm@46 204 EST+='<img id="zoom" title="Select zoom" onclick="setMode('+"'"+'zoom'+"'"+', '+"'"+'Zoom'+"'"+');" src="img/zoom.gif" >';
rlm@46 205 EST+='<img id="rect" title="Draw a rectangle" onclick="setMode('+"'"+'rect'+"'"+', '+"'"+'Rectangle'+"'"+');" src="img/rectangle.gif" >';
rlm@46 206 EST+='<img id="roundrect" title="Draw a rounded rectangle" onclick="setMode('+"'"+'roundrect'+"'"+', '+"'"+'Rounded Rectangle'+"'"+');" src="img/roundrect.gif" >';
rlm@46 207 EST+='<img id="ellipse" title="Draw an ellipse" onclick="setMode('+"'"+'ellipse'+"'"+', '+"'"+'Ellipse / Circle'+"'"+');" src="img/circle.gif" >';
rlm@46 208 EST+='<img id="line" title="Draw a line" onclick="setMode('+"'"+'line'+"'"+', '+"'"+'Line'+"'"+');" src="img/line.gif" >';
rlm@46 209 EST+='<img id="path" title="Draw a path" onclick="setMode('+"'"+'path'+"'"+', '+"'"+'Path'+"'"+');" src="img/path2.gif">';
rlm@46 210 EST+='<img id="controlpath" title="Draw a path" onclick="setMode('+"'"+'controlpath'+"'"+', '+"'"+'controlPath'+"'"+');" src="img/path3.gif">';
rlm@46 211 EST+='<img id="text" title="Write a text" onclick="setMode('+"'"+'text'+"'"+', '+"'"+'Text'+"'"+');" src="img/text.gif">';
rlm@46 212 EST+='<img id="shape" title="Open a shape" onclick="setMode('+"'"+'shape'+"'"+', '+"'"+'Shape'+"'"+');" src="img/shape.gif">';
rlm@46 213 EST+='<img id="image" title="Put a image" onclick="setMode('+"'"+'image'+"'"+', '+"'"+'Image'+"'"+');" src="img/image.gif" >';
rlm@46 214
rlm@46 215 var WEST='';
rlm@46 216 WEST+='<div id="xyinput" style="width:40px;background-color:transparent">0,0</div>';
rlm@46 217 WEST+='<div id="zoomOverInput" style="width:40px;background-color:transparent">0,0</div>';
rlm@46 218
rlm@46 219 WEST+='<div style="font-size:9px">Grid:</div>';
rlm@46 220 WEST+='<select id="gridwidth" style="font-size:9px">';
rlm@46 221 var chain='';
rlm@46 222 for(var num=1;num<=30;num++)
rlm@46 223 {
rlm@46 224 chain+='<option value="'+num+'">'+num+'px</option>';
rlm@46 225 }
rlm@46 226 WEST+=chain;
rlm@46 227 WEST+='</select>';
rlm@46 228 WEST+='<br>';
rlm@46 229
rlm@46 230 WEST+=' <div name="me-container">';
rlm@46 231 WEST+=' <div id="fill-me">';
rlm@46 232 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>';
rlm@46 233 WEST+=' <div id="slider-fill"></div>';
rlm@46 234 WEST+=' <div id="fillContainer"></div>';
rlm@46 235 WEST+=' <div id="opacity-slider-fill" title="Fill opacity"></div>';
rlm@46 236 WEST+=' </div>';
rlm@46 237 WEST+=' <div id="stroke-me">';
rlm@46 238 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>';
rlm@46 239 WEST+=' <div id="slider-stroke"></div>';
rlm@46 240 WEST+=' <div id="strokeContainer"></div>';
rlm@46 241 WEST+=' <div id="width-slider-stroke-mask"></div><div id="width-slider-stroke" title="Stroke width"></div>';
rlm@46 242 WEST+=' <div id="opacity-slider-stroke" title="Stroke opacity"></div>';
rlm@46 243 WEST+=' </div>';
rlm@46 244 WEST+=' <div id="divformfill">';
rlm@46 245 WEST+=' </div>';
rlm@46 246 WEST+=' <div id="divformstroke">';
rlm@46 247 WEST+=' </div>';
rlm@46 248
rlm@46 249 WEST+='</div>';
rlm@46 250 WEST+=' <div id="panel_shapes" style="overflow:auto;font-size:9px;visibility:hidden;position:absolute;top:270px;left:0px;height:100px;width:200px; padding:1px; margin-top:1px; background-color:transparent;">';
rlm@46 251 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>';
rlm@46 252 WEST+=' </div> ';
rlm@46 253
rlm@46 254 var SUD="";
rlm@46 255 //SUD+='<img id="showcode" title="Show the code" alt="" onclick="showMarkupCode();" src="img/viewcode.gif" style="border-color:#dd7700" >';
rlm@46 256 //SUD+='<img id="showmarkup" title="Show the raw markup" alt="" onclick="shm();" src="img/viewcode.gif" >';
rlm@46 257 //SUD+='<img id="loadmarkup" title="Load the raw markup" alt="" onclick="lcm();" src="img/loadcode.gif" >';
rlm@46 258 //SUD+='<br>&nbsp;';
rlm@46 259 SUD+='<br>&nbsp;';
rlm@46 260 SUD+='<input type="text" id="someinfo" value="No Data" name="someinfo" style="width:80%;">';
rlm@46 261 // SUD+='<textarea name="code" id="code" style="width:420px;height:200px;padding:0px"></textarea>';
rlm@46 262 // SUD+='<div>';
rlm@46 263 // SUD+='</div>';
rlm@46 264
rlm@46 265 var currentEditStatus='off';
rlm@46 266 var currentFileStatus='off';
rlm@46 267 var currentViewStatus='off';
rlm@46 268 var infoFrame, docFrame;
rlm@46 269 Ext.onReady(function() {
rlm@46 270
rlm@46 271
rlm@46 272 //var map = new Ext.KeyMap(document, {
rlm@46 273 // key: [Ext.EventObject.LEFT, Ext.EventObject.RIGHT],
rlm@46 274 // ctrl: true,
rlm@46 275 // fn: keypresshandler
rlm@46 276 //});
rlm@46 277 //Ext.get("FRONT").dom.innerHTML=(FRONT);
rlm@46 278 Ext.get("NORTHmenu").dom.innerHTML=(NORTHmenu);
rlm@46 279 Ext.get("NORTHglobals").dom.innerHTML=(NORTHglobals);
rlm@46 280 Ext.get("NORTHoptions").dom.innerHTML=(NORTHoptions);
rlm@46 281 Ext.get("EST").dom.innerHTML=(EST);
rlm@46 282 Ext.get("WEST").dom.innerHTML=(WEST);
rlm@46 283 Ext.get("SUD").dom.innerHTML=(SUD);
rlm@46 284
rlm@46 285 resizeFrame();
rlm@46 286 var map= new Ext.KeyMap(document, [
rlm@46 287 {
rlm@46 288 key: [46],//DELETE
rlm@46 289 fn: function(){ c.deleteSelection(); }
rlm@46 290 }, {
rlm@46 291 key: "x",
rlm@46 292 ctrl:true,
rlm@46 293 fn: function(){
rlm@46 294 c.clipboard=c.renderer.copy(c.selected);
rlm@46 295 c.deleteSelection();
rlm@46 296 }
rlm@46 297 }, {
rlm@46 298 key: "c",
rlm@46 299 ctrl:true,
rlm@46 300 fn: function(){
rlm@46 301 c.clipboard=c.renderer.copy(c.selected);
rlm@46 302 }
rlm@46 303 }, {
rlm@46 304 key: "d",
rlm@46 305 ctrl:true,
rlm@46 306 fn: function(){
rlm@46 307 c.selected=c.renderer.duplicate(c.selected);
rlm@46 308 c.selected.id = 'shape:' + createUUID();
rlm@46 309 Ext.get(c.selected).on( "mousedown", c.onHit,c);
rlm@46 310 }
rlm@46 311 }, {
rlm@46 312 key: "v",
rlm@46 313 ctrl:true,
rlm@46 314 fn: function(){
rlm@46 315 c.selected=c.renderer.paste(c.clipboard,c.mouseDownX,c.mouseDownY);
rlm@46 316 c.selected.id = 'shape:' + createUUID();
rlm@46 317 Ext.get(c.selected).on( "mousedown", c.onHit,c);
rlm@46 318 }
rlm@46 319 }, {
rlm@46 320 key: "z", //UNDO
rlm@46 321 ctrl:true,
rlm@46 322 shift:false,
rlm@46 323 fn: function(){ c.clipboard=c.renderer.undo(); }
rlm@46 324 }
rlm@46 325 ]);
rlm@46 326
rlm@46 327 /*
rlm@46 328 Ext.get("richdraw").dom.style.width=(canvasWidth);
rlm@46 329 Ext.get("richdraw").dom.style.height=(canvasHeight);
rlm@46 330 Ext.get("richdraw").dom.style.left=(canvasX);
rlm@46 331 Ext.get("richdraw").dom.style.top=(canvasY);
rlm@46 332 */
rlm@46 333
rlm@46 334
rlm@46 335
rlm@46 336 menuEdit = new Ext.menu.Menu({
rlm@46 337 id: 'menuedit',
rlm@46 338 items: [
rlm@46 339 {icon: "img/viewcode.gif", text: 'Copy all ', handler: shm},
rlm@46 340 {icon: "img/viewcode.gif", text: 'Paste all ', handler: lcm},
rlm@46 341 {icon: "img/viewcode.gif", text: 'Delete all ', handler: deleteAllShapes},
rlm@46 342 {icon: "img/viewcode.gif", text: 'Duplicate&nbsp;&nbsp;<b>Ctrl+d</b>', handler: duplicateSelected},
rlm@46 343 {icon: "img/viewcode.gif", text: 'Cut&nbsp;&nbsp;&nbsp;&nbsp;<b>Ctrl+x</b>', handler: cutSelected},
rlm@46 344 {icon: "img/viewcode.gif", text: 'Copy&nbsp;&nbsp;&nbsp;&nbsp;<b>Ctrl+c</b>', handler: copySelected},
rlm@46 345 {icon: "img/viewcode.gif", text: 'Paste&nbsp;&nbsp;<b>Ctrl+v</b>', handler: pasteSelected},
rlm@46 346 {icon: "img/viewcode.gif", text: 'Delete&nbsp;&nbsp;&nbsp;<b>Supr</b>', handler: deleteShape},
rlm@46 347 {icon: "img/viewcode.gif", text: 'Delete last&nbsp;<b>Ctrl+z</b>', handler: deleteLastShapes},
rlm@46 348
rlm@46 349 ]
rlm@46 350 });
rlm@46 351
rlm@46 352 menuFile = new Ext.menu.Menu({
rlm@46 353 id: 'menufile',
rlm@46 354
rlm@46 355 items: [
rlm@46 356 new Ext.menu.Item({ icon: "img/viewcode.gif", text: 'New ', handler: newFile }),
rlm@46 357 new Ext.menu.Item({ icon: "img/viewcode.gif", text: 'Open ', handler: openFile }),
rlm@46 358 new Ext.menu.Item({ icon: "img/viewcode.gif", text: 'View SVG code ', handler: showMarkupCode }),
rlm@46 359 new Ext.menu.Item({icon: "img/viewcode.gif", text: 'View OPF code ', handler: showMarkup }),
rlm@46 360 new Ext.menu.Item({icon: "img/viewcode.gif", text: 'Document properties ', handler: documentProperties })
rlm@46 361 ]
rlm@46 362 });
rlm@46 363 menuView = new Ext.menu.Menu({
rlm@46 364 id: 'menuview',
rlm@46 365
rlm@46 366 items: [
rlm@46 367 {icon: "img/viewcode.gif", text: 'Preview ', handler: preView},
rlm@46 368 {icon: "img/viewcode.gif", text: 'Canvas ', handler: canvasView}
rlm@46 369 ]
rlm@46 370 });
rlm@46 371 /*
rlm@46 372 items: [
rlm@46 373 {icon: "img/viewcode.gif", text: 'View SVG code ', handler: showMarkupCode },
rlm@46 374 {icon: "img/viewcode.gif", text: 'View OPF code ', handler: showMarkup },
rlm@46 375 {icon: "img/viewcode.gif", text: 'Document properties ', handler: documentProperties },
rlm@46 376
rlm@46 377 ]
rlm@46 378 */
rlm@46 379 // define the handler for mouseover/out of either button or menu itself
rlm@46 380 var editHandler = function(e)
rlm@46 381 {
rlm@46 382 if(currentEditStatus=='on')
rlm@46 383 {
rlm@46 384 var edit = menuEdit.getEl();
rlm@46 385 var buttonEdit = Ext.get('edit');
rlm@46 386 if(!edit.getRegion().contains(e.getPoint()) && !buttonEdit.getRegion().contains(e.getPoint()))
rlm@46 387 {
rlm@46 388 menuEdit.hide();
rlm@46 389 currentEditStatus='off';
rlm@46 390 }
rlm@46 391 }
rlm@46 392 else
rlm@46 393 {
rlm@46 394 menuEdit.show('edit');
rlm@46 395 currentEditStatus='on';
rlm@46 396 }
rlm@46 397 }
rlm@46 398
rlm@46 399 var fileHandler = function(e)
rlm@46 400 {
rlm@46 401 if(currentFileStatus=='on')
rlm@46 402 {
rlm@46 403 var file = menuFile.getEl();
rlm@46 404 var buttonFile = Ext.get('file');
rlm@46 405 if(!file.getRegion().contains(e.getPoint()) && !buttonFile.getRegion().contains(e.getPoint()))
rlm@46 406 {
rlm@46 407 menuFile.hide();
rlm@46 408 currentFileStatus='off';
rlm@46 409 }
rlm@46 410 }
rlm@46 411 else
rlm@46 412 {
rlm@46 413 menuFile.show('file');
rlm@46 414 currentFileStatus='on';
rlm@46 415 }
rlm@46 416 }
rlm@46 417
rlm@46 418
rlm@46 419 var viewHandler = function(e)
rlm@46 420 {
rlm@46 421 if(currentViewStatus=='on')
rlm@46 422 {
rlm@46 423 var view = menuView.getEl();
rlm@46 424 var buttonView = Ext.get('view');
rlm@46 425 if(!view.getRegion().contains(e.getPoint()) && !buttonView.getRegion().contains(e.getPoint()))
rlm@46 426 {
rlm@46 427 menuView.hide();
rlm@46 428 currentViewStatus='off';
rlm@46 429 }
rlm@46 430 }
rlm@46 431 else
rlm@46 432 {
rlm@46 433 menuView.show('view');
rlm@46 434 currentViewStatus='on';
rlm@46 435 }
rlm@46 436 }
rlm@46 437
rlm@46 438 // define the events to observe
rlm@46 439 Ext.get('edit').on('mouseover',editHandler);
rlm@46 440 Ext.get('edit').on('mouseout',editHandler);
rlm@46 441 menuEdit.getEl().on('mouseout',editHandler);
rlm@46 442
rlm@46 443 Ext.get('file').on('mouseover',fileHandler);
rlm@46 444 Ext.get('file').on('mouseout',fileHandler);
rlm@46 445 menuFile.getEl().on('mouseout',fileHandler);
rlm@46 446
rlm@46 447 Ext.get('view').on('mouseover',viewHandler);
rlm@46 448 Ext.get('view').on('mouseout',viewHandler);
rlm@46 449 menuView.getEl().on('mouseout',viewHandler);
rlm@46 450
rlm@46 451
rlm@46 452
rlm@46 453 });
rlm@46 454
rlm@46 455 // end ONREADY
rlm@46 456
rlm@46 457 function borderDoc(){
rlm@46 458 //c.rectCanvas(docx,docy,docw,doch,viewBox)
rlm@46 459 if(viewMode=='canvas')
rlm@46 460 {
rlm@46 461 var obj=document.getElementById("rectDoc");
rlm@46 462 if(obj){c.renderer.remove(obj) }
rlm@46 463 c.renderer.rectDoc(zoominit);
rlm@46 464 //c.renderer.rectDoc(zoominit1);
rlm@46 465 //pst.id = "rectCanvas";
rlm@46 466 //c.selected=obj;
rlm@46 467 // c.renderer.remove(obj)
rlm@46 468 //var clip=c.renderer.copy(obj);
rlm@46 469
rlm@46 470
rlm@46 471
rlm@46 472 //var pst=c.container.appendChild( clip );
rlm@46 473 //c.renderer.paste(clip,0,0);
rlm@46 474 //pst.id = "rectCanvas";
rlm@46 475
rlm@46 476
rlm@46 477 //pasteSelected();
rlm@46 478
rlm@46 479 //c.renderer.duplicate(document.getElementById("rectCanvas"))
rlm@46 480 //c.renderer.remove(document.getElementById("rectCanvas"));
rlm@46 481 }
rlm@46 482 if(viewMode=='preview')
rlm@46 483 {
rlm@46 484 var obj=document.getElementById("rectDoc");
rlm@46 485 if(obj){c.renderer.remove(obj) }
rlm@46 486 }
rlm@46 487 }
rlm@46 488 function demo() {
rlm@46 489 _dom=document.all?3:(document.getElementById?1:(document.layers?2:0));
rlm@46 490 ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
rlm@46 491 opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
rlm@46 492
rlm@46 493 var renderer;
rlm@46 494
rlm@46 495 if ((!ie) || (opera)) {
rlm@46 496 renderer = new SVGRenderer();
rlm@46 497 browser='svg';
rlm@46 498 browserpath="linkspath.htm";
rlm@46 499 }
rlm@46 500 else {
rlm@46 501 renderer = new VMLRenderer();
rlm@46 502 browser='vml';
rlm@46 503 browserpath="vmlpaths.htm";
rlm@46 504 }
rlm@46 505
rlm@46 506 c = new RichDrawEditor(document.getElementById('richdraw'), renderer);
rlm@46 507
rlm@46 508 c.onInputXY = function(x,y){$('xyinput').innerHTML = parseInt(x)+','+parseInt(y)}//[x,y].join("<br>")}
rlm@46 509 c.onViewInputXY = function(x,y){$('zoomOverInput').innerHTML = parseInt(x)+','+parseInt(y)}//[x,y].join("<br>")}
rlm@46 510
rlm@46 511 c.onselect = onSelect;
rlm@46 512 c.onunselect = onUnselect;
rlm@46 513
rlm@46 514
rlm@46 515
rlm@46 516 // c.onkeydown = keypresshandler;
rlm@46 517 //c.onkeypress = c.onKeyPress;
rlm@46 518 //document.onkeypress = c.onKeyPress;
rlm@46 519
rlm@46 520
rlm@46 521
rlm@46 522 c.editCommand('fillcolor', 'red');
rlm@46 523 c.editCommand('linecolor', 'black');
rlm@46 524 c.editCommand('linewidth', '1px');
rlm@46 525
rlm@46 526
rlm@46 527 //setMode('path', 'Path');
rlm@46 528 setMode('select', 'Selection');
rlm@46 529
rlm@46 530 document.body.style.backgroundColor = colorpage;
rlm@46 531
rlm@46 532
rlm@46 533 //alert(vertexSUD.SUD1[0]+' '+vertexSUD.SUD1[1]+ '--'+wndW+' '+wndH);
rlm@46 534
rlm@46 535 setTimeout(loadDemo,500)
rlm@46 536 //Ext.get("richdraw").on('keydown', function(e){alert('dfsd'); }, false);
rlm@46 537 //Ext.get("richdraw").on('keydown', function(e){alert(e.keyCode); });
rlm@46 538 //document.onkeydown = keypresshandler;
rlm@46 539 //richdraw.svgRoot.setAttributeNS(null,'viewBox', '0 0 700 500');
rlm@46 540
rlm@46 541 //setTimeout(borderDoc,500)
rlm@46 542
rlm@46 543 } //END demo
rlm@46 544
rlm@46 545
rlm@46 546 /////////////////
rlm@46 547
rlm@46 548
rlm@46 549 //////////////////
rlm@46 550 var Docs = function(){
rlm@46 551 return {
rlm@46 552 init : function(){
rlm@46 553 var loading = Ext.get('loading');
rlm@46 554 var mask = Ext.get('loading-mask');
rlm@46 555 mask.setOpacity(.7);
rlm@46 556 mask.shift({
rlm@46 557 xy:loading.getXY(),
rlm@46 558 width:loading.getWidth(),
rlm@46 559 height:loading.getHeight(),
rlm@46 560 remove:true,
rlm@46 561 duration:2,
rlm@46 562 opacity:.8,
rlm@46 563 easing:'bounceOut',
rlm@46 564 callback : function(){
rlm@46 565 loading.fadeOut({duration:.2,remove:true});
rlm@46 566 }
rlm@46 567 });
rlm@46 568 }
rlm@46 569 };
rlm@46 570 }();
rlm@46 571
rlm@46 572
rlm@46 573 Ext.onReady(Docs.init, Docs, true);
rlm@46 574
rlm@46 575 //var win;
rlm@46 576
rlm@46 577 function showinfoFrame(wtitle) {
rlm@46 578 var win = new Ext.Window({
rlm@46 579 closeAction: 'hide',
rlm@46 580 renderTo: 'showInfo',
rlm@46 581 autoScroll:true,
rlm@46 582 modal:true,
rlm@46 583 width: '440',
rlm@46 584 height:'300',
rlm@46 585 x: '120',
rlm@46 586 y: '40',
rlm@46 587 title: wtitle,
rlm@46 588 draggable :true,
rlm@46 589 html: '',
rlm@46 590 hidden: true,
rlm@46 591 contentEl: 'divCode',
rlm@46 592 collapsed: true
rlm@46 593
rlm@46 594 });
rlm@46 595 win.show();
rlm@46 596 }
rlm@46 597 function showdocFrame(wtitle) {
rlm@46 598 var win = new Ext.Window({
rlm@46 599 closeAction: 'hide',
rlm@46 600 renderTo: 'showInfo',
rlm@46 601 width: '340',
rlm@46 602 height:'300',
rlm@46 603 x: '120',
rlm@46 604 y: '40',
rlm@46 605 title: wtitle,
rlm@46 606 draggable :true,
rlm@46 607 html: '',
rlm@46 608 hidden: true,
rlm@46 609 contentEl: 'docProperties',
rlm@46 610 collapsed: true
rlm@46 611
rlm@46 612 });
rlm@46 613 win.show();
rlm@46 614 }
rlm@46 615 function showopenFile(wtitle) {
rlm@46 616 var win = new Ext.Window({
rlm@46 617 autoScroll:true,
rlm@46 618 closeAction: 'hide',
rlm@46 619 renderTo: 'showInfo',
rlm@46 620 width: '440',
rlm@46 621 height:'300',
rlm@46 622 x: '120',
rlm@46 623 y: '40',
rlm@46 624 title: wtitle,
rlm@46 625 draggable :true,
rlm@46 626 html: '',
rlm@46 627 hidden: true,
rlm@46 628 contentEl: 'divopenFile',
rlm@46 629 collapsed: true
rlm@46 630
rlm@46 631 });
rlm@46 632 win.show();
rlm@46 633 }
rlm@46 634
rlm@46 635 function preView() {
rlm@46 636 viewMode='preview';
rlm@46 637 //
rlm@46 638 //document.forms[0].code.value=Ext.util.JSON.encode(canvas(c));
rlm@46 639 //myOPF=document.forms[0].code.value;
rlm@46 640 c.renderer.view(docx,docy,docw,doch,zoominit);
rlm@46 641 borderDoc();
rlm@46 642
rlm@46 643 //var all=canvas(c) ;
rlm@46 644 // deleteAllShapes()
rlm@46 645 //load(all,c);
rlm@46 646
rlm@46 647 }
rlm@46 648
rlm@46 649 function canvasView() {
rlm@46 650 viewMode='canvas';
rlm@46 651 //deleteAllShapes()
rlm@46 652 //document.forms[0].code.value=Ext.util.JSON.encode(canvas(c));
rlm@46 653 //myOPF=document.forms[0].code.value;
rlm@46 654 //load(myOPF,c);
rlm@46 655 c.renderer.view(docx,docy,docw,doch,zoominit);
rlm@46 656 borderDoc();
rlm@46 657 //var all=canvas(c) ;
rlm@46 658 //deleteAllShapes()
rlm@46 659 //load(all,c);
rlm@46 660
rlm@46 661 }
rlm@46 662
rlm@46 663
rlm@46 664 /////////////////////////////
rlm@46 665 //FUNCTIONS
rlm@46 666 /////////////////////////////
rlm@46 667
rlm@46 668 function changeInitialFile()
rlm@46 669 {
rlm@46 670 initialFile=document.forms[0].file.value;
rlm@46 671 c.renderer.removeAll()
rlm@46 672 loadDemo();
rlm@46 673 if(viewMode=='canvas')
rlm@46 674 {
rlm@46 675 c.renderer.rectDoc(zoominit)
rlm@46 676 }
rlm@46 677 //win.hide();
rlm@46 678 //document.getElementById("showInfo").style.display='none';
rlm@46 679 }
rlm@46 680
rlm@46 681 function setMode(mode, status)
rlm@46 682 {
rlm@46 683
rlm@46 684
rlm@46 685 selectmode=mode;
rlm@46 686 if(mode=='shape')
rlm@46 687 {
rlm@46 688 c.editCommand('mode', 'select');
rlm@46 689 }else{
rlm@46 690 if(mode=='pathsEdit' )
rlm@46 691 {
rlm@46 692 mode='select';
rlm@46 693 }
rlm@46 694 c.editCommand('mode', mode);
rlm@46 695 }
rlm@46 696
rlm@46 697 var imgs = $('EST').getElementsByTagName('img');
rlm@46 698
rlm@46 699 for (var i=0; i<imgs.length; i++)
rlm@46 700 {
rlm@46 701 imgs[i].style.backgroundColor = '';
rlm@46 702 }
rlm@46 703 if(c.pathsEdit==true){
rlm@46 704 $('pathsEdit').style.backgroundColor = 'orange';
rlm@46 705 }else{
rlm@46 706 $(mode).style.backgroundColor = 'orange';
rlm@46 707 }
rlm@46 708
rlm@46 709
rlm@46 710 if (mode == 'select')
rlm@46 711 {
rlm@46 712 //$('status').innerHTML = 'Select/Move' ;
rlm@46 713 info_select();
rlm@46 714 }
rlm@46 715 else
rlm@46 716 {
rlm@46 717 //$('status').innerHTML = 'Draw ' + status;
rlm@46 718 }
rlm@46 719
rlm@46 720 ///////////
rlm@46 721
rlm@46 722 hiddenAllMenus();
rlm@46 723
rlm@46 724 if(mode=='text')
rlm@46 725 {
rlm@46 726 info_text();
rlm@46 727 }
rlm@46 728
rlm@46 729 if(mode=='shape')
rlm@46 730 {
rlm@46 731 info_shape();
rlm@46 732 }
rlm@46 733 if(mode=='ellipse')
rlm@46 734 {
rlm@46 735 info_ellipse();
rlm@46 736 }
rlm@46 737
rlm@46 738 if(mode=='rect')
rlm@46 739 {
rlm@46 740 info_rect();
rlm@46 741 }
rlm@46 742
rlm@46 743 if(mode=='image')
rlm@46 744 {
rlm@46 745 info_image();
rlm@46 746 }
rlm@46 747
rlm@46 748 if(mode=='path')
rlm@46 749 {
rlm@46 750 info_path();
rlm@46 751 }
rlm@46 752 if(mode=='controlpath')
rlm@46 753 {
rlm@46 754 info_controlpath();
rlm@46 755 }
rlm@46 756 if(mode=='zoom')
rlm@46 757 {
rlm@46 758 info_zoom();
rlm@46 759
rlm@46 760 }
rlm@46 761 if(mode=='select')
rlm@46 762 {
rlm@46 763 if(c.pathsEdit==true)
rlm@46 764 {
rlm@46 765 info_pathsEdit();
rlm@46 766 }
rlm@46 767 else
rlm@46 768 {
rlm@46 769 info_select();
rlm@46 770 }
rlm@46 771
rlm@46 772 }
rlm@46 773 //c.renderer.zoom(0,0);
rlm@46 774 //document.getElementById('richdraw').focus();
rlm@46 775
rlm@46 776 }
rlm@46 777
rlm@46 778 /////////////////////////
rlm@46 779
rlm@46 780 function hiddenAllMenus()
rlm@46 781 {
rlm@46 782
rlm@46 783 document.getElementById('richdraw').style.cursor='default';
rlm@46 784 $('options_text').style.visibility = 'hidden';
rlm@46 785 $('options_select_path').style.visibility = 'hidden';
rlm@46 786 $('panel_shapes').style.visibility = 'hidden';
rlm@46 787 $('linksPaths').style.visibility = 'hidden';
rlm@46 788 $('options_rect').style.visibility = 'hidden';
rlm@46 789 $('options_ellipse').style.visibility = 'hidden';
rlm@46 790 $('options_image').style.visibility = 'hidden';
rlm@46 791 $('options_path').style.visibility = 'hidden';
rlm@46 792 //$('options_controlpath').style.visibility = 'hidden';
rlm@46 793 $('options_zoom').style.visibility = 'hidden';
rlm@46 794 $('options_select').style.visibility = 'hidden';
rlm@46 795
rlm@46 796
rlm@46 797 selectedit='';
rlm@46 798 }
rlm@46 799
rlm@46 800 function info_text()
rlm@46 801 {
rlm@46 802 $('options_text').style.visibility = 'visible';
rlm@46 803 }
rlm@46 804 function info_shape()
rlm@46 805 {
rlm@46 806 $('options_select_path').style.visibility = 'visible';
rlm@46 807 $('linksPaths').style.visibility = 'visible';
rlm@46 808 $('panel_shapes').style.visibility= 'visible';
rlm@46 809 }
rlm@46 810 function info_rect()
rlm@46 811 {
rlm@46 812 $('options_rect').style.visibility = 'visible';
rlm@46 813 }
rlm@46 814 function info_ellipse()
rlm@46 815 {
rlm@46 816 $('options_ellipse').style.visibility = 'visible';
rlm@46 817 }
rlm@46 818
rlm@46 819 function info_image()
rlm@46 820 {
rlm@46 821 $('options_image').style.visibility = 'visible';
rlm@46 822 }
rlm@46 823 function info_path()
rlm@46 824 {
rlm@46 825 $('options_path').style.visibility = 'visible';
rlm@46 826
rlm@46 827 }
rlm@46 828 function info_controlpath()
rlm@46 829 {
rlm@46 830 $('options_path').style.visibility = 'visible';
rlm@46 831
rlm@46 832 }
rlm@46 833 function info_zoom()
rlm@46 834 {
rlm@46 835 $('options_zoom').style.visibility = 'visible';
rlm@46 836 //$('options_zoom').style.backgroundColor = colorpage;
rlm@46 837 if(zoommode=='hand')
rlm@46 838 {
rlm@46 839 document.getElementById('richdraw').style.cursor='move';
rlm@46 840
rlm@46 841 }else{
rlm@46 842 if(zoommode=='window')
rlm@46 843 {
rlm@46 844
rlm@46 845 }else{
rlm@46 846 c.renderer.zoom(0,0);
rlm@46 847 }
rlm@46 848 }
rlm@46 849 var imgs = $('options_zoom').getElementsByTagName('img');
rlm@46 850 for (var i=0; i<imgs.length; i++)
rlm@46 851 {
rlm@46 852 imgs[i].style.backgroundColor = '';
rlm@46 853 }
rlm@46 854 $('zoom_'+zoommode).style.backgroundColor = 'orange';
rlm@46 855
rlm@46 856
rlm@46 857
rlm@46 858 }
rlm@46 859
rlm@46 860 function info_pathsEdit(){
rlm@46 861 $('options_path').style.visibility = 'visible';
rlm@46 862 }
rlm@46 863
rlm@46 864 function info_select()
rlm@46 865 {
rlm@46 866 $('options_select').style.visibility = 'visible';
rlm@46 867 //$('options_select').style.backgroundColor = colorpage;
rlm@46 868
rlm@46 869 if(selectedit=='deleteone')
rlm@46 870 {
rlm@46 871 deleteShape();
rlm@46 872 }
rlm@46 873 if(selectedit=='deleteall')
rlm@46 874 {
rlm@46 875 deleteAllShapes();
rlm@46 876 }
rlm@46 877 if(selectedit=='tothetop')
rlm@46 878 {
rlm@46 879 toFront(-1);
rlm@46 880 }
rlm@46 881 if(selectedit=='totheback')
rlm@46 882 {
rlm@46 883 toFront(0);
rlm@46 884 }
rlm@46 885 if(selectedit=='oneback')
rlm@46 886 {
rlm@46 887 toFront(1);
rlm@46 888 }
rlm@46 889 if(selectedit=='onetop')
rlm@46 890 {
rlm@46 891 toFront(2);
rlm@46 892 }
rlm@46 893 if(selectedit=='reflectV')
rlm@46 894 {
rlm@46 895 c.reflect('V');
rlm@46 896 }
rlm@46 897 if(selectedit=='reflectH')
rlm@46 898 {
rlm@46 899 c.reflect('H');
rlm@46 900 }
rlm@46 901
rlm@46 902 var imgs = $('options_select').getElementsByTagName('img');
rlm@46 903 for (var i=0; i<imgs.length; i++)
rlm@46 904 {
rlm@46 905 imgs[i].style.backgroundColor = '';
rlm@46 906 }
rlm@46 907 if(selectedit != '')
rlm@46 908 {
rlm@46 909 $('select_'+selectedit).style.backgroundColor = 'orange';
rlm@46 910 }
rlm@46 911
rlm@46 912 }
rlm@46 913
rlm@46 914
rlm@46 915 ////////////////////////////
rlm@46 916
rlm@46 917
rlm@46 918 function setShape()
rlm@46 919 {
rlm@46 920 if(selectmode=='select' || selectmode=='control_path' || selectmode=='path'){
rlm@46 921 c.submitShape(document.forms[0].control_codebase.value);
rlm@46 922 }else{
rlm@46 923 setMode('path', 'Path');
rlm@46 924 c.submitShape(document.forms[0].codebase.value);
rlm@46 925 }
rlm@46 926 }
rlm@46 927
rlm@46 928 //function onKeyPress(){
rlm@46 929 //c.onKeyPress();
rlm@46 930 //}
rlm@46 931
rlm@46 932
rlm@46 933 function deleteShape()
rlm@46 934 {
rlm@46 935 c.deleteSelection();
rlm@46 936 }
rlm@46 937
rlm@46 938 function deleteAllShapes()
rlm@46 939 {
rlm@46 940 c.deleteAll();
rlm@46 941 }
rlm@46 942
rlm@46 943 function deleteLastShapes()
rlm@46 944 {
rlm@46 945 //c.deleteLast();
rlm@46 946 c.clipboard=c.renderer.undo();
rlm@46 947 }
rlm@46 948 function toFront(num)
rlm@46 949 {
rlm@46 950 c.toFront(num);
rlm@46 951 }
rlm@46 952 function cutSelected()
rlm@46 953 {
rlm@46 954
rlm@46 955 c.clipboard=c.renderer.copy(c.selected);
rlm@46 956 c.deleteSelection();
rlm@46 957 }
rlm@46 958 function copySelected()
rlm@46 959 {
rlm@46 960 c.clipboard=c.renderer.copy(c.selected);
rlm@46 961 }
rlm@46 962 function pasteSelected()
rlm@46 963 {
rlm@46 964 c.selected=c.renderer.paste(c.clipboard,c.mouseDownX,c.mouseDownY);
rlm@46 965 c.selected.id = 'shape:' + createUUID();
rlm@46 966 Ext.get(c.selected).on( "mousedown", c.onHit,c);
rlm@46 967 }
rlm@46 968 function duplicateSelected()
rlm@46 969 {
rlm@46 970 c.selected=c.renderer.duplicate(c.selected);
rlm@46 971 c.selected.id = 'shape:' + createUUID();
rlm@46 972 Ext.get(c.selected).on( "mousedown", c.onHit,c);
rlm@46 973 }
rlm@46 974 ///////////////////////////
rlm@46 975
rlm@46 976
rlm@46 977 function setFillColor(color) //colors --
rlm@46 978 {
rlm@46 979 //-- var color = colors.options[colors.selectedIndex].value;
rlm@46 980 //-- colors.style.backgroundColor = color;
rlm@46 981
rlm@46 982 c.editCommand('fillcolor', color);
rlm@46 983 }
rlm@46 984
rlm@46 985 function setLineColor(color) //colors --
rlm@46 986 {
rlm@46 987 //--var color = colors.options[colors.selectedIndex].value;
rlm@46 988 //-- colors.style.backgroundColor = color;
rlm@46 989
rlm@46 990 c.editCommand('linecolor', color);
rlm@46 991 }
rlm@46 992
rlm@46 993 function setLineWidth(width) //width --
rlm@46 994 {
rlm@46 995 //-- var width = widths.options[widths.selectedIndex].value;
rlm@46 996 c.editCommand('linewidth', width);
rlm@46 997 }
rlm@46 998 ////
rlm@46 999 //++
rlm@46 1000 function setFillOpacity(opacity)
rlm@46 1001 {
rlm@46 1002 c.editCommand('fillopacity', opacity);
rlm@46 1003 }
rlm@46 1004 ////
rlm@46 1005 //++
rlm@46 1006 function setLineOpacity(opacity)
rlm@46 1007 {
rlm@46 1008 c.editCommand('lineopacity', opacity);
rlm@46 1009 }
rlm@46 1010
rlm@46 1011 function setTextFamily(types)
rlm@46 1012 {
rlm@46 1013 var type = types.options[types.selectedIndex].value;
rlm@46 1014 document.forms[0].option_text_family.value=type; //bad :-(
rlm@46 1015 data_text_family = type;
rlm@46 1016 c.submitShape($('option_text_message').value+'<;>'+$('option_text_size').value+'<;>'+$('option_text_family').value);
rlm@46 1017 }
rlm@46 1018
rlm@46 1019 function setGridWidth(widths)
rlm@46 1020 {
rlm@46 1021 var width = eval(widths.options[widths.selectedIndex].value);
rlm@46 1022 RichDrawEditor.prototype.setGrid(width, width);
rlm@46 1023 }
rlm@46 1024
rlm@46 1025 ///////////////////////////////
rlm@46 1026
rlm@46 1027
rlm@46 1028 function getOptionByValue(select, value)
rlm@46 1029 {
rlm@46 1030 /*for (var i=0; i<select.length; i++)
rlm@46 1031 {
rlm@46 1032 if (select.options[i].value == value)
rlm@46 1033 {
rlm@46 1034 return i;
rlm@46 1035 }
rlm@46 1036 }
rlm@46 1037 return -1;
rlm@46 1038 */
rlm@46 1039 }
rlm@46 1040
rlm@46 1041 /////////////////////////////
rlm@46 1042
rlm@46 1043 function showMarkupCode()
rlm@46 1044 {
rlm@46 1045 $('code').value = c.renderer.getMarkup();
rlm@46 1046 //document.forms[0].code.focus();
rlm@46 1047 //$('code').select;
rlm@46 1048 showinfoFrame('SVG code')
rlm@46 1049 //infoFrame.setTitle('SVG code');
rlm@46 1050 //infoFrame.show();
rlm@46 1051
rlm@46 1052 }
rlm@46 1053 function newFile()
rlm@46 1054 {
rlm@46 1055 initialFile='new.txt';
rlm@46 1056 document.forms[0].file.value = initialFile;
rlm@46 1057 changeInitialFile()
rlm@46 1058
rlm@46 1059 }
rlm@46 1060 function openFile()
rlm@46 1061 {
rlm@46 1062 $('file').value = initialFile;
rlm@46 1063 //document.forms[0].code.focus();
rlm@46 1064 //$('code').select;
rlm@46 1065 showopenFile('Open File')
rlm@46 1066 //infoFrame.setTitle('SVG code');
rlm@46 1067 //infoFrame.show();
rlm@46 1068
rlm@46 1069 }
rlm@46 1070 function showMarkup()
rlm@46 1071 {
rlm@46 1072 document.forms[0].code.value=Ext.util.JSON.encode(canvas(c));
rlm@46 1073 //infoFrame.setTitle('OPF code');
rlm@46 1074 //infoFrame.show();
rlm@46 1075 showinfoFrame('OPF code')
rlm@46 1076
rlm@46 1077
rlm@46 1078 }
rlm@46 1079
rlm@46 1080 function shm()
rlm@46 1081 {
rlm@46 1082 var json = Ext.util.JSON.encode(canvas(c))
rlm@46 1083 $('someinfo').value = "JSON File Format Saved : "+( c.renderer.getMarkup().length - json.length )+" characters; JSON Character Total: "+json.length
rlm@46 1084 $('code').value=json;
rlm@46 1085 }
rlm@46 1086
rlm@46 1087 function lcm()
rlm@46 1088 {
rlm@46 1089 load(Ext.util.JSON.decode(document.forms[0].code.value),c)
rlm@46 1090 c.renderer.rectDoc(zoominit)
rlm@46 1091
rlm@46 1092
rlm@46 1093 }
rlm@46 1094
rlm@46 1095 ////////////////////////////////////////
rlm@46 1096
rlm@46 1097
rlm@46 1098 function onSelect()
rlm@46 1099 {
rlm@46 1100 /*$('fillcolor').selectedIndex = getOptionByValue($('fillcolor'), c.queryCommand('fillcolor'));
rlm@46 1101 $('fillcolor').style.backgroundColor = c.queryCommand('fillcolor');
rlm@46 1102 $('linecolor').selectedIndex = getOptionByValue($('linecolor'), c.queryCommand('linecolor'));
rlm@46 1103 $('linecolor').style.backgroundColor = c.queryCommand('linecolor');
rlm@46 1104 $('linewidth').selectedIndex = getOptionByValue($('linewidth'), c.queryCommand('linewidth'));
rlm@46 1105 */
rlm@46 1106 hiddenAllMenus();
rlm@46 1107 info_select();
rlm@46 1108
rlm@46 1109 if (c.selected.tagName == 'rect'){
rlm@46 1110 //setMode('rect', 'Rectangle')
rlm@46 1111 info_rect();
rlm@46 1112 }
rlm@46 1113 if (c.selected.tagName == 'image'){
rlm@46 1114 info_image();
rlm@46 1115 }
rlm@46 1116 if (c.selected.tagName == 'text'){
rlm@46 1117 info_text();
rlm@46 1118 }
rlm@46 1119 if (c.selected.tagName == 'line'){
rlm@46 1120 //info_line();
rlm@46 1121 }
rlm@46 1122 if (c.selected.tagName == 'ellipse'){
rlm@46 1123 info_ellipse()
rlm@46 1124 }
rlm@46 1125 if (c.selected.tagName == 'path') {
rlm@46 1126
rlm@46 1127 info_path();
rlm@46 1128 }
rlm@46 1129 if (c.selected.tagName == 'shape'){
rlm@46 1130 var detail=c.selected.children[0].tagName;
rlm@46 1131 $('someinfo').value=detail;
rlm@46 1132 if(detail=='path'){ info_path(); }
rlm@46 1133 if(detail=='textpath'){ info_text(); }
rlm@46 1134 }
rlm@46 1135 if (c.selected.tagName == 'oval') {
rlm@46 1136
rlm@46 1137 info_ellipse();
rlm@46 1138 }
rlm@46 1139
rlm@46 1140 //frames['mondrianstyle'].setcolorhex(c.queryCommand('linecolor'),'stroke');
rlm@46 1141 //frames['mondrianstyle'].setcolorhex(c.queryCommand('fillcolor'),'fill');
rlm@46 1142 }
rlm@46 1143
rlm@46 1144 function onUnselect()
rlm@46 1145 {
rlm@46 1146
rlm@46 1147 /*
rlm@46 1148 $('fillcolor').selectedIndex = getOptionByValue($('fillcolor'), c.queryCommand('fillcolor'));
rlm@46 1149 $('fillcolor').style.backgroundColor = c.queryCommand('fillcolor');
rlm@46 1150 $('linecolor').selectedIndex = getOptionByValue($('linecolor'), c.queryCommand('linecolor'));
rlm@46 1151 $('linecolor').style.backgroundColor = c.queryCommand('linecolor');
rlm@46 1152 $('linewidth').selectedIndex = getOptionByValue($('linewidth'), c.queryCommand('linewidth'));
rlm@46 1153 */
rlm@46 1154
rlm@46 1155 }
rlm@46 1156
rlm@46 1157 function editPath(myfield,e)
rlm@46 1158 {
rlm@46 1159
rlm@46 1160 var keycode;
rlm@46 1161
rlm@46 1162
rlm@46 1163 // ++? if (window.event) keycode = window.event.e;
rlm@46 1164
rlm@46 1165 e= (e) ? e : ((window.event) ? event : null);
rlm@46 1166 keycode=e.keyCode;
rlm@46 1167 var shs= myfield.id.split('_');
rlm@46 1168 var sh=shs[1];
rlm@46 1169
rlm@46 1170 var mypath=$('control_codebase').value;
rlm@46 1171
rlm@46 1172
rlm@46 1173 var x= $('option_path_x').value;
rlm@46 1174 var y= $('option_path_y').value;
rlm@46 1175 var precoord=x+','+y;
rlm@46 1176
rlm@46 1177
rlm@46 1178 var mypointNum=$('option_path_num').value;
rlm@46 1179 var controlNodeNum=2;
rlm@46 1180
rlm@46 1181 if (keycode == 38)//#26
rlm@46 1182 {
rlm@46 1183 myfield.value=eval(myfield.value)+1;
rlm@46 1184 }
rlm@46 1185 if (keycode == 40)// #28
rlm@46 1186 {
rlm@46 1187 myfield.value=eval(myfield.value)-1;
rlm@46 1188 }
rlm@46 1189 if (keycode == 13 || keycode == 40 || keycode == 38)
rlm@46 1190 {
rlm@46 1191 var cadx= $('option_path_x').value;
rlm@46 1192 var cady= $('option_path_y').value;
rlm@46 1193 var coord=cadx+','+cady;
rlm@46 1194
rlm@46 1195 //$('code').value=coord;
rlm@46 1196
rlm@46 1197 var cad1=new RegExp(precoord,"g");
rlm@46 1198
rlm@46 1199
rlm@46 1200 var result=mypath.replace(cad1, coord);
rlm@46 1201
rlm@46 1202 $('control_codebase').value=' ';
rlm@46 1203 $('control_codebase').value=result;
rlm@46 1204
rlm@46 1205 $('someinfo').value=precoord;
rlm@46 1206 //alert(myfield.id);
rlm@46 1207 setShape(); //c.renderer.tocurve();
rlm@46 1208
rlm@46 1209 return false;
rlm@46 1210
rlm@46 1211 }
rlm@46 1212 else
rlm@46 1213 return true;
rlm@46 1214 }
rlm@46 1215
rlm@46 1216
rlm@46 1217 function editPathXX(myfield,e)
rlm@46 1218 {
rlm@46 1219
rlm@46 1220 var keycode;
rlm@46 1221
rlm@46 1222
rlm@46 1223 // ++? if (window.event) keycode = window.event.e;
rlm@46 1224
rlm@46 1225 e= (e) ? e : ((window.event) ? event : null);
rlm@46 1226 keycode=e.keyCode;
rlm@46 1227 var shs= myfield.id.split('_');
rlm@46 1228 var sh=shs[1];
rlm@46 1229
rlm@46 1230 var mypath=$('control_codebase').value;
rlm@46 1231 var mypointNum=$('option_path_num').value;
rlm@46 1232 var controlNodeNum=2;
rlm@46 1233
rlm@46 1234 if (keycode == 38)//#26
rlm@46 1235 {
rlm@46 1236 myfield.value=eval(myfield.value)+1;
rlm@46 1237 }
rlm@46 1238 if (keycode == 40)// #28
rlm@46 1239 {
rlm@46 1240 myfield.value=eval(myfield.value)-1;
rlm@46 1241 }
rlm@46 1242
rlm@46 1243
rlm@46 1244 var points=mypath.split('C');
rlm@46 1245 var chain='';
rlm@46 1246 var segment=' ';
rlm@46 1247 prevControl=' ';
rlm@46 1248 nextControl=' ';
rlm@46 1249 nodePoint=' ';
rlm@46 1250 var init=points[0].split('M');
rlm@46 1251 var allcoords=init[1].split(' ');
rlm@46 1252 var point=allcoords[0].split(',');
rlm@46 1253
rlm@46 1254 if(mypointNum==0){
rlm@46 1255
rlm@46 1256 point[1]= $('option_path_x').value;
rlm@46 1257 point[2]= $('option_path_y').value;
rlm@46 1258 var change=point.join(',')
rlm@46 1259
rlm@46 1260 chain+='M' + change+' ';
rlm@46 1261 }else{
rlm@46 1262 chain+='M'+points[0]+' ';
rlm@46 1263 }
rlm@46 1264
rlm@46 1265 var numpoints=points.length-1;
rlm@46 1266 if(numpoints>1){
rlm@46 1267 for(var a=1;a<=numpoints;a++)
rlm@46 1268 {
rlm@46 1269
rlm@46 1270 if(a==mypointNum){
rlm@46 1271
rlm@46 1272 segment=points[a].split(' ');
rlm@46 1273 prevControl=segment[0]+' ';
rlm@46 1274 nextControl=segment[1]+' ';
rlm@46 1275 nodePoint=segment[2]+' ';
rlm@46 1276
rlm@46 1277
rlm@46 1278 /*if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}
rlm@46 1279 if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}
rlm@46 1280 if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}
rlm@46 1281 */
rlm@46 1282
rlm@46 1283 var point=nodePoint.split(',');
rlm@46 1284 point[1]= $('option_path_x').value;
rlm@46 1285 point[2]= $('option_path_y').value;
rlm@46 1286 var change=point.join(',')
rlm@46 1287
rlm@46 1288 chain+='C'+prevControl+ nextControl + change+' ';
rlm@46 1289 }else{
rlm@46 1290 chain+='C'+points[a];
rlm@46 1291 }
rlm@46 1292
rlm@46 1293 }
rlm@46 1294
rlm@46 1295 }else{
rlm@46 1296 chain+='C'+points[1];
rlm@46 1297
rlm@46 1298 }
rlm@46 1299 //$('someinfo').value= chain;
rlm@46 1300 $('control_codebase').value=chain;
rlm@46 1301
rlm@46 1302
rlm@46 1303
rlm@46 1304
rlm@46 1305
rlm@46 1306 if (keycode == 13 || keycode == 40 || keycode == 38)
rlm@46 1307 {
rlm@46 1308 //alert(myfield.id);
rlm@46 1309 c.renderer.tocurve();
rlm@46 1310
rlm@46 1311 return false;
rlm@46 1312
rlm@46 1313 }
rlm@46 1314 else
rlm@46 1315 return true;
rlm@46 1316 }
rlm@46 1317
rlm@46 1318
rlm@46 1319
rlm@46 1320 function edit(myfield,e)
rlm@46 1321 {
rlm@46 1322
rlm@46 1323 var keycode;
rlm@46 1324
rlm@46 1325
rlm@46 1326 // ++? if (window.event) keycode = window.event.e;
rlm@46 1327 //else if (e) keycode = e.which;
rlm@46 1328
rlm@46 1329 e= (e) ? e : ((window.event) ? event : null);
rlm@46 1330 keycode=e.keyCode;
rlm@46 1331 //var keycode = e.which?e.which:e.keycode
rlm@46 1332
rlm@46 1333 //document.layers ? e.which :
rlm@46 1334 //document.all ? e.keyCode :
rlm@46 1335 //document.getElementById ? e.keyCode : 0;
rlm@46 1336 //else return true;
rlm@46 1337 var keyChar = String.fromCharCode(keycode);
rlm@46 1338 //var numCheck = /\d/;
rlm@46 1339 //if (((keyChar=='.')&&(obj.value.indexOf('.')==-1))¦¦(keycode<32)¦¦numCheck.test(keyChar)¦¦((keycode>=37)&&(keycode<=40)&&(!e.modifiers&&!e.shiftKey))) {
rlm@46 1340
rlm@46 1341 //alert(keycode+' _ '+keyChar);
rlm@46 1342 var shs= myfield.id.split('_');
rlm@46 1343 var sh=shs[1];
rlm@46 1344 if(myfield.id.indexOf('control_codebase')<=0)
rlm@46 1345 {
rlm@46 1346 if (keycode == 38)//#26
rlm@46 1347 {
rlm@46 1348
rlm@46 1349 if(eval(myfield.value)>0)
rlm@46 1350 {
rlm@46 1351 myfield.value=eval(myfield.value)+1;
rlm@46 1352 //alert(myfield.value);
rlm@46 1353 }
rlm@46 1354 //return false;
rlm@46 1355 //alert('keycode')
rlm@46 1356
rlm@46 1357 }
rlm@46 1358 if (keycode == 40)// #28
rlm@46 1359 {
rlm@46 1360 myfield.value=eval(myfield.value)-1;
rlm@46 1361 if(myfield.id=='option_path_sclx' || myfield.id=='option_path_scly')
rlm@46 1362 {
rlm@46 1363 if( eval(myfield.value)<=0 )
rlm@46 1364 {
rlm@46 1365 myfield.value=1;
rlm@46 1366 }
rlm@46 1367 }
rlm@46 1368
rlm@46 1369 if(myfield.id=='option_text_size')
rlm@46 1370 {
rlm@46 1371 if( eval(myfield.value)<=0 )
rlm@46 1372 {
rlm@46 1373 myfield.value=1;
rlm@46 1374 }
rlm@46 1375 }
rlm@46 1376 }
rlm@46 1377
rlm@46 1378 }
rlm@46 1379
rlm@46 1380 if (keycode == 13 || keycode == 40 || keycode == 38)
rlm@46 1381 {
rlm@46 1382 var check=0;
rlm@46 1383 if(myfield.id=='control_codebase')
rlm@46 1384 {
rlm@46 1385 //alert(myfield.id)
rlm@46 1386 //c.submitShape($('control_codebase').value+'');
rlm@46 1387 check=1;
rlm@46 1388 setShape();
rlm@46 1389 }
rlm@46 1390
rlm@46 1391 if(myfield.id.indexOf('href')>0)
rlm@46 1392 {
rlm@46 1393 c.submitShape(myfield.value)
rlm@46 1394 }
rlm@46 1395
rlm@46 1396 if(myfield.id.indexOf('tr')>0 || myfield.id.indexOf('scl')>0)
rlm@46 1397 {
rlm@46 1398 if(check==0)
rlm@46 1399 {
rlm@46 1400 c.submitShape($('option_'+sh+'_trx').value+';'+$('option_'+sh+'_try').value+';'+$('option_'+sh+'_sclx').value+';'+$('option_'+sh+'_scly').value+';'+$('option_'+sh+'_rot').value)
rlm@46 1401 }
rlm@46 1402 }
rlm@46 1403
rlm@46 1404 if(myfield.id.indexOf('rot')>0)
rlm@46 1405 {
rlm@46 1406 c.submitShape($('option_'+sh+'_trx').value+';'+$('option_'+sh+'_try').value+';'+$('option_'+sh+'_sclx').value+';'+$('option_'+sh+'_scly').value+';'+$('option_'+sh+'_rot').value)
rlm@46 1407 }
rlm@46 1408
rlm@46 1409 if(myfield.id.indexOf('text')>0)
rlm@46 1410 {
rlm@46 1411 c.submitShape($('option_text_message').value+'<;>'+$('option_text_size').value+'<;>'+$('option_text_family').value);
rlm@46 1412 }
rlm@46 1413 //alert(myfield.id);
rlm@46 1414 return false;
rlm@46 1415
rlm@46 1416 }
rlm@46 1417 else
rlm@46 1418 return true;
rlm@46 1419 }
rlm@46 1420
rlm@46 1421
rlm@46 1422
rlm@46 1423
rlm@46 1424 function env(myfield,delta)
rlm@46 1425 {
rlm@46 1426
rlm@46 1427 //alert(keycode+' _ '+keyChar);
rlm@46 1428
rlm@46 1429 if (delta >0)//#26
rlm@46 1430 {
rlm@46 1431 myfield.value=eval(myfield.value)+1;
rlm@46 1432 //return false;
rlm@46 1433 //alert('keycode')
rlm@46 1434 }
rlm@46 1435 else
rlm@46 1436 {
rlm@46 1437 myfield.value=eval(myfield.value)-1;
rlm@46 1438 //return false;
rlm@46 1439 }
rlm@46 1440
rlm@46 1441
rlm@46 1442 if(myfield.id=='option_image_href')
rlm@46 1443 {
rlm@46 1444 c.submitShape(myfield.value)
rlm@46 1445 }
rlm@46 1446 if(myfield.id=='option_select_trx' || myfield.id=='option_select_try' || myfield.id=='option_select_sclx' || myfield.id=='option_select_scly')
rlm@46 1447 {
rlm@46 1448 c.submitShape($('option_select_trx').value+';'+$('option_select_try').value+';'+$('option_select_sclx').value+';'+$('option_select_scly').value+';'+$('option_select_rot').value)
rlm@46 1449 }
rlm@46 1450 if(myfield.id=='option_select_rot')
rlm@46 1451 {
rlm@46 1452 c.submitShape($('option_select_trx').value+';'+$('option_select_try').value+';'+$('option_select_sclx').value+';'+$('option_select_scly').value+';'+$('option_select_rot').value)
rlm@46 1453 }
rlm@46 1454
rlm@46 1455 }
rlm@46 1456
rlm@46 1457
rlm@46 1458 function clockdata(){
rlm@46 1459 //////////////
rlm@46 1460 //++
rlm@46 1461
rlm@46 1462 data_path_close = $('option_path_close').checked;
rlm@46 1463 data_text_family = $('option_text_family').value;
rlm@46 1464 data_text_size = parseFloat($('option_text_size').value);
rlm@46 1465 data_text_messaje = $('option_text_message').value;
rlm@46 1466 data_image_href = $('option_image_href').value;
rlm@46 1467
rlm@46 1468 ////////////
rlm@46 1469 }
rlm@46 1470
rlm@46 1471 function myWorkSize() {
rlm@46 1472 var myWidth = 0, myHeight = 0;
rlm@46 1473 if( typeof( window.innerWidth ) == 'number' ) {
rlm@46 1474 //Non-IE
rlm@46 1475 myWidth = window.innerWidth;
rlm@46 1476 myHeight = window.innerHeight;
rlm@46 1477 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
rlm@46 1478 //IE 6+ in 'standards compliant mode'
rlm@46 1479 myWidth = document.documentElement.clientWidth;
rlm@46 1480 myHeight = document.documentElement.clientHeight;
rlm@46 1481 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
rlm@46 1482 //IE 4 compatible
rlm@46 1483 myWidth = document.body.clientWidth;
rlm@46 1484 myHeight = document.body.clientHeight;
rlm@46 1485 }
rlm@46 1486 return [ myWidth, myHeight] ;
rlm@46 1487 }
rlm@46 1488
rlm@46 1489 function doResize(){
rlm@46 1490 //deleteAllShapes();
rlm@46 1491 vertexFrames();
rlm@46 1492 resizeFrame();
rlm@46 1493 //c.renderer.zoomFrame(zoominit);
rlm@46 1494 //c.renderer.view(canvasX,canvasY,canvasW,canvasH,zoominit)
rlm@46 1495 //c.renderer.view(docx,docy,docw,doch,zoominit1)
rlm@46 1496 // delete rectCanvas
rlm@46 1497 // var vB=zoomx+' '+zoomy+' '+zoomw+' '+zoomh;
rlm@46 1498
rlm@46 1499 //c.renderer.rectCanvas(docx,docy,docw,doch,vB);
rlm@46 1500 }
rlm@46 1501
rlm@46 1502 function vertexFrames(){
rlm@46 1503
rlm@46 1504 var screenSize=myWorkSize();
rlm@46 1505 scrW = screenSize[0];//screen.availWidth;
rlm@46 1506 scrH = screenSize[1];//screen.availHeight;
rlm@46 1507
rlm@46 1508 wndW=scrW;//window.width;
rlm@46 1509 wndH=scrH;//window.height;
rlm@46 1510
rlm@46 1511
rlm@46 1512 if (scrW != wndW || scrH != wndH) {
rlm@46 1513 //window.resizeTo(scrW, scrH);
rlm@46 1514 //window.moveTo(0, 0);
rlm@46 1515 }
rlm@46 1516 //var wProportion={x:35, y:24}
rlm@46 1517
rlm@46 1518 vertexNORTHmenu={ NORTHmenu1:[0,0],NORTHmenu2:[scrW,0],NORTHmenu3:[0,wProportion.y],NORTHmenu4:[scrW,wProportion.y] };
rlm@46 1519 vertexNORTHglobals={ NORTHglobals1:[0,wProportion.y],NORTHglobals2:[scrW,wProportion.y],NORTHglobals3:[0,wProportion.y*2],NORTHglobals4:[scrW,wProportion.y*2] };
rlm@46 1520 vertexNORTHoptions={ NORTHoptions1:[0,wProportion.y*2],NORTHoptions2:[scrW,wProportion.y*2],NORTHoptions3:[0,wProportion.y*3],NORTHoptions4:[scrW,wProportion.y*3] };
rlm@46 1521 vertexSUD={ SUD1:[0,wndH-wProportion.y*3], SUD2:[scrW,(wndH-wProportion.y*3)], SUD3:[0,wndH], SUD4:[scrW,wndH]};
rlm@46 1522 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)] };
rlm@46 1523 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)] };
rlm@46 1524 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]] };
rlm@46 1525
rlm@46 1526 NORTHmenusize=[vertexNORTHmenu.NORTHmenu4[0]-vertexNORTHmenu.NORTHmenu1[0],vertexNORTHmenu.NORTHmenu4[1]-vertexNORTHmenu.NORTHmenu1[1]];
rlm@46 1527 NORTHglobalssize=[vertexNORTHglobals.NORTHglobals4[0]-vertexNORTHglobals.NORTHglobals1[0],vertexNORTHglobals.NORTHglobals4[1]-vertexNORTHglobals.NORTHglobals1[1]];
rlm@46 1528 NORTHoptionssize=[vertexNORTHoptions.NORTHoptions4[0]-vertexNORTHoptions.NORTHoptions1[0],vertexNORTHoptions.NORTHoptions4[1]-vertexNORTHoptions.NORTHoptions1[1]];
rlm@46 1529 SUDsize=[vertexSUD.SUD4[0]-vertexSUD.SUD1[0],vertexSUD.SUD4[1]-vertexSUD.SUD1[1]];
rlm@46 1530 ESTsize=[vertexEST.EST4[0]-vertexEST.EST1[0],vertexEST.EST4[1]-vertexEST.EST1[1]];
rlm@46 1531 WESTsize=[vertexWEST.WEST4[0]-vertexWEST.WEST1[0],vertexWEST.WEST4[1]-vertexWEST.WEST1[1]];
rlm@46 1532 FRONTsize=[vertexFRONT.FRONT4[0]-vertexFRONT.FRONT1[0],vertexFRONT.FRONT4[1]-vertexFRONT.FRONT1[1]];
rlm@46 1533
rlm@46 1534
rlm@46 1535
rlm@46 1536 //percent of FRONTsize
rlm@46 1537 proporDoc= FRONTsize[0]/FRONTsize[1];
rlm@46 1538 canvasYpercent=100;
rlm@46 1539 canvasXpercent=100;
rlm@46 1540 canvasWidth=Math.round(FRONTsize[0]*canvasXpercent/100);//FRONTsize[0];
rlm@46 1541 canvasW=canvasWidth;
rlm@46 1542 canvasHeight=Math.round(canvasYpercent*FRONTsize[1]/100);//FRONTsize[1];
rlm@46 1543 canvasH=canvasHeight;
rlm@46 1544 canvasX=Math.round((FRONTsize[0]-canvasW)/2);
rlm@46 1545 canvasY=Math.round((FRONTsize[1]-canvasH)/2);
rlm@46 1546
rlm@46 1547
rlm@46 1548 //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]] };
rlm@46 1549 //FRONTcanvassize=[vertexFRONT.FRONT4[0]-vertexFRONT.FRONT1[0],vertexFRONT.FRONT4[1]-vertexFRONT.FRONT1[1]];
rlm@46 1550
rlm@46 1551
rlm@46 1552 //centerZoomx=Math.round(canvasWidth/2);
rlm@46 1553 //centerZoomy=Math.round(canvasHeight/2);
rlm@46 1554 if(canvasH==0){ canvasH=0.00000001; }
rlm@46 1555 proporCanvas= canvasW/canvasH ;
rlm@46 1556 //zoominit='0 0 '+zoomw+' '+zoomh;//
rlm@46 1557
rlm@46 1558 makeWorkSite(canvasH,(-canvasW/2)+(docw/2),(-canvasH/2)+(doch/2));
rlm@46 1559 diagonalinit=diagonalFrame;
rlm@46 1560 proporDiagonal=diagonalFrame/diagonalinit;
rlm@46 1561 zoominit=(zoomx)+' '+(zoomy)+' '+zoomw+' '+zoomh;
rlm@46 1562 //$('someinfo').value= zoominit;
rlm@46 1563 //document.forms[0].someinfo.value= zoominit;
rlm@46 1564 //document.getElementById("someinfo").value = zoominit
rlm@46 1565 //Ext.get('richdraw').dom.style.scrollTop = ('40%');
rlm@46 1566 //alert(zoominit);
rlm@46 1567 }
rlm@46 1568
rlm@46 1569 function resizeFrame(){
rlm@46 1570
rlm@46 1571 Ext.get('NORTHmenu').dom.style.backgroundColor = (colorpage1a);
rlm@46 1572 Ext.get('NORTHglobals').dom.style.backgroundColor = (colorpage1b);
rlm@46 1573 Ext.get('NORTHoptions').dom.style.backgroundColor = (colorpage1c);
rlm@46 1574
rlm@46 1575 Ext.get('SUD').dom.style.backgroundColor = (colorpage2);
rlm@46 1576 Ext.get('EST').dom.style.backgroundColor = (colorpage3);
rlm@46 1577 Ext.get('WEST').dom.style.backgroundColor = (colorpage4);
rlm@46 1578
rlm@46 1579 Ext.get('linksPaths').dom.style.backgroundColor = (colorpage); // bad
rlm@46 1580
rlm@46 1581
rlm@46 1582 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');
rlm@46 1583 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');
rlm@46 1584 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');
rlm@46 1585 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');
rlm@46 1586 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'));
rlm@46 1587 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'));
rlm@46 1588 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');
rlm@46 1589
rlm@46 1590 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');
rlm@46 1591
rlm@46 1592 }
rlm@46 1593
rlm@46 1594 function documentProperties(){
rlm@46 1595 var tokens = zoominit.split(' ');
rlm@46 1596
rlm@46 1597 document.forms[0].xDocument.value=tokens[0];
rlm@46 1598 document.forms[0].yDocument.value=tokens[1];
rlm@46 1599
rlm@46 1600 document.forms[0].widthDocument.value=tokens[2];
rlm@46 1601 document.forms[0].heightDocument.value=tokens[3];
rlm@46 1602 showdocFrame('Document properties')
rlm@46 1603 //docFrame.setTitle('Document properties');
rlm@46 1604 //docFrame.show();
rlm@46 1605
rlm@46 1606 }
rlm@46 1607 function changeDocumentProperties(){
rlm@46 1608
rlm@46 1609 //percent of FRONTsize
rlm@46 1610 proporSpace= FRONTsize[0]/FRONTsize[1];
rlm@46 1611 //PERCENT
rlm@46 1612
rlm@46 1613 //canvasYpercent=95;
rlm@46 1614 //canvasXpercent=97;
rlm@46 1615 /*
rlm@46 1616 canvasWidth=Math.round(FRONTsize[0]*canvasXpercent/100);//FRONTsize[0];
rlm@46 1617 canvasW=canvasWidth;
rlm@46 1618 canvasHeight=Math.round(canvasYpercent*FRONTsize[1]/100);//FRONTsize[1];
rlm@46 1619 canvasH=canvasHeight;
rlm@46 1620 */
rlm@46 1621
rlm@46 1622 docx=eval(document.forms[0].xDocument.value);
rlm@46 1623 docy=eval(document.forms[0].yDocument.value);
rlm@46 1624
rlm@46 1625 docw=eval(document.forms[0].widthDocument.value);
rlm@46 1626 doch=eval(document.forms[0].heightDocument.value);
rlm@46 1627 zoominit= docx+' '+docy+' '+docw+' '+doch;
rlm@46 1628 c.renderer.view(docx,docy,docw,doch,zoominit);
rlm@46 1629 borderDoc();
rlm@46 1630
rlm@46 1631 //doResize();
rlm@46 1632 //canvasX=Math.round((FRONTsize[0]-canvasW)/2);
rlm@46 1633 //canvasY=Math.round((FRONTsize[1]-canvasH)/2);
rlm@46 1634
rlm@46 1635
rlm@46 1636 //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');
rlm@46 1637
rlm@46 1638 }
rlm@46 1639 function makeWorkSite(width,left,top) {
rlm@46 1640 fieldViewx=Math.round(width*proporCanvas)*1;
rlm@46 1641 fieldViewy=width*1;
rlm@46 1642 diagonalFrame=dist2p(0,0,fieldViewx*1,fieldViewy*1);
rlm@46 1643 diagonalAngle=getAngle(fieldViewx,fieldViewy);
rlm@46 1644 diagonalMidx=fieldViewx/2;
rlm@46 1645 diagonalMidy=fieldViewy/2;
rlm@46 1646 centerZoomx=diagonalMidx;
rlm@46 1647 centerZoomy=diagonalMidy;
rlm@46 1648
rlm@46 1649 //alert(diagonalinit+' '+diagonalFrame+' '+proporDiagonal);
rlm@46 1650 //alert(canvasW+''+canvasW+' propor:'+proporCanvas+' Docy:'+docy+' fieldView:'+fieldViewx+' '+fieldViewy);
rlm@46 1651 zoomx=(diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle+Math.PI))+left;//-(fieldViewx/8);//-(canvasW/2)docx-fieldViewx;
rlm@46 1652 zoomy=(diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle+Math.PI))+top;//-(fieldViewy/8);//-(canvasH/2);//docy-fieldViewy;
rlm@46 1653 zoomw=diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle);//fieldViewx*1.25;//docw+fieldViewx*2;
rlm@46 1654 zoomh=diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle);//fieldViewy*1.25;//doch+fieldViewy*2;
rlm@46 1655 }
rlm@46 1656
rlm@46 1657
rlm@46 1658 function RichDrawViewer(elem, renderer)
rlm@46 1659 {
rlm@46 1660 this.container = elem;
rlm@46 1661 this.renderer = renderer;
rlm@46 1662 this.renderer.init(this.container);
rlm@46 1663 this.renderer.editor = this;
rlm@46 1664 }
rlm@46 1665 /*
rlm@46 1666 onResize : function(){
rlm@46 1667 Ext.TabPanel.superclass.onResize.apply(this, arguments);
rlm@46 1668 this.delegateUpdates();
rlm@46 1669 },
rlm@46 1670 */