Mercurial > laserkard

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