Mercurial > laserkard

comparison onlypaths/js/application_mini.js @ 46:26c2b3ad21c7 laserkard

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[svn r47] saving progresswww.cinemassacre.com/new/?page_id=30
author rlm
date Sun, 31 Jan 2010 12:33:33 -0500
parents
children
comparison
equal deleted inserted replaced
45:bff96abdddfa 46:26c2b3ad21c7
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 */