Mercurial > laserkard

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

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