Mercurial > laserkard

     1 /*----------------------------------------------------------------------------

     2  ONLYPATHS 0.1 

     3  from

     4  RICHDRAW 1.0

     5  Vector Graphics Drawing Script

     6  -----------------------------------------------------------------------------

     7  Created by Mark Finkle (mark.finkle@gmail.com)

     8  Implementation of simple vector graphic drawing control using SVG or VML.

     9  -----------------------------------------------------------------------------

    10  Copyright (c) 2006 Mark Finkle  

    11                2008 Antimatter15  

    12                2008 Josep_ssv

    13 

    14  This program is  free software;  you can redistribute  it and/or  modify it

    15  under the terms of the MIT License.

    16 

    17  Permission  is hereby granted,  free of charge, to  any person  obtaining a

    18  copy of this software and associated documentation files (the "Software"),

    19  to deal in the  Software without restriction,  including without limitation

    20  the  rights to use, copy, modify,  merge, publish, distribute,  sublicense,

    21  and/or  sell copies  of the  Software, and to  permit persons to  whom  the

    22  Software is  furnished  to do  so, subject  to  the  following  conditions:

    23  The above copyright notice and this  permission notice shall be included in

    24  all copies or substantial portions of the Software.

    25 

    26  THE SOFTWARE IS PROVIDED "AS IS",  WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

    27  IMPLIED,  INCLUDING BUT NOT LIMITED TO  THE WARRANTIES  OF MERCHANTABILITY,

    28  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

    29  AUTHORS OR  COPYRIGHT  HOLDERS BE  LIABLE FOR  ANY CLAIM,  DAMAGES OR OTHER

    30  LIABILITY, WHETHER  IN AN  ACTION OF CONTRACT, TORT OR  OTHERWISE,  ARISING

    31  FROM,  OUT OF OR  IN  CONNECTION  WITH  THE  SOFTWARE OR THE  USE OR  OTHER

    32  DEALINGS IN THE SOFTWARE.

    33  -----------------------------------------------------------------------------

    34  Dependencies: (SVG or VML rendering implementations)

    35  History:

    36  2006-04-05 | Created richdraw.js  

    37  2008       | Update content and added framework ExtJS    

    38  2008-06-08 | Rename onlypaths.js   

    39  --------------------------------------------------------------------------*/  

    40  

    41 var xpArray=new Array();

    42 var ypArray=new Array(); 

    43 var setPoints=new Array(); 

    44 

    45 var inout='';//true;

    46 var typeTransform='';

    47 

    48 var contmove=0;  

    49 var zoomx=0;

    50 var zoomy=0;

    51 var zoomscale=1;

    52 var zoommode='frame'; //more minus frame

    53 

    54 //

    55  

    56 var data_path_close=true;

    57 var data_text_family='';

    58 var data_text_size=19

    59 var data_text_messaje='';

    60 var data_image_href='';   

    61  

    62 var numClics=0;  

    63 

    64 ////////////

    65 

    66 function RichDrawEditor(elem, renderer) {

    67  this.container = elem;

    68  this.gridX = 10;

    69  this.gridY = 10;

    70  this.mouseDownX = 0;  

    71  this.mouseDownY = 0;    

    72  this.clicX = 0;  

    73  this.clicY = 0;

    74  this.nowDraw=false;

    75  this.mode = '';

    76  this.fillColor = '';  

    77  this.lineColor = '';

    78  this.lineWidth = '';

    79  this.selected = null;   

    80  this.squareSelect = null;  

    81  this.focusin = null;  

    82  this.lineOpac = 1;

    83  this.fillOpac = 1;

    84  this.gridWidth = 1;

    85  this.opac = 1;          

    86  //++ ;

    87  this.text_messaje="";

    88  this.text_size=19;

    89  this.text_family="Arial";

    90  

    91  this.pathsEdit = false;

    92  this.previusBox=null; 

    93  this.initialPath='';

    94  this.clipboard=null;

    95  this.moveNow=true;

    96  

    97  this.selectedBounds = { x:0, y:0, width:0, height: 0 };

    98  this.onselect = function() {}

    99  this.onunselect = function() {}

   100  

   101  this.logtext = "";

   102  

   103  this.renderer = renderer;

   104  this.renderer.init(this.container);

   105  this.renderer.editor = this;

   106  this.inputxy = [];

   107  this.onInputXY = function(){};

   108   Ext.get(this.container).on('keypress', function(e){alert(e.keyCode);});

   109   

   110  Ext.get(this.container).on( "mousedown", this.onMouseDown,this);

   111  Ext.get(this.container).on( "mouseup", this.onMouseUp,this);  

   112  //Ext.get(this.container).on( "mouseout", this.outShape,this);   

   113  //Ext.get(this.container).on( "mouseover", this.overShape,this);

   114  Ext.get(this.container).on( "mousemove", this.onTranslate,this); 

   115  Ext.get(this.container).on( "dblclick", this.onEndLine,this);

   116  Ext.get(this.container).on( "selectstart", this.onSelectStart,this);

   117   

   118 

   119  //Ext.get(this.container).on("keydown", keypresshandler, this);

   120  //Event.observe(this.container).on( "keydown", keypresshandler,this);        

   121  //Ext.get(this.container).on( "keypress", this.onKeyPress,this); 

   122  //Ext.get(this.container).on('keydown',this.onKeyPress,this); 

   123   

   124 }

   125 

   126 RichDrawEditor.prototype.log = function(logtext){

   127   //this.logtext = logtext

   128   if(document.forms[0].code){

   129     document.forms[0].code.value = logtext

   130   }

   131 }

   132 

   133 

   134 RichDrawEditor.prototype.getshapes = function(){

   135  return this.renderer.getshapes();

   136 }

   137 

   138 RichDrawEditor.prototype.info = function(shape){

   139  return this.renderer.info(shape)

   140 }

   141 

   142 

   143 RichDrawEditor.prototype.clearWorkspace = function() {

   144   this.container.innerHTML = '';

   145 };

   146 

   147 RichDrawEditor.prototype.deleteSelection = function() {

   148  if (this.selected) {

   149    this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));

   150    this.renderer.remove(this.selected);

   151    this.selected = null;

   152  }

   153 };

   154 

   155 RichDrawEditor.prototype.toFront = function(order) {

   156  if (this.selected) { 

   157    this.renderer.index(this.selected, order);

   158  }

   159 };

   160 

   161 RichDrawEditor.prototype.deleteAll = function() {   

   162  this.renderer.removeAll();

   163 };

   164 

   165 

   166 RichDrawEditor.prototype.select = function(elem) {

   167  if (elem == this.selected){  return;  }

   168  this.selected = elem;

   169  this.renderer.showTracker(this.selected,this.pathsEdit);

   170  this.onselect(this);

   171 };

   172 

   173 

   174 RichDrawEditor.prototype.unselect = function() {

   175  if (this.selected) {

   176    this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));

   177    this.selected = null;

   178    this.onunselect(this);

   179   }

   180 };

   181 

   182 RichDrawEditor.prototype.getSelectedElement = function() {

   183  return this.selected;

   184 };

   185 

   186 RichDrawEditor.prototype.toCurve = function() {  

   187  this.renderer.tocurve();

   188 }

   189 

   190 RichDrawEditor.prototype.submitShape = function(data) {  

   191  if (this.mode != 'select') {   

   192    setMode('path', 'Path');  

   193    this.actualStyle();

   194    onColorChange();   

   195    //shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent

   196    //this.selected = this.renderer.datacreate(this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,data);

   197    this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref, data, '', '');

   198 

   199    this.selected.id = 'shape:' + createUUID();

   200    Ext.get(this.selected).on("mousedown", this.onHit,this);   

   201    setMode('select', 'Select'); 

   202  } else {

   203    this.renderer.transformShape(this.selected,data,null); 

   204    this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 

   205    this.renderer.showTracker(this.selected,this.pathsEdit);

   206  }

   207 };

   208 

   209 RichDrawEditor.prototype.setGrid = function(horizontal, vertical) {

   210  this.gridX = horizontal;

   211  this.gridY = vertical;

   212  this.gridWidth = (vertical+horizontal)/2; //average. ideally, it should be the same

   213 };

   214 

   215 

   216 // ++

   217 RichDrawEditor.prototype.actualStyle = function()

   218 {

   219  this.textMessaje=$('option_text_message').value;

   220  this.textSize=parseFloat($('option_text_size').value);

   221  this.textFamily=$('option_text_family').value;

   222  this.pathClose = $('option_path_close').checked; 

   223  this.imageHref = $('option_image_href').value;

   224 

   225  return;

   226 };

   227 

   228 

   229 RichDrawEditor.prototype.editCommand = function(cmd, value)

   230 {

   231  if (cmd == 'mode') 

   232   {

   233    this.mode = value;

   234   }

   235  else if (this.selected == null) 

   236   {  

   237    if (cmd == 'fillcolor') 

   238     {

   239      this.fillColor = value;

   240     }

   241    else if (cmd == 'linecolor') 

   242     {

   243      this.lineColor = value;

   244     }

   245    else if (cmd == 'linewidth') 

   246     {

   247      this.lineWidth = parseInt(value) + 'px';

   248     } 

   249    else if (cmd == 'fillopacity') {

   250      this.fillOpac = parseInt(value);

   251     } 

   252    else if (cmd == 'lineopacity') {

   253      this.lineOpac = parseInt(value);

   254     }

   255   }

   256  else 

   257   {

   258     this.renderer.editCommand(this.selected, cmd, value);

   259   }

   260 }

   261 

   262 

   263 RichDrawEditor.prototype.queryCommand = function(cmd)

   264 {

   265  if (cmd == 'mode') 

   266   {

   267    return this.mode;

   268   }

   269  else if (this.selected == null) 

   270   {

   271    if (cmd == 'fillcolor') 

   272     {

   273      return this.fillColor;

   274     }

   275    else if (cmd == 'linecolor') 

   276     {

   277      return this.lineColor;

   278     }

   279    else if (cmd == 'linewidth') 

   280     {

   281      return this.lineWidth;

   282     }

   283    else if (cmd == 'fillopacity') 

   284     {

   285      return  this.fillOpac;

   286     }

   287    else if (cmd == 'lineopacity') 

   288     {

   289      return  this.fillOpac;

   290     }

   291   }

   292  else 

   293   {

   294    return this.renderer.queryCommand(this.selected, cmd);

   295   }

   296 }

   297 

   298 

   299 

   300 

   301 RichDrawEditor.prototype.onSelectStart = function(event) {

   302   return false

   303 }

   304 

   305 

   306 /////////////////////////////

   307 

   308 

   309  /*

   310 

   311 Event.observe(window, 'load', function() {

   312 Event.observe(document, 'keypress', function(e){

   313 var code;

   314 if (!e) var e = window.event;

   315 if (e.keyCode) code = e.keyCode;

   316 else if (e.which) code = e.which;

   317 var character = String.fromCharCode(code);

   318 alert('Character was ' + character);

   319 });

   320 });

   321 */

   322 

   323 ////////////////////////

   324 /*RichDrawEditor.prototype.outShape = function(event) {  

   325   if(typeTransform=='Translate')

   326    {

   327     typeTransform='';

   328    } 

   329 } 

   330 RichDrawEditor.prototype.overShape = function(event) {  

   331    typeTransform='Translate';

   332   

   333 } 

   334 */

   335 RichDrawEditor.prototype.onMouseDown = function(event) {  

   336  

   337  clockdata();

   338  

   339  //MODE NO SELECT

   340  if (this.mode != 'select') 

   341   {      

   342    var modeUsed=0;     

   343    if (this.mode == 'zoom') 

   344     {     

   345      var offset = Ext.get(this.container).getXY();

   346      var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   347      var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   348      //snappedX*=proporDiagonal;

   349      //snappedY*=proporDiagonal; 

   350      

   351      //snappedX+=marginx;

   352      //snappedY+=marginy;

   353      var width=this.gridWidth;

   354      contmove=0;

   355      this.setGrid(width, width);  

   356      this.unselect(); 

   357      xpArray=new Array();

   358      ypArray=new Array();

   359      this.mouseDownX = zoomx+snappedX;

   360      this.mouseDownY = zoomy+snappedY;   

   361      xpArray.push(this.mouseDownX);

   362      ypArray.push(this.mouseDownY);

   363      if(zoommode=='window'){

   364          this.squareSelect= this.renderer.create('rect', 'none', "#000000", 1, 1, 1, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref,'M0,0 1,1', '', '');

   365          this.squareSelect.id = 'squareSelectID';   

   366          Ext.get(this.squareSelect).on( "mousedown", this.onHit,this);  

   367          Ext.get(this.squareSelect).on( "mousemove", this.onDraw,this);

   368 

   369      }else{

   370         this.renderer.zoom(this.mouseDownX, this.mouseDownY);  

   371       } 

   372      modeUsed=1; 

   373     } //end zoom     

   374    if (this.mode == 'controlpath') 

   375     {

   376      this.actualStyle(); 

   377      onColorChange();         

   378      if(numClics<=0)

   379       {     

   380        this.nowDraw=true;

   381        setPoints=new Array();    

   382        var offset = Ext.get(this.container).getXY();

   383        var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   384        var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   385        //snappedX*=proporDiagonal;

   386        //snappedY*=proporDiagonal;

   387        //snappedX+=marginx;

   388        //snappedY+=marginy;

   389        var width=this.gridWidth;  

   390        contmove=0;

   391        this.setGrid(width, width);  

   392        this.unselect(); 

   393        xpArray=new Array();

   394        ypArray=new Array();

   395        this.mouseDownX = zoomx+snappedX;

   396        this.mouseDownY = zoomy+snappedY;   

   397        xpArray.push(this.mouseDownX);

   398        ypArray.push(this.mouseDownY);

   399        setPoints.push(this.mouseDownX+','+this.mouseDownY); 

   400        // ++ ;

   401         onColorChange();

   402         this.actualStyle();                                                                                                                                                  

   403        // ++ ;                       

   404        //shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent

   405        //this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref, '');

   406 

   407        this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref, 'M0,0 1,1', '', '');

   408               

   409        this.selected.id = 'shape:' + createUUID(); 

   410        Ext.get(this.selected).on( "mousedown", this.onHit,this);  

   411        this.log(this.selected.id);   

   412        

   413        Ext.get(this.selected).on( "dblclick", this.onEndLine,this);  

   414        Ext.get(this.container).on( "mousemove", this.onDraw,this); 

   415        numClics++;

   416      }

   417       else

   418      {  

   419        var coord=this.inputxy;

   420        var X=parseFloat(coord[0]);

   421        var Y=parseFloat(coord[1]); 

   422        setPoints.push(X+','+Y);

   423        this.renderer.clic(this.selected);

   424        numClics++;

   425      }

   426      modeUsed=1; 

   427     } //end mode controlpath

   428    if (modeUsed == 0) 

   429     {   

   430      var offset = Ext.get(this.container).getXY();

   431      var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   432      var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   433      //snappedX*=proporDiagonal;

   434      //snappedY*=proporDiagonal;

   435        //snappedX+=marginx;

   436        //snappedY+=marginy;

   437 

   438      var width=this.gridWidth;

   439      contmove=0; 

   440      this.setGrid(width, width);  

   441      this.unselect(); 

   442      xpArray=new Array();

   443      ypArray=new Array();

   444      this.mouseDownX = zoomx+snappedX;

   445      this.mouseDownY = zoomy+snappedY;   

   446      xpArray.push(this.mouseDownX);

   447      ypArray.push(this.mouseDownY);

   448      this.unselect();   

   449       onColorChange();

   450       this.actualStyle(); 

   451      //this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref,'');

   452      

   453      this.selected = this.renderer.create(this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,this.textMessaje,this.textSize,this.textFamily,this.imageHref,'M0,0 1,1', '', '');

   454      

   455      this.selected.id = 'shape:' + createUUID();   

   456      //-- this.selected.id = this.mode+':' + createUUID();

   457      Ext.get(this.selected).on( "mousedown", this.onHit,this);  

   458      Ext.get(this.container).on( "mousemove", this.onDraw,this);

   459      //Ext.get(this.container).on( "mouseover", this.overShape,this);   

   460      //Ext.get(this.container).on( "mouseout", this.outShape,this); 

   461     }     

   462   }

   463    else   //----- MODE SELECT

   464   {                                            

   465    

   466    var offset = Ext.get(this.container).getXY();

   467    var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   468    var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   469 

   470    //snappedX*=proporDiagonal;

   471    //snappedY*=proporDiagonal;

   472    //snappedX+=marginx;

   473    //snappedY+=marginy;

   474 

   475    // if ((this.mouseDownX != snappedX && this.mouseDownY != snappedY) || typeTransform=='')

   476    if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)

   477     { 

   478       if(this.selected!=null && typeTransform=='Translate' )

   479        {

   480         

   481         Ext.get(this.container).un("mousemove", this.onDrag); 

   482         this.unselect();

   483        }

   484       //typeTransform='';

   485     }     

   486     

   487   // if (typeTransform=='' && (this.mouseDownX != snappedX || this.mouseDownY != snappedY) )    

   488      // { 

   489       //if(typeTransform=='Rotate' || typeTransform=='Translate'){  }else{  

   490         

   491          //this.unselect();           

   492       // }

   493    // } 

   494      //else

   495     //{   

   496      // if(this.nowDraw==true){ alert('Double click, please'); this.onEndLineListener(event); return true;}

   497      //Ext.get(this.container).on( "mouseout", this.onRotate,this);  

   498           

   499          

   500      // if (this.mouseDownX != snappedX || this.mouseDownY != snappedY)

   501      //{  

   502      if(typeTransform=='Translate')

   503       {  

   504        inout='move';//true;   

   505        //Event.observe(this.selected, "mousedown", this.onHit,this);  

   506        //Ext.get(this.container).on( "mousemove", this.onDrag,this);  

   507        this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 

   508 

   509       }

   510      if(typeTransform=='Scale'  || typeTransform=='Rotate') 

   511       {

   512        inout='rotate_escale';//false  

   513        Ext.get(this.container).on( "mousemove", this.onDrag,this);         

   514        Ext.get(this.selected).on( "mousedown", this.onHit,this);  

   515        this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 

   516 

   517        //Ext.get(this.container).on( "mouseover", this.onTranslate,this);  

   518        //Ext.get(this.container).on( "mouseout", this.onRotate,this); 

   519        //this.unselect();   

   520       }  

   521     //} //end typeTransform==''

   522   } //end mode select

   523  return false;

   524 };

   525 

   526 

   527 RichDrawEditor.prototype.onMouseUp = function(event) 

   528 {

   529  //Ext.get(this.selected).un("mousemove",this.onDrag)

   530  

   531    //MODE NO SELECT

   532  if (this.mode != 'select') 

   533   {

   534    //this.renderer.restruct(this.selected);

   535    if(this.mode == 'controlpath') 

   536     {

   537      //Event.observe(this.selected, "mousemove", this.onClic,this);  

   538      //this.renderer.info(this.selected);

   539     }

   540      else

   541     {   

   542      //ZOOM    

   543       if (this.mode == 'zoom') 

   544        {

   545         var offset = Ext.get(this.container).getXY()

   546         var snappedX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);

   547         var snappedY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);

   548        

   549         //snappedX*=proporDiagonal;

   550         //snappedY*=proporDiagonal;

   551        //snappedX+=marginx;

   552        //snappedY+=marginy;

   553         this.renderer.zoom(snappedX, snappedY); 

   554         this.renderer.remove(this.container.ownerDocument.getElementById('squareSelectID'));

   555         Ext.get(this.container).un("mousemove", this.onDraw);  

   556         this.squareSelect = null; 

   557         this.selected = null;   

   558        }else{

   559         Ext.get(this.container).un("mousemove", this.onDraw);  

   560         this.selected = null;   

   561        } 

   562     }

   563   } 

   564    else //MODE SELECT

   565   { 

   566    Ext.get(this.container).un("mousemove", this.onDraw);  //or drag

   567    //Ext.get(this.container).un("mousemove", this.onDrag);  

   568    Ext.get(this.container).un("mousemove", this.onDrag);  

   569 

   570    moveNow=false;   

   571    contmove=0; 

   572    // if(inout=='move' || inout=='rotate_scale' ){

   573    if(typeTransform=="Rotate" || typeTransform=="Scale" ) 

   574     {  

   575       //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));

   576       this.renderer.showTracker(this.selected,this.pathsEdit); 

   577    

   578      //inout='move';//true; 

   579      //this.renderer.restruct(this.selected);

   580      typeTransform=='';

   581     } 

   582    if(typeTransform=="Translate" ) 

   583     { 

   584               

   585      this.renderer.showTracker(this.selected,this.pathsEdit); 

   586      //Ext.get(this.container).un("mousemove", this.renderer.move);    

   587      //Ext.get(this.container).un("mousemove", this.onDrag);  

   588      typeTransform=='';   

   589      //this.renderer.restruct(this.selected); 

   590      //this.unselect();

   591      contmove=0; 

   592      

   593     }

   594    if(inout=='multiSelect')

   595     {

   596       

   597      //inout='move';//true;      

   598     } 

   599     

   600    typeTransform==''; 

   601   }  

   602    //Event.stopObserving(this.container, "mousemove", this.onDraw,this);  

   603 };

   604 

   605 

   606 RichDrawEditor.prototype.onDrag = function(event) {  

   607 

   608   moveNow=true; 

   609   var offset = Ext.get(this.container).getXY();

   610   var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   611   var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   612   //snappedX*=proporDiagonal;

   613   //snappedY*=proporDiagonal;

   614        //snappedX+=marginx;

   615        //snappedY+=marginy;

   616   

   617   var deltaX = snappedX - this.mouseDownX;

   618   var deltaY = snappedY - this.mouseDownY; 

   619    

   620   var modeUsed=0;              

   621   if(this.mode == 'zoom') 

   622    {     

   623         Ext.get(this.container).getXY();

   624         this.renderer.resize(this.squareSelect, this.clicX,this.clicY, zoomx+(this.selectedBounds.x + deltaX), zoomy+(this.selectedBounds.y +deltaY));

   625        //this.renderer.zoom(this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY); 

   626        //this.renderer.zoom(this.mouseDownX, this.mouseDownY);  

   627  

   628           modeUsed=1; 

   629    }

   630   if(this.mode == 'controlpath') 

   631      {  

   632       modeUsed=1; 

   633      }

   634   if(modeUsed==0)

   635    {        

   636            if(inout=='multiSelect'){ 

   637                this.renderer.showMultiSelect(this.mouseDownX, this.mouseDownY);  

   638            }

   639        

   640        

   641            if(typeTransform=="Translate")

   642             {  

   643             Ext.get(this.container).getXY();  

   644               

   645  

   646            //var coord=this.inputxy;

   647 	   //var moveX=parseFloat(coord[0]);

   648 	   //var moveY=parseFloat(coord[1]); 

   649                this.log(this.mouseDownX+' '+event.getXY()[0]+' '+ this.selectedBounds.x +'contmove'+contmove); 

   650                this.renderer.move(this.selected, zoomx+(this.selectedBounds.x + deltaX), zoomy+(this.selectedBounds.y +deltaY),this.clicX,this.clicY);

   651                 //this.renderer.showTracker(this.selected,this.pathsEdit); 

   652                  

   653             }  

   654           

   655                       

   656                if(typeTransform=="Rotate") 

   657                  { 

   658                    this.renderer.rotateShape(this.selected, this.previusBox,deltaX, deltaY);

   659                    //this.renderer.showTracker(this.selected,this.pathsEdit);

   660                  }

   661 

   662               	//if(typeTransform=="Scale") {this.renderer.scale(this.selected, this.previusBox, deltaX, deltaY); }

   663           	if(typeTransform=="Scale") 

   664           	 {

   665           	      this.renderer.scaleShape(this.selected, this.previusBox, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY); 

   666           	      //this.renderer.showTracker(this.selected,this.pathsEdit);

   667           	 }

   668           	//if(typeTransform=="Scale") {this.renderer.scale(this.selected, this.previusBox, this.selectedBounds.width + deltaX, this.selectedBounds.height + deltaY); }

   669           	

   670           	//RichDrawEditor.prototype.onTransform(event);

   671           	

   672              

   673            //} 

   674         

   675     }   

   676  // Update selection tracker

   677  //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));

   678   

   679   //this.renderer.remove(this.container.ownerDocument.getElementById('tracker'));

   680 

   681 // hide_tracker();

   682 };

   683 

   684 

   685 RichDrawEditor.prototype.onResize = function(event) {

   686   var offset = Ext.get(this.container).getXY();

   687   var snappedX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   688   var snappedY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   689   //snappedX*=proporDiagonal;

   690   //snappedY*=proporDiagonal;

   691        //snappedX+=marginx;

   692        //snappedY+=marginy;

   693   var deltaX = snappedX - this.mouseDownX;

   694   var deltaY = snappedY - this.mouseDownY;

   695 

   696   this.renderer.track(handle, deltaX, deltaY);

   697 

   698   // Update selection tracker

   699   show_tracker();

   700 //  hide_tracker();

   701 };

   702 

   703 

   704 RichDrawEditor.prototype.onDraw = function(event) {

   705   if (this.selected == null)

   706    {  

   707        if(this.squareSelect != null)

   708        {

   709         var offset = Ext.get(this.container).getXY()

   710         var snappedX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);

   711         var snappedY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);

   712        

   713         //snappedX*=proporDiagonal;

   714         //snappedY*=proporDiagonal;

   715        //snappedX+=marginx;

   716        //snappedY+=marginy;

   717         

   718         this.renderer.resize(this.squareSelect, this.mouseDownX, this.mouseDownY, snappedX, snappedY);

   719 

   720        }else{

   721         return;

   722        }

   723    }else{

   724         var offset = Ext.get(this.container).getXY()

   725         var snappedX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);

   726         var snappedY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);

   727        

   728         //snappedX*=proporDiagonal;

   729         //snappedY*=proporDiagonal; 

   730        //snappedX+=marginx;

   731        //snappedY+=marginy;

   732         

   733         this.renderer.resize(this.selected, this.mouseDownX, this.mouseDownY, snappedX, snappedY);

   734   }

   735 };

   736 

   737 RichDrawEditor.prototype.onRotate = function(event) {

   738   if (this.selected == null)

   739    {

   740      

   741    }else{      

   742          //   this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 

   743         //document.getElementById('richdraw').style.cursor='e-resize';

   744          

   745          //alert('chao');

   746          //inout=false; 

   747           

   748         //return;

   749    }

   750 };

   751 

   752 RichDrawEditor.prototype.onScale = function(event) {

   753   if (this.selected == null)

   754    {

   755      

   756    }else{      

   757          //document.getElementById('richdraw').style.cursor='e-resize';

   758          //alert('chao');

   759          //inout=false; 

   760           

   761         //return;

   762    }

   763 };

   764 

   765 RichDrawEditor.prototype.onTransform = function(event) {

   766   if (this.selected == null)

   767    {

   768      

   769    }else{  

   770      	//if(typeTransform=="rotate") {this.renderer.rotate(this.selected, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY);}

   771   	//if(typeTransform=="scale") {this.renderer.scale(this.selected, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY); }

   772   

   773   }

   774 };

   775 

   776 RichDrawEditor.prototype.onTranslate = function(event) {

   777   if (this.selected == null)

   778    {

   779     

   780    }else{  

   781       // document.getElementById('richdraw').style.cursor='move';

   782         //alert('hello');

   783          //inout=true;    

   784       

   785         //return;

   786    } 

   787    var offset = Ext.get(this.container).getXY()

   788           // var offset = Ext.get(this.container).getXY();

   789         var x = zoomx+Math.round(event.getXY()[0] - offset[0]);

   790         var y = zoomy+Math.round(event.getXY()[1] - offset[1]);

   791 

   792    //var x= parseFloat(event.getXY()[0]); 

   793    //var y= parseFloat(event.getXY()[1]); 

   794    

   795 

   796    this.inputxy = [x,y]

   797    this.onInputXY(x,y); 

   798    

   799    //Ext.get(this.container).getXY(); ;//

   800 };                                       

   801 

   802 

   803 RichDrawEditor.prototype.onHit = function(event) {

   804 //console.log("AAH HIT!!!!")

   805  if(this.mode == 'select') 

   806   {   

   807     

   808     //event.cancelBubble =false;

   809     // We've handled this event.  Don't let anybody else see it.  

   810    if (event.stopPropagation) event.stopPropagation(); // DOM Level 2

   811    else event.cancelBubble = true; // IE

   812    // Now prevent any default action.

   813    if (event.preventDefault) event.preventDefault(); // DOM Level 2

   814    else event.returnValue = false; // IE      

   815    

   816    if(inout=='multiSelect')

   817     {   

   818       //Ext.get(this.container).on( "mousemove", this.onDrag,this);   

   819       //Ext.get(this.container).on( "mouseup", this.onMouseUp,this);   

   820  

   821     }

   822      else

   823     { 

   824     

   825       Ext.get(this.container).un("mousemove", this.onDrag); 

   826       //this.unselect();    

   827      typeTransform="Translate";

   828      

   829     /* //this.previusBox=this.selected;      

   830      this.select(Event.element(event));

   831      this.selectedBounds = this.renderer.bounds(this.selected);

   832      //document.forms[0].code.value=shape(c,this.selected);

   833      var offset = Ext.get(this.container).getXY();

   834      this.mouseDownX = Math.round((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX;

   835      this.mouseDownY = Math.round((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY;

   836      this.renderer.info(this.selected);

   837      Ext.get(this.container).on( "mousemove", this.onDrag,this);    

   838      //Ext.get(this.container).on( "mouseover", noselect);  

   839      Ext.get(this.container).on( "mouseout", this.onMouseUp,this); 

   840      //Ext.get(this.container).on( "mouseup", this.onMouseUp,this); 

   841      //typeTransform=="Translate";  

   842      //if(typeTransform=="Rotate") {this.renderer.rotate(this.selected, this.previusBox,2, 2);}

   843     */

   844         //var width = parseFloat(widths.options[widths.selectedIndex].value);   

   845        

   846      contmove=0;

   847      //this.setGrid(this.lineWidth, width);  

   848      var width=this.gridWidth;

   849          

   850      this.setGrid(width, width);  

   851      

   852     this.select(event.getTarget()); 

   853     this.previusBox=this.selected;     

   854     

   855     //++

   856     this.renderer.getProperties(this.selected);

   857     var offset = Ext.get(this.container).getXY(); 

   858  

   859     this.selectedBounds = this.renderer.bounds(this.selected);

   860     //document.forms[0].code.value=shape(c,this.selected);

   861     //var snappedX = Math.round((event.getXY()[0] - offset[0]));

   862     //var snappedY = Math.round((event.getXY()[1] - offset[1]));

   863 

   864            //offset[0]-=marginx;

   865            //offset[1]-=marginy;    

   866    var x =offset[0];//parseInt(this.selected.offsetLeft);//this.selectedBounds.x-event.getXY()[0];//this.inputxy[0]+ offset[0];//Math.round(event.getXY()[0] - offset[0]);

   867    var y =offset[1];//$(this.selected.id).offsetTop;;//parseInt(this.selected.offsetTop);//this.selectedBounds.y-event.getXY()[1];//this.inputxy[1]+ offset[1];//+Math.round(event.getXY()[1] - offset[1]);

   868    //alert(x+' '+y)    

   869     this.mouseDownX =x;// offset[0];//zoomx+snappedX;

   870     this.mouseDownY =y;//  offset[1];//zoomy+snappedY;   

   871     //objectOffset(this.selected)

   872    // this.mouseDownX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);

   873     //this.mouseDownY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);

   874     this.log(this.gridX);

   875     this.renderer.info(this.selected); 

   876     if(this.container.ownerDocument.getElementById('tracker'))

   877     {

   878      this.renderer.remove(this.container.ownerDocument.getElementById('tracker')); 

   879     } 

   880     Ext.get(this.container).on( "mousemove", this.onDrag,this);   

   881 

   882     

   883     }

   884   }

   885    else

   886   {

   887     //this.selectedBounds = this.renderer.bounds(this.selected);

   888     var offset = Ext.get(this.container).getXY(); 

   889     

   890     this.mouseDownX = Math.round(zoomx+((event.getXY()[0] - offset[0]) / this.gridX) * this.gridX);

   891     this.mouseDownY = Math.round(zoomy+((event.getXY()[1] - offset[1]) / this.gridY) * this.gridY);

   892     Ext.get(this.container).on( "mousemove", this.onDrag,this);   

   893     

   894   }

   895 };  

   896 

   897 

   898 RichDrawEditor.prototype.onClic = function(event) {

   899  if(this.mode == 'controlpath') 

   900   { 

   901      

   902     //Ext.get(this.container).on( "mouseout", this.onMouseUp,this);     

   903   

   904     //Ext.get(this.container).on( "mousemove", this.onDrag,this);   

   905 

   906      //Ext.get(this.container).on( "mouseout", this.onDrag,this); 

   907   }

   908    else

   909   {

   910        

   911   }

   912 };   

   913 

   914 RichDrawEditor.prototype.reflect = function(HorV) {

   915  this.selected=this.renderer.reflect(HorV);

   916  this.selected.id = 'shape:' + createUUID();

   917  Ext.get(this.selected).on( "mousedown", this.onHit,this);  

   918 }

   919 

   920 RichDrawEditor.prototype.onEndLine = function(event) {   

   921   

   922  if(this.mode == 'controlpath') 

   923   {      // alert('hello');   

   924         numClics=0;

   925          //this.selected = null; 

   926 

   927          //Event.stopObserving(this.container, "mousemove", this.onDraw,this); 

   928             

   929             

   930 

   931             //Event.observe(this.selected, "mousedown", this.onHit,this);  

   932             //Ext.get(this.container).on( "mousemove", this.onDraw,this);  

   933           

   934             //Event.stopObserving(this.selected, "dblclick", this.onEndLine,this);

   935             //Event.stopObserving(this.container, "mousemove", this.onDraw,this);  

   936  

   937           this.selected = null;   

   938 

   939 

   940          //this.unselect(); 

   941          

   942   }

   943    else

   944   {

   945   this.nowDraw=false;     

   946   }

   947 };

   948 function noselect(){

   949     //typeTransform="";    

   950 }

   951 

   952 function createUUID()

   953 {

   954   return [4, 2, 2, 2, 6].map(function(length) {

   955     var uuidpart = "";

   956     for (var i=0; i<length; i++) {

   957       var uuidchar = parseInt((Math.random() * 256)).toString(16);

   958       if (uuidchar.length == 1)

   959         uuidchar = "0" + uuidchar;

   960       uuidpart += uuidchar;

   961     }

   962     return uuidpart;

   963   }).join('-');

   964 }

   965 

   966 

   967 //----------------------------------------------------------------------------

   968 // AbstractRenderer

   969 //

   970 // Abstract base class defining the drawing API. Can not be used directly.

   971 //----------------------------------------------------------------------------

   972 

   973 function AbstractRenderer() {

   974 

   975 };

   976 

   977 AbstractRenderer.prototype.init = function(elem) {};

   978 AbstractRenderer.prototype.bounds = function(shape) { return { x:0, y:0, width:0, height: 0 }; };

   979 AbstractRenderer.prototype.create = function(shape, fillColor, lineColor, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, transform) {};

   980 AbstractRenderer.prototype.datacreate = function(fillColor, lineColor, lineWidth, fillOpac, strokeOpac, left, top, width, height,data) {};

   981 AbstractRenderer.prototype.index = function(shape, order) {};

   982 AbstractRenderer.prototype.remove = function(shape) {}; 

   983 AbstractRenderer.prototype.copy = function(shape) {};

   984 AbstractRenderer.prototype.paste = function(left,top) {};

   985 AbstractRenderer.prototype.duplicate = function(shape) {};

   986 AbstractRenderer.prototype.move = function(shape, left, top) {};  

   987 AbstractRenderer.prototype.endmove = function(shape) {};

   988 AbstractRenderer.prototype.transform= function(shape, left, top) {};

   989 AbstractRenderer.prototype.scale = function(shape, left, top) {};

   990 AbstractRenderer.prototype.rotate = function(shape, left, top) {};

   991 AbstractRenderer.prototype.track = function(shape) {}; 

   992 AbstractRenderer.prototype.restruct = function(shape) {};

   993 AbstractRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {};

   994 AbstractRenderer.prototype.editCommand = function(shape, cmd, value) {};

   995 AbstractRenderer.prototype.queryCommand = function(shape, cmd) {};

   996 AbstractRenderer.prototype.showTracker = function(shape,value) {};

   997 AbstractRenderer.prototype.getMarkup = function() { return null; };

   998 AbstractRenderer.prototype.info = function(shape){}; 

   999 AbstractRenderer.prototype.editShape = function(shape,data){};

  1000 AbstractRenderer.prototype.onKeyPress = function(){};

  1001 

  1002 AbstractRenderer.prototype.getshapes = function(){};

  1003 

  1004 

  1005 //-----------------------------

  1006 // Geometry - string functions

  1007 //-----------------------------   

  1008 

  1009 //two point angle  deg

  1010 function ang2v(x1,y1,x2,y2)

  1011 {

  1012      /*

  1013       var k=0;

  1014 

  1015       var sum1=u1+v1; 

  1016       var sum2=u2+v2;    

  1017 

  1018       var res1=u1-v1;  

  1019       var res2=u2-v2;   

  1020 

  1021      var ku1=k*u1; 

  1022       var ku2=k*u2;   

  1023 

  1024        var mu= Math.sqrt(u1*u1+u2*u2); 

  1025        var mv= Math.sqrt(v1*v1+v2*v2);

  1026 

  1027        var pesc= u1*v1+u2*v2; 

  1028        //var ang=Math.acos(pesc/(mu*mv))*180/Math.PI;

  1029        var ang=Math.acos(pesc/(mu*mv));  

  1030        */ 

  1031         var resx=x2-x1;  

  1032       var resy=y2-y1;   

  1033        var ang=Math.atan2(resy,resx); 

  1034        //alert(ang);

  1035        return ang;

  1036 }     

  1037 

  1038 function dist2p(a,b,c,d) 

  1039  {

  1040    with (Math) 

  1041     {

  1042         //var d2p=sqrt(abs(((d-b)*(d-b) )+((c-a)*(c-a))));   //decimas(d2p,3);     return d2p;

  1043           return sqrt(abs((d-b)*(d-b)+ (c-a)*(c-a)));

  1044 

  1045     }

  1046  }

  1047 function pmd2pb(a,b,c,d,q) {

  1048 	pmdx= (1-q)*a+c*q;

  1049 	pmdy= (1-q)*b+d*q;

  1050 //pmdx=decimas(pmdx,3);

  1051 //pmdy=decimas(pmdy,3);

  1052 var cad=pmdx+','+pmdy;

  1053 var sol= new Array();

  1054 sol= [cad,pmdx,pmdy];

  1055 return sol

  1056 

  1057 } 

  1058 

  1059 function getAngle(dx,dy) {

  1060   var angle = Math.atan2(dy, dx);

  1061   //angle *= 180 / Math.PI;

  1062   return angle;  

  1063   

  1064 }

  1065 

  1066 /*

  1067 

  1068 A = y2-y1

  1069 B = x1-x2

  1070 C = A*x1+B*y1

  1071 Regardless of how the lines are specified, you should be able to generate two different points along the line, and then generate A, B and C. Now, lets say that you have lines, given by the equations:

  1072 A1x + B1y = C1

  1073 A2x + B2y = C2

  1074 To find the point at which the two lines intersect, we simply need to solve the two equations for the two unknowns, x and y.

  1075 

  1076     double det = A1*B2 - A2*B1

  1077     if(det == 0){

  1078         //Lines are parallel

  1079     }else{

  1080         double x = (B2*C1 - B1*C2)/det

  1081         double y = (A1*C2 - A2*C1)/det

  1082     }

  1083 

  1084 

  1085 

  1086 

  1087 */  

  1088 // interseccion 2 rectas

  1089 function ntrsccn2rb(a,b,c,d,e,f,g,h){

  1090  var solution= new Array();

  1091  var i2rx=0;var i2ry=0;

  1092  var w= (c-a)*(f-h)-(e-g)*(d-b);

  1093  if(w==0){

  1094   n=1;

  1095   i2rx= (1-n)*a+n*c;

  1096   i2ry= (1-n)*b+n*d;

  1097   solution= ['',i2rx,i2ry];  

  1098   //Lines are parallel

  1099   return solution

  1100   //return (i2rx+' '+i2ry);

  1101  }

  1102  var n = (((e-a)*(f-h))-((e-g)*(f-b)))/w;

  1103  i2rx=(1-n)*a+n*c;

  1104  i2ry=(1-n)*b+n*d;

  1105  //return (i2rx+' '+i2ry);

  1106  solution= ['',i2rx,i2ry];

  1107  return solution

  1108 

  1109 }

  1110 

  1111 //ecuacion implicita de la recta

  1112 function ccnmplct(a,b,c,d) { 

  1113   var solution= new Array();

  1114   //a1 a2, b1 b2    vector direccion b1-a1 , b2-a2

  1115   var v1m=c-a;

  1116   var v1n=d-b;

  1117   var c1x= v1m;

  1118   var c1y= v1n;

  1119   // ecuacion continua (x - a) /c -a =  (y - b)/d - b

  1120   //(x - a) * v1n =  (y - b) * v1m 

  1121   //x * v1n - v1n*a = y * v1m - b* v1m

  1122   eia= v1n ;

  1123   eib= - v1m;

  1124   eic=  (b* v1m) - ( v1n*a)

  1125   solution= [eia,eib,eic];

  1126   return solution

  1127 }

  1128 function GetString(source, start, end){

  1129 var st = source.indexOf(start) + start.length;

  1130 var en = source.indexOf(end, start);

  1131  return source.substring(st, en);//trimAll(source.substring(st, en));

  1132 }

  1133  

  1134 function deg2rad(angle){

  1135 return (angle/180) * Math.PI;

  1136 } 

  1137  

  1138 String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,'') }

  1139  

  1140 function objectOffset(obj)

  1141 {

  1142  var posX=0;

  1143  var posY=0;

  1144  if(typeof(obj.offsetParent) != "undefined")

  1145   {

  1146    for(var x=0, y=0;obj; obj=obj.offsetParent)

  1147    {

  1148     x += obj.offsetLeft;

  1149     y += obj.offsetTop;

  1150    }

  1151    posX=x;

  1152    posY=y;

  1153   }

  1154    else

  1155   {

  1156    posX=obj.offsetLeft;

  1157    posY=obj.offsetTop;

  1158   }

  1159  alert(obj.id+" "+"X: "+posX+" Y: "+posY);

  1160 }

  1161 

  1162 function generateJSON(cssEnv)

  1163 {    

  1164  //string=string.replace(/;/g,'",') ;

  1165  //string=string.replace(/:/g,':"') ; 

  1166  //style="fill:#7e0000;fill-opacity:1" 

  1167  

  1168  var css=cssEnv.split(';')

  1169 

  1170   var strJSON = '{';

  1171   ch = ',';

  1172   for (i = 0 ; i < css.length; i++)

  1173   { 

  1174    var data=css[i].split(':'); 

  1175    if(data[0]!=''){ 

  1176      //if(i == (css.length-2)){   ch = ''; }   

  1177      strJSON += "'"+data[0].trim()+"':'"+data[1].trim()+"'"+",";

  1178    } 

  1179       

  1180    

  1181   } 

  1182   var num=  strJSON.length;

  1183   strJSON=strJSON.substr(0, num-1);

  1184 

  1185   strJSON += '}';

  1186 

  1187   return strJSON;

  1188 }