rlm@46
|
1 /*----------------------------------------------------------------------------
|
rlm@46
|
2 ONLYPATHS 0.1
|
rlm@46
|
3 from
|
rlm@46
|
4 RICHDRAW 1.0
|
rlm@46
|
5 Vector Graphics Drawing Script
|
rlm@46
|
6 -----------------------------------------------------------------------------
|
rlm@46
|
7 Created by Mark Finkle (mark.finkle@gmail.com)
|
rlm@46
|
8 Implementation of simple vector graphic drawing control using SVG or VML.
|
rlm@46
|
9 -----------------------------------------------------------------------------
|
rlm@46
|
10 Copyright (c) 2006 Mark Finkle
|
rlm@46
|
11 2008 Antimatter15
|
rlm@46
|
12 2008 Josep_ssv
|
rlm@46
|
13
|
rlm@46
|
14 This program is free software; you can redistribute it and/or modify it
|
rlm@46
|
15 under the terms of the MIT License.
|
rlm@46
|
16
|
rlm@46
|
17 Permission is hereby granted, free of charge, to any person obtaining a
|
rlm@46
|
18 copy of this software and associated documentation files (the "Software"),
|
rlm@46
|
19 to deal in the Software without restriction, including without limitation
|
rlm@46
|
20 the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
rlm@46
|
21 and/or sell copies of the Software, and to permit persons to whom the
|
rlm@46
|
22 Software is furnished to do so, subject to the following conditions:
|
rlm@46
|
23 The above copyright notice and this permission notice shall be included in
|
rlm@46
|
24 all copies or substantial portions of the Software.
|
rlm@46
|
25
|
rlm@46
|
26 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
rlm@46
|
27 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
rlm@46
|
28 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
rlm@46
|
29 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
rlm@46
|
30 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
rlm@46
|
31 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
rlm@46
|
32 DEALINGS IN THE SOFTWARE.
|
rlm@46
|
33 -----------------------------------------------------------------------------
|
rlm@46
|
34 Dependencies: (SVG or VML rendering implementations)
|
rlm@46
|
35 History:
|
rlm@46
|
36 2006-04-05 | Created richdraw.js
|
rlm@46
|
37 2008 | Update content and added framework ExtJS
|
rlm@46
|
38 2008-06-08 | Rename onlypaths.js
|
rlm@46
|
39 --------------------------------------------------------------------------*/
|
rlm@46
|
40
|
rlm@46
|
41 var xpArray=new Array();
|
rlm@46
|
42 var ypArray=new Array();
|
rlm@46
|
43 var setPoints=new Array();
|
rlm@46
|
44
|
rlm@46
|
45 var inout='';//true;
|
rlm@46
|
46 var typeTransform='';
|
rlm@46
|
47
|
rlm@46
|
48 var contmove=0;
|
rlm@46
|
49 var zoomx=0;
|
rlm@46
|
50 var zoomy=0;
|
rlm@46
|
51 var zoomscale=1;
|
rlm@46
|
52 var zoommode='frame'; //more minus frame
|
rlm@46
|
53
|
rlm@46
|
54 //
|
rlm@46
|
55
|
rlm@46
|
56 var data_path_close=true;
|
rlm@46
|
57 var data_text_family='';
|
rlm@46
|
58 var data_text_size=19
|
rlm@46
|
59 var data_text_messaje='';
|
rlm@46
|
60 var data_image_href='';
|
rlm@46
|
61
|
rlm@46
|
62 var numClics=0;
|
rlm@46
|
63
|
rlm@46
|
64 ////////////
|
rlm@46
|
65
|
rlm@46
|
66 function RichDrawEditor(elem, renderer) {
|
rlm@46
|
67 this.container = elem;
|
rlm@46
|
68 this.gridX = 10;
|
rlm@46
|
69 this.gridY = 10;
|
rlm@46
|
70 this.mouseDownX = 0;
|
rlm@46
|
71 this.mouseDownY = 0;
|
rlm@46
|
72 this.clicX = 0;
|
rlm@46
|
73 this.clicY = 0;
|
rlm@46
|
74 this.nowDraw=false;
|
rlm@46
|
75 this.mode = '';
|
rlm@46
|
76 this.fillColor = '';
|
rlm@46
|
77 this.lineColor = '';
|
rlm@46
|
78 this.lineWidth = '';
|
rlm@46
|
79 this.selected = null;
|
rlm@46
|
80 this.squareSelect = null;
|
rlm@46
|
81 this.focusin = null;
|
rlm@46
|
82 this.lineOpac = 1;
|
rlm@46
|
83 this.fillOpac = 1;
|
rlm@46
|
84 this.gridWidth = 1;
|
rlm@46
|
85 this.opac = 1;
|
rlm@46
|
86 //++ ;
|
rlm@46
|
87 this.text_messaje="";
|
rlm@46
|
88 this.text_size=19;
|
rlm@46
|
89 this.text_family="Arial";
|
rlm@46
|
90
|
rlm@46
|
91 this.pathsEdit = false;
|
rlm@46
|
92 this.previusBox=null;
|
rlm@46
|
93 this.initialPath='';
|
rlm@46
|
94 this.clipboard=null;
|
rlm@46
|
95 this.moveNow=true;
|
rlm@46
|
96
|
rlm@46
|
97 this.selectedBounds = { x:0, y:0, width:0, height: 0 };
|
rlm@46
|
98 this.onselect = function() {}
|
rlm@46
|
99 this.onunselect = function() {}
|
rlm@46
|
100
|
rlm@46
|
101 this.logtext = "";
|
rlm@46
|
102
|
rlm@46
|
103 this.renderer = renderer;
|
rlm@46
|
104 this.renderer.init(this.container);
|
rlm@46
|
105 this.renderer.editor = this;
|
rlm@46
|
106 this.inputxy = [];
|
rlm@46
|
107 this.onInputXY = function(){};
|
rlm@46
|
108 Ext.get(this.container).on('keypress', function(e){alert(e.keyCode);});
|
rlm@46
|
109
|
rlm@46
|
110 Ext.get(this.container).on( "mousedown", this.onMouseDown,this);
|
rlm@46
|
111 Ext.get(this.container).on( "mouseup", this.onMouseUp,this);
|
rlm@46
|
112 //Ext.get(this.container).on( "mouseout", this.outShape,this);
|
rlm@46
|
113 //Ext.get(this.container).on( "mouseover", this.overShape,this);
|
rlm@46
|
114 Ext.get(this.container).on( "mousemove", this.onTranslate,this);
|
rlm@46
|
115 Ext.get(this.container).on( "dblclick", this.onEndLine,this);
|
rlm@46
|
116 Ext.get(this.container).on( "selectstart", this.onSelectStart,this);
|
rlm@46
|
117
|
rlm@46
|
118
|
rlm@46
|
119 //Ext.get(this.container).on("keydown", keypresshandler, this);
|
rlm@46
|
120 //Event.observe(this.container).on( "keydown", keypresshandler,this);
|
rlm@46
|
121 //Ext.get(this.container).on( "keypress", this.onKeyPress,this);
|
rlm@46
|
122 //Ext.get(this.container).on('keydown',this.onKeyPress,this);
|
rlm@46
|
123
|
rlm@46
|
124 }
|
rlm@46
|
125
|
rlm@46
|
126 RichDrawEditor.prototype.log = function(logtext){
|
rlm@46
|
127 //this.logtext = logtext
|
rlm@46
|
128 if(document.forms[0].code){
|
rlm@46
|
129 document.forms[0].code.value = logtext
|
rlm@46
|
130 }
|
rlm@46
|
131 }
|
rlm@46
|
132
|
rlm@46
|
133
|
rlm@46
|
134 RichDrawEditor.prototype.getshapes = function(){
|
rlm@46
|
135 return this.renderer.getshapes();
|
rlm@46
|
136 }
|
rlm@46
|
137
|
rlm@46
|
138 RichDrawEditor.prototype.info = function(shape){
|
rlm@46
|
139 return this.renderer.info(shape)
|
rlm@46
|
140 }
|
rlm@46
|
141
|
rlm@46
|
142
|
rlm@46
|
143 RichDrawEditor.prototype.clearWorkspace = function() {
|
rlm@46
|
144 this.container.innerHTML = '';
|
rlm@46
|
145 };
|
rlm@46
|
146
|
rlm@46
|
147 RichDrawEditor.prototype.deleteSelection = function() {
|
rlm@46
|
148 if (this.selected) {
|
rlm@46
|
149 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
150 this.renderer.remove(this.selected);
|
rlm@46
|
151 this.selected = null;
|
rlm@46
|
152 }
|
rlm@46
|
153 };
|
rlm@46
|
154
|
rlm@46
|
155 RichDrawEditor.prototype.toFront = function(order) {
|
rlm@46
|
156 if (this.selected) {
|
rlm@46
|
157 this.renderer.index(this.selected, order);
|
rlm@46
|
158 }
|
rlm@46
|
159 };
|
rlm@46
|
160
|
rlm@46
|
161 RichDrawEditor.prototype.deleteAll = function() {
|
rlm@46
|
162 this.renderer.removeAll();
|
rlm@46
|
163 };
|
rlm@46
|
164
|
rlm@46
|
165
|
rlm@46
|
166 RichDrawEditor.prototype.select = function(elem) {
|
rlm@46
|
167 if (elem == this.selected){ return; }
|
rlm@46
|
168 this.selected = elem;
|
rlm@46
|
169 this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
170 this.onselect(this);
|
rlm@46
|
171 };
|
rlm@46
|
172
|
rlm@46
|
173
|
rlm@46
|
174 RichDrawEditor.prototype.unselect = function() {
|
rlm@46
|
175 if (this.selected) {
|
rlm@46
|
176 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
177 this.selected = null;
|
rlm@46
|
178 this.onunselect(this);
|
rlm@46
|
179 }
|
rlm@46
|
180 };
|
rlm@46
|
181
|
rlm@46
|
182 RichDrawEditor.prototype.getSelectedElement = function() {
|
rlm@46
|
183 return this.selected;
|
rlm@46
|
184 };
|
rlm@46
|
185
|
rlm@46
|
186 RichDrawEditor.prototype.toCurve = function() {
|
rlm@46
|
187 this.renderer.tocurve();
|
rlm@46
|
188 }
|
rlm@46
|
189
|
rlm@46
|
190 RichDrawEditor.prototype.submitShape = function(data) {
|
rlm@46
|
191 if (this.mode != 'select') {
|
rlm@46
|
192 setMode('path', 'Path');
|
rlm@46
|
193 this.actualStyle();
|
rlm@46
|
194 onColorChange();
|
rlm@46
|
195 //shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent
|
rlm@46
|
196 //this.selected = this.renderer.datacreate(this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,data);
|
rlm@46
|
197 this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref, data, '', '');
|
rlm@46
|
198
|
rlm@46
|
199 this.selected.id = 'shape:' + createUUID();
|
rlm@46
|
200 Ext.get(this.selected).on("mousedown", this.onHit,this);
|
rlm@46
|
201 setMode('select', 'Select');
|
rlm@46
|
202 } else {
|
rlm@46
|
203 this.renderer.transformShape(this.selected,data,null);
|
rlm@46
|
204 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
205 this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
206 }
|
rlm@46
|
207 };
|
rlm@46
|
208
|
rlm@46
|
209 RichDrawEditor.prototype.setGrid = function(horizontal, vertical) {
|
rlm@46
|
210 this.gridX = horizontal;
|
rlm@46
|
211 this.gridY = vertical;
|
rlm@46
|
212 this.gridWidth = (vertical+horizontal)/2; //average. ideally, it should be the same
|
rlm@46
|
213 };
|
rlm@46
|
214
|
rlm@46
|
215
|
rlm@46
|
216 // ++
|
rlm@46
|
217 RichDrawEditor.prototype.actualStyle = function()
|
rlm@46
|
218 {
|
rlm@46
|
219 this.textMessaje=$('option_text_message').value;
|
rlm@46
|
220 this.textSize=parseFloat($('option_text_size').value);
|
rlm@46
|
221 this.textFamily=$('option_text_family').value;
|
rlm@46
|
222 this.pathClose = $('option_path_close').checked;
|
rlm@46
|
223 this.imageHref = $('option_image_href').value;
|
rlm@46
|
224
|
rlm@46
|
225 return;
|
rlm@46
|
226 };
|
rlm@46
|
227
|
rlm@46
|
228
|
rlm@46
|
229 RichDrawEditor.prototype.editCommand = function(cmd, value)
|
rlm@46
|
230 {
|
rlm@46
|
231 if (cmd == 'mode')
|
rlm@46
|
232 {
|
rlm@46
|
233 this.mode = value;
|
rlm@46
|
234 }
|
rlm@46
|
235 else if (this.selected == null)
|
rlm@46
|
236 {
|
rlm@46
|
237 if (cmd == 'fillcolor')
|
rlm@46
|
238 {
|
rlm@46
|
239 this.fillColor = value;
|
rlm@46
|
240 }
|
rlm@46
|
241 else if (cmd == 'linecolor')
|
rlm@46
|
242 {
|
rlm@46
|
243 this.lineColor = value;
|
rlm@46
|
244 }
|
rlm@46
|
245 else if (cmd == 'linewidth')
|
rlm@46
|
246 {
|
rlm@46
|
247 this.lineWidth = parseInt(value) + 'px';
|
rlm@46
|
248 }
|
rlm@46
|
249 else if (cmd == 'fillopacity') {
|
rlm@46
|
250 this.fillOpac = parseInt(value);
|
rlm@46
|
251 }
|
rlm@46
|
252 else if (cmd == 'lineopacity') {
|
rlm@46
|
253 this.lineOpac = parseInt(value);
|
rlm@46
|
254 }
|
rlm@46
|
255 }
|
rlm@46
|
256 else
|
rlm@46
|
257 {
|
rlm@46
|
258 this.renderer.editCommand(this.selected, cmd, value);
|
rlm@46
|
259 }
|
rlm@46
|
260 }
|
rlm@46
|
261
|
rlm@46
|
262
|
rlm@46
|
263 RichDrawEditor.prototype.queryCommand = function(cmd)
|
rlm@46
|
264 {
|
rlm@46
|
265 if (cmd == 'mode')
|
rlm@46
|
266 {
|
rlm@46
|
267 return this.mode;
|
rlm@46
|
268 }
|
rlm@46
|
269 else if (this.selected == null)
|
rlm@46
|
270 {
|
rlm@46
|
271 if (cmd == 'fillcolor')
|
rlm@46
|
272 {
|
rlm@46
|
273 return this.fillColor;
|
rlm@46
|
274 }
|
rlm@46
|
275 else if (cmd == 'linecolor')
|
rlm@46
|
276 {
|
rlm@46
|
277 return this.lineColor;
|
rlm@46
|
278 }
|
rlm@46
|
279 else if (cmd == 'linewidth')
|
rlm@46
|
280 {
|
rlm@46
|
281 return this.lineWidth;
|
rlm@46
|
282 }
|
rlm@46
|
283 else if (cmd == 'fillopacity')
|
rlm@46
|
284 {
|
rlm@46
|
285 return this.fillOpac;
|
rlm@46
|
286 }
|
rlm@46
|
287 else if (cmd == 'lineopacity')
|
rlm@46
|
288 {
|
rlm@46
|
289 return this.fillOpac;
|
rlm@46
|
290 }
|
rlm@46
|
291 }
|
rlm@46
|
292 else
|
rlm@46
|
293 {
|
rlm@46
|
294 return this.renderer.queryCommand(this.selected, cmd);
|
rlm@46
|
295 }
|
rlm@46
|
296 }
|
rlm@46
|
297
|
rlm@46
|
298
|
rlm@46
|
299
|
rlm@46
|
300
|
rlm@46
|
301 RichDrawEditor.prototype.onSelectStart = function(event) {
|
rlm@46
|
302 return false
|
rlm@46
|
303 }
|
rlm@46
|
304
|
rlm@46
|
305
|
rlm@46
|
306 /////////////////////////////
|
rlm@46
|
307
|
rlm@46
|
308
|
rlm@46
|
309 /*
|
rlm@46
|
310
|
rlm@46
|
311 Event.observe(window, 'load', function() {
|
rlm@46
|
312 Event.observe(document, 'keypress', function(e){
|
rlm@46
|
313 var code;
|
rlm@46
|
314 if (!e) var e = window.event;
|
rlm@46
|
315 if (e.keyCode) code = e.keyCode;
|
rlm@46
|
316 else if (e.which) code = e.which;
|
rlm@46
|
317 var character = String.fromCharCode(code);
|
rlm@46
|
318 alert('Character was ' + character);
|
rlm@46
|
319 });
|
rlm@46
|
320 });
|
rlm@46
|
321 */
|
rlm@46
|
322
|
rlm@46
|
323 ////////////////////////
|
rlm@46
|
324 /*RichDrawEditor.prototype.outShape = function(event) {
|
rlm@46
|
325 if(typeTransform=='Translate')
|
rlm@46
|
326 {
|
rlm@46
|
327 typeTransform='';
|
rlm@46
|
328 }
|
rlm@46
|
329 }
|
rlm@46
|
330 RichDrawEditor.prototype.overShape = function(event) {
|
rlm@46
|
331 typeTransform='Translate';
|
rlm@46
|
332
|
rlm@46
|
333 }
|
rlm@46
|
334 */
|
rlm@46
|
335 RichDrawEditor.prototype.onMouseDown = function(event) {
|
rlm@46
|
336
|
rlm@46
|
337 clockdata();
|
rlm@46
|
338
|
rlm@46
|
339 //MODE NO SELECT
|
rlm@46
|
340 if (this.mode != 'select')
|
rlm@46
|
341 {
|
rlm@46
|
342 var modeUsed=0;
|
rlm@46
|
343 if (this.mode == 'zoom')
|
rlm@46
|
344 {
|
rlm@46
|
345 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
346 var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
347 var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
348 //snappedX*=proporDiagonal;
|
rlm@46
|
349 //snappedY*=proporDiagonal;
|
rlm@46
|
350
|
rlm@46
|
351 //snappedX+=marginx;
|
rlm@46
|
352 //snappedY+=marginy;
|
rlm@46
|
353 var width=this.gridWidth;
|
rlm@46
|
354 contmove=0;
|
rlm@46
|
355 this.setGrid(width, width);
|
rlm@46
|
356 this.unselect();
|
rlm@46
|
357 xpArray=new Array();
|
rlm@46
|
358 ypArray=new Array();
|
rlm@46
|
359 this.mouseDownX = zoomx+snappedX;
|
rlm@46
|
360 this.mouseDownY = zoomy+snappedY;
|
rlm@46
|
361 xpArray.push(this.mouseDownX);
|
rlm@46
|
362 ypArray.push(this.mouseDownY);
|
rlm@46
|
363 if(zoommode=='window'){
|
rlm@46
|
364 this.squareSelect= this.renderer.create('rect', 'none', "#000000", 1, 1, 1, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref,'M0,0 1,1', '', '');
|
rlm@46
|
365 this.squareSelect.id = 'squareSelectID';
|
rlm@46
|
366 Ext.get(this.squareSelect).on( "mousedown", this.onHit,this);
|
rlm@46
|
367 Ext.get(this.squareSelect).on( "mousemove", this.onDraw,this);
|
rlm@46
|
368
|
rlm@46
|
369 }else{
|
rlm@46
|
370 this.renderer.zoom(this.mouseDownX, this.mouseDownY);
|
rlm@46
|
371 }
|
rlm@46
|
372 modeUsed=1;
|
rlm@46
|
373 } //end zoom
|
rlm@46
|
374 if (this.mode == 'controlpath')
|
rlm@46
|
375 {
|
rlm@46
|
376 this.actualStyle();
|
rlm@46
|
377 onColorChange();
|
rlm@46
|
378 if(numClics<=0)
|
rlm@46
|
379 {
|
rlm@46
|
380 this.nowDraw=true;
|
rlm@46
|
381 setPoints=new Array();
|
rlm@46
|
382 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
383 var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
384 var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
385 //snappedX*=proporDiagonal;
|
rlm@46
|
386 //snappedY*=proporDiagonal;
|
rlm@46
|
387 //snappedX+=marginx;
|
rlm@46
|
388 //snappedY+=marginy;
|
rlm@46
|
389 var width=this.gridWidth;
|
rlm@46
|
390 contmove=0;
|
rlm@46
|
391 this.setGrid(width, width);
|
rlm@46
|
392 this.unselect();
|
rlm@46
|
393 xpArray=new Array();
|
rlm@46
|
394 ypArray=new Array();
|
rlm@46
|
395 this.mouseDownX = zoomx+snappedX;
|
rlm@46
|
396 this.mouseDownY = zoomy+snappedY;
|
rlm@46
|
397 xpArray.push(this.mouseDownX);
|
rlm@46
|
398 ypArray.push(this.mouseDownY);
|
rlm@46
|
399 setPoints.push(this.mouseDownX+','+this.mouseDownY);
|
rlm@46
|
400 // ++ ;
|
rlm@46
|
401 onColorChange();
|
rlm@46
|
402 this.actualStyle();
|
rlm@46
|
403 // ++ ;
|
rlm@46
|
404 //shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent
|
rlm@46
|
405 //this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref, '');
|
rlm@46
|
406
|
rlm@46
|
407 this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref, 'M0,0 1,1', '', '');
|
rlm@46
|
408
|
rlm@46
|
409 this.selected.id = 'shape:' + createUUID();
|
rlm@46
|
410 Ext.get(this.selected).on( "mousedown", this.onHit,this);
|
rlm@46
|
411 this.log(this.selected.id);
|
rlm@46
|
412
|
rlm@46
|
413 Ext.get(this.selected).on( "dblclick", this.onEndLine,this);
|
rlm@46
|
414 Ext.get(this.container).on( "mousemove", this.onDraw,this);
|
rlm@46
|
415 numClics++;
|
rlm@46
|
416 }
|
rlm@46
|
417 else
|
rlm@46
|
418 {
|
rlm@46
|
419 var coord=this.inputxy;
|
rlm@46
|
420 var X=parseFloat(coord[0]);
|
rlm@46
|
421 var Y=parseFloat(coord[1]);
|
rlm@46
|
422 setPoints.push(X+','+Y);
|
rlm@46
|
423 this.renderer.clic(this.selected);
|
rlm@46
|
424 numClics++;
|
rlm@46
|
425 }
|
rlm@46
|
426 modeUsed=1;
|
rlm@46
|
427 } //end mode controlpath
|
rlm@46
|
428 if (modeUsed == 0)
|
rlm@46
|
429 {
|
rlm@46
|
430 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
431 var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
432 var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
433 //snappedX*=proporDiagonal;
|
rlm@46
|
434 //snappedY*=proporDiagonal;
|
rlm@46
|
435 //snappedX+=marginx;
|
rlm@46
|
436 //snappedY+=marginy;
|
rlm@46
|
437
|
rlm@46
|
438 var width=this.gridWidth;
|
rlm@46
|
439 contmove=0;
|
rlm@46
|
440 this.setGrid(width, width);
|
rlm@46
|
441 this.unselect();
|
rlm@46
|
442 xpArray=new Array();
|
rlm@46
|
443 ypArray=new Array();
|
rlm@46
|
444 this.mouseDownX = zoomx+snappedX;
|
rlm@46
|
445 this.mouseDownY = zoomy+snappedY;
|
rlm@46
|
446 xpArray.push(this.mouseDownX);
|
rlm@46
|
447 ypArray.push(this.mouseDownY);
|
rlm@46
|
448 this.unselect();
|
rlm@46
|
449 onColorChange();
|
rlm@46
|
450 this.actualStyle();
|
rlm@46
|
451 //this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref,'');
|
rlm@46
|
452
|
rlm@46
|
453 this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref,'M0,0 1,1', '', '');
|
rlm@46
|
454
|
rlm@46
|
455 this.selected.id = 'shape:' + createUUID();
|
rlm@46
|
456 //-- this.selected.id = this.mode+':' + createUUID();
|
rlm@46
|
457 Ext.get(this.selected).on( "mousedown", this.onHit,this);
|
rlm@46
|
458 Ext.get(this.container).on( "mousemove", this.onDraw,this);
|
rlm@46
|
459 //Ext.get(this.container).on( "mouseover", this.overShape,this);
|
rlm@46
|
460 //Ext.get(this.container).on( "mouseout", this.outShape,this);
|
rlm@46
|
461 }
|
rlm@46
|
462 }
|
rlm@46
|
463 else //----- MODE SELECT
|
rlm@46
|
464 {
|
rlm@46
|
465
|
rlm@46
|
466 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
467 var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
468 var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
469
|
rlm@46
|
470 //snappedX*=proporDiagonal;
|
rlm@46
|
471 //snappedY*=proporDiagonal;
|
rlm@46
|
472 //snappedX+=marginx;
|
rlm@46
|
473 //snappedY+=marginy;
|
rlm@46
|
474
|
rlm@46
|
475 // if ((this.mouseDownX != snappedX && this.mouseDownY != snappedY) || typeTransform=='')
|
rlm@46
|
476 if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)
|
rlm@46
|
477 {
|
rlm@46
|
478 if(this.selected!=null && typeTransform=='Translate' )
|
rlm@46
|
479 {
|
rlm@46
|
480
|
rlm@46
|
481 Ext.get(this.container).un("mousemove", this.onDrag);
|
rlm@46
|
482 this.unselect();
|
rlm@46
|
483 }
|
rlm@46
|
484 //typeTransform='';
|
rlm@46
|
485 }
|
rlm@46
|
486
|
rlm@46
|
487 // if (typeTransform=='' && (this.mouseDownX != snappedX || this.mouseDownY != snappedY) )
|
rlm@46
|
488 // {
|
rlm@46
|
489 //if(typeTransform=='Rotate' || typeTransform=='Translate'){ }else{
|
rlm@46
|
490
|
rlm@46
|
491 //this.unselect();
|
rlm@46
|
492 // }
|
rlm@46
|
493 // }
|
rlm@46
|
494 //else
|
rlm@46
|
495 //{
|
rlm@46
|
496 // if(this.nowDraw==true){ alert('Double click, please'); this.onEndLineListener(event); return true;}
|
rlm@46
|
497 //Ext.get(this.container).on( "mouseout", this.onRotate,this);
|
rlm@46
|
498
|
rlm@46
|
499
|
rlm@46
|
500 // if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)
|
rlm@46
|
501 //{
|
rlm@46
|
502 if(typeTransform=='Translate')
|
rlm@46
|
503 {
|
rlm@46
|
504 inout='move';//true;
|
rlm@46
|
505 //Event.observe(this.selected, "mousedown", this.onHit,this);
|
rlm@46
|
506 //Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
507 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
508
|
rlm@46
|
509 }
|
rlm@46
|
510 if(typeTransform=='Scale' || typeTransform=='Rotate')
|
rlm@46
|
511 {
|
rlm@46
|
512 inout='rotate_escale';//false
|
rlm@46
|
513 Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
514 Ext.get(this.selected).on( "mousedown", this.onHit,this);
|
rlm@46
|
515 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
516
|
rlm@46
|
517 //Ext.get(this.container).on( "mouseover", this.onTranslate,this);
|
rlm@46
|
518 //Ext.get(this.container).on( "mouseout", this.onRotate,this);
|
rlm@46
|
519 //this.unselect();
|
rlm@46
|
520 }
|
rlm@46
|
521 //} //end typeTransform==''
|
rlm@46
|
522 } //end mode select
|
rlm@46
|
523 return false;
|
rlm@46
|
524 };
|
rlm@46
|
525
|
rlm@46
|
526
|
rlm@46
|
527 RichDrawEditor.prototype.onMouseUp = function(event)
|
rlm@46
|
528 {
|
rlm@46
|
529 //Ext.get(this.selected).un("mousemove",this.onDrag)
|
rlm@46
|
530
|
rlm@46
|
531 //MODE NO SELECT
|
rlm@46
|
532 if (this.mode != 'select')
|
rlm@46
|
533 {
|
rlm@46
|
534 //this.renderer.restruct(this.selected);
|
rlm@46
|
535 if(this.mode == 'controlpath')
|
rlm@46
|
536 {
|
rlm@46
|
537 //Event.observe(this.selected, "mousemove", this.onClic,this);
|
rlm@46
|
538 //this.renderer.info(this.selected);
|
rlm@46
|
539 }
|
rlm@46
|
540 else
|
rlm@46
|
541 {
|
rlm@46
|
542 //ZOOM
|
rlm@46
|
543 if (this.mode == 'zoom')
|
rlm@46
|
544 {
|
rlm@46
|
545 var offset = Ext.get(this.container).getXY()
|
rlm@46
|
546 var snappedX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
|
rlm@46
|
547 var snappedY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
|
rlm@46
|
548
|
rlm@46
|
549 //snappedX*=proporDiagonal;
|
rlm@46
|
550 //snappedY*=proporDiagonal;
|
rlm@46
|
551 //snappedX+=marginx;
|
rlm@46
|
552 //snappedY+=marginy;
|
rlm@46
|
553 this.renderer.zoom(snappedX, snappedY);
|
rlm@46
|
554 this.renderer.remove(this.container.ownerDocument.getElementById('squareSelectID'));
|
rlm@46
|
555 Ext.get(this.container).un("mousemove", this.onDraw);
|
rlm@46
|
556 this.squareSelect = null;
|
rlm@46
|
557 this.selected = null;
|
rlm@46
|
558 }else{
|
rlm@46
|
559 Ext.get(this.container).un("mousemove", this.onDraw);
|
rlm@46
|
560 this.selected = null;
|
rlm@46
|
561 }
|
rlm@46
|
562 }
|
rlm@46
|
563 }
|
rlm@46
|
564 else //MODE SELECT
|
rlm@46
|
565 {
|
rlm@46
|
566 Ext.get(this.container).un("mousemove", this.onDraw); //or drag
|
rlm@46
|
567 //Ext.get(this.container).un("mousemove", this.onDrag);
|
rlm@46
|
568 Ext.get(this.container).un("mousemove", this.onDrag);
|
rlm@46
|
569
|
rlm@46
|
570 moveNow=false;
|
rlm@46
|
571 contmove=0;
|
rlm@46
|
572 // if(inout=='move' || inout=='rotate_scale' ){
|
rlm@46
|
573 if(typeTransform=="Rotate" || typeTransform=="Scale" )
|
rlm@46
|
574 {
|
rlm@46
|
575 //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
576 this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
577
|
rlm@46
|
578 //inout='move';//true;
|
rlm@46
|
579 //this.renderer.restruct(this.selected);
|
rlm@46
|
580 typeTransform=='';
|
rlm@46
|
581 }
|
rlm@46
|
582 if(typeTransform=="Translate" )
|
rlm@46
|
583 {
|
rlm@46
|
584
|
rlm@46
|
585 this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
586 //Ext.get(this.container).un("mousemove", this.renderer.move);
|
rlm@46
|
587 //Ext.get(this.container).un("mousemove", this.onDrag);
|
rlm@46
|
588 typeTransform=='';
|
rlm@46
|
589 //this.renderer.restruct(this.selected);
|
rlm@46
|
590 //this.unselect();
|
rlm@46
|
591 contmove=0;
|
rlm@46
|
592
|
rlm@46
|
593 }
|
rlm@46
|
594 if(inout=='multiSelect')
|
rlm@46
|
595 {
|
rlm@46
|
596
|
rlm@46
|
597 //inout='move';//true;
|
rlm@46
|
598 }
|
rlm@46
|
599
|
rlm@46
|
600 typeTransform=='';
|
rlm@46
|
601 }
|
rlm@46
|
602 //Event.stopObserving(this.container, "mousemove", this.onDraw,this);
|
rlm@46
|
603 };
|
rlm@46
|
604
|
rlm@46
|
605
|
rlm@46
|
606 RichDrawEditor.prototype.onDrag = function(event) {
|
rlm@46
|
607
|
rlm@46
|
608 moveNow=true;
|
rlm@46
|
609 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
610 var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
611 var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
612 //snappedX*=proporDiagonal;
|
rlm@46
|
613 //snappedY*=proporDiagonal;
|
rlm@46
|
614 //snappedX+=marginx;
|
rlm@46
|
615 //snappedY+=marginy;
|
rlm@46
|
616
|
rlm@46
|
617 var deltaX = snappedX - this.mouseDownX;
|
rlm@46
|
618 var deltaY = snappedY - this.mouseDownY;
|
rlm@46
|
619
|
rlm@46
|
620 var modeUsed=0;
|
rlm@46
|
621 if(this.mode == 'zoom')
|
rlm@46
|
622 {
|
rlm@46
|
623 Ext.get(this.container).getXY();
|
rlm@46
|
624 this.renderer.resize(this.squareSelect, this.clicX,this.clicY, zoomx+(this.selectedBounds.x + deltaX), zoomy+(this.selectedBounds.y +deltaY));
|
rlm@46
|
625 //this.renderer.zoom(this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY);
|
rlm@46
|
626 //this.renderer.zoom(this.mouseDownX, this.mouseDownY);
|
rlm@46
|
627
|
rlm@46
|
628 modeUsed=1;
|
rlm@46
|
629 }
|
rlm@46
|
630 if(this.mode == 'controlpath')
|
rlm@46
|
631 {
|
rlm@46
|
632 modeUsed=1;
|
rlm@46
|
633 }
|
rlm@46
|
634 if(modeUsed==0)
|
rlm@46
|
635 {
|
rlm@46
|
636 if(inout=='multiSelect'){
|
rlm@46
|
637 this.renderer.showMultiSelect(this.mouseDownX, this.mouseDownY);
|
rlm@46
|
638 }
|
rlm@46
|
639
|
rlm@46
|
640
|
rlm@46
|
641 if(typeTransform=="Translate")
|
rlm@46
|
642 {
|
rlm@46
|
643 Ext.get(this.container).getXY();
|
rlm@46
|
644
|
rlm@46
|
645
|
rlm@46
|
646 //var coord=this.inputxy;
|
rlm@46
|
647 //var moveX=parseFloat(coord[0]);
|
rlm@46
|
648 //var moveY=parseFloat(coord[1]);
|
rlm@46
|
649 this.log(this.mouseDownX+' '+event.getXY()[0]+' '+ this.selectedBounds.x +'contmove'+contmove);
|
rlm@46
|
650 this.renderer.move(this.selected, zoomx+(this.selectedBounds.x + deltaX), zoomy+(this.selectedBounds.y +deltaY),this.clicX,this.clicY);
|
rlm@46
|
651 //this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
652
|
rlm@46
|
653 }
|
rlm@46
|
654
|
rlm@46
|
655
|
rlm@46
|
656 if(typeTransform=="Rotate")
|
rlm@46
|
657 {
|
rlm@46
|
658 this.renderer.rotateShape(this.selected, this.previusBox,deltaX, deltaY);
|
rlm@46
|
659 //this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
660 }
|
rlm@46
|
661
|
rlm@46
|
662 //if(typeTransform=="Scale") {this.renderer.scale(this.selected, this.previusBox, deltaX, deltaY); }
|
rlm@46
|
663 if(typeTransform=="Scale")
|
rlm@46
|
664 {
|
rlm@46
|
665 this.renderer.scaleShape(this.selected, this.previusBox, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY);
|
rlm@46
|
666 //this.renderer.showTracker(this.selected,this.pathsEdit);
|
rlm@46
|
667 }
|
rlm@46
|
668 //if(typeTransform=="Scale") {this.renderer.scale(this.selected, this.previusBox, this.selectedBounds.width + deltaX, this.selectedBounds.height + deltaY); }
|
rlm@46
|
669
|
rlm@46
|
670 //RichDrawEditor.prototype.onTransform(event);
|
rlm@46
|
671
|
rlm@46
|
672
|
rlm@46
|
673 //}
|
rlm@46
|
674
|
rlm@46
|
675 }
|
rlm@46
|
676 // Update selection tracker
|
rlm@46
|
677 //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
678
|
rlm@46
|
679 //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
680
|
rlm@46
|
681 // hide_tracker();
|
rlm@46
|
682 };
|
rlm@46
|
683
|
rlm@46
|
684
|
rlm@46
|
685 RichDrawEditor.prototype.onResize = function(event) {
|
rlm@46
|
686 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
687 var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
688 var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
689 //snappedX*=proporDiagonal;
|
rlm@46
|
690 //snappedY*=proporDiagonal;
|
rlm@46
|
691 //snappedX+=marginx;
|
rlm@46
|
692 //snappedY+=marginy;
|
rlm@46
|
693 var deltaX = snappedX - this.mouseDownX;
|
rlm@46
|
694 var deltaY = snappedY - this.mouseDownY;
|
rlm@46
|
695
|
rlm@46
|
696 this.renderer.track(handle, deltaX, deltaY);
|
rlm@46
|
697
|
rlm@46
|
698 // Update selection tracker
|
rlm@46
|
699 show_tracker();
|
rlm@46
|
700 // hide_tracker();
|
rlm@46
|
701 };
|
rlm@46
|
702
|
rlm@46
|
703
|
rlm@46
|
704 RichDrawEditor.prototype.onDraw = function(event) {
|
rlm@46
|
705 if (this.selected == null)
|
rlm@46
|
706 {
|
rlm@46
|
707 if(this.squareSelect != null)
|
rlm@46
|
708 {
|
rlm@46
|
709 var offset = Ext.get(this.container).getXY()
|
rlm@46
|
710 var snappedX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
|
rlm@46
|
711 var snappedY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
|
rlm@46
|
712
|
rlm@46
|
713 //snappedX*=proporDiagonal;
|
rlm@46
|
714 //snappedY*=proporDiagonal;
|
rlm@46
|
715 //snappedX+=marginx;
|
rlm@46
|
716 //snappedY+=marginy;
|
rlm@46
|
717
|
rlm@46
|
718 this.renderer.resize(this.squareSelect, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
|
rlm@46
|
719
|
rlm@46
|
720 }else{
|
rlm@46
|
721 return;
|
rlm@46
|
722 }
|
rlm@46
|
723 }else{
|
rlm@46
|
724 var offset = Ext.get(this.container).getXY()
|
rlm@46
|
725 var snappedX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
|
rlm@46
|
726 var snappedY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
|
rlm@46
|
727
|
rlm@46
|
728 //snappedX*=proporDiagonal;
|
rlm@46
|
729 //snappedY*=proporDiagonal;
|
rlm@46
|
730 //snappedX+=marginx;
|
rlm@46
|
731 //snappedY+=marginy;
|
rlm@46
|
732
|
rlm@46
|
733 this.renderer.resize(this.selected, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
|
rlm@46
|
734 }
|
rlm@46
|
735 };
|
rlm@46
|
736
|
rlm@46
|
737 RichDrawEditor.prototype.onRotate = function(event) {
|
rlm@46
|
738 if (this.selected == null)
|
rlm@46
|
739 {
|
rlm@46
|
740
|
rlm@46
|
741 }else{
|
rlm@46
|
742 // this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
743 //document.getElementById('richdraw').style.cursor='e-resize';
|
rlm@46
|
744
|
rlm@46
|
745 //alert('chao');
|
rlm@46
|
746 //inout=false;
|
rlm@46
|
747
|
rlm@46
|
748 //return;
|
rlm@46
|
749 }
|
rlm@46
|
750 };
|
rlm@46
|
751
|
rlm@46
|
752 RichDrawEditor.prototype.onScale = function(event) {
|
rlm@46
|
753 if (this.selected == null)
|
rlm@46
|
754 {
|
rlm@46
|
755
|
rlm@46
|
756 }else{
|
rlm@46
|
757 //document.getElementById('richdraw').style.cursor='e-resize';
|
rlm@46
|
758 //alert('chao');
|
rlm@46
|
759 //inout=false;
|
rlm@46
|
760
|
rlm@46
|
761 //return;
|
rlm@46
|
762 }
|
rlm@46
|
763 };
|
rlm@46
|
764
|
rlm@46
|
765 RichDrawEditor.prototype.onTransform = function(event) {
|
rlm@46
|
766 if (this.selected == null)
|
rlm@46
|
767 {
|
rlm@46
|
768
|
rlm@46
|
769 }else{
|
rlm@46
|
770 //if(typeTransform=="rotate") {this.renderer.rotate(this.selected, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY);}
|
rlm@46
|
771 //if(typeTransform=="scale") {this.renderer.scale(this.selected, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY); }
|
rlm@46
|
772
|
rlm@46
|
773 }
|
rlm@46
|
774 };
|
rlm@46
|
775
|
rlm@46
|
776 RichDrawEditor.prototype.onTranslate = function(event) {
|
rlm@46
|
777 if (this.selected == null)
|
rlm@46
|
778 {
|
rlm@46
|
779
|
rlm@46
|
780 }else{
|
rlm@46
|
781 // document.getElementById('richdraw').style.cursor='move';
|
rlm@46
|
782 //alert('hello');
|
rlm@46
|
783 //inout=true;
|
rlm@46
|
784
|
rlm@46
|
785 //return;
|
rlm@46
|
786 }
|
rlm@46
|
787 var offset = Ext.get(this.container).getXY()
|
rlm@46
|
788 // var offset = Ext.get(this.container).getXY();
|
rlm@46
|
789 var x = zoomx+Math.round(event.getXY()[0] - offset[0]);
|
rlm@46
|
790 var y = zoomy+Math.round(event.getXY()[1] - offset[1]);
|
rlm@46
|
791
|
rlm@46
|
792 //var x= parseFloat(event.getXY()[0]);
|
rlm@46
|
793 //var y= parseFloat(event.getXY()[1]);
|
rlm@46
|
794
|
rlm@46
|
795
|
rlm@46
|
796 this.inputxy = [x,y]
|
rlm@46
|
797 this.onInputXY(x,y);
|
rlm@46
|
798
|
rlm@46
|
799 //Ext.get(this.container).getXY(); ;//
|
rlm@46
|
800 };
|
rlm@46
|
801
|
rlm@46
|
802
|
rlm@46
|
803 RichDrawEditor.prototype.onHit = function(event) {
|
rlm@46
|
804 //console.log("AAH HIT!!!!")
|
rlm@46
|
805 if(this.mode == 'select')
|
rlm@46
|
806 {
|
rlm@46
|
807
|
rlm@46
|
808 //event.cancelBubble =false;
|
rlm@46
|
809 // We've handled this event. Don't let anybody else see it.
|
rlm@46
|
810 if (event.stopPropagation) event.stopPropagation(); // DOM Level 2
|
rlm@46
|
811 else event.cancelBubble = true; // IE
|
rlm@46
|
812 // Now prevent any default action.
|
rlm@46
|
813 if (event.preventDefault) event.preventDefault(); // DOM Level 2
|
rlm@46
|
814 else event.returnValue = false; // IE
|
rlm@46
|
815
|
rlm@46
|
816 if(inout=='multiSelect')
|
rlm@46
|
817 {
|
rlm@46
|
818 //Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
819 //Ext.get(this.container).on( "mouseup", this.onMouseUp,this);
|
rlm@46
|
820
|
rlm@46
|
821 }
|
rlm@46
|
822 else
|
rlm@46
|
823 {
|
rlm@46
|
824
|
rlm@46
|
825 Ext.get(this.container).un("mousemove", this.onDrag);
|
rlm@46
|
826 //this.unselect();
|
rlm@46
|
827 typeTransform="Translate";
|
rlm@46
|
828
|
rlm@46
|
829 /* //this.previusBox=this.selected;
|
rlm@46
|
830 this.select(Event.element(event));
|
rlm@46
|
831 this.selectedBounds = this.renderer.bounds(this.selected);
|
rlm@46
|
832 //document.forms[0].code.value=shape(c,this.selected);
|
rlm@46
|
833 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
834 this.mouseDownX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;
|
rlm@46
|
835 this.mouseDownY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;
|
rlm@46
|
836 this.renderer.info(this.selected);
|
rlm@46
|
837 Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
838 //Ext.get(this.container).on( "mouseover", noselect);
|
rlm@46
|
839 Ext.get(this.container).on( "mouseout", this.onMouseUp,this);
|
rlm@46
|
840 //Ext.get(this.container).on( "mouseup", this.onMouseUp,this);
|
rlm@46
|
841 //typeTransform=="Translate";
|
rlm@46
|
842 //if(typeTransform=="Rotate") {this.renderer.rotate(this.selected, this.previusBox,2, 2);}
|
rlm@46
|
843 */
|
rlm@46
|
844 //var width = parseFloat(widths.options[widths.selectedIndex].value);
|
rlm@46
|
845
|
rlm@46
|
846 contmove=0;
|
rlm@46
|
847 //this.setGrid(this.lineWidth, width);
|
rlm@46
|
848 var width=this.gridWidth;
|
rlm@46
|
849
|
rlm@46
|
850 this.setGrid(width, width);
|
rlm@46
|
851
|
rlm@46
|
852 this.select(event.getTarget());
|
rlm@46
|
853 this.previusBox=this.selected;
|
rlm@46
|
854
|
rlm@46
|
855 //++
|
rlm@46
|
856 this.renderer.getProperties(this.selected);
|
rlm@46
|
857 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
858
|
rlm@46
|
859 this.selectedBounds = this.renderer.bounds(this.selected);
|
rlm@46
|
860 //document.forms[0].code.value=shape(c,this.selected);
|
rlm@46
|
861 //var snappedX = Math.round((event.getXY()[0] - offset[0]));
|
rlm@46
|
862 //var snappedY = Math.round((event.getXY()[1] - offset[1]));
|
rlm@46
|
863
|
rlm@46
|
864 //offset[0]-=marginx;
|
rlm@46
|
865 //offset[1]-=marginy;
|
rlm@46
|
866 var x =offset[0];//parseInt(this.selected.offsetLeft);//this.selectedBounds.x-event.getXY()[0];//this.inputxy[0]+ offset[0];//Math.round(event.getXY()[0] - offset[0]);
|
rlm@46
|
867 var y =offset[1];//$(this.selected.id).offsetTop;;//parseInt(this.selected.offsetTop);//this.selectedBounds.y-event.getXY()[1];//this.inputxy[1]+ offset[1];//+Math.round(event.getXY()[1] - offset[1]);
|
rlm@46
|
868 //alert(x+' '+y)
|
rlm@46
|
869 this.mouseDownX =x;// offset[0];//zoomx+snappedX;
|
rlm@46
|
870 this.mouseDownY =y;// offset[1];//zoomy+snappedY;
|
rlm@46
|
871 //objectOffset(this.selected)
|
rlm@46
|
872 // this.mouseDownX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
|
rlm@46
|
873 //this.mouseDownY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
|
rlm@46
|
874 this.log(this.gridX);
|
rlm@46
|
875 this.renderer.info(this.selected);
|
rlm@46
|
876 if(this.container.ownerDocument.getElementById('tracker'))
|
rlm@46
|
877 {
|
rlm@46
|
878 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
|
rlm@46
|
879 }
|
rlm@46
|
880 Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
881
|
rlm@46
|
882
|
rlm@46
|
883 }
|
rlm@46
|
884 }
|
rlm@46
|
885 else
|
rlm@46
|
886 {
|
rlm@46
|
887 //this.selectedBounds = this.renderer.bounds(this.selected);
|
rlm@46
|
888 var offset = Ext.get(this.container).getXY();
|
rlm@46
|
889
|
rlm@46
|
890 this.mouseDownX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
|
rlm@46
|
891 this.mouseDownY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
|
rlm@46
|
892 Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
893
|
rlm@46
|
894 }
|
rlm@46
|
895 };
|
rlm@46
|
896
|
rlm@46
|
897
|
rlm@46
|
898 RichDrawEditor.prototype.onClic = function(event) {
|
rlm@46
|
899 if(this.mode == 'controlpath')
|
rlm@46
|
900 {
|
rlm@46
|
901
|
rlm@46
|
902 //Ext.get(this.container).on( "mouseout", this.onMouseUp,this);
|
rlm@46
|
903
|
rlm@46
|
904 //Ext.get(this.container).on( "mousemove", this.onDrag,this);
|
rlm@46
|
905
|
rlm@46
|
906 //Ext.get(this.container).on( "mouseout", this.onDrag,this);
|
rlm@46
|
907 }
|
rlm@46
|
908 else
|
rlm@46
|
909 {
|
rlm@46
|
910
|
rlm@46
|
911 }
|
rlm@46
|
912 };
|
rlm@46
|
913
|
rlm@46
|
914 RichDrawEditor.prototype.reflect = function(HorV) {
|
rlm@46
|
915 this.selected=this.renderer.reflect(HorV);
|
rlm@46
|
916 this.selected.id = 'shape:' + createUUID();
|
rlm@46
|
917 Ext.get(this.selected).on( "mousedown", this.onHit,this);
|
rlm@46
|
918 }
|
rlm@46
|
919
|
rlm@46
|
920 RichDrawEditor.prototype.onEndLine = function(event) {
|
rlm@46
|
921
|
rlm@46
|
922 if(this.mode == 'controlpath')
|
rlm@46
|
923 { // alert('hello');
|
rlm@46
|
924 numClics=0;
|
rlm@46
|
925 //this.selected = null;
|
rlm@46
|
926
|
rlm@46
|
927 //Event.stopObserving(this.container, "mousemove", this.onDraw,this);
|
rlm@46
|
928
|
rlm@46
|
929
|
rlm@46
|
930
|
rlm@46
|
931 //Event.observe(this.selected, "mousedown", this.onHit,this);
|
rlm@46
|
932 //Ext.get(this.container).on( "mousemove", this.onDraw,this);
|
rlm@46
|
933
|
rlm@46
|
934 //Event.stopObserving(this.selected, "dblclick", this.onEndLine,this);
|
rlm@46
|
935 //Event.stopObserving(this.container, "mousemove", this.onDraw,this);
|
rlm@46
|
936
|
rlm@46
|
937 this.selected = null;
|
rlm@46
|
938
|
rlm@46
|
939
|
rlm@46
|
940 //this.unselect();
|
rlm@46
|
941
|
rlm@46
|
942 }
|
rlm@46
|
943 else
|
rlm@46
|
944 {
|
rlm@46
|
945 this.nowDraw=false;
|
rlm@46
|
946 }
|
rlm@46
|
947 };
|
rlm@46
|
948 function noselect(){
|
rlm@46
|
949 //typeTransform="";
|
rlm@46
|
950 }
|
rlm@46
|
951
|
rlm@46
|
952 function createUUID()
|
rlm@46
|
953 {
|
rlm@46
|
954 return [4, 2, 2, 2, 6].map(function(length) {
|
rlm@46
|
955 var uuidpart = "";
|
rlm@46
|
956 for (var i=0; i<length; i++) {
|
rlm@46
|
957 var uuidchar = parseInt((Math.random() * 256)).toString(16);
|
rlm@46
|
958 if (uuidchar.length == 1)
|
rlm@46
|
959 uuidchar = "0" + uuidchar;
|
rlm@46
|
960 uuidpart += uuidchar;
|
rlm@46
|
961 }
|
rlm@46
|
962 return uuidpart;
|
rlm@46
|
963 }).join('-');
|
rlm@46
|
964 }
|
rlm@46
|
965
|
rlm@46
|
966
|
rlm@46
|
967 //----------------------------------------------------------------------------
|
rlm@46
|
968 // AbstractRenderer
|
rlm@46
|
969 //
|
rlm@46
|
970 // Abstract base class defining the drawing API. Can not be used directly.
|
rlm@46
|
971 //----------------------------------------------------------------------------
|
rlm@46
|
972
|
rlm@46
|
973 function AbstractRenderer() {
|
rlm@46
|
974
|
rlm@46
|
975 };
|
rlm@46
|
976
|
rlm@46
|
977 AbstractRenderer.prototype.init = function(elem) {};
|
rlm@46
|
978 AbstractRenderer.prototype.bounds = function(shape) { return { x:0, y:0, width:0, height: 0 }; };
|
rlm@46
|
979 AbstractRenderer.prototype.create = function(shape, fillColor, lineColor, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, transform) {};
|
rlm@46
|
980 AbstractRenderer.prototype.datacreate = function(fillColor, lineColor, lineWidth, fillOpac, strokeOpac, left, top, width, height,data) {};
|
rlm@46
|
981 AbstractRenderer.prototype.index = function(shape, order) {};
|
rlm@46
|
982 AbstractRenderer.prototype.remove = function(shape) {};
|
rlm@46
|
983 AbstractRenderer.prototype.copy = function(shape) {};
|
rlm@46
|
984 AbstractRenderer.prototype.paste = function(left,top) {};
|
rlm@46
|
985 AbstractRenderer.prototype.duplicate = function(shape) {};
|
rlm@46
|
986 AbstractRenderer.prototype.move = function(shape, left, top) {};
|
rlm@46
|
987 AbstractRenderer.prototype.endmove = function(shape) {};
|
rlm@46
|
988 AbstractRenderer.prototype.transform= function(shape, left, top) {};
|
rlm@46
|
989 AbstractRenderer.prototype.scale = function(shape, left, top) {};
|
rlm@46
|
990 AbstractRenderer.prototype.rotate = function(shape, left, top) {};
|
rlm@46
|
991 AbstractRenderer.prototype.track = function(shape) {};
|
rlm@46
|
992 AbstractRenderer.prototype.restruct = function(shape) {};
|
rlm@46
|
993 AbstractRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {};
|
rlm@46
|
994 AbstractRenderer.prototype.editCommand = function(shape, cmd, value) {};
|
rlm@46
|
995 AbstractRenderer.prototype.queryCommand = function(shape, cmd) {};
|
rlm@46
|
996 AbstractRenderer.prototype.showTracker = function(shape,value) {};
|
rlm@46
|
997 AbstractRenderer.prototype.getMarkup = function() { return null; };
|
rlm@46
|
998 AbstractRenderer.prototype.info = function(shape){};
|
rlm@46
|
999 AbstractRenderer.prototype.editShape = function(shape,data){};
|
rlm@46
|
1000 AbstractRenderer.prototype.onKeyPress = function(){};
|
rlm@46
|
1001
|
rlm@46
|
1002 AbstractRenderer.prototype.getshapes = function(){};
|
rlm@46
|
1003
|
rlm@46
|
1004
|
rlm@46
|
1005 //-----------------------------
|
rlm@46
|
1006 // Geometry - string functions
|
rlm@46
|
1007 //-----------------------------
|
rlm@46
|
1008
|
rlm@46
|
1009 //two point angle deg
|
rlm@46
|
1010 function ang2v(x1,y1,x2,y2)
|
rlm@46
|
1011 {
|
rlm@46
|
1012 /*
|
rlm@46
|
1013 var k=0;
|
rlm@46
|
1014
|
rlm@46
|
1015 var sum1=u1+v1;
|
rlm@46
|
1016 var sum2=u2+v2;
|
rlm@46
|
1017
|
rlm@46
|
1018 var res1=u1-v1;
|
rlm@46
|
1019 var res2=u2-v2;
|
rlm@46
|
1020
|
rlm@46
|
1021 var ku1=k*u1;
|
rlm@46
|
1022 var ku2=k*u2;
|
rlm@46
|
1023
|
rlm@46
|
1024 var mu= Math.sqrt(u1*u1+u2*u2);
|
rlm@46
|
1025 var mv= Math.sqrt(v1*v1+v2*v2);
|
rlm@46
|
1026
|
rlm@46
|
1027 var pesc= u1*v1+u2*v2;
|
rlm@46
|
1028 //var ang=Math.acos(pesc/(mu*mv))*180/Math.PI;
|
rlm@46
|
1029 var ang=Math.acos(pesc/(mu*mv));
|
rlm@46
|
1030 */
|
rlm@46
|
1031 var resx=x2-x1;
|
rlm@46
|
1032 var resy=y2-y1;
|
rlm@46
|
1033 var ang=Math.atan2(resy,resx);
|
rlm@46
|
1034 //alert(ang);
|
rlm@46
|
1035 return ang;
|
rlm@46
|
1036 }
|
rlm@46
|
1037
|
rlm@46
|
1038 function dist2p(a,b,c,d)
|
rlm@46
|
1039 {
|
rlm@46
|
1040 with (Math)
|
rlm@46
|
1041 {
|
rlm@46
|
1042 //var d2p=sqrt(abs(((d-b)*(d-b) )+((c-a)*(c-a)))); //decimas(d2p,3); return d2p;
|
rlm@46
|
1043 return sqrt(abs((d-b)*(d-b)+ (c-a)*(c-a)));
|
rlm@46
|
1044
|
rlm@46
|
1045 }
|
rlm@46
|
1046 }
|
rlm@46
|
1047 function pmd2pb(a,b,c,d,q) {
|
rlm@46
|
1048 pmdx= (1-q)*a+c*q;
|
rlm@46
|
1049 pmdy= (1-q)*b+d*q;
|
rlm@46
|
1050 //pmdx=decimas(pmdx,3);
|
rlm@46
|
1051 //pmdy=decimas(pmdy,3);
|
rlm@46
|
1052 var cad=pmdx+','+pmdy;
|
rlm@46
|
1053 var sol= new Array();
|
rlm@46
|
1054 sol= [cad,pmdx,pmdy];
|
rlm@46
|
1055 return sol
|
rlm@46
|
1056
|
rlm@46
|
1057 }
|
rlm@46
|
1058
|
rlm@46
|
1059 function getAngle(dx,dy) {
|
rlm@46
|
1060 var angle = Math.atan2(dy, dx);
|
rlm@46
|
1061 //angle *= 180 / Math.PI;
|
rlm@46
|
1062 return angle;
|
rlm@46
|
1063
|
rlm@46
|
1064 }
|
rlm@46
|
1065
|
rlm@46
|
1066 /*
|
rlm@46
|
1067
|
rlm@46
|
1068 A = y2-y1
|
rlm@46
|
1069 B = x1-x2
|
rlm@46
|
1070 C = A*x1+B*y1
|
rlm@46
|
1071 Regardless of how the lines are specified, you should be able to generate two different points along the line, and then generate A, B and C. Now, lets say that you have lines, given by the equations:
|
rlm@46
|
1072 A1x + B1y = C1
|
rlm@46
|
1073 A2x + B2y = C2
|
rlm@46
|
1074 To find the point at which the two lines intersect, we simply need to solve the two equations for the two unknowns, x and y.
|
rlm@46
|
1075
|
rlm@46
|
1076 double det = A1*B2 - A2*B1
|
rlm@46
|
1077 if(det == 0){
|
rlm@46
|
1078 //Lines are parallel
|
rlm@46
|
1079 }else{
|
rlm@46
|
1080 double x = (B2*C1 - B1*C2)/det
|
rlm@46
|
1081 double y = (A1*C2 - A2*C1)/det
|
rlm@46
|
1082 }
|
rlm@46
|
1083
|
rlm@46
|
1084
|
rlm@46
|
1085
|
rlm@46
|
1086
|
rlm@46
|
1087 */
|
rlm@46
|
1088 // interseccion 2 rectas
|
rlm@46
|
1089 function ntrsccn2rb(a,b,c,d,e,f,g,h){
|
rlm@46
|
1090 var solution= new Array();
|
rlm@46
|
1091 var i2rx=0;var i2ry=0;
|
rlm@46
|
1092 var w= (c-a)*(f-h)-(e-g)*(d-b);
|
rlm@46
|
1093 if(w==0){
|
rlm@46
|
1094 n=1;
|
rlm@46
|
1095 i2rx= (1-n)*a+n*c;
|
rlm@46
|
1096 i2ry= (1-n)*b+n*d;
|
rlm@46
|
1097 solution= ['',i2rx,i2ry];
|
rlm@46
|
1098 //Lines are parallel
|
rlm@46
|
1099 return solution
|
rlm@46
|
1100 //return (i2rx+' '+i2ry);
|
rlm@46
|
1101 }
|
rlm@46
|
1102 var n = (((e-a)*(f-h))-((e-g)*(f-b)))/w;
|
rlm@46
|
1103 i2rx=(1-n)*a+n*c;
|
rlm@46
|
1104 i2ry=(1-n)*b+n*d;
|
rlm@46
|
1105 //return (i2rx+' '+i2ry);
|
rlm@46
|
1106 solution= ['',i2rx,i2ry];
|
rlm@46
|
1107 return solution
|
rlm@46
|
1108
|
rlm@46
|
1109 }
|
rlm@46
|
1110
|
rlm@46
|
1111 //ecuacion implicita de la recta
|
rlm@46
|
1112 function ccnmplct(a,b,c,d) {
|
rlm@46
|
1113 var solution= new Array();
|
rlm@46
|
1114 //a1 a2, b1 b2 vector direccion b1-a1 , b2-a2
|
rlm@46
|
1115 var v1m=c-a;
|
rlm@46
|
1116 var v1n=d-b;
|
rlm@46
|
1117 var c1x= v1m;
|
rlm@46
|
1118 var c1y= v1n;
|
rlm@46
|
1119 // ecuacion continua (x - a) /c -a = (y - b)/d - b
|
rlm@46
|
1120 //(x - a) * v1n = (y - b) * v1m
|
rlm@46
|
1121 //x * v1n - v1n*a = y * v1m - b* v1m
|
rlm@46
|
1122 eia= v1n ;
|
rlm@46
|
1123 eib= - v1m;
|
rlm@46
|
1124 eic= (b* v1m) - ( v1n*a)
|
rlm@46
|
1125 solution= [eia,eib,eic];
|
rlm@46
|
1126 return solution
|
rlm@46
|
1127 }
|
rlm@46
|
1128 function GetString(source, start, end){
|
rlm@46
|
1129 var st = source.indexOf(start) + start.length;
|
rlm@46
|
1130 var en = source.indexOf(end, start);
|
rlm@46
|
1131 return source.substring(st, en);//trimAll(source.substring(st, en));
|
rlm@46
|
1132 }
|
rlm@46
|
1133
|
rlm@46
|
1134 function deg2rad(angle){
|
rlm@46
|
1135 return (angle/180) * Math.PI;
|
rlm@46
|
1136 }
|
rlm@46
|
1137
|
rlm@46
|
1138 String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,'') }
|
rlm@46
|
1139
|
rlm@46
|
1140 function objectOffset(obj)
|
rlm@46
|
1141 {
|
rlm@46
|
1142 var posX=0;
|
rlm@46
|
1143 var posY=0;
|
rlm@46
|
1144 if(typeof(obj.offsetParent) != "undefined")
|
rlm@46
|
1145 {
|
rlm@46
|
1146 for(var x=0, y=0;obj; obj=obj.offsetParent)
|
rlm@46
|
1147 {
|
rlm@46
|
1148 x += obj.offsetLeft;
|
rlm@46
|
1149 y += obj.offsetTop;
|
rlm@46
|
1150 }
|
rlm@46
|
1151 posX=x;
|
rlm@46
|
1152 posY=y;
|
rlm@46
|
1153 }
|
rlm@46
|
1154 else
|
rlm@46
|
1155 {
|
rlm@46
|
1156 posX=obj.offsetLeft;
|
rlm@46
|
1157 posY=obj.offsetTop;
|
rlm@46
|
1158 }
|
rlm@46
|
1159 alert(obj.id+" "+"X: "+posX+" Y: "+posY);
|
rlm@46
|
1160 }
|
rlm@46
|
1161
|
rlm@46
|
1162 function generateJSON(cssEnv)
|
rlm@46
|
1163 {
|
rlm@46
|
1164 //string=string.replace(/;/g,'",') ;
|
rlm@46
|
1165 //string=string.replace(/:/g,':"') ;
|
rlm@46
|
1166 //style="fill:#7e0000;fill-opacity:1"
|
rlm@46
|
1167
|
rlm@46
|
1168 var css=cssEnv.split(';')
|
rlm@46
|
1169
|
rlm@46
|
1170 var strJSON = '{';
|
rlm@46
|
1171 ch = ',';
|
rlm@46
|
1172 for (i = 0 ; i < css.length; i++)
|
rlm@46
|
1173 {
|
rlm@46
|
1174 var data=css[i].split(':');
|
rlm@46
|
1175 if(data[0]!=''){
|
rlm@46
|
1176 //if(i == (css.length-2)){ ch = ''; }
|
rlm@46
|
1177 strJSON += "'"+data[0].trim()+"':'"+data[1].trim()+"'"+",";
|
rlm@46
|
1178 }
|
rlm@46
|
1179
|
rlm@46
|
1180
|
rlm@46
|
1181 }
|
rlm@46
|
1182 var num= strJSON.length;
|
rlm@46
|
1183 strJSON=strJSON.substr(0, num-1);
|
rlm@46
|
1184
|
rlm@46
|
1185 strJSON += '}';
|
rlm@46
|
1186
|
rlm@46
|
1187 return strJSON;
|
rlm@46
|
1188 } |