Mercurial > laserkard

comparison onlypaths/js/onlypaths.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
107 this.initialUnit=1;
108 this.unit=this.initialUnit;
109
110
111 this.inputxy = [];
112 this.viewInputxy = [];
113 this.onViewInputXY = function(){};
114 this.onInputXY = function(){};
115
116
117 //Ext.get(this.container).on('keypress', function(e){alert(e.keyCode);});
118
119 Ext.get(this.container).on( "mousedown", this.onMouseDown,this);
120 Ext.get(this.container).on( "mouseup", this.onMouseUp,this);
121 Ext.get(this.container).on( "mousemove", this.onMouseMove,this);
122 //Ext.get(this.container).on( "dblclick", this.onEndLine,this);
123 Ext.get(this.container).on( "selectstart", this.onSelectStart,this);
124
125
126
127 }
128
129 RichDrawEditor.prototype.log = function(logtext){
130 if(document.forms[0].code){
131 document.forms[0].code.value = logtext
132 }
133 }
134
135
136 RichDrawEditor.prototype.getshapes = function(){
137 return this.renderer.getshapes();
138 }
139
140 RichDrawEditor.prototype.info = function(shape){
141 return this.renderer.info(shape)
142 }
143
144
145 RichDrawEditor.prototype.clearWorkspace = function() {
146 this.container.innerHTML = '';
147 };
148
149 RichDrawEditor.prototype.deleteSelection = function() {
150 if (this.selected) {
151 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
152 this.renderer.remove(this.selected);
153 this.selected = null;
154 }
155 };
156
157 RichDrawEditor.prototype.toFront = function(order) {
158 if (this.selected) {
159 this.renderer.index(this.selected, order);
160 }
161 };
162
163 RichDrawEditor.prototype.deleteAll = function() {
164 this.renderer.removeAll();
165 };
166
167
168 RichDrawEditor.prototype.select = function(elem) {
169 if (elem == this.selected){ return; }
170 this.selected = elem;
171 this.renderer.showTracker(this.selected,this.pathsEdit);
172 this.onselect(this);
173 };
174
175
176 RichDrawEditor.prototype.unselect = function() {
177 if (this.selected) {
178 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
179 this.selected = null;
180 this.onunselect(this);
181 }
182 };
183
184 RichDrawEditor.prototype.getSelectedElement = function() {
185 return this.selected;
186 };
187
188 RichDrawEditor.prototype.toCurve = function() {
189 this.renderer.tocurve();
190 }
191
192 RichDrawEditor.prototype.submitShape = function(data) {
193 if (this.mode != 'select') {
194 setMode('path', 'Path');
195 this.actualStyle();
196 onColorChange();
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 this.selected.id = 'shape:' + createUUID();
199 Ext.get(this.selected).on("mousedown", this.onHit,this);
200 setMode('select', 'Select');
201 } else {
202 this.renderer.transformShape(this.selected,data,null);
203 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
204 this.renderer.showTracker(this.selected,this.pathsEdit);
205 }
206 };
207
208 RichDrawEditor.prototype.setGrid = function(horizontal, vertical) {
209 this.gridX = horizontal;
210 this.gridY = vertical;
211 this.gridWidth = (vertical+horizontal)/2; //average. ideally, it should be the same
212 };
213
214
215
216 RichDrawEditor.prototype.actualStyle = function()
217 {
218 this.textMessaje=$('option_text_message').value;
219 this.textSize=parseFloat($('option_text_size').value);
220 this.textFamily=$('option_text_family').value;
221 this.pathClose = $('option_path_close').checked;
222 this.imageHref = $('option_image_href').value;
223
224 return;
225 };
226
227
228 RichDrawEditor.prototype.editCommand = function(cmd, value)
229 {
230 if (cmd == 'mode')
231 {
232 this.mode = value;
233 }
234 else if (this.selected == null)
235 {
236 if (cmd == 'fillcolor')
237 {
238 this.fillColor = value;
239 }
240 else if (cmd == 'linecolor')
241 {
242 this.lineColor = value;
243 }
244 else if (cmd == 'linewidth')
245 {
246 this.lineWidth = parseInt(value) + 'px';
247 }
248 else if (cmd == 'fillopacity') {
249 this.fillOpac = parseInt(value);
250 }
251 else if (cmd == 'lineopacity') {
252 this.lineOpac = parseInt(value);
253 }
254 }
255 else
256 {
257 this.renderer.editCommand(this.selected, cmd, value);
258 }
259 }
260
261
262 RichDrawEditor.prototype.queryCommand = function(cmd)
263 {
264 if (cmd == 'mode')
265 {
266 return this.mode;
267 }
268 else if (this.selected == null)
269 {
270 if (cmd == 'fillcolor')
271 {
272 return this.fillColor;
273 }
274 else if (cmd == 'linecolor')
275 {
276 return this.lineColor;
277 }
278 else if (cmd == 'linewidth')
279 {
280 return this.lineWidth;
281 }
282 else if (cmd == 'fillopacity')
283 {
284 return this.fillOpac;
285 }
286 else if (cmd == 'lineopacity')
287 {
288 return this.fillOpac;
289 }
290 }
291 else
292 {
293 return this.renderer.queryCommand(this.selected, cmd);
294 }
295 }
296
297
298
299
300 RichDrawEditor.prototype.onSelectStart = function(event) {
301 return false
302 }
303
304 RichDrawEditor.prototype.onMouseDown = function(event) {
305
306 clockdata();
307
308 //MODE NO SELECT
309 if (this.mode != 'select')
310 {
311 var modeUsed=0;
312 if (this.mode == 'zoom')
313 {
314 var width=this.gridWidth;
315 contmove=0;
316 this.setGrid(width, width);
317 this.unselect();
318 xpArray=new Array();
319 ypArray=new Array();
320 this.mouseDownX = this.viewInputxy[0];
321 this.mouseDownY = this.viewInputxy[1];
322 xpArray.push(this.mouseDownX);
323 ypArray.push(this.mouseDownY);
324 if(zoommode=='window'){
325 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', '', '');
326 this.squareSelect.id = 'squareSelectID';
327 Ext.get(this.squareSelect).on( "mousedown", this.onHit,this);
328 Ext.get(this.squareSelect).on( "mousemove", this.onDraw,this);
329
330 }else{
331 this.renderer.zoom(this.mouseDownX, this.mouseDownY);
332 }
333 modeUsed=1;
334 } //end zoom
335 if (this.mode == 'controlpath')
336 {
337 this.actualStyle();
338 onColorChange();
339 if(numClics<=0)
340 {
341 this.nowDraw=true;
342 setPoints=new Array();
343 var width=this.gridWidth;
344 contmove=0;
345 this.setGrid(width, width);
346 this.unselect();
347 xpArray=new Array();
348 ypArray=new Array();
349 this.mouseDownX = this.viewInputxy[0];
350 this.mouseDownY = this.viewInputxy[1];
351 xpArray.push(this.mouseDownX);
352 ypArray.push(this.mouseDownY);
353 setPoints.push(this.mouseDownX+','+this.mouseDownY);
354 onColorChange();
355 this.actualStyle();
356 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', '', '');
357
358 this.selected.id = 'shape:' + createUUID();
359 Ext.get(this.selected).on( "mousedown", this.onHit,this);
360 this.log(this.selected.id);
361
362 Ext.get(this.selected).on( "dblclick", this.onEndLine,this);
363 Ext.get(this.container).on( "mousemove", this.onDraw,this);
364 numClics++;
365 }
366 else
367 {
368 var coord=this.viewInputxy;
369 var X=parseFloat(coord[0]);
370 var Y=parseFloat(coord[1]);
371 setPoints.push(X+','+Y);
372 this.renderer.clic(this.selected);
373 numClics++;
374 }
375 modeUsed=1;
376 } //end mode controlpath
377 if (modeUsed == 0)
378 {
379 var width=this.gridWidth;
380 contmove=0;
381 this.setGrid(width, width);
382 this.unselect();
383 xpArray=new Array();
384 ypArray=new Array();
385 this.mouseDownX = this.viewInputxy[0];
386 this.mouseDownY= this.viewInputxy[1];
387
388 xpArray.push(this.mouseDownX);
389 ypArray.push(this.mouseDownY);
390
391 this.unselect();
392 onColorChange();
393 this.actualStyle();
394 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', '', '');
395 this.selected.id = 'shape:' + createUUID();
396 Ext.get(this.selected).on( "mousedown", this.onHit,this);
397 Ext.get(this.container).on( "mousemove", this.onDraw,this);
398 }
399 }
400 else //----- MODE SELECT
401 {
402 if(this.container.ownerDocument.getElementById('tracker')) this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
403
404
405 var snappedX=this.viewInputxy[0];
406 var snappedY=this.viewInputxy[1]
407
408 if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)
409 {
410 if(this.selected!=null && typeTransform=='Translate' )
411 {
412
413 Ext.get(this.container).un("mousemove", this.onDrag);
414 this.unselect();
415 }
416 }
417
418 if(typeTransform=='Translate')
419 {
420 inout='move';//true;
421 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
422
423 }
424 if(typeTransform=='Scale' || typeTransform=='Rotate')
425 {
426 inout='rotate_escale';//false
427 Ext.get(this.container).on( "mousemove", this.onDrag,this);
428 //Ext.get(this.selected).on( "mousedown", this.onHit,this);
429 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
430 }
431 } //end mode select
432 return false;
433 };
434
435
436 RichDrawEditor.prototype.onMouseUp = function(event)
437 {
438 //MODE NO SELECT
439 if (this.mode != 'select')
440 {
441 if(this.mode == 'controlpath')
442 {
443
444 }
445 else
446 {
447 //ZOOM
448 if (this.mode == 'zoom')
449 {
450 var snappedX=this.viewInputxy[0];
451 var snappedY=this.viewInputxy[1];
452 this.renderer.zoom(snappedX, snappedY);
453 this.renderer.remove(this.container.ownerDocument.getElementById('squareSelectID'));
454 Ext.get(this.container).un("mousemove", this.onDraw);
455 this.squareSelect = null;
456 this.selected = null;
457 }else{
458 Ext.get(this.container).un("mousemove", this.onDraw);
459 this.selected = null;
460 }
461 }
462 }
463 else //MODE SELECT
464 {
465 Ext.get(this.container).un("mousemove", this.onDraw); //or drag
466 Ext.get(this.container).un("mousemove", this.onDrag);
467 moveNow=false;
468 contmove=0;
469 if(typeTransform=="Rotate" || typeTransform=="Scale" )
470 {
471 this.renderer.showTracker(this.selected,this.pathsEdit);
472 typeTransform=='';
473 }
474 if(typeTransform=="Translate" )
475 {
476 this.renderer.showTracker(this.selected,this.pathsEdit);
477 typeTransform='';
478 contmove=0;
479
480 }
481
482 if(inout=='multiSelect')
483 {
484
485 }
486
487 typeTransform='';
488 }
489 };
490
491
492 RichDrawEditor.prototype.onDrag = function(event) {
493
494 moveNow=true;
495 //var offset = Ext.get(this.selected).getXY()
496 //var deltaX = this.viewInputxy[0] - (this.viewInputxy[0] - this.mouseDownX);
497 //var deltaY = this.viewInputxy[1] - (this.viewInputxy[1] - this.mouseDownY);
498 //var deltaX = offset[0] ;
499 //var deltaY = offset[1] ;
500
501 var deltaX = this.viewInputxy[0] ;
502 var deltaY = this.viewInputxy[1] ;
503 var deltaX= this.selectedBounds['x']-this.mouseDownX + this.viewInputxy[0];
504 var deltaY= this.selectedBounds['y']-this.mouseDownY + this.viewInputxy[1];
505
506 //var deltX = this.viewInputxy[0]+(this.mouseDownX-this.viewInputxy[0]);
507 //var deltY = this.viewInputxy[1]+(this.mouseDownY-this.viewInputxy[1]);
508
509 var modeUsed=0;
510 if(this.mode == 'zoom')
511 {
512 Ext.get(this.container).getXY();
513 this.renderer.resize(this.squareSelect, this.clicX,this.clicY, this.viewInputxy[0], this.viewInputxy[1]);
514 modeUsed=1;
515 }
516 if(this.mode == 'controlpath')
517 {
518 modeUsed=1;
519 }
520
521 if(modeUsed==0)
522 {
523 if(inout=='multiSelect')
524 {
525 this.renderer.showMultiSelect(this.mouseDownX, this.mouseDownY);
526 }
527 if(typeTransform=="Translate")
528 {
529 Ext.get(this.container).getXY();
530 //this.log(this.mouseDownX+' '+event.getXY()[0]+' '+ this.selectedBounds.x +'contmove'+contmove);
531 //this.renderer.move(this.selected, this.viewInputxy[0],this.viewInputxy[1],this.clicX,this.clicY);
532 //this.renderer.move(this.selected, this.viewInputxy[0],this.viewInputxy[1], this.mouseDownX, this.mouseDownY);
533 this.renderer.move(this.selected, deltaX, deltaY, this.mouseDownX, this.mouseDownY);
534 }
535 if(typeTransform=="Rotate")
536 {
537 this.renderer.rotateShape(this.selected, this.previusBox,deltaX, deltaY);
538 }
539 if(typeTransform=="Scale")
540 {
541 this.renderer.scaleShape(this.selected, this.previusBox, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY);
542 }
543 }
544 };
545
546
547 RichDrawEditor.prototype.onResize = function(event) {
548 var deltaX = this.viewInputxy[0] - this.mouseDownX;
549 var deltaY = this.viewInputxy[1] - this.mouseDownY;
550 this.renderer.track(handle, deltaX, deltaY);
551 show_tracker();
552 };
553
554
555 RichDrawEditor.prototype.onDraw = function(event) {
556 if (this.selected == null)
557 {
558 if(this.squareSelect != null)
559 {
560 var offset = Ext.get(this.container).getXY()
561 var snappedX = this.viewInputxy[0];//Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
562 var snappedY = this.viewInputxy[1];//Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
563 this.renderer.resize(this.squareSelect, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
564 }
565 else
566 {
567 return;
568 }
569 }
570 else
571 {
572
573 var snappedX = this.viewInputxy[0];//Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
574 var snappedY = this.viewInputxy[1];// Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
575 this.renderer.resize(this.selected, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
576
577 }
578 };
579
580 RichDrawEditor.prototype.onRotate = function(event) {
581 if (this.selected == null)
582 {
583
584 }else{
585 }
586 };
587
588 RichDrawEditor.prototype.onScale = function(event) {
589 if (this.selected == null)
590 {
591
592 }else{
593 }
594 };
595
596 RichDrawEditor.prototype.onTransform = function(event) {
597 if (this.selected == null)
598 {
599
600 }else{
601 }
602 };
603
604 RichDrawEditor.prototype.onMouseMove = function(event) {
605 var offset = Ext.get(c.container).getXY()
606 var x = Math.round(event.getXY()[0] - offset[0]);
607 var y = Math.round(event.getXY()[1] - offset[1]);
608 if (ie || opera)
609 {
610 proporx =1;
611 propory =1;
612 zoominit2='1 1 1 1';
613 this.inputxy = [x,y];
614 this.viewInputxy = [x,y];
615 this.onInputXY(x,y);
616 this.onViewInputXY(x,y);
617 }
618 else
619 {
620 ////////////
621
622 var X = x ; // x cursor on canvas
623 var Y = y ; // y cursor on canvas
624
625 var Ex = parseFloat(tokensCanvas[2]) ; // (end) width canvas. Corner down-left
626 var Ey = parseFloat(tokensCanvas[3]) ; // (end) height canvas. Corner up-right
627
628 var zoomX = 0 ; // ? x unknown
629 var zoomY = 0 ; // ? y unknown
630
631 var sx = parseFloat(tokensZoom[0]) ; // (start) x origin of the coord zoom.
632 var sy = parseFloat(tokensZoom[1]) ; // (start) y origin of the coord zoom.
633 var Wz = parseFloat(tokensZoom[2]) ; // width zoom
634 var Hz = parseFloat(tokensZoom[3]) ; // height zoom
635
636 var ex = parseFloat(sx + Wz) ; // (end) x width zoom. Corner down-left
637 var ey = parseFloat(sy + Hz) ; // (end) y height zoom. Corner up-right
638
639 var r = X / Ex ; // 0 to 1
640 var s = Y / Ey ; // 0 to 1
641 this.unit = this.initialUnit * (Hz/Ey) ; // 0 to 1
642 zoomX= (1 - r) * sx + ex * r;
643 zoomY= (1 - s) * sy + ey * s;
644
645 this.inputxy = [x,y];
646 this.viewInputxy = [zoomX,zoomY];
647 this.onInputXY(x,y);
648 this.onViewInputXY(zoomX,zoomY);
649 }
650
651 };
652
653
654 RichDrawEditor.prototype.onHit = function(event) {
655 Ext.get(this.container).un("mousemove", this.onDrag);
656
657 if(this.mode == 'select')
658 {
659 if (event.stopPropagation) event.stopPropagation(); // DOM Level 2
660 else event.cancelBubble = true; // IE
661 // Now prevent any default action.
662 if (event.preventDefault) event.preventDefault(); // DOM Level 2
663 else event.returnValue = false; // IE
664
665 if(inout=='multiSelect')
666 {
667
668 }
669 else
670 {
671 //Ext.get(this.container).un("mousemove", this.onDrag);
672 typeTransform="Translate";
673 contmove=0;
674 var width=this.gridWidth;
675
676 this.setGrid(width, width);
677
678 this.select(event.getTarget());
679 this.previusBox=this.selected;
680
681 this.renderer.getProperties(this.selected);
682 //var offset = Ext.get(this.container).getXY();
683
684 this.selectedBounds = this.renderer.bounds(this.selected);
685
686 this.mouseDownX =this.viewInputxy[0];//x;// offset[0];//zoomx+snappedX;
687 this.mouseDownY =this.viewInputxy[1];//y;// offset[1];//zoomy+snappedY;
688 this.log(this.gridX);
689 this.renderer.info(this.selected);
690 if(this.container.ownerDocument.getElementById('tracker'))
691 {
692 this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
693 }
694 Ext.get(this.container).on( "mousemove", this.onDrag,this);
695 }
696 }
697 else
698 {
699 this.mouseDownX = this.viewInputxy[0];//Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
700 this.mouseDownY = this.viewInputxy[1];//Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
701 Ext.get(this.container).on( "mousemove", this.onDrag,this);
702
703 }
704 };
705
706
707 RichDrawEditor.prototype.onClic = function(event) {
708 if(this.mode == 'controlpath')
709 {
710
711 }
712 else
713 {
714
715 }
716 };
717
718 RichDrawEditor.prototype.reflect = function(HorV) {
719 this.selected=this.renderer.reflect(HorV);
720 this.selected.id = 'shape:' + createUUID();
721 Ext.get(this.selected).on( "mousedown", this.onHit,this);
722 }
723
724 RichDrawEditor.prototype.onEndLine = function(event) {
725
726 if(this.mode == 'controlpath')
727 {
728 //alert(numClics);
729 numClics=0;
730 Ext.get(this.container).un("mousemove", this.onDraw);
731 //Ext.get(this.selected).un( "mousedown", this.onHit,this);
732 //Ext.get(this.selected).un( "dblclick", this.onEndLine);
733 //Ext.get(this.container).un( "mousemove", this.onDraw,this);
734 //Ext.get(this.container).un( "mousemove", this.onDrag,this);
735 // Ext.get(this.selected).un( "mousedown", this.onHit);
736
737 // Ext.get(this.container).un("mousemove", this.onDraw,this);
738 //Ext.get(this.container).un("mousemove", this.onDrag,this);
739 this.selected = null;
740
741
742 }
743 else
744 {
745
746 this.nowDraw=false;
747 typeTransform='';
748 }
749 };
750
751 function noselect(){
752 }
753
754 function createUUID()
755 {
756 return [4, 2, 2, 2, 6].map(function(length) {
757 var uuidpart = "";
758 for (var i=0; i<length; i++) {
759 var uuidchar = parseInt((Math.random() * 256)).toString(16);
760 if (uuidchar.length == 1)
761 uuidchar = "0" + uuidchar;
762 uuidpart += uuidchar;
763 }
764 return uuidpart;
765 }).join('-');
766 }
767
768
769 //----------------------------------------------------------------------------
770 // AbstractRenderer
771 //
772 // Abstract base class defining the drawing API. Can not be used directly.
773 //----------------------------------------------------------------------------
774
775 function AbstractRenderer() {
776
777 };
778
779 AbstractRenderer.prototype.init = function(elem) {};
780 AbstractRenderer.prototype.bounds = function(shape) { return { x:0, y:0, width:0, height: 0 }; };
781 AbstractRenderer.prototype.create = function(shape, fillColor, lineColor, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, transform) {};
782 AbstractRenderer.prototype.datacreate = function(fillColor, lineColor, lineWidth, fillOpac, strokeOpac, left, top, width, height,data) {};
783 AbstractRenderer.prototype.index = function(shape, order) {};
784 AbstractRenderer.prototype.remove = function(shape) {};
785 AbstractRenderer.prototype.copy = function(shape) {};
786 AbstractRenderer.prototype.paste = function(left,top) {};
787 AbstractRenderer.prototype.duplicate = function(shape) {};
788 AbstractRenderer.prototype.move = function(shape, left, top) {};
789 AbstractRenderer.prototype.endmove = function(shape) {};
790 AbstractRenderer.prototype.transform= function(shape, left, top) {};
791 AbstractRenderer.prototype.scale = function(shape, left, top) {};
792 AbstractRenderer.prototype.rotate = function(shape, left, top) {};
793 AbstractRenderer.prototype.track = function(shape) {};
794 AbstractRenderer.prototype.restruct = function(shape) {};
795 AbstractRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {};
796 AbstractRenderer.prototype.editCommand = function(shape, cmd, value) {};
797 AbstractRenderer.prototype.queryCommand = function(shape, cmd) {};
798 AbstractRenderer.prototype.showTracker = function(shape,value) {};
799 AbstractRenderer.prototype.getMarkup = function() { return null; };
800 AbstractRenderer.prototype.info = function(shape){};
801 AbstractRenderer.prototype.editShape = function(shape,data){};
802 AbstractRenderer.prototype.onKeyPress = function(){};
803
804 AbstractRenderer.prototype.getshapes = function(){};
805
806
807 //-----------------------------
808 // Geometry - string functions
809 //-----------------------------
810
811 //two point angle deg
812 function ang2v(x1,y1,x2,y2)
813 {
814 /*
815 var k=0;
816
817 var sum1=u1+v1;
818 var sum2=u2+v2;
819
820 var res1=u1-v1;
821 var res2=u2-v2;
822
823 var ku1=k*u1;
824 var ku2=k*u2;
825
826 var mu= Math.sqrt(u1*u1+u2*u2);
827 var mv= Math.sqrt(v1*v1+v2*v2);
828
829 var pesc= u1*v1+u2*v2;
830 //var ang=Math.acos(pesc/(mu*mv))*180/Math.PI;
831 var ang=Math.acos(pesc/(mu*mv));
832 */
833 var resx=x2-x1;
834 var resy=y2-y1;
835 var ang=Math.atan2(resy,resx);
836 //alert(ang);
837 return ang;
838 }
839
840 function dist2p(a,b,c,d)
841 {
842 with (Math)
843 {
844 //var d2p=sqrt(abs(((d-b)*(d-b) )+((c-a)*(c-a)))); //decimas(d2p,3); return d2p;
845 return sqrt(abs((d-b)*(d-b)+ (c-a)*(c-a)));
846
847 }
848 }
849 function pmd2pb(a,b,c,d,q) {
850 pmdx= (1-q)*a+c*q;
851 pmdy= (1-q)*b+d*q;
852 //pmdx=decimas(pmdx,3);
853 //pmdy=decimas(pmdy,3);
854 var cad=pmdx+','+pmdy;
855 var sol= new Array();
856 sol= [cad,pmdx,pmdy];
857 return sol
858
859 }
860
861 function getAngle(dx,dy) {
862 var angle = Math.atan2(dy, dx);
863 //angle *= 180 / Math.PI;
864 return angle;
865
866 }
867
868 /*
869
870 A = y2-y1
871 B = x1-x2
872 C = A*x1+B*y1
873 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:
874 A1x + B1y = C1
875 A2x + B2y = C2
876 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.
877
878 double det = A1*B2 - A2*B1
879 if(det == 0){
880 //Lines are parallel
881 }else{
882 double x = (B2*C1 - B1*C2)/det
883 double y = (A1*C2 - A2*C1)/det
884 }
885
886
887
888
889 */
890 // interseccion 2 rectas
891 function ntrsccn2rb(a,b,c,d,e,f,g,h){
892 var solution= new Array();
893 var i2rx=0;var i2ry=0;
894 var w= (c-a)*(f-h)-(e-g)*(d-b);
895 if(w==0){
896 n=1;
897 i2rx= (1-n)*a+n*c;
898 i2ry= (1-n)*b+n*d;
899 solution= ['',i2rx,i2ry];
900 //Lines are parallel
901 return solution
902 //return (i2rx+' '+i2ry);
903 }
904 var n = (((e-a)*(f-h))-((e-g)*(f-b)))/w;
905 i2rx=(1-n)*a+n*c;
906 i2ry=(1-n)*b+n*d;
907 //return (i2rx+' '+i2ry);
908 solution= ['',i2rx,i2ry];
909 return solution
910
911 }
912
913 //ecuacion implicita de la recta
914 function ccnmplct(a,b,c,d) {
915 var solution= new Array();
916 //a1 a2, b1 b2 vector direccion b1-a1 , b2-a2
917 var v1m=c-a;
918 var v1n=d-b;
919 var c1x= v1m;
920 var c1y= v1n;
921 // ecuacion continua (x - a) /c -a = (y - b)/d - b
922 //(x - a) * v1n = (y - b) * v1m
923 //x * v1n - v1n*a = y * v1m - b* v1m
924 eia= v1n ;
925 eib= - v1m;
926 eic= (b* v1m) - ( v1n*a)
927 solution= [eia,eib,eic];
928 return solution
929 }
930 function GetString(source, start, end){
931 var st = source.indexOf(start) + start.length;
932 var en = source.indexOf(end, start);
933 return source.substring(st, en);//trimAll(source.substring(st, en));
934 }
935
936 function deg2rad(angle){
937 return (angle/180) * Math.PI;
938 }
939
940 String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,'') }
941
942 function objectOffset(obj)
943 {
944 var posX=0;
945 var posY=0;
946 if(typeof(obj.offsetParent) != "undefined")
947 {
948 for(var x=0, y=0;obj; obj=obj.offsetParent)
949 {
950 x += obj.offsetLeft;
951 y += obj.offsetTop;
952 }
953 posX=x;
954 posY=y;
955 }
956 else
957 {
958 posX=obj.offsetLeft;
959 posY=obj.offsetTop;
960 }
961 alert(obj.id+" "+"X: "+posX+" Y: "+posY);
962 }
963
964 function generateJSON(cssEnv)
965 {
966 //string=string.replace(/;/g,'",') ;
967 //string=string.replace(/:/g,':"') ;
968 //style="fill:#7e0000;fill-opacity:1"
969
970 var css=cssEnv.split(';')
971
972 var strJSON = '{';
973 ch = ',';
974 for (i = 0 ; i < css.length; i++)
975 {
976 var data=css[i].split(':');
977 if(data[0]!=''){
978 //if(i == (css.length-2)){ ch = ''; }
979 strJSON += "'"+data[0].trim()+"':'"+data[1].trim()+"'"+",";
980 }
981
982
983 }
984 var num= strJSON.length;
985 strJSON=strJSON.substr(0, num-1);
986
987 strJSON += '}';
988
989 return strJSON;
990 }