laserkard: onlypaths/js/onlypaths.js annotate

annotate onlypaths/js/onlypaths.js @ 59:3b429e91982b laserkard

[svn r60] done with kevin session

author	rlm
date	Sun, 14 Mar 2010 03:08:07 -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(u1u1+u2u2);
rlm@46	827 var mv= Math.sqrt(v1v1+v2v2);
rlm@46	828
rlm@46	829 var pesc= u1v1+u2v2;
rlm@46	830 //var ang=Math.acos(pesc/(mumv))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+cq;
rlm@46	851 pmdy= (1-q)b+dq;
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 = Ax1+By1
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 = A1B2 - A2B1
rlm@46	879 if(det == 0){
rlm@46	880 //Lines are parallel
rlm@46	881 }else{
rlm@46	882 double x = (B2C1 - B1C2)/det
rlm@46	883 double y = (A1C2 - A2C1)/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+nc;
rlm@46	898 i2ry= (1-n)b+nd;
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+nc;
rlm@46	906 i2ry=(1-n)b+nd;
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 - v1na = 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 }