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  

   107  this.initialUnit=1;

   108  this.unit=this.initialUnit; 

   109 

   110  

   111  this.inputxy = []; 

   112  this.viewInputxy = [];      

   113  this.onViewInputXY = function(){};

   114  this.onInputXY = function(){};   

   115  

   116  

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

   118   

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

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

   121  Ext.get(this.container).on( "mousemove", this.onMouseMove,this); 

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

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

   124   

   125 

   126   

   127 }

   128 

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

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

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

   132   }

   133 }

   134 

   135 

   136 RichDrawEditor.prototype.getshapes = function(){

   137  return this.renderer.getshapes();

   138 }

   139 

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

   141  return this.renderer.info(shape)

   142 }

   143 

   144 

   145 RichDrawEditor.prototype.clearWorkspace = function() {

   146   this.container.innerHTML = '';

   147 };

   148 

   149 RichDrawEditor.prototype.deleteSelection = function() {

   150  if (this.selected) {

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

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

   153    this.selected = null;

   154  }

   155 };

   156 

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

   158  if (this.selected) { 

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

   160  }

   161 };

   162 

   163 RichDrawEditor.prototype.deleteAll = function() {   

   164  this.renderer.removeAll();

   165 };

   166 

   167 

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

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

   170  this.selected = elem;

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

   172  this.onselect(this);

   173 };

   174 

   175 

   176 RichDrawEditor.prototype.unselect = function() {

   177  if (this.selected) {

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

   179    this.selected = null;

   180    this.onunselect(this);

   181   }

   182 };

   183 

   184 RichDrawEditor.prototype.getSelectedElement = function() {

   185  return this.selected;

   186 };

   187 

   188 RichDrawEditor.prototype.toCurve = function() {  

   189  this.renderer.tocurve();

   190 }

   191 

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

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

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

   195    this.actualStyle();

   196    onColorChange();   

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

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

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

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

   201  } else {

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

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

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

   205  }

   206 };

   207 

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

   209  this.gridX = horizontal;

   210  this.gridY = vertical;

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

   212 };

   213 

   214 

   215 

   216 RichDrawEditor.prototype.actualStyle = function()

   217 {

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

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

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

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

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

   223 

   224  return;

   225 };

   226 

   227 

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

   229 {

   230  if (cmd == 'mode') 

   231   {

   232    this.mode = value;

   233   }

   234  else if (this.selected == null) 

   235   {  

   236    if (cmd == 'fillcolor') 

   237     {

   238      this.fillColor = value;

   239     }

   240    else if (cmd == 'linecolor') 

   241     {

   242      this.lineColor = value;

   243     }

   244    else if (cmd == 'linewidth') 

   245     {

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

   247     } 

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

   249      this.fillOpac = parseInt(value);

   250     } 

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

   252      this.lineOpac = parseInt(value);

   253     }

   254   }

   255  else 

   256   {

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

   258   }

   259 }

   260 

   261 

   262 RichDrawEditor.prototype.queryCommand = function(cmd)

   263 {

   264  if (cmd == 'mode') 

   265   {

   266    return this.mode;

   267   }

   268  else if (this.selected == null) 

   269   {

   270    if (cmd == 'fillcolor') 

   271     {

   272      return this.fillColor;

   273     }

   274    else if (cmd == 'linecolor') 

   275     {

   276      return this.lineColor;

   277     }

   278    else if (cmd == 'linewidth') 

   279     {

   280      return this.lineWidth;

   281     }

   282    else if (cmd == 'fillopacity') 

   283     {

   284      return  this.fillOpac;

   285     }

   286    else if (cmd == 'lineopacity') 

   287     {

   288      return  this.fillOpac;

   289     }

   290   }

   291  else 

   292   {

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

   294   }

   295 }

   296 

   297 

   298 

   299 

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

   301   return false

   302 }

   303 

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

   305  

   306  clockdata();

   307  

   308  //MODE NO SELECT

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

   310   {      

   311    var modeUsed=0;     

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

   313     {     

   314      var width=this.gridWidth;

   315      contmove=0;

   316      this.setGrid(width, width);  

   317      this.unselect(); 

   318      xpArray=new Array();

   319      ypArray=new Array();

   320      this.mouseDownX = this.viewInputxy[0];

   321      this.mouseDownY = this.viewInputxy[1];   

   322      xpArray.push(this.mouseDownX);

   323      ypArray.push(this.mouseDownY);

   324      if(zoommode=='window'){

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

   326          this.squareSelect.id = 'squareSelectID';   

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

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

   329 

   330      }else{

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

   332       } 

   333      modeUsed=1; 

   334     } //end zoom     

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

   336     {

   337      this.actualStyle(); 

   338      onColorChange();         

   339      if(numClics<=0)

   340       {     

   341        this.nowDraw=true;

   342        setPoints=new Array();    

   343        var width=this.gridWidth;  

   344        contmove=0;

   345        this.setGrid(width, width);  

   346        this.unselect(); 

   347        xpArray=new Array();

   348        ypArray=new Array();

   349        this.mouseDownX =  this.viewInputxy[0];

   350        this.mouseDownY =  this.viewInputxy[1];   

   351        xpArray.push(this.mouseDownX);

   352        ypArray.push(this.mouseDownY);

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

   354        onColorChange();

   355        this.actualStyle();                                                                                                                                                  

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

   357               

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

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

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

   361        

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

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

   364        numClics++;

   365      }

   366       else

   367      {  

   368        var coord=this.viewInputxy;

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

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

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

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

   373        numClics++;

   374      }

   375      modeUsed=1; 

   376     } //end mode controlpath

   377    if (modeUsed == 0) 

   378     {   

   379      var width=this.gridWidth;

   380      contmove=0; 

   381      this.setGrid(width, width);  

   382      this.unselect(); 

   383      xpArray=new Array();

   384      ypArray=new Array();

   385      this.mouseDownX = this.viewInputxy[0];   

   386      this.mouseDownY= this.viewInputxy[1];

   387   

   388      xpArray.push(this.mouseDownX);

   389      ypArray.push(this.mouseDownY);

   390      

   391      this.unselect();   

   392      onColorChange();

   393      this.actualStyle(); 

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

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

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

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

   398     }     

   399   }

   400    else   //----- MODE SELECT

   401   {                                            

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

   403  

   404   

   405    var snappedX=this.viewInputxy[0];

   406    var snappedY=this.viewInputxy[1]

   407 

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

   409     { 

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

   411        {

   412         

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

   414         this.unselect();

   415        }

   416     }     

   417     

   418      if(typeTransform=='Translate')

   419       {  

   420        inout='move';//true;   

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

   422 

   423       }

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

   425       {

   426        inout='rotate_escale';//false  

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

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

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

   430       }  

   431   } //end mode select

   432  return false;

   433 };

   434 

   435 

   436 RichDrawEditor.prototype.onMouseUp = function(event) 

   437 {

   438    //MODE NO SELECT

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

   440   {

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

   442     {    

   443         

   444     }

   445      else

   446     {   

   447      //ZOOM    

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

   449        {

   450         var snappedX=this.viewInputxy[0];

   451         var snappedY=this.viewInputxy[1];

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

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

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

   455         this.squareSelect = null; 

   456         this.selected = null;   

   457        }else{

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

   459         this.selected = null;   

   460        } 

   461     }

   462   } 

   463    else //MODE SELECT

   464   { 

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

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

   467    moveNow=false;   

   468    contmove=0; 

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

   470     {  

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

   472      typeTransform=='';

   473     } 

   474    if(typeTransform=="Translate" ) 

   475     { 

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

   477      typeTransform='';   

   478      contmove=0; 

   479      

   480     }  

   481 

   482    if(inout=='multiSelect')

   483     {

   484 

   485     } 

   486     

   487    typeTransform=''; 

   488   }  

   489 };

   490 

   491 

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

   493 

   494   moveNow=true;  

   495   //var offset = Ext.get(this.selected).getXY()

   496   //var deltaX = this.viewInputxy[0] - (this.viewInputxy[0] - this.mouseDownX);

   497   //var deltaY = this.viewInputxy[1] - (this.viewInputxy[1] - this.mouseDownY);

   498   //var deltaX = offset[0] ;

   499   //var deltaY = offset[1] ; 

   500 

   501   var deltaX = this.viewInputxy[0] ;

   502   var deltaY = this.viewInputxy[1] ; 

   503    var deltaX= this.selectedBounds['x']-this.mouseDownX + this.viewInputxy[0];

   504    var deltaY= this.selectedBounds['y']-this.mouseDownY + this.viewInputxy[1]; 

   505 

   506   //var deltX = this.viewInputxy[0]+(this.mouseDownX-this.viewInputxy[0]);

   507   //var deltY = this.viewInputxy[1]+(this.mouseDownY-this.viewInputxy[1]); 

   508   

   509   var modeUsed=0;              

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

   511    {     

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

   513         this.renderer.resize(this.squareSelect, this.clicX,this.clicY, this.viewInputxy[0], this.viewInputxy[1]);

   514         modeUsed=1; 

   515    }

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

   517      {  

   518       modeUsed=1; 

   519      } 

   520   

   521   if(modeUsed==0)

   522    {        

   523     if(inout=='multiSelect')

   524      { 

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

   526      }

   527     if(typeTransform=="Translate")

   528      {  

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

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

   531       //this.renderer.move(this.selected, this.viewInputxy[0],this.viewInputxy[1],this.clicX,this.clicY);

   532       //this.renderer.move(this.selected, this.viewInputxy[0],this.viewInputxy[1], this.mouseDownX, this.mouseDownY);

   533       this.renderer.move(this.selected, deltaX, deltaY, this.mouseDownX, this.mouseDownY);

   534      }  

   535     if(typeTransform=="Rotate") 

   536      { 

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

   538      }

   539     if(typeTransform=="Scale") 

   540      {

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

   542      }

   543     }   

   544 };

   545 

   546 

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

   548   var deltaX = this.viewInputxy[0] - this.mouseDownX;

   549   var deltaY = this.viewInputxy[1] - this.mouseDownY;

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

   551   show_tracker();

   552 };

   553 

   554 

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

   556   if (this.selected == null)

   557    {  

   558     if(this.squareSelect != null)

   559      {

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

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

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

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

   564       }

   565        else

   566       {

   567         return;

   568       }

   569     }

   570      else

   571     {   

   572   

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

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

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

   576       

   577     }

   578 };

   579 

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

   581   if (this.selected == null)

   582    {

   583      

   584    }else{      

   585    }

   586 };

   587 

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

   589   if (this.selected == null)

   590    {

   591      

   592    }else{      

   593    }

   594 };

   595 

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

   597   if (this.selected == null)

   598    {

   599      

   600    }else{  

   601   }

   602 };

   603 

   604 RichDrawEditor.prototype.onMouseMove = function(event) {

   605  var offset = Ext.get(c.container).getXY()

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

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

   608  if (ie || opera) 

   609   {  

   610    proporx =1;

   611    propory =1;

   612    zoominit2='1 1 1 1';

   613    this.inputxy = [x,y];    

   614    this.viewInputxy = [x,y];  

   615    this.onInputXY(x,y);   

   616    this.onViewInputXY(x,y);

   617   }

   618    else

   619   {

   620    ////////////

   621    

   622     var X = x ; // x cursor on canvas

   623     var Y = y ; // y cursor on canvas

   624 

   625     var Ex = parseFloat(tokensCanvas[2]) ; // (end) width canvas. Corner down-left

   626     var Ey = parseFloat(tokensCanvas[3]) ; // (end) height canvas. Corner up-right

   627 

   628     var zoomX = 0 ; // ? x unknown

   629     var zoomY = 0 ; // ? y unknown

   630 

   631     var sx = parseFloat(tokensZoom[0]) ; // (start) x origin of the coord zoom.

   632     var sy = parseFloat(tokensZoom[1]) ; // (start) y origin of the coord zoom.

   633     var Wz = parseFloat(tokensZoom[2]) ; // width zoom

   634     var Hz = parseFloat(tokensZoom[3]) ; // height zoom

   635 

   636     var ex = parseFloat(sx + Wz) ; // (end) x width zoom. Corner down-left

   637     var ey = parseFloat(sy + Hz) ; // (end) y height zoom. Corner up-right

   638 

   639     var r = X / Ex ; // 0 to 1

   640     var s = Y / Ey ; // 0 to 1

   641     this.unit = this.initialUnit * (Hz/Ey) ; // 0 to 1

   642     zoomX= (1 - r) * sx + ex * r;

   643     zoomY= (1 - s) * sy + ey * s; 

   644    

   645    this.inputxy = [x,y];    

   646    this.viewInputxy = [zoomX,zoomY];  

   647    this.onInputXY(x,y);  

   648    this.onViewInputXY(zoomX,zoomY);  

   649   }

   650    

   651 };                                       

   652 

   653 

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

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

   656 

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

   658   {   

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

   660    else event.cancelBubble = true; // IE

   661    // Now prevent any default action.

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

   663    else event.returnValue = false; // IE      

   664    

   665    if(inout=='multiSelect')

   666     {   

   667  

   668     }

   669      else

   670     { 

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

   672      typeTransform="Translate";

   673      contmove=0;

   674      var width=this.gridWidth;

   675          

   676      this.setGrid(width, width);  

   677      

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

   679      this.previusBox=this.selected;     

   680     

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

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

   683  

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

   685      

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

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

   688      this.log(this.gridX);

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

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

   691       {

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

   693       } 

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

   695     }

   696   }

   697    else

   698   {

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

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

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

   702     

   703   }

   704 };  

   705 

   706 

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

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

   709   {     

   710   

   711   }

   712    else

   713   {

   714        

   715   }

   716 };   

   717 

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

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

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

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

   722 }

   723 

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

   725   

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

   727   {     

   728         //alert(numClics);

   729         numClics=0;    

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

   731          //Ext.get(this.selected).un( "mousedown", this.onHit,this);  

   732          //Ext.get(this.selected).un( "dblclick", this.onEndLine);  

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

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

   735          // Ext.get(this.selected).un( "mousedown", this.onHit);  

   736    

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

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

   739         this.selected = null;   

   740         

   741           

   742   }

   743    else

   744   {   

   745   

   746    this.nowDraw=false;   

   747    typeTransform='';   

   748   }

   749 };

   750 

   751 function noselect(){

   752 }

   753 

   754 function createUUID()

   755 {

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

   757     var uuidpart = "";

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

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

   760       if (uuidchar.length == 1)

   761         uuidchar = "0" + uuidchar;

   762       uuidpart += uuidchar;

   763     }

   764     return uuidpart;

   765   }).join('-');

   766 }

   767 

   768 

   769 //----------------------------------------------------------------------------

   770 // AbstractRenderer

   771 //

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

   773 //----------------------------------------------------------------------------

   774 

   775 function AbstractRenderer() {

   776 

   777 };

   778 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   803 

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

   805 

   806 

   807 //-----------------------------

   808 // Geometry - string functions

   809 //-----------------------------   

   810 

   811 //two point angle  deg

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

   813 {

   814      /*

   815       var k=0;

   816 

   817       var sum1=u1+v1; 

   818       var sum2=u2+v2;    

   819 

   820       var res1=u1-v1;  

   821       var res2=u2-v2;   

   822 

   823      var ku1=k*u1; 

   824       var ku2=k*u2;   

   825 

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

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

   828 

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

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

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

   832        */ 

   833         var resx=x2-x1;  

   834       var resy=y2-y1;   

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

   836        //alert(ang);

   837        return ang;

   838 }     

   839 

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

   841  {

   842    with (Math) 

   843     {

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

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

   846 

   847     }

   848  }

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

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

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

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

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

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

   855 var sol= new Array();

   856 sol= [cad,pmdx,pmdy];

   857 return sol

   858 

   859 } 

   860 

   861 function getAngle(dx,dy) {

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

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

   864   return angle;  

   865   

   866 }

   867 

   868 /*

   869 

   870 A = y2-y1

   871 B = x1-x2

   872 C = A*x1+B*y1

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

   874 A1x + B1y = C1

   875 A2x + B2y = C2

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

   877 

   878     double det = A1*B2 - A2*B1

   879     if(det == 0){

   880         //Lines are parallel

   881     }else{

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

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

   884     }

   885 

   886 

   887 

   888 

   889 */  

   890 // interseccion 2 rectas

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

   892  var solution= new Array();

   893  var i2rx=0;var i2ry=0;

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

   895  if(w==0){

   896   n=1;

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

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

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

   900   //Lines are parallel

   901   return solution

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

   903  }

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

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

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

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

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

   909  return solution

   910 

   911 }

   912 

   913 //ecuacion implicita de la recta

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

   915   var solution= new Array();

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

   917   var v1m=c-a;

   918   var v1n=d-b;

   919   var c1x= v1m;

   920   var c1y= v1n;

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

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

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

   924   eia= v1n ;

   925   eib= - v1m;

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

   927   solution= [eia,eib,eic];

   928   return solution

   929 }

   930 function GetString(source, start, end){

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

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

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

   934 }

   935  

   936 function deg2rad(angle){

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

   938 } 

   939  

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

   941  

   942 function objectOffset(obj)

   943 {

   944  var posX=0;

   945  var posY=0;

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

   947   {

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

   949    {

   950     x += obj.offsetLeft;

   951     y += obj.offsetTop;

   952    }

   953    posX=x;

   954    posY=y;

   955   }

   956    else

   957   {

   958    posX=obj.offsetLeft;

   959    posY=obj.offsetTop;

   960   }

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

   962 }

   963 

   964 function generateJSON(cssEnv)

   965 {    

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

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

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

   969  

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

   971 

   972   var strJSON = '{';

   973   ch = ',';

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

   975   { 

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

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

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

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

   980    } 

   981       

   982    

   983   } 

   984   var num=  strJSON.length;

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

   986 

   987   strJSON += '}';

   988 

   989   return strJSON;

   990 }