1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/onlypaths/js/onlypaths.js	Sun Jan 31 12:33:33 2010 -0500
     1.3 @@ -0,0 +1,990 @@
     1.4 +/*----------------------------------------------------------------------------
     1.5 + ONLYPATHS 0.1 
     1.6 + from
     1.7 + RICHDRAW 1.0
     1.8 + Vector Graphics Drawing Script
     1.9 + -----------------------------------------------------------------------------
    1.10 + Created by Mark Finkle (mark.finkle@gmail.com)
    1.11 + Implementation of simple vector graphic drawing control using SVG or VML.
    1.12 + -----------------------------------------------------------------------------
    1.13 + Copyright (c) 2006 Mark Finkle  
    1.14 +               2008 Antimatter15  
    1.15 +               2008 Josep_ssv
    1.16 +
    1.17 + This program is  free software;  you can redistribute  it and/or  modify it
    1.18 + under the terms of the MIT License.
    1.19 +
    1.20 + Permission  is hereby granted,  free of charge, to  any person  obtaining a
    1.21 + copy of this software and associated documentation files (the "Software"),
    1.22 + to deal in the  Software without restriction,  including without limitation
    1.23 + the  rights to use, copy, modify,  merge, publish, distribute,  sublicense,
    1.24 + and/or  sell copies  of the  Software, and to  permit persons to  whom  the
    1.25 + Software is  furnished  to do  so, subject  to  the  following  conditions:
    1.26 + The above copyright notice and this  permission notice shall be included in
    1.27 + all copies or substantial portions of the Software.
    1.28 +
    1.29 + THE SOFTWARE IS PROVIDED "AS IS",  WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    1.30 + IMPLIED,  INCLUDING BUT NOT LIMITED TO  THE WARRANTIES  OF MERCHANTABILITY,
    1.31 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    1.32 + AUTHORS OR  COPYRIGHT  HOLDERS BE  LIABLE FOR  ANY CLAIM,  DAMAGES OR OTHER
    1.33 + LIABILITY, WHETHER  IN AN  ACTION OF CONTRACT, TORT OR  OTHERWISE,  ARISING
    1.34 + FROM,  OUT OF OR  IN  CONNECTION  WITH  THE  SOFTWARE OR THE  USE OR  OTHER
    1.35 + DEALINGS IN THE SOFTWARE.
    1.36 + -----------------------------------------------------------------------------
    1.37 + Dependencies: (SVG or VML rendering implementations)
    1.38 + History:
    1.39 + 2006-04-05 | Created richdraw.js  
    1.40 + 2008       | Update content and added framework ExtJS    
    1.41 + 2008-06-08 | Rename onlypaths.js   
    1.42 + --------------------------------------------------------------------------*/  
    1.43 + 
    1.44 +var xpArray=new Array();
    1.45 +var ypArray=new Array(); 
    1.46 +var setPoints=new Array(); 
    1.47 +
    1.48 +var inout='';//true;
    1.49 +var typeTransform='';
    1.50 +
    1.51 +var contmove=0;  
    1.52 +var zoomx=0;
    1.53 +var zoomy=0;
    1.54 +var zoomscale=1;
    1.55 +var zoommode='frame'; //more minus frame
    1.56 +
    1.57 +//
    1.58 + 
    1.59 +var data_path_close=true;
    1.60 +var data_text_family='';
    1.61 +var data_text_size=19
    1.62 +var data_text_messaje='';
    1.63 +var data_image_href='';   
    1.64 + 
    1.65 +var numClics=0;  
    1.66 +
    1.67 +////////////
    1.68 +
    1.69 +function RichDrawEditor(elem, renderer) {
    1.70 + this.container = elem;
    1.71 + this.gridX = 10;
    1.72 + this.gridY = 10;
    1.73 + this.mouseDownX = 0;  
    1.74 + this.mouseDownY = 0;    
    1.75 + this.clicX = 0;  
    1.76 + this.clicY = 0;
    1.77 + this.nowDraw=false;
    1.78 + this.mode = '';
    1.79 + this.fillColor = '';  
    1.80 + this.lineColor = '';
    1.81 + this.lineWidth = '';
    1.82 + this.selected = null;   
    1.83 + this.squareSelect = null;  
    1.84 + this.focusin = null;  
    1.85 + this.lineOpac = 1;
    1.86 + this.fillOpac = 1;
    1.87 + this.gridWidth = 1;
    1.88 + this.opac = 1;          
    1.89 + //++ ;
    1.90 + this.text_messaje="";
    1.91 + this.text_size=19;
    1.92 + this.text_family="Arial";
    1.93 + 
    1.94 + this.pathsEdit = false;
    1.95 + this.previusBox=null; 
    1.96 + this.initialPath='';
    1.97 + this.clipboard=null;
    1.98 + this.moveNow=true;
    1.99 + 
   1.100 + this.selectedBounds = { x:0, y:0, width:0, height: 0 };
   1.101 + this.onselect = function() {}
   1.102 + this.onunselect = function() {}
   1.103 + 
   1.104 + this.logtext = "";
   1.105 + 
   1.106 + this.renderer = renderer;
   1.107 + this.renderer.init(this.container);
   1.108 + this.renderer.editor = this;
   1.109 + 
   1.110 + this.initialUnit=1;
   1.111 + this.unit=this.initialUnit; 
   1.112 +
   1.113 + 
   1.114 + this.inputxy = []; 
   1.115 + this.viewInputxy = [];      
   1.116 + this.onViewInputXY = function(){};
   1.117 + this.onInputXY = function(){};   
   1.118 + 
   1.119 + 
   1.120 + //Ext.get(this.container).on('keypress', function(e){alert(e.keyCode);});
   1.121 +  
   1.122 + Ext.get(this.container).on( "mousedown", this.onMouseDown,this);
   1.123 + Ext.get(this.container).on( "mouseup", this.onMouseUp,this);  
   1.124 + Ext.get(this.container).on( "mousemove", this.onMouseMove,this); 
   1.125 + //Ext.get(this.container).on( "dblclick", this.onEndLine,this);
   1.126 + Ext.get(this.container).on( "selectstart", this.onSelectStart,this);
   1.127 +  
   1.128 +
   1.129 +  
   1.130 +}
   1.131 +
   1.132 +RichDrawEditor.prototype.log = function(logtext){
   1.133 +  if(document.forms[0].code){
   1.134 +    document.forms[0].code.value = logtext
   1.135 +  }
   1.136 +}
   1.137 +
   1.138 +
   1.139 +RichDrawEditor.prototype.getshapes = function(){
   1.140 + return this.renderer.getshapes();
   1.141 +}
   1.142 +
   1.143 +RichDrawEditor.prototype.info = function(shape){
   1.144 + return this.renderer.info(shape)
   1.145 +}
   1.146 +
   1.147 +
   1.148 +RichDrawEditor.prototype.clearWorkspace = function() {
   1.149 +  this.container.innerHTML = '';
   1.150 +};
   1.151 +
   1.152 +RichDrawEditor.prototype.deleteSelection = function() {
   1.153 + if (this.selected) {
   1.154 +   this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
   1.155 +   this.renderer.remove(this.selected);
   1.156 +   this.selected = null;
   1.157 + }
   1.158 +};
   1.159 +
   1.160 +RichDrawEditor.prototype.toFront = function(order) {
   1.161 + if (this.selected) { 
   1.162 +   this.renderer.index(this.selected, order);
   1.163 + }
   1.164 +};
   1.165 +
   1.166 +RichDrawEditor.prototype.deleteAll = function() {   
   1.167 + this.renderer.removeAll();
   1.168 +};
   1.169 +
   1.170 +
   1.171 +RichDrawEditor.prototype.select = function(elem) {
   1.172 + if (elem == this.selected){  return;  }
   1.173 + this.selected = elem;
   1.174 + this.renderer.showTracker(this.selected,this.pathsEdit);
   1.175 + this.onselect(this);
   1.176 +};
   1.177 +
   1.178 +
   1.179 +RichDrawEditor.prototype.unselect = function() {
   1.180 + if (this.selected) {
   1.181 +   this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));
   1.182 +   this.selected = null;
   1.183 +   this.onunselect(this);
   1.184 +  }
   1.185 +};
   1.186 +
   1.187 +RichDrawEditor.prototype.getSelectedElement = function() {
   1.188 + return this.selected;
   1.189 +};
   1.190 +
   1.191 +RichDrawEditor.prototype.toCurve = function() {  
   1.192 + this.renderer.tocurve();
   1.193 +}
   1.194 +
   1.195 +RichDrawEditor.prototype.submitShape = function(data) {  
   1.196 + if (this.mode != 'select') {   
   1.197 +   setMode('path', 'Path');  
   1.198 +   this.actualStyle();
   1.199 +   onColorChange();   
   1.200 +   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, '', '');
   1.201 +   this.selected.id = 'shape:' + createUUID();
   1.202 +   Ext.get(this.selected).on("mousedown", this.onHit,this);   
   1.203 +   setMode('select', 'Select'); 
   1.204 + } else {
   1.205 +   this.renderer.transformShape(this.selected,data,null); 
   1.206 +   this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 
   1.207 +   this.renderer.showTracker(this.selected,this.pathsEdit);
   1.208 + }
   1.209 +};
   1.210 +
   1.211 +RichDrawEditor.prototype.setGrid = function(horizontal, vertical) {
   1.212 + this.gridX = horizontal;
   1.213 + this.gridY = vertical;
   1.214 + this.gridWidth = (vertical+horizontal)/2; //average. ideally, it should be the same
   1.215 +};
   1.216 +
   1.217 +
   1.218 +
   1.219 +RichDrawEditor.prototype.actualStyle = function()
   1.220 +{
   1.221 + this.textMessaje=$('option_text_message').value;
   1.222 + this.textSize=parseFloat($('option_text_size').value);
   1.223 + this.textFamily=$('option_text_family').value;
   1.224 + this.pathClose = $('option_path_close').checked; 
   1.225 + this.imageHref = $('option_image_href').value;
   1.226 +
   1.227 + return;
   1.228 +};
   1.229 +
   1.230 +
   1.231 +RichDrawEditor.prototype.editCommand = function(cmd, value)
   1.232 +{
   1.233 + if (cmd == 'mode') 
   1.234 +  {
   1.235 +   this.mode = value;
   1.236 +  }
   1.237 + else if (this.selected == null) 
   1.238 +  {  
   1.239 +   if (cmd == 'fillcolor') 
   1.240 +    {
   1.241 +     this.fillColor = value;
   1.242 +    }
   1.243 +   else if (cmd == 'linecolor') 
   1.244 +    {
   1.245 +     this.lineColor = value;
   1.246 +    }
   1.247 +   else if (cmd == 'linewidth') 
   1.248 +    {
   1.249 +     this.lineWidth = parseInt(value) + 'px';
   1.250 +    } 
   1.251 +   else if (cmd == 'fillopacity') {
   1.252 +     this.fillOpac = parseInt(value);
   1.253 +    } 
   1.254 +   else if (cmd == 'lineopacity') {
   1.255 +     this.lineOpac = parseInt(value);
   1.256 +    }
   1.257 +  }
   1.258 + else 
   1.259 +  {
   1.260 +    this.renderer.editCommand(this.selected, cmd, value);
   1.261 +  }
   1.262 +}
   1.263 +
   1.264 +
   1.265 +RichDrawEditor.prototype.queryCommand = function(cmd)
   1.266 +{
   1.267 + if (cmd == 'mode') 
   1.268 +  {
   1.269 +   return this.mode;
   1.270 +  }
   1.271 + else if (this.selected == null) 
   1.272 +  {
   1.273 +   if (cmd == 'fillcolor') 
   1.274 +    {
   1.275 +     return this.fillColor;
   1.276 +    }
   1.277 +   else if (cmd == 'linecolor') 
   1.278 +    {
   1.279 +     return this.lineColor;
   1.280 +    }
   1.281 +   else if (cmd == 'linewidth') 
   1.282 +    {
   1.283 +     return this.lineWidth;
   1.284 +    }
   1.285 +   else if (cmd == 'fillopacity') 
   1.286 +    {
   1.287 +     return  this.fillOpac;
   1.288 +    }
   1.289 +   else if (cmd == 'lineopacity') 
   1.290 +    {
   1.291 +     return  this.fillOpac;
   1.292 +    }
   1.293 +  }
   1.294 + else 
   1.295 +  {
   1.296 +   return this.renderer.queryCommand(this.selected, cmd);
   1.297 +  }
   1.298 +}
   1.299 +
   1.300 +
   1.301 +
   1.302 +
   1.303 +RichDrawEditor.prototype.onSelectStart = function(event) {
   1.304 +  return false
   1.305 +}
   1.306 +
   1.307 +RichDrawEditor.prototype.onMouseDown = function(event) {  
   1.308 + 
   1.309 + clockdata();
   1.310 + 
   1.311 + //MODE NO SELECT
   1.312 + if (this.mode != 'select') 
   1.313 +  {      
   1.314 +   var modeUsed=0;     
   1.315 +   if (this.mode == 'zoom') 
   1.316 +    {     
   1.317 +     var width=this.gridWidth;
   1.318 +     contmove=0;
   1.319 +     this.setGrid(width, width);  
   1.320 +     this.unselect(); 
   1.321 +     xpArray=new Array();
   1.322 +     ypArray=new Array();
   1.323 +     this.mouseDownX = this.viewInputxy[0];
   1.324 +     this.mouseDownY = this.viewInputxy[1];   
   1.325 +     xpArray.push(this.mouseDownX);
   1.326 +     ypArray.push(this.mouseDownY);
   1.327 +     if(zoommode=='window'){
   1.328 +         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', '', '');
   1.329 +         this.squareSelect.id = 'squareSelectID';   
   1.330 +         Ext.get(this.squareSelect).on( "mousedown", this.onHit,this);  
   1.331 +         Ext.get(this.squareSelect).on( "mousemove", this.onDraw,this);
   1.332 +
   1.333 +     }else{
   1.334 +        this.renderer.zoom(this.mouseDownX, this.mouseDownY);  
   1.335 +      } 
   1.336 +     modeUsed=1; 
   1.337 +    } //end zoom     
   1.338 +   if (this.mode == 'controlpath') 
   1.339 +    {
   1.340 +     this.actualStyle(); 
   1.341 +     onColorChange();         
   1.342 +     if(numClics<=0)
   1.343 +      {     
   1.344 +       this.nowDraw=true;
   1.345 +       setPoints=new Array();    
   1.346 +       var width=this.gridWidth;  
   1.347 +       contmove=0;
   1.348 +       this.setGrid(width, width);  
   1.349 +       this.unselect(); 
   1.350 +       xpArray=new Array();
   1.351 +       ypArray=new Array();
   1.352 +       this.mouseDownX =  this.viewInputxy[0];
   1.353 +       this.mouseDownY =  this.viewInputxy[1];   
   1.354 +       xpArray.push(this.mouseDownX);
   1.355 +       ypArray.push(this.mouseDownY);
   1.356 +       setPoints.push(this.mouseDownX+','+this.mouseDownY); 
   1.357 +       onColorChange();
   1.358 +       this.actualStyle();                                                                                                                                                  
   1.359 +       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', '', '');
   1.360 +              
   1.361 +       this.selected.id = 'shape:' + createUUID(); 
   1.362 +       Ext.get(this.selected).on( "mousedown", this.onHit,this);  
   1.363 +       this.log(this.selected.id);   
   1.364 +       
   1.365 +       Ext.get(this.selected).on( "dblclick", this.onEndLine,this);  
   1.366 +       Ext.get(this.container).on( "mousemove", this.onDraw,this); 
   1.367 +       numClics++;
   1.368 +     }
   1.369 +      else
   1.370 +     {  
   1.371 +       var coord=this.viewInputxy;
   1.372 +       var X=parseFloat(coord[0]);
   1.373 +       var Y=parseFloat(coord[1]); 
   1.374 +       setPoints.push(X+','+Y);
   1.375 +       this.renderer.clic(this.selected);
   1.376 +       numClics++;
   1.377 +     }
   1.378 +     modeUsed=1; 
   1.379 +    } //end mode controlpath
   1.380 +   if (modeUsed == 0) 
   1.381 +    {   
   1.382 +     var width=this.gridWidth;
   1.383 +     contmove=0; 
   1.384 +     this.setGrid(width, width);  
   1.385 +     this.unselect(); 
   1.386 +     xpArray=new Array();
   1.387 +     ypArray=new Array();
   1.388 +     this.mouseDownX = this.viewInputxy[0];   
   1.389 +     this.mouseDownY= this.viewInputxy[1];
   1.390 +  
   1.391 +     xpArray.push(this.mouseDownX);
   1.392 +     ypArray.push(this.mouseDownY);
   1.393 +     
   1.394 +     this.unselect();   
   1.395 +     onColorChange();
   1.396 +     this.actualStyle(); 
   1.397 +     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', '', '');
   1.398 +     this.selected.id = 'shape:' + createUUID();   
   1.399 +     Ext.get(this.selected).on( "mousedown", this.onHit,this);  
   1.400 +     Ext.get(this.container).on( "mousemove", this.onDraw,this);
   1.401 +    }     
   1.402 +  }
   1.403 +   else   //----- MODE SELECT
   1.404 +  {                                            
   1.405 +  if(this.container.ownerDocument.getElementById('tracker')) this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 
   1.406 + 
   1.407 +  
   1.408 +   var snappedX=this.viewInputxy[0];
   1.409 +   var snappedY=this.viewInputxy[1]
   1.410 +
   1.411 +   if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)
   1.412 +    { 
   1.413 +      if(this.selected!=null && typeTransform=='Translate' )
   1.414 +       {
   1.415 +        
   1.416 +        Ext.get(this.container).un("mousemove", this.onDrag); 
   1.417 +        this.unselect();
   1.418 +       }
   1.419 +    }     
   1.420 +    
   1.421 +     if(typeTransform=='Translate')
   1.422 +      {  
   1.423 +       inout='move';//true;   
   1.424 +       this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 
   1.425 +
   1.426 +      }
   1.427 +     if(typeTransform=='Scale'  || typeTransform=='Rotate') 
   1.428 +      {
   1.429 +       inout='rotate_escale';//false  
   1.430 +       Ext.get(this.container).on( "mousemove", this.onDrag,this);         
   1.431 +       //Ext.get(this.selected).on( "mousedown", this.onHit,this);  
   1.432 +       this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 
   1.433 +      }  
   1.434 +  } //end mode select
   1.435 + return false;
   1.436 +};
   1.437 +
   1.438 +
   1.439 +RichDrawEditor.prototype.onMouseUp = function(event) 
   1.440 +{
   1.441 +   //MODE NO SELECT
   1.442 + if (this.mode != 'select') 
   1.443 +  {
   1.444 +   if(this.mode == 'controlpath') 
   1.445 +    {    
   1.446 +        
   1.447 +    }
   1.448 +     else
   1.449 +    {   
   1.450 +     //ZOOM    
   1.451 +      if (this.mode == 'zoom') 
   1.452 +       {
   1.453 +        var snappedX=this.viewInputxy[0];
   1.454 +        var snappedY=this.viewInputxy[1];
   1.455 +        this.renderer.zoom(snappedX, snappedY); 
   1.456 +        this.renderer.remove(this.container.ownerDocument.getElementById('squareSelectID'));
   1.457 +        Ext.get(this.container).un("mousemove", this.onDraw);  
   1.458 +        this.squareSelect = null; 
   1.459 +        this.selected = null;   
   1.460 +       }else{
   1.461 +        Ext.get(this.container).un("mousemove", this.onDraw);  
   1.462 +        this.selected = null;   
   1.463 +       } 
   1.464 +    }
   1.465 +  } 
   1.466 +   else //MODE SELECT
   1.467 +  { 
   1.468 +   Ext.get(this.container).un("mousemove", this.onDraw);  //or drag
   1.469 +   Ext.get(this.container).un("mousemove", this.onDrag);  
   1.470 +   moveNow=false;   
   1.471 +   contmove=0; 
   1.472 +   if(typeTransform=="Rotate" || typeTransform=="Scale" ) 
   1.473 +    {  
   1.474 +     this.renderer.showTracker(this.selected,this.pathsEdit); 
   1.475 +     typeTransform=='';
   1.476 +    } 
   1.477 +   if(typeTransform=="Translate" ) 
   1.478 +    { 
   1.479 +     this.renderer.showTracker(this.selected,this.pathsEdit); 
   1.480 +     typeTransform='';   
   1.481 +     contmove=0; 
   1.482 +     
   1.483 +    }  
   1.484 +
   1.485 +   if(inout=='multiSelect')
   1.486 +    {
   1.487 +
   1.488 +    } 
   1.489 +    
   1.490 +   typeTransform=''; 
   1.491 +  }  
   1.492 +};
   1.493 +
   1.494 +
   1.495 +RichDrawEditor.prototype.onDrag = function(event) {  
   1.496 +
   1.497 +  moveNow=true;  
   1.498 +  //var offset = Ext.get(this.selected).getXY()
   1.499 +  //var deltaX = this.viewInputxy[0] - (this.viewInputxy[0] - this.mouseDownX);
   1.500 +  //var deltaY = this.viewInputxy[1] - (this.viewInputxy[1] - this.mouseDownY);
   1.501 +  //var deltaX = offset[0] ;
   1.502 +  //var deltaY = offset[1] ; 
   1.503 +
   1.504 +  var deltaX = this.viewInputxy[0] ;
   1.505 +  var deltaY = this.viewInputxy[1] ; 
   1.506 +   var deltaX= this.selectedBounds['x']-this.mouseDownX + this.viewInputxy[0];
   1.507 +   var deltaY= this.selectedBounds['y']-this.mouseDownY + this.viewInputxy[1]; 
   1.508 +
   1.509 +  //var deltX = this.viewInputxy[0]+(this.mouseDownX-this.viewInputxy[0]);
   1.510 +  //var deltY = this.viewInputxy[1]+(this.mouseDownY-this.viewInputxy[1]); 
   1.511 +  
   1.512 +  var modeUsed=0;              
   1.513 +  if(this.mode == 'zoom') 
   1.514 +   {     
   1.515 +        Ext.get(this.container).getXY();
   1.516 +        this.renderer.resize(this.squareSelect, this.clicX,this.clicY, this.viewInputxy[0], this.viewInputxy[1]);
   1.517 +        modeUsed=1; 
   1.518 +   }
   1.519 +  if(this.mode == 'controlpath') 
   1.520 +     {  
   1.521 +      modeUsed=1; 
   1.522 +     } 
   1.523 +  
   1.524 +  if(modeUsed==0)
   1.525 +   {        
   1.526 +    if(inout=='multiSelect')
   1.527 +     { 
   1.528 +         this.renderer.showMultiSelect(this.mouseDownX, this.mouseDownY);  
   1.529 +     }
   1.530 +    if(typeTransform=="Translate")
   1.531 +     {  
   1.532 +      Ext.get(this.container).getXY();  
   1.533 +      //this.log(this.mouseDownX+' '+event.getXY()[0]+' '+ this.selectedBounds.x +'contmove'+contmove); 
   1.534 +      //this.renderer.move(this.selected, this.viewInputxy[0],this.viewInputxy[1],this.clicX,this.clicY);
   1.535 +      //this.renderer.move(this.selected, this.viewInputxy[0],this.viewInputxy[1], this.mouseDownX, this.mouseDownY);
   1.536 +      this.renderer.move(this.selected, deltaX, deltaY, this.mouseDownX, this.mouseDownY);
   1.537 +     }  
   1.538 +    if(typeTransform=="Rotate") 
   1.539 +     { 
   1.540 +      this.renderer.rotateShape(this.selected, this.previusBox,deltaX, deltaY);
   1.541 +     }
   1.542 +    if(typeTransform=="Scale") 
   1.543 +     {
   1.544 +      this.renderer.scaleShape(this.selected, this.previusBox, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY); 
   1.545 +     }
   1.546 +    }   
   1.547 +};
   1.548 +
   1.549 +
   1.550 +RichDrawEditor.prototype.onResize = function(event) {
   1.551 +  var deltaX = this.viewInputxy[0] - this.mouseDownX;
   1.552 +  var deltaY = this.viewInputxy[1] - this.mouseDownY;
   1.553 +  this.renderer.track(handle, deltaX, deltaY);
   1.554 +  show_tracker();
   1.555 +};
   1.556 +
   1.557 +
   1.558 +RichDrawEditor.prototype.onDraw = function(event) {
   1.559 +  if (this.selected == null)
   1.560 +   {  
   1.561 +    if(this.squareSelect != null)
   1.562 +     {
   1.563 +      var offset = Ext.get(this.container).getXY()
   1.564 +      var snappedX = this.viewInputxy[0];//Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
   1.565 +      var snappedY = this.viewInputxy[1];//Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
   1.566 +      this.renderer.resize(this.squareSelect, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
   1.567 +      }
   1.568 +       else
   1.569 +      {
   1.570 +        return;
   1.571 +      }
   1.572 +    }
   1.573 +     else
   1.574 +    {   
   1.575 +  
   1.576 +        var snappedX = this.viewInputxy[0];//Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
   1.577 +        var snappedY = this.viewInputxy[1];// Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
   1.578 +        this.renderer.resize(this.selected, this.mouseDownX, this.mouseDownY, snappedX, snappedY);
   1.579 +      
   1.580 +    }
   1.581 +};
   1.582 +
   1.583 +RichDrawEditor.prototype.onRotate = function(event) {
   1.584 +  if (this.selected == null)
   1.585 +   {
   1.586 +     
   1.587 +   }else{      
   1.588 +   }
   1.589 +};
   1.590 +
   1.591 +RichDrawEditor.prototype.onScale = function(event) {
   1.592 +  if (this.selected == null)
   1.593 +   {
   1.594 +     
   1.595 +   }else{      
   1.596 +   }
   1.597 +};
   1.598 +
   1.599 +RichDrawEditor.prototype.onTransform = function(event) {
   1.600 +  if (this.selected == null)
   1.601 +   {
   1.602 +     
   1.603 +   }else{  
   1.604 +  }
   1.605 +};
   1.606 +
   1.607 +RichDrawEditor.prototype.onMouseMove = function(event) {
   1.608 + var offset = Ext.get(c.container).getXY()
   1.609 + var x = Math.round(event.getXY()[0] - offset[0]);
   1.610 + var y = Math.round(event.getXY()[1] - offset[1]);
   1.611 + if (ie || opera) 
   1.612 +  {  
   1.613 +   proporx =1;
   1.614 +   propory =1;
   1.615 +   zoominit2='1 1 1 1';
   1.616 +   this.inputxy = [x,y];    
   1.617 +   this.viewInputxy = [x,y];  
   1.618 +   this.onInputXY(x,y);   
   1.619 +   this.onViewInputXY(x,y);
   1.620 +  }
   1.621 +   else
   1.622 +  {
   1.623 +   ////////////
   1.624 +   
   1.625 +    var X = x ; // x cursor on canvas
   1.626 +    var Y = y ; // y cursor on canvas
   1.627 +
   1.628 +    var Ex = parseFloat(tokensCanvas[2]) ; // (end) width canvas. Corner down-left
   1.629 +    var Ey = parseFloat(tokensCanvas[3]) ; // (end) height canvas. Corner up-right
   1.630 +
   1.631 +    var zoomX = 0 ; // ? x unknown
   1.632 +    var zoomY = 0 ; // ? y unknown
   1.633 +
   1.634 +    var sx = parseFloat(tokensZoom[0]) ; // (start) x origin of the coord zoom.
   1.635 +    var sy = parseFloat(tokensZoom[1]) ; // (start) y origin of the coord zoom.
   1.636 +    var Wz = parseFloat(tokensZoom[2]) ; // width zoom
   1.637 +    var Hz = parseFloat(tokensZoom[3]) ; // height zoom
   1.638 +
   1.639 +    var ex = parseFloat(sx + Wz) ; // (end) x width zoom. Corner down-left
   1.640 +    var ey = parseFloat(sy + Hz) ; // (end) y height zoom. Corner up-right
   1.641 +
   1.642 +    var r = X / Ex ; // 0 to 1
   1.643 +    var s = Y / Ey ; // 0 to 1
   1.644 +    this.unit = this.initialUnit * (Hz/Ey) ; // 0 to 1
   1.645 +    zoomX= (1 - r) * sx + ex * r;
   1.646 +    zoomY= (1 - s) * sy + ey * s; 
   1.647 +   
   1.648 +   this.inputxy = [x,y];    
   1.649 +   this.viewInputxy = [zoomX,zoomY];  
   1.650 +   this.onInputXY(x,y);  
   1.651 +   this.onViewInputXY(zoomX,zoomY);  
   1.652 +  }
   1.653 +   
   1.654 +};                                       
   1.655 +
   1.656 +
   1.657 +RichDrawEditor.prototype.onHit = function(event) {
   1.658 +  Ext.get(this.container).un("mousemove", this.onDrag); 
   1.659 +
   1.660 + if(this.mode == 'select') 
   1.661 +  {   
   1.662 +   if (event.stopPropagation) event.stopPropagation(); // DOM Level 2
   1.663 +   else event.cancelBubble = true; // IE
   1.664 +   // Now prevent any default action.
   1.665 +   if (event.preventDefault) event.preventDefault(); // DOM Level 2
   1.666 +   else event.returnValue = false; // IE      
   1.667 +   
   1.668 +   if(inout=='multiSelect')
   1.669 +    {   
   1.670 + 
   1.671 +    }
   1.672 +     else
   1.673 +    { 
   1.674 +     //Ext.get(this.container).un("mousemove", this.onDrag); 
   1.675 +     typeTransform="Translate";
   1.676 +     contmove=0;
   1.677 +     var width=this.gridWidth;
   1.678 +         
   1.679 +     this.setGrid(width, width);  
   1.680 +     
   1.681 +     this.select(event.getTarget()); 
   1.682 +     this.previusBox=this.selected;     
   1.683 +    
   1.684 +     this.renderer.getProperties(this.selected);
   1.685 +     //var offset = Ext.get(this.container).getXY(); 
   1.686 + 
   1.687 +     this.selectedBounds = this.renderer.bounds(this.selected); 
   1.688 +     
   1.689 +     this.mouseDownX =this.viewInputxy[0];//x;// offset[0];//zoomx+snappedX;
   1.690 +     this.mouseDownY =this.viewInputxy[1];//y;//  offset[1];//zoomy+snappedY;   
   1.691 +     this.log(this.gridX);
   1.692 +     this.renderer.info(this.selected); 
   1.693 +     if(this.container.ownerDocument.getElementById('tracker'))
   1.694 +      {
   1.695 +        this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 
   1.696 +      } 
   1.697 +     Ext.get(this.container).on( "mousemove", this.onDrag,this);   
   1.698 +    }
   1.699 +  }
   1.700 +   else
   1.701 +  {
   1.702 +    this.mouseDownX = this.viewInputxy[0];//Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);
   1.703 +    this.mouseDownY = this.viewInputxy[1];//Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);
   1.704 +    Ext.get(this.container).on( "mousemove", this.onDrag,this);   
   1.705 +    
   1.706 +  }
   1.707 +};  
   1.708 +
   1.709 +
   1.710 +RichDrawEditor.prototype.onClic = function(event) {
   1.711 + if(this.mode == 'controlpath') 
   1.712 +  {     
   1.713 +  
   1.714 +  }
   1.715 +   else
   1.716 +  {
   1.717 +       
   1.718 +  }
   1.719 +};   
   1.720 +
   1.721 +RichDrawEditor.prototype.reflect = function(HorV) {
   1.722 + this.selected=this.renderer.reflect(HorV);
   1.723 + this.selected.id = 'shape:' + createUUID();
   1.724 + Ext.get(this.selected).on( "mousedown", this.onHit,this);  
   1.725 +}
   1.726 +
   1.727 +RichDrawEditor.prototype.onEndLine = function(event) {   
   1.728 +  
   1.729 + if(this.mode == 'controlpath') 
   1.730 +  {     
   1.731 +        //alert(numClics);
   1.732 +        numClics=0;    
   1.733 +         Ext.get(this.container).un("mousemove", this.onDraw); 
   1.734 +         //Ext.get(this.selected).un( "mousedown", this.onHit,this);  
   1.735 +         //Ext.get(this.selected).un( "dblclick", this.onEndLine);  
   1.736 +         //Ext.get(this.container).un( "mousemove", this.onDraw,this);    
   1.737 +         //Ext.get(this.container).un( "mousemove", this.onDrag,this); 
   1.738 +         // Ext.get(this.selected).un( "mousedown", this.onHit);  
   1.739 +   
   1.740 +       // Ext.get(this.container).un("mousemove", this.onDraw,this); 
   1.741 +        //Ext.get(this.container).un("mousemove", this.onDrag,this);
   1.742 +        this.selected = null;   
   1.743 +        
   1.744 +          
   1.745 +  }
   1.746 +   else
   1.747 +  {   
   1.748 +  
   1.749 +   this.nowDraw=false;   
   1.750 +   typeTransform='';   
   1.751 +  }
   1.752 +};
   1.753 +
   1.754 +function noselect(){
   1.755 +}
   1.756 +
   1.757 +function createUUID()
   1.758 +{
   1.759 +  return [4, 2, 2, 2, 6].map(function(length) {
   1.760 +    var uuidpart = "";
   1.761 +    for (var i=0; i<length; i++) {
   1.762 +      var uuidchar = parseInt((Math.random() * 256)).toString(16);
   1.763 +      if (uuidchar.length == 1)
   1.764 +        uuidchar = "0" + uuidchar;
   1.765 +      uuidpart += uuidchar;
   1.766 +    }
   1.767 +    return uuidpart;
   1.768 +  }).join('-');
   1.769 +}
   1.770 +
   1.771 +
   1.772 +//----------------------------------------------------------------------------
   1.773 +// AbstractRenderer
   1.774 +//
   1.775 +// Abstract base class defining the drawing API. Can not be used directly.
   1.776 +//----------------------------------------------------------------------------
   1.777 +
   1.778 +function AbstractRenderer() {
   1.779 +
   1.780 +};
   1.781 +
   1.782 +AbstractRenderer.prototype.init = function(elem) {};
   1.783 +AbstractRenderer.prototype.bounds = function(shape) { return { x:0, y:0, width:0, height: 0 }; };
   1.784 +AbstractRenderer.prototype.create = function(shape, fillColor, lineColor, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, transform) {};
   1.785 +AbstractRenderer.prototype.datacreate = function(fillColor, lineColor, lineWidth, fillOpac, strokeOpac, left, top, width, height,data) {};
   1.786 +AbstractRenderer.prototype.index = function(shape, order) {};
   1.787 +AbstractRenderer.prototype.remove = function(shape) {}; 
   1.788 +AbstractRenderer.prototype.copy = function(shape) {};
   1.789 +AbstractRenderer.prototype.paste = function(left,top) {};
   1.790 +AbstractRenderer.prototype.duplicate = function(shape) {};
   1.791 +AbstractRenderer.prototype.move = function(shape, left, top) {};  
   1.792 +AbstractRenderer.prototype.endmove = function(shape) {};
   1.793 +AbstractRenderer.prototype.transform= function(shape, left, top) {};
   1.794 +AbstractRenderer.prototype.scale = function(shape, left, top) {};
   1.795 +AbstractRenderer.prototype.rotate = function(shape, left, top) {};
   1.796 +AbstractRenderer.prototype.track = function(shape) {}; 
   1.797 +AbstractRenderer.prototype.restruct = function(shape) {};
   1.798 +AbstractRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {};
   1.799 +AbstractRenderer.prototype.editCommand = function(shape, cmd, value) {};
   1.800 +AbstractRenderer.prototype.queryCommand = function(shape, cmd) {};
   1.801 +AbstractRenderer.prototype.showTracker = function(shape,value) {};
   1.802 +AbstractRenderer.prototype.getMarkup = function() { return null; };
   1.803 +AbstractRenderer.prototype.info = function(shape){}; 
   1.804 +AbstractRenderer.prototype.editShape = function(shape,data){};
   1.805 +AbstractRenderer.prototype.onKeyPress = function(){};
   1.806 +
   1.807 +AbstractRenderer.prototype.getshapes = function(){};
   1.808 +
   1.809 +
   1.810 +//-----------------------------
   1.811 +// Geometry - string functions
   1.812 +//-----------------------------   
   1.813 +
   1.814 +//two point angle  deg
   1.815 +function ang2v(x1,y1,x2,y2)
   1.816 +{
   1.817 +     /*
   1.818 +      var k=0;
   1.819 +
   1.820 +      var sum1=u1+v1; 
   1.821 +      var sum2=u2+v2;    
   1.822 +
   1.823 +      var res1=u1-v1;  
   1.824 +      var res2=u2-v2;   
   1.825 +
   1.826 +     var ku1=k*u1; 
   1.827 +      var ku2=k*u2;   
   1.828 +
   1.829 +       var mu= Math.sqrt(u1*u1+u2*u2); 
   1.830 +       var mv= Math.sqrt(v1*v1+v2*v2);
   1.831 +
   1.832 +       var pesc= u1*v1+u2*v2; 
   1.833 +       //var ang=Math.acos(pesc/(mu*mv))*180/Math.PI;
   1.834 +       var ang=Math.acos(pesc/(mu*mv));  
   1.835 +       */ 
   1.836 +        var resx=x2-x1;  
   1.837 +      var resy=y2-y1;   
   1.838 +       var ang=Math.atan2(resy,resx); 
   1.839 +       //alert(ang);
   1.840 +       return ang;
   1.841 +}     
   1.842 +
   1.843 +function dist2p(a,b,c,d) 
   1.844 + {
   1.845 +   with (Math) 
   1.846 +    {
   1.847 +        //var d2p=sqrt(abs(((d-b)*(d-b) )+((c-a)*(c-a))));   //decimas(d2p,3);     return d2p;
   1.848 +          return sqrt(abs((d-b)*(d-b)+ (c-a)*(c-a)));
   1.849 +
   1.850 +    }
   1.851 + }
   1.852 +function pmd2pb(a,b,c,d,q) {
   1.853 +	pmdx= (1-q)*a+c*q;
   1.854 +	pmdy= (1-q)*b+d*q;
   1.855 +//pmdx=decimas(pmdx,3);
   1.856 +//pmdy=decimas(pmdy,3);
   1.857 +var cad=pmdx+','+pmdy;
   1.858 +var sol= new Array();
   1.859 +sol= [cad,pmdx,pmdy];
   1.860 +return sol
   1.861 +
   1.862 +} 
   1.863 +
   1.864 +function getAngle(dx,dy) {
   1.865 +  var angle = Math.atan2(dy, dx);
   1.866 +  //angle *= 180 / Math.PI;
   1.867 +  return angle;  
   1.868 +  
   1.869 +}
   1.870 +
   1.871 +/*
   1.872 +
   1.873 +A = y2-y1
   1.874 +B = x1-x2
   1.875 +C = A*x1+B*y1
   1.876 +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:
   1.877 +A1x + B1y = C1
   1.878 +A2x + B2y = C2
   1.879 +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.
   1.880 +
   1.881 +    double det = A1*B2 - A2*B1
   1.882 +    if(det == 0){
   1.883 +        //Lines are parallel
   1.884 +    }else{
   1.885 +        double x = (B2*C1 - B1*C2)/det
   1.886 +        double y = (A1*C2 - A2*C1)/det
   1.887 +    }
   1.888 +
   1.889 +
   1.890 +
   1.891 +
   1.892 +*/  
   1.893 +// interseccion 2 rectas
   1.894 +function ntrsccn2rb(a,b,c,d,e,f,g,h){
   1.895 + var solution= new Array();
   1.896 + var i2rx=0;var i2ry=0;
   1.897 + var w= (c-a)*(f-h)-(e-g)*(d-b);
   1.898 + if(w==0){
   1.899 +  n=1;
   1.900 +  i2rx= (1-n)*a+n*c;
   1.901 +  i2ry= (1-n)*b+n*d;
   1.902 +  solution= ['',i2rx,i2ry];  
   1.903 +  //Lines are parallel
   1.904 +  return solution
   1.905 +  //return (i2rx+' '+i2ry);
   1.906 + }
   1.907 + var n = (((e-a)*(f-h))-((e-g)*(f-b)))/w;
   1.908 + i2rx=(1-n)*a+n*c;
   1.909 + i2ry=(1-n)*b+n*d;
   1.910 + //return (i2rx+' '+i2ry);
   1.911 + solution= ['',i2rx,i2ry];
   1.912 + return solution
   1.913 +
   1.914 +}
   1.915 +
   1.916 +//ecuacion implicita de la recta
   1.917 +function ccnmplct(a,b,c,d) { 
   1.918 +  var solution= new Array();
   1.919 +  //a1 a2, b1 b2    vector direccion b1-a1 , b2-a2
   1.920 +  var v1m=c-a;
   1.921 +  var v1n=d-b;
   1.922 +  var c1x= v1m;
   1.923 +  var c1y= v1n;
   1.924 +  // ecuacion continua (x - a) /c -a =  (y - b)/d - b
   1.925 +  //(x - a) * v1n =  (y - b) * v1m 
   1.926 +  //x * v1n - v1n*a = y * v1m - b* v1m
   1.927 +  eia= v1n ;
   1.928 +  eib= - v1m;
   1.929 +  eic=  (b* v1m) - ( v1n*a)
   1.930 +  solution= [eia,eib,eic];
   1.931 +  return solution
   1.932 +}
   1.933 +function GetString(source, start, end){
   1.934 +var st = source.indexOf(start) + start.length;
   1.935 +var en = source.indexOf(end, start);
   1.936 + return source.substring(st, en);//trimAll(source.substring(st, en));
   1.937 +}
   1.938 + 
   1.939 +function deg2rad(angle){
   1.940 +return (angle/180) * Math.PI;
   1.941 +} 
   1.942 + 
   1.943 +String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,'') }
   1.944 + 
   1.945 +function objectOffset(obj)
   1.946 +{
   1.947 + var posX=0;
   1.948 + var posY=0;
   1.949 + if(typeof(obj.offsetParent) != "undefined")
   1.950 +  {
   1.951 +   for(var x=0, y=0;obj; obj=obj.offsetParent)
   1.952 +   {
   1.953 +    x += obj.offsetLeft;
   1.954 +    y += obj.offsetTop;
   1.955 +   }
   1.956 +   posX=x;
   1.957 +   posY=y;
   1.958 +  }
   1.959 +   else
   1.960 +  {
   1.961 +   posX=obj.offsetLeft;
   1.962 +   posY=obj.offsetTop;
   1.963 +  }
   1.964 + alert(obj.id+" "+"X: "+posX+" Y: "+posY);
   1.965 +}
   1.966 +
   1.967 +function generateJSON(cssEnv)
   1.968 +{    
   1.969 + //string=string.replace(/;/g,'",') ;
   1.970 + //string=string.replace(/:/g,':"') ; 
   1.971 + //style="fill:#7e0000;fill-opacity:1" 
   1.972 + 
   1.973 + var css=cssEnv.split(';')
   1.974 +
   1.975 +  var strJSON = '{';
   1.976 +  ch = ',';
   1.977 +  for (i = 0 ; i < css.length; i++)
   1.978 +  { 
   1.979 +   var data=css[i].split(':'); 
   1.980 +   if(data[0]!=''){ 
   1.981 +     //if(i == (css.length-2)){   ch = ''; }   
   1.982 +     strJSON += "'"+data[0].trim()+"':'"+data[1].trim()+"'"+",";
   1.983 +   } 
   1.984 +      
   1.985 +   
   1.986 +  } 
   1.987 +  var num=  strJSON.length;
   1.988 +  strJSON=strJSON.substr(0, num-1);
   1.989 +
   1.990 +  strJSON += '}';
   1.991 +
   1.992 +  return strJSON;
   1.993 +} 
   1.994 \ No newline at end of file