Mercurial > laserkard

annotate onlypaths/js/onlypaths.js @ 74:24d5d4221b42 laserkard

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