| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172 | 
							- /**
 
-  * Represents a canvas on which BPMN 2.0 constructs can be drawn.
 
-  * 
 
-  * Some of the icons used are licenced under a Creative Commons Attribution 2.5
 
-  * License, see http://www.famfamfam.com/lab/icons/silk/
 
-  * 
 
-  * @see ProcessDiagramGenerator
 
-  * @author (Java) Joram Barrez
 
-  * @author (Javascript) Dmitry Farafonov
 
-  */
 
-  
 
- //Color.Cornsilk
 
- var ARROW_HEAD_SIMPLE = "simple";
 
- var ARROW_HEAD_EMPTY = "empty";
 
- var ARROW_HEAD_FILL = "FILL";
 
- var MULTILINE_VERTICAL_ALIGN_TOP = "top";
 
- var MULTILINE_VERTICAL_ALIGN_MIDDLE = "middle";
 
- var MULTILINE_VERTICAL_ALIGN_BOTTOM = "bottom";
 
- var MULTILINE_HORIZONTAL_ALIGN_LEFT = "start";
 
- var MULTILINE_HORIZONTAL_ALIGN_MIDDLE = "middle";
 
- var MULTILINE_HORIZONTAL_ALIGN_RIGHT = "end";
 
- // Predefined sized
 
- var TEXT_PADDING = 3;
 
- var ARROW_WIDTH = 4;
 
- var CONDITIONAL_INDICATOR_WIDTH = 16;
 
- var MARKER_WIDTH = 12;
 
- var ANNOTATION_TEXT_PADDING = 7;
 
- // Colors
 
- var TASK_COLOR = Color.OldLace; // original: Color.get(255, 255, 204);
 
- var TASK_STROKE_COLOR = Color.black; /*Color.SlateGrey; */
 
- //var EXPANDED_SUBPROCESS_ATTRS = Color.black; /*Color.SlateGrey; */
 
- var BOUNDARY_EVENT_COLOR = Color.white;
 
- var CONDITIONAL_INDICATOR_COLOR = Color.get(255, 255, 255);
 
- var HIGHLIGHT_COLOR = Color.Firebrick1;
 
- //var SEQUENCEFLOW_COLOR = Color.DimGrey;
 
- var SEQUENCEFLOW_COLOR = Color.black;
 
- var CATCHING_EVENT_COLOR = Color.black; /* Color.SlateGrey; */
 
- var START_EVENT_COLOR = Color.get(251,251,251);
 
- var START_EVENT_STROKE_COLOR = Color.black; /* Color.SlateGrey; */
 
- var END_EVENT_COLOR = Color.get(251,251,251);
 
- //var END_EVENT_STROKE_COLOR = Color.black;
 
- var NONE_END_EVENT_COLOR = Color.Firebrick4;
 
- var NONE_END_EVENT_STROKE_COLOR = Color.Firebrick4;
 
- var ERROR_END_EVENT_COLOR = Color.Firebrick;
 
- var ERROR_END_EVENT_STROKE_COLOR = Color.Firebrick;
 
- //var LABEL_COLOR = Color.get(112, 146, 190);
 
- var LABEL_COLOR = Color.get(72, 106, 150);
 
- // Fonts
 
- var NORMAL_FONT = {font: "10px Arial", opacity: 1, fill: Color.black};
 
- var LABEL_FONT = {font: "11px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR};
 
- var LABEL_FONT_SMOOTH = {font: "10px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR, stroke: LABEL_COLOR, "stroke-width":.4};
 
- var TASK_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
 
- var TASK_FONT_SMOOTH = {font: "11px Arial", opacity: 1, fill: Color.black, stroke: LABEL_COLOR, "stroke-width":.4};
 
- var POOL_LANE_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
 
- var EXPANDED_SUBPROCESS_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
 
- // Strokes
 
- var NORMAL_STROKE = 1;
 
- var SEQUENCEFLOW_STROKE = 1.5;
 
- var SEQUENCEFLOW_HIGHLIGHT_STROKE = 2;
 
- var THICK_TASK_BORDER_STROKE = 2.5;
 
- var GATEWAY_TYPE_STROKE = 3.2;
 
- var END_EVENT_STROKE = NORMAL_STROKE+2;
 
- var MULTI_INSTANCE_STROKE = 1.3;
 
- var EVENT_SUBPROCESS_ATTRS = 	{"stroke": Color.black, "stroke-width": NORMAL_STROKE, "stroke-dasharray": ". "};
 
- //var EXPANDED_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "fill": Color.FloralWhite};
 
- var EXPANDED_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "fill": Color.WhiteSmoke};
 
- var NON_INTERRUPTING_EVENT_STROKE = "- ";
 
- var TASK_CORNER_ROUND = 10;
 
- var EXPANDED_SUBPROCESS_CORNER_ROUND = 10;
 
- // icons
 
- var ICON_SIZE = 16;
 
- var ICON_PADDING = 4;
 
- var USERTASK_IMAGE = 		"images/deployer/user.png";
 
- var SCRIPTTASK_IMAGE = 		"images/deployer/script.png";
 
- var SERVICETASK_IMAGE = 	"images/deployer/service.png";
 
- var RECEIVETASK_IMAGE = 	"images/deployer/receive.png";
 
- var SENDTASK_IMAGE = 		"images/deployer/send.png";
 
- var MANUALTASK_IMAGE = 		"images/deployer/manual.png";
 
- var BUSINESS_RULE_TASK_IMAGE = "images/deployer/business_rule.png";
 
- var TIMER_IMAGE = 			"images/deployer/timer.png";
 
- var MESSAGE_CATCH_IMAGE = 	"images/deployer/message_catch.png";
 
- var MESSAGE_THROW_IMAGE = 	"images/deployer/message_throw.png";
 
- var ERROR_THROW_IMAGE = 	"images/deployer/error_throw.png";
 
- var ERROR_CATCH_IMAGE = 	"images/deployer/error_catch.png";
 
- var SIGNAL_CATCH_IMAGE = 	"images/deployer/signal_catch.png";
 
- var SIGNAL_THROW_IMAGE = 	"images/deployer/signal_throw.png";
 
- var MULTIPLE_CATCH_IMAGE = 	"images/deployer/multiple_catch.png";
 
- var ObjectType = {
 
- 	ELLIPSE: "ellipse",
 
- 	FLOW: "flow",
 
- 	RECT: "rect",
 
- 	RHOMBUS: "rhombus"
 
- };
 
- function OBJ(type){
 
- 	this.c = null;
 
- 	this.type = type;
 
- 	this.nestedElements = [];
 
- };
 
- OBJ.prototype = {
 
- 	
 
- };
 
- var CONNECTION_TYPE = {
 
- 	SEQUENCE_FLOW: "sequence_flow",
 
- 	MESSAGE_FLOW: "message_flow",
 
- 	ASSOCIATION: "association"
 
- };
 
- var ProcessDiagramCanvas = function(){
 
- };
 
- ProcessDiagramCanvas.prototype = {
 
- // var DefaultProcessDiagramCanvas = {
 
- 	canvasHolder: "holder",
 
- 	canvasWidth: 0, 
 
- 	canvasHeight: 0,
 
- 	paint: Color.black,
 
- 	strokeWidth: 0,
 
- 	font: null,
 
- 	fontSmoothing: null,
 
- 	
 
- 	g: null,
 
- 	ninjaPaper: null,
 
- 	
 
- 	objects: [],
 
- 	
 
- 	processDefinitionId: null,
 
- 	activity: null,
 
- 	
 
- 	frame: null,
 
- 	
 
- 	
 
- 	debug: false,
 
- 	
 
- 	/**
 
- 	* Creates an empty canvas with given width and height.
 
- 	*/
 
- 	init: function(width, height, processDefinitionId){
 
- 		this.canvasWidth = width;
 
- 		this.canvasHeight = height;
 
- 		
 
- 		// TODO: name it as 'canvasName'
 
- 		if (!processDefinitionId)
 
- 			processDefinitionId = "holder";
 
- 		
 
- 		this.processDefinitionId = processDefinitionId;
 
- 		this.canvasHolder = this.processDefinitionId;
 
- 		var h = document.getElementById(this.canvasHolder);
 
- 		if (!h) return;
 
- 		
 
- 		h.style.width = this.canvasWidth;
 
- 		h.style.height = this.canvasHeight;
 
- 		
 
- 		this.g = Raphael(this.canvasHolder);
 
- 		this.g.clear();
 
- 	
 
- 		//this.setPaint(Color.DimGrey);
 
- 		this.setPaint(Color.black);
 
- 		//this.setPaint(Color.white);
 
- 		this.setStroke(NORMAL_STROKE);
 
- 		
 
- 		//this.setFont("Arial", 11);
 
- 		this.setFont(NORMAL_FONT);
 
- 		//this.font = this.g.getFont("Arial");
 
- 		
 
- 		this.fontSmoothing = true;
 
- 		
 
- 		// ninja!
 
- 		var RaphaelOriginal = Raphael;
 
- 		this.ninjaPaper =(function (local_raphael) {
 
- 			var paper = local_raphael(1, 1, 1, 1, processDefinitionId);
 
- 			return paper;
 
- 		})(Raphael.ninja());
 
- 		Raphael = RaphaelOriginal;
 
- 	},
 
- 	setPaint: function(color){
 
- 		this.paint = color;
 
- 	},
 
- 	getPaint: function(){
 
- 		return this.paint;
 
- 	},
 
- 	setStroke: function(strokeWidth){
 
- 		this.strokeWidth = strokeWidth;
 
- 	},
 
- 	getStroke: function(){
 
- 		return this.strokeWidth;
 
- 	},
 
- 	/*
 
- 	setFont: function(family, weight, style, stretch){
 
- 		this.font = this.g.getFont(family, weight);
 
- 	},
 
- 	*/
 
- 	setFont: function(font){
 
- 		this.font = font;
 
- 	},
 
- 	getFont: function(){
 
- 		return this.font;
 
- 	},
 
- 	drawShaddow: function(object){
 
- 		var border = object.clone();
 
- 		border.attr({"stroke-width": this.strokeWidth + 6, 
 
- 					"stroke": Color.white,
 
- 					"fill": Color.white,
 
- 					"opacity": 1,
 
- 					"stroke-dasharray":null});
 
- 		//border.toBack();
 
- 		object.toFront();
 
- 		
 
- 		return border;
 
- 	},
 
- 	
 
- 	setConextObject: function(obj){
 
- 		this.contextObject = obj;
 
- 	},
 
- 	getConextObject: function(){
 
- 		return this.contextObject;
 
- 	},
 
- 	setContextToElement: function(object){
 
- 		var contextObject = this.getConextObject();
 
- 		object.id = contextObject.id;
 
- 		object.data("contextObject", contextObject);
 
- 	},
 
- 	onClick: function(event, instance, element){
 
- 	  var overlay = element;
 
- 	  var set = overlay.data("set");
 
- 	  var contextObject = overlay.data("contextObject");
 
- 	  //console.log("["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
 
- 	  if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.click) {
 
- 	    var args = [instance, element, contextObject];
 
- 	    ProcessDiagramGenerator.options.on.click.apply(event, args);
 
- 	  }
 
- 	},
 
- 	onRightClick: function(event, instance, element){
 
- 	  var overlay = element;
 
- 	  var set = overlay.data("set");
 
- 	  var contextObject = overlay.data("contextObject");
 
- 	  //console.log("[%s], activityId: %s (RIGHTCLICK)", contextObject.getProperty("type"), contextObject.getId());
 
- 	  if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.rightClick) {
 
- 	    var args = [instance, element, contextObject];
 
- 	    ProcessDiagramGenerator.options.on.rightClick.apply(event, args);
 
- 	  }
 
- 	},
 
- 	onHoverIn: function(event, instance, element){
 
- 	  var overlay = element;
 
- 	  var set = overlay.data("set");
 
- 	  var contextObject = overlay.data("contextObject");
 
- 	  var border = instance.g.getById(contextObject.id + "_border");
 
- 	  border.attr("opacity", 0.3);
 
- 	  // provide callback
 
- 	  if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.over) {
 
- 	    var args = [instance, element, contextObject];
 
- 	    ProcessDiagramGenerator.options.on.over.apply(event, args);
 
- 	  }
 
- 	 },
 
- 	 onHoverOut: function(event, instance, element){
 
- 	   var overlay = element;
 
- 	   var set = overlay.data("set");
 
- 	   var contextObject = overlay.data("contextObject");
 
- 	   var border = instance.g.getById(contextObject.id + "_border");
 
- 	   border.attr("opacity", 0.0);
 
- 	   // provide callback
 
- 	   if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.out) {
 
- 	     var args = [instance, element, contextObject];
 
- 	     ProcessDiagramGenerator.options.on.out.apply(event, args);
 
- 	   }
 
- 	 },
 
- 	 addHandlers: function(set, x, y, width, height, type){
 
- 	   var contextObject = this.getConextObject();
 
- 	   var cx = x+width/2, cy = y+height/2;
 
- 	   if (type == "event") {
 
- 	     var border = this.g.ellipse(cx, cy, width/2+4, height/2+4);
 
- 	     var overlay = this.g.ellipse(cx, cy, width/2, height/2);
 
- 	   } else if (type == "gateway") {
 
- 	     // rhombus
 
- 	     var border = this.g.path( "M" + (x - 4) + " " + (y + (height / 2)) +
 
- 	         "L" + (x + (width / 2)) + " " + (y + height + 4) +
 
- 	         "L" + (x + width + 4) + " " + (y + (height / 2)) +
 
- 	         "L" + (x + (width / 2)) + " " + (y - 4) +
 
- 	         "z" );
 
- 	     var overlay = this.g.path(  "M" + x + " " + (y + (height / 2)) +
 
- 	         "L" + (x + (width / 2)) + " " + (y + height) +
 
- 	         "L" + (x + width) + " " + (y + (height / 2)) +
 
- 	         "L" + (x + (width / 2)) + " " + y +
 
- 	         "z" );
 
- 	   } else if (type == "task") {
 
- 	     var border = this.g.rect(x - 4, y - 4, width+9, height+9, TASK_CORNER_ROUND+4);
 
- 	     var overlay = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
 
- 	   }
 
- 	   border.attr({stroke: Color.get(132,112,255)/*Color.Tan1*/,"stroke-width": 4, opacity: 0.0});
 
- 	   border.id = contextObject.id + "_border";
 
- 	   set.push(border);
 
- 	   overlay.attr({stroke: Color.Orange,"stroke-width": 3, fill: Color.get(0,0,0), opacity: 0.0, cursor: "hand"});
 
- 	   overlay.data("set",set);
 
- 	   overlay.id = contextObject.id;
 
- 	   overlay.data("contextObject",contextObject);
 
- 	   var instance = this;
 
- 	   overlay.mousedown(function(event){if (event.button == 2) instance.onRightClick(event, instance, this);});
 
- 	   overlay.click(function(event){instance.onClick(event, instance, this);});
 
- 	   overlay.hover(function(event){instance.onHoverIn(event, instance, this);}, function(event){instance.onHoverOut(event, instance, this);});
 
- 	 },
 
- 	
 
- 	/*
 
- 	 * Start Events:
 
- 	 * 
 
- 	 *	drawNoneStartEvent
 
- 	 *	drawTimerStartEvent
 
- 	 *	drawMessageStartEvent
 
- 	 *	drawErrorStartEvent
 
- 	 *	drawSignalStartEvent
 
- 	 *	_drawStartEventImage
 
- 	 *	_drawStartEvent
 
- 	 */
 
- 	 
 
- 	drawNoneStartEvent: function(x, y, width, height) {
 
- 	  this.g.setStart();
 
- 	  
 
- 		var isInterrupting = undefined;
 
- 		this._drawStartEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		var set = this.g.setFinish();
 
- 		this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawTimerStartEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 	  
 
- 		this._drawStartEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		var cx = x + width/2 - this.getStroke()/4;
 
- 		var cy = y + height/2 - this.getStroke()/4;
 
- 		
 
- 		var w = width*.9;// - this.getStroke()*2;
 
- 		var h = height*.9;// - this.getStroke()*2;
 
- 		
 
- 		this._drawClock(cx, cy, w, h);
 
- 		
 
- 		if (this.gebug)
 
- 			var center = this.g.ellipse(cx, cy, 3, 3).attr({stroke:"none", fill: Color.green});
 
- 		
 
- 		var set = this.g.setFinish();
 
- 		this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawMessageStartEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 	  
 
- 		this._drawStartEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		this._drawStartEventImage(x, y, width, height, MESSAGE_CATCH_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawErrorStartEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		var isInterrupting = undefined;
 
- 		this._drawStartEvent(x, y, width, height, isInterrupting);
 
- 		this._drawStartEventImage(x, y, width, height, ERROR_CATCH_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawSignalStartEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		this._drawStartEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		this._drawStartEventImage(x, y, width, height, SIGNAL_CATCH_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawMultipleStartEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		
 
- 	  this._drawStartEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		var cx = x + width/2 - this.getStroke()/4;
 
- 		var cy = y + height/2 - this.getStroke()/4;
 
- 		
 
- 		var w = width*1;
 
- 		var h = height*1;
 
- 		
 
- 		this._drawPentagon(cx, cy, w, h);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	_drawStartEventImage: function(x, y, width, height, image){
 
- 		var cx = x + width/2 - this.getStroke()/2;
 
- 		var cy = y + height/2 - this.getStroke()/2;
 
- 		
 
- 		var w = width*.65;// - this.getStroke()*2;
 
- 		var h = height*.65;// - this.getStroke()*2;
 
- 		
 
- 		var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
 
- 	},
 
- 	_drawStartEvent: function(x, y, width, height, isInterrupting){
 
- 		var originalPaint = this.getPaint();
 
- 		if (typeof(START_EVENT_STROKE_COLOR) != "undefined")
 
- 			this.setPaint(START_EVENT_STROKE_COLOR);
 
- 		
 
- 		
 
- 		width -= this.strokeWidth / 2;
 
- 		height -= this.strokeWidth / 2;
 
- 		
 
- 		x = x + width/2;
 
- 		y = y + height/2;
 
- 		
 
- 		var circle = this.g.ellipse(x, y, width/2, height/2);
 
- 		
 
- 		circle.attr({"stroke-width": this.strokeWidth, 
 
- 				"stroke": this.paint, 
 
- 				//"stroke": START_EVENT_STROKE_COLOR,
 
- 				"fill": START_EVENT_COLOR});
 
- 				
 
- 		// white shaddow
 
- 		this.drawShaddow(circle);
 
- 		
 
- 		if (isInterrupting!=null && isInterrupting!=undefined && !isInterrupting) 
 
- 			circle.attr({"stroke-dasharray": NON_INTERRUPTING_EVENT_STROKE});
 
- 		this.setContextToElement(circle);
 
- 		
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 	},
 
- 	
 
- 	/*
 
- 	 * End Events:
 
- 	 * 
 
- 	 *	drawNoneEndEvent
 
- 	 *	drawErrorEndEvent
 
- 	 *	drawMessageEndEvent
 
- 	 *	drawSignalEndEvent
 
- 	 *	drawMultipleEndEvent
 
- 	 *  _drawEndEventImage
 
- 	 *	_drawNoneEndEvent
 
- 	 */
 
- 	 
 
- 	drawNoneEndEvent: function(x, y, width, height) {
 
- 	  this.g.setStart();
 
- 	  
 
- 		this._drawNoneEndEvent(x, y, width, height, null, "noneEndEvent");
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawErrorEndEvent: function(x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		var type = "errorEndEvent";
 
- 		this._drawNoneEndEvent(x, y, width, height, null, type);
 
- 		
 
- 		this._drawEndEventImage(x, y, width, height, ERROR_THROW_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawMessageEndEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		var type = "errorEndEvent";
 
- 		this._drawNoneEndEvent(x, y, width, height, null, type);
 
- 		
 
- 		this._drawEndEventImage(x, y, width, height, MESSAGE_THROW_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawSignalEndEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		var type = "errorEndEvent";
 
- 		this._drawNoneEndEvent(x, y, width, height, null, type);
 
- 		
 
- 		this._drawEndEventImage(x, y, width, height, SIGNAL_THROW_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawMultipleEndEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		var type = "errorEndEvent";
 
- 		this._drawNoneEndEvent(x, y, width, height, null, type);
 
- 		
 
- 		var cx = x + width/2;// - this.getStroke();
 
- 		var cy = y + height/2;// - this.getStroke();
 
- 		
 
- 		var w = width*1;
 
- 		var h = height*1;
 
- 		
 
- 		var filled = true;
 
- 		this._drawPentagon(cx, cy, w, h, filled);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawTerminateEndEvent: function(x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		var type = "errorEndEvent";
 
- 		this._drawNoneEndEvent(x, y, width, height, null, type);
 
- 		
 
- 		var cx = x + width/2;// - this.getStroke()/2;
 
- 		var cy = y + height/2;// - this.getStroke()/2;
 
- 		
 
- 		var w = width/2*.6;
 
- 		var h = height/2*.6;
 
- 		
 
- 		var circle = this.g.ellipse(cx, cy, w, h).attr({fill: Color.black});
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	_drawEndEventImage: function(x, y, width, height, image){
 
- 		var cx = x + width/2 - this.getStroke()/2;
 
- 		var cy = y + height/2 - this.getStroke()/2;
 
- 		
 
- 		var w = width*.65;
 
- 		var h = height*.65;
 
- 		
 
- 		var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
 
- 	},
 
- 	
 
- 	_drawNoneEndEvent: function(x, y, width, height, image, type) {
 
- 		var originalPaint = this.getPaint();
 
- 		if (typeof(CATCHING_EVENT_COLOR) != "undefined")
 
- 			this.setPaint(CATCHING_EVENT_COLOR);
 
- 			
 
- 		var strokeColor = this.getPaint();
 
- 		var fillColor = this.getPaint();
 
- 		
 
- 		if (type == "errorEndEvent") {
 
- 			strokeColor = ERROR_END_EVENT_STROKE_COLOR;
 
- 			fillColor = ERROR_END_EVENT_COLOR;
 
- 		} else if (type == "noneEndEvent") {
 
- 			strokeColor = NONE_END_EVENT_STROKE_COLOR;
 
- 			fillColor = NONE_END_EVENT_COLOR;
 
- 		} else 
 
- 			
 
- 		// event circles
 
- 		width -= this.strokeWidth / 2;
 
- 		height -= this.strokeWidth / 2;
 
- 		
 
- 		x = x + width/2;// + this.strokeWidth/2;
 
- 		y = y + width/2;// + this.strokeWidth/2;
 
- 		
 
- 		// outerCircle
 
- 		var outerCircle = this.g.ellipse(x, y, width/2, height/2);
 
- 		
 
- 		// white shaddow
 
- 		var shaddow = this.drawShaddow(outerCircle);
 
- 		
 
- 		outerCircle.attr({"stroke-width": this.strokeWidth,
 
- 						"stroke": strokeColor,
 
- 						"fill": fillColor});
 
- 		
 
- 		var innerCircleX = x;
 
- 		var innerCircleY = y;
 
- 		var innerCircleWidth = width/2 - 2;
 
- 		var innerCircleHeight = height/2 - 2;
 
- 		var innerCircle = this.g.ellipse(innerCircleX, innerCircleY, innerCircleWidth, innerCircleHeight);
 
- 		innerCircle.attr({"stroke-width": this.strokeWidth,
 
- 				"stroke": strokeColor,
 
- 				"fill": Color.white});
 
- 		// TODO: implement it
 
- 		//var originalPaint = this.getPaint();
 
- 		//this.g.setPaint(BOUNDARY_EVENT_COLOR);
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 	},
 
- 	
 
- 	/*
 
- 	 * Catching Events:
 
- 	 * 
 
- 	 *	drawCatchingTimerEvent
 
- 	 *	drawCatchingErrorEvent
 
- 	 *	drawCatchingSignalEvent
 
- 	 *  drawCatchingMessageEvent
 
- 	 *	drawCatchingMultipleEvent
 
- 	 *	_drawCatchingEventImage
 
- 	 *	_drawCatchingEvent
 
- 	 */
 
- 	 
 
- 	
 
- 	drawCatchingTimerEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		var innerCircleWidth = width - 4;
 
- 		var innerCircleHeight = height - 4;
 
- 		
 
- 		var cx = x + width/2 - this.getStroke()/4;
 
- 		var cy = y + height/2 - this.getStroke()/4;
 
- 		
 
- 		var w = innerCircleWidth*.9;// - this.getStroke()*2;
 
- 		var h = innerCircleHeight*.9;// - this.getStroke()*2;
 
- 		
 
- 		this._drawClock(cx, cy, w, h);
 
- 		
 
- 		var set = this.g.setFinish();
 
- 		this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	drawCatchingErrorEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		this._drawCatchingEventImage(x, y, width, height, ERROR_CATCH_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawCatchingSignalEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		this._drawCatchingEventImage(x, y, width, height, SIGNAL_CATCH_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawCatchingMessageEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		this._drawCatchingEventImage(x, y, width, height, MESSAGE_CATCH_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawCatchingMultipleEvent: function(x, y, width, height, isInterrupting, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
 
- 		
 
- 		var cx = x + width/2 - this.getStroke();
 
- 		var cy = y + height/2 - this.getStroke();
 
- 		
 
- 		var w = width*.9;
 
- 		var h = height*.9;
 
- 		
 
- 		this._drawPentagon(cx, cy, w, h);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	_drawCatchingEventImage: function(x, y, width, height, image){
 
- 		var innerCircleWidth = width - 4;
 
- 		var innerCircleHeight = height - 4;
 
- 		
 
- 		var cx = x + width/2 - this.getStroke()/2;
 
- 		var cy = y + height/2 - this.getStroke()/2;
 
- 		
 
- 		var w = innerCircleWidth*.6;// - this.getStroke()*2;
 
- 		var h = innerCircleHeight*.6;// - this.getStroke()*2;
 
- 		
 
- 		var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
 
- 	},
 
- 	
 
- 	_drawCatchingEvent: function(x, y, width, height, isInterrupting, image) {
 
- 		var originalPaint = this.getPaint();
 
- 		if (typeof(CATCHING_EVENT_COLOR) != "undefined")
 
- 			this.setPaint(CATCHING_EVENT_COLOR);
 
- 			
 
- 		// event circles
 
- 		width -= this.strokeWidth / 2;
 
- 		height -= this.strokeWidth / 2;
 
- 		
 
- 		x = x + width/2;// + this.strokeWidth/2;
 
- 		y = y + width/2;// + this.strokeWidth/2;
 
- 		
 
- 		// outerCircle
 
- 		var outerCircle = this.g.ellipse(x, y, width/2, height/2);
 
- 		
 
- 		// white shaddow
 
- 		var shaddow = this.drawShaddow(outerCircle);
 
- 		
 
- 		//console.log("isInterrupting: " + isInterrupting, "x:" , x, "y:",y);
 
- 		if (isInterrupting!=null && isInterrupting!=undefined && !isInterrupting) 
 
- 			outerCircle.attr({"stroke-dasharray": NON_INTERRUPTING_EVENT_STROKE});
 
- 		
 
- 		outerCircle.attr({"stroke-width": this.strokeWidth,
 
- 						"stroke": this.getPaint(),
 
- 						"fill": BOUNDARY_EVENT_COLOR});
 
- 		
 
- 		var innerCircleX = x;
 
- 		var innerCircleY = y;
 
- 		var innerCircleRadiusX = width/2 - 4;
 
- 		var innerCircleRadiusY = height/2 - 4;
 
- 		var innerCircle = this.g.ellipse(innerCircleX, innerCircleY, innerCircleRadiusX, innerCircleRadiusY);
 
- 		innerCircle.attr({"stroke-width": this.strokeWidth,
 
- 				"stroke": this.getPaint()});
 
- 		if (image) {
 
- 			var imageWidth = imageHeight = innerCircleRadiusX*1.2 + this.getStroke()*2;
 
- 			var imageX = innerCircleX-imageWidth/2 - this.strokeWidth/2;
 
- 			var imageY = innerCircleY-imageWidth/2 - this.strokeWidth/2;
 
- 			var img = this.g.image(image, imageX, imageY, imageWidth, imageHeight);
 
- 		}
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 		
 
- 		var set = this.g.set();
 
- 		set.push(outerCircle, innerCircle, shaddow);
 
- 		this.setContextToElement(outerCircle);
 
- 		
 
- 		// TODO: add shapes to set
 
- 		
 
- 		/*
 
- 		var st = this.g.set();
 
- 		st.push(
 
- 			this.g.ellipse(innerCircleX, innerCircleY, 2, 2),
 
- 			this.g.ellipse(imageX, imageY, 2, 2)
 
- 		);
 
- 		st.attr({fill: "red", "stroke-width":0});
 
- 		*/
 
- 	},
 
- 	
 
- 	/*
 
- 	 * Catching Events:
 
- 	 * 
 
- 	 *	drawThrowingNoneEvent
 
- 	 *	drawThrowingSignalEvent
 
- 	 *	drawThrowingMessageEvent
 
- 	 *	drawThrowingMultipleEvent
 
- 	 */
 
- 	
 
- 	drawThrowingNoneEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, null, null);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawThrowingSignalEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, null, null);
 
- 		
 
- 		this._drawCatchingEventImage(x, y, width, height, SIGNAL_THROW_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawThrowingMessageEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, null, null);
 
- 		
 
- 		this._drawCatchingEventImage(x, y, width, height, MESSAGE_THROW_IMAGE);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	drawThrowingMultipleEvent: function(x, y, width, height, name) {
 
- 	  this.g.setStart();
 
- 		this._drawCatchingEvent(x, y, width, height, null, null);
 
- 		
 
- 		var cx = x + width/2 - this.getStroke();
 
- 		var cy = y + height/2 - this.getStroke();
 
- 		
 
- 		var w = width*.9;
 
- 		var h = height*.9;
 
- 		
 
- 		var filled = true;
 
- 		this._drawPentagon(cx, cy, w, h, filled);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "event");
 
- 	},
 
- 	
 
- 	/*
 
- 	 * Draw flows:
 
- 	 * 
 
- 	 *  _connectFlowToActivity
 
- 	 *	_drawFlow
 
- 	 *	_drawDefaultSequenceFlowIndicator
 
- 	 *	drawSequenceflow
 
- 	 *	drawMessageflow
 
- 	 *	drawAssociation
 
- 	 *	_drawCircleTail
 
- 	 *	_drawArrowHead
 
- 	 *	_drawConditionalSequenceFlowIndicator
 
- 	 *	drawSequenceflowWithoutArrow
 
- 	 */
 
- 	 
 
- 	_connectFlowToActivity: function(sourceActivityId, destinationActivityId, waypoints){
 
- 		var sourceActivity = this.g.getById(sourceActivityId);
 
- 		var destinationActivity = this.g.getById(destinationActivityId);
 
- 		if (sourceActivity == null || destinationActivity == null) {
 
- 			if (sourceActivity == null)
 
- 				console.error("source activity["+sourceActivityId+"] not found");
 
- 			else
 
- 				console.error("destination activity["+destinationActivityId+"] not found");
 
- 			return null;
 
- 		}
 
- 			var bbSourceActivity = sourceActivity.getBBox()
 
- 			var bbDestinationActivity = destinationActivity.getBBox()
 
- 			
 
- 			var path = [];
 
- 			var newWaypoints = [];
 
- 			for(var i = 0; i < waypoints.length; i++){
 
- 				var pathType = ""
 
- 				if (i==0)
 
- 					pathType = "M";
 
- 				else 
 
- 					pathType = "L";
 
- 					
 
- 				path.push([pathType, waypoints[i].x, waypoints[i].y]);
 
- 				newWaypoints.push({x:waypoints[i].x, y:waypoints[i].y});
 
- 			}
 
- 			var ninjaPathSourceActivity = this.ninjaPaper.path(sourceActivity.realPath);
 
- 			var ninjaPathDestinationActivity = this.ninjaPaper.path(destinationActivity.realPath);
 
- 			var ninjaBBSourceActivity = ninjaPathSourceActivity.getBBox();
 
- 			var ninjaBBDestinationActivity = ninjaPathDestinationActivity.getBBox();
 
- 			
 
- 			// set target of the flow to the center of the taskObject
 
- 			var newPath = path;
 
- 			var originalSource = {x: newPath[0][1], y: newPath[0][2]};
 
- 			var originalTarget = {x: newPath[newPath.length-1][1], y: newPath[newPath.length-1][2]};
 
- 			newPath[0][1] = ninjaBBSourceActivity.x + (ninjaBBSourceActivity.x2 - ninjaBBSourceActivity.x ) / 2;
 
- 			newPath[0][2] = ninjaBBSourceActivity.y + (ninjaBBSourceActivity.y2 - ninjaBBSourceActivity.y ) / 2;
 
- 			newPath[newPath.length-1][1] = ninjaBBDestinationActivity.x + (ninjaBBDestinationActivity.x2 - ninjaBBDestinationActivity.x ) / 2;
 
- 			newPath[newPath.length-1][2] = ninjaBBDestinationActivity.y + (ninjaBBDestinationActivity.y2 - ninjaBBDestinationActivity.y ) / 2;
 
- 			
 
- 			var ninjaPathFlowObject = this.ninjaPaper.path(newPath);
 
- 			var ninjaBBFlowObject = ninjaPathFlowObject.getBBox();
 
- 			
 
- 			var intersectionsSource = Raphael.pathIntersection(ninjaPathSourceActivity.realPath, ninjaPathFlowObject.realPath);
 
- 			var intersectionsDestination = Raphael.pathIntersection(ninjaPathDestinationActivity.realPath, ninjaPathFlowObject.realPath);
 
- 			var intersectionSource = intersectionsSource.pop();
 
- 			var intersectionDestination = intersectionsDestination.pop();
 
- 			
 
- 			if (intersectionSource != undefined) {
 
- 				if (this.gebug) {
 
- 					var diameter = 5;
 
- 					var dotOriginal = this.g.ellipse(originalSource.x, originalSource.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Pink});
 
- 					var dot = this.g.ellipse(intersectionSource.x, intersectionSource.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Green});
 
- 				}
 
- 				
 
- 				newWaypoints[0].x = intersectionSource.x;
 
- 				newWaypoints[0].y = intersectionSource.y;
 
- 			}
 
- 			if (intersectionDestination != undefined) {
 
- 				if (this.gebug) {
 
- 					var diameter = 5;
 
- 					var dotOriginal = this.g.ellipse(originalTarget.x, originalTarget.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Red});
 
- 					var dot = this.g.ellipse(intersectionDestination.x, intersectionDestination.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Blue});
 
- 				}
 
- 				
 
- 				newWaypoints[newWaypoints.length-1].x = intersectionDestination.x;
 
- 				newWaypoints[newWaypoints.length-1].y = intersectionDestination.y;
 
- 			}
 
- 			
 
- 			this.ninjaPaper.clear();
 
- 		return newWaypoints;
 
- 	},
 
- 	 
 
- 	_drawFlow: function(waypoints, conditional, isDefault, highLighted, withArrowHead, connectionType){
 
- 		var originalPaint = this.getPaint();
 
- 		var originalStroke = this.getStroke();
 
- 		
 
- 		this.setPaint(SEQUENCEFLOW_COLOR);
 
- 		this.setStroke(SEQUENCEFLOW_STROKE);
 
- 		
 
- 		if (highLighted) {
 
- 			this.setPaint(HIGHLIGHT_COLOR);
 
- 			this.setStroke(SEQUENCEFLOW_HIGHLIGHT_STROKE);
 
- 		}
 
- // TODO: generate polylineId or do something!!
 
- 		var uuid = Raphael.createUUID();
 
- 		
 
- 		var contextObject = this.getConextObject();
 
- 		var newWaypoints = waypoints;
 
- 		if (contextObject) {
 
- 			var newWaypoints = this._connectFlowToActivity(contextObject.sourceActivityId, contextObject.destinationActivityId, waypoints);
 
- 			
 
- 			if (!newWaypoints) {
 
- 				console.error("Error draw flow from '"+contextObject.sourceActivityId+"' to '"+contextObject.destinationActivityId+"' ");
 
- 				return;
 
- 			}
 
- 		}
 
- 		var polyline = new Polyline(uuid, newWaypoints, this.getStroke());
 
- 		//var polyline = new Polyline(waypoints, 3);
 
- 		
 
- 		polyline.element = this.g.path(polyline.path);
 
- 		polyline.element.attr("stroke-width", this.getStroke());
 
- 		polyline.element.attr("stroke", this.getPaint());
 
- 			
 
- 		if (contextObject) {
 
- 			polyline.element.id = contextObject.id;
 
- 			polyline.element.data("contextObject", contextObject);
 
- 		} else {
 
- 			polyline.element.id = uuid;
 
- 		}
 
- 		
 
- 		
 
- 		/*
 
- 		polyline.element.mouseover(function(){
 
- 			this.attr({"stroke-width": NORMAL_STROKE + 2});
 
- 		}).mouseout(function(){
 
- 			this.attr({"stroke-width": NORMAL_STROKE});
 
- 		});
 
- 		*/
 
- 		
 
- 		var last = polyline.getAnchorsCount()-1;
 
- 		var x = polyline.getAnchor(last).x;
 
- 		var y = polyline.getAnchor(last).y;
 
- 		//var c = this.g.ellipse(x, y, 5, 5);
 
- 		
 
- 		var lastLineIndex = polyline.getLinesCount()-1;
 
- 		var line = polyline.getLine(lastLineIndex);
 
- 		var firstLine = polyline.getLine(0);
 
- 		
 
- 		var arrowHead = null,
 
- 			circleTail = null,
 
- 			defaultSequenceFlowIndicator = null,
 
- 			conditionalSequenceFlowIndicator = null;
 
- 		if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW) {
 
- 			circleTail = this._drawCircleTail(firstLine, connectionType);
 
- 		}
 
- 		if(withArrowHead)
 
- 			arrowHead = this._drawArrowHead(line, connectionType);
 
- 		
 
- 		//console.log("isDefault: ", isDefault, ", isDefaultConditionAvailable: ", polyline.isDefaultConditionAvailable);
 
- 		if (isDefault && polyline.isDefaultConditionAvailable) {
 
- 			//var angle = polyline.getLineAngle(0);
 
- 			//console.log("firstLine", firstLine);
 
- 			defaultSequenceFlowIndicator = this._drawDefaultSequenceFlowIndicator(firstLine);
 
- 		}
 
- 		
 
- 		if (conditional) {
 
- 			conditionalSequenceFlowIndicator = this._drawConditionalSequenceFlowIndicator(firstLine);
 
- 		}
 
-         // draw flow name
 
-         var flowName = contextObject.name;
 
-         if (flowName) {
 
-             var xPointArray = contextObject.xPointArray;
 
-             var yPointArray = contextObject.yPointArray;
 
-             var textX = xPointArray[0] < xPointArray[1] ? xPointArray[0] : xPointArray[1];
 
-             var textY = yPointArray[0] < yPointArray[1] ? yPointArray[1] : yPointArray[0];
 
-             // fix xy
 
-             textX += 20;
 
-             textY -= 10;
 
-             this.g.text(textX, textY, flowName).attr(LABEL_FONT);
 
-         }
 
- 		
 
- 		var st = this.g.set();
 
- 		st.push(polyline.element, arrowHead, circleTail, conditionalSequenceFlowIndicator);
 
- 		polyline.element.data("set", st);
 
- 		polyline.element.data("withArrowHead", withArrowHead);
 
- 		
 
- 		var polyCloneAttrNormal = {"stroke-width": this.getStroke() + 5, stroke: Color.get(132,112,255), opacity: 0.0, cursor: "hand"};
 
- 		var polyClone = st.clone().attr(polyCloneAttrNormal).hover(function () {
 
- 				//if (polyLine.data("isSelected")) return;
 
- 				polyClone.attr({opacity: 0.2});
 
- 			}, function () {
 
- 				//if (polyLine.data("isSelected")) return;
 
- 				polyClone.attr({opacity: 0.0});
 
- 			});
 
- 		polyClone.data("objectId", polyline.element.id);
 
- 		polyClone.click(function(){
 
- 			var instance = this;
 
- 			var objectId = instance.data("objectId");
 
- 			var object = this.paper.getById(objectId);
 
- 			var contextObject = object.data("contextObject");
 
- 			if (contextObject) {
 
- 				console.log("[flow], objectId: " + object.id +", flow: " + contextObject.flow);
 
- 				ProcessDiagramGenerator.showFlowInfo(contextObject);
 
- 			}
 
- 		}).dblclick(function(){
 
- 			console.log("!!! DOUBLE CLICK !!!");
 
- 		}).hover(function (mouseEvent) {
 
- 			var instance = this;
 
- 			var objectId = instance.data("objectId");
 
- 			var object = this.paper.getById(objectId);
 
- 			var contextObject = object.data("contextObject");
 
- 			if (contextObject)
 
- 				ProcessDiagramGenerator.showFlowInfo(contextObject);
 
- 		});
 
- 		polyClone.data("parentId", uuid);
 
- 		
 
- 		if (!connectionType || connectionType == CONNECTION_TYPE.SEQUENCE_FLOW)
 
- 			polyline.element.attr("stroke-width", this.getStroke());
 
- 		else if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW)
 
- 			polyline.element.attr({"stroke-dasharray": "--"});
 
- 		else if (connectionType == CONNECTION_TYPE.ASSOCIATION)
 
- 			polyline.element.attr({"stroke-dasharray": ". "});
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 		this.setStroke(originalStroke);
 
- 	},
 
- 	
 
- 	_drawDefaultSequenceFlowIndicator: function(line) {
 
- 		//console.log("line: ", line);
 
- 		
 
- 		var len = 10; c = len/2, f = 8;
 
- 		var defaultIndicator = this.g.path("M" + (-c) + " " + 0 + "L" + (c) + " " + 0);
 
- 		defaultIndicator.attr("stroke-width", this.getStroke()+0);
 
- 		defaultIndicator.attr("stroke", this.getPaint());
 
- 		
 
- 		
 
- 		var cosAngle = Math.cos((line.angle));
 
- 		var sinAngle = Math.sin((line.angle));
 
- 		
 
- 		var dx = f * cosAngle;
 
- 		var dy = f * sinAngle;
 
- 		
 
- 		var x1 = line.x1 + dx + 0*c*cosAngle;
 
- 		var y1 = line.y1 + dy + 0*c*sinAngle;
 
- 		
 
- 		defaultIndicator.transform("t" + (x1) + "," + (y1) + "");
 
- 		defaultIndicator.transform("...r" + Raphael.deg(line.angle - 3*Math.PI / 4) + " " + 0 + " " + 0);
 
- 		/*
 
- 		var c0 = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Blue});
 
- 		c0.transform("t" + (line.x1) + "," + (line.y1) + "");
 
- 		var center = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Red});
 
- 		center.transform("t" + (line.x1+dx) + "," + (line.y1+dy) + "");
 
- 		*/
 
- 		
 
- 		return defaultIndicator;
 
- 	},
 
- 	
 
- 	drawSequenceflow: function(waypoints, conditional, isDefault, highLighted) {
 
- 		var withArrowHead = true;
 
- 		this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW);
 
- 	},
 
- 	
 
- 	drawMessageflow: function(waypoints, highLighted) {
 
- 		var withArrowHead = true;
 
- 		var conditional=isDefault=false;
 
- 		this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.MESSAGE_FLOW);
 
- 	},
 
- 	
 
- 	drawAssociation: function(waypoints, withArrowHead, highLighted) {
 
- 		var withArrowHead = withArrowHead;
 
- 		var conditional=isDefault=false;
 
- 		this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.ASSOCIATION);
 
- 	},
 
-   
 
- 	_drawCircleTail: function(line, connectionType){
 
- 		var diameter = ARROW_WIDTH/2*1.5;
 
- 		
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			line.x1 += .5, line.y1 += .5;
 
- 		
 
- 		var circleTail = this.g.ellipse(line.x1, line.y1, diameter, diameter);
 
- 		circleTail.attr("fill", Color.white);
 
- 		circleTail.attr("stroke", this.getPaint());
 
- 		
 
- 		return circleTail;
 
- 	},
 
- 	
 
- 	_drawArrowHead: function(line, connectionType){
 
- 		var doubleArrowWidth = 2 * ARROW_WIDTH;
 
- 		
 
- 		if (connectionType == CONNECTION_TYPE.ASSOCIATION)
 
- 			var arrowHead = this.g.path("M-" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "L 0 0 L" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth);
 
- 		else
 
- 			var arrowHead = this.g.path("M0 0L-" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "L" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "z");
 
- 		
 
- 		//arrowHead.transform("t" + 0 + ",-" + this.getStroke() + "");
 
- 		
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			line.x2 += .5, line.y2 += .5;
 
- 		
 
- 		arrowHead.transform("t" + line.x2 + "," + line.y2 + "");
 
- 		arrowHead.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
 
- 		
 
- 		if (!connectionType || connectionType == CONNECTION_TYPE.SEQUENCE_FLOW)
 
- 			arrowHead.attr("fill", this.getPaint());
 
- 		else if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW)
 
- 			arrowHead.attr("fill", Color.white);
 
- 			
 
- 		arrowHead.attr("stroke-width", this.getStroke());
 
- 		arrowHead.attr("stroke", this.getPaint());
 
- 		
 
- 		return arrowHead;
 
- 	},
 
- 	
 
- 	/*
 
- 	drawArrowHead2: function(srcX, srcY, targetX, targetY) {
 
- 		var doubleArrowWidth = 2 * ARROW_WIDTH;
 
- 		
 
- 		//var arrowHead = this.g.path("M-" + ARROW_WIDTH/2 + " -" + doubleArrowWidth + "L0 0" + "L" + ARROW_WIDTH/2 + " -" + doubleArrowWidth + "z");
 
- 		
 
- 		var arrowHead = this.g.path("M0 0L-" + ARROW_WIDTH/1.5 + " -" + doubleArrowWidth + "L" + ARROW_WIDTH/1.5 + " -" + doubleArrowWidth + "z");
 
- 		//var c = DefaultProcessDiagramCanvas.g.ellipse(0, 0, 3, 3);
 
- 		//c.transform("t"+targetX+","+targetY+"");
 
- 		
 
- 		var angle = Math.atan2(targetY - srcY, targetX - srcX);
 
- 		
 
- 		arrowHead.transform("t"+targetX+","+targetY+"");
 
- 		arrowHead.transform("...r" + Raphael.deg(angle - Math.PI / 2) + " "+0+" "+0);
 
- 		
 
- 		//console.log(arrowHead.transform());
 
- 		//console.log("--> " + Raphael.deg(angle - Math.PI / 2));
 
- 		
 
- 		arrowHead.attr("fill", this.getPaint());
 
- 		arrowHead.attr("stroke", this.getPaint());
 
- 		
 
- 		/ *
 
- 		// shaddow
 
- 		var c0 = arrowHead.clone();
 
- 		c0.transform("...t-1 1");
 
- 		c0.attr("stroke-width", this.strokeWidth);
 
- 		c0.attr("stroke", Color.black);
 
- 		c0.attr("opacity", 0.15);
 
- 		c0.toBack();
 
- 		* /
 
- 	},
 
- 	*/
 
- 	
 
- 	_drawConditionalSequenceFlowIndicator: function(line){
 
- 		var horizontal = (CONDITIONAL_INDICATOR_WIDTH * 0.7);
 
- 		var halfOfHorizontal = horizontal / 2;
 
- 		var halfOfVertical = CONDITIONAL_INDICATOR_WIDTH / 2;
 
- 		var uuid = null;
 
- 		var waypoints = [{x: 0, y: 0},
 
- 						{x: -halfOfHorizontal, y: halfOfVertical},
 
- 						{x: 0, y: CONDITIONAL_INDICATOR_WIDTH},
 
- 						{x: halfOfHorizontal, y: halfOfVertical}];
 
- 		/*
 
- 		var polyline = new Polyline(uuid, waypoints, this.getStroke());
 
- 		polyline.element = this.g.path(polyline.path);
 
- 		polyline.element.attr("stroke-width", this.getStroke());
 
- 		polyline.element.attr("stroke", this.getPaint());
 
- 		polyline.element.id = uuid;
 
- 		*/
 
- 		var polygone = new Polygone(waypoints, this.getStroke());
 
- 		polygone.element = this.g.path(polygone.path);
 
- 		polygone.element.attr("fill", Color.white);
 
- 		
 
- 		polygone.transform("t" + line.x1 + "," + line.y1 + "");
 
- 		polygone.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
 
- 		
 
- 		
 
- 		var cosAngle = Math.cos((line.angle));
 
- 		var sinAngle = Math.sin((line.angle));
 
- 		
 
- 		//polygone.element.attr("stroke-width", this.getStroke());
 
- 		//polygone.element.attr("stroke", this.getPaint());
 
- 		
 
- 		polygone.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
 
- 		
 
- 		return polygone.element;
 
- 	},
 
-   
 
- 	drawSequenceflowWithoutArrow: function(waypoints, conditional, isDefault, highLighted) {
 
- 		var withArrowHead = false;
 
- 		this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW);
 
- 	},
 
- 	
 
- 	/*
 
- 	 * Draw artifacts
 
- 	 */
 
- 	
 
- 	drawPoolOrLane: function(x, y, width, height, name){
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			x = Math.round(x) + .5, y = Math.round(y) + .5;
 
- 		
 
- 		// shape
 
- 		var rect = this.g.rect(x, y, width, height);
 
- 		var attr = {"stroke-width": NORMAL_STROKE, stroke: TASK_STROKE_COLOR};
 
- 		rect.attr(attr);
 
- 		
 
- 		// Add the name as text, vertical
 
- 		if(name != null && name.length > 0) {
 
- 			var attr = POOL_LANE_FONT;
 
- 			
 
- 			// Include some padding
 
- 			var availableTextSpace = height - 6;
 
- 			
 
- 			// Create rotation for derived font
 
- 			var truncated = this.fitTextToWidth(name, availableTextSpace);
 
- 			var realWidth = this.getStringWidth(truncated, attr);
 
- 			var realHeight = this.getStringHeight(truncated, attr);
 
- 			
 
- 			//console.log("truncated:", truncated, ", height:", height, ", realHeight:", realHeight, ", availableTextSpace:", availableTextSpace, ", realWidth:", realWidth);
 
- 			var newX = x + 2 + realHeight*1 - realHeight/2;
 
- 			var newY = 3 + y + availableTextSpace - (availableTextSpace - realWidth) / 2 - realWidth/2;
 
- 			var textElement = this.g.text(newX, newY, truncated).attr(attr);
 
- 			//console.log(".getBBox(): ", t.getBBox());
 
- 			textElement.transform("r" + Raphael.deg(270 * Math.PI/180) + " " + newX + " " + newY);
 
- 		}
 
- 		
 
- 		// TODO: add to set
 
- 	},
 
- 	
 
- 	_drawTask: function(name, x, y, width, height, thickBorder) {
 
- 		var originalPaint = this.getPaint();
 
- 		this.setPaint(TASK_COLOR);
 
- 		
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			x = Math.round(x) + .5, y = Math.round(y) + .5;
 
- 		
 
- 		// shape
 
- 		var shape = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
 
- 		var attr = {"stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: this.getPaint()};
 
- 		shape.attr(attr);
 
- 		//shape.attr({fill: "90-"+this.getPaint()+"-" + Color.get(250, 250, 244)});
 
- 		
 
- 		var contextObject = this.getConextObject();
 
- 		if (contextObject) {
 
- 			shape.id = contextObject.id;
 
- 			shape.data("contextObject", contextObject);
 
- 		}
 
- 		
 
- 		//var activity = this.getConextObject();
 
- 		//console.log("activity: " + activity.getId(), activity);
 
- 		//Object.clone(activity);
 
- 		
 
- 		/*
 
- 		c.mouseover(function(){
 
- 			this.attr({"stroke-width": NORMAL_STROKE + 2});
 
- 		}).mouseout(function(){
 
- 			this.attr({"stroke-width": NORMAL_STROKE});
 
- 		});
 
- 		*/
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 		// white shaddow
 
- 		this.drawShaddow(shape);
 
- 		
 
- 		
 
- 		if (thickBorder) {
 
- 			shape.attr({"stroke-width": THICK_TASK_BORDER_STROKE});
 
- 		} else {
 
- 			//g.draw(rect);
 
- 		}
 
- 		
 
- 		// text
 
- 		if (name) {
 
- 			var fontAttr = TASK_FONT;
 
- 			
 
- 			// Include some padding
 
- 			var paddingX = 5;
 
- 			var paddingY = 5;
 
- 			var availableTextSpace = width - paddingX*2;
 
- 			
 
- 			// TODO: this.setFont
 
- 			// var originalFont = this.getFont();
 
- 			// this.setFont(TASK_FONT)
 
- 			/*
 
- 			var truncated = this.fitTextToWidth(name, availableTextSpace);
 
- 			var realWidth = this.getStringWidth(truncated, fontAttr);
 
- 			var realHeight = this.getStringHeight(truncated, fontAttr);
 
- 			
 
- 			//var t = this.g.text(x + width/2 + realWidth*0/2 + paddingX*0, y + height/2, truncated).attr(fontAttr);
 
- 			*/
 
- 			//console.log("draw task name: " + name);
 
- 			var boxWidth = width - (2 * TEXT_PADDING);
 
- 			var boxHeight = height - ICON_SIZE - ICON_PADDING - ICON_PADDING - MARKER_WIDTH - 2 - 2;
 
- 			var boxX = x + width/2 - boxWidth/2;
 
- 			var boxY = y + height/2 - boxHeight/2 + ICON_PADDING + ICON_PADDING - 2 - 2;
 
- 			/*
 
- 			var boxWidth = width - (2 * ANNOTATION_TEXT_PADDING);
 
- 			var boxHeight = height - (2 * ANNOTATION_TEXT_PADDING);
 
- 			var boxX = x + width/2 - boxWidth/2;
 
- 			var boxY = y + height/2 - boxHeight/2;
 
- 			*/
 
- 			
 
- 			this.drawTaskLabel(name, boxX, boxY, boxWidth, boxHeight);
 
- 		}
 
- 	},
 
- 	
 
- 	drawTaskLabel: function(text, x, y, boxWidth, boxHeight){
 
- 		var originalFont = this.getFont();
 
- 		this.setFont(TASK_FONT);
 
- 			
 
- 		this._drawMultilineText(text, x, y, boxWidth, boxHeight, MULTILINE_VERTICAL_ALIGN_MIDDLE, MULTILINE_HORIZONTAL_ALIGN_MIDDLE);
 
- 		
 
- 		this.setFont(originalFont);
 
- 	},
 
- 	
 
- 	drawAnnotationText: function(text, x, y, width, height){
 
- 		//this._drawMultilineText(text, x, y, width, height, "start");
 
- 		
 
- 		var originalPaint = this.getPaint();
 
- 		var originalFont = this.getFont();
 
- 		
 
- 		this.setPaint(Color.black);
 
- 		this.setFont(TASK_FONT);
 
- 			
 
- 		this._drawMultilineText(text, x, y, width, height, MULTILINE_VERTICAL_ALIGN_TOP, MULTILINE_HORIZONTAL_ALIGN_LEFT);
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 		this.setFont(originalFont);
 
- 	},
 
- 	
 
- 	drawLabel: function(text, x, y, width, height){
 
- 		//this._drawMultilineText(text, x, y, width, height, "start");
 
- 		
 
- 		var originalPaint = this.getPaint();
 
- 		var originalFont = this.getFont();
 
- 		
 
- 		this.setPaint(LABEL_COLOR);
 
- 		//this.setFont(LABEL_FONT);
 
- 		this.setFont(LABEL_FONT_SMOOTH);
 
- 		
 
- 		// predefined box width for labels
 
- 		// TODO: use label width as is, but not height (for stretching)
 
- 		if (!width || !height) {
 
- 		  width = 100;
 
- 		  height = 0;
 
- 		}
 
- 		
 
- 		// TODO: remove it. It is debug
 
- 		x = x - width/2;
 
- 	  
 
- 		this._drawMultilineText(text, x, y, width, height, MULTILINE_VERTICAL_ALIGN_TOP, MULTILINE_HORIZONTAL_ALIGN_MIDDLE);
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 		this.setFont(originalFont);
 
- 	},
 
- 	
 
- 	/*
 
- 	drawMultilineLabel: function(text, x, y){
 
- 		var originalFont = this.getFont();
 
- 		this.setFont(LABEL_FONT_SMOOTH);
 
- 		
 
- 		var boxWidth = 80;
 
- 		x = x - boxWidth/2
 
- 		
 
- 		this._drawMultilineText(text, x, y, boxWidth, null, "middle");
 
- 		this.setFont(originalFont);
 
- 	},
 
- 	*/
 
- 	
 
- 	getStringWidth: function(text, fontAttrs){
 
- 		var textElement = this.g.text(0, 0, text).attr(fontAttrs).hide();
 
- 		var bb = textElement.getBBox();
 
- 		
 
- 		//console.log("string width: ", t.getBBox().width);
 
- 		return textElement.getBBox().width;
 
- 	},
 
- 	getStringHeight: function(text, fontAttrs){
 
- 		var textElement = this.g.text(0, 0, text).attr(fontAttrs).hide();
 
- 		var bb = textElement.getBBox();
 
- 		
 
- 		//console.log("string height: ", t.getBBox().height);
 
- 		return textElement.getBBox().height;
 
- 	},
 
- 	fitTextToWidth: function(original, width) {
 
- 		var text = original;
 
- 		// TODO: move attr on parameters
 
- 		var attr = {font: "11px Arial", opacity: 0};
 
- 		
 
- 		// remove length for "..."
 
- 		var dots = this.g.text(0, 0, "...").attr(attr).hide();
 
- 		var dotsBB = dots.getBBox();
 
- 		
 
- 		var maxWidth = width - dotsBB.width;
 
- 		
 
- 		var textElement = this.g.text(0, 0, text).attr(attr).hide();
 
- 		var bb = textElement.getBBox();
 
- 		
 
- 		// it's a little bit incorrect with "..."
 
- 		while (bb.width > maxWidth && text.length > 0) {
 
- 			text = text.substring(0, text.length - 1);
 
- 			textElement.attr({"text": text});
 
- 			bb = textElement.getBBox();
 
- 		}
 
- 		// remove element from paper
 
- 		textElement.remove();
 
- 		
 
- 		if (text != original) {
 
- 			text = text + "...";
 
- 		}
 
- 		return text;
 
- 	},
 
- 	wrapTextToWidth: function(original, width){
 
- 	
 
- 		//return original;
 
- 		
 
- 		var text = original;
 
- 		var wrappedText = "\n";
 
- 		
 
- 		// TODO: move attr on parameters
 
- 		var attr = {font: "11px Arial", opacity: 0};
 
- 		
 
- 		var textElement = this.g.text(0, 0, wrappedText).attr(attr).hide();
 
- 		var bb = textElement.getBBox();
 
- 		
 
- 		var resultText = "";
 
- 		var i = 0, j = 0;
 
- 		while (text.length > 0) {
 
- 			while (bb.width < width && text.length>0) {
 
- 				// remove "\n"
 
- 				wrappedText = wrappedText.substring(0,wrappedText.length-1);
 
- 				// add new char, add "\n"
 
- 				wrappedText = wrappedText + text.substring(0,1) + "\n";
 
- 				text = text.substring(1);
 
- 				
 
- 				textElement.attr({"text": wrappedText});
 
- 				bb = textElement.getBBox();
 
- 				i++;
 
- 				if (i>200) break;
 
- 			}
 
- 			// remove "\n"
 
- 			wrappedText = wrappedText.substring(0, wrappedText.length - 1);
 
- 			
 
- 			if (text.length == 0) {
 
- 				resultText += wrappedText;
 
- 				break;
 
- 			}
 
- 			
 
- 			// return last char to text
 
- 			text = wrappedText.substring(wrappedText.length-1) + text;
 
- 			// remove last char from wrappedText
 
- 			wrappedText = wrappedText.substring(0, wrappedText.length-1) + "\n";
 
- 			
 
- 			textElement.attr({"text": wrappedText});
 
- 			bb = textElement.getBBox();
 
- 			
 
- 			//console.log(">> ", wrappedText, ", ", text);
 
- 			resultText += wrappedText;
 
- 			wrappedText = "\n";
 
- 			
 
- 			j++;
 
- 			if (j>20) break;
 
- 		}
 
- 		// remove element from paper
 
- 		textElement.remove();
 
- 		
 
- 		return resultText;
 
- 	},
 
- 	
 
- 	wrapTextToWidth2: function(original, width){
 
- 		var text = original;
 
- 		var wrappedText = "\n";
 
- 		
 
- 		// TODO: move attr on parameters
 
- 		var attr = {font: "11px Arial", opacity: 0};
 
- 		
 
- 		var textElement = this.g.text(0, 0, wrappedText).attr(attr).hide();
 
- 		var bb = textElement.getBBox();
 
- 		
 
- 		var resultText = "";
 
- 		var i = 0, j = 0;
 
- 		while (text.length > 0) {
 
- 			while (bb.width < width && text.length>0) {
 
- 				// remove "\n"
 
- 				wrappedText = wrappedText.substring(0,wrappedText.length-1);
 
- 				// add new char, add "\n"
 
- 				wrappedText = wrappedText + text.substring(0,1) + "\n";
 
- 				text = text.substring(1);
 
- 				
 
- 				textElement.attr({"text": wrappedText});
 
- 				bb = textElement.getBBox();
 
- 				i++;
 
- 				if (i>200) break;
 
- 			}
 
- 			// remove "\n"
 
- 			wrappedText = wrappedText.substring(0, wrappedText.length - 1);
 
- 			
 
- 			if (text.length == 0) {
 
- 				resultText += wrappedText;
 
- 				break;
 
- 			}
 
- 			
 
- 			// return last char to text
 
- 			text = wrappedText.substring(wrappedText.length-1) + text;
 
- 			// remove last char from wrappedText
 
- 			wrappedText = wrappedText.substring(0, wrappedText.length-1) + "\n";
 
- 			
 
- 			textElement.attr({"text": wrappedText});
 
- 			bb = textElement.getBBox();
 
- 			
 
- 			//console.log(">> ", wrappedText, ", ", text);
 
- 			resultText += wrappedText;
 
- 			wrappedText = "\n";
 
- 			
 
- 			j++;
 
- 			if (j>20) break;
 
- 		}
 
- 		// remove element from paper
 
- 		textElement.remove();
 
- 		
 
- 		return resultText;
 
- 	},
 
- 	
 
- 	drawUserTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(USERTASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
- 		this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawScriptTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(SCRIPTTASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawServiceTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(SERVICETASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawReceiveTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(RECEIVETASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawSendTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(SENDTASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawManualTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(MANUALTASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawBusinessRuleTask: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawTask(name, x, y, width, height);
 
- 		var img = this.g.image(BUSINESS_RULE_TASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawExpandedSubProcess: function(name, x, y, width, height, isTriggeredByEvent){
 
- 	  this.g.setStart();
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			x = Math.round(x) + .5, y = Math.round(y) + .5;
 
- 		
 
- 		// shape
 
- 		var rect = this.g.rect(x, y, width, height, EXPANDED_SUBPROCESS_CORNER_ROUND);
 
- 		
 
- 		// Use different stroke (dashed)
 
- 		if(isTriggeredByEvent) {
 
- 			rect.attr(EVENT_SUBPROCESS_ATTRS);
 
- 		} else {
 
- 			rect.attr(EXPANDED_SUBPROCESS_ATTRS);
 
- 		}
 
- 		
 
- 		this.setContextToElement(rect);
 
- 		
 
- 		var fontAttr = EXPANDED_SUBPROCESS_FONT;
 
- 		
 
- 		// Include some padding
 
- 		var paddingX = 10;
 
- 		var paddingY = 5;
 
- 		var availableTextSpace = width - paddingX*2;
 
- 		
 
- 		var truncated = this.fitTextToWidth(name, availableTextSpace);
 
- 		var realWidth = this.getStringWidth(truncated, fontAttr);
 
- 		var realHeight = this.getStringHeight(truncated, fontAttr);
 
- 		
 
- 		var textElement = this.g.text(x + width/2 - realWidth*0/2 + 0*paddingX, y + realHeight/2 + paddingY, truncated).attr(fontAttr);
 
- 		
 
- 		var set = this.g.setFinish();
 
- 		// TODO: Expanded Sub Process may has specific handlers
 
- 		//this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawCollapsedSubProcess: function(name, x, y, width, height, isTriggeredByEvent) {
 
- 	  this.g.setStart();
 
- 	  this._drawCollapsedTask(name, x, y, width, height, false);
 
- 	  var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	
 
- 	drawCollapsedCallActivity: function(name, x, y, width, height) {
 
- 	  this.g.setStart();
 
- 		this._drawCollapsedTask(name, x, y, width, height, true);
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "task");
 
- 	},
 
- 	_drawCollapsedTask: function(name, x, y, width, height, thickBorder) {
 
- 		// The collapsed marker is now visualized separately
 
- 		this._drawTask(name, x, y, width, height, thickBorder);
 
- 	},
 
- 	
 
- 	drawCollapsedMarker: function(x, y, width, height){
 
- 		// rectangle
 
- 		var rectangleWidth = MARKER_WIDTH;
 
- 		var rectangleHeight = MARKER_WIDTH;
 
- 		
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			y += .5;
 
- 		
 
- 		var rect = this.g.rect(x + (width - rectangleWidth) / 2, y + height - rectangleHeight - 3, rectangleWidth, rectangleHeight);
 
- 		
 
- 		// plus inside rectangle
 
- 		var cx = rect.attr("x") + rect.attr("width")/2;
 
- 		var cy = rect.attr("y") + rect.attr("height")/2;
 
- 		
 
- 		var line = this.g.path(
 
- 			"M" + cx + " " + (cy+2) + "L" + cx + " " + (cy-2) + 
 
- 			"M" + (cx-2) + " " + cy + "L" + (cx+2) + " " + cy
 
- 		).attr({"stroke-width": this.strokeWidth});
 
- 		
 
- 	},
 
- 	
 
- 	drawActivityMarkers: function(x, y, width, height, multiInstanceSequential, multiInstanceParallel, collapsed){
 
- 		if (collapsed) {
 
- 			if (!multiInstanceSequential && !multiInstanceParallel) {
 
- 				this.drawCollapsedMarker(x, y, width, height);
 
- 			} else {
 
- 				this.drawCollapsedMarker(x - MARKER_WIDTH / 2 - 2, y, width, height);
 
- 				if (multiInstanceSequential) {
 
- 					console.log("is collapsed and multiInstanceSequential");
 
- 					this.drawMultiInstanceMarker(true, x + MARKER_WIDTH / 2 + 2, y, width, height);
 
- 				} else if (multiInstanceParallel) {
 
- 					console.log("is collapsed and multiInstanceParallel");
 
- 					this.drawMultiInstanceMarker(false, x + MARKER_WIDTH / 2 + 2, y, width, height);
 
- 				}
 
- 			}
 
- 		} else {
 
- 			if (multiInstanceSequential) {
 
- 				console.log("is multiInstanceSequential");
 
- 				this.drawMultiInstanceMarker(true, x, y, width, height);
 
- 			} else if (multiInstanceParallel) {
 
- 				console.log("is multiInstanceParallel");
 
- 				this.drawMultiInstanceMarker(false, x, y, width, height);
 
- 			}
 
- 		}
 
- 	},
 
- 	
 
- 	drawGateway: function(x, y, width, height) {
 
- 		
 
- 		var rhombus = this.g.path(	"M" + x + " " + (y + (height / 2)) + 
 
- 									"L" + (x + (width / 2)) + " " + (y + height) + 
 
- 									"L" + (x + width) + " " + (y + (height / 2)) +
 
- 									"L" + (x + (width / 2)) + " " + y +
 
- 									"z"
 
- 								);
 
- 		
 
- 		// white shaddow
 
- 		this.drawShaddow(rhombus);
 
- 		
 
- 		rhombus.attr("stroke-width", this.strokeWidth);
 
- 		rhombus.attr("stroke", Color.SlateGrey);
 
- 		rhombus.attr({fill: Color.white});
 
- 		
 
- 		this.setContextToElement(rhombus);
 
- 		
 
- 		return rhombus;
 
- 	},
 
- 	
 
- 	drawParallelGateway: function(x, y, width, height) {
 
- 	  this.g.setStart();
 
- 	  
 
- 		// rhombus
 
- 		this.drawGateway(x, y, width, height);
 
- 		// plus inside rhombus
 
- 		var originalStroke = this.getStroke();
 
- 		this.setStroke(GATEWAY_TYPE_STROKE);
 
- 		
 
- 		var plus = this.g.path(
 
- 			"M" + (x + 10) + " " + (y + height / 2) + "L" + (x + width - 10) + " " + (y + height / 2) +	// horizontal
 
- 			"M" + (x + width / 2) + " " + (y + height - 10) + "L" + (x + width / 2) + " " + (y + 10)	// vertical
 
- 		);
 
- 		plus.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
 
- 		
 
- 		this.setStroke(originalStroke);
 
- 		
 
- 		var set = this.g.setFinish();
 
- 		this.addHandlers(set, x, y, width, height, "gateway");
 
- 	},
 
- 	
 
- 	drawExclusiveGateway: function(x, y, width, height) {
 
- 	  this.g.setStart();
 
- 	  
 
- 		// rhombus
 
- 		var rhombus = this.drawGateway(x, y, width, height);
 
- 		var quarterWidth = width / 4;
 
- 		var quarterHeight = height / 4;
 
- 		
 
- 		// X inside rhombus
 
- 		var originalStroke = this.getStroke();
 
- 		this.setStroke(GATEWAY_TYPE_STROKE);
 
- 		
 
- 		var iks = this.g.path(
 
- 			"M" + (x + quarterWidth + 3) + " " + (y + quarterHeight + 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + 3 * quarterHeight - 3) + 
 
- 			"M" + (x + quarterWidth + 3) + " " + (y + 3 * quarterHeight - 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + quarterHeight + 3)
 
- 		);
 
- 		iks.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
 
- 		
 
- 		this.setStroke(originalStroke);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "gateway");
 
- 	},
 
- 	
 
- 	drawInclusiveGateway: function(x, y, width, height){
 
- 	  this.g.setStart();
 
- 	  
 
- 		// rhombus
 
- 		this.drawGateway(x, y, width, height);
 
- 		
 
- 		var diameter = width / 4;
 
- 		
 
- 		// circle inside rhombus
 
- 		var originalStroke = this.getStroke();
 
- 		this.setStroke(GATEWAY_TYPE_STROKE);
 
- 		var circle = this.g.ellipse(width/2 + x, height/2 + y, diameter, diameter);
 
- 		circle.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
 
- 		
 
- 		this.setStroke(originalStroke);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "gateway");
 
- 	},
 
- 	
 
- 	drawEventBasedGateway: function(x, y, width, height){
 
- 	  this.g.setStart();
 
- 	  
 
- 		// rhombus
 
- 		this.drawGateway(x, y, width, height);
 
- 		
 
- 		var diameter = width / 2;
 
- 	    // rombus inside rhombus
 
- 	    var originalStroke = this.getStroke();
 
- 		this.setStroke(GATEWAY_TYPE_STROKE);
 
- 	    
 
- 	    
 
- 	    // draw GeneralPath (polygon)
 
- 	    var n=5;
 
- 	    var angle = 2*Math.PI/n;
 
- 	    var x1Points = [];
 
- 	    var y1Points = [];
 
- 		
 
- 		for ( var index = 0; index < n; index++ ) {
 
- 			var v = index*angle - Math.PI/2;
 
- 			x1Points[index] = x + parseInt(Math.round(width/2)) + parseInt(Math.round((width/4)*Math.cos(v)));
 
-         	y1Points[index] = y + parseInt(Math.round(height/2)) + parseInt(Math.round((height/4)*Math.sin(v)));
 
- 		}
 
- 		//g.drawPolygon(x1Points, y1Points, n);
 
- 		
 
- 		var path = "";
 
- 		for ( var index = 0; index < n; index++ ) {
 
- 			if (index == 0) 
 
- 				path += "M";
 
- 			else 
 
- 				path += "L";
 
- 			path += x1Points[index] + "," + y1Points[index];
 
- 		}
 
- 		path += "z";
 
- 		var polygone = this.g.path(path);
 
- 		polygone.attr("stroke-width", this.strokeWidth);
 
- 		polygone.attr("stroke", this.getPaint());
 
- 		
 
- 		this.setStroke(originalStroke);
 
- 		
 
- 		var set = this.g.setFinish();
 
-     this.addHandlers(set, x, y, width, height, "gateway");
 
- 	},
 
- 	
 
- 	/*
 
- 	*  drawMultiInstanceMarker
 
- 	*  drawHighLight
 
- 	*  highLightFlow
 
- 	*/
 
- 	
 
- 	drawMultiInstanceMarker: function(sequential, x, y, width, height) {
 
- 		var rectangleWidth = MARKER_WIDTH;
 
- 		var rectangleHeight = MARKER_WIDTH;
 
- 		
 
- 		// anti smoothing
 
- 		if (this.strokeWidth%2 == 1)
 
- 			x += .5;//, y += .5;
 
- 			
 
- 		var lineX = x + (width - rectangleWidth) / 2;
 
- 		var lineY = y + height - rectangleHeight - 3;
 
- 		
 
- 		var originalStroke = this.getStroke();
 
- 		this.setStroke(MULTI_INSTANCE_STROKE);
 
- 		
 
- 		if (sequential) {
 
- 			var line = this.g.path(
 
- 				"M" + lineX + " " + lineY + 							"L" + (lineX + rectangleWidth) + " " + lineY + 
 
- 				"M" + lineX + " " + (lineY + rectangleHeight / 2) + 	"L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight / 2) + 
 
- 				"M" + lineX + " " + (lineY + rectangleHeight) + 		"L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight)
 
- 			).attr({"stroke-width": this.strokeWidth});
 
- 		} else {
 
- 			var line = this.g.path(
 
- 				"M" + lineX + " " + 							lineY + "L" + lineX + " " + 					(lineY + rectangleHeight) +
 
- 				"M" + (lineX + rectangleWidth / 2) + " " + 	lineY + "L" + (lineX + rectangleWidth / 2) + " " + 	(lineY + rectangleHeight) + 
 
- 				"M" + (lineX + rectangleWidth) + " " + 		lineY + "L" + (lineX + rectangleWidth) + " " + 		(lineY + rectangleHeight)
 
- 			).attr({"stroke-width": this.strokeWidth});
 
- 		}
 
- 		
 
- 		this.setStroke(originalStroke);
 
- 	},
 
- 	
 
- 	drawHighLight: function(x, y, width, height){
 
- 		var originalPaint = this.getPaint();
 
- 		var originalStroke = this.getStroke();
 
- 		
 
- 		this.setPaint(HIGHLIGHT_COLOR);
 
- 		this.setStroke(THICK_TASK_BORDER_STROKE);
 
- 		//var c = this.g.rect(x - width/2 - THICK_TASK_BORDER_STROKE, y - height/2 - THICK_TASK_BORDER_STROKE, width + THICK_TASK_BORDER_STROKE*2, height + THICK_TASK_BORDER_STROKE*2, 5);
 
- 		var rect = this.g.rect(x - THICK_TASK_BORDER_STROKE, y - THICK_TASK_BORDER_STROKE, width + THICK_TASK_BORDER_STROKE*2, height + THICK_TASK_BORDER_STROKE*2, TASK_CORNER_ROUND);
 
- 		rect.attr("stroke-width", this.strokeWidth);
 
- 		rect.attr("stroke", this.getPaint());
 
- 		
 
- 		this.setPaint(originalPaint);
 
- 		this.setStroke(originalStroke);
 
- 	},
 
- 	
 
- 	highLightActivity: function(activityId){
 
- 		var shape = this.g.getById(activityId);
 
- 		if (!shape) {
 
- 			console.error("Activity " + activityId + " not found");
 
- 			return;
 
- 		}
 
- 		
 
- 		var contextObject = shape.data("contextObject");
 
- 		if (contextObject)
 
- 			console.log("--> highLightActivity: ["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
 
- 		else
 
- 			console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
 
- 		
 
- 		shape.attr("stroke-width", THICK_TASK_BORDER_STROKE);
 
- 		shape.attr("stroke", HIGHLIGHT_COLOR);
 
- 	},
 
- 	
 
- 	highLightFlow: function(flowId){
 
- 		var shapeFlow = this.g.getById(flowId);
 
- 		if (!shapeFlow) {
 
- 			console.error("Flow " + flowId + " not found");
 
- 			return;
 
- 		}
 
- 		
 
- 		var contextObject = shapeFlow.data("contextObject");
 
- 		if (contextObject)
 
- 			console.log("--> highLightFlow: ["+contextObject.id+"] " + contextObject.flow);
 
- 		//console.log("--> highLightFlow: ", flow.flow, flow.data("set"));
 
- 		
 
- 		var st = shapeFlow.data("set");
 
- 		
 
- 		st.attr("stroke-width", SEQUENCEFLOW_HIGHLIGHT_STROKE);
 
- 		st.attr("stroke", HIGHLIGHT_COLOR);
 
- 		var withArrowHead = shapeFlow.data("withArrowHead");
 
- 		if (withArrowHead)
 
- 			st[1].attr("fill", HIGHLIGHT_COLOR);
 
- 		
 
- 		st.forEach(function(el){
 
- 			//console.log("---->", el);
 
- 			//el.attr("")
 
- 		});
 
- 	},
 
- 	
 
- 	_drawClock: function(cx, cy, width, height){
 
- 		
 
- 		var circle = this.g.ellipse(cx, cy, 1, 1).attr({stroke:"none", fill: Color.get(232, 239, 241)});
 
- 		//var c = this.g.ellipse(cx, cy, width, height).attr({stroke:"none", fill: Color.red});
 
- 		//x = cx - width/2;
 
- 		//y = cy - height/2;
 
- 	
 
- 		var clock = this.g.path(
 
- 		/* outer circle */ "M15.5,2.374		C8.251,2.375,2.376,8.251,2.374,15.5		C2.376,22.748,8.251,28.623,15.5,28.627c7.249-0.004,13.124-5.879,13.125-13.127C28.624,8.251,22.749,2.375,15.5,2.374z" +
 
- 		/* inner circle */ "M15.5,26.623	C8.909,26.615,4.385,22.09,4.375,15.5	C4.385,8.909,8.909,4.384,15.5,4.374c4.59,0.01,11.115,3.535,11.124,11.125C26.615,22.09,22.091,26.615,15.5,26.623z" +
 
- 		/*  9 */ "M8.625,15.5c-0.001-0.552-0.448-0.999-1.001-1c-0.553,0-1,0.448-1,1c0,0.553,0.449,1,1,1C8.176,16.5,8.624,16.053,8.625,15.5z" +
 
- 		/*  8 */ "M8.179,18.572c-0.478,0.277-0.642,0.889-0.365,1.367c0.275,0.479,0.889,0.641,1.365,0.365c0.479-0.275,0.643-0.887,0.367-1.367C9.27,18.461,8.658,18.297,8.179,18.572z" +
 
- 		/* 10 */ "M9.18,10.696c-0.479-0.276-1.09-0.112-1.366,0.366s-0.111,1.09,0.365,1.366c0.479,0.276,1.09,0.113,1.367-0.366C9.821,11.584,9.657,10.973,9.18,10.696z" +
 
- 		/*  2 */ "M22.822,12.428c0.478-0.275,0.643-0.888,0.366-1.366c-0.275-0.478-0.89-0.642-1.366-0.366c-0.479,0.278-0.642,0.89-0.366,1.367C21.732,12.54,22.344,12.705,22.822,12.428z" +
 
- 		/*  7 */ "M12.062,21.455c-0.478-0.275-1.089-0.111-1.366,0.367c-0.275,0.479-0.111,1.09,0.366,1.365c0.478,0.277,1.091,0.111,1.365-0.365C12.704,22.344,12.54,21.732,12.062,21.455z" +
 
- 		/* 11 */ "M12.062,9.545c0.479-0.276,0.642-0.888,0.366-1.366c-0.276-0.478-0.888-0.642-1.366-0.366s-0.642,0.888-0.366,1.366C10.973,9.658,11.584,9.822,12.062,9.545z" +
 
- 		/*  4 */ "M22.823,18.572c-0.48-0.275-1.092-0.111-1.367,0.365c-0.275,0.479-0.112,1.092,0.367,1.367c0.477,0.275,1.089,0.113,1.365-0.365C23.464,19.461,23.3,18.848,22.823,18.572z" +
 
- 		/*  2 */ "M19.938,7.813c-0.477-0.276-1.091-0.111-1.365,0.366c-0.275,0.48-0.111,1.091,0.366,1.367s1.089,0.112,1.366-0.366C20.581,8.702,20.418,8.089,19.938,7.813z" +
 
- 		/*  3 */ "M23.378,14.5c-0.554,0.002-1.001,0.45-1.001,1c0.001,0.552,0.448,1,1.001,1c0.551,0,1-0.447,1-1C24.378,14.949,23.929,14.5,23.378,14.5z" +
 
- 		/* arrows */ "M15.501,6.624c-0.552,0-1,0.448-1,1l-0.466,7.343l-3.004,1.96c-0.478,0.277-0.642,0.889-0.365,1.365c0.275,0.479,0.889,0.643,1.365,0.367l3.305-1.676C15.39,16.99,15.444,17,15.501,17c0.828,0,1.5-0.671,1.5-1.5l-0.5-7.876C16.501,7.072,16.053,6.624,15.501,6.624z" +
 
- 		/*  9 */ "M15.501,22.377c-0.552,0-1,0.447-1,1s0.448,1,1,1s1-0.447,1-1S16.053,22.377,15.501,22.377z" +
 
- 		/*  8 */ "M18.939,21.455c-0.479,0.277-0.643,0.889-0.366,1.367c0.275,0.477,0.888,0.643,1.366,0.365c0.478-0.275,0.642-0.889,0.366-1.365C20.028,21.344,19.417,21.18,18.939,21.455z" +
 
- 		"");
 
- 		clock.attr({fill: Color.black, stroke: "none"});
 
- 		//clock.transform("t " + (cx-29.75/2) + " " + (cy-29.75/2));
 
- 		//clock.transform("...s 0.85");
 
- 		
 
- 		//clock.transform("...s " + .85 + " " + .85);
 
- 		clock.transform("t " + (-2.374) + " " + (-2.374)	);
 
- 		clock.transform("...t -" + (15.5-2.374) + " -" + (15.5-2.374)	);
 
- 		clock.transform("...s " + 1*(width/35) + " " + 1*(height/35));
 
- 		clock.transform("...T " + cx + " " + cy);
 
- 		//clock.transform("t " + (cx-width/2) + " " + (cy-height/2));
 
- 		
 
- 		//console.log(".getBBox(): ", clock.getBBox());
 
- 		//console.log(".attr(): ", c.attrs);
 
- 		circle.attr("rx", clock.getBBox().width/2);
 
- 		circle.attr("ry", clock.getBBox().height/2);
 
- 		
 
- 		//return circle
 
- 	},
 
- 	
 
- 	_drawPentagon: function(cx, cy, width, height, filled){
 
- 		// draw GeneralPath (polygon)
 
- 	    var n=5;
 
- 	    var angle = 2*Math.PI/n;
 
- 	    var waypoints = [];
 
- 		
 
- 		for ( var index = 0; index < n; index++ ) {
 
- 			var v = index*angle - Math.PI/2;
 
- 			var point = {};
 
- 			point.x = -width*1.2/2 + parseInt(Math.round(width*1.2/2)) + parseInt(Math.round((width*1.2/4)*Math.cos(v)));
 
-         	point.y = -height*1.2/2 + parseInt(Math.round(height*1.2/2)) + parseInt(Math.round((height*1.2/4)*Math.sin(v)));
 
- 			waypoints[index] = point;
 
- 		}
 
- 		
 
- 		var polygone = new Polygone(waypoints, this.getStroke());
 
- 		polygone.element = this.g.path(polygone.path);
 
- 		if (filled)
 
- 			polygone.element.attr("fill", Color.black);
 
- 		else
 
- 			polygone.element.attr("fill", Color.white);
 
- 		
 
- 		polygone.element.transform("s " + 1*(width/35) + " " + 1*(height/35));
 
- 		polygone.element.transform("...T " + cx + " " + cy);
 
- 	},
 
- 	
 
- 	//_drawMultilineText: function(text, x, y, boxWidth, boxHeight, textAnchor) {
 
- 	_drawMultilineText: function(text, x, y, boxWidth, boxHeight, verticalAlign, horizontalAlign) {
 
- 		if (!text || text == "") 
 
- 			return;
 
- 			
 
- 		// Autostretch boxHeight if boxHeight is 0
 
- 		if (boxHeight == 0)
 
- 		  verticalAlign = MULTILINE_VERTICAL_ALIGN_TOP;	  
 
- 	
 
- 		//var TEXT_PADDING = 3;
 
- 		var width = boxWidth;
 
- 		if (boxHeight)
 
- 			var height = boxHeight;
 
- 	
 
- 		var layouts = [];
 
- 		
 
- 		//var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
 
- 		var font = this.getFont();
 
- 		var measurer = new LineBreakMeasurer(this.g, x, y, text, font);
 
- 		var lineHeight = measurer.rafaelTextObject.getBBox().height;
 
- 		//console.log("text: ", text.replace(/\n/g, "?"));
 
- 		
 
- 		if (height) {
 
- 			var availableLinesCount = parseInt(height/lineHeight);
 
- 			//console.log("availableLinesCount: " + availableLinesCount);
 
- 		}
 
- 		
 
- 		var i = 1;
 
- 		while (measurer.getPosition() < measurer.text.getEndIndex()) {
 
- 			var layout = measurer.nextLayout(width);
 
- 			//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
 
- 			
 
- 			if (layout != null) {
 
- 				// TODO: and check if measurer has next layout. If no then don't draw  dots
 
- 				if (!availableLinesCount || i < availableLinesCount) {
 
- 					layouts.push(layout);
 
- 				} else {
 
- 					layouts.push(this.fitTextToWidth(layout + "...", boxWidth));
 
- 					break;
 
- 				}
 
- 			}
 
- 			i++;
 
- 		};
 
- 		//console.log(layouts);
 
- 		
 
- 		measurer.rafaelTextObject.attr({"text": layouts.join("\n")});
 
- 		
 
- 		if (horizontalAlign)
 
- 			measurer.rafaelTextObject.attr({"text-anchor": horizontalAlign}); // end, middle, start
 
- 			
 
- 		var bb = measurer.rafaelTextObject.getBBox();
 
- 		// TODO: there is somethin wrong with wertical align. May be: measurer.rafaelTextObject.attr({"y": y + height/2 - bb.height/2})
 
- 		measurer.rafaelTextObject.attr({"y": y + bb.height/2});
 
- 		//var bb = measurer.rafaelTextObject.getBBox();
 
- 		
 
- 		if (measurer.rafaelTextObject.attr("text-anchor") == MULTILINE_HORIZONTAL_ALIGN_MIDDLE )
 
- 			measurer.rafaelTextObject.attr("x",  x +  boxWidth/2);
 
- 		else if (measurer.rafaelTextObject.attr("text-anchor") == MULTILINE_HORIZONTAL_ALIGN_RIGHT )
 
- 			measurer.rafaelTextObject.attr("x",  x +  boxWidth);
 
- 		
 
- 		var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
 
- 		//var box = this.g.rect(x+.5, y + .5, width, height).attr(boxStyle);
 
- 		var textAreaCX = x + boxWidth/2;
 
- 				var height = boxHeight;
 
- 				if (!height) height = bb.height;
 
- 				var textAreaCY = y + height/2;
 
- 				var dotLeftTop = this.g.ellipse(x, y, 3, 3).attr({"stroke-width": 0, fill: Color.LightSteelBlue, stroke: "none"}).hide();
 
- 				var dotCenter = this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"}).hide();
 
- 				/*
 
- 				// real bbox
 
- 				var bb = measurer.rafaelTextObject.getBBox();
 
- 				var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
 
- 				*/
 
- 				var rect = this.g.rect(x, y, boxWidth, height).attr({"stroke-width": 1}).attr(boxStyle).hide();
 
- 				var debugSet = this.g.set();
 
- 				debugSet.push(dotLeftTop, dotCenter, rect);
 
- 				//debugSet.show();
 
- 	},
 
- 	
 
- 	drawTextAnnotation: function(text, x, y, width, height){
 
- 		var lineLength = 18;
 
- 		var path = [];
 
- 		  path.push(["M", x + lineLength, y]);
 
- 		  path.push(["L", x, y]);
 
- 		  path.push(["L", x, y + height]);
 
- 		  path.push(["L", x + lineLength, y + height]);
 
- 		  
 
- 		  path.push(["L", x + lineLength, y + height -1]);
 
- 		  path.push(["L", x + 1, y + height -1]);
 
- 		  path.push(["L", x + 1, y + 1]);
 
- 		  path.push(["L", x + lineLength, y + 1]);
 
- 		  path.push(["z"]);
 
- 	
 
- 		var textAreaLines = this.g.path(path);
 
- 		
 
- 	  var boxWidth = width - (2 * ANNOTATION_TEXT_PADDING);
 
-       var boxHeight = height - (2 * ANNOTATION_TEXT_PADDING);
 
-       var boxX = x + width/2 - boxWidth/2;
 
-       var boxY = y + height/2 - boxHeight/2;
 
-       
 
-       // for debug
 
-           var rectStyle = {stroke: Color(112, 146, 190), "stroke-width": 1.0, "stroke-dasharray": "- "};
 
-           var r = this.g.rect(boxX, boxY, boxWidth, boxHeight).attr(rectStyle);
 
- 	  //
 
-       
 
- 	  this.drawAnnotationText(text, boxX, boxY, boxWidth, boxHeight);
 
- 	},
 
- 	
 
- 	drawLabel111111111: function(text, x, y, width, height, labelAttrs){
 
- 		var  debug = false;
 
- 		
 
- 		// text
 
- 		if (text != null && text != undefined && text != "") {
 
- 			var attr = LABEL_FONT;
 
- 			
 
- 			//console.log("x", x, "y", y, "width", width, "height", height );
 
- 			
 
- 			wrappedText = text;
 
- 			if (labelAttrs && labelAttrs.wrapWidth) {
 
- 				wrappedText = this.wrapTextToWidth(wrappedText, labelAttrs.wrapWidth);
 
- 			}
 
- 			var realWidth = this.getStringWidth(wrappedText, attr);
 
- 			var realHeight = this.getStringHeight(wrappedText, attr);
 
- 			
 
- 			var textAreaCX = x + width/2;
 
- 			var textAreaCY = y + 3 + height + this.getStringHeight(wrappedText, attr)/2;
 
- 			
 
- 			var textX = textAreaCX;
 
- 			var textY = textAreaCY;
 
- 			var textAttrs = {};
 
- 			if (labelAttrs && labelAttrs.align) {
 
- 				switch (labelAttrs.align) {
 
- 					case "left": 
 
- 						textAttrs["text-anchor"] = "start"; 
 
- 						textX = textX - realWidth/2;
 
- 					break;
 
- 					case "center": 
 
- 						textAttrs["text-anchor"] = "middle"; 
 
- 					break;
 
- 					case "right": 
 
- 						textAttrs["text-anchor"] = "end"; 
 
- 						textX = textX + realWidth/2;
 
- 					break;
 
- 				}
 
- 			}
 
- 			if (labelAttrs && labelAttrs.wrapWidth) {
 
- 				if (true) {
 
- 					// Draw frameborder
 
- 					var textAreaStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
 
- 					var textAreaX = textAreaCX - realWidth/2;
 
- 					var textAreaY = textAreaCY+.5 - realHeight/2;
 
- 					var textArea = this.g.rect(textAreaX, textAreaY, realWidth, realHeight).attr(textAreaStyle);
 
- 					
 
- 					var textAreaLines = this.g.path("M" + textAreaX + " " + textAreaY + "L" + (textAreaX+realWidth) + " " + (textAreaY+realHeight) + "M" +  + (textAreaX+realWidth) + " " + textAreaY + "L" + textAreaX + " " + (textAreaY+realHeight));
 
- 					textAreaLines.attr(textAreaStyle);
 
- 					
 
- 					this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"});
 
- 				}
 
- 			}
 
- 			
 
- 			var label = this.g.text(textX, textY, wrappedText).attr(attr).attr(textAttrs);
 
- 			//label.id = Raphael.createUUID();
 
- 			//console.log("label ", label.id, ", ", wrappedText);
 
- 			
 
- 			if (this.fontSmoothing) {
 
- 				label.attr({stroke: LABEL_COLOR, "stroke-width":.4});
 
- 			}
 
- 			
 
- 			// debug
 
- 			if (debug) {
 
- 				var imageAreaStyle = {stroke: Color.grey61, "stroke-width": 1.0, "stroke-dasharray": "- "};
 
- 				var imageArea = this.g.rect(x+.5, y+.5, width, height).attr(imageAreaStyle);
 
- 				var imageAreaLines = this.g.path("M" + x + " " + y + "L" + (x+width) + " " + (y+height) + "M" +  + (x+width) + " " + y + "L" + x + " " + (y+height));
 
- 				imageAreaLines.attr(imageAreaStyle);
 
- 				var dotStyle = {fill: Color.Coral, stroke: "none"};
 
- 				this.g.ellipse(x, y, 3, 3).attr(dotStyle);
 
- 				this.g.ellipse(x+width, y, 2, 2).attr(dotStyle);
 
- 				this.g.ellipse(x+width, y+height, 2, 2).attr(dotStyle);
 
- 				this.g.ellipse(x, y+height, 2, 2).attr(dotStyle);
 
- 			}
 
- 			
 
- 			return label;
 
- 		}
 
- 	},
 
- 	
 
- 	vvoid: function(){}
 
- };
 
 
  |