zhangFan / station · 提交

转到一个项目

作者 zhangFan
提交 ffacb3eb78e68551b4117d4bf8913e93893a477d 1 个父辈 4d4a99d0

机场口岸通关物流辅助管理系统 

运行版
内嵌 并排对比
正在显示 28 个修改的文件 包含 4865 行增加 和 0 行删除

要显示太多修改。
重新载入完整差异 差异文件 邮件补丁

为保证性能只显示 28 of 28+ 个文件。

  1 +<html>
  2 +<head>
  3 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 +
  5 + <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  6 + <script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
  7 + <script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
  8 +
  9 + <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
  10 + <script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
  11 + <script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>
  12 +
  13 + <script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
  14 + <script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
  15 + <script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
  16 + <script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
  17 + <script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
  18 + <script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
  19 + <script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
  20 +
  21 + <style type="text/css" media="screen">
  22 +
  23 + </style>
  24 +</head>
  25 +<body>
  26 +<div class="wrapper">
  27 + <div id="pb1"></div>
  28 + <div id="overlayBox" >
  29 + <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
  30 + <div id="diagramHolder" class="diagramHolder"></div>
  31 + <div class="diagram-info" id="diagramInfo"></div>
  32 + </div>
  33 +</div>
  34 +<script language='javascript'>
  35 +var DiagramGenerator = {};
  36 +var pb1;
  37 +$(document).ready(function(){
  38 + var query_string = {};
  39 + var query = window.location.search.substring(1);
  40 + var vars = query.split("&");
  41 + for (var i=0;i<vars.length;i++) {
  42 + var pair = vars[i].split("=");
  43 + query_string[pair[0]] = pair[1];
  44 + }
  45 +
  46 + var processDefinitionId = query_string["processDefinitionId"];
  47 + var processInstanceId = query_string["processInstanceId"];
  48 +
  49 + console.log("Initialize progress bar");
  50 +
  51 + pb1 = new $.ProgressBar({
  52 + boundingBox: '#pb1',
  53 + label: 'Progressbar!',
  54 + on: {
  55 + complete: function() {
  56 + console.log("Progress Bar COMPLETE");
  57 + this.set('label', 'complete!');
  58 + if (processInstanceId) {
  59 + ProcessDiagramGenerator.drawHighLights(processInstanceId);
  60 + }
  61 + },
  62 + valueChange: function(e) {
  63 + this.set('label', e.newVal + '%');
  64 + }
  65 + },
  66 + value: 0
  67 + });
  68 + console.log("Progress bar inited");
  69 +
  70 + ProcessDiagramGenerator.options = {
  71 + diagramBreadCrumbsId: "diagramBreadCrumbs",
  72 + diagramHolderId: "diagramHolder",
  73 + diagramInfoId: "diagramInfo",
  74 + on: {
  75 + click: function(canvas, element, contextObject){
  76 + var mouseEvent = this;
  77 + console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  78 +
  79 + if (contextObject.getProperty("type") == "callActivity") {
  80 + var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
  81 + var processDefinitons = contextObject.getProperty("processDefinitons");
  82 + var processDefiniton = processDefinitons[0];
  83 + console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);
  84 +
  85 + // Load processDefinition
  86 + ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
  87 + }
  88 + },
  89 + rightClick: function(canvas, element, contextObject){
  90 + var mouseEvent = this;
  91 + console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  92 + },
  93 + over: function(canvas, element, contextObject){
  94 + var mouseEvent = this;
  95 + //console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  96 +
  97 + // TODO: show tooltip-window with contextObject info
  98 + ProcessDiagramGenerator.showActivityInfo(contextObject);
  99 + },
  100 + out: function(canvas, element, contextObject){
  101 + var mouseEvent = this;
  102 + //console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
  103 +
  104 + ProcessDiagramGenerator.hideInfo();
  105 + }
  106 + }
  107 + };
  108 +
  109 + var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
  110 + var shortenedUrl = window.document.location.href.replace(baseUrl, "");
  111 + baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));
  112 +
  113 + ActivitiRest.options = {
  114 + processInstanceHighLightsUrl: baseUrl + "/act/service/process-instance/{processInstanceId}/highlights?callback=?",
  115 + processDefinitionUrl: baseUrl + "/act/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
  116 + processDefinitionByKeyUrl: baseUrl + "/act/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?",
  117 + processInstanceUrl: baseUrl + "/act/service/process-instance/{processInstanceId}/diagram-layout?callback=?"
  118 + };
  119 +
  120 + if (processDefinitionId) {
  121 + ProcessDiagramGenerator.drawDiagram(processDefinitionId);
  122 +
  123 + } else {
  124 + alert("processDefinitionId parameter is required");
  125 + }
  126 +});
  127 +
  128 +
  129 +</script>
  130 +</body>
  131 +</html>
  1 +var ActivitiRest = {
  2 + options: {},
  3 + getProcessDefinitionByKey: function(processDefinitionKey, callback) {
  4 + var url = Lang.sub(this.options.processDefinitionByKeyUrl, {processDefinitionKey: processDefinitionKey});
  5 +
  6 + $.ajax({
  7 + url: url,
  8 + dataType: 'jsonp',
  9 + cache: false,
  10 + async: true,
  11 + success: function(data, textStatus) {
  12 + var processDefinition = data;
  13 + if (!processDefinition) {
  14 + console.error("Process definition '" + processDefinitionKey + "' not found");
  15 + } else {
  16 + callback.apply({processDefinitionId: processDefinition.id});
  17 + }
  18 + }
  19 + }).done(function(data, textStatus) {
  20 + console.log("ajax done");
  21 + }).fail(function(jqXHR, textStatus, error){
  22 + console.error('Get diagram layout['+processDefinitionKey+'] failure: ', textStatus, 'error: ', error, jqXHR);
  23 + });
  24 + },
  25 +
  26 + getProcessDefinition: function(processDefinitionId, callback) {
  27 + var url = Lang.sub(this.options.processDefinitionUrl, {processDefinitionId: processDefinitionId});
  28 +
  29 + $.ajax({
  30 + url: url,
  31 + dataType: 'jsonp',
  32 + cache: false,
  33 + async: true,
  34 + success: function(data, textStatus) {
  35 + var processDefinitionDiagramLayout = data;
  36 + if (!processDefinitionDiagramLayout) {
  37 + console.error("Process definition diagram layout '" + processDefinitionId + "' not found");
  38 + return;
  39 + } else {
  40 + callback.apply({processDefinitionDiagramLayout: processDefinitionDiagramLayout});
  41 + }
  42 + }
  43 + }).done(function(data, textStatus) {
  44 + console.log("ajax done");
  45 + }).fail(function(jqXHR, textStatus, error){
  46 + console.log('Get diagram layout['+processDefinitionId+'] failure: ', textStatus, jqXHR);
  47 + });
  48 + },
  49 +
  50 + getHighLights: function(processInstanceId, callback) {
  51 + var url = Lang.sub(this.options.processInstanceHighLightsUrl, {processInstanceId: processInstanceId});
  52 +
  53 + $.ajax({
  54 + url: url,
  55 + dataType: 'jsonp',
  56 + cache: false,
  57 + async: true,
  58 + success: function(data, textStatus) {
  59 + console.log("ajax returned data");
  60 + var highLights = data;
  61 + if (!highLights) {
  62 + console.log("highLights not found");
  63 + return;
  64 + } else {
  65 + callback.apply({highLights: highLights});
  66 + }
  67 + }
  68 + }).done(function(data, textStatus) {
  69 + console.log("ajax done");
  70 + }).fail(function(jqXHR, textStatus, error){
  71 + console.log('Get HighLights['+processInstanceId+'] failure: ', textStatus, jqXHR);
  72 + });
  73 + }
  74 +};
  1 +/** * * @author Tom Baeyens * @author (Javascript) Dmitry Farafonov */ var ActivityImpl = function(activityJson){ this.outgoingTransitions = []; this.outgoingTransitions = []; this.incomingTransitions = []; this.activityBehavior = null; this.parent = null; this.isScope = false; this.isAsync = false; this.isExclusive = false; this.x = -1; this.y = -1; this.width = -1; this.height = -1; this.properties = {}; //console.log("activityJson: ", activityJson); if (activityJson != undefined) { this.setId(activityJson.activityId); for (var propertyName in activityJson.properties) { this.setProperty(propertyName, activityJson.properties[propertyName]); } //this.setProperty("name", activityJson.activityName); //this.setProperty("type", activityJson.activityType); this.setX(activityJson.x); this.setY(activityJson.y); this.setWidth(activityJson.width); this.setHeight(activityJson.height); if (activityJson.multiInstance) this.setProperty("multiInstance", activityJson.multiInstance); if (activityJson.collapsed) { this.setProperty("collapsed", activityJson.collapsed); } if (activityJson.isInterrupting != undefined) this.setProperty("isInterrupting", activityJson.isInterrupting); } }; ActivityImpl.prototype = { outgoingTransitions: [], outgoingTransitions: [], incomingTransitions: [], activityBehavior: null, parent: null, isScope: false, isAsync: false, isExclusive: false, id: null, properties: {}, // Graphical information x: -1, y: -1, width: -1, height: -1, setId: function(id){ this.id = id; }, getId: function(){ return this.id; }, setProperty: function(name, value){ this.properties[name] = value; }, getProperty: function(name){ return this.properties[name]; }, createOutgoingTransition: function(transitionId){ }, toString: function(id) { return "Activity("+id+")"; }, getParentActivity: function(){ /* if (parent instanceof ActivityImpl) { 79 return (ActivityImpl) parent; 80 } 81 return null; */ return this.parent; }, // restricted setters /////////////////////////////////////////////////////// setOutgoingTransitions: function(outgoingTransitions){ this.outgoingTransitions = outgoingTransitions; }, setParent: function(parent){ this.parent = parent; }, setIncomingTransitions: function(incomingTransitions){ this.incomingTransitions = incomingTransitions; }, // getters and setters ////////////////////////////////////////////////////// getOutgoingTransitions: function(){ return this.outgoingTransitions; }, getActivityBehavior: function(){ return this.activityBehavior; }, setActivityBehavior: function(activityBehavior){ this.activityBehavior = activityBehavior; }, getParent: function(){ return this.parent; }, getIncomingTransitions: function(){ return this.incomingTransitions; }, isScope: function(){ return this.isScope; }, setScope: function(isScope){ this.isScope = isScope; }, getX: function(){ return this.x; }, setX: function(x){ this.x = x; }, getY: function(){ return this.y; }, setY: function(y){ this.y = y; }, getWidth: function(){ return this.width; }, setWidth: function(width){ this.width = width; }, getHeight: function(){ return this.height; }, setHeight: function(height){ this.height = height; }, isAsync: function() { return this.isAsync; }, setAsync: function(isAsync) { this.isAsync = isAsync; }, isExclusive: function() { return this.isExclusive; }, setExclusive: function(isExclusive) { this.isExclusive = isExclusive; }, vvoid: function(){} };
  1 +/**
  2 + * Web color table
  3 + *
  4 + * @author Dmitry Farafonov
  5 + */
  6 +
  7 +var Color = {
  8 + /**
  9 + * The color white. In the default sRGB space.
  10 + */
  11 + white : Raphael.getRGB("rgb(255,255,255)"),
  12 +
  13 + /**
  14 + * The color white. In the default sRGB space.
  15 + */
  16 + WHITE : this.white,
  17 +
  18 + /**
  19 + * The color light gray. In the default sRGB space.
  20 + */
  21 + lightGray : Raphael.getRGB("rgb(192, 192, 192)"),
  22 +
  23 + /**
  24 + * The color light gray. In the default sRGB space.
  25 + */
  26 + LIGHT_GRAY : this.lightGray,
  27 +
  28 + /**
  29 + * The color gray. In the default sRGB space.
  30 + */
  31 + gray : Raphael.getRGB("rgb(128, 128, 128)"),
  32 +
  33 + /**
  34 + * The color gray. In the default sRGB space.
  35 + */
  36 + GRAY : this.gray,
  37 +
  38 + /**
  39 + * The color dark gray. In the default sRGB space.
  40 + */
  41 + darkGray : Raphael.getRGB("rgb(64, 64, 64)"),
  42 +
  43 + /**
  44 + * The color dark gray. In the default sRGB space.
  45 + */
  46 + DARK_GRAY : this.darkGray,
  47 +
  48 + /**
  49 + * The color black. In the default sRGB space.
  50 + */
  51 + black : Raphael.getRGB("rgb(0, 0, 0)"),
  52 +
  53 + /**
  54 + * The color black. In the default sRGB space.
  55 + */
  56 + BLACK : this.black,
  57 +
  58 + /**
  59 + * The color red. In the default sRGB space.
  60 + */
  61 + red : Raphael.getRGB("rgb(255, 0, 0)"),
  62 +
  63 + /**
  64 + * The color red. In the default sRGB space.
  65 + */
  66 + RED : this.red,
  67 +
  68 + /**
  69 + * The color pink. In the default sRGB space.
  70 + */
  71 + pink : Raphael.getRGB("rgb(255, 175, 175)"),
  72 +
  73 + /**
  74 + * The color pink. In the default sRGB space.
  75 + */
  76 + PINK : this.pink,
  77 +
  78 + /**
  79 + * The color orange. In the default sRGB space.
  80 + */
  81 + orange : Raphael.getRGB("rgb(255, 200, 0)"),
  82 +
  83 + /**
  84 + * The color orange. In the default sRGB space.
  85 + */
  86 + ORANGE : this.orange,
  87 +
  88 + /**
  89 + * The color yellow. In the default sRGB space.
  90 + */
  91 + yellow : Raphael.getRGB("rgb(255, 255, 0)"),
  92 +
  93 + /**
  94 + * The color yellow. In the default sRGB space.
  95 + */
  96 + YELLOW : this.yellow,
  97 +
  98 + /**
  99 + * The color green. In the default sRGB space.
  100 + */
  101 + green : Raphael.getRGB("rgb(0, 255, 0)"),
  102 +
  103 + /**
  104 + * The color green. In the default sRGB space.
  105 + */
  106 + GREEN : this.green,
  107 +
  108 + /**
  109 + * The color magenta. In the default sRGB space.
  110 + */
  111 + magenta : Raphael.getRGB("rgb(255, 0, 255)"),
  112 +
  113 + /**
  114 + * The color magenta. In the default sRGB space.
  115 + */
  116 + MAGENTA : this.magenta,
  117 +
  118 + /**
  119 + * The color cyan. In the default sRGB space.
  120 + */
  121 + cyan : Raphael.getRGB("rgb(0, 255, 255)"),
  122 +
  123 + /**
  124 + * The color cyan. In the default sRGB space.
  125 + */
  126 + CYAN : this.cyan,
  127 +
  128 + /**
  129 + * The color blue. In the default sRGB space.
  130 + */
  131 + blue : Raphael.getRGB("rgb(0, 0, 255)"),
  132 +
  133 + /**
  134 + * The color blue. In the default sRGB space.
  135 + */
  136 + BLUE : this.blue,
  137 +
  138 + /************************************************************************/
  139 +
  140 + // http://www.stm.dp.ua/web-design/color-html.php
  141 +
  142 + Snow : Raphael.getRGB("#FFFAFA "), // 255 250 250
  143 + GhostWhite : Raphael.getRGB("#F8F8FF "), // 248 248 255
  144 + WhiteSmoke : Raphael.getRGB("#F5F5F5 "), // 245 245 245
  145 + Gainsboro : Raphael.getRGB("#DCDCDC "), // 220 220 220
  146 + FloralWhite : Raphael.getRGB("#FFFAF0 "), // 255 250 240
  147 + OldLace : Raphael.getRGB("#FDF5E6 "), // 253 245 230
  148 + Linen : Raphael.getRGB("#FAF0E6 "), // 250 240 230
  149 + AntiqueWhite : Raphael.getRGB("#FAEBD7 "), // 250 235 215
  150 + PapayaWhip : Raphael.getRGB("#FFEFD5 "), // 255 239 213
  151 + BlanchedAlmond : Raphael.getRGB("#FFEBCD "), // 255 235 205
  152 + Bisque : Raphael.getRGB("#FFE4C4 "), // 255 228 196
  153 + PeachPuff : Raphael.getRGB("#FFDAB9 "), // 255 218 185
  154 + NavajoWhite : Raphael.getRGB("#FFDEAD "), // 255 222 173
  155 + Moccasin : Raphael.getRGB("#FFE4B5 "), // 255 228 181
  156 + Cornsilk : Raphael.getRGB("#FFF8DC "), // 255 248 220
  157 + Ivory : Raphael.getRGB("#FFFFF0 "), // 255 255 240
  158 + LemonChiffon : Raphael.getRGB("#FFFACD "), // 255 250 205
  159 + Seashell : Raphael.getRGB("#FFF5EE "), // 255 245 238
  160 + Honeydew : Raphael.getRGB("#F0FFF0 "), // 240 255 240
  161 + MintCream : Raphael.getRGB("#F5FFFA "), // 245 255 250
  162 + Azure : Raphael.getRGB("#F0FFFF "), // 240 255 255
  163 + AliceBlue : Raphael.getRGB("#F0F8FF "), // 240 248 255
  164 + lavender : Raphael.getRGB("#E6E6FA "), // 230 230 250
  165 + LavenderBlush : Raphael.getRGB("#FFF0F5 "), // 255 240 245
  166 + MistyRose : Raphael.getRGB("#FFE4E1 "), // 255 228 225
  167 + White : Raphael.getRGB("#FFFFFF "), // 255 255 255
  168 + Black : Raphael.getRGB("#000000 "), // 0 0 0
  169 + DarkSlateGray : Raphael.getRGB("#2F4F4F "), // 47 79 79
  170 + DimGrey : Raphael.getRGB("#696969 "), // 105 105 105
  171 + SlateGrey : Raphael.getRGB("#708090 "), // 112 128 144
  172 + LightSlateGray : Raphael.getRGB("#778899 "), // 119 136 153
  173 + Grey : Raphael.getRGB("#BEBEBE "), // 190 190 190
  174 + LightGray : Raphael.getRGB("#D3D3D3 "), // 211 211 211
  175 + MidnightBlue : Raphael.getRGB("#191970 "), // 25 25 112
  176 + NavyBlue : Raphael.getRGB("#000080 "), // 0 0 128
  177 + CornflowerBlue : Raphael.getRGB("#6495ED "), // 100 149 237
  178 + DarkSlateBlue : Raphael.getRGB("#483D8B "), // 72 61 139
  179 + SlateBlue : Raphael.getRGB("#6A5ACD "), // 106 90 205
  180 + MediumSlateBlue : Raphael.getRGB("#7B68EE "), // 123 104 238
  181 + LightSlateBlue : Raphael.getRGB("#8470FF "), // 132 112 255
  182 + MediumBlue : Raphael.getRGB("#0000CD "), // 0 0 205
  183 + RoyalBlue : Raphael.getRGB("#4169E1 "), // 65 105 225
  184 + Blue : Raphael.getRGB("#0000FF "), // 0 0 255
  185 + DodgerBlue : Raphael.getRGB("#1E90FF "), // 30 144 255
  186 + DeepSkyBlue : Raphael.getRGB("#00BFFF "), // 0 191 255
  187 + SkyBlue : Raphael.getRGB("#87CEEB "), // 135 206 235
  188 + LightSkyBlue : Raphael.getRGB("#87CEFA "), // 135 206 250
  189 + SteelBlue : Raphael.getRGB("#4682B4 "), // 70 130 180
  190 + LightSteelBlue : Raphael.getRGB("#B0C4DE "), // 176 196 222
  191 + LightBlue : Raphael.getRGB("#ADD8E6 "), // 173 216 230
  192 + PowderBlue : Raphael.getRGB("#B0E0E6 "), // 176 224 230
  193 + PaleTurquoise : Raphael.getRGB("#AFEEEE "), // 175 238 238
  194 + DarkTurquoise : Raphael.getRGB("#00CED1 "), // 0 206 209
  195 + MediumTurquoise : Raphael.getRGB("#48D1CC "), // 72 209 204
  196 + Turquoise : Raphael.getRGB("#40E0D0 "), // 64 224 208
  197 + Cyan : Raphael.getRGB("#00FFFF "), // 0 255 255
  198 + LightCyan : Raphael.getRGB("#E0FFFF "), // 224 255 255
  199 + CadetBlue : Raphael.getRGB("#5F9EA0 "), // 95 158 160
  200 + MediumAquamarine: Raphael.getRGB("#66CDAA "), // 102 205 170
  201 + Aquamarine : Raphael.getRGB("#7FFFD4 "), // 127 255 212
  202 + DarkGreen : Raphael.getRGB("#006400 "), // 0 100 0
  203 + DarkOliveGreen : Raphael.getRGB("#556B2F "), // 85 107 47
  204 + DarkSeaGreen : Raphael.getRGB("#8FBC8F "), // 143 188 143
  205 + SeaGreen : Raphael.getRGB("#2E8B57 "), // 46 139 87
  206 + MediumSeaGreen : Raphael.getRGB("#3CB371 "), // 60 179 113
  207 + LightSeaGreen : Raphael.getRGB("#20B2AA "), // 32 178 170
  208 + PaleGreen : Raphael.getRGB("#98FB98 "), // 152 251 152
  209 + SpringGreen : Raphael.getRGB("#00FF7F "), // 0 255 127
  210 + LawnGreen : Raphael.getRGB("#7CFC00 "), // 124 252 0
  211 + Green : Raphael.getRGB("#00FF00 "), // 0 255 0
  212 + Chartreuse : Raphael.getRGB("#7FFF00 "), // 127 255 0
  213 + MedSpringGreen : Raphael.getRGB("#00FA9A "), // 0 250 154
  214 + GreenYellow : Raphael.getRGB("#ADFF2F "), // 173 255 47
  215 + LimeGreen : Raphael.getRGB("#32CD32 "), // 50 205 50
  216 + YellowGreen : Raphael.getRGB("#9ACD32 "), // 154 205 50
  217 + ForestGreen : Raphael.getRGB("#228B22 "), // 34 139 34
  218 + OliveDrab : Raphael.getRGB("#6B8E23 "), // 107 142 35
  219 + DarkKhaki : Raphael.getRGB("#BDB76B "), // 189 183 107
  220 + PaleGoldenrod : Raphael.getRGB("#EEE8AA "), // 238 232 170
  221 + LtGoldenrodYello: Raphael.getRGB("#FAFAD2 "), // 250 250 210
  222 + LightYellow : Raphael.getRGB("#FFFFE0 "), // 255 255 224
  223 + Yellow : Raphael.getRGB("#FFFF00 "), // 255 255 0
  224 + Gold : Raphael.getRGB("#FFD700 "), // 255 215 0
  225 + LightGoldenrod : Raphael.getRGB("#EEDD82 "), // 238 221 130
  226 + goldenrod : Raphael.getRGB("#DAA520 "), // 218 165 32
  227 + DarkGoldenrod : Raphael.getRGB("#B8860B "), // 184 134 11
  228 + RosyBrown : Raphael.getRGB("#BC8F8F "), // 188 143 143
  229 + IndianRed : Raphael.getRGB("#CD5C5C "), // 205 92 92
  230 + SaddleBrown : Raphael.getRGB("#8B4513 "), // 139 69 19
  231 + Sienna : Raphael.getRGB("#A0522D "), // 160 82 45
  232 + Peru : Raphael.getRGB("#CD853F "), // 205 133 63
  233 + Burlywood : Raphael.getRGB("#DEB887 "), // 222 184 135
  234 + Beige : Raphael.getRGB("#F5F5DC "), // 245 245 220
  235 + Wheat : Raphael.getRGB("#F5DEB3 "), // 245 222 179
  236 + SandyBrown : Raphael.getRGB("#F4A460 "), // 244 164 96
  237 + Tan : Raphael.getRGB("#D2B48C "), // 210 180 140
  238 + Chocolate : Raphael.getRGB("#D2691E "), // 210 105 30
  239 + Firebrick : Raphael.getRGB("#B22222 "), // 178 34 34
  240 + Brown : Raphael.getRGB("#A52A2A "), // 165 42 42
  241 + DarkSalmon : Raphael.getRGB("#E9967A "), // 233 150 122
  242 + Salmon : Raphael.getRGB("#FA8072 "), // 250 128 114
  243 + LightSalmon : Raphael.getRGB("#FFA07A "), // 255 160 122
  244 + Orange : Raphael.getRGB("#FFA500 "), // 255 165 0
  245 + DarkOrange : Raphael.getRGB("#FF8C00 "), // 255 140 0
  246 + Coral : Raphael.getRGB("#FF7F50 "), // 255 127 80
  247 + LightCoral : Raphael.getRGB("#F08080 "), // 240 128 128
  248 + Tomato : Raphael.getRGB("#FF6347 "), // 255 99 71
  249 + OrangeRed : Raphael.getRGB("#FF4500 "), // 255 69 0
  250 + Red : Raphael.getRGB("#FF0000 "), // 255 0 0
  251 + HotPink : Raphael.getRGB("#FF69B4 "), // 255 105 180
  252 + DeepPink : Raphael.getRGB("#FF1493 "), // 255 20 147
  253 + Pink : Raphael.getRGB("#FFC0CB "), // 255 192 203
  254 + LightPink : Raphael.getRGB("#FFB6C1 "), // 255 182 193
  255 + PaleVioletRed : Raphael.getRGB("#DB7093 "), // 219 112 147
  256 + Maroon : Raphael.getRGB("#B03060 "), // 176 48 96
  257 + MediumVioletRed : Raphael.getRGB("#C71585 "), // 199 21 133
  258 + VioletRed : Raphael.getRGB("#D02090 "), // 208 32 144
  259 + Magenta : Raphael.getRGB("#FF00FF "), // 255 0 255
  260 + Violet : Raphael.getRGB("#EE82EE "), // 238 130 238
  261 + Plum : Raphael.getRGB("#DDA0DD "), // 221 160 221
  262 + Orchid : Raphael.getRGB("#DA70D6 "), // 218 112 214
  263 + MediumOrchid : Raphael.getRGB("#BA55D3 "), // 186 85 211
  264 + DarkOrchid : Raphael.getRGB("#9932CC "), // 153 50 204
  265 + DarkViolet : Raphael.getRGB("#9400D3 "), // 148 0 211
  266 + BlueViolet : Raphael.getRGB("#8A2BE2 "), // 138 43 226
  267 + Purple : Raphael.getRGB("#A020F0 "), // 160 32 240
  268 + MediumPurple : Raphael.getRGB("#9370DB "), // 147 112 219
  269 + Thistle : Raphael.getRGB("#D8BFD8 "), // 216 191 216
  270 + Snow1 : Raphael.getRGB("#FFFAFA "), // 255 250 250
  271 + Snow2 : Raphael.getRGB("#EEE9E9 "), // 238 233 233
  272 + Snow3 : Raphael.getRGB("#CDC9C9 "), // 205 201 201
  273 + Snow4 : Raphael.getRGB("#8B8989 "), // 139 137 137
  274 + Seashell1 : Raphael.getRGB("#FFF5EE "), // 255 245 238
  275 + Seashell2 : Raphael.getRGB("#EEE5DE "), // 238 229 222
  276 + Seashell3 : Raphael.getRGB("#CDC5BF "), // 205 197 191
  277 + Seashell4 : Raphael.getRGB("#8B8682 "), // 139 134 130
  278 + AntiqueWhite1 : Raphael.getRGB("#FFEFDB "), // 255 239 219
  279 + AntiqueWhite2 : Raphael.getRGB("#EEDFCC "), // 238 223 204
  280 + AntiqueWhite3 : Raphael.getRGB("#CDC0B0 "), // 205 192 176
  281 + AntiqueWhite4 : Raphael.getRGB("#8B8378 "), // 139 131 120
  282 + Bisque1 : Raphael.getRGB("#FFE4C4 "), // 255 228 196
  283 + Bisque2 : Raphael.getRGB("#EED5B7 "), // 238 213 183
  284 + Bisque3 : Raphael.getRGB("#CDB79E "), // 205 183 158
  285 + Bisque4 : Raphael.getRGB("#8B7D6B "), // 139 125 107
  286 + PeachPuff1 : Raphael.getRGB("#FFDAB9 "), // 255 218 185
  287 + PeachPuff2 : Raphael.getRGB("#EECBAD "), // 238 203 173
  288 + PeachPuff3 : Raphael.getRGB("#CDAF95 "), // 205 175 149
  289 + PeachPuff4 : Raphael.getRGB("#8B7765 "), // 139 119 101
  290 + NavajoWhite1 : Raphael.getRGB("#FFDEAD "), // 255 222 173
  291 + NavajoWhite2 : Raphael.getRGB("#EECFA1 "), // 238 207 161
  292 + NavajoWhite3 : Raphael.getRGB("#CDB38B "), // 205 179 139
  293 + NavajoWhite4 : Raphael.getRGB("#8B795E "), // 139 121 94
  294 + LemonChiffon1 : Raphael.getRGB("#FFFACD "), // 255 250 205
  295 + LemonChiffon2 : Raphael.getRGB("#EEE9BF "), // 238 233 191
  296 + LemonChiffon3 : Raphael.getRGB("#CDC9A5 "), // 205 201 165
  297 + LemonChiffon4 : Raphael.getRGB("#8B8970 "), // 139 137 112
  298 + Cornsilk1 : Raphael.getRGB("#FFF8DC "), // 255 248 220
  299 + Cornsilk2 : Raphael.getRGB("#EEE8CD "), // 238 232 205
  300 + Cornsilk3 : Raphael.getRGB("#CDC8B1 "), // 205 200 177
  301 + Cornsilk4 : Raphael.getRGB("#8B8878 "), // 139 136 120
  302 + Ivory1 : Raphael.getRGB("#FFFFF0 "), // 255 255 240
  303 + Ivory2 : Raphael.getRGB("#EEEEE0 "), // 238 238 224
  304 + Ivory3 : Raphael.getRGB("#CDCDC1 "), // 205 205 193
  305 + Ivory4 : Raphael.getRGB("#8B8B83 "), // 139 139 131
  306 + Honeydew1 : Raphael.getRGB("#F0FFF0 "), // 240 255 240
  307 + Honeydew2 : Raphael.getRGB("#E0EEE0 "), // 224 238 224
  308 + Honeydew3 : Raphael.getRGB("#C1CDC1 "), // 193 205 193
  309 + Honeydew4 : Raphael.getRGB("#838B83 "), // 131 139 131
  310 + LavenderBlush1 : Raphael.getRGB("#FFF0F5 "), // 255 240 245
  311 + LavenderBlush2 : Raphael.getRGB("#EEE0E5 "), // 238 224 229
  312 + LavenderBlush3 : Raphael.getRGB("#CDC1C5 "), // 205 193 197
  313 + LavenderBlush4 : Raphael.getRGB("#8B8386 "), // 139 131 134
  314 + MistyRose1 : Raphael.getRGB("#FFE4E1 "), // 255 228 225
  315 + MistyRose2 : Raphael.getRGB("#EED5D2 "), // 238 213 210
  316 + MistyRose3 : Raphael.getRGB("#CDB7B5 "), // 205 183 181
  317 + MistyRose4 : Raphael.getRGB("#8B7D7B "), // 139 125 123
  318 + Azure1 : Raphael.getRGB("#F0FFFF "), // 240 255 255
  319 + Azure2 : Raphael.getRGB("#E0EEEE "), // 224 238 238
  320 + Azure3 : Raphael.getRGB("#C1CDCD "), // 193 205 205
  321 + Azure4 : Raphael.getRGB("#838B8B "), // 131 139 139
  322 + SlateBlue1 : Raphael.getRGB("#836FFF "), // 131 111 255
  323 + SlateBlue2 : Raphael.getRGB("#7A67EE "), // 122 103 238
  324 + SlateBlue3 : Raphael.getRGB("#6959CD "), // 105 89 205
  325 + SlateBlue4 : Raphael.getRGB("#473C8B "), // 71 60 139
  326 + RoyalBlue1 : Raphael.getRGB("#4876FF "), // 72 118 255
  327 + RoyalBlue2 : Raphael.getRGB("#436EEE "), // 67 110 238
  328 + RoyalBlue3 : Raphael.getRGB("#3A5FCD "), // 58 95 205
  329 + RoyalBlue4 : Raphael.getRGB("#27408B "), // 39 64 139
  330 + Blue1 : Raphael.getRGB("#0000FF "), // 0 0 255
  331 + Blue2 : Raphael.getRGB("#0000EE "), // 0 0 238
  332 + Blue3 : Raphael.getRGB("#0000CD "), // 0 0 205
  333 + Blue4 : Raphael.getRGB("#00008B "), // 0 0 139
  334 + DodgerBlue1 : Raphael.getRGB("#1E90FF "), // 30 144 255
  335 + DodgerBlue2 : Raphael.getRGB("#1C86EE "), // 28 134 238
  336 + DodgerBlue3 : Raphael.getRGB("#1874CD "), // 24 116 205
  337 + DodgerBlue4 : Raphael.getRGB("#104E8B "), // 16 78 139
  338 + SteelBlue1 : Raphael.getRGB("#63B8FF "), // 99 184 255
  339 + SteelBlue2 : Raphael.getRGB("#5CACEE "), // 92 172 238
  340 + SteelBlue3 : Raphael.getRGB("#4F94CD "), // 79 148 205
  341 + SteelBlue4 : Raphael.getRGB("#36648B "), // 54 100 139
  342 + DeepSkyBlue1 : Raphael.getRGB("#00BFFF "), // 0 191 255
  343 + DeepSkyBlue2 : Raphael.getRGB("#00B2EE "), // 0 178 238
  344 + DeepSkyBlue3 : Raphael.getRGB("#009ACD "), // 0 154 205
  345 + DeepSkyBlue4 : Raphael.getRGB("#00688B "), // 0 104 139
  346 + SkyBlue1 : Raphael.getRGB("#87CEFF "), // 135 206 255
  347 + SkyBlue2 : Raphael.getRGB("#7EC0EE "), // 126 192 238
  348 + SkyBlue3 : Raphael.getRGB("#6CA6CD "), // 108 166 205
  349 + SkyBlue4 : Raphael.getRGB("#4A708B "), // 74 112 139
  350 + LightSkyBlue1 : Raphael.getRGB("#B0E2FF "), // 176 226 255
  351 + LightSkyBlue2 : Raphael.getRGB("#A4D3EE "), // 164 211 238
  352 + LightSkyBlue3 : Raphael.getRGB("#8DB6CD "), // 141 182 205
  353 + LightSkyBlue4 : Raphael.getRGB("#607B8B "), // 96 123 139
  354 + SlateGray1 : Raphael.getRGB("#C6E2FF "), // 198 226 255
  355 + SlateGray2 : Raphael.getRGB("#B9D3EE "), // 185 211 238
  356 + SlateGray3 : Raphael.getRGB("#9FB6CD "), // 159 182 205
  357 + SlateGray4 : Raphael.getRGB("#6C7B8B "), // 108 123 139
  358 + LightSteelBlue1 : Raphael.getRGB("#CAE1FF "), // 202 225 255
  359 + LightSteelBlue2 : Raphael.getRGB("#BCD2EE "), // 188 210 238
  360 + LightSteelBlue3 : Raphael.getRGB("#A2B5CD "), // 162 181 205
  361 + LightSteelBlue4 : Raphael.getRGB("#6E7B8B "), // 110 123 139
  362 + LightBlue1 : Raphael.getRGB("#BFEFFF "), // 191 239 255
  363 + LightBlue2 : Raphael.getRGB("#B2DFEE "), // 178 223 238
  364 + LightBlue3 : Raphael.getRGB("#9AC0CD "), // 154 192 205
  365 + LightBlue4 : Raphael.getRGB("#68838B "), // 104 131 139
  366 + LightCyan1 : Raphael.getRGB("#E0FFFF "), // 224 255 255
  367 + LightCyan2 : Raphael.getRGB("#D1EEEE "), // 209 238 238
  368 + LightCyan3 : Raphael.getRGB("#B4CDCD "), // 180 205 205
  369 + LightCyan4 : Raphael.getRGB("#7A8B8B "), // 122 139 139
  370 + PaleTurquoise1 : Raphael.getRGB("#BBFFFF "), // 187 255 255
  371 + PaleTurquoise2 : Raphael.getRGB("#AEEEEE "), // 174 238 238
  372 + PaleTurquoise3 : Raphael.getRGB("#96CDCD "), // 150 205 205
  373 + PaleTurquoise4 : Raphael.getRGB("#668B8B "), // 102 139 139
  374 + CadetBlue1 : Raphael.getRGB("#98F5FF "), // 152 245 255
  375 + CadetBlue2 : Raphael.getRGB("#8EE5EE "), // 142 229 238
  376 + CadetBlue3 : Raphael.getRGB("#7AC5CD "), // 122 197 205
  377 + CadetBlue4 : Raphael.getRGB("#53868B "), // 83 134 139
  378 + Turquoise1 : Raphael.getRGB("#00F5FF "), // 0 245 255
  379 + Turquoise2 : Raphael.getRGB("#00E5EE "), // 0 229 238
  380 + Turquoise3 : Raphael.getRGB("#00C5CD "), // 0 197 205
  381 + Turquoise4 : Raphael.getRGB("#00868B "), // 0 134 139
  382 + Cyan1 : Raphael.getRGB("#00FFFF "), // 0 255 255
  383 + Cyan2 : Raphael.getRGB("#00EEEE "), // 0 238 238
  384 + Cyan3 : Raphael.getRGB("#00CDCD "), // 0 205 205
  385 + Cyan4 : Raphael.getRGB("#008B8B "), // 0 139 139
  386 + DarkSlateGray1 : Raphael.getRGB("#97FFFF "), // 151 255 255
  387 + DarkSlateGray2 : Raphael.getRGB("#8DEEEE "), // 141 238 238
  388 + DarkSlateGray3 : Raphael.getRGB("#79CDCD "), // 121 205 205
  389 + DarkSlateGray4 : Raphael.getRGB("#528B8B "), // 82 139 139
  390 + Aquamarine1 : Raphael.getRGB("#7FFFD4 "), // 127 255 212
  391 + Aquamarine2 : Raphael.getRGB("#76EEC6 "), // 118 238 198
  392 + Aquamarine3 : Raphael.getRGB("#66CDAA "), // 102 205 170
  393 + Aquamarine4 : Raphael.getRGB("#458B74 "), // 69 139 116
  394 + DarkSeaGreen1 : Raphael.getRGB("#C1FFC1 "), // 193 255 193
  395 + DarkSeaGreen2 : Raphael.getRGB("#B4EEB4 "), // 180 238 180
  396 + DarkSeaGreen3 : Raphael.getRGB("#9BCD9B "), // 155 205 155
  397 + DarkSeaGreen4 : Raphael.getRGB("#698B69 "), // 105 139 105
  398 + SeaGreen1 : Raphael.getRGB("#54FF9F "), // 84 255 159
  399 + SeaGreen2 : Raphael.getRGB("#4EEE94 "), // 78 238 148
  400 + SeaGreen3 : Raphael.getRGB("#43CD80 "), // 67 205 128
  401 + SeaGreen4 : Raphael.getRGB("#2E8B57 "), // 46 139 87
  402 + PaleGreen1 : Raphael.getRGB("#9AFF9A "), // 154 255 154
  403 + PaleGreen2 : Raphael.getRGB("#90EE90 "), // 144 238 144
  404 + PaleGreen3 : Raphael.getRGB("#7CCD7C "), // 124 205 124
  405 + PaleGreen4 : Raphael.getRGB("#548B54 "), // 84 139 84
  406 + SpringGreen1 : Raphael.getRGB("#00FF7F "), // 0 255 127
  407 + SpringGreen2 : Raphael.getRGB("#00EE76 "), // 0 238 118
  408 + SpringGreen3 : Raphael.getRGB("#00CD66 "), // 0 205 102
  409 + SpringGreen4 : Raphael.getRGB("#008B45 "), // 0 139 69
  410 + Green1 : Raphael.getRGB("#00FF00 "), // 0 255 0
  411 + Green2 : Raphael.getRGB("#00EE00 "), // 0 238 0
  412 + Green3 : Raphael.getRGB("#00CD00 "), // 0 205 0
  413 + Green4 : Raphael.getRGB("#008B00 "), // 0 139 0
  414 + Chartreuse1 : Raphael.getRGB("#7FFF00 "), // 127 255 0
  415 + Chartreuse2 : Raphael.getRGB("#76EE00 "), // 118 238 0
  416 + Chartreuse3 : Raphael.getRGB("#66CD00 "), // 102 205 0
  417 + Chartreuse4 : Raphael.getRGB("#458B00 "), // 69 139 0
  418 + OliveDrab1 : Raphael.getRGB("#C0FF3E "), // 192 255 62
  419 + OliveDrab2 : Raphael.getRGB("#B3EE3A "), // 179 238 58
  420 + OliveDrab3 : Raphael.getRGB("#9ACD32 "), // 154 205 50
  421 + OliveDrab4 : Raphael.getRGB("#698B22 "), // 105 139 34
  422 + DarkOliveGreen1 : Raphael.getRGB("#CAFF70 "), // 202 255 112
  423 + DarkOliveGreen2 : Raphael.getRGB("#BCEE68 "), // 188 238 104
  424 + DarkOliveGreen3 : Raphael.getRGB("#A2CD5A "), // 162 205 90
  425 + DarkOliveGreen4 : Raphael.getRGB("#6E8B3D "), // 110 139 61
  426 + Khaki1 : Raphael.getRGB("#FFF68F "), // 255 246 143
  427 + Khaki2 : Raphael.getRGB("#EEE685 "), // 238 230 133
  428 + Khaki3 : Raphael.getRGB("#CDC673 "), // 205 198 115
  429 + Khaki4 : Raphael.getRGB("#8B864E "), // 139 134 78
  430 + LightGoldenrod1 : Raphael.getRGB("#FFEC8B "), // 255 236 139
  431 + LightGoldenrod2 : Raphael.getRGB("#EEDC82 "), // 238 220 130
  432 + LightGoldenrod3 : Raphael.getRGB("#CDBE70 "), // 205 190 112
  433 + LightGoldenrod4 : Raphael.getRGB("#8B814C "), // 139 129 76
  434 + LightYellow1 : Raphael.getRGB("#FFFFE0 "), // 255 255 224
  435 + LightYellow2 : Raphael.getRGB("#EEEED1 "), // 238 238 209
  436 + LightYellow3 : Raphael.getRGB("#CDCDB4 "), // 205 205 180
  437 + LightYellow4 : Raphael.getRGB("#8B8B7A "), // 139 139 122
  438 + Yellow1 : Raphael.getRGB("#FFFF00 "), // 255 255 0
  439 + Yellow2 : Raphael.getRGB("#EEEE00 "), // 238 238 0
  440 + Yellow3 : Raphael.getRGB("#CDCD00 "), // 205 205 0
  441 + Yellow4 : Raphael.getRGB("#8B8B00 "), // 139 139 0
  442 + Gold1 : Raphael.getRGB("#FFD700 "), // 255 215 0
  443 + Gold2 : Raphael.getRGB("#EEC900 "), // 238 201 0
  444 + Gold3 : Raphael.getRGB("#CDAD00 "), // 205 173 0
  445 + Gold4 : Raphael.getRGB("#8B7500 "), // 139 117 0
  446 + Goldenrod1 : Raphael.getRGB("#FFC125 "), // 255 193 37
  447 + Goldenrod2 : Raphael.getRGB("#EEB422 "), // 238 180 34
  448 + Goldenrod3 : Raphael.getRGB("#CD9B1D "), // 205 155 29
  449 + Goldenrod4 : Raphael.getRGB("#8B6914 "), // 139 105 20
  450 + DarkGoldenrod1 : Raphael.getRGB("#FFB90F "), // 255 185 15
  451 + DarkGoldenrod2 : Raphael.getRGB("#EEAD0E "), // 238 173 14
  452 + DarkGoldenrod3 : Raphael.getRGB("#CD950C "), // 205 149 12
  453 + DarkGoldenrod4 : Raphael.getRGB("#8B658B "), // 139 101 8
  454 + RosyBrown1 : Raphael.getRGB("#FFC1C1 "), // 255 193 193
  455 + RosyBrown2 : Raphael.getRGB("#EEB4B4 "), // 238 180 180
  456 + RosyBrown3 : Raphael.getRGB("#CD9B9B "), // 205 155 155
  457 + RosyBrown4 : Raphael.getRGB("#8B6969 "), // 139 105 105
  458 + IndianRed1 : Raphael.getRGB("#FF6A6A "), // 255 106 106
  459 + IndianRed2 : Raphael.getRGB("#EE6363 "), // 238 99 99
  460 + IndianRed3 : Raphael.getRGB("#CD5555 "), // 205 85 85
  461 + IndianRed4 : Raphael.getRGB("#8B3A3A "), // 139 58 58
  462 + Sienna1 : Raphael.getRGB("#FF8247 "), // 255 130 71
  463 + Sienna2 : Raphael.getRGB("#EE7942 "), // 238 121 66
  464 + Sienna3 : Raphael.getRGB("#CD6839 "), // 205 104 57
  465 + Sienna4 : Raphael.getRGB("#8B4726 "), // 139 71 38
  466 + Burlywood1 : Raphael.getRGB("#FFD39B "), // 255 211 155
  467 + Burlywood2 : Raphael.getRGB("#EEC591 "), // 238 197 145
  468 + Burlywood3 : Raphael.getRGB("#CDAA7D "), // 205 170 125
  469 + Burlywood4 : Raphael.getRGB("#8B7355 "), // 139 115 85
  470 + Wheat1 : Raphael.getRGB("#FFE7BA "), // 255 231 186
  471 + Wheat2 : Raphael.getRGB("#EED8AE "), // 238 216 174
  472 + Wheat3 : Raphael.getRGB("#CDBA96 "), // 205 186 150
  473 + Wheat4 : Raphael.getRGB("#8B7E66 "), // 139 126 102
  474 + Tan1 : Raphael.getRGB("#FFA54F "), // 255 165 79
  475 + Tan2 : Raphael.getRGB("#EE9A49 "), // 238 154 73
  476 + Tan3 : Raphael.getRGB("#CD853F "), // 205 133 63
  477 + Tan4 : Raphael.getRGB("#8B5A2B "), // 139 90 43
  478 + Chocolate1 : Raphael.getRGB("#FF7F24 "), // 255 127 36
  479 + Chocolate2 : Raphael.getRGB("#EE7621 "), // 238 118 33
  480 + Chocolate3 : Raphael.getRGB("#CD661D "), // 205 102 29
  481 + Chocolate4 : Raphael.getRGB("#8B4513 "), // 139 69 19
  482 + Firebrick1 : Raphael.getRGB("#FF3030 "), // 255 48 48
  483 + Firebrick2 : Raphael.getRGB("#EE2C2C "), // 238 44 44
  484 + Firebrick3 : Raphael.getRGB("#CD2626 "), // 205 38 38
  485 + Firebrick4 : Raphael.getRGB("#8B1A1A "), // 139 26 26
  486 + Brown1 : Raphael.getRGB("#FF4040 "), // 255 64 64
  487 + Brown2 : Raphael.getRGB("#EE3B3B "), // 238 59 59
  488 + Brown3 : Raphael.getRGB("#CD3333 "), // 205 51 51
  489 + Brown4 : Raphael.getRGB("#8B2323 "), // 139 35 35
  490 + Salmon1 : Raphael.getRGB("#FF8C69 "), // 255 140 105
  491 + Salmon2 : Raphael.getRGB("#EE8262 "), // 238 130 98
  492 + Salmon3 : Raphael.getRGB("#CD7054 "), // 205 112 84
  493 + Salmon4 : Raphael.getRGB("#8B4C39 "), // 139 76 57
  494 + LightSalmon1 : Raphael.getRGB("#FFA07A "), // 255 160 122
  495 + LightSalmon2 : Raphael.getRGB("#EE9572 "), // 238 149 114
  496 + LightSalmon3 : Raphael.getRGB("#CD8162 "), // 205 129 98
  497 + LightSalmon4 : Raphael.getRGB("#8B5742 "), // 139 87 66
  498 + Orange1 : Raphael.getRGB("#FFA500 "), // 255 165 0
  499 + Orange2 : Raphael.getRGB("#EE9A00 "), // 238 154 0
  500 + Orange3 : Raphael.getRGB("#CD8500 "), // 205 133 0
  501 + Orange4 : Raphael.getRGB("#8B5A00 "), // 139 90 0
  502 + DarkOrange1 : Raphael.getRGB("#FF7F00 "), // 255 127 0
  503 + DarkOrange2 : Raphael.getRGB("#EE7600 "), // 238 118 0
  504 + DarkOrange3 : Raphael.getRGB("#CD6600 "), // 205 102 0
  505 + DarkOrange4 : Raphael.getRGB("#8B4500 "), // 139 69 0
  506 + Coral1 : Raphael.getRGB("#FF7256 "), // 255 114 86
  507 + Coral2 : Raphael.getRGB("#EE6A50 "), // 238 106 80
  508 + Coral3 : Raphael.getRGB("#CD5B45 "), // 205 91 69
  509 + Coral4 : Raphael.getRGB("#8B3E2F "), // 139 62 47
  510 + Tomato1 : Raphael.getRGB("#FF6347 "), // 255 99 71
  511 + Tomato2 : Raphael.getRGB("#EE5C42 "), // 238 92 66
  512 + Tomato3 : Raphael.getRGB("#CD4F39 "), // 205 79 57
  513 + Tomato4 : Raphael.getRGB("#8B3626 "), // 139 54 38
  514 + OrangeRed1 : Raphael.getRGB("#FF4500 "), // 255 69 0
  515 + OrangeRed2 : Raphael.getRGB("#EE4000 "), // 238 64 0
  516 + OrangeRed3 : Raphael.getRGB("#CD3700 "), // 205 55 0
  517 + OrangeRed4 : Raphael.getRGB("#8B2500 "), // 139 37 0
  518 + Red1 : Raphael.getRGB("#FF0000 "), // 255 0 0
  519 + Red2 : Raphael.getRGB("#EE0000 "), // 238 0 0
  520 + Red3 : Raphael.getRGB("#CD0000 "), // 205 0 0
  521 + Red4 : Raphael.getRGB("#8B0000 "), // 139 0 0
  522 + DeepPink1 : Raphael.getRGB("#FF1493 "), // 255 20 147
  523 + DeepPink2 : Raphael.getRGB("#EE1289 "), // 238 18 137
  524 + DeepPink3 : Raphael.getRGB("#CD1076 "), // 205 16 118
  525 + DeepPink4 : Raphael.getRGB("#8B0A50 "), // 139 10 80
  526 + HotPink1 : Raphael.getRGB("#FF6EB4 "), // 255 110 180
  527 + HotPink2 : Raphael.getRGB("#EE6AA7 "), // 238 106 167
  528 + HotPink3 : Raphael.getRGB("#CD6090 "), // 205 96 144
  529 + HotPink4 : Raphael.getRGB("#8B3A62 "), // 139 58 98
  530 + Pink1 : Raphael.getRGB("#FFB5C5 "), // 255 181 197
  531 + Pink2 : Raphael.getRGB("#EEA9B8 "), // 238 169 184
  532 + Pink3 : Raphael.getRGB("#CD919E "), // 205 145 158
  533 + Pink4 : Raphael.getRGB("#8B636C "), // 139 99 108
  534 + LightPink1 : Raphael.getRGB("#FFAEB9 "), // 255 174 185
  535 + LightPink2 : Raphael.getRGB("#EEA2AD "), // 238 162 173
  536 + LightPink3 : Raphael.getRGB("#CD8C95 "), // 205 140 149
  537 + LightPink4 : Raphael.getRGB("#8B5F65 "), // 139 95 101
  538 + PaleVioletRed1 : Raphael.getRGB("#FF82AB "), // 255 130 171
  539 + PaleVioletRed2 : Raphael.getRGB("#EE799F "), // 238 121 159
  540 + PaleVioletRed3 : Raphael.getRGB("#CD6889 "), // 205 104 137
  541 + PaleVioletRed4 : Raphael.getRGB("#8B475D "), // 139 71 93
  542 + Maroon1 : Raphael.getRGB("#FF34B3 "), // 255 52 179
  543 + Maroon2 : Raphael.getRGB("#EE30A7 "), // 238 48 167
  544 + Maroon3 : Raphael.getRGB("#CD2990 "), // 205 41 144
  545 + Maroon4 : Raphael.getRGB("#8B1C62 "), // 139 28 98
  546 + VioletRed1 : Raphael.getRGB("#FF3E96 "), // 255 62 150
  547 + VioletRed2 : Raphael.getRGB("#EE3A8C "), // 238 58 140
  548 + VioletRed3 : Raphael.getRGB("#CD3278 "), // 205 50 120
  549 + VioletRed4 : Raphael.getRGB("#8B2252 "), // 139 34 82
  550 + Magenta1 : Raphael.getRGB("#FF00FF "), // 255 0 255
  551 + Magenta2 : Raphael.getRGB("#EE00EE "), // 238 0 238
  552 + Magenta3 : Raphael.getRGB("#CD00CD "), // 205 0 205
  553 + Magenta4 : Raphael.getRGB("#8B008B "), // 139 0 139
  554 + Orchid1 : Raphael.getRGB("#FF83FA "), // 255 131 250
  555 + Orchid2 : Raphael.getRGB("#EE7AE9 "), // 238 122 233
  556 + Orchid3 : Raphael.getRGB("#CD69C9 "), // 205 105 201
  557 + Orchid4 : Raphael.getRGB("#8B4789 "), // 139 71 137
  558 + Plum1 : Raphael.getRGB("#FFBBFF "), // 255 187 255
  559 + Plum2 : Raphael.getRGB("#EEAEEE "), // 238 174 238
  560 + Plum3 : Raphael.getRGB("#CD96CD "), // 205 150 205
  561 + Plum4 : Raphael.getRGB("#8B668B "), // 139 102 139
  562 + MediumOrchid1 : Raphael.getRGB("#E066FF "), // 224 102 255
  563 + MediumOrchid2 : Raphael.getRGB("#D15FEE "), // 209 95 238
  564 + MediumOrchid3 : Raphael.getRGB("#B452CD "), // 180 82 205
  565 + MediumOrchid4 : Raphael.getRGB("#7A378B "), // 122 55 139
  566 + DarkOrchid1 : Raphael.getRGB("#BF3EFF "), // 191 62 255
  567 + DarkOrchid2 : Raphael.getRGB("#B23AEE "), // 178 58 238
  568 + DarkOrchid3 : Raphael.getRGB("#9A32CD "), // 154 50 205
  569 + DarkOrchid4 : Raphael.getRGB("#68228B "), // 104 34 139
  570 + Purple1 : Raphael.getRGB("#9B30FF "), // 155 48 255
  571 + Purple2 : Raphael.getRGB("#912CEE "), // 145 44 238
  572 + Purple3 : Raphael.getRGB("#7D26CD "), // 125 38 205
  573 + Purple4 : Raphael.getRGB("#551A8B "), // 85 26 139
  574 + MediumPurple1 : Raphael.getRGB("#AB82FF "), // 171 130 255
  575 + MediumPurple2 : Raphael.getRGB("#9F79EE "), // 159 121 238
  576 + MediumPurple3 : Raphael.getRGB("#8968CD "), // 137 104 205
  577 + MediumPurple4 : Raphael.getRGB("#5D478B "), // 93 71 139
  578 + Thistle1 : Raphael.getRGB("#FFE1FF "), // 255 225 255
  579 + Thistle2 : Raphael.getRGB("#EED2EE "), // 238 210 238
  580 + Thistle3 : Raphael.getRGB("#CDB5CD "), // 205 181 205
  581 + Thistle4 : Raphael.getRGB("#8B7B8B "), // 139 123 139
  582 + grey11 : Raphael.getRGB("#1C1C1C "), // 28 28 28
  583 + grey21 : Raphael.getRGB("#363636 "), // 54 54 54
  584 + grey31 : Raphael.getRGB("#4F4F4F "), // 79 79 79
  585 + grey41 : Raphael.getRGB("#696969 "), // 105 105 105
  586 + grey51 : Raphael.getRGB("#828282 "), // 130 130 130
  587 + grey61 : Raphael.getRGB("#9C9C9C "), // 156 156 156
  588 + grey71 : Raphael.getRGB("#B5B5B5 "), // 181 181 181
  589 + gray81 : Raphael.getRGB("#CFCFCF "), // 207 207 207
  590 + gray91 : Raphael.getRGB("#E8E8E8 "), // 232 232 232
  591 + DarkGrey : Raphael.getRGB("#A9A9A9 "), // 169 169 169
  592 + DarkBlue : Raphael.getRGB("#00008B "), // 0 0 139
  593 + DarkCyan : Raphael.getRGB("#008B8B "), // 0 139 139
  594 + DarkMagenta : Raphael.getRGB("#8B008B "), // 139 0 139
  595 + DarkRed : Raphael.getRGB("#8B0000 "), // 139 0 0
  596 + LightGreen : Raphael.getRGB("#90EE90 "), // 144 238 144
  597 +
  598 +
  599 +
  600 + get: function(R, G, B){
  601 + return Raphael.getRGB("rgb(" + R + ", " + G + ", " + B + ")");
  602 + }
  603 +};
  1 +/**
  2 + * Word wrapping
  3 + *
  4 + * @author (Javascript) Dmitry Farafonov
  5 + */
  6 +
  7 + var AttributedStringIterator = function(text){
  8 + //this.text = this.rtrim(this.ltrim(text));
  9 + text = text.replace(/(\s)+/, " ");
  10 + this.text = this.rtrim(text);
  11 + /*
  12 + if (beginIndex < 0 || beginIndex > endIndex || endIndex > length()) {
  13 + throw new IllegalArgumentException("Invalid substring range");
  14 + }
  15 + */
  16 + this.beginIndex = 0;
  17 + this.endIndex = this.text.length;
  18 + this.currentIndex = this.beginIndex;
  19 +
  20 + //console.group("[AttributedStringIterator]");
  21 + var i = 0;
  22 + var string = this.text;
  23 + var fullPos = 0;
  24 +
  25 + //console.log("string: \"" + string + "\", length: " + string.length);
  26 + this.startWordOffsets = [];
  27 + this.startWordOffsets.push(fullPos);
  28 +
  29 + // TODO: remove i 1000
  30 + while (i<1000) {
  31 + var pos = string.search(/[ \t\n\f-\.\,]/);
  32 + if (pos == -1)
  33 + break;
  34 +
  35 + // whitespace start
  36 + fullPos += pos;
  37 + string = string.substr(pos);
  38 + ////console.log("fullPos: " + fullPos + ", pos: " + pos + ", string: ", string);
  39 +
  40 + // remove whitespaces
  41 + var pos = string.search(/[^ \t\n\f-\.\,]/);
  42 + if (pos == -1)
  43 + break;
  44 +
  45 + // whitespace end
  46 + fullPos += pos;
  47 + string = string.substr(pos);
  48 +
  49 + ////console.log("fullPos: " + fullPos);
  50 + this.startWordOffsets.push(fullPos);
  51 +
  52 + i++;
  53 + }
  54 + //console.log("startWordOffsets: ", this.startWordOffsets);
  55 + //console.groupEnd();
  56 + };
  57 + AttributedStringIterator.prototype = {
  58 + getEndIndex: function(pos){
  59 + if (typeof(pos) == "undefined")
  60 + return this.endIndex;
  61 +
  62 + var string = this.text.substr(pos, this.endIndex - pos);
  63 +
  64 + var posEndOfLine = string.search(/[\n]/);
  65 + if (posEndOfLine == -1)
  66 + return this.endIndex;
  67 + else
  68 + return pos + posEndOfLine;
  69 + },
  70 + getBeginIndex: function(){
  71 + return this.beginIndex;
  72 + },
  73 + isWhitespace: function(pos){
  74 + var str = this.text[pos];
  75 + var whitespaceChars = " \t\n\f";
  76 +
  77 + return (whitespaceChars.indexOf(str) != -1);
  78 + },
  79 + isNewLine: function(pos){
  80 + var str = this.text[pos];
  81 + var whitespaceChars = "\n";
  82 +
  83 + return (whitespaceChars.indexOf(str) != -1);
  84 + },
  85 + preceding: function(pos){
  86 + //console.group("[AttributedStringIterator.preceding]");
  87 + for(var i in this.startWordOffsets) {
  88 + var startWordOffset = this.startWordOffsets[i];
  89 + if (pos < startWordOffset && i>0) {
  90 + //console.log("startWordOffset: " + this.startWordOffsets[i-1]);
  91 + //console.groupEnd();
  92 + return this.startWordOffsets[i-1];
  93 + }
  94 + }
  95 + //console.log("pos: " + pos);
  96 + //console.groupEnd();
  97 + return this.startWordOffsets[i];
  98 + },
  99 + following: function(pos){
  100 + //console.group("[AttributedStringIterator.following]");
  101 + for(var i in this.startWordOffsets) {
  102 + var startWordOffset = this.startWordOffsets[i];
  103 + if (pos < startWordOffset && i>0) {
  104 + //console.log("startWordOffset: " + this.startWordOffsets[i]);
  105 + //console.groupEnd();
  106 + return this.startWordOffsets[i];
  107 + }
  108 + }
  109 + //console.log("pos: " + pos);
  110 + //console.groupEnd();
  111 + return this.startWordOffsets[i];
  112 + },
  113 + ltrim: function(str){
  114 + var patt2=/^\s+/g;
  115 + return str.replace(patt2, "");
  116 + },
  117 + rtrim: function(str){
  118 + var patt2=/\s+$/g;
  119 + return str.replace(patt2, "");
  120 + },
  121 + getLayout: function(start, limit){
  122 + return this.text.substr(start, limit - start);
  123 + },
  124 + getCharAtPos: function(pos) {
  125 + return this.text[pos];
  126 + }
  127 + };
  128 +
  129 + var LineBreakMeasurer = function(paper, x, y, text, fontAttrs){
  130 + this.paper = paper;
  131 + this.text = new AttributedStringIterator(text);
  132 + this.fontAttrs = fontAttrs;
  133 +
  134 + if (this.text.getEndIndex() - this.text.getBeginIndex() < 1) {
  135 + throw {message: "Text must contain at least one character.", code: "IllegalArgumentException"};
  136 + }
  137 +
  138 + //this.measurer = new TextMeasurer(paper, this.text, this.fontAttrs);
  139 + this.limit = this.text.getEndIndex();
  140 + this.pos = this.start = this.text.getBeginIndex();
  141 +
  142 + this.rafaelTextObject = this.paper.text(x, y, this.text.text).attr(fontAttrs).attr("text-anchor", "start");
  143 + this.svgTextObject = this.rafaelTextObject[0];
  144 + };
  145 + LineBreakMeasurer.prototype = {
  146 + nextOffset: function(wrappingWidth, offsetLimit, requireNextWord) {
  147 + //console.group("[nextOffset]");
  148 + var nextOffset = this.pos;
  149 + if (this.pos < this.limit) {
  150 + if (offsetLimit <= this.pos) {
  151 + throw {message: "offsetLimit must be after current position", code: "IllegalArgumentException"};
  152 + }
  153 +
  154 + var charAtMaxAdvance = this.getLineBreakIndex(this.pos, wrappingWidth);
  155 + //charAtMaxAdvance --;
  156 + //console.log("charAtMaxAdvance:", charAtMaxAdvance, ", [" + this.text.getCharAtPos(charAtMaxAdvance) + "]");
  157 +
  158 + if (charAtMaxAdvance == this.limit) {
  159 + nextOffset = this.limit;
  160 + //console.log("charAtMaxAdvance == this.limit");
  161 + } else if (this.text.isNewLine(charAtMaxAdvance)) {
  162 + //console.log("isNewLine");
  163 + nextOffset = charAtMaxAdvance+1;
  164 + } else if (this.text.isWhitespace(charAtMaxAdvance)) {
  165 + // TODO: find next noSpaceChar
  166 + //return nextOffset;
  167 + nextOffset = this.text.following(charAtMaxAdvance);
  168 + } else {
  169 + // Break is in a word; back up to previous break.
  170 + /*
  171 + var testPos = charAtMaxAdvance + 1;
  172 + if (testPos == this.limit) {
  173 + console.error("hbz...");
  174 + } else {
  175 + nextOffset = this.text.preceding(charAtMaxAdvance);
  176 + }
  177 + */
  178 + nextOffset = this.text.preceding(charAtMaxAdvance);
  179 +
  180 + if (nextOffset <= this.pos) {
  181 + nextOffset = Math.max(this.pos+1, charAtMaxAdvance);
  182 + }
  183 + }
  184 + }
  185 + if (nextOffset > offsetLimit) {
  186 + nextOffset = offsetLimit;
  187 + }
  188 + //console.log("nextOffset: " + nextOffset);
  189 + //console.groupEnd();
  190 + return nextOffset;
  191 + },
  192 + nextLayout: function(wrappingWidth) {
  193 + //console.groupCollapsed("[nextLayout]");
  194 + if (this.pos < this.limit) {
  195 + var requireNextWord = false;
  196 + var layoutLimit = this.nextOffset(wrappingWidth, this.limit, requireNextWord);
  197 + //console.log("layoutLimit:", layoutLimit);
  198 + if (layoutLimit == this.pos) {
  199 + //console.groupEnd();
  200 + return null;
  201 + }
  202 + var result = this.text.getLayout(this.pos, layoutLimit);
  203 + //console.log("layout: \"" + result + "\"");
  204 +
  205 + // remove end of line
  206 +
  207 + //var posEndOfLine = this.text.getEndIndex(this.pos);
  208 + //if (posEndOfLine < result.length)
  209 + // result = result.substr(0, posEndOfLine);
  210 +
  211 + this.pos = layoutLimit;
  212 +
  213 + //console.groupEnd();
  214 + return result;
  215 + } else {
  216 + //console.groupEnd();
  217 + return null;
  218 + }
  219 + },
  220 + getLineBreakIndex: function(pos, wrappingWidth) {
  221 + //console.group("[getLineBreakIndex]");
  222 + //console.log("pos:"+pos + ", text: \""+ this.text.text.replace(/\n/g, "_").substr(pos, 1) + "\"");
  223 +
  224 + var bb = this.rafaelTextObject.getBBox();
  225 +
  226 + var charNum = -1;
  227 + try {
  228 + var svgPoint = this.svgTextObject.getStartPositionOfChar(pos);
  229 + //var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.blue});
  230 + svgPoint.x = svgPoint.x + wrappingWidth;
  231 + //svgPoint.y = bb.y;
  232 + //console.log("svgPoint:", svgPoint);
  233 +
  234 + //var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.red});
  235 +
  236 + charNum = this.svgTextObject.getCharNumAtPosition(svgPoint);
  237 + } catch (e){
  238 + console.warn("getStartPositionOfChar error, pos:" + pos);
  239 + /*
  240 + var testPos = pos + 1;
  241 + if (testPos < this.limit) {
  242 + return testPos
  243 + }
  244 + */
  245 + }
  246 + //console.log("charNum:", charNum);
  247 + if (charNum == -1) {
  248 + //console.groupEnd();
  249 + return this.text.getEndIndex(pos);
  250 + } else {
  251 + // When case there is new line between pos and charnum then use this new line
  252 + var newLineIndex = this.text.getEndIndex(pos);
  253 + if (newLineIndex < charNum ) {
  254 + console.log("newLineIndex <= charNum, newLineIndex:"+newLineIndex+", charNum:"+charNum, "\"" + this.text.text.substr(newLineIndex+1).replace(/\n/g, "?") + "\"");
  255 + //console.groupEnd();
  256 +
  257 + return newLineIndex;
  258 + }
  259 +
  260 + //var charAtMaxAdvance = this.text.text.substring(charNum, charNum + 1);
  261 + var charAtMaxAdvance = this.text.getCharAtPos(charNum);
  262 + //console.log("!!charAtMaxAdvance: " + charAtMaxAdvance);
  263 + //console.groupEnd();
  264 + return charNum;
  265 + }
  266 + },
  267 + getPosition: function() {
  268 + return this.pos;
  269 + }
  270 + };
  1 +/**
  2 + * Class to generate polyline
  3 + *
  4 + * @author Dmitry Farafonov
  5 + */
  6 +
  7 +var ANCHOR_TYPE= {
  8 + main: "main",
  9 + middle: "middle",
  10 + first: "first",
  11 + last: "last"
  12 +};
  13 +
  14 +function Anchor(uuid, type, x, y) {
  15 + this.uuid = uuid;
  16 + this.x = x
  17 + this.y = y
  18 + this.type = (type == ANCHOR_TYPE.middle) ? ANCHOR_TYPE.middle : ANCHOR_TYPE.main;
  19 +};
  20 +Anchor.prototype = {
  21 + uuid: null,
  22 + x: 0,
  23 + y: 0,
  24 + type: ANCHOR_TYPE.main,
  25 + isFirst: false,
  26 + isLast: false,
  27 + ndex: 0,
  28 + typeIndex: 0
  29 +};
  30 +
  31 +function Polyline(uuid, points, strokeWidth) {
  32 + /* Array on coordinates:
  33 + * points: [{x: 410, y: 110}, 1
  34 + * {x: 570, y: 110}, 1 2
  35 + * {x: 620, y: 240}, 2 3
  36 + * {x: 750, y: 270}, 3 4
  37 + * {x: 650, y: 370}]; 4
  38 + */
  39 + this.points = points;
  40 +
  41 + /*
  42 + * path for graph
  43 + * [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]]
  44 + */
  45 + this.path = [];
  46 +
  47 + this.anchors = [];
  48 +
  49 + if (strokeWidth) this.strokeWidth = strokeWidth;
  50 +
  51 + this.closePath = false;
  52 +
  53 + this.init();
  54 +};
  55 +
  56 +Polyline.prototype = {
  57 + id: null,
  58 + points: [],
  59 + path: [],
  60 + anchors: [],
  61 + strokeWidth: 1,
  62 + radius: 15,
  63 + showDetails: false,
  64 + element: null,
  65 + isDefaultConditionAvailable: false,
  66 + closePath: false,
  67 +
  68 + init: function(points){
  69 + var linesCount = this.getLinesCount();
  70 + if (linesCount < 1)
  71 + return;
  72 +
  73 + this.normalizeCoordinates();
  74 +
  75 + // create anchors
  76 +
  77 + this.pushAnchor(ANCHOR_TYPE.first, this.getLine(0).x1, this.getLine(0).y1);
  78 +
  79 + for(var i = 1; i < linesCount; i++){
  80 + var line1 = this.getLine(i-1),
  81 + line2 = this.getLine(i);
  82 +
  83 + //this.pushAnchor(ANCHOR_TYPE.middle, line1.x1 + line1.x2-line1.x1, line1.y1 + line1.y2-line1.y1);
  84 + this.pushAnchor(ANCHOR_TYPE.main, line1.x2, line1.y2);
  85 + //this.pushAnchor(ANCHOR_TYPE.middle, line2.x1 + line2.x2-line2.x1, line2.y1 + line2.y2-line2.y1);
  86 + }
  87 +
  88 + this.pushAnchor(ANCHOR_TYPE.last, this.getLine(linesCount-1).x2, this.getLine(linesCount-1).y2);
  89 +
  90 + this.rebuildPath();
  91 + },
  92 +
  93 + normalizeCoordinates: function(){
  94 + for(var i=0; i < this.points.length; i++){
  95 + this.points[i].x = parseFloat(this.points[i].x);
  96 + this.points[i].y = parseFloat(this.points[i].y);
  97 + }
  98 + },
  99 +
  100 + getLinesCount: function(){
  101 + return this.points.length-1;
  102 + },
  103 + _getLine: function(i){
  104 + return {x1: this.points[i].x, y1: this.points[i].y, x2: this.points[i+1].x, y2: this.points[i+1].y};
  105 + },
  106 + getLine: function(i){
  107 + var line = this._getLine(i);
  108 + line.angle = this.getLineAngle(i) ;
  109 + return line;
  110 + },
  111 + getLineAngle: function(i){
  112 + var line = this._getLine(i);
  113 + return Math.atan2(line.y2 - line.y1, line.x2 - line.x1);
  114 + },
  115 + getLineLengthX: function(i){
  116 + var line = this.getLine(i);
  117 + return (line.x2 - line.x1);
  118 + },
  119 + getLineLengthY: function(i){
  120 + var line = this.getLine(i);
  121 + return (line.y2 - line.y1);
  122 + },
  123 + getLineLength: function(i){
  124 + var line = this.getLine(i);
  125 + return Math.sqrt(Math.pow(this.getLineLengthX(i), 2) + Math.pow(this.getLineLengthY(i), 2));
  126 + },
  127 +
  128 + getAnchors: function(){
  129 + //
  130 + // ????
  131 + return this.anchors;
  132 + },
  133 + getAnchorsCount: function(type){
  134 + if (!type)
  135 + return this.anchors.length;
  136 + else {
  137 + var count = 0;
  138 + for(var i=0; i < this.getAnchorsCount(); i++){
  139 + var anchor = this.anchors[i];
  140 + if (anchor.getType() == type) {
  141 + count++;
  142 + }
  143 + }
  144 + return count;
  145 + }
  146 + },
  147 +
  148 + pushAnchor: function(type, x, y, index){
  149 + if (type == ANCHOR_TYPE.first) {
  150 + index = 0;
  151 + typeIndex = 0;
  152 + } else if (type == ANCHOR_TYPE.last) {
  153 + index = this.getAnchorsCount();
  154 + typeIndex = 0;
  155 + } else if (!index) {
  156 + index = this.anchors.length;
  157 + } else {
  158 + // anchors, , index
  159 + //var anchor = this.getAnchor()
  160 + for(var i=0; i < this.getAnchorsCount(); i++){
  161 + var anchor = this.anchors[i];
  162 + if (anchor.index > index) {
  163 + anchor.index++;
  164 + anchor.typeIndex++;
  165 + }
  166 + }
  167 + }
  168 +
  169 + var anchor = new Anchor(this.id, ANCHOR_TYPE.main, x, y, index, typeIndex);
  170 +
  171 + this.anchors.push(anchor);
  172 + },
  173 +
  174 + getAnchor: function(position){
  175 + return this.anchors[position];
  176 + },
  177 +
  178 + getAnchorByType: function(type, position){
  179 + if (type == ANCHOR_TYPE.first)
  180 + return this.anchors[0];
  181 + if (type == ANCHOR_TYPE.last)
  182 + return this.anchors[this.getAnchorsCount()-1];
  183 +
  184 + for(var i=0; i < this.getAnchorsCount(); i++){
  185 + var anchor = this.anchors[i];
  186 + if (anchor.type == type) {
  187 + if( position == anchor.position)
  188 + return anchor;
  189 + }
  190 + }
  191 + return null;
  192 + },
  193 +
  194 + addNewPoint: function(position, x, y){
  195 + //
  196 + for(var i = 0; i < this.getLinesCount(); i++){
  197 + var line = this.getLine(i);
  198 + if (x > line.x1 && x < line.x2 && y > line.y1 && y < line.y2) {
  199 + this.points.splice(i+1,0,{x: x, y: y});
  200 + break;
  201 + }
  202 + }
  203 +
  204 + this.rebuildPath();
  205 + },
  206 +
  207 + rebuildPath: function(){
  208 + var path = [];
  209 +
  210 + for(var i = 0; i < this.getAnchorsCount(); i++){
  211 + var anchor = this.getAnchor(i);
  212 +
  213 + var pathType = ""
  214 + if (i==0)
  215 + pathType = "M";
  216 + else
  217 + pathType = "L";
  218 +
  219 +// TODO: save previous points and calculate new path just if points are updated, and then save currents values as previous
  220 +
  221 + var targetX = anchor.x, targetY = anchor.y;
  222 + if (i>0 && i < this.getAnchorsCount()-1) {
  223 + // get new x,y
  224 + var cx = anchor.x, cy = anchor.y;
  225 +
  226 + // pivot point of prev line
  227 + var AO = this.getLineLength(i-1);
  228 + if (AO < this.radius) {
  229 + AO = this.radius;
  230 + }
  231 +
  232 + this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10));
  233 + //console.log("isDefaultConditionAvailable", this.isDefaultConditionAvailable);
  234 +
  235 + var ED = this.getLineLengthY(i-1) * this.radius / AO;
  236 + var OD = this.getLineLengthX(i-1) * this.radius / AO;
  237 + targetX = anchor.x - OD;
  238 + targetY = anchor.y - ED;
  239 +
  240 + if (AO < 2*this.radius && i>1) {
  241 + targetX = anchor.x - this.getLineLengthX(i-1)/2;
  242 + targetY = anchor.y - this.getLineLengthY(i-1)/2;;
  243 + }
  244 +
  245 + // pivot point of next line
  246 + var AO = this.getLineLength(i);
  247 + if (AO < this.radius) {
  248 + AO = this.radius;
  249 + }
  250 + var ED = this.getLineLengthY(i) * this.radius / AO;
  251 + var OD = this.getLineLengthX(i) * this.radius / AO;
  252 + var nextSrcX = anchor.x + OD;
  253 + var nextSrcY = anchor.y + ED;
  254 +
  255 + if (AO < 2*this.radius && i<this.getAnchorsCount()-2) {
  256 + nextSrcX = anchor.x + this.getLineLengthX(i)/2;
  257 + nextSrcY = anchor.y + this.getLineLengthY(i)/2;;
  258 + }
  259 +
  260 +
  261 + var dx0 = (cx - targetX) / 3,
  262 + dy0 = (cy - targetY) / 3,
  263 + ax = cx - dx0,
  264 + ay = cy - dy0,
  265 +
  266 + dx1 = (cx - nextSrcX) / 3,
  267 + dy1 = (cy - nextSrcY) / 3,
  268 + bx = cx - dx1,
  269 + by = cy - dy1,
  270 +
  271 + zx=nextSrcX, zy=nextSrcY;
  272 +
  273 + if (this.showDetails) {
  274 + var c = ProcessDiagramCanvas.g.path("M"+targetX+","+targetY+"L"+ax+","+ay).attr({stroke: Color.get(255, 153, 51), "stroke-dasharray": "- "});
  275 + var c = ProcessDiagramCanvas.g.path("M"+nextSrcX+","+nextSrcY+"L"+bx+","+by).attr({stroke: Color.get(255, 153, 51), "stroke-dasharray": "- "});
  276 + var c = ProcessDiagramCanvas.g.ellipse(ax, ay, 2, 2).attr({stroke: Color.SlateGrey});
  277 + var c = ProcessDiagramCanvas.g.ellipse(bx, by, 2, 2).attr({stroke: Color.SlateGrey});
  278 + var c = ProcessDiagramCanvas.g.ellipse(cx, cy, this.radius, this.radius).attr({stroke: Color.Gainsboro});
  279 + var c = ProcessDiagramCanvas.g.ellipse(targetX, targetY, 2, 2).attr({fill: Color.red});
  280 + var c = ProcessDiagramCanvas.g.ellipse(nextSrcX, nextSrcY, 2, 2).attr({fill: Color.red});
  281 + }
  282 + } else if (i==1 && this.getAnchorsCount() == 2){
  283 + var AO = this.getLineLength(i-1);
  284 + if (AO < this.radius) {
  285 + AO = this.radius;
  286 + }
  287 + this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10));
  288 + //console.log("-- isDefaultConditionAvailable", this.isDefaultConditionAvailable);
  289 + }
  290 +
  291 + // anti smoothing
  292 + if (this.strokeWidth%2 == 1) {
  293 + targetX += 0.5;
  294 + targetY += 0.5;
  295 + }
  296 +
  297 + path.push([pathType, targetX, targetY]);
  298 +
  299 + if (i>0 && i < this.getAnchorsCount()-1) {
  300 + path.push(["C", ax, ay, bx, by, zx, zy]);
  301 + }
  302 + }
  303 +
  304 + if (this.closePath) {
  305 + console.log("closePath:", this.closePath);
  306 + path.push(["Z"]);
  307 + }
  308 +
  309 + this.path = path;
  310 + },
  311 +
  312 + transform: function(transformation){
  313 + this.element.transform(transformation);
  314 + },
  315 + attr: function(attrs){
  316 + //console.log("attrs: " +attrs, "", this.element);
  317 + // TODO: foreach and set each
  318 + this.element.attr(attrs);
  319 + }
  320 +};
  321 +
  322 +function Polygone(points, strokeWidth) {
  323 + /* Array on coordinates:
  324 + * points: [{x: 410, y: 110}, 1
  325 + * {x: 570, y: 110}, 1 2
  326 + * {x: 620, y: 240}, 2 3
  327 + * {x: 750, y: 270}, 3 4
  328 + * {x: 650, y: 370}]; 4
  329 + */
  330 + this.points = points;
  331 +
  332 + /*
  333 + * path for graph
  334 + * [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]]
  335 + */
  336 + this.path = [];
  337 +
  338 + this.anchors = [];
  339 +
  340 + if (strokeWidth) this.strokeWidth = strokeWidth;
  341 +
  342 + this.closePath = true;
  343 + this.init();
  344 +};
  345 +
  346 +
  347 +/*
  348 + * Poligone is inherited from Poliline: draws closedPath of polyline
  349 + */
  350 +
  351 +var Foo = function () { };
  352 +Foo.prototype = Polyline.prototype;
  353 +
  354 +Polygone.prototype = new Foo();
  355 +
  356 +Polygone.prototype.rebuildPath = function(){
  357 + var path = [];
  358 + //console.log("Polygone rebuildPath");
  359 + for(var i = 0; i < this.getAnchorsCount(); i++){
  360 + var anchor = this.getAnchor(i);
  361 +
  362 + var pathType = ""
  363 + if (i==0)
  364 + pathType = "M";
  365 + else
  366 + pathType = "L";
  367 +
  368 + var targetX = anchor.x, targetY = anchor.y;
  369 +
  370 + // anti smoothing
  371 + if (this.strokeWidth%2 == 1) {
  372 + targetX += 0.5;
  373 + targetY += 0.5;
  374 + }
  375 +
  376 + path.push([pathType, targetX, targetY]);
  377 + }
  378 + if (this.closePath)
  379 + path.push(["Z"]);
  380 +
  381 + this.path = path;
  382 +};
  383 +/*
  384 +Polygone.prototype.transform = function(transformation){
  385 + this.element.transform(transformation);
  386 +};
  387 +*/
  1 +/**
  2 + * Represents a canvas on which BPMN 2.0 constructs can be drawn.
  3 + *
  4 + * Some of the icons used are licenced under a Creative Commons Attribution 2.5
  5 + * License, see http://www.famfamfam.com/lab/icons/silk/
  6 + *
  7 + * @see ProcessDiagramGenerator
  8 + * @author (Java) Joram Barrez
  9 + * @author (Javascript) Dmitry Farafonov
  10 + */
  11 +
  12 +//Color.Cornsilk
  13 +
  14 +var ARROW_HEAD_SIMPLE = "simple";
  15 +var ARROW_HEAD_EMPTY = "empty";
  16 +var ARROW_HEAD_FILL = "FILL";
  17 +var MULTILINE_VERTICAL_ALIGN_TOP = "top";
  18 +var MULTILINE_VERTICAL_ALIGN_MIDDLE = "middle";
  19 +var MULTILINE_VERTICAL_ALIGN_BOTTOM = "bottom";
  20 +var MULTILINE_HORIZONTAL_ALIGN_LEFT = "start";
  21 +var MULTILINE_HORIZONTAL_ALIGN_MIDDLE = "middle";
  22 +var MULTILINE_HORIZONTAL_ALIGN_RIGHT = "end";
  23 +
  24 +// Predefined sized
  25 +var TEXT_PADDING = 3;
  26 +var ARROW_WIDTH = 4;
  27 +var CONDITIONAL_INDICATOR_WIDTH = 16;
  28 +var MARKER_WIDTH = 12;
  29 +var ANNOTATION_TEXT_PADDING = 7;
  30 +
  31 +// Colors
  32 +var TASK_COLOR = Color.OldLace; // original: Color.get(255, 255, 204);
  33 +var TASK_STROKE_COLOR = Color.black; /*Color.SlateGrey; */
  34 +//var EXPANDED_SUBPROCESS_ATTRS = Color.black; /*Color.SlateGrey; */
  35 +var BOUNDARY_EVENT_COLOR = Color.white;
  36 +var CONDITIONAL_INDICATOR_COLOR = Color.get(255, 255, 255);
  37 +var HIGHLIGHT_COLOR = Color.Firebrick1;
  38 +//var SEQUENCEFLOW_COLOR = Color.DimGrey;
  39 +var SEQUENCEFLOW_COLOR = Color.black;
  40 +
  41 +var CATCHING_EVENT_COLOR = Color.black; /* Color.SlateGrey; */
  42 +var START_EVENT_COLOR = Color.get(251,251,251);
  43 +var START_EVENT_STROKE_COLOR = Color.black; /* Color.SlateGrey; */
  44 +var END_EVENT_COLOR = Color.get(251,251,251);
  45 +//var END_EVENT_STROKE_COLOR = Color.black;
  46 +var NONE_END_EVENT_COLOR = Color.Firebrick4;
  47 +var NONE_END_EVENT_STROKE_COLOR = Color.Firebrick4;
  48 +var ERROR_END_EVENT_COLOR = Color.Firebrick;
  49 +var ERROR_END_EVENT_STROKE_COLOR = Color.Firebrick;
  50 +//var LABEL_COLOR = Color.get(112, 146, 190);
  51 +var LABEL_COLOR = Color.get(72, 106, 150);
  52 +
  53 +// Fonts
  54 +var NORMAL_FONT = {font: "10px Arial", opacity: 1, fill: Color.black};
  55 +var LABEL_FONT = {font: "11px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR};
  56 +var LABEL_FONT_SMOOTH = {font: "10px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR, stroke: LABEL_COLOR, "stroke-width":.4};
  57 +var TASK_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
  58 +var TASK_FONT_SMOOTH = {font: "11px Arial", opacity: 1, fill: Color.black, stroke: LABEL_COLOR, "stroke-width":.4};
  59 +var POOL_LANE_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
  60 +var EXPANDED_SUBPROCESS_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
  61 +
  62 +// Strokes
  63 +var NORMAL_STROKE = 1;
  64 +var SEQUENCEFLOW_STROKE = 1.5;
  65 +var SEQUENCEFLOW_HIGHLIGHT_STROKE = 2;
  66 +var THICK_TASK_BORDER_STROKE = 2.5;
  67 +var GATEWAY_TYPE_STROKE = 3.2;
  68 +var END_EVENT_STROKE = NORMAL_STROKE+2;
  69 +var MULTI_INSTANCE_STROKE = 1.3;
  70 +var EVENT_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "stroke-dasharray": ". "};
  71 +//var EXPANDED_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "fill": Color.FloralWhite};
  72 +var EXPANDED_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "fill": Color.WhiteSmoke};
  73 +var NON_INTERRUPTING_EVENT_STROKE = "- ";
  74 +
  75 +var TASK_CORNER_ROUND = 10;
  76 +var EXPANDED_SUBPROCESS_CORNER_ROUND = 10;
  77 +
  78 +// icons
  79 +var ICON_SIZE = 16;
  80 +var ICON_PADDING = 4;
  81 +var USERTASK_IMAGE = "images/deployer/user.png";
  82 +var SCRIPTTASK_IMAGE = "images/deployer/script.png";
  83 +var SERVICETASK_IMAGE = "images/deployer/service.png";
  84 +var RECEIVETASK_IMAGE = "images/deployer/receive.png";
  85 +var SENDTASK_IMAGE = "images/deployer/send.png";
  86 +var MANUALTASK_IMAGE = "images/deployer/manual.png";
  87 +var BUSINESS_RULE_TASK_IMAGE = "images/deployer/business_rule.png";
  88 +var TIMER_IMAGE = "images/deployer/timer.png";
  89 +var MESSAGE_CATCH_IMAGE = "images/deployer/message_catch.png";
  90 +var MESSAGE_THROW_IMAGE = "images/deployer/message_throw.png";
  91 +var ERROR_THROW_IMAGE = "images/deployer/error_throw.png";
  92 +var ERROR_CATCH_IMAGE = "images/deployer/error_catch.png";
  93 +var SIGNAL_CATCH_IMAGE = "images/deployer/signal_catch.png";
  94 +var SIGNAL_THROW_IMAGE = "images/deployer/signal_throw.png";
  95 +var MULTIPLE_CATCH_IMAGE = "images/deployer/multiple_catch.png";
  96 +
  97 +
  98 +var ObjectType = {
  99 + ELLIPSE: "ellipse",
  100 + FLOW: "flow",
  101 + RECT: "rect",
  102 + RHOMBUS: "rhombus"
  103 +};
  104 +
  105 +function OBJ(type){
  106 + this.c = null;
  107 + this.type = type;
  108 + this.nestedElements = [];
  109 +};
  110 +OBJ.prototype = {
  111 +
  112 +};
  113 +
  114 +var CONNECTION_TYPE = {
  115 + SEQUENCE_FLOW: "sequence_flow",
  116 + MESSAGE_FLOW: "message_flow",
  117 + ASSOCIATION: "association"
  118 +};
  119 +
  120 +var ProcessDiagramCanvas = function(){
  121 +};
  122 +ProcessDiagramCanvas.prototype = {
  123 +// var DefaultProcessDiagramCanvas = {
  124 + canvasHolder: "holder",
  125 + canvasWidth: 0,
  126 + canvasHeight: 0,
  127 + paint: Color.black,
  128 + strokeWidth: 0,
  129 + font: null,
  130 + fontSmoothing: null,
  131 +
  132 + g: null,
  133 + ninjaPaper: null,
  134 +
  135 + objects: [],
  136 +
  137 + processDefinitionId: null,
  138 + activity: null,
  139 +
  140 + frame: null,
  141 +
  142 +
  143 + debug: false,
  144 +
  145 + /**
  146 + * Creates an empty canvas with given width and height.
  147 + */
  148 + init: function(width, height, processDefinitionId){
  149 + this.canvasWidth = width;
  150 + this.canvasHeight = height;
  151 +
  152 + // TODO: name it as 'canvasName'
  153 + if (!processDefinitionId)
  154 + processDefinitionId = "holder";
  155 +
  156 + this.processDefinitionId = processDefinitionId;
  157 + this.canvasHolder = this.processDefinitionId;
  158 +
  159 + var h = document.getElementById(this.canvasHolder);
  160 + if (!h) return;
  161 +
  162 + h.style.width = this.canvasWidth;
  163 + h.style.height = this.canvasHeight;
  164 +
  165 + this.g = Raphael(this.canvasHolder);
  166 + this.g.clear();
  167 +
  168 + //this.setPaint(Color.DimGrey);
  169 + this.setPaint(Color.black);
  170 + //this.setPaint(Color.white);
  171 + this.setStroke(NORMAL_STROKE);
  172 +
  173 + //this.setFont("Arial", 11);
  174 + this.setFont(NORMAL_FONT);
  175 + //this.font = this.g.getFont("Arial");
  176 +
  177 + this.fontSmoothing = true;
  178 +
  179 + // ninja!
  180 + var RaphaelOriginal = Raphael;
  181 + this.ninjaPaper =(function (local_raphael) {
  182 + var paper = local_raphael(1, 1, 1, 1, processDefinitionId);
  183 + return paper;
  184 + })(Raphael.ninja());
  185 + Raphael = RaphaelOriginal;
  186 + },
  187 + setPaint: function(color){
  188 + this.paint = color;
  189 + },
  190 + getPaint: function(){
  191 + return this.paint;
  192 + },
  193 + setStroke: function(strokeWidth){
  194 + this.strokeWidth = strokeWidth;
  195 + },
  196 + getStroke: function(){
  197 + return this.strokeWidth;
  198 + },
  199 + /*
  200 + setFont: function(family, weight, style, stretch){
  201 + this.font = this.g.getFont(family, weight);
  202 + },
  203 + */
  204 + setFont: function(font){
  205 + this.font = font;
  206 + },
  207 + getFont: function(){
  208 + return this.font;
  209 + },
  210 + drawShaddow: function(object){
  211 + var border = object.clone();
  212 + border.attr({"stroke-width": this.strokeWidth + 6,
  213 + "stroke": Color.white,
  214 + "fill": Color.white,
  215 + "opacity": 1,
  216 + "stroke-dasharray":null});
  217 + //border.toBack();
  218 + object.toFront();
  219 +
  220 + return border;
  221 + },
  222 +
  223 + setConextObject: function(obj){
  224 + this.contextObject = obj;
  225 + },
  226 + getConextObject: function(){
  227 + return this.contextObject;
  228 + },
  229 + setContextToElement: function(object){
  230 + var contextObject = this.getConextObject();
  231 + object.id = contextObject.id;
  232 + object.data("contextObject", contextObject);
  233 + },
  234 + onClick: function(event, instance, element){
  235 + var overlay = element;
  236 + var set = overlay.data("set");
  237 + var contextObject = overlay.data("contextObject");
  238 + //console.log("["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
  239 + if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.click) {
  240 + var args = [instance, element, contextObject];
  241 + ProcessDiagramGenerator.options.on.click.apply(event, args);
  242 + }
  243 + },
  244 + onRightClick: function(event, instance, element){
  245 + var overlay = element;
  246 + var set = overlay.data("set");
  247 + var contextObject = overlay.data("contextObject");
  248 + //console.log("[%s], activityId: %s (RIGHTCLICK)", contextObject.getProperty("type"), contextObject.getId());
  249 +
  250 + if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.rightClick) {
  251 + var args = [instance, element, contextObject];
  252 + ProcessDiagramGenerator.options.on.rightClick.apply(event, args);
  253 + }
  254 + },
  255 + onHoverIn: function(event, instance, element){
  256 + var overlay = element;
  257 + var set = overlay.data("set");
  258 + var contextObject = overlay.data("contextObject");
  259 +
  260 + var border = instance.g.getById(contextObject.id + "_border");
  261 + border.attr("opacity", 0.3);
  262 +
  263 + // provide callback
  264 + if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.over) {
  265 + var args = [instance, element, contextObject];
  266 + ProcessDiagramGenerator.options.on.over.apply(event, args);
  267 + }
  268 + },
  269 + onHoverOut: function(event, instance, element){
  270 + var overlay = element;
  271 + var set = overlay.data("set");
  272 + var contextObject = overlay.data("contextObject");
  273 +
  274 + var border = instance.g.getById(contextObject.id + "_border");
  275 + border.attr("opacity", 0.0);
  276 + // provide callback
  277 + if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.out) {
  278 + var args = [instance, element, contextObject];
  279 + ProcessDiagramGenerator.options.on.out.apply(event, args);
  280 + }
  281 + },
  282 + addHandlers: function(set, x, y, width, height, type){
  283 + var contextObject = this.getConextObject();
  284 +
  285 + var cx = x+width/2, cy = y+height/2;
  286 + if (type == "event") {
  287 + var border = this.g.ellipse(cx, cy, width/2+4, height/2+4);
  288 + var overlay = this.g.ellipse(cx, cy, width/2, height/2);
  289 + } else if (type == "gateway") {
  290 + // rhombus
  291 + var border = this.g.path( "M" + (x - 4) + " " + (y + (height / 2)) +
  292 + "L" + (x + (width / 2)) + " " + (y + height + 4) +
  293 + "L" + (x + width + 4) + " " + (y + (height / 2)) +
  294 + "L" + (x + (width / 2)) + " " + (y - 4) +
  295 + "z" );
  296 + var overlay = this.g.path( "M" + x + " " + (y + (height / 2)) +
  297 + "L" + (x + (width / 2)) + " " + (y + height) +
  298 + "L" + (x + width) + " " + (y + (height / 2)) +
  299 + "L" + (x + (width / 2)) + " " + y +
  300 + "z" );
  301 + } else if (type == "task") {
  302 + var border = this.g.rect(x - 4, y - 4, width+9, height+9, TASK_CORNER_ROUND+4);
  303 + var overlay = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
  304 + }
  305 +
  306 + border.attr({stroke: Color.get(132,112,255)/*Color.Tan1*/,"stroke-width": 4, opacity: 0.0});
  307 + border.id = contextObject.id + "_border";
  308 +
  309 + set.push(border);
  310 +
  311 + overlay.attr({stroke: Color.Orange,"stroke-width": 3, fill: Color.get(0,0,0), opacity: 0.0, cursor: "hand"});
  312 + overlay.data("set",set);
  313 + overlay.id = contextObject.id;
  314 + overlay.data("contextObject",contextObject);
  315 +
  316 + var instance = this;
  317 + overlay.mousedown(function(event){if (event.button == 2) instance.onRightClick(event, instance, this);});
  318 + overlay.click(function(event){instance.onClick(event, instance, this);});
  319 + overlay.hover(function(event){instance.onHoverIn(event, instance, this);}, function(event){instance.onHoverOut(event, instance, this);});
  320 + },
  321 +
  322 + /*
  323 + * Start Events:
  324 + *
  325 + * drawNoneStartEvent
  326 + * drawTimerStartEvent
  327 + * drawMessageStartEvent
  328 + * drawErrorStartEvent
  329 + * drawSignalStartEvent
  330 + * _drawStartEventImage
  331 + * _drawStartEvent
  332 + */
  333 +
  334 + drawNoneStartEvent: function(x, y, width, height) {
  335 + this.g.setStart();
  336 +
  337 + var isInterrupting = undefined;
  338 + this._drawStartEvent(x, y, width, height, isInterrupting, null);
  339 +
  340 + var set = this.g.setFinish();
  341 + this.addHandlers(set, x, y, width, height, "event");
  342 + },
  343 +
  344 + drawTimerStartEvent: function(x, y, width, height, isInterrupting, name) {
  345 + this.g.setStart();
  346 +
  347 + this._drawStartEvent(x, y, width, height, isInterrupting, null);
  348 +
  349 + var cx = x + width/2 - this.getStroke()/4;
  350 + var cy = y + height/2 - this.getStroke()/4;
  351 +
  352 + var w = width*.9;// - this.getStroke()*2;
  353 + var h = height*.9;// - this.getStroke()*2;
  354 +
  355 + this._drawClock(cx, cy, w, h);
  356 +
  357 + if (this.gebug)
  358 + var center = this.g.ellipse(cx, cy, 3, 3).attr({stroke:"none", fill: Color.green});
  359 +
  360 + var set = this.g.setFinish();
  361 + this.addHandlers(set, x, y, width, height, "event");
  362 + },
  363 +
  364 + drawMessageStartEvent: function(x, y, width, height, isInterrupting, name) {
  365 + this.g.setStart();
  366 +
  367 + this._drawStartEvent(x, y, width, height, isInterrupting, null);
  368 +
  369 + this._drawStartEventImage(x, y, width, height, MESSAGE_CATCH_IMAGE);
  370 +
  371 + var set = this.g.setFinish();
  372 + this.addHandlers(set, x, y, width, height, "event");
  373 + },
  374 +
  375 + drawErrorStartEvent: function(x, y, width, height, name) {
  376 + this.g.setStart();
  377 + var isInterrupting = undefined;
  378 + this._drawStartEvent(x, y, width, height, isInterrupting);
  379 +
  380 + this._drawStartEventImage(x, y, width, height, ERROR_CATCH_IMAGE);
  381 +
  382 + var set = this.g.setFinish();
  383 + this.addHandlers(set, x, y, width, height, "event");
  384 + },
  385 +
  386 + drawSignalStartEvent: function(x, y, width, height, isInterrupting, name) {
  387 + this.g.setStart();
  388 + this._drawStartEvent(x, y, width, height, isInterrupting, null);
  389 +
  390 + this._drawStartEventImage(x, y, width, height, SIGNAL_CATCH_IMAGE);
  391 +
  392 + var set = this.g.setFinish();
  393 + this.addHandlers(set, x, y, width, height, "event");
  394 + },
  395 +
  396 + drawMultipleStartEvent: function(x, y, width, height, isInterrupting, name) {
  397 + this.g.setStart();
  398 +
  399 + this._drawStartEvent(x, y, width, height, isInterrupting, null);
  400 +
  401 + var cx = x + width/2 - this.getStroke()/4;
  402 + var cy = y + height/2 - this.getStroke()/4;
  403 +
  404 + var w = width*1;
  405 + var h = height*1;
  406 +
  407 + this._drawPentagon(cx, cy, w, h);
  408 +
  409 + var set = this.g.setFinish();
  410 + this.addHandlers(set, x, y, width, height, "event");
  411 + },
  412 +
  413 + _drawStartEventImage: function(x, y, width, height, image){
  414 + var cx = x + width/2 - this.getStroke()/2;
  415 + var cy = y + height/2 - this.getStroke()/2;
  416 +
  417 + var w = width*.65;// - this.getStroke()*2;
  418 + var h = height*.65;// - this.getStroke()*2;
  419 +
  420 + var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
  421 + },
  422 + _drawStartEvent: function(x, y, width, height, isInterrupting){
  423 + var originalPaint = this.getPaint();
  424 + if (typeof(START_EVENT_STROKE_COLOR) != "undefined")
  425 + this.setPaint(START_EVENT_STROKE_COLOR);
  426 +
  427 +
  428 + width -= this.strokeWidth / 2;
  429 + height -= this.strokeWidth / 2;
  430 +
  431 + x = x + width/2;
  432 + y = y + height/2;
  433 +
  434 + var circle = this.g.ellipse(x, y, width/2, height/2);
  435 +
  436 + circle.attr({"stroke-width": this.strokeWidth,
  437 + "stroke": this.paint,
  438 + //"stroke": START_EVENT_STROKE_COLOR,
  439 + "fill": START_EVENT_COLOR});
  440 +
  441 + // white shaddow
  442 + this.drawShaddow(circle);
  443 +
  444 + if (isInterrupting!=null && isInterrupting!=undefined && !isInterrupting)
  445 + circle.attr({"stroke-dasharray": NON_INTERRUPTING_EVENT_STROKE});
  446 +
  447 + this.setContextToElement(circle);
  448 +
  449 +
  450 + this.setPaint(originalPaint);
  451 + },
  452 +
  453 + /*
  454 + * End Events:
  455 + *
  456 + * drawNoneEndEvent
  457 + * drawErrorEndEvent
  458 + * drawMessageEndEvent
  459 + * drawSignalEndEvent
  460 + * drawMultipleEndEvent
  461 + * _drawEndEventImage
  462 + * _drawNoneEndEvent
  463 + */
  464 +
  465 + drawNoneEndEvent: function(x, y, width, height) {
  466 + this.g.setStart();
  467 +
  468 + this._drawNoneEndEvent(x, y, width, height, null, "noneEndEvent");
  469 +
  470 + var set = this.g.setFinish();
  471 + this.addHandlers(set, x, y, width, height, "event");
  472 + },
  473 +
  474 + drawErrorEndEvent: function(x, y, width, height) {
  475 + this.g.setStart();
  476 + var type = "errorEndEvent";
  477 + this._drawNoneEndEvent(x, y, width, height, null, type);
  478 +
  479 + this._drawEndEventImage(x, y, width, height, ERROR_THROW_IMAGE);
  480 +
  481 + var set = this.g.setFinish();
  482 + this.addHandlers(set, x, y, width, height, "event");
  483 + },
  484 +
  485 + drawMessageEndEvent: function(x, y, width, height, name) {
  486 + this.g.setStart();
  487 + var type = "errorEndEvent";
  488 + this._drawNoneEndEvent(x, y, width, height, null, type);
  489 +
  490 + this._drawEndEventImage(x, y, width, height, MESSAGE_THROW_IMAGE);
  491 +
  492 + var set = this.g.setFinish();
  493 + this.addHandlers(set, x, y, width, height, "event");
  494 + },
  495 +
  496 + drawSignalEndEvent: function(x, y, width, height, name) {
  497 + this.g.setStart();
  498 + var type = "errorEndEvent";
  499 + this._drawNoneEndEvent(x, y, width, height, null, type);
  500 +
  501 + this._drawEndEventImage(x, y, width, height, SIGNAL_THROW_IMAGE);
  502 +
  503 + var set = this.g.setFinish();
  504 + this.addHandlers(set, x, y, width, height, "event");
  505 + },
  506 +
  507 + drawMultipleEndEvent: function(x, y, width, height, name) {
  508 + this.g.setStart();
  509 + var type = "errorEndEvent";
  510 + this._drawNoneEndEvent(x, y, width, height, null, type);
  511 +
  512 + var cx = x + width/2;// - this.getStroke();
  513 + var cy = y + height/2;// - this.getStroke();
  514 +
  515 + var w = width*1;
  516 + var h = height*1;
  517 +
  518 + var filled = true;
  519 + this._drawPentagon(cx, cy, w, h, filled);
  520 +
  521 + var set = this.g.setFinish();
  522 + this.addHandlers(set, x, y, width, height, "event");
  523 + },
  524 +
  525 + drawTerminateEndEvent: function(x, y, width, height) {
  526 + this.g.setStart();
  527 + var type = "errorEndEvent";
  528 + this._drawNoneEndEvent(x, y, width, height, null, type);
  529 +
  530 + var cx = x + width/2;// - this.getStroke()/2;
  531 + var cy = y + height/2;// - this.getStroke()/2;
  532 +
  533 + var w = width/2*.6;
  534 + var h = height/2*.6;
  535 +
  536 + var circle = this.g.ellipse(cx, cy, w, h).attr({fill: Color.black});
  537 +
  538 + var set = this.g.setFinish();
  539 + this.addHandlers(set, x, y, width, height, "event");
  540 + },
  541 +
  542 + _drawEndEventImage: function(x, y, width, height, image){
  543 + var cx = x + width/2 - this.getStroke()/2;
  544 + var cy = y + height/2 - this.getStroke()/2;
  545 +
  546 + var w = width*.65;
  547 + var h = height*.65;
  548 +
  549 + var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
  550 + },
  551 +
  552 + _drawNoneEndEvent: function(x, y, width, height, image, type) {
  553 + var originalPaint = this.getPaint();
  554 + if (typeof(CATCHING_EVENT_COLOR) != "undefined")
  555 + this.setPaint(CATCHING_EVENT_COLOR);
  556 +
  557 + var strokeColor = this.getPaint();
  558 + var fillColor = this.getPaint();
  559 +
  560 + if (type == "errorEndEvent") {
  561 + strokeColor = ERROR_END_EVENT_STROKE_COLOR;
  562 + fillColor = ERROR_END_EVENT_COLOR;
  563 + } else if (type == "noneEndEvent") {
  564 + strokeColor = NONE_END_EVENT_STROKE_COLOR;
  565 + fillColor = NONE_END_EVENT_COLOR;
  566 + } else
  567 +
  568 + // event circles
  569 + width -= this.strokeWidth / 2;
  570 + height -= this.strokeWidth / 2;
  571 +
  572 + x = x + width/2;// + this.strokeWidth/2;
  573 + y = y + width/2;// + this.strokeWidth/2;
  574 +
  575 + // outerCircle
  576 + var outerCircle = this.g.ellipse(x, y, width/2, height/2);
  577 +
  578 + // white shaddow
  579 + var shaddow = this.drawShaddow(outerCircle);
  580 +
  581 + outerCircle.attr({"stroke-width": this.strokeWidth,
  582 + "stroke": strokeColor,
  583 + "fill": fillColor});
  584 +
  585 + var innerCircleX = x;
  586 + var innerCircleY = y;
  587 + var innerCircleWidth = width/2 - 2;
  588 + var innerCircleHeight = height/2 - 2;
  589 + var innerCircle = this.g.ellipse(innerCircleX, innerCircleY, innerCircleWidth, innerCircleHeight);
  590 + innerCircle.attr({"stroke-width": this.strokeWidth,
  591 + "stroke": strokeColor,
  592 + "fill": Color.white});
  593 +
  594 + // TODO: implement it
  595 + //var originalPaint = this.getPaint();
  596 + //this.g.setPaint(BOUNDARY_EVENT_COLOR);
  597 +
  598 + this.setPaint(originalPaint);
  599 + },
  600 +
  601 + /*
  602 + * Catching Events:
  603 + *
  604 + * drawCatchingTimerEvent
  605 + * drawCatchingErrorEvent
  606 + * drawCatchingSignalEvent
  607 + * drawCatchingMessageEvent
  608 + * drawCatchingMultipleEvent
  609 + * _drawCatchingEventImage
  610 + * _drawCatchingEvent
  611 + */
  612 +
  613 +
  614 + drawCatchingTimerEvent: function(x, y, width, height, isInterrupting, name) {
  615 + this.g.setStart();
  616 + this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
  617 +
  618 + var innerCircleWidth = width - 4;
  619 + var innerCircleHeight = height - 4;
  620 +
  621 + var cx = x + width/2 - this.getStroke()/4;
  622 + var cy = y + height/2 - this.getStroke()/4;
  623 +
  624 + var w = innerCircleWidth*.9;// - this.getStroke()*2;
  625 + var h = innerCircleHeight*.9;// - this.getStroke()*2;
  626 +
  627 + this._drawClock(cx, cy, w, h);
  628 +
  629 + var set = this.g.setFinish();
  630 + this.addHandlers(set, x, y, width, height, "event");
  631 + },
  632 +
  633 + drawCatchingErrorEvent: function(x, y, width, height, isInterrupting, name) {
  634 + this.g.setStart();
  635 + this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
  636 +
  637 + this._drawCatchingEventImage(x, y, width, height, ERROR_CATCH_IMAGE);
  638 +
  639 + var set = this.g.setFinish();
  640 + this.addHandlers(set, x, y, width, height, "event");
  641 + },
  642 +
  643 + drawCatchingSignalEvent: function(x, y, width, height, isInterrupting, name) {
  644 + this.g.setStart();
  645 + this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
  646 +
  647 + this._drawCatchingEventImage(x, y, width, height, SIGNAL_CATCH_IMAGE);
  648 +
  649 + var set = this.g.setFinish();
  650 + this.addHandlers(set, x, y, width, height, "event");
  651 + },
  652 +
  653 + drawCatchingMessageEvent: function(x, y, width, height, isInterrupting, name) {
  654 + this.g.setStart();
  655 + this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
  656 +
  657 + this._drawCatchingEventImage(x, y, width, height, MESSAGE_CATCH_IMAGE);
  658 +
  659 + var set = this.g.setFinish();
  660 + this.addHandlers(set, x, y, width, height, "event");
  661 + },
  662 +
  663 + drawCatchingMultipleEvent: function(x, y, width, height, isInterrupting, name) {
  664 + this.g.setStart();
  665 + this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
  666 +
  667 + var cx = x + width/2 - this.getStroke();
  668 + var cy = y + height/2 - this.getStroke();
  669 +
  670 + var w = width*.9;
  671 + var h = height*.9;
  672 +
  673 + this._drawPentagon(cx, cy, w, h);
  674 +
  675 + var set = this.g.setFinish();
  676 + this.addHandlers(set, x, y, width, height, "event");
  677 + },
  678 +
  679 + _drawCatchingEventImage: function(x, y, width, height, image){
  680 + var innerCircleWidth = width - 4;
  681 + var innerCircleHeight = height - 4;
  682 +
  683 + var cx = x + width/2 - this.getStroke()/2;
  684 + var cy = y + height/2 - this.getStroke()/2;
  685 +
  686 + var w = innerCircleWidth*.6;// - this.getStroke()*2;
  687 + var h = innerCircleHeight*.6;// - this.getStroke()*2;
  688 +
  689 + var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
  690 + },
  691 +
  692 + _drawCatchingEvent: function(x, y, width, height, isInterrupting, image) {
  693 + var originalPaint = this.getPaint();
  694 + if (typeof(CATCHING_EVENT_COLOR) != "undefined")
  695 + this.setPaint(CATCHING_EVENT_COLOR);
  696 +
  697 + // event circles
  698 + width -= this.strokeWidth / 2;
  699 + height -= this.strokeWidth / 2;
  700 +
  701 + x = x + width/2;// + this.strokeWidth/2;
  702 + y = y + width/2;// + this.strokeWidth/2;
  703 +
  704 + // outerCircle
  705 + var outerCircle = this.g.ellipse(x, y, width/2, height/2);
  706 +
  707 + // white shaddow
  708 + var shaddow = this.drawShaddow(outerCircle);
  709 +
  710 + //console.log("isInterrupting: " + isInterrupting, "x:" , x, "y:",y);
  711 + if (isInterrupting!=null && isInterrupting!=undefined && !isInterrupting)
  712 + outerCircle.attr({"stroke-dasharray": NON_INTERRUPTING_EVENT_STROKE});
  713 +
  714 + outerCircle.attr({"stroke-width": this.strokeWidth,
  715 + "stroke": this.getPaint(),
  716 + "fill": BOUNDARY_EVENT_COLOR});
  717 +
  718 + var innerCircleX = x;
  719 + var innerCircleY = y;
  720 + var innerCircleRadiusX = width/2 - 4;
  721 + var innerCircleRadiusY = height/2 - 4;
  722 + var innerCircle = this.g.ellipse(innerCircleX, innerCircleY, innerCircleRadiusX, innerCircleRadiusY);
  723 + innerCircle.attr({"stroke-width": this.strokeWidth,
  724 + "stroke": this.getPaint()});
  725 +
  726 + if (image) {
  727 + var imageWidth = imageHeight = innerCircleRadiusX*1.2 + this.getStroke()*2;
  728 + var imageX = innerCircleX-imageWidth/2 - this.strokeWidth/2;
  729 + var imageY = innerCircleY-imageWidth/2 - this.strokeWidth/2;
  730 + var img = this.g.image(image, imageX, imageY, imageWidth, imageHeight);
  731 + }
  732 +
  733 + this.setPaint(originalPaint);
  734 +
  735 + var set = this.g.set();
  736 + set.push(outerCircle, innerCircle, shaddow);
  737 + this.setContextToElement(outerCircle);
  738 +
  739 + // TODO: add shapes to set
  740 +
  741 + /*
  742 + var st = this.g.set();
  743 + st.push(
  744 + this.g.ellipse(innerCircleX, innerCircleY, 2, 2),
  745 + this.g.ellipse(imageX, imageY, 2, 2)
  746 + );
  747 + st.attr({fill: "red", "stroke-width":0});
  748 + */
  749 + },
  750 +
  751 + /*
  752 + * Catching Events:
  753 + *
  754 + * drawThrowingNoneEvent
  755 + * drawThrowingSignalEvent
  756 + * drawThrowingMessageEvent
  757 + * drawThrowingMultipleEvent
  758 + */
  759 +
  760 + drawThrowingNoneEvent: function(x, y, width, height, name) {
  761 + this.g.setStart();
  762 + this._drawCatchingEvent(x, y, width, height, null, null);
  763 +
  764 + var set = this.g.setFinish();
  765 + this.addHandlers(set, x, y, width, height, "event");
  766 + },
  767 +
  768 + drawThrowingSignalEvent: function(x, y, width, height, name) {
  769 + this.g.setStart();
  770 + this._drawCatchingEvent(x, y, width, height, null, null);
  771 +
  772 + this._drawCatchingEventImage(x, y, width, height, SIGNAL_THROW_IMAGE);
  773 +
  774 + var set = this.g.setFinish();
  775 + this.addHandlers(set, x, y, width, height, "event");
  776 + },
  777 +
  778 + drawThrowingMessageEvent: function(x, y, width, height, name) {
  779 + this.g.setStart();
  780 + this._drawCatchingEvent(x, y, width, height, null, null);
  781 +
  782 + this._drawCatchingEventImage(x, y, width, height, MESSAGE_THROW_IMAGE);
  783 +
  784 + var set = this.g.setFinish();
  785 + this.addHandlers(set, x, y, width, height, "event");
  786 + },
  787 +
  788 + drawThrowingMultipleEvent: function(x, y, width, height, name) {
  789 + this.g.setStart();
  790 + this._drawCatchingEvent(x, y, width, height, null, null);
  791 +
  792 + var cx = x + width/2 - this.getStroke();
  793 + var cy = y + height/2 - this.getStroke();
  794 +
  795 + var w = width*.9;
  796 + var h = height*.9;
  797 +
  798 + var filled = true;
  799 + this._drawPentagon(cx, cy, w, h, filled);
  800 +
  801 + var set = this.g.setFinish();
  802 + this.addHandlers(set, x, y, width, height, "event");
  803 + },
  804 +
  805 + /*
  806 + * Draw flows:
  807 + *
  808 + * _connectFlowToActivity
  809 + * _drawFlow
  810 + * _drawDefaultSequenceFlowIndicator
  811 + * drawSequenceflow
  812 + * drawMessageflow
  813 + * drawAssociation
  814 + * _drawCircleTail
  815 + * _drawArrowHead
  816 + * _drawConditionalSequenceFlowIndicator
  817 + * drawSequenceflowWithoutArrow
  818 + */
  819 +
  820 + _connectFlowToActivity: function(sourceActivityId, destinationActivityId, waypoints){
  821 + var sourceActivity = this.g.getById(sourceActivityId);
  822 + var destinationActivity = this.g.getById(destinationActivityId);
  823 + if (sourceActivity == null || destinationActivity == null) {
  824 + if (sourceActivity == null)
  825 + console.error("source activity["+sourceActivityId+"] not found");
  826 + else
  827 + console.error("destination activity["+destinationActivityId+"] not found");
  828 + return null;
  829 + }
  830 + var bbSourceActivity = sourceActivity.getBBox()
  831 + var bbDestinationActivity = destinationActivity.getBBox()
  832 +
  833 + var path = [];
  834 + var newWaypoints = [];
  835 + for(var i = 0; i < waypoints.length; i++){
  836 + var pathType = ""
  837 + if (i==0)
  838 + pathType = "M";
  839 + else
  840 + pathType = "L";
  841 +
  842 + path.push([pathType, waypoints[i].x, waypoints[i].y]);
  843 + newWaypoints.push({x:waypoints[i].x, y:waypoints[i].y});
  844 + }
  845 +
  846 + var ninjaPathSourceActivity = this.ninjaPaper.path(sourceActivity.realPath);
  847 + var ninjaPathDestinationActivity = this.ninjaPaper.path(destinationActivity.realPath);
  848 + var ninjaBBSourceActivity = ninjaPathSourceActivity.getBBox();
  849 + var ninjaBBDestinationActivity = ninjaPathDestinationActivity.getBBox();
  850 +
  851 + // set target of the flow to the center of the taskObject
  852 + var newPath = path;
  853 + var originalSource = {x: newPath[0][1], y: newPath[0][2]};
  854 + var originalTarget = {x: newPath[newPath.length-1][1], y: newPath[newPath.length-1][2]};
  855 + newPath[0][1] = ninjaBBSourceActivity.x + (ninjaBBSourceActivity.x2 - ninjaBBSourceActivity.x ) / 2;
  856 + newPath[0][2] = ninjaBBSourceActivity.y + (ninjaBBSourceActivity.y2 - ninjaBBSourceActivity.y ) / 2;
  857 + newPath[newPath.length-1][1] = ninjaBBDestinationActivity.x + (ninjaBBDestinationActivity.x2 - ninjaBBDestinationActivity.x ) / 2;
  858 + newPath[newPath.length-1][2] = ninjaBBDestinationActivity.y + (ninjaBBDestinationActivity.y2 - ninjaBBDestinationActivity.y ) / 2;
  859 +
  860 + var ninjaPathFlowObject = this.ninjaPaper.path(newPath);
  861 + var ninjaBBFlowObject = ninjaPathFlowObject.getBBox();
  862 +
  863 + var intersectionsSource = Raphael.pathIntersection(ninjaPathSourceActivity.realPath, ninjaPathFlowObject.realPath);
  864 + var intersectionsDestination = Raphael.pathIntersection(ninjaPathDestinationActivity.realPath, ninjaPathFlowObject.realPath);
  865 + var intersectionSource = intersectionsSource.pop();
  866 + var intersectionDestination = intersectionsDestination.pop();
  867 +
  868 + if (intersectionSource != undefined) {
  869 + if (this.gebug) {
  870 + var diameter = 5;
  871 + var dotOriginal = this.g.ellipse(originalSource.x, originalSource.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Pink});
  872 + var dot = this.g.ellipse(intersectionSource.x, intersectionSource.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Green});
  873 + }
  874 +
  875 + newWaypoints[0].x = intersectionSource.x;
  876 + newWaypoints[0].y = intersectionSource.y;
  877 + }
  878 + if (intersectionDestination != undefined) {
  879 + if (this.gebug) {
  880 + var diameter = 5;
  881 + var dotOriginal = this.g.ellipse(originalTarget.x, originalTarget.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Red});
  882 + var dot = this.g.ellipse(intersectionDestination.x, intersectionDestination.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Blue});
  883 + }
  884 +
  885 + newWaypoints[newWaypoints.length-1].x = intersectionDestination.x;
  886 + newWaypoints[newWaypoints.length-1].y = intersectionDestination.y;
  887 + }
  888 +
  889 + this.ninjaPaper.clear();
  890 + return newWaypoints;
  891 + },
  892 +
  893 + _drawFlow: function(waypoints, conditional, isDefault, highLighted, withArrowHead, connectionType){
  894 + var originalPaint = this.getPaint();
  895 + var originalStroke = this.getStroke();
  896 +
  897 + this.setPaint(SEQUENCEFLOW_COLOR);
  898 + this.setStroke(SEQUENCEFLOW_STROKE);
  899 +
  900 + if (highLighted) {
  901 + this.setPaint(HIGHLIGHT_COLOR);
  902 + this.setStroke(SEQUENCEFLOW_HIGHLIGHT_STROKE);
  903 + }
  904 +
  905 +// TODO: generate polylineId or do something!!
  906 + var uuid = Raphael.createUUID();
  907 +
  908 + var contextObject = this.getConextObject();
  909 + var newWaypoints = waypoints;
  910 + if (contextObject) {
  911 + var newWaypoints = this._connectFlowToActivity(contextObject.sourceActivityId, contextObject.destinationActivityId, waypoints);
  912 +
  913 + if (!newWaypoints) {
  914 + console.error("Error draw flow from '"+contextObject.sourceActivityId+"' to '"+contextObject.destinationActivityId+"' ");
  915 + return;
  916 + }
  917 + }
  918 + var polyline = new Polyline(uuid, newWaypoints, this.getStroke());
  919 + //var polyline = new Polyline(waypoints, 3);
  920 +
  921 + polyline.element = this.g.path(polyline.path);
  922 + polyline.element.attr("stroke-width", this.getStroke());
  923 + polyline.element.attr("stroke", this.getPaint());
  924 +
  925 + if (contextObject) {
  926 + polyline.element.id = contextObject.id;
  927 + polyline.element.data("contextObject", contextObject);
  928 + } else {
  929 + polyline.element.id = uuid;
  930 + }
  931 +
  932 +
  933 + /*
  934 + polyline.element.mouseover(function(){
  935 + this.attr({"stroke-width": NORMAL_STROKE + 2});
  936 + }).mouseout(function(){
  937 + this.attr({"stroke-width": NORMAL_STROKE});
  938 + });
  939 + */
  940 +
  941 + var last = polyline.getAnchorsCount()-1;
  942 + var x = polyline.getAnchor(last).x;
  943 + var y = polyline.getAnchor(last).y;
  944 + //var c = this.g.ellipse(x, y, 5, 5);
  945 +
  946 + var lastLineIndex = polyline.getLinesCount()-1;
  947 + var line = polyline.getLine(lastLineIndex);
  948 + var firstLine = polyline.getLine(0);
  949 +
  950 + var arrowHead = null,
  951 + circleTail = null,
  952 + defaultSequenceFlowIndicator = null,
  953 + conditionalSequenceFlowIndicator = null;
  954 +
  955 + if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW) {
  956 + circleTail = this._drawCircleTail(firstLine, connectionType);
  957 + }
  958 + if(withArrowHead)
  959 + arrowHead = this._drawArrowHead(line, connectionType);
  960 +
  961 + //console.log("isDefault: ", isDefault, ", isDefaultConditionAvailable: ", polyline.isDefaultConditionAvailable);
  962 + if (isDefault && polyline.isDefaultConditionAvailable) {
  963 + //var angle = polyline.getLineAngle(0);
  964 + //console.log("firstLine", firstLine);
  965 + defaultSequenceFlowIndicator = this._drawDefaultSequenceFlowIndicator(firstLine);
  966 + }
  967 +
  968 + if (conditional) {
  969 + conditionalSequenceFlowIndicator = this._drawConditionalSequenceFlowIndicator(firstLine);
  970 + }
  971 +
  972 + // draw flow name
  973 + var flowName = contextObject.name;
  974 + if (flowName) {
  975 + var xPointArray = contextObject.xPointArray;
  976 + var yPointArray = contextObject.yPointArray;
  977 + var textX = xPointArray[0] < xPointArray[1] ? xPointArray[0] : xPointArray[1];
  978 + var textY = yPointArray[0] < yPointArray[1] ? yPointArray[1] : yPointArray[0];
  979 + // fix xy
  980 + textX += 20;
  981 + textY -= 10;
  982 + this.g.text(textX, textY, flowName).attr(LABEL_FONT);
  983 + }
  984 +
  985 + var st = this.g.set();
  986 + st.push(polyline.element, arrowHead, circleTail, conditionalSequenceFlowIndicator);
  987 + polyline.element.data("set", st);
  988 + polyline.element.data("withArrowHead", withArrowHead);
  989 +
  990 + var polyCloneAttrNormal = {"stroke-width": this.getStroke() + 5, stroke: Color.get(132,112,255), opacity: 0.0, cursor: "hand"};
  991 + var polyClone = st.clone().attr(polyCloneAttrNormal).hover(function () {
  992 + //if (polyLine.data("isSelected")) return;
  993 + polyClone.attr({opacity: 0.2});
  994 + }, function () {
  995 + //if (polyLine.data("isSelected")) return;
  996 + polyClone.attr({opacity: 0.0});
  997 + });
  998 + polyClone.data("objectId", polyline.element.id);
  999 + polyClone.click(function(){
  1000 + var instance = this;
  1001 + var objectId = instance.data("objectId");
  1002 + var object = this.paper.getById(objectId);
  1003 + var contextObject = object.data("contextObject");
  1004 + if (contextObject) {
  1005 + console.log("[flow], objectId: " + object.id +", flow: " + contextObject.flow);
  1006 + ProcessDiagramGenerator.showFlowInfo(contextObject);
  1007 + }
  1008 + }).dblclick(function(){
  1009 + console.log("!!! DOUBLE CLICK !!!");
  1010 + }).hover(function (mouseEvent) {
  1011 + var instance = this;
  1012 + var objectId = instance.data("objectId");
  1013 + var object = this.paper.getById(objectId);
  1014 + var contextObject = object.data("contextObject");
  1015 + if (contextObject)
  1016 + ProcessDiagramGenerator.showFlowInfo(contextObject);
  1017 + });
  1018 + polyClone.data("parentId", uuid);
  1019 +
  1020 + if (!connectionType || connectionType == CONNECTION_TYPE.SEQUENCE_FLOW)
  1021 + polyline.element.attr("stroke-width", this.getStroke());
  1022 + else if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW)
  1023 + polyline.element.attr({"stroke-dasharray": "--"});
  1024 + else if (connectionType == CONNECTION_TYPE.ASSOCIATION)
  1025 + polyline.element.attr({"stroke-dasharray": ". "});
  1026 +
  1027 + this.setPaint(originalPaint);
  1028 + this.setStroke(originalStroke);
  1029 + },
  1030 +
  1031 + _drawDefaultSequenceFlowIndicator: function(line) {
  1032 + //console.log("line: ", line);
  1033 +
  1034 + var len = 10; c = len/2, f = 8;
  1035 + var defaultIndicator = this.g.path("M" + (-c) + " " + 0 + "L" + (c) + " " + 0);
  1036 + defaultIndicator.attr("stroke-width", this.getStroke()+0);
  1037 + defaultIndicator.attr("stroke", this.getPaint());
  1038 +
  1039 +
  1040 + var cosAngle = Math.cos((line.angle));
  1041 + var sinAngle = Math.sin((line.angle));
  1042 +
  1043 + var dx = f * cosAngle;
  1044 + var dy = f * sinAngle;
  1045 +
  1046 + var x1 = line.x1 + dx + 0*c*cosAngle;
  1047 + var y1 = line.y1 + dy + 0*c*sinAngle;
  1048 +
  1049 + defaultIndicator.transform("t" + (x1) + "," + (y1) + "");
  1050 + defaultIndicator.transform("...r" + Raphael.deg(line.angle - 3*Math.PI / 4) + " " + 0 + " " + 0);
  1051 + /*
  1052 + var c0 = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Blue});
  1053 + c0.transform("t" + (line.x1) + "," + (line.y1) + "");
  1054 + var center = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Red});
  1055 + center.transform("t" + (line.x1+dx) + "," + (line.y1+dy) + "");
  1056 + */
  1057 +
  1058 + return defaultIndicator;
  1059 + },
  1060 +
  1061 + drawSequenceflow: function(waypoints, conditional, isDefault, highLighted) {
  1062 + var withArrowHead = true;
  1063 + this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW);
  1064 + },
  1065 +
  1066 + drawMessageflow: function(waypoints, highLighted) {
  1067 + var withArrowHead = true;
  1068 + var conditional=isDefault=false;
  1069 + this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.MESSAGE_FLOW);
  1070 + },
  1071 +
  1072 + drawAssociation: function(waypoints, withArrowHead, highLighted) {
  1073 + var withArrowHead = withArrowHead;
  1074 + var conditional=isDefault=false;
  1075 + this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.ASSOCIATION);
  1076 + },
  1077 +
  1078 + _drawCircleTail: function(line, connectionType){
  1079 + var diameter = ARROW_WIDTH/2*1.5;
  1080 +
  1081 + // anti smoothing
  1082 + if (this.strokeWidth%2 == 1)
  1083 + line.x1 += .5, line.y1 += .5;
  1084 +
  1085 + var circleTail = this.g.ellipse(line.x1, line.y1, diameter, diameter);
  1086 + circleTail.attr("fill", Color.white);
  1087 + circleTail.attr("stroke", this.getPaint());
  1088 +
  1089 + return circleTail;
  1090 + },
  1091 +
  1092 + _drawArrowHead: function(line, connectionType){
  1093 + var doubleArrowWidth = 2 * ARROW_WIDTH;
  1094 +
  1095 + if (connectionType == CONNECTION_TYPE.ASSOCIATION)
  1096 + var arrowHead = this.g.path("M-" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "L 0 0 L" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth);
  1097 + else
  1098 + var arrowHead = this.g.path("M0 0L-" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "L" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "z");
  1099 +
  1100 + //arrowHead.transform("t" + 0 + ",-" + this.getStroke() + "");
  1101 +
  1102 + // anti smoothing
  1103 + if (this.strokeWidth%2 == 1)
  1104 + line.x2 += .5, line.y2 += .5;
  1105 +
  1106 + arrowHead.transform("t" + line.x2 + "," + line.y2 + "");
  1107 + arrowHead.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
  1108 +
  1109 + if (!connectionType || connectionType == CONNECTION_TYPE.SEQUENCE_FLOW)
  1110 + arrowHead.attr("fill", this.getPaint());
  1111 + else if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW)
  1112 + arrowHead.attr("fill", Color.white);
  1113 +
  1114 + arrowHead.attr("stroke-width", this.getStroke());
  1115 + arrowHead.attr("stroke", this.getPaint());
  1116 +
  1117 + return arrowHead;
  1118 + },
  1119 +
  1120 + /*
  1121 + drawArrowHead2: function(srcX, srcY, targetX, targetY) {
  1122 + var doubleArrowWidth = 2 * ARROW_WIDTH;
  1123 +
  1124 + //var arrowHead = this.g.path("M-" + ARROW_WIDTH/2 + " -" + doubleArrowWidth + "L0 0" + "L" + ARROW_WIDTH/2 + " -" + doubleArrowWidth + "z");
  1125 +
  1126 + var arrowHead = this.g.path("M0 0L-" + ARROW_WIDTH/1.5 + " -" + doubleArrowWidth + "L" + ARROW_WIDTH/1.5 + " -" + doubleArrowWidth + "z");
  1127 + //var c = DefaultProcessDiagramCanvas.g.ellipse(0, 0, 3, 3);
  1128 + //c.transform("t"+targetX+","+targetY+"");
  1129 +
  1130 + var angle = Math.atan2(targetY - srcY, targetX - srcX);
  1131 +
  1132 + arrowHead.transform("t"+targetX+","+targetY+"");
  1133 + arrowHead.transform("...r" + Raphael.deg(angle - Math.PI / 2) + " "+0+" "+0);
  1134 +
  1135 + //console.log(arrowHead.transform());
  1136 + //console.log("--> " + Raphael.deg(angle - Math.PI / 2));
  1137 +
  1138 + arrowHead.attr("fill", this.getPaint());
  1139 + arrowHead.attr("stroke", this.getPaint());
  1140 +
  1141 + / *
  1142 + // shaddow
  1143 + var c0 = arrowHead.clone();
  1144 + c0.transform("...t-1 1");
  1145 + c0.attr("stroke-width", this.strokeWidth);
  1146 + c0.attr("stroke", Color.black);
  1147 + c0.attr("opacity", 0.15);
  1148 + c0.toBack();
  1149 + * /
  1150 + },
  1151 + */
  1152 +
  1153 + _drawConditionalSequenceFlowIndicator: function(line){
  1154 + var horizontal = (CONDITIONAL_INDICATOR_WIDTH * 0.7);
  1155 + var halfOfHorizontal = horizontal / 2;
  1156 + var halfOfVertical = CONDITIONAL_INDICATOR_WIDTH / 2;
  1157 +
  1158 + var uuid = null;
  1159 + var waypoints = [{x: 0, y: 0},
  1160 + {x: -halfOfHorizontal, y: halfOfVertical},
  1161 + {x: 0, y: CONDITIONAL_INDICATOR_WIDTH},
  1162 + {x: halfOfHorizontal, y: halfOfVertical}];
  1163 + /*
  1164 + var polyline = new Polyline(uuid, waypoints, this.getStroke());
  1165 + polyline.element = this.g.path(polyline.path);
  1166 + polyline.element.attr("stroke-width", this.getStroke());
  1167 + polyline.element.attr("stroke", this.getPaint());
  1168 + polyline.element.id = uuid;
  1169 + */
  1170 + var polygone = new Polygone(waypoints, this.getStroke());
  1171 + polygone.element = this.g.path(polygone.path);
  1172 + polygone.element.attr("fill", Color.white);
  1173 +
  1174 + polygone.transform("t" + line.x1 + "," + line.y1 + "");
  1175 + polygone.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
  1176 +
  1177 +
  1178 + var cosAngle = Math.cos((line.angle));
  1179 + var sinAngle = Math.sin((line.angle));
  1180 +
  1181 + //polygone.element.attr("stroke-width", this.getStroke());
  1182 + //polygone.element.attr("stroke", this.getPaint());
  1183 +
  1184 + polygone.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
  1185 +
  1186 + return polygone.element;
  1187 + },
  1188 +
  1189 + drawSequenceflowWithoutArrow: function(waypoints, conditional, isDefault, highLighted) {
  1190 + var withArrowHead = false;
  1191 + this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW);
  1192 + },
  1193 +
  1194 + /*
  1195 + * Draw artifacts
  1196 + */
  1197 +
  1198 + drawPoolOrLane: function(x, y, width, height, name){
  1199 + // anti smoothing
  1200 + if (this.strokeWidth%2 == 1)
  1201 + x = Math.round(x) + .5, y = Math.round(y) + .5;
  1202 +
  1203 + // shape
  1204 + var rect = this.g.rect(x, y, width, height);
  1205 + var attr = {"stroke-width": NORMAL_STROKE, stroke: TASK_STROKE_COLOR};
  1206 + rect.attr(attr);
  1207 +
  1208 + // Add the name as text, vertical
  1209 + if(name != null && name.length > 0) {
  1210 + var attr = POOL_LANE_FONT;
  1211 +
  1212 + // Include some padding
  1213 + var availableTextSpace = height - 6;
  1214 +
  1215 + // Create rotation for derived font
  1216 + var truncated = this.fitTextToWidth(name, availableTextSpace);
  1217 + var realWidth = this.getStringWidth(truncated, attr);
  1218 + var realHeight = this.getStringHeight(truncated, attr);
  1219 +
  1220 + //console.log("truncated:", truncated, ", height:", height, ", realHeight:", realHeight, ", availableTextSpace:", availableTextSpace, ", realWidth:", realWidth);
  1221 + var newX = x + 2 + realHeight*1 - realHeight/2;
  1222 + var newY = 3 + y + availableTextSpace - (availableTextSpace - realWidth) / 2 - realWidth/2;
  1223 + var textElement = this.g.text(newX, newY, truncated).attr(attr);
  1224 + //console.log(".getBBox(): ", t.getBBox());
  1225 + textElement.transform("r" + Raphael.deg(270 * Math.PI/180) + " " + newX + " " + newY);
  1226 + }
  1227 +
  1228 + // TODO: add to set
  1229 + },
  1230 +
  1231 + _drawTask: function(name, x, y, width, height, thickBorder) {
  1232 + var originalPaint = this.getPaint();
  1233 + this.setPaint(TASK_COLOR);
  1234 +
  1235 + // anti smoothing
  1236 + if (this.strokeWidth%2 == 1)
  1237 + x = Math.round(x) + .5, y = Math.round(y) + .5;
  1238 +
  1239 + // shape
  1240 + var shape = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
  1241 + var attr = {"stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: this.getPaint()};
  1242 + shape.attr(attr);
  1243 + //shape.attr({fill: "90-"+this.getPaint()+"-" + Color.get(250, 250, 244)});
  1244 +
  1245 + var contextObject = this.getConextObject();
  1246 + if (contextObject) {
  1247 + shape.id = contextObject.id;
  1248 + shape.data("contextObject", contextObject);
  1249 + }
  1250 +
  1251 + //var activity = this.getConextObject();
  1252 + //console.log("activity: " + activity.getId(), activity);
  1253 + //Object.clone(activity);
  1254 +
  1255 + /*
  1256 + c.mouseover(function(){
  1257 + this.attr({"stroke-width": NORMAL_STROKE + 2});
  1258 + }).mouseout(function(){
  1259 + this.attr({"stroke-width": NORMAL_STROKE});
  1260 + });
  1261 + */
  1262 +
  1263 + this.setPaint(originalPaint);
  1264 +
  1265 + // white shaddow
  1266 + this.drawShaddow(shape);
  1267 +
  1268 +
  1269 + if (thickBorder) {
  1270 + shape.attr({"stroke-width": THICK_TASK_BORDER_STROKE});
  1271 + } else {
  1272 + //g.draw(rect);
  1273 + }
  1274 +
  1275 + // text
  1276 + if (name) {
  1277 + var fontAttr = TASK_FONT;
  1278 +
  1279 + // Include some padding
  1280 + var paddingX = 5;
  1281 + var paddingY = 5;
  1282 + var availableTextSpace = width - paddingX*2;
  1283 +
  1284 + // TODO: this.setFont
  1285 + // var originalFont = this.getFont();
  1286 + // this.setFont(TASK_FONT)
  1287 + /*
  1288 + var truncated = this.fitTextToWidth(name, availableTextSpace);
  1289 + var realWidth = this.getStringWidth(truncated, fontAttr);
  1290 + var realHeight = this.getStringHeight(truncated, fontAttr);
  1291 +
  1292 + //var t = this.g.text(x + width/2 + realWidth*0/2 + paddingX*0, y + height/2, truncated).attr(fontAttr);
  1293 + */
  1294 + //console.log("draw task name: " + name);
  1295 + var boxWidth = width - (2 * TEXT_PADDING);
  1296 + var boxHeight = height - ICON_SIZE - ICON_PADDING - ICON_PADDING - MARKER_WIDTH - 2 - 2;
  1297 + var boxX = x + width/2 - boxWidth/2;
  1298 + var boxY = y + height/2 - boxHeight/2 + ICON_PADDING + ICON_PADDING - 2 - 2;
  1299 + /*
  1300 + var boxWidth = width - (2 * ANNOTATION_TEXT_PADDING);
  1301 + var boxHeight = height - (2 * ANNOTATION_TEXT_PADDING);
  1302 + var boxX = x + width/2 - boxWidth/2;
  1303 + var boxY = y + height/2 - boxHeight/2;
  1304 + */
  1305 +
  1306 + this.drawTaskLabel(name, boxX, boxY, boxWidth, boxHeight);
  1307 + }
  1308 + },
  1309 +
  1310 + drawTaskLabel: function(text, x, y, boxWidth, boxHeight){
  1311 + var originalFont = this.getFont();
  1312 + this.setFont(TASK_FONT);
  1313 +
  1314 + this._drawMultilineText(text, x, y, boxWidth, boxHeight, MULTILINE_VERTICAL_ALIGN_MIDDLE, MULTILINE_HORIZONTAL_ALIGN_MIDDLE);
  1315 +
  1316 + this.setFont(originalFont);
  1317 + },
  1318 +
  1319 + drawAnnotationText: function(text, x, y, width, height){
  1320 + //this._drawMultilineText(text, x, y, width, height, "start");
  1321 +
  1322 + var originalPaint = this.getPaint();
  1323 + var originalFont = this.getFont();
  1324 +
  1325 + this.setPaint(Color.black);
  1326 + this.setFont(TASK_FONT);
  1327 +
  1328 + this._drawMultilineText(text, x, y, width, height, MULTILINE_VERTICAL_ALIGN_TOP, MULTILINE_HORIZONTAL_ALIGN_LEFT);
  1329 +
  1330 + this.setPaint(originalPaint);
  1331 + this.setFont(originalFont);
  1332 + },
  1333 +
  1334 + drawLabel: function(text, x, y, width, height){
  1335 + //this._drawMultilineText(text, x, y, width, height, "start");
  1336 +
  1337 + var originalPaint = this.getPaint();
  1338 + var originalFont = this.getFont();
  1339 +
  1340 + this.setPaint(LABEL_COLOR);
  1341 + //this.setFont(LABEL_FONT);
  1342 + this.setFont(LABEL_FONT_SMOOTH);
  1343 +
  1344 + // predefined box width for labels
  1345 + // TODO: use label width as is, but not height (for stretching)
  1346 + if (!width || !height) {
  1347 + width = 100;
  1348 + height = 0;
  1349 + }
  1350 +
  1351 + // TODO: remove it. It is debug
  1352 + x = x - width/2;
  1353 +
  1354 + this._drawMultilineText(text, x, y, width, height, MULTILINE_VERTICAL_ALIGN_TOP, MULTILINE_HORIZONTAL_ALIGN_MIDDLE);
  1355 +
  1356 + this.setPaint(originalPaint);
  1357 + this.setFont(originalFont);
  1358 + },
  1359 +
  1360 + /*
  1361 + drawMultilineLabel: function(text, x, y){
  1362 + var originalFont = this.getFont();
  1363 + this.setFont(LABEL_FONT_SMOOTH);
  1364 +
  1365 + var boxWidth = 80;
  1366 + x = x - boxWidth/2
  1367 +
  1368 + this._drawMultilineText(text, x, y, boxWidth, null, "middle");
  1369 + this.setFont(originalFont);
  1370 + },
  1371 + */
  1372 +
  1373 + getStringWidth: function(text, fontAttrs){
  1374 + var textElement = this.g.text(0, 0, text).attr(fontAttrs).hide();
  1375 + var bb = textElement.getBBox();
  1376 +
  1377 + //console.log("string width: ", t.getBBox().width);
  1378 + return textElement.getBBox().width;
  1379 + },
  1380 + getStringHeight: function(text, fontAttrs){
  1381 + var textElement = this.g.text(0, 0, text).attr(fontAttrs).hide();
  1382 + var bb = textElement.getBBox();
  1383 +
  1384 + //console.log("string height: ", t.getBBox().height);
  1385 + return textElement.getBBox().height;
  1386 + },
  1387 + fitTextToWidth: function(original, width) {
  1388 + var text = original;
  1389 +
  1390 + // TODO: move attr on parameters
  1391 + var attr = {font: "11px Arial", opacity: 0};
  1392 +
  1393 + // remove length for "..."
  1394 + var dots = this.g.text(0, 0, "...").attr(attr).hide();
  1395 + var dotsBB = dots.getBBox();
  1396 +
  1397 + var maxWidth = width - dotsBB.width;
  1398 +
  1399 + var textElement = this.g.text(0, 0, text).attr(attr).hide();
  1400 + var bb = textElement.getBBox();
  1401 +
  1402 + // it's a little bit incorrect with "..."
  1403 + while (bb.width > maxWidth && text.length > 0) {
  1404 + text = text.substring(0, text.length - 1);
  1405 + textElement.attr({"text": text});
  1406 + bb = textElement.getBBox();
  1407 + }
  1408 +
  1409 + // remove element from paper
  1410 + textElement.remove();
  1411 +
  1412 + if (text != original) {
  1413 + text = text + "...";
  1414 + }
  1415 +
  1416 + return text;
  1417 + },
  1418 + wrapTextToWidth: function(original, width){
  1419 +
  1420 + //return original;
  1421 +
  1422 + var text = original;
  1423 + var wrappedText = "\n";
  1424 +
  1425 + // TODO: move attr on parameters
  1426 + var attr = {font: "11px Arial", opacity: 0};
  1427 +
  1428 + var textElement = this.g.text(0, 0, wrappedText).attr(attr).hide();
  1429 + var bb = textElement.getBBox();
  1430 +
  1431 + var resultText = "";
  1432 + var i = 0, j = 0;
  1433 + while (text.length > 0) {
  1434 + while (bb.width < width && text.length>0) {
  1435 + // remove "\n"
  1436 + wrappedText = wrappedText.substring(0,wrappedText.length-1);
  1437 + // add new char, add "\n"
  1438 + wrappedText = wrappedText + text.substring(0,1) + "\n";
  1439 + text = text.substring(1);
  1440 +
  1441 + textElement.attr({"text": wrappedText});
  1442 + bb = textElement.getBBox();
  1443 + i++;
  1444 + if (i>200) break;
  1445 + }
  1446 + // remove "\n"
  1447 + wrappedText = wrappedText.substring(0, wrappedText.length - 1);
  1448 +
  1449 + if (text.length == 0) {
  1450 + resultText += wrappedText;
  1451 + break;
  1452 + }
  1453 +
  1454 + // return last char to text
  1455 + text = wrappedText.substring(wrappedText.length-1) + text;
  1456 + // remove last char from wrappedText
  1457 + wrappedText = wrappedText.substring(0, wrappedText.length-1) + "\n";
  1458 +
  1459 + textElement.attr({"text": wrappedText});
  1460 + bb = textElement.getBBox();
  1461 +
  1462 + //console.log(">> ", wrappedText, ", ", text);
  1463 + resultText += wrappedText;
  1464 + wrappedText = "\n";
  1465 +
  1466 + j++;
  1467 + if (j>20) break;
  1468 + }
  1469 + // remove element from paper
  1470 + textElement.remove();
  1471 +
  1472 + return resultText;
  1473 + },
  1474 +
  1475 + wrapTextToWidth2: function(original, width){
  1476 + var text = original;
  1477 + var wrappedText = "\n";
  1478 +
  1479 + // TODO: move attr on parameters
  1480 + var attr = {font: "11px Arial", opacity: 0};
  1481 +
  1482 + var textElement = this.g.text(0, 0, wrappedText).attr(attr).hide();
  1483 + var bb = textElement.getBBox();
  1484 +
  1485 + var resultText = "";
  1486 + var i = 0, j = 0;
  1487 + while (text.length > 0) {
  1488 + while (bb.width < width && text.length>0) {
  1489 + // remove "\n"
  1490 + wrappedText = wrappedText.substring(0,wrappedText.length-1);
  1491 + // add new char, add "\n"
  1492 + wrappedText = wrappedText + text.substring(0,1) + "\n";
  1493 + text = text.substring(1);
  1494 +
  1495 + textElement.attr({"text": wrappedText});
  1496 + bb = textElement.getBBox();
  1497 + i++;
  1498 + if (i>200) break;
  1499 + }
  1500 + // remove "\n"
  1501 + wrappedText = wrappedText.substring(0, wrappedText.length - 1);
  1502 +
  1503 + if (text.length == 0) {
  1504 + resultText += wrappedText;
  1505 + break;
  1506 + }
  1507 +
  1508 + // return last char to text
  1509 + text = wrappedText.substring(wrappedText.length-1) + text;
  1510 + // remove last char from wrappedText
  1511 + wrappedText = wrappedText.substring(0, wrappedText.length-1) + "\n";
  1512 +
  1513 + textElement.attr({"text": wrappedText});
  1514 + bb = textElement.getBBox();
  1515 +
  1516 + //console.log(">> ", wrappedText, ", ", text);
  1517 + resultText += wrappedText;
  1518 + wrappedText = "\n";
  1519 +
  1520 + j++;
  1521 + if (j>20) break;
  1522 + }
  1523 + // remove element from paper
  1524 + textElement.remove();
  1525 +
  1526 + return resultText;
  1527 + },
  1528 +
  1529 + drawUserTask: function(name, x, y, width, height) {
  1530 + this.g.setStart();
  1531 + this._drawTask(name, x, y, width, height);
  1532 + var img = this.g.image(USERTASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
  1533 + var set = this.g.setFinish();
  1534 + this.addHandlers(set, x, y, width, height, "task");
  1535 + },
  1536 +
  1537 + drawScriptTask: function(name, x, y, width, height) {
  1538 + this.g.setStart();
  1539 + this._drawTask(name, x, y, width, height);
  1540 + var img = this.g.image(SCRIPTTASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
  1541 + var set = this.g.setFinish();
  1542 + this.addHandlers(set, x, y, width, height, "task");
  1543 + },
  1544 +
  1545 + drawServiceTask: function(name, x, y, width, height) {
  1546 + this.g.setStart();
  1547 + this._drawTask(name, x, y, width, height);
  1548 + var img = this.g.image(SERVICETASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
  1549 + var set = this.g.setFinish();
  1550 + this.addHandlers(set, x, y, width, height, "task");
  1551 + },
  1552 +
  1553 + drawReceiveTask: function(name, x, y, width, height) {
  1554 + this.g.setStart();
  1555 + this._drawTask(name, x, y, width, height);
  1556 + var img = this.g.image(RECEIVETASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
  1557 + var set = this.g.setFinish();
  1558 + this.addHandlers(set, x, y, width, height, "task");
  1559 + },
  1560 +
  1561 + drawSendTask: function(name, x, y, width, height) {
  1562 + this.g.setStart();
  1563 + this._drawTask(name, x, y, width, height);
  1564 + var img = this.g.image(SENDTASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
  1565 + var set = this.g.setFinish();
  1566 + this.addHandlers(set, x, y, width, height, "task");
  1567 + },
  1568 +
  1569 + drawManualTask: function(name, x, y, width, height) {
  1570 + this.g.setStart();
  1571 + this._drawTask(name, x, y, width, height);
  1572 + var img = this.g.image(MANUALTASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
  1573 + var set = this.g.setFinish();
  1574 + this.addHandlers(set, x, y, width, height, "task");
  1575 + },
  1576 +
  1577 + drawBusinessRuleTask: function(name, x, y, width, height) {
  1578 + this.g.setStart();
  1579 + this._drawTask(name, x, y, width, height);
  1580 + var img = this.g.image(BUSINESS_RULE_TASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
  1581 + var set = this.g.setFinish();
  1582 + this.addHandlers(set, x, y, width, height, "task");
  1583 + },
  1584 +
  1585 + drawExpandedSubProcess: function(name, x, y, width, height, isTriggeredByEvent){
  1586 + this.g.setStart();
  1587 + // anti smoothing
  1588 + if (this.strokeWidth%2 == 1)
  1589 + x = Math.round(x) + .5, y = Math.round(y) + .5;
  1590 +
  1591 + // shape
  1592 + var rect = this.g.rect(x, y, width, height, EXPANDED_SUBPROCESS_CORNER_ROUND);
  1593 +
  1594 + // Use different stroke (dashed)
  1595 + if(isTriggeredByEvent) {
  1596 + rect.attr(EVENT_SUBPROCESS_ATTRS);
  1597 + } else {
  1598 + rect.attr(EXPANDED_SUBPROCESS_ATTRS);
  1599 + }
  1600 +
  1601 + this.setContextToElement(rect);
  1602 +
  1603 + var fontAttr = EXPANDED_SUBPROCESS_FONT;
  1604 +
  1605 + // Include some padding
  1606 + var paddingX = 10;
  1607 + var paddingY = 5;
  1608 + var availableTextSpace = width - paddingX*2;
  1609 +
  1610 + var truncated = this.fitTextToWidth(name, availableTextSpace);
  1611 + var realWidth = this.getStringWidth(truncated, fontAttr);
  1612 + var realHeight = this.getStringHeight(truncated, fontAttr);
  1613 +
  1614 + var textElement = this.g.text(x + width/2 - realWidth*0/2 + 0*paddingX, y + realHeight/2 + paddingY, truncated).attr(fontAttr);
  1615 +
  1616 + var set = this.g.setFinish();
  1617 + // TODO: Expanded Sub Process may has specific handlers
  1618 + //this.addHandlers(set, x, y, width, height, "task");
  1619 + },
  1620 +
  1621 + drawCollapsedSubProcess: function(name, x, y, width, height, isTriggeredByEvent) {
  1622 + this.g.setStart();
  1623 + this._drawCollapsedTask(name, x, y, width, height, false);
  1624 + var set = this.g.setFinish();
  1625 + this.addHandlers(set, x, y, width, height, "task");
  1626 + },
  1627 +
  1628 + drawCollapsedCallActivity: function(name, x, y, width, height) {
  1629 + this.g.setStart();
  1630 + this._drawCollapsedTask(name, x, y, width, height, true);
  1631 + var set = this.g.setFinish();
  1632 + this.addHandlers(set, x, y, width, height, "task");
  1633 + },
  1634 +
  1635 + _drawCollapsedTask: function(name, x, y, width, height, thickBorder) {
  1636 + // The collapsed marker is now visualized separately
  1637 + this._drawTask(name, x, y, width, height, thickBorder);
  1638 + },
  1639 +
  1640 + drawCollapsedMarker: function(x, y, width, height){
  1641 + // rectangle
  1642 + var rectangleWidth = MARKER_WIDTH;
  1643 + var rectangleHeight = MARKER_WIDTH;
  1644 +
  1645 + // anti smoothing
  1646 + if (this.strokeWidth%2 == 1)
  1647 + y += .5;
  1648 +
  1649 + var rect = this.g.rect(x + (width - rectangleWidth) / 2, y + height - rectangleHeight - 3, rectangleWidth, rectangleHeight);
  1650 +
  1651 + // plus inside rectangle
  1652 + var cx = rect.attr("x") + rect.attr("width")/2;
  1653 + var cy = rect.attr("y") + rect.attr("height")/2;
  1654 +
  1655 + var line = this.g.path(
  1656 + "M" + cx + " " + (cy+2) + "L" + cx + " " + (cy-2) +
  1657 + "M" + (cx-2) + " " + cy + "L" + (cx+2) + " " + cy
  1658 + ).attr({"stroke-width": this.strokeWidth});
  1659 +
  1660 + },
  1661 +
  1662 + drawActivityMarkers: function(x, y, width, height, multiInstanceSequential, multiInstanceParallel, collapsed){
  1663 + if (collapsed) {
  1664 + if (!multiInstanceSequential && !multiInstanceParallel) {
  1665 + this.drawCollapsedMarker(x, y, width, height);
  1666 + } else {
  1667 + this.drawCollapsedMarker(x - MARKER_WIDTH / 2 - 2, y, width, height);
  1668 + if (multiInstanceSequential) {
  1669 + console.log("is collapsed and multiInstanceSequential");
  1670 + this.drawMultiInstanceMarker(true, x + MARKER_WIDTH / 2 + 2, y, width, height);
  1671 + } else if (multiInstanceParallel) {
  1672 + console.log("is collapsed and multiInstanceParallel");
  1673 + this.drawMultiInstanceMarker(false, x + MARKER_WIDTH / 2 + 2, y, width, height);
  1674 + }
  1675 + }
  1676 + } else {
  1677 + if (multiInstanceSequential) {
  1678 + console.log("is multiInstanceSequential");
  1679 + this.drawMultiInstanceMarker(true, x, y, width, height);
  1680 + } else if (multiInstanceParallel) {
  1681 + console.log("is multiInstanceParallel");
  1682 + this.drawMultiInstanceMarker(false, x, y, width, height);
  1683 + }
  1684 + }
  1685 + },
  1686 +
  1687 + drawGateway: function(x, y, width, height) {
  1688 +
  1689 + var rhombus = this.g.path( "M" + x + " " + (y + (height / 2)) +
  1690 + "L" + (x + (width / 2)) + " " + (y + height) +
  1691 + "L" + (x + width) + " " + (y + (height / 2)) +
  1692 + "L" + (x + (width / 2)) + " " + y +
  1693 + "z"
  1694 + );
  1695 +
  1696 + // white shaddow
  1697 + this.drawShaddow(rhombus);
  1698 +
  1699 + rhombus.attr("stroke-width", this.strokeWidth);
  1700 + rhombus.attr("stroke", Color.SlateGrey);
  1701 + rhombus.attr({fill: Color.white});
  1702 +
  1703 + this.setContextToElement(rhombus);
  1704 +
  1705 + return rhombus;
  1706 + },
  1707 +
  1708 + drawParallelGateway: function(x, y, width, height) {
  1709 + this.g.setStart();
  1710 +
  1711 + // rhombus
  1712 + this.drawGateway(x, y, width, height);
  1713 +
  1714 + // plus inside rhombus
  1715 + var originalStroke = this.getStroke();
  1716 + this.setStroke(GATEWAY_TYPE_STROKE);
  1717 +
  1718 + var plus = this.g.path(
  1719 + "M" + (x + 10) + " " + (y + height / 2) + "L" + (x + width - 10) + " " + (y + height / 2) + // horizontal
  1720 + "M" + (x + width / 2) + " " + (y + height - 10) + "L" + (x + width / 2) + " " + (y + 10) // vertical
  1721 + );
  1722 + plus.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
  1723 +
  1724 + this.setStroke(originalStroke);
  1725 +
  1726 + var set = this.g.setFinish();
  1727 + this.addHandlers(set, x, y, width, height, "gateway");
  1728 + },
  1729 +
  1730 + drawExclusiveGateway: function(x, y, width, height) {
  1731 + this.g.setStart();
  1732 +
  1733 + // rhombus
  1734 + var rhombus = this.drawGateway(x, y, width, height);
  1735 +
  1736 + var quarterWidth = width / 4;
  1737 + var quarterHeight = height / 4;
  1738 +
  1739 + // X inside rhombus
  1740 + var originalStroke = this.getStroke();
  1741 + this.setStroke(GATEWAY_TYPE_STROKE);
  1742 +
  1743 + var iks = this.g.path(
  1744 + "M" + (x + quarterWidth + 3) + " " + (y + quarterHeight + 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + 3 * quarterHeight - 3) +
  1745 + "M" + (x + quarterWidth + 3) + " " + (y + 3 * quarterHeight - 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + quarterHeight + 3)
  1746 + );
  1747 + iks.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
  1748 +
  1749 + this.setStroke(originalStroke);
  1750 +
  1751 + var set = this.g.setFinish();
  1752 + this.addHandlers(set, x, y, width, height, "gateway");
  1753 + },
  1754 +
  1755 + drawInclusiveGateway: function(x, y, width, height){
  1756 + this.g.setStart();
  1757 +
  1758 + // rhombus
  1759 + this.drawGateway(x, y, width, height);
  1760 +
  1761 + var diameter = width / 4;
  1762 +
  1763 + // circle inside rhombus
  1764 + var originalStroke = this.getStroke();
  1765 + this.setStroke(GATEWAY_TYPE_STROKE);
  1766 + var circle = this.g.ellipse(width/2 + x, height/2 + y, diameter, diameter);
  1767 + circle.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
  1768 +
  1769 + this.setStroke(originalStroke);
  1770 +
  1771 + var set = this.g.setFinish();
  1772 + this.addHandlers(set, x, y, width, height, "gateway");
  1773 + },
  1774 +
  1775 + drawEventBasedGateway: function(x, y, width, height){
  1776 + this.g.setStart();
  1777 +
  1778 + // rhombus
  1779 + this.drawGateway(x, y, width, height);
  1780 +
  1781 + var diameter = width / 2;
  1782 +
  1783 + // rombus inside rhombus
  1784 + var originalStroke = this.getStroke();
  1785 + this.setStroke(GATEWAY_TYPE_STROKE);
  1786 +
  1787 +
  1788 + // draw GeneralPath (polygon)
  1789 + var n=5;
  1790 + var angle = 2*Math.PI/n;
  1791 + var x1Points = [];
  1792 + var y1Points = [];
  1793 +
  1794 + for ( var index = 0; index < n; index++ ) {
  1795 + var v = index*angle - Math.PI/2;
  1796 + x1Points[index] = x + parseInt(Math.round(width/2)) + parseInt(Math.round((width/4)*Math.cos(v)));
  1797 + y1Points[index] = y + parseInt(Math.round(height/2)) + parseInt(Math.round((height/4)*Math.sin(v)));
  1798 + }
  1799 + //g.drawPolygon(x1Points, y1Points, n);
  1800 +
  1801 + var path = "";
  1802 + for ( var index = 0; index < n; index++ ) {
  1803 + if (index == 0)
  1804 + path += "M";
  1805 + else
  1806 + path += "L";
  1807 + path += x1Points[index] + "," + y1Points[index];
  1808 + }
  1809 + path += "z";
  1810 + var polygone = this.g.path(path);
  1811 + polygone.attr("stroke-width", this.strokeWidth);
  1812 + polygone.attr("stroke", this.getPaint());
  1813 +
  1814 + this.setStroke(originalStroke);
  1815 +
  1816 + var set = this.g.setFinish();
  1817 + this.addHandlers(set, x, y, width, height, "gateway");
  1818 + },
  1819 +
  1820 + /*
  1821 + * drawMultiInstanceMarker
  1822 + * drawHighLight
  1823 + * highLightFlow
  1824 + */
  1825 +
  1826 + drawMultiInstanceMarker: function(sequential, x, y, width, height) {
  1827 + var rectangleWidth = MARKER_WIDTH;
  1828 + var rectangleHeight = MARKER_WIDTH;
  1829 +
  1830 + // anti smoothing
  1831 + if (this.strokeWidth%2 == 1)
  1832 + x += .5;//, y += .5;
  1833 +
  1834 + var lineX = x + (width - rectangleWidth) / 2;
  1835 + var lineY = y + height - rectangleHeight - 3;
  1836 +
  1837 + var originalStroke = this.getStroke();
  1838 + this.setStroke(MULTI_INSTANCE_STROKE);
  1839 +
  1840 + if (sequential) {
  1841 + var line = this.g.path(
  1842 + "M" + lineX + " " + lineY + "L" + (lineX + rectangleWidth) + " " + lineY +
  1843 + "M" + lineX + " " + (lineY + rectangleHeight / 2) + "L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight / 2) +
  1844 + "M" + lineX + " " + (lineY + rectangleHeight) + "L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight)
  1845 + ).attr({"stroke-width": this.strokeWidth});
  1846 + } else {
  1847 + var line = this.g.path(
  1848 + "M" + lineX + " " + lineY + "L" + lineX + " " + (lineY + rectangleHeight) +
  1849 + "M" + (lineX + rectangleWidth / 2) + " " + lineY + "L" + (lineX + rectangleWidth / 2) + " " + (lineY + rectangleHeight) +
  1850 + "M" + (lineX + rectangleWidth) + " " + lineY + "L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight)
  1851 + ).attr({"stroke-width": this.strokeWidth});
  1852 + }
  1853 +
  1854 + this.setStroke(originalStroke);
  1855 + },
  1856 +
  1857 + drawHighLight: function(x, y, width, height){
  1858 + var originalPaint = this.getPaint();
  1859 + var originalStroke = this.getStroke();
  1860 +
  1861 + this.setPaint(HIGHLIGHT_COLOR);
  1862 + this.setStroke(THICK_TASK_BORDER_STROKE);
  1863 +
  1864 + //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);
  1865 + 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);
  1866 + rect.attr("stroke-width", this.strokeWidth);
  1867 + rect.attr("stroke", this.getPaint());
  1868 +
  1869 + this.setPaint(originalPaint);
  1870 + this.setStroke(originalStroke);
  1871 + },
  1872 +
  1873 + highLightActivity: function(activityId){
  1874 + var shape = this.g.getById(activityId);
  1875 + if (!shape) {
  1876 + console.error("Activity " + activityId + " not found");
  1877 + return;
  1878 + }
  1879 +
  1880 + var contextObject = shape.data("contextObject");
  1881 + if (contextObject)
  1882 + console.log("--> highLightActivity: ["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
  1883 + else
  1884 + console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
  1885 +
  1886 + shape.attr("stroke-width", THICK_TASK_BORDER_STROKE);
  1887 + shape.attr("stroke", HIGHLIGHT_COLOR);
  1888 + },
  1889 +
  1890 + highLightFlow: function(flowId){
  1891 + var shapeFlow = this.g.getById(flowId);
  1892 + if (!shapeFlow) {
  1893 + console.error("Flow " + flowId + " not found");
  1894 + return;
  1895 + }
  1896 +
  1897 + var contextObject = shapeFlow.data("contextObject");
  1898 + if (contextObject)
  1899 + console.log("--> highLightFlow: ["+contextObject.id+"] " + contextObject.flow);
  1900 + //console.log("--> highLightFlow: ", flow.flow, flow.data("set"));
  1901 +
  1902 + var st = shapeFlow.data("set");
  1903 +
  1904 + st.attr("stroke-width", SEQUENCEFLOW_HIGHLIGHT_STROKE);
  1905 + st.attr("stroke", HIGHLIGHT_COLOR);
  1906 + var withArrowHead = shapeFlow.data("withArrowHead");
  1907 + if (withArrowHead)
  1908 + st[1].attr("fill", HIGHLIGHT_COLOR);
  1909 +
  1910 + st.forEach(function(el){
  1911 + //console.log("---->", el);
  1912 + //el.attr("")
  1913 + });
  1914 + },
  1915 +
  1916 +
  1917 + _drawClock: function(cx, cy, width, height){
  1918 +
  1919 + var circle = this.g.ellipse(cx, cy, 1, 1).attr({stroke:"none", fill: Color.get(232, 239, 241)});
  1920 + //var c = this.g.ellipse(cx, cy, width, height).attr({stroke:"none", fill: Color.red});
  1921 + //x = cx - width/2;
  1922 + //y = cy - height/2;
  1923 +
  1924 + var clock = this.g.path(
  1925 + /* 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" +
  1926 + /* 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" +
  1927 + /* 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" +
  1928 + /* 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" +
  1929 + /* 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" +
  1930 + /* 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" +
  1931 + /* 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" +
  1932 + /* 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" +
  1933 + /* 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" +
  1934 + /* 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" +
  1935 + /* 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" +
  1936 + /* 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" +
  1937 + /* 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" +
  1938 + /* 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" +
  1939 + "");
  1940 + clock.attr({fill: Color.black, stroke: "none"});
  1941 + //clock.transform("t " + (cx-29.75/2) + " " + (cy-29.75/2));
  1942 + //clock.transform("...s 0.85");
  1943 +
  1944 + //clock.transform("...s " + .85 + " " + .85);
  1945 + clock.transform("t " + (-2.374) + " " + (-2.374) );
  1946 + clock.transform("...t -" + (15.5-2.374) + " -" + (15.5-2.374) );
  1947 + clock.transform("...s " + 1*(width/35) + " " + 1*(height/35));
  1948 + clock.transform("...T " + cx + " " + cy);
  1949 + //clock.transform("t " + (cx-width/2) + " " + (cy-height/2));
  1950 +
  1951 + //console.log(".getBBox(): ", clock.getBBox());
  1952 + //console.log(".attr(): ", c.attrs);
  1953 + circle.attr("rx", clock.getBBox().width/2);
  1954 + circle.attr("ry", clock.getBBox().height/2);
  1955 +
  1956 + //return circle
  1957 + },
  1958 +
  1959 + _drawPentagon: function(cx, cy, width, height, filled){
  1960 + // draw GeneralPath (polygon)
  1961 + var n=5;
  1962 + var angle = 2*Math.PI/n;
  1963 + var waypoints = [];
  1964 +
  1965 + for ( var index = 0; index < n; index++ ) {
  1966 + var v = index*angle - Math.PI/2;
  1967 + var point = {};
  1968 + point.x = -width*1.2/2 + parseInt(Math.round(width*1.2/2)) + parseInt(Math.round((width*1.2/4)*Math.cos(v)));
  1969 + point.y = -height*1.2/2 + parseInt(Math.round(height*1.2/2)) + parseInt(Math.round((height*1.2/4)*Math.sin(v)));
  1970 + waypoints[index] = point;
  1971 + }
  1972 +
  1973 + var polygone = new Polygone(waypoints, this.getStroke());
  1974 + polygone.element = this.g.path(polygone.path);
  1975 + if (filled)
  1976 + polygone.element.attr("fill", Color.black);
  1977 + else
  1978 + polygone.element.attr("fill", Color.white);
  1979 +
  1980 + polygone.element.transform("s " + 1*(width/35) + " " + 1*(height/35));
  1981 + polygone.element.transform("...T " + cx + " " + cy);
  1982 + },
  1983 +
  1984 + //_drawMultilineText: function(text, x, y, boxWidth, boxHeight, textAnchor) {
  1985 + _drawMultilineText: function(text, x, y, boxWidth, boxHeight, verticalAlign, horizontalAlign) {
  1986 + if (!text || text == "")
  1987 + return;
  1988 +
  1989 + // Autostretch boxHeight if boxHeight is 0
  1990 + if (boxHeight == 0)
  1991 + verticalAlign = MULTILINE_VERTICAL_ALIGN_TOP;
  1992 +
  1993 + //var TEXT_PADDING = 3;
  1994 + var width = boxWidth;
  1995 + if (boxHeight)
  1996 + var height = boxHeight;
  1997 +
  1998 + var layouts = [];
  1999 +
  2000 + //var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
  2001 + var font = this.getFont();
  2002 + var measurer = new LineBreakMeasurer(this.g, x, y, text, font);
  2003 + var lineHeight = measurer.rafaelTextObject.getBBox().height;
  2004 + //console.log("text: ", text.replace(/\n/g, "?"));
  2005 +
  2006 + if (height) {
  2007 + var availableLinesCount = parseInt(height/lineHeight);
  2008 + //console.log("availableLinesCount: " + availableLinesCount);
  2009 + }
  2010 +
  2011 + var i = 1;
  2012 + while (measurer.getPosition() < measurer.text.getEndIndex()) {
  2013 + var layout = measurer.nextLayout(width);
  2014 + //console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
  2015 +
  2016 + if (layout != null) {
  2017 + // TODO: and check if measurer has next layout. If no then don't draw dots
  2018 + if (!availableLinesCount || i < availableLinesCount) {
  2019 + layouts.push(layout);
  2020 + } else {
  2021 + layouts.push(this.fitTextToWidth(layout + "...", boxWidth));
  2022 + break;
  2023 + }
  2024 + }
  2025 + i++;
  2026 + };
  2027 + //console.log(layouts);
  2028 +
  2029 + measurer.rafaelTextObject.attr({"text": layouts.join("\n")});
  2030 +
  2031 + if (horizontalAlign)
  2032 + measurer.rafaelTextObject.attr({"text-anchor": horizontalAlign}); // end, middle, start
  2033 +
  2034 + var bb = measurer.rafaelTextObject.getBBox();
  2035 + // TODO: there is somethin wrong with wertical align. May be: measurer.rafaelTextObject.attr({"y": y + height/2 - bb.height/2})
  2036 + measurer.rafaelTextObject.attr({"y": y + bb.height/2});
  2037 + //var bb = measurer.rafaelTextObject.getBBox();
  2038 +
  2039 + if (measurer.rafaelTextObject.attr("text-anchor") == MULTILINE_HORIZONTAL_ALIGN_MIDDLE )
  2040 + measurer.rafaelTextObject.attr("x", x + boxWidth/2);
  2041 + else if (measurer.rafaelTextObject.attr("text-anchor") == MULTILINE_HORIZONTAL_ALIGN_RIGHT )
  2042 + measurer.rafaelTextObject.attr("x", x + boxWidth);
  2043 +
  2044 + var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
  2045 + //var box = this.g.rect(x+.5, y + .5, width, height).attr(boxStyle);
  2046 + var textAreaCX = x + boxWidth/2;
  2047 + var height = boxHeight;
  2048 + if (!height) height = bb.height;
  2049 + var textAreaCY = y + height/2;
  2050 + var dotLeftTop = this.g.ellipse(x, y, 3, 3).attr({"stroke-width": 0, fill: Color.LightSteelBlue, stroke: "none"}).hide();
  2051 + var dotCenter = this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"}).hide();
  2052 +
  2053 + /*
  2054 + // real bbox
  2055 + var bb = measurer.rafaelTextObject.getBBox();
  2056 + var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
  2057 + */
  2058 + var rect = this.g.rect(x, y, boxWidth, height).attr({"stroke-width": 1}).attr(boxStyle).hide();
  2059 + var debugSet = this.g.set();
  2060 + debugSet.push(dotLeftTop, dotCenter, rect);
  2061 + //debugSet.show();
  2062 + },
  2063 +
  2064 + drawTextAnnotation: function(text, x, y, width, height){
  2065 + var lineLength = 18;
  2066 + var path = [];
  2067 + path.push(["M", x + lineLength, y]);
  2068 + path.push(["L", x, y]);
  2069 + path.push(["L", x, y + height]);
  2070 + path.push(["L", x + lineLength, y + height]);
  2071 +
  2072 + path.push(["L", x + lineLength, y + height -1]);
  2073 + path.push(["L", x + 1, y + height -1]);
  2074 + path.push(["L", x + 1, y + 1]);
  2075 + path.push(["L", x + lineLength, y + 1]);
  2076 + path.push(["z"]);
  2077 +
  2078 + var textAreaLines = this.g.path(path);
  2079 +
  2080 + var boxWidth = width - (2 * ANNOTATION_TEXT_PADDING);
  2081 + var boxHeight = height - (2 * ANNOTATION_TEXT_PADDING);
  2082 + var boxX = x + width/2 - boxWidth/2;
  2083 + var boxY = y + height/2 - boxHeight/2;
  2084 +
  2085 + // for debug
  2086 + var rectStyle = {stroke: Color(112, 146, 190), "stroke-width": 1.0, "stroke-dasharray": "- "};
  2087 + var r = this.g.rect(boxX, boxY, boxWidth, boxHeight).attr(rectStyle);
  2088 + //
  2089 +
  2090 + this.drawAnnotationText(text, boxX, boxY, boxWidth, boxHeight);
  2091 + },
  2092 +
  2093 + drawLabel111111111: function(text, x, y, width, height, labelAttrs){
  2094 + var debug = false;
  2095 +
  2096 + // text
  2097 + if (text != null && text != undefined && text != "") {
  2098 + var attr = LABEL_FONT;
  2099 +
  2100 + //console.log("x", x, "y", y, "width", width, "height", height );
  2101 +
  2102 + wrappedText = text;
  2103 + if (labelAttrs && labelAttrs.wrapWidth) {
  2104 + wrappedText = this.wrapTextToWidth(wrappedText, labelAttrs.wrapWidth);
  2105 + }
  2106 + var realWidth = this.getStringWidth(wrappedText, attr);
  2107 + var realHeight = this.getStringHeight(wrappedText, attr);
  2108 +
  2109 + var textAreaCX = x + width/2;
  2110 + var textAreaCY = y + 3 + height + this.getStringHeight(wrappedText, attr)/2;
  2111 +
  2112 + var textX = textAreaCX;
  2113 + var textY = textAreaCY;
  2114 +
  2115 + var textAttrs = {};
  2116 + if (labelAttrs && labelAttrs.align) {
  2117 + switch (labelAttrs.align) {
  2118 + case "left":
  2119 + textAttrs["text-anchor"] = "start";
  2120 + textX = textX - realWidth/2;
  2121 + break;
  2122 + case "center":
  2123 + textAttrs["text-anchor"] = "middle";
  2124 + break;
  2125 + case "right":
  2126 + textAttrs["text-anchor"] = "end";
  2127 + textX = textX + realWidth/2;
  2128 + break;
  2129 + }
  2130 + }
  2131 + if (labelAttrs && labelAttrs.wrapWidth) {
  2132 + if (true) {
  2133 + // Draw frameborder
  2134 + var textAreaStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
  2135 + var textAreaX = textAreaCX - realWidth/2;
  2136 + var textAreaY = textAreaCY+.5 - realHeight/2;
  2137 + var textArea = this.g.rect(textAreaX, textAreaY, realWidth, realHeight).attr(textAreaStyle);
  2138 +
  2139 + var textAreaLines = this.g.path("M" + textAreaX + " " + textAreaY + "L" + (textAreaX+realWidth) + " " + (textAreaY+realHeight) + "M" + + (textAreaX+realWidth) + " " + textAreaY + "L" + textAreaX + " " + (textAreaY+realHeight));
  2140 + textAreaLines.attr(textAreaStyle);
  2141 +
  2142 + this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"});
  2143 + }
  2144 + }
  2145 +
  2146 + var label = this.g.text(textX, textY, wrappedText).attr(attr).attr(textAttrs);
  2147 + //label.id = Raphael.createUUID();
  2148 + //console.log("label ", label.id, ", ", wrappedText);
  2149 +
  2150 + if (this.fontSmoothing) {
  2151 + label.attr({stroke: LABEL_COLOR, "stroke-width":.4});
  2152 + }
  2153 +
  2154 + // debug
  2155 + if (debug) {
  2156 + var imageAreaStyle = {stroke: Color.grey61, "stroke-width": 1.0, "stroke-dasharray": "- "};
  2157 + var imageArea = this.g.rect(x+.5, y+.5, width, height).attr(imageAreaStyle);
  2158 + var imageAreaLines = this.g.path("M" + x + " " + y + "L" + (x+width) + " " + (y+height) + "M" + + (x+width) + " " + y + "L" + x + " " + (y+height));
  2159 + imageAreaLines.attr(imageAreaStyle);
  2160 + var dotStyle = {fill: Color.Coral, stroke: "none"};
  2161 + this.g.ellipse(x, y, 3, 3).attr(dotStyle);
  2162 + this.g.ellipse(x+width, y, 2, 2).attr(dotStyle);
  2163 + this.g.ellipse(x+width, y+height, 2, 2).attr(dotStyle);
  2164 + this.g.ellipse(x, y+height, 2, 2).attr(dotStyle);
  2165 + }
  2166 +
  2167 + return label;
  2168 + }
  2169 + },
  2170 +
  2171 + vvoid: function(){}
  2172 +};
  1 + /**
  2 + * Class to generate an image based the diagram interchange information in a
  3 + * BPMN 2.0 process.
  4 + *
  5 + * @author (Javascript) Dmitry Farafonov
  6 + */
  7 +
  8 +var ProcessDiagramGenerator = {
  9 + options: {},
  10 +
  11 + processDiagramCanvas: [],
  12 +
  13 + activityDrawInstructions:{},
  14 +
  15 + processDiagrams: {},
  16 +
  17 + diagramBreadCrumbs: null,
  18 +
  19 + init: function(){
  20 + // start event
  21 + this.activityDrawInstructions["startEvent"] = function(){
  22 + var activityImpl = this.activity;
  23 + var processDiagramCanvas = this.processDiagramCanvas;
  24 + processDiagramCanvas.setConextObject(activityImpl);
  25 +
  26 + processDiagramCanvas.drawNoneStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  27 + };
  28 +
  29 + // start timer event
  30 + this.activityDrawInstructions["startTimerEvent"] = function(){
  31 + var activityImpl = this.activity;
  32 + var processDiagramCanvas = this.processDiagramCanvas;
  33 + processDiagramCanvas.setConextObject(activityImpl);
  34 +
  35 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  36 + processDiagramCanvas.drawTimerStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
  37 + };
  38 +
  39 + // start event
  40 + this.activityDrawInstructions["messageStartEvent"] = function(){
  41 + var activityImpl = this.activity;
  42 + var processDiagramCanvas = this.processDiagramCanvas;
  43 + processDiagramCanvas.setConextObject(activityImpl);
  44 +
  45 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  46 + processDiagramCanvas.drawMessageStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
  47 + };
  48 +
  49 + // start signal event
  50 + this.activityDrawInstructions["startSignalEvent"] = function(){
  51 + var activityImpl = this.activity;
  52 + var processDiagramCanvas = this.processDiagramCanvas;
  53 + processDiagramCanvas.setConextObject(activityImpl);
  54 +
  55 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  56 + processDiagramCanvas.drawSignalStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
  57 + };
  58 +
  59 + // start multiple event
  60 + this.activityDrawInstructions["startMultipleEvent"] = function(){
  61 + var activityImpl = this.activity;
  62 + var processDiagramCanvas = this.processDiagramCanvas;
  63 + processDiagramCanvas.setConextObject(activityImpl);
  64 +
  65 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  66 + processDiagramCanvas.drawMultipleStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
  67 + };
  68 +
  69 + // signal catch
  70 + this.activityDrawInstructions["intermediateSignalCatch"] = function(){
  71 + var activityImpl = this.activity;
  72 + var processDiagramCanvas = this.processDiagramCanvas;
  73 + processDiagramCanvas.setConextObject(activityImpl);
  74 +
  75 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  76 + processDiagramCanvas.drawCatchingSignalEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  77 +
  78 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  79 + if (label)
  80 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  81 + };
  82 +
  83 + // message catch
  84 + this.activityDrawInstructions["intermediateMessageCatch"] = function(){
  85 + var activityImpl = this.activity;
  86 + var processDiagramCanvas = this.processDiagramCanvas;
  87 + processDiagramCanvas.setConextObject(activityImpl);
  88 +
  89 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  90 + processDiagramCanvas.drawCatchingMessageEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  91 +
  92 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  93 + if (label)
  94 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  95 + };
  96 +
  97 + // multiple catch
  98 + this.activityDrawInstructions["intermediateMultipleCatch"] = function(){
  99 + var activityImpl = this.activity;
  100 + var processDiagramCanvas = this.processDiagramCanvas;
  101 + processDiagramCanvas.setConextObject(activityImpl);
  102 +
  103 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  104 + processDiagramCanvas.drawCatchingMultipleEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  105 +
  106 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  107 + if (label)
  108 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  109 + };
  110 +
  111 +
  112 +
  113 + // signal throw
  114 + this.activityDrawInstructions["intermediateSignalThrow"] = function(){
  115 + var activityImpl = this.activity;
  116 + var processDiagramCanvas = this.processDiagramCanvas;
  117 + processDiagramCanvas.setConextObject(activityImpl);
  118 +
  119 + processDiagramCanvas.drawThrowingSignalEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
  120 +
  121 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  122 + if (label)
  123 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  124 + };
  125 +
  126 + // message throw
  127 + this.activityDrawInstructions["intermediateMessageThrow"] = function(){
  128 + var activityImpl = this.activity;
  129 + var processDiagramCanvas = this.processDiagramCanvas;
  130 + processDiagramCanvas.setConextObject(activityImpl);
  131 +
  132 + processDiagramCanvas.drawThrowingMessageEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
  133 +
  134 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  135 + if (label)
  136 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  137 + };
  138 +
  139 + // multiple throw
  140 + this.activityDrawInstructions["intermediateMultipleThrow"] = function(){
  141 + var activityImpl = this.activity;
  142 + var processDiagramCanvas = this.processDiagramCanvas;
  143 + processDiagramCanvas.setConextObject(activityImpl);
  144 +
  145 + processDiagramCanvas.drawThrowingMultipleEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
  146 +
  147 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  148 + if (label)
  149 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  150 + };
  151 +
  152 + // none throw
  153 + this.activityDrawInstructions["intermediateThrowEvent"] = function() {
  154 + var activityImpl = this.activity;
  155 + var processDiagramCanvas = this.processDiagramCanvas;
  156 + processDiagramCanvas.setConextObject(activityImpl);
  157 +
  158 + processDiagramCanvas.drawThrowingNoneEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
  159 +
  160 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  161 + if (label)
  162 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  163 + };
  164 +
  165 + // end event
  166 + this.activityDrawInstructions["endEvent"] = function(){
  167 + var activityImpl = this.activity;
  168 + var processDiagramCanvas = this.processDiagramCanvas;
  169 + processDiagramCanvas.setConextObject(activityImpl);
  170 +
  171 + processDiagramCanvas.drawNoneEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  172 + };
  173 +
  174 + // error end event
  175 + this.activityDrawInstructions["errorEndEvent"] = function(){
  176 + var activityImpl = this.activity;
  177 + var processDiagramCanvas = this.processDiagramCanvas;
  178 + processDiagramCanvas.setConextObject(activityImpl);
  179 +
  180 + processDiagramCanvas.drawErrorEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
  181 +
  182 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  183 + if (label)
  184 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  185 + };
  186 +
  187 + // message end event
  188 + this.activityDrawInstructions["messageEndEvent"] = function(){
  189 + var activityImpl = this.activity;
  190 + var processDiagramCanvas = this.processDiagramCanvas;
  191 + processDiagramCanvas.setConextObject(activityImpl);
  192 +
  193 + processDiagramCanvas.drawMessageEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
  194 +
  195 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  196 + if (label)
  197 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  198 + };
  199 +
  200 + // signal end event
  201 + this.activityDrawInstructions["signalEndEvent"] = function(){
  202 + var activityImpl = this.activity;
  203 + var processDiagramCanvas = this.processDiagramCanvas;
  204 + processDiagramCanvas.setConextObject(activityImpl);
  205 +
  206 + processDiagramCanvas.drawSignalEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
  207 +
  208 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  209 + if (label)
  210 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  211 + };
  212 +
  213 + // multiple end event
  214 + this.activityDrawInstructions["multipleEndEvent"] = function(){
  215 + var activityImpl = this.activity;
  216 + var processDiagramCanvas = this.processDiagramCanvas;
  217 + processDiagramCanvas.setConextObject(activityImpl);
  218 +
  219 + processDiagramCanvas.drawMultipleEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
  220 +
  221 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  222 + if (label)
  223 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  224 + };
  225 +
  226 + // terminate end event
  227 + this.activityDrawInstructions["terminateEndEvent"] = function(){
  228 + var activityImpl = this.activity;
  229 + var processDiagramCanvas = this.processDiagramCanvas;
  230 + processDiagramCanvas.setConextObject(activityImpl);
  231 +
  232 + processDiagramCanvas.drawTerminateEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  233 +
  234 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  235 + if (label)
  236 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  237 + };
  238 +
  239 + // error start event
  240 + this.activityDrawInstructions["errorStartEvent"] = function(){
  241 + var activityImpl = this.activity;
  242 + var processDiagramCanvas = this.processDiagramCanvas;
  243 + processDiagramCanvas.setConextObject(activityImpl);
  244 +
  245 + processDiagramCanvas.drawErrorStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
  246 +
  247 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  248 + if (label)
  249 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  250 + };
  251 +
  252 + // task
  253 + this.activityDrawInstructions["task"] = function(){
  254 + var activityImpl = this.activity;
  255 + var processDiagramCanvas = this.processDiagramCanvas;
  256 + processDiagramCanvas.setConextObject(activityImpl);
  257 +
  258 + // TODO:
  259 + //console.error("task is not implemented yet");
  260 + /*
  261 + var activityImpl = this;
  262 + processDiagramCanvas.drawTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), thickBorder);
  263 + */
  264 + };
  265 +
  266 +
  267 + // user task
  268 + this.activityDrawInstructions["userTask"] = function(){
  269 + var activityImpl = this.activity;
  270 + var processDiagramCanvas = this.processDiagramCanvas;
  271 + processDiagramCanvas.setConextObject(activityImpl);
  272 +
  273 + processDiagramCanvas.drawUserTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  274 + };
  275 +
  276 + // script task
  277 + this.activityDrawInstructions["scriptTask"] = function(){
  278 + var activityImpl = this.activity;
  279 + var processDiagramCanvas = this.processDiagramCanvas;
  280 + processDiagramCanvas.setConextObject(activityImpl);
  281 +
  282 + processDiagramCanvas.drawScriptTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  283 + };
  284 +
  285 + // service task
  286 + this.activityDrawInstructions["serviceTask"] = function(){
  287 + var activityImpl = this.activity;
  288 + var processDiagramCanvas = this.processDiagramCanvas;
  289 + processDiagramCanvas.setConextObject(activityImpl);
  290 +
  291 + processDiagramCanvas.drawServiceTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  292 + };
  293 +
  294 + // receive task
  295 + this.activityDrawInstructions["receiveTask"] = function(){
  296 + var activityImpl = this.activity;
  297 + var processDiagramCanvas = this.processDiagramCanvas;
  298 + processDiagramCanvas.setConextObject(activityImpl);
  299 +
  300 + processDiagramCanvas.drawReceiveTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  301 + };
  302 +
  303 + // send task
  304 + this.activityDrawInstructions["sendTask"] = function(){
  305 + var activityImpl = this.activity;
  306 + var processDiagramCanvas = this.processDiagramCanvas;
  307 + processDiagramCanvas.setConextObject(activityImpl);
  308 +
  309 + processDiagramCanvas.drawSendTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  310 + };
  311 +
  312 + // manual task
  313 + this.activityDrawInstructions["manualTask"] = function(){
  314 + var activityImpl = this.activity;
  315 + var processDiagramCanvas = this.processDiagramCanvas;
  316 + processDiagramCanvas.setConextObject(activityImpl);
  317 +
  318 + processDiagramCanvas.drawManualTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  319 + };
  320 +
  321 + // businessRuleTask task
  322 + this.activityDrawInstructions["businessRuleTask"] = function(){
  323 + var activityImpl = this.activity;
  324 + var processDiagramCanvas = this.processDiagramCanvas;
  325 + processDiagramCanvas.setConextObject(activityImpl);
  326 +
  327 + processDiagramCanvas.drawBusinessRuleTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  328 + };
  329 +
  330 + // exclusive gateway
  331 + this.activityDrawInstructions["exclusiveGateway"] = function(){
  332 + var activityImpl = this.activity;
  333 + var processDiagramCanvas = this.processDiagramCanvas;
  334 + processDiagramCanvas.setConextObject(activityImpl);
  335 +
  336 + processDiagramCanvas.drawExclusiveGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  337 + };
  338 +
  339 + // inclusive gateway
  340 + this.activityDrawInstructions["inclusiveGateway"] = function(){
  341 + var activityImpl = this.activity;
  342 + var processDiagramCanvas = this.processDiagramCanvas;
  343 + processDiagramCanvas.setConextObject(activityImpl);
  344 +
  345 + processDiagramCanvas.drawInclusiveGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  346 + };
  347 +
  348 + // parallel gateway
  349 + this.activityDrawInstructions["parallelGateway"] = function(){
  350 + var activityImpl = this.activity;
  351 + var processDiagramCanvas = this.processDiagramCanvas;
  352 + processDiagramCanvas.setConextObject(activityImpl);
  353 +
  354 + processDiagramCanvas.drawParallelGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  355 + };
  356 +
  357 + // eventBasedGateway
  358 + this.activityDrawInstructions["eventBasedGateway"] = function(){
  359 + var activityImpl = this.activity;
  360 + var processDiagramCanvas = this.processDiagramCanvas;
  361 + processDiagramCanvas.setConextObject(activityImpl);
  362 +
  363 + processDiagramCanvas.drawEventBasedGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  364 + };
  365 +
  366 + // Boundary timer
  367 + this.activityDrawInstructions["boundaryTimer"] = function(){
  368 + var activityImpl = this.activity;
  369 + var processDiagramCanvas = this.processDiagramCanvas;
  370 + processDiagramCanvas.setConextObject(activityImpl);
  371 +
  372 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  373 + processDiagramCanvas.drawCatchingTimerEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  374 +
  375 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  376 + if (label)
  377 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  378 + };
  379 +
  380 + // Boundary catch error
  381 + this.activityDrawInstructions["boundaryError"] = function(){
  382 + var activityImpl = this.activity;
  383 + var processDiagramCanvas = this.processDiagramCanvas;
  384 + processDiagramCanvas.setConextObject(activityImpl);
  385 +
  386 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  387 + processDiagramCanvas.drawCatchingErrorEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  388 +
  389 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  390 + if (label)
  391 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  392 + };
  393 +
  394 + // Boundary signal event
  395 + this.activityDrawInstructions["boundarySignal"] = function(){
  396 + var activityImpl = this.activity;
  397 + var processDiagramCanvas = this.processDiagramCanvas;
  398 + processDiagramCanvas.setConextObject(activityImpl);
  399 +
  400 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  401 + processDiagramCanvas.drawCatchingSignalEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  402 +
  403 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  404 + if (label)
  405 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  406 + };
  407 +
  408 + // Boundary message event
  409 + this.activityDrawInstructions["boundaryMessage"] = function(){
  410 + var activityImpl = this.activity;
  411 + var processDiagramCanvas = this.processDiagramCanvas;
  412 + processDiagramCanvas.setConextObject(activityImpl);
  413 +
  414 + var isInterrupting = activityImpl.getProperty("isInterrupting");
  415 + processDiagramCanvas.drawCatchingMessageEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
  416 +
  417 + var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
  418 + if (label)
  419 + processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
  420 + };
  421 +
  422 + // timer catch event
  423 + this.activityDrawInstructions["intermediateTimer"] = function(){
  424 + var activityImpl = this.activity;
  425 + var processDiagramCanvas = this.processDiagramCanvas;
  426 + processDiagramCanvas.setConextObject(activityImpl);
  427 +
  428 + var isInterrupting = null;
  429 + processDiagramCanvas.drawCatchingTimerEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
  430 + };
  431 +
  432 + // subprocess
  433 + this.activityDrawInstructions["subProcess"] = function(){
  434 + var activityImpl = this.activity;
  435 + var processDiagramCanvas = this.processDiagramCanvas;
  436 + // TODO:
  437 +
  438 + processDiagramCanvas.setConextObject(activityImpl);
  439 +
  440 + var isExpanded = activityImpl.getProperty("isExpanded");
  441 + var isTriggeredByEvent = activityImpl.getProperty("triggeredByEvent");
  442 + if(isTriggeredByEvent == undefined) {
  443 + isTriggeredByEvent = true;
  444 + }
  445 + // TODO: check why isTriggeredByEvent = true when undefined
  446 + isTriggeredByEvent = false;
  447 +
  448 + if (isExpanded != undefined && isExpanded == false) {
  449 + processDiagramCanvas.drawCollapsedSubProcess(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(),
  450 + activityImpl.getWidth(), activityImpl.getHeight(), isTriggeredByEvent);
  451 + } else {
  452 + processDiagramCanvas.drawExpandedSubProcess(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(),
  453 + activityImpl.getWidth(), activityImpl.getHeight(), isTriggeredByEvent);
  454 + }
  455 +
  456 + //console.error("subProcess is not implemented yet");
  457 + };
  458 +
  459 + // call activity
  460 + this.activityDrawInstructions["callActivity"] = function(){
  461 + var activityImpl = this.activity;
  462 + var processDiagramCanvas = this.processDiagramCanvas;
  463 + processDiagramCanvas.setConextObject(activityImpl);
  464 + processDiagramCanvas.drawCollapsedCallActivity(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
  465 + };
  466 +
  467 + $(document).ready(function(){
  468 + // Protect right click on SVG elements (and on canvas too)
  469 + document.body.oncontextmenu = function(event) {
  470 + if (window.event.srcElement.tagName == "shape" || window.event.srcElement.tagName == "DIV" && window.event.srcElement.parentElement.className == "diagram") {
  471 +
  472 + // IE DIAGRAM CANVAS OR SHAPE DETECTED!
  473 + return false;
  474 + }
  475 + return (!Object.isSVGElement(window.event.srcElement));
  476 + };
  477 + });
  478 + },
  479 +
  480 + getActivitiLabel:function(activityImpl){
  481 + /*
  482 + TODO: Label object should be in activityImpl and looks like:
  483 + {
  484 + x: 250,
  485 + y: 250,
  486 + width: 80,
  487 + height: 30
  488 + }
  489 + And then:
  490 + if (!activityImpl.label)
  491 + return null;
  492 + var label = activityImpl.label;
  493 + label.text = activityImpl.name;
  494 + return label;
  495 + */
  496 +
  497 + // But now default label for all events is:
  498 + return {
  499 + text: activityImpl.getProperty("name"),
  500 + x: activityImpl.getX() + .5 + activityImpl.getWidth()/2,
  501 + y: activityImpl.getY() + .5 + activityImpl.getHeight() + ICON_PADDING,
  502 + width: 100,
  503 + height: 0
  504 + };
  505 + },
  506 +
  507 + generateDiagram: function(processDefinitionDiagramLayout){
  508 + // Init canvas
  509 + var processDefinitionId = processDefinitionDiagramLayout.processDefinition.id;
  510 + //console.log("Init canvas ", processDefinitionId);
  511 +
  512 + if (this.getProcessDiagram(processDefinitionId) != undefined) {
  513 + // TODO: may be reset canvas if exists.. Or just show
  514 + //console.log("ProcessDiagram '" + processDefinitionId + "' is already generated. Just show it.");
  515 + return;
  516 + }
  517 + var processDiagram = this.initProcessDiagramCanvas(processDefinitionDiagramLayout);
  518 + var processDiagramCanvas = processDiagram.diagramCanvas;
  519 +
  520 + // Draw pool shape, if process is participant in collaboration
  521 +
  522 + if(processDefinitionDiagramLayout.participantProcess != undefined) {
  523 + //console.log("Draw pool shape");
  524 + var pProc = processDefinitionDiagramLayout.participantProcess;
  525 + processDiagramCanvas.drawPoolOrLane(pProc.x, pProc.y, pProc.width, pProc.height, pProc.name);
  526 + }
  527 +
  528 + var laneSets = processDefinitionDiagramLayout.laneSets;
  529 + var activities = processDefinitionDiagramLayout.activities;
  530 + var sequenceFlows = processDefinitionDiagramLayout.sequenceFlows;
  531 +
  532 +
  533 + pb1.set('value', 0);
  534 + var cnt = 0;
  535 + if (laneSets)
  536 + for(var i in laneSets) {
  537 + cnt += laneSets[i].lanes.length;
  538 + }
  539 + if (activities)
  540 + cnt += activities.length;
  541 + if (sequenceFlows)
  542 + cnt += sequenceFlows.length;
  543 + var step = (cnt>0)? 100/cnt : 0;
  544 + var progress = 0;
  545 + //console.log("progress bar step: ", step);
  546 +
  547 + var task1 = new $.AsyncQueue();
  548 +
  549 + // Draw lanes
  550 +
  551 + task1.add(function (task1) {
  552 + if (!laneSets) laneSets = [];
  553 + //console.log("> draw lane sets, count:", laneSets.length)
  554 + });
  555 +
  556 + for(var i in laneSets) {
  557 + var laneSet = laneSets[i];
  558 + //laneSet.id, laneSet.name
  559 +
  560 + task1.add(laneSet.lanes,function (task1, lane) {
  561 + progress += step;
  562 + pb1.set('value', parseInt(progress));
  563 +
  564 + //console.log("--> laneId: " + lane.name + ", name: " + lane.name);
  565 +
  566 + processDiagramCanvas.drawPoolOrLane(lane.x, lane.y, lane.width, lane.height, lane.name);
  567 + });
  568 + }
  569 +
  570 + // Draw activities
  571 +
  572 + task1.add(function (task1) {
  573 + if (!activities) activities = [];
  574 + //console.log("> draw activities, count:", activities.length)
  575 + });
  576 +
  577 + var activitiesLength = activities.length;
  578 + task1.add(activities,function (task1, activityJson) {
  579 + var activity = new ActivityImpl(activityJson);
  580 + activitiesLength --;
  581 + progress += step;
  582 + pb1.set('value', parseInt(progress));
  583 + //console.log(activitiesLength, "--> activityId: " + activity.getId() + ", name: " + activity.getProperty("name"));
  584 + ProcessDiagramGenerator.drawActivity(processDiagramCanvas, activity);
  585 + });
  586 +
  587 + // Draw sequence-flows
  588 +
  589 + task1.add(function (task1) {
  590 + if (!sequenceFlows) sequenceFlows = [];
  591 + //console.log("> draw sequence flows, count:", sequenceFlows.length)
  592 + });
  593 +
  594 + var flowsLength = sequenceFlows.length;
  595 + task1.add(sequenceFlows,function (task1, flow) {
  596 + var waypoints = [];
  597 + for(var j in flow.xPointArray) {
  598 + waypoints[j] = {x: flow.xPointArray[j], y: flow.yPointArray[j]};
  599 + }
  600 + var isDefault = flow.isDefault;
  601 + var isConditional = flow.isConditional;
  602 + var isHighLighted = flow.isHighLighted;
  603 +
  604 + // TODO: add source and destination for sequence flows in REST
  605 + // parse for test
  606 + var f = flow.flow;
  607 + var matches = f.match(/\((.*)\)--.*-->\((.*)\)/);
  608 + var sourceActivityId, destinationActivityId;
  609 + if (matches != null) {
  610 + sourceActivityId = matches[1];
  611 + destinationActivityId = matches[2];
  612 + }
  613 + flow.sourceActivityId = sourceActivityId;
  614 + flow.destinationActivityId = destinationActivityId;
  615 + //
  616 + flowsLength--;
  617 + progress += step;
  618 + pb1.set('value', parseInt(progress));
  619 +
  620 + //console.log(flowsLength, "--> flow: " + flow.flow);
  621 +
  622 + processDiagramCanvas.setConextObject(flow);
  623 + processDiagramCanvas.drawSequenceflow(waypoints, isConditional, isDefault, isHighLighted);
  624 + });
  625 +
  626 + task1.onComplete(function(){
  627 + if (progress<100)
  628 + pb1.set('value', 100);
  629 + //console.log("COMPLETE!!!");
  630 +
  631 + //console.timeEnd('generateDiagram');
  632 + });
  633 +
  634 + task1.run();
  635 + },
  636 +
  637 + getProcessDiagram: function (processDefinitionId) {
  638 + return this.processDiagrams[processDefinitionId];
  639 + },
  640 +
  641 + initProcessDiagramCanvas: function (processDefinitionDiagramLayout) {
  642 + var minX = 0;
  643 + var maxX = 0;
  644 + var minY = 0;
  645 + var maxY = 0;
  646 +
  647 + if(processDefinitionDiagramLayout.participantProcess != undefined) {
  648 + var pProc = processDefinitionDiagramLayout.participantProcess;
  649 +
  650 + minX = pProc.x;
  651 + maxX = pProc.x + pProc.width;
  652 + minY = pProc.y;
  653 + maxY = pProc.y + pProc.height;
  654 + }
  655 +
  656 + var activities = processDefinitionDiagramLayout.activities;
  657 + for(var i in activities) {
  658 + var activityJson = activities[i];
  659 + var activity = new ActivityImpl(activityJson);
  660 +
  661 + // width
  662 + if (activity.getX() + activity.getWidth() > maxX) {
  663 + maxX = activity.getX() + activity.getWidth();
  664 + }
  665 + if (activity.getX() < minX) {
  666 + minX = activity.getX();
  667 + }
  668 + // height
  669 + if (activity.getY() + activity.getHeight() > maxY) {
  670 + maxY = activity.getY() + activity.getHeight();
  671 + }
  672 + if (activity.getY() < minY) {
  673 + minY = activity.getY();
  674 + }
  675 + }
  676 +
  677 + var sequenceFlows = processDefinitionDiagramLayout.sequenceFlows;
  678 + for(var i in sequenceFlows) {
  679 + var flow = sequenceFlows[i];
  680 + var waypoints = [];
  681 + for(var j in flow.xPointArray) {
  682 + waypoints[j] = {x: flow.xPointArray[j], y: flow.yPointArray[j]};
  683 +
  684 + // width
  685 + if (waypoints[j].x > maxX) {
  686 + maxX = waypoints[j].x;
  687 + }
  688 + if (waypoints[j].x < minX) {
  689 + minX = waypoints[j].x;
  690 + }
  691 + // height
  692 + if (waypoints[j].y > maxY) {
  693 + maxY = waypoints[j].y;
  694 + }
  695 + if (waypoints[j].y < minY) {
  696 + minY = waypoints[j].y;
  697 + }
  698 + }
  699 + }
  700 +
  701 + var laneSets = processDefinitionDiagramLayout.laneSets;
  702 + for(var i in laneSets) {
  703 + var laneSet = laneSets[i];
  704 + //laneSet.id, laneSet.name
  705 +
  706 + for(var j in laneSet.lanes) {
  707 + var lane = laneSet.lanes[j];
  708 + // width
  709 + if (lane.x + lane.width > maxX) {
  710 + maxX = lane.x + lane.width;
  711 + }
  712 + if (lane.x < minX) {
  713 + minX = lane.x;
  714 + }
  715 + // height
  716 + if (lane.y + lane.height > maxY) {
  717 + maxY = lane.y + lane.height;
  718 + }
  719 + if (lane.y < minY) {
  720 + minY = lane.y;
  721 + }
  722 + }
  723 + }
  724 +
  725 + var diagramCanvas = new ProcessDiagramCanvas();
  726 + if (diagramCanvas) {
  727 +
  728 + // create div in diagramHolder
  729 + var diagramHolder = document.getElementById(this.options.diagramHolderId);
  730 + if (!diagramHolder)
  731 + throw {msg: "Diagram holder not found", error: "diagramHolderNotFound"};
  732 + var div = document.createElement("DIV");
  733 + div.id = processDefinitionDiagramLayout.processDefinition.id;
  734 + div.className = "diagram";
  735 + diagramHolder.appendChild(div);
  736 +
  737 + diagramCanvas.init(maxX + 20, maxY + 20, processDefinitionDiagramLayout.processDefinition.id);
  738 + this.processDiagrams[processDefinitionDiagramLayout.processDefinition.id] = {
  739 + processDefinitionDiagramLayout: processDefinitionDiagramLayout,
  740 + diagramCanvas: diagramCanvas
  741 + };
  742 + }
  743 + return this.getProcessDiagram(processDefinitionDiagramLayout.processDefinition.id);
  744 + //return new DefaultProcessDiagramCanvas(maxX + 10, maxY + 10, minX, minY);
  745 + },
  746 +
  747 + drawActivity: function(processDiagramCanvas, activity, highLightedActivities) {
  748 + var type = activity.getProperty("type");
  749 + var drawInstruction = this.activityDrawInstructions[type];
  750 + if (drawInstruction != null) {
  751 + drawInstruction.apply({processDiagramCanvas:processDiagramCanvas, activity:activity});
  752 + } else {
  753 + //console.error("no drawInstruction for " + type + ": ", activity);
  754 + }
  755 +
  756 + // Actually draw the markers
  757 + if (activity.getProperty("multiInstance") != undefined || activity.getProperty("collapsed") != undefined) {
  758 + //console.log(activity.getProperty("name"), activity.properties);
  759 + var multiInstanceSequential = (activity.getProperty("multiInstance") == "sequential");
  760 + var multiInstanceParallel = (activity.getProperty("multiInstance") == "parrallel");
  761 + var collapsed = activity.getProperty("collapsed");
  762 + processDiagramCanvas.drawActivityMarkers(activity.getX(), activity.getY(), activity.getWidth(), activity.getHeight(),
  763 + multiInstanceSequential, multiInstanceParallel, collapsed);
  764 + }
  765 + /*
  766 + processDiagramCanvas.drawActivityMarkers(activity.getX(), activity.getY(), activity.getWidth(), activity.getHeight(), multiInstanceSequential,
  767 + multiInstanceParallel, collapsed);
  768 + */
  769 +
  770 + // TODO: Draw highlighted activities if they are present
  771 +
  772 + },
  773 +
  774 + setHighLights: function(highLights){
  775 + if (highLights.processDefinitionId == undefined) {
  776 + //console.error("Process instance " + highLights.processInstanceId + " doesn't exist");
  777 + return;
  778 + }
  779 +
  780 + var processDiagram = this.getProcessDiagram(highLights.processDefinitionId);
  781 + if (processDiagram == undefined) {
  782 + //console.error("Process diagram " + highLights.processDefinitionId + " not found");
  783 + return;
  784 + }
  785 +
  786 + var processDiagramCanvas = processDiagram.diagramCanvas;
  787 +
  788 + // TODO: remove highLightes from all activities before set new highLight
  789 + for (var i in highLights.activities) {
  790 + var activityId = highLights.activities[i];
  791 + processDiagramCanvas.highLightActivity(activityId);
  792 + }
  793 +
  794 + // TODO: remove highLightes from all flows before set new highLight
  795 + for (var i in highLights.flows) {
  796 + var flowId = highLights.flows[i];
  797 + var object = processDiagramCanvas.g.getById(flowId);
  798 + var flow = object.data("contextObject");
  799 + flow.isHighLighted = true;
  800 + processDiagramCanvas.highLightFlow(flowId);
  801 + }
  802 + },
  803 +
  804 + drawHighLights: function(processInstanceId) {
  805 + // Load highLights for the processInstanceId
  806 + /*
  807 + var url = Lang.sub(this.options.processInstanceHighLightsUrl, {processInstanceId: processInstanceId});
  808 + $.ajax({
  809 + url: url,
  810 + type: 'GET',
  811 + dataType: 'json',
  812 + cache: false,
  813 + async: true,
  814 + }).done(function(data) {
  815 + var highLights = data;
  816 + if (!highLights) {
  817 + console.log("highLights not found");
  818 + return;
  819 + }
  820 +
  821 + console.log("highLights[" + highLights.processDefinitionId + "][" + processInstanceId + "]: ", highLights);
  822 +
  823 + ProcessDiagramGenerator.setHighLights(highLights);
  824 + }).fail(function(jqXHR, textStatus){
  825 + console.log('Get HighLights['+processDefinitionId+'] failure: ', textStatus, jqXHR);
  826 + });
  827 + */
  828 + // 解决无流程实例的时候抛出异常问题。
  829 + var url = Lang.sub(ActivitiRest.options.processInstanceUrl, {processInstanceId: processInstanceId});
  830 + var _drawHighLights = this._drawHighLights;
  831 + $.ajax({
  832 + url: url,
  833 + type: 'GET',
  834 + dataType: 'json',
  835 + cache: false,
  836 + async: true,
  837 + }).done(function(data) {
  838 + ActivitiRest.getHighLights(processInstanceId, _drawHighLights);
  839 + }).fail(function(jqXHR, textStatus){
  840 + console.log('Get HighLights['+processInstanceId+'] failure: ', textStatus, jqXHR);
  841 + });
  842 + //ActivitiRest.getHighLights(processInstanceId, this._drawHighLights);
  843 + },
  844 + _drawHighLights: function() {
  845 + var highLights = this.highLights;
  846 + ProcessDiagramGenerator.setHighLights(highLights);
  847 + },
  848 +
  849 + // Load processDefinition
  850 +
  851 + drawDiagram: function(processDefinitionId) {
  852 + // Hide all diagrams
  853 + var diagrams = $("#" + this.options.diagramHolderId + " div.diagram");
  854 + diagrams.addClass("hidden");
  855 +
  856 +
  857 + // If processDefinitionId doesn't contain ":" then it's a "processDefinitionKey", not an id.
  858 + // Get process definition by key
  859 + if (processDefinitionId.indexOf(":") < 0) {
  860 + ActivitiRest.getProcessDefinitionByKey(processDefinitionId, this._drawDiagram);
  861 + } else {
  862 + this._drawDiagram.apply({processDefinitionId: processDefinitionId});
  863 + }
  864 + },
  865 + _drawDiagram: function() {
  866 + var processDefinitionId = this.processDefinitionId;
  867 +
  868 + ProcessDiagramGenerator.addBreadCrumbsItem(processDefinitionId);
  869 +
  870 +
  871 + // Check if processDefinition is already loaded and rendered
  872 +
  873 +
  874 + var processDiagram = ProcessDiagramGenerator.getProcessDiagram(processDefinitionId);
  875 +
  876 + if (processDiagram != undefined && processDiagram != null) {
  877 + //console.log("Process diagram " + processDefinitionId + " is already loaded");
  878 + //return;
  879 +
  880 + var diagram = document.getElementById(processDefinitionId);
  881 + $(diagram).removeClass("hidden");
  882 +
  883 + // Regenerate image
  884 + var processDefinitionDiagramLayout = processDiagram.processDefinitionDiagramLayout;
  885 + ProcessDiagramGenerator.generateDiagram(processDefinitionDiagramLayout);
  886 +
  887 + return;
  888 + }
  889 +
  890 + //console.time('loadDiagram');
  891 +
  892 + // Load processDefinition
  893 +
  894 + ActivitiRest.getProcessDefinition(processDefinitionId, ProcessDiagramGenerator._generateDiagram);
  895 +
  896 + },
  897 + _generateDiagram: function() {
  898 + var processDefinitionDiagramLayout = this.processDefinitionDiagramLayout;
  899 +
  900 + //console.log("process-definition-diagram-layout["+processDefinitionDiagramLayout.processDefinition.id+"]: ", processDefinitionDiagramLayout);
  901 +
  902 + //console.timeEnd('loadDiagram');
  903 + //console.time('generateDiagram');
  904 +
  905 + pb1.set('value', 0);
  906 + ProcessDiagramGenerator.generateDiagram(processDefinitionDiagramLayout);
  907 + },
  908 +
  909 + getProcessDefinitionByKey: function(processDefinitionKey) {
  910 + var url = Lang.sub(this.options.processDefinitionByKeyUrl, {processDefinitionKey: processDefinitionKey});
  911 +
  912 + var processDefinition;
  913 + $.ajax({
  914 + url: url,
  915 + type: 'POST',
  916 + dataType: 'json',
  917 + cache: false,
  918 + async: false
  919 + }).done(function(data) {
  920 + //console.log("ajax returned data");
  921 + //console.log("ajax returned data:", data);
  922 + processDefinition = data;
  923 + if (!processDefinition) {
  924 + //console.error("Process definition '" + processDefinitionKey + "' not found");
  925 + }
  926 + }).fail(function(jqXHR, textStatus){
  927 + //console.error('Get diagram layout['+processDefinitionKey+'] failure: ', textStatus, jqXHR);
  928 + });
  929 +
  930 + if (processDefinition) {
  931 + //console.log("Get process definition by key '" + processDefinitionKey + "': ", processDefinition.id);
  932 + return processDefinition;
  933 + } else {
  934 + return null;
  935 + }
  936 + },
  937 +
  938 + addBreadCrumbsItem: function(processDefinitionId){
  939 + var TPL_UL_CONTAINER = '<ul></ul>',
  940 + TPL_LI_CONTAINER = '<li id="{id}", processDefinitionId="{processDefinitionId}"><span>{name}</span></li>';
  941 +
  942 + if (!this.diagramBreadCrumbs)
  943 + this.diagramBreadCrumbs = $("#" + this.options.diagramBreadCrumbsId);
  944 + if (!this.diagramBreadCrumbs) return;
  945 +
  946 +
  947 + var ul = this.diagramBreadCrumbs.find("ul");
  948 + //console.log("ul: ", ul);
  949 + if (ul.size() == 0) {
  950 + ul = $(TPL_UL_CONTAINER);
  951 + this.diagramBreadCrumbs.append(ul);
  952 +
  953 + }
  954 + var liListOld = ul.find("li");
  955 + //console.warn("liListOld", liListOld);
  956 +
  957 + // TODO: if there is any items after current then remove that before adding new item (m.b. it is a duplicate)
  958 + var currentBreadCrumbsItemId = this.currentBreadCrumbsItemId;
  959 + found = false;
  960 + liListOld.each(
  961 + function(index, item) {
  962 + //console.warn("item:", $(this));
  963 + if (!found && currentBreadCrumbsItemId == $(this).attr("id")) {
  964 + found = true;
  965 + return;
  966 + }
  967 + if (found) {
  968 + //console.warn("remove ", $(this).attr("id"));
  969 + $(this).remove();
  970 + }
  971 + }
  972 + );
  973 +
  974 + var liListNew = ul.find("li");
  975 +
  976 + //console.log("liListNew size: ", liListNew.size());
  977 + var values = {
  978 + id: 'breadCrumbsItem_' + liListNew.size(),
  979 + processDefinitionId: processDefinitionId,
  980 + name: processDefinitionId
  981 + };
  982 +
  983 +
  984 + var tpl = Lang.sub(TPL_LI_CONTAINER, values);
  985 + //console.log("tpl: ", tpl);
  986 + ul.append(tpl);
  987 +
  988 + var li = ul.find("#" + values.id);
  989 + //console.warn("li:", li);
  990 + $('#' + values.id).on('click', this._breadCrumbsItemClick);
  991 +
  992 + ul.find("li").removeClass("selected");
  993 + li.attr("num", liListNew.size());
  994 + li.addClass("selected");
  995 + this.currentBreadCrumbsItemId = li.attr("id");
  996 + },
  997 + _breadCrumbsItemClick: function(){
  998 + var li = $(this),
  999 + id = li.attr("id"),
  1000 + processDefinitionId = li.attr("processDefinitionId");
  1001 + //console.warn("_breadCrumbsItemClick: ", id, ", processDefinitionId: ", processDefinitionId);
  1002 +
  1003 + var ul = ProcessDiagramGenerator.diagramBreadCrumbs.one("ul");
  1004 + ul.find("li").removeClass("selected");
  1005 + li.addClass("selected");
  1006 + ProcessDiagramGenerator.currentBreadCrumbsItemId = li.attr("id");
  1007 +
  1008 + // Hide all diagrams
  1009 + var diagrams = $("#"+ProcessDiagramGenerator.options.diagramHolderId+" div.diagram");
  1010 + diagrams.addClass("hidden");
  1011 +
  1012 + var processDiagram = ProcessDiagramGenerator.getProcessDiagram(processDefinitionId);
  1013 +
  1014 + var diagram = document.getElementById(processDefinitionId);
  1015 + if (!diagram) return;
  1016 + $(diagram).removeClass("hidden");
  1017 +
  1018 + // Regenerate image
  1019 + var processDefinitionDiagramLayout = processDiagram.processDefinitionDiagramLayout;
  1020 + ProcessDiagramGenerator.generateDiagram(processDefinitionDiagramLayout);
  1021 + },
  1022 +
  1023 + showFlowInfo: function(flow){
  1024 + var diagramInfo = $("#" + this.options.diagramInfoId);
  1025 + if (!diagramInfo) return;
  1026 +
  1027 + var values = {
  1028 + flow: flow.flow,
  1029 + isDefault: (flow.isDefault)? "true":"",
  1030 + isConditional: (flow.isConditional)? "true":"",
  1031 + isHighLighted: (flow.isHighLighted)? "true":"",
  1032 + sourceActivityId: flow.sourceActivityId,
  1033 + destinationActivityId: flow.destinationActivityId
  1034 + };
  1035 + var TPL_FLOW_INFO = '<div>{flow}</div>'
  1036 + + '<div><b>sourceActivityId</b>: {sourceActivityId}</div>'
  1037 + + '<div><b>destinationActivityId</b>: {destinationActivityId}</div>'
  1038 + + '<div><b>isDefault</b>: {isDefault}</div>'
  1039 + + '<div><b>isConditional</b>: {isConditional}</div>'
  1040 + + '<div><b>isHighLighted</b>: {isHighLighted}</div>';
  1041 + var tpl = Lang.sub(TPL_FLOW_INFO, values);
  1042 + //console.log("info: ", tpl);
  1043 + diagramInfo.html(tpl);
  1044 + },
  1045 +
  1046 + showActivityInfo: function(activity){
  1047 + var diagramInfo = $("#" + this.options.diagramInfoId);
  1048 + if (!diagramInfo) return;
  1049 +
  1050 + var values = {
  1051 + activityId: activity.getId(),
  1052 + name: activity.getProperty("name"),
  1053 + type: activity.getProperty("type")
  1054 + };
  1055 + var TPL_ACTIVITY_INFO = ''
  1056 + + '<div><b>activityId</b>: {activityId}</div>'
  1057 + + '<div><b>name</b>: {name}</div>'
  1058 + + '<div><b>type</b>: {type}</div>';
  1059 + var TPL_CALLACTIVITY_INFO = ''
  1060 + + '<div><b>collapsed</b>: {collapsed}</div>'
  1061 + + '<div><b>processDefinitonKey</b>: {processDefinitonKey}</div>';
  1062 +
  1063 + var template = TPL_ACTIVITY_INFO;
  1064 + if (activity.getProperty("type") == "callActivity") {
  1065 + values.collapsed = activity.getProperty("collapsed");
  1066 + values.processDefinitonKey = activity.getProperty("processDefinitonKey");
  1067 + template += TPL_CALLACTIVITY_INFO;
  1068 + } else if (activity.getProperty("type") == "callActivity") {
  1069 +
  1070 + }
  1071 +
  1072 + var tpl = Lang.sub(template, values);
  1073 + //console.log("info: ", tpl);
  1074 + diagramInfo.html(tpl);
  1075 + },
  1076 +
  1077 + hideInfo: function(){
  1078 + var diagramInfo = $("#" + this.options.diagramInfoId);
  1079 + if (!diagramInfo) return;
  1080 + diagramInfo.html("");
  1081 + },
  1082 +
  1083 + vvoid: function(){}
  1084 +};
  1085 +
  1086 +var Lang = {
  1087 + SUBREGEX: /\{\s*([^\|\}]+?)\s*(?:\|([^\}]*))?\s*\}/g,
  1088 + UNDEFINED: 'undefined',
  1089 + isUndefined: function(o) {
  1090 + return typeof o === Lang.UNDEFINED;
  1091 + },
  1092 + sub: function(s, o) {
  1093 + return ((s.replace) ? s.replace(Lang.SUBREGEX, function(match, key) {
  1094 + return (!Lang.isUndefined(o[key])) ? o[key] : match;
  1095 + }) : s);
  1096 + }
  1097 +};
  1098 +
  1099 +if (Lang.isUndefined(console)) {
  1100 + console = { log: function() {}, warn: function() {}, error: function() {}};
  1101 +}
  1102 +ProcessDiagramGenerator.init();
  1 +/*
  2 +* This file is part of the jquery plugin "asyncQueue".
  3 +*
  4 +* (c) Sebastien Roch <roch.sebastien@gmail.com>
  5 +* @author (parallel) Dmitry Farafonov
  6 +*
  7 +* For the full copyright and license information, please view the LICENSE
  8 +* file that was distributed with this source code.
  9 +*/
  10 +(function($){
  11 + $.AsyncQueue = function() {
  12 + var that = this,
  13 + queue = [],
  14 + completeFunc,
  15 + failureFunc,
  16 + paused = false,
  17 + lastCallbackData,
  18 + _run,
  19 + _complete,
  20 + inQueue = 0,
  21 + defaultTimeOut = 10;
  22 +
  23 + _run = function() {
  24 + var f = queue.shift();
  25 +
  26 + if (f) {
  27 + inQueue++;
  28 + setTimeout(function(){
  29 + f.fn.apply(that, [that]);
  30 +
  31 + if (!f.isParallel)
  32 + if (paused === false) {
  33 + _run();
  34 + }
  35 + inQueue --;
  36 + if (inQueue == 0 && queue.length == 0)
  37 + _complete();
  38 + }, f.timeOut);
  39 +
  40 + if (f.isParallel)
  41 + if (paused === false) {
  42 + _run();
  43 + }
  44 + }
  45 + };
  46 +
  47 + _complete = function(){
  48 + if (completeFunc)
  49 + completeFunc.apply(that, [that]);
  50 + };
  51 +
  52 + this.onComplete = function(func) {
  53 + completeFunc = func;
  54 + };
  55 +
  56 + this.onFailure = function(func) {
  57 + failureFunc = func;
  58 + };
  59 +
  60 + this.add = function(func) {
  61 + // TODO: add callback for queue[i] complete
  62 +
  63 + var obj = arguments[0];
  64 + if (obj && Object.prototype.toString.call(obj) === "[object Array]") {
  65 + var fn = arguments[1];
  66 + var timeOut = (typeof(arguments[2]) != "undefined")? arguments[2] : defaultTimeOut;
  67 + if (typeof(fn) == "function") {
  68 + for(var i = 0; i < obj.length; i++) {
  69 + var f = function(objx){
  70 + queue.push({isParallel: true, fn: function(){fn.apply(that, [that, objx]);}, timeOut: timeOut});
  71 + }(obj[i])
  72 + }
  73 + }
  74 + } else {
  75 + var fn = arguments[0];
  76 + var timeOut = (typeof(arguments[1]) != "undefined")? arguments[2] : defaultTimeOut;
  77 + queue.push({isParallel: false, fn: func, timeOut: timeOut});
  78 + }
  79 + return this;
  80 + };
  81 +
  82 + this.addParallel = function(func, timeOut) {
  83 + // TODO: add callback for queue[i] complete
  84 +
  85 + queue.push({isParallel: true, fn: func, timeOut: timeOut});
  86 + return this;
  87 + };
  88 +
  89 + this.storeData = function(dataObject) {
  90 + lastCallbackData = dataObject;
  91 + return this;
  92 + };
  93 +
  94 + this.lastCallbackData = function () {
  95 + return lastCallbackData;
  96 + };
  97 +
  98 + this.run = function() {
  99 + paused = false;
  100 + _run();
  101 + };
  102 +
  103 + this.pause = function () {
  104 + paused = true;
  105 + return this;
  106 + };
  107 +
  108 + this.failure = function() {
  109 + paused = true;
  110 + if (failureFunc) {
  111 + var args = [that];
  112 + for(i = 0; i < arguments.length; i++) {
  113 + args.push(arguments[i]);
  114 + }
  115 + failureFunc.apply(that, args);
  116 + }
  117 + };
  118 +
  119 + this.size = function(){
  120 + return queue.length;
  121 + };
  122 +
  123 + return this;
  124 + }
  125 +})(jQuery);