view onlypaths/js/onlypaths_mini.js @ 69:dd97a10c782e laserkard

Added access.log and error.log to switch to lighttpd.
author Robert McIntyre <rlm@mit.edu>
date Tue, 22 Jun 2010 13:37:30 -0400
parents 26c2b3ad21c7
children
line wrap: on
line source
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
14 This program is free software; you can redistribute it and/or modify it
15 under the terms of the MIT License.
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.
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 --------------------------------------------------------------------------*/
41 var xpArray=new Array();
42 var ypArray=new Array();
43 var setPoints=new Array();
45 var inout='';//true;
46 var typeTransform='';
48 var contmove=0;
49 var zoomx=0;
50 var zoomy=0;
51 var zoomscale=1;
52 var zoommode='frame'; //more minus frame
54 //
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='';
62 var numClics=0;
64 ////////////
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";
91 this.pathsEdit = false;
92 this.previusBox=null;
93 this.initialPath='';
94 this.clipboard=null;
95 this.moveNow=true;
97 this.selectedBounds = { x:0, y:0, width:0, height: 0 };
98 this.onselect = function() {}
99 this.onunselect = function() {}
101 this.logtext = "";
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);});
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);
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);
124 }
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 }
134 RichDrawEditor.prototype.getshapes = function(){
135 return this.renderer.getshapes();
136 }
138 RichDrawEditor.prototype.info = function(shape){
139 return this.renderer.info(shape)
140 }
143 RichDrawEditor.prototype.clearWorkspace = function() {
144 this.container.innerHTML = '';
145 };
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 };
155 RichDrawEditor.prototype.toFront = function(order) {
156 if (this.selected) {
157 this.renderer.index(this.selected, order);
158 }
159 };
161 RichDrawEditor.prototype.deleteAll = function() {
162 this.renderer.removeAll();
163 };
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 };
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 };
182 RichDrawEditor.prototype.getSelectedElement = function() {
183 return this.selected;
184 };
186 RichDrawEditor.prototype.toCurve = function() {
187 this.renderer.tocurve();
188 }
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, '', '');
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 };
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 };
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;
225 return;
226 };
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 }
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 }
301 RichDrawEditor.prototype.onSelectStart = function(event) {
302 return false
303 }
306 /////////////////////////////
309 /*
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 */
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';
333 }
334 */
335 RichDrawEditor.prototype.onMouseDown = function(event) {
337 clockdata();
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;
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);
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, '');
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', '', '');
409 this.selected.id = 'shape:' + createUUID();
410 Ext.get(this.selected).on( "mousedown", this.onHit,this);
411 this.log(this.selected.id);
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;
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,'');
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', '', '');
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 {
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;
470 //snappedX*=proporDiagonal;
471 //snappedY*=proporDiagonal;
472 //snappedX+=marginx;
473 //snappedY+=marginy;
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 {
481 Ext.get(this.container).un("mousemove", this.onDrag);
482 this.unselect();
483 }
484 //typeTransform='';
485 }
487 // if (typeTransform=='' && (this.mouseDownX != snappedX || this.mouseDownY != snappedY) )
488 // {
489 //if(typeTransform=='Rotate' || typeTransform=='Translate'){ }else{
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);
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'));
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'));
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 };
527 RichDrawEditor.prototype.onMouseUp = function(event)
528 {
529 //Ext.get(this.selected).un("mousemove",this.onDrag)
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);
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);
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);
578 //inout='move';//true;
579 //this.renderer.restruct(this.selected);
580 typeTransform=='';
581 }
582 if(typeTransform=="Translate" )
583 {
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;
593 }
594 if(inout=='multiSelect')
595 {
597 //inout='move';//true;
598 }
600 typeTransform=='';
601 }
602 //Event.stopObserving(this.container, "mousemove", this.onDraw,this);
603 };
606 RichDrawEditor.prototype.onDrag = function(event) {
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;
617 var deltaX = snappedX - this.mouseDownX;
618 var deltaY = snappedY - this.mouseDownY;
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);
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 }
641 if(typeTransform=="Translate")
642 {
643 Ext.get(this.container).getXY();
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);
653 }
656 if(typeTransform=="Rotate")
657 {
658 this.renderer.rotateShape(this.selected, this.previusBox,deltaX, deltaY);
659 //this.renderer.showTracker(this.selected,this.pathsEdit);
660 }
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); }
670 //RichDrawEditor.prototype.onTransform(event);
673 //}
675 }
676 // Update selection tracker
677 //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
679 //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
681 // hide_tracker();
682 };
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;
696 this.renderer.track(handle, deltaX, deltaY);
698 // Update selection tracker
699 show_tracker();
700 // hide_tracker();
701 };
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);
713 //snappedX*=proporDiagonal;
714 //snappedY*=proporDiagonal;
715 //snappedX+=marginx;
716 //snappedY+=marginy;
718 this.renderer.resize(this.squareSelect, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
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);
728 //snappedX*=proporDiagonal;
729 //snappedY*=proporDiagonal;
730 //snappedX+=marginx;
731 //snappedY+=marginy;
733 this.renderer.resize(this.selected, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
734 }
735 };
737 RichDrawEditor.prototype.onRotate = function(event) {
738 if (this.selected == null)
739 {
741 }else{
742 // this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
743 //document.getElementById('richdraw').style.cursor='e-resize';
745 //alert('chao');
746 //inout=false;
748 //return;
749 }
750 };
752 RichDrawEditor.prototype.onScale = function(event) {
753 if (this.selected == null)
754 {
756 }else{
757 //document.getElementById('richdraw').style.cursor='e-resize';
758 //alert('chao');
759 //inout=false;
761 //return;
762 }
763 };
765 RichDrawEditor.prototype.onTransform = function(event) {
766 if (this.selected == null)
767 {
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); }
773 }
774 };
776 RichDrawEditor.prototype.onTranslate = function(event) {
777 if (this.selected == null)
778 {
780 }else{
781 // document.getElementById('richdraw').style.cursor='move';
782 //alert('hello');
783 //inout=true;
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]);
792 //var x= parseFloat(event.getXY()[0]);
793 //var y= parseFloat(event.getXY()[1]);
796 this.inputxy = [x,y]
797 this.onInputXY(x,y);
799 //Ext.get(this.container).getXY(); ;//
800 };
803 RichDrawEditor.prototype.onHit = function(event) {
804 //console.log("AAH HIT!!!!")
805 if(this.mode == 'select')
806 {
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
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);
821 }
822 else
823 {
825 Ext.get(this.container).un("mousemove", this.onDrag);
826 //this.unselect();
827 typeTransform="Translate";
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);
846 contmove=0;
847 //this.setGrid(this.lineWidth, width);
848 var width=this.gridWidth;
850 this.setGrid(width, width);
852 this.select(event.getTarget());
853 this.previusBox=this.selected;
855 //++
856 this.renderer.getProperties(this.selected);
857 var offset = Ext.get(this.container).getXY();
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]));
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);
883 }
884 }
885 else
886 {
887 //this.selectedBounds = this.renderer.bounds(this.selected);
888 var offset = Ext.get(this.container).getXY();
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);
894 }
895 };
898 RichDrawEditor.prototype.onClic = function(event) {
899 if(this.mode == 'controlpath')
900 {
902 //Ext.get(this.container).on( "mouseout", this.onMouseUp,this);
904 //Ext.get(this.container).on( "mousemove", this.onDrag,this);
906 //Ext.get(this.container).on( "mouseout", this.onDrag,this);
907 }
908 else
909 {
911 }
912 };
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 }
920 RichDrawEditor.prototype.onEndLine = function(event) {
922 if(this.mode == 'controlpath')
923 { // alert('hello');
924 numClics=0;
925 //this.selected = null;
927 //Event.stopObserving(this.container, "mousemove", this.onDraw,this);
931 //Event.observe(this.selected, "mousedown", this.onHit,this);
932 //Ext.get(this.container).on( "mousemove", this.onDraw,this);
934 //Event.stopObserving(this.selected, "dblclick", this.onEndLine,this);
935 //Event.stopObserving(this.container, "mousemove", this.onDraw,this);
937 this.selected = null;
940 //this.unselect();
942 }
943 else
944 {
945 this.nowDraw=false;
946 }
947 };
948 function noselect(){
949 //typeTransform="";
950 }
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 }
967 //----------------------------------------------------------------------------
968 // AbstractRenderer
969 //
970 // Abstract base class defining the drawing API. Can not be used directly.
971 //----------------------------------------------------------------------------
973 function AbstractRenderer() {
975 };
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(){};
1002 AbstractRenderer.prototype.getshapes = function(){};
1005 //-----------------------------
1006 // Geometry - string functions
1007 //-----------------------------
1009 //two point angle deg
1010 function ang2v(x1,y1,x2,y2)
1012 /*
1013 var k=0;
1015 var sum1=u1+v1;
1016 var sum2=u2+v2;
1018 var res1=u1-v1;
1019 var res2=u2-v2;
1021 var ku1=k*u1;
1022 var ku2=k*u2;
1024 var mu= Math.sqrt(u1*u1+u2*u2);
1025 var mv= Math.sqrt(v1*v1+v2*v2);
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;
1038 function dist2p(a,b,c,d)
1040 with (Math)
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)));
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
1059 function getAngle(dx,dy) {
1060 var angle = Math.atan2(dy, dx);
1061 //angle *= 180 / Math.PI;
1062 return angle;
1066 /*
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.
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
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);
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
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
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));
1134 function deg2rad(angle){
1135 return (angle/180) * Math.PI;
1138 String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,'') }
1140 function objectOffset(obj)
1142 var posX=0;
1143 var posY=0;
1144 if(typeof(obj.offsetParent) != "undefined")
1146 for(var x=0, y=0;obj; obj=obj.offsetParent)
1148 x += obj.offsetLeft;
1149 y += obj.offsetTop;
1151 posX=x;
1152 posY=y;
1154 else
1156 posX=obj.offsetLeft;
1157 posY=obj.offsetTop;
1159 alert(obj.id+" "+"X: "+posX+" Y: "+posY);
1162 function generateJSON(cssEnv)
1164 //string=string.replace(/;/g,'",') ;
1165 //string=string.replace(/:/g,':"') ;
1166 //style="fill:#7e0000;fill-opacity:1"
1168 var css=cssEnv.split(';')
1170 var strJSON = '{';
1171 ch = ',';
1172 for (i = 0 ; i < css.length; i++)
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()+"'"+",";
1182 var num= strJSON.length;
1183 strJSON=strJSON.substr(0, num-1);
1185 strJSON += '}';
1187 return strJSON;