zhangFan / station · 提交

转到一个项目

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

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

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
<script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div class="wrapper">
<div id="pb1"></div>
<div id="overlayBox" >
<div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
<div id="diagramHolder" class="diagramHolder"></div>
<div class="diagram-info" id="diagramInfo"></div>
</div>
</div>
<script language='javascript'>
var DiagramGenerator = {};
var pb1;
$(document).ready(function(){
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
query_string[pair[0]] = pair[1];
}
var processDefinitionId = query_string["processDefinitionId"];
var processInstanceId = query_string["processInstanceId"];
console.log("Initialize progress bar");
pb1 = new $.ProgressBar({
boundingBox: '#pb1',
label: 'Progressbar!',
on: {
complete: function() {
console.log("Progress Bar COMPLETE");
this.set('label', 'complete!');
if (processInstanceId) {
ProcessDiagramGenerator.drawHighLights(processInstanceId);
}
},
valueChange: function(e) {
this.set('label', e.newVal + '%');
}
},
value: 0
});
console.log("Progress bar inited");
ProcessDiagramGenerator.options = {
diagramBreadCrumbsId: "diagramBreadCrumbs",
diagramHolderId: "diagramHolder",
diagramInfoId: "diagramInfo",
on: {
click: function(canvas, element, contextObject){
var mouseEvent = this;
console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
if (contextObject.getProperty("type") == "callActivity") {
var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
var processDefinitons = contextObject.getProperty("processDefinitons");
var processDefiniton = processDefinitons[0];
console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);
// Load processDefinition
ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
}
},
rightClick: function(canvas, element, contextObject){
var mouseEvent = this;
console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
},
over: function(canvas, element, contextObject){
var mouseEvent = this;
//console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
// TODO: show tooltip-window with contextObject info
ProcessDiagramGenerator.showActivityInfo(contextObject);
},
out: function(canvas, element, contextObject){
var mouseEvent = this;
//console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
ProcessDiagramGenerator.hideInfo();
}
}
};
var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
var shortenedUrl = window.document.location.href.replace(baseUrl, "");
baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));
ActivitiRest.options = {
processInstanceHighLightsUrl: baseUrl + "/act/service/process-instance/{processInstanceId}/highlights?callback=?",
processDefinitionUrl: baseUrl + "/act/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
processDefinitionByKeyUrl: baseUrl + "/act/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?",
processInstanceUrl: baseUrl + "/act/service/process-instance/{processInstanceId}/diagram-layout?callback=?"
};
if (processDefinitionId) {
ProcessDiagramGenerator.drawDiagram(processDefinitionId);
} else {
alert("processDefinitionId parameter is required");
}
});
</script>
</body>
</html>
... ...
var ActivitiRest = {
options: {},
getProcessDefinitionByKey: function(processDefinitionKey, callback) {
var url = Lang.sub(this.options.processDefinitionByKeyUrl, {processDefinitionKey: processDefinitionKey});
$.ajax({
url: url,
dataType: 'jsonp',
cache: false,
async: true,
success: function(data, textStatus) {
var processDefinition = data;
if (!processDefinition) {
console.error("Process definition '" + processDefinitionKey + "' not found");
} else {
callback.apply({processDefinitionId: processDefinition.id});
}
}
}).done(function(data, textStatus) {
console.log("ajax done");
}).fail(function(jqXHR, textStatus, error){
console.error('Get diagram layout['+processDefinitionKey+'] failure: ', textStatus, 'error: ', error, jqXHR);
});
},
getProcessDefinition: function(processDefinitionId, callback) {
var url = Lang.sub(this.options.processDefinitionUrl, {processDefinitionId: processDefinitionId});
$.ajax({
url: url,
dataType: 'jsonp',
cache: false,
async: true,
success: function(data, textStatus) {
var processDefinitionDiagramLayout = data;
if (!processDefinitionDiagramLayout) {
console.error("Process definition diagram layout '" + processDefinitionId + "' not found");
return;
} else {
callback.apply({processDefinitionDiagramLayout: processDefinitionDiagramLayout});
}
}
}).done(function(data, textStatus) {
console.log("ajax done");
}).fail(function(jqXHR, textStatus, error){
console.log('Get diagram layout['+processDefinitionId+'] failure: ', textStatus, jqXHR);
});
},
getHighLights: function(processInstanceId, callback) {
var url = Lang.sub(this.options.processInstanceHighLightsUrl, {processInstanceId: processInstanceId});
$.ajax({
url: url,
dataType: 'jsonp',
cache: false,
async: true,
success: function(data, textStatus) {
console.log("ajax returned data");
var highLights = data;
if (!highLights) {
console.log("highLights not found");
return;
} else {
callback.apply({highLights: highLights});
}
}
}).done(function(data, textStatus) {
console.log("ajax done");
}).fail(function(jqXHR, textStatus, error){
console.log('Get HighLights['+processInstanceId+'] failure: ', textStatus, jqXHR);
});
}
};
\ No newline at end of file
... ...
/** * * @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(){} };
\ No newline at end of file
... ...
/**
* Web color table
*
* @author Dmitry Farafonov
*/
var Color = {
/**
* The color white. In the default sRGB space.
*/
white : Raphael.getRGB("rgb(255,255,255)"),
/**
* The color white. In the default sRGB space.
*/
WHITE : this.white,
/**
* The color light gray. In the default sRGB space.
*/
lightGray : Raphael.getRGB("rgb(192, 192, 192)"),
/**
* The color light gray. In the default sRGB space.
*/
LIGHT_GRAY : this.lightGray,
/**
* The color gray. In the default sRGB space.
*/
gray : Raphael.getRGB("rgb(128, 128, 128)"),
/**
* The color gray. In the default sRGB space.
*/
GRAY : this.gray,
/**
* The color dark gray. In the default sRGB space.
*/
darkGray : Raphael.getRGB("rgb(64, 64, 64)"),
/**
* The color dark gray. In the default sRGB space.
*/
DARK_GRAY : this.darkGray,
/**
* The color black. In the default sRGB space.
*/
black : Raphael.getRGB("rgb(0, 0, 0)"),
/**
* The color black. In the default sRGB space.
*/
BLACK : this.black,
/**
* The color red. In the default sRGB space.
*/
red : Raphael.getRGB("rgb(255, 0, 0)"),
/**
* The color red. In the default sRGB space.
*/
RED : this.red,
/**
* The color pink. In the default sRGB space.
*/
pink : Raphael.getRGB("rgb(255, 175, 175)"),
/**
* The color pink. In the default sRGB space.
*/
PINK : this.pink,
/**
* The color orange. In the default sRGB space.
*/
orange : Raphael.getRGB("rgb(255, 200, 0)"),
/**
* The color orange. In the default sRGB space.
*/
ORANGE : this.orange,
/**
* The color yellow. In the default sRGB space.
*/
yellow : Raphael.getRGB("rgb(255, 255, 0)"),
/**
* The color yellow. In the default sRGB space.
*/
YELLOW : this.yellow,
/**
* The color green. In the default sRGB space.
*/
green : Raphael.getRGB("rgb(0, 255, 0)"),
/**
* The color green. In the default sRGB space.
*/
GREEN : this.green,
/**
* The color magenta. In the default sRGB space.
*/
magenta : Raphael.getRGB("rgb(255, 0, 255)"),
/**
* The color magenta. In the default sRGB space.
*/
MAGENTA : this.magenta,
/**
* The color cyan. In the default sRGB space.
*/
cyan : Raphael.getRGB("rgb(0, 255, 255)"),
/**
* The color cyan. In the default sRGB space.
*/
CYAN : this.cyan,
/**
* The color blue. In the default sRGB space.
*/
blue : Raphael.getRGB("rgb(0, 0, 255)"),
/**
* The color blue. In the default sRGB space.
*/
BLUE : this.blue,
/************************************************************************/
// http://www.stm.dp.ua/web-design/color-html.php
Snow : Raphael.getRGB("#FFFAFA "), // 255 250 250
GhostWhite : Raphael.getRGB("#F8F8FF "), // 248 248 255
WhiteSmoke : Raphael.getRGB("#F5F5F5 "), // 245 245 245
Gainsboro : Raphael.getRGB("#DCDCDC "), // 220 220 220
FloralWhite : Raphael.getRGB("#FFFAF0 "), // 255 250 240
OldLace : Raphael.getRGB("#FDF5E6 "), // 253 245 230
Linen : Raphael.getRGB("#FAF0E6 "), // 250 240 230
AntiqueWhite : Raphael.getRGB("#FAEBD7 "), // 250 235 215
PapayaWhip : Raphael.getRGB("#FFEFD5 "), // 255 239 213
BlanchedAlmond : Raphael.getRGB("#FFEBCD "), // 255 235 205
Bisque : Raphael.getRGB("#FFE4C4 "), // 255 228 196
PeachPuff : Raphael.getRGB("#FFDAB9 "), // 255 218 185
NavajoWhite : Raphael.getRGB("#FFDEAD "), // 255 222 173
Moccasin : Raphael.getRGB("#FFE4B5 "), // 255 228 181
Cornsilk : Raphael.getRGB("#FFF8DC "), // 255 248 220
Ivory : Raphael.getRGB("#FFFFF0 "), // 255 255 240
LemonChiffon : Raphael.getRGB("#FFFACD "), // 255 250 205
Seashell : Raphael.getRGB("#FFF5EE "), // 255 245 238
Honeydew : Raphael.getRGB("#F0FFF0 "), // 240 255 240
MintCream : Raphael.getRGB("#F5FFFA "), // 245 255 250
Azure : Raphael.getRGB("#F0FFFF "), // 240 255 255
AliceBlue : Raphael.getRGB("#F0F8FF "), // 240 248 255
lavender : Raphael.getRGB("#E6E6FA "), // 230 230 250
LavenderBlush : Raphael.getRGB("#FFF0F5 "), // 255 240 245
MistyRose : Raphael.getRGB("#FFE4E1 "), // 255 228 225
White : Raphael.getRGB("#FFFFFF "), // 255 255 255
Black : Raphael.getRGB("#000000 "), // 0 0 0
DarkSlateGray : Raphael.getRGB("#2F4F4F "), // 47 79 79
DimGrey : Raphael.getRGB("#696969 "), // 105 105 105
SlateGrey : Raphael.getRGB("#708090 "), // 112 128 144
LightSlateGray : Raphael.getRGB("#778899 "), // 119 136 153
Grey : Raphael.getRGB("#BEBEBE "), // 190 190 190
LightGray : Raphael.getRGB("#D3D3D3 "), // 211 211 211
MidnightBlue : Raphael.getRGB("#191970 "), // 25 25 112
NavyBlue : Raphael.getRGB("#000080 "), // 0 0 128
CornflowerBlue : Raphael.getRGB("#6495ED "), // 100 149 237
DarkSlateBlue : Raphael.getRGB("#483D8B "), // 72 61 139
SlateBlue : Raphael.getRGB("#6A5ACD "), // 106 90 205
MediumSlateBlue : Raphael.getRGB("#7B68EE "), // 123 104 238
LightSlateBlue : Raphael.getRGB("#8470FF "), // 132 112 255
MediumBlue : Raphael.getRGB("#0000CD "), // 0 0 205
RoyalBlue : Raphael.getRGB("#4169E1 "), // 65 105 225
Blue : Raphael.getRGB("#0000FF "), // 0 0 255
DodgerBlue : Raphael.getRGB("#1E90FF "), // 30 144 255
DeepSkyBlue : Raphael.getRGB("#00BFFF "), // 0 191 255
SkyBlue : Raphael.getRGB("#87CEEB "), // 135 206 235
LightSkyBlue : Raphael.getRGB("#87CEFA "), // 135 206 250
SteelBlue : Raphael.getRGB("#4682B4 "), // 70 130 180
LightSteelBlue : Raphael.getRGB("#B0C4DE "), // 176 196 222
LightBlue : Raphael.getRGB("#ADD8E6 "), // 173 216 230
PowderBlue : Raphael.getRGB("#B0E0E6 "), // 176 224 230
PaleTurquoise : Raphael.getRGB("#AFEEEE "), // 175 238 238
DarkTurquoise : Raphael.getRGB("#00CED1 "), // 0 206 209
MediumTurquoise : Raphael.getRGB("#48D1CC "), // 72 209 204
Turquoise : Raphael.getRGB("#40E0D0 "), // 64 224 208
Cyan : Raphael.getRGB("#00FFFF "), // 0 255 255
LightCyan : Raphael.getRGB("#E0FFFF "), // 224 255 255
CadetBlue : Raphael.getRGB("#5F9EA0 "), // 95 158 160
MediumAquamarine: Raphael.getRGB("#66CDAA "), // 102 205 170
Aquamarine : Raphael.getRGB("#7FFFD4 "), // 127 255 212
DarkGreen : Raphael.getRGB("#006400 "), // 0 100 0
DarkOliveGreen : Raphael.getRGB("#556B2F "), // 85 107 47
DarkSeaGreen : Raphael.getRGB("#8FBC8F "), // 143 188 143
SeaGreen : Raphael.getRGB("#2E8B57 "), // 46 139 87
MediumSeaGreen : Raphael.getRGB("#3CB371 "), // 60 179 113
LightSeaGreen : Raphael.getRGB("#20B2AA "), // 32 178 170
PaleGreen : Raphael.getRGB("#98FB98 "), // 152 251 152
SpringGreen : Raphael.getRGB("#00FF7F "), // 0 255 127
LawnGreen : Raphael.getRGB("#7CFC00 "), // 124 252 0
Green : Raphael.getRGB("#00FF00 "), // 0 255 0
Chartreuse : Raphael.getRGB("#7FFF00 "), // 127 255 0
MedSpringGreen : Raphael.getRGB("#00FA9A "), // 0 250 154
GreenYellow : Raphael.getRGB("#ADFF2F "), // 173 255 47
LimeGreen : Raphael.getRGB("#32CD32 "), // 50 205 50
YellowGreen : Raphael.getRGB("#9ACD32 "), // 154 205 50
ForestGreen : Raphael.getRGB("#228B22 "), // 34 139 34
OliveDrab : Raphael.getRGB("#6B8E23 "), // 107 142 35
DarkKhaki : Raphael.getRGB("#BDB76B "), // 189 183 107
PaleGoldenrod : Raphael.getRGB("#EEE8AA "), // 238 232 170
LtGoldenrodYello: Raphael.getRGB("#FAFAD2 "), // 250 250 210
LightYellow : Raphael.getRGB("#FFFFE0 "), // 255 255 224
Yellow : Raphael.getRGB("#FFFF00 "), // 255 255 0
Gold : Raphael.getRGB("#FFD700 "), // 255 215 0
LightGoldenrod : Raphael.getRGB("#EEDD82 "), // 238 221 130
goldenrod : Raphael.getRGB("#DAA520 "), // 218 165 32
DarkGoldenrod : Raphael.getRGB("#B8860B "), // 184 134 11
RosyBrown : Raphael.getRGB("#BC8F8F "), // 188 143 143
IndianRed : Raphael.getRGB("#CD5C5C "), // 205 92 92
SaddleBrown : Raphael.getRGB("#8B4513 "), // 139 69 19
Sienna : Raphael.getRGB("#A0522D "), // 160 82 45
Peru : Raphael.getRGB("#CD853F "), // 205 133 63
Burlywood : Raphael.getRGB("#DEB887 "), // 222 184 135
Beige : Raphael.getRGB("#F5F5DC "), // 245 245 220
Wheat : Raphael.getRGB("#F5DEB3 "), // 245 222 179
SandyBrown : Raphael.getRGB("#F4A460 "), // 244 164 96
Tan : Raphael.getRGB("#D2B48C "), // 210 180 140
Chocolate : Raphael.getRGB("#D2691E "), // 210 105 30
Firebrick : Raphael.getRGB("#B22222 "), // 178 34 34
Brown : Raphael.getRGB("#A52A2A "), // 165 42 42
DarkSalmon : Raphael.getRGB("#E9967A "), // 233 150 122
Salmon : Raphael.getRGB("#FA8072 "), // 250 128 114
LightSalmon : Raphael.getRGB("#FFA07A "), // 255 160 122
Orange : Raphael.getRGB("#FFA500 "), // 255 165 0
DarkOrange : Raphael.getRGB("#FF8C00 "), // 255 140 0
Coral : Raphael.getRGB("#FF7F50 "), // 255 127 80
LightCoral : Raphael.getRGB("#F08080 "), // 240 128 128
Tomato : Raphael.getRGB("#FF6347 "), // 255 99 71
OrangeRed : Raphael.getRGB("#FF4500 "), // 255 69 0
Red : Raphael.getRGB("#FF0000 "), // 255 0 0
HotPink : Raphael.getRGB("#FF69B4 "), // 255 105 180
DeepPink : Raphael.getRGB("#FF1493 "), // 255 20 147
Pink : Raphael.getRGB("#FFC0CB "), // 255 192 203
LightPink : Raphael.getRGB("#FFB6C1 "), // 255 182 193
PaleVioletRed : Raphael.getRGB("#DB7093 "), // 219 112 147
Maroon : Raphael.getRGB("#B03060 "), // 176 48 96
MediumVioletRed : Raphael.getRGB("#C71585 "), // 199 21 133
VioletRed : Raphael.getRGB("#D02090 "), // 208 32 144
Magenta : Raphael.getRGB("#FF00FF "), // 255 0 255
Violet : Raphael.getRGB("#EE82EE "), // 238 130 238
Plum : Raphael.getRGB("#DDA0DD "), // 221 160 221
Orchid : Raphael.getRGB("#DA70D6 "), // 218 112 214
MediumOrchid : Raphael.getRGB("#BA55D3 "), // 186 85 211
DarkOrchid : Raphael.getRGB("#9932CC "), // 153 50 204
DarkViolet : Raphael.getRGB("#9400D3 "), // 148 0 211
BlueViolet : Raphael.getRGB("#8A2BE2 "), // 138 43 226
Purple : Raphael.getRGB("#A020F0 "), // 160 32 240
MediumPurple : Raphael.getRGB("#9370DB "), // 147 112 219
Thistle : Raphael.getRGB("#D8BFD8 "), // 216 191 216
Snow1 : Raphael.getRGB("#FFFAFA "), // 255 250 250
Snow2 : Raphael.getRGB("#EEE9E9 "), // 238 233 233
Snow3 : Raphael.getRGB("#CDC9C9 "), // 205 201 201
Snow4 : Raphael.getRGB("#8B8989 "), // 139 137 137
Seashell1 : Raphael.getRGB("#FFF5EE "), // 255 245 238
Seashell2 : Raphael.getRGB("#EEE5DE "), // 238 229 222
Seashell3 : Raphael.getRGB("#CDC5BF "), // 205 197 191
Seashell4 : Raphael.getRGB("#8B8682 "), // 139 134 130
AntiqueWhite1 : Raphael.getRGB("#FFEFDB "), // 255 239 219
AntiqueWhite2 : Raphael.getRGB("#EEDFCC "), // 238 223 204
AntiqueWhite3 : Raphael.getRGB("#CDC0B0 "), // 205 192 176
AntiqueWhite4 : Raphael.getRGB("#8B8378 "), // 139 131 120
Bisque1 : Raphael.getRGB("#FFE4C4 "), // 255 228 196
Bisque2 : Raphael.getRGB("#EED5B7 "), // 238 213 183
Bisque3 : Raphael.getRGB("#CDB79E "), // 205 183 158
Bisque4 : Raphael.getRGB("#8B7D6B "), // 139 125 107
PeachPuff1 : Raphael.getRGB("#FFDAB9 "), // 255 218 185
PeachPuff2 : Raphael.getRGB("#EECBAD "), // 238 203 173
PeachPuff3 : Raphael.getRGB("#CDAF95 "), // 205 175 149
PeachPuff4 : Raphael.getRGB("#8B7765 "), // 139 119 101
NavajoWhite1 : Raphael.getRGB("#FFDEAD "), // 255 222 173
NavajoWhite2 : Raphael.getRGB("#EECFA1 "), // 238 207 161
NavajoWhite3 : Raphael.getRGB("#CDB38B "), // 205 179 139
NavajoWhite4 : Raphael.getRGB("#8B795E "), // 139 121 94
LemonChiffon1 : Raphael.getRGB("#FFFACD "), // 255 250 205
LemonChiffon2 : Raphael.getRGB("#EEE9BF "), // 238 233 191
LemonChiffon3 : Raphael.getRGB("#CDC9A5 "), // 205 201 165
LemonChiffon4 : Raphael.getRGB("#8B8970 "), // 139 137 112
Cornsilk1 : Raphael.getRGB("#FFF8DC "), // 255 248 220
Cornsilk2 : Raphael.getRGB("#EEE8CD "), // 238 232 205
Cornsilk3 : Raphael.getRGB("#CDC8B1 "), // 205 200 177
Cornsilk4 : Raphael.getRGB("#8B8878 "), // 139 136 120
Ivory1 : Raphael.getRGB("#FFFFF0 "), // 255 255 240
Ivory2 : Raphael.getRGB("#EEEEE0 "), // 238 238 224
Ivory3 : Raphael.getRGB("#CDCDC1 "), // 205 205 193
Ivory4 : Raphael.getRGB("#8B8B83 "), // 139 139 131
Honeydew1 : Raphael.getRGB("#F0FFF0 "), // 240 255 240
Honeydew2 : Raphael.getRGB("#E0EEE0 "), // 224 238 224
Honeydew3 : Raphael.getRGB("#C1CDC1 "), // 193 205 193
Honeydew4 : Raphael.getRGB("#838B83 "), // 131 139 131
LavenderBlush1 : Raphael.getRGB("#FFF0F5 "), // 255 240 245
LavenderBlush2 : Raphael.getRGB("#EEE0E5 "), // 238 224 229
LavenderBlush3 : Raphael.getRGB("#CDC1C5 "), // 205 193 197
LavenderBlush4 : Raphael.getRGB("#8B8386 "), // 139 131 134
MistyRose1 : Raphael.getRGB("#FFE4E1 "), // 255 228 225
MistyRose2 : Raphael.getRGB("#EED5D2 "), // 238 213 210
MistyRose3 : Raphael.getRGB("#CDB7B5 "), // 205 183 181
MistyRose4 : Raphael.getRGB("#8B7D7B "), // 139 125 123
Azure1 : Raphael.getRGB("#F0FFFF "), // 240 255 255
Azure2 : Raphael.getRGB("#E0EEEE "), // 224 238 238
Azure3 : Raphael.getRGB("#C1CDCD "), // 193 205 205
Azure4 : Raphael.getRGB("#838B8B "), // 131 139 139
SlateBlue1 : Raphael.getRGB("#836FFF "), // 131 111 255
SlateBlue2 : Raphael.getRGB("#7A67EE "), // 122 103 238
SlateBlue3 : Raphael.getRGB("#6959CD "), // 105 89 205
SlateBlue4 : Raphael.getRGB("#473C8B "), // 71 60 139
RoyalBlue1 : Raphael.getRGB("#4876FF "), // 72 118 255
RoyalBlue2 : Raphael.getRGB("#436EEE "), // 67 110 238
RoyalBlue3 : Raphael.getRGB("#3A5FCD "), // 58 95 205
RoyalBlue4 : Raphael.getRGB("#27408B "), // 39 64 139
Blue1 : Raphael.getRGB("#0000FF "), // 0 0 255
Blue2 : Raphael.getRGB("#0000EE "), // 0 0 238
Blue3 : Raphael.getRGB("#0000CD "), // 0 0 205
Blue4 : Raphael.getRGB("#00008B "), // 0 0 139
DodgerBlue1 : Raphael.getRGB("#1E90FF "), // 30 144 255
DodgerBlue2 : Raphael.getRGB("#1C86EE "), // 28 134 238
DodgerBlue3 : Raphael.getRGB("#1874CD "), // 24 116 205
DodgerBlue4 : Raphael.getRGB("#104E8B "), // 16 78 139
SteelBlue1 : Raphael.getRGB("#63B8FF "), // 99 184 255
SteelBlue2 : Raphael.getRGB("#5CACEE "), // 92 172 238
SteelBlue3 : Raphael.getRGB("#4F94CD "), // 79 148 205
SteelBlue4 : Raphael.getRGB("#36648B "), // 54 100 139
DeepSkyBlue1 : Raphael.getRGB("#00BFFF "), // 0 191 255
DeepSkyBlue2 : Raphael.getRGB("#00B2EE "), // 0 178 238
DeepSkyBlue3 : Raphael.getRGB("#009ACD "), // 0 154 205
DeepSkyBlue4 : Raphael.getRGB("#00688B "), // 0 104 139
SkyBlue1 : Raphael.getRGB("#87CEFF "), // 135 206 255
SkyBlue2 : Raphael.getRGB("#7EC0EE "), // 126 192 238
SkyBlue3 : Raphael.getRGB("#6CA6CD "), // 108 166 205
SkyBlue4 : Raphael.getRGB("#4A708B "), // 74 112 139
LightSkyBlue1 : Raphael.getRGB("#B0E2FF "), // 176 226 255
LightSkyBlue2 : Raphael.getRGB("#A4D3EE "), // 164 211 238
LightSkyBlue3 : Raphael.getRGB("#8DB6CD "), // 141 182 205
LightSkyBlue4 : Raphael.getRGB("#607B8B "), // 96 123 139
SlateGray1 : Raphael.getRGB("#C6E2FF "), // 198 226 255
SlateGray2 : Raphael.getRGB("#B9D3EE "), // 185 211 238
SlateGray3 : Raphael.getRGB("#9FB6CD "), // 159 182 205
SlateGray4 : Raphael.getRGB("#6C7B8B "), // 108 123 139
LightSteelBlue1 : Raphael.getRGB("#CAE1FF "), // 202 225 255
LightSteelBlue2 : Raphael.getRGB("#BCD2EE "), // 188 210 238
LightSteelBlue3 : Raphael.getRGB("#A2B5CD "), // 162 181 205
LightSteelBlue4 : Raphael.getRGB("#6E7B8B "), // 110 123 139
LightBlue1 : Raphael.getRGB("#BFEFFF "), // 191 239 255
LightBlue2 : Raphael.getRGB("#B2DFEE "), // 178 223 238
LightBlue3 : Raphael.getRGB("#9AC0CD "), // 154 192 205
LightBlue4 : Raphael.getRGB("#68838B "), // 104 131 139
LightCyan1 : Raphael.getRGB("#E0FFFF "), // 224 255 255
LightCyan2 : Raphael.getRGB("#D1EEEE "), // 209 238 238
LightCyan3 : Raphael.getRGB("#B4CDCD "), // 180 205 205
LightCyan4 : Raphael.getRGB("#7A8B8B "), // 122 139 139
PaleTurquoise1 : Raphael.getRGB("#BBFFFF "), // 187 255 255
PaleTurquoise2 : Raphael.getRGB("#AEEEEE "), // 174 238 238
PaleTurquoise3 : Raphael.getRGB("#96CDCD "), // 150 205 205
PaleTurquoise4 : Raphael.getRGB("#668B8B "), // 102 139 139
CadetBlue1 : Raphael.getRGB("#98F5FF "), // 152 245 255
CadetBlue2 : Raphael.getRGB("#8EE5EE "), // 142 229 238
CadetBlue3 : Raphael.getRGB("#7AC5CD "), // 122 197 205
CadetBlue4 : Raphael.getRGB("#53868B "), // 83 134 139
Turquoise1 : Raphael.getRGB("#00F5FF "), // 0 245 255
Turquoise2 : Raphael.getRGB("#00E5EE "), // 0 229 238
Turquoise3 : Raphael.getRGB("#00C5CD "), // 0 197 205
Turquoise4 : Raphael.getRGB("#00868B "), // 0 134 139
Cyan1 : Raphael.getRGB("#00FFFF "), // 0 255 255
Cyan2 : Raphael.getRGB("#00EEEE "), // 0 238 238
Cyan3 : Raphael.getRGB("#00CDCD "), // 0 205 205
Cyan4 : Raphael.getRGB("#008B8B "), // 0 139 139
DarkSlateGray1 : Raphael.getRGB("#97FFFF "), // 151 255 255
DarkSlateGray2 : Raphael.getRGB("#8DEEEE "), // 141 238 238
DarkSlateGray3 : Raphael.getRGB("#79CDCD "), // 121 205 205
DarkSlateGray4 : Raphael.getRGB("#528B8B "), // 82 139 139
Aquamarine1 : Raphael.getRGB("#7FFFD4 "), // 127 255 212
Aquamarine2 : Raphael.getRGB("#76EEC6 "), // 118 238 198
Aquamarine3 : Raphael.getRGB("#66CDAA "), // 102 205 170
Aquamarine4 : Raphael.getRGB("#458B74 "), // 69 139 116
DarkSeaGreen1 : Raphael.getRGB("#C1FFC1 "), // 193 255 193
DarkSeaGreen2 : Raphael.getRGB("#B4EEB4 "), // 180 238 180
DarkSeaGreen3 : Raphael.getRGB("#9BCD9B "), // 155 205 155
DarkSeaGreen4 : Raphael.getRGB("#698B69 "), // 105 139 105
SeaGreen1 : Raphael.getRGB("#54FF9F "), // 84 255 159
SeaGreen2 : Raphael.getRGB("#4EEE94 "), // 78 238 148
SeaGreen3 : Raphael.getRGB("#43CD80 "), // 67 205 128
SeaGreen4 : Raphael.getRGB("#2E8B57 "), // 46 139 87
PaleGreen1 : Raphael.getRGB("#9AFF9A "), // 154 255 154
PaleGreen2 : Raphael.getRGB("#90EE90 "), // 144 238 144
PaleGreen3 : Raphael.getRGB("#7CCD7C "), // 124 205 124
PaleGreen4 : Raphael.getRGB("#548B54 "), // 84 139 84
SpringGreen1 : Raphael.getRGB("#00FF7F "), // 0 255 127
SpringGreen2 : Raphael.getRGB("#00EE76 "), // 0 238 118
SpringGreen3 : Raphael.getRGB("#00CD66 "), // 0 205 102
SpringGreen4 : Raphael.getRGB("#008B45 "), // 0 139 69
Green1 : Raphael.getRGB("#00FF00 "), // 0 255 0
Green2 : Raphael.getRGB("#00EE00 "), // 0 238 0
Green3 : Raphael.getRGB("#00CD00 "), // 0 205 0
Green4 : Raphael.getRGB("#008B00 "), // 0 139 0
Chartreuse1 : Raphael.getRGB("#7FFF00 "), // 127 255 0
Chartreuse2 : Raphael.getRGB("#76EE00 "), // 118 238 0
Chartreuse3 : Raphael.getRGB("#66CD00 "), // 102 205 0
Chartreuse4 : Raphael.getRGB("#458B00 "), // 69 139 0
OliveDrab1 : Raphael.getRGB("#C0FF3E "), // 192 255 62
OliveDrab2 : Raphael.getRGB("#B3EE3A "), // 179 238 58
OliveDrab3 : Raphael.getRGB("#9ACD32 "), // 154 205 50
OliveDrab4 : Raphael.getRGB("#698B22 "), // 105 139 34
DarkOliveGreen1 : Raphael.getRGB("#CAFF70 "), // 202 255 112
DarkOliveGreen2 : Raphael.getRGB("#BCEE68 "), // 188 238 104
DarkOliveGreen3 : Raphael.getRGB("#A2CD5A "), // 162 205 90
DarkOliveGreen4 : Raphael.getRGB("#6E8B3D "), // 110 139 61
Khaki1 : Raphael.getRGB("#FFF68F "), // 255 246 143
Khaki2 : Raphael.getRGB("#EEE685 "), // 238 230 133
Khaki3 : Raphael.getRGB("#CDC673 "), // 205 198 115
Khaki4 : Raphael.getRGB("#8B864E "), // 139 134 78
LightGoldenrod1 : Raphael.getRGB("#FFEC8B "), // 255 236 139
LightGoldenrod2 : Raphael.getRGB("#EEDC82 "), // 238 220 130
LightGoldenrod3 : Raphael.getRGB("#CDBE70 "), // 205 190 112
LightGoldenrod4 : Raphael.getRGB("#8B814C "), // 139 129 76
LightYellow1 : Raphael.getRGB("#FFFFE0 "), // 255 255 224
LightYellow2 : Raphael.getRGB("#EEEED1 "), // 238 238 209
LightYellow3 : Raphael.getRGB("#CDCDB4 "), // 205 205 180
LightYellow4 : Raphael.getRGB("#8B8B7A "), // 139 139 122
Yellow1 : Raphael.getRGB("#FFFF00 "), // 255 255 0
Yellow2 : Raphael.getRGB("#EEEE00 "), // 238 238 0
Yellow3 : Raphael.getRGB("#CDCD00 "), // 205 205 0
Yellow4 : Raphael.getRGB("#8B8B00 "), // 139 139 0
Gold1 : Raphael.getRGB("#FFD700 "), // 255 215 0
Gold2 : Raphael.getRGB("#EEC900 "), // 238 201 0
Gold3 : Raphael.getRGB("#CDAD00 "), // 205 173 0
Gold4 : Raphael.getRGB("#8B7500 "), // 139 117 0
Goldenrod1 : Raphael.getRGB("#FFC125 "), // 255 193 37
Goldenrod2 : Raphael.getRGB("#EEB422 "), // 238 180 34
Goldenrod3 : Raphael.getRGB("#CD9B1D "), // 205 155 29
Goldenrod4 : Raphael.getRGB("#8B6914 "), // 139 105 20
DarkGoldenrod1 : Raphael.getRGB("#FFB90F "), // 255 185 15
DarkGoldenrod2 : Raphael.getRGB("#EEAD0E "), // 238 173 14
DarkGoldenrod3 : Raphael.getRGB("#CD950C "), // 205 149 12
DarkGoldenrod4 : Raphael.getRGB("#8B658B "), // 139 101 8
RosyBrown1 : Raphael.getRGB("#FFC1C1 "), // 255 193 193
RosyBrown2 : Raphael.getRGB("#EEB4B4 "), // 238 180 180
RosyBrown3 : Raphael.getRGB("#CD9B9B "), // 205 155 155
RosyBrown4 : Raphael.getRGB("#8B6969 "), // 139 105 105
IndianRed1 : Raphael.getRGB("#FF6A6A "), // 255 106 106
IndianRed2 : Raphael.getRGB("#EE6363 "), // 238 99 99
IndianRed3 : Raphael.getRGB("#CD5555 "), // 205 85 85
IndianRed4 : Raphael.getRGB("#8B3A3A "), // 139 58 58
Sienna1 : Raphael.getRGB("#FF8247 "), // 255 130 71
Sienna2 : Raphael.getRGB("#EE7942 "), // 238 121 66
Sienna3 : Raphael.getRGB("#CD6839 "), // 205 104 57
Sienna4 : Raphael.getRGB("#8B4726 "), // 139 71 38
Burlywood1 : Raphael.getRGB("#FFD39B "), // 255 211 155
Burlywood2 : Raphael.getRGB("#EEC591 "), // 238 197 145
Burlywood3 : Raphael.getRGB("#CDAA7D "), // 205 170 125
Burlywood4 : Raphael.getRGB("#8B7355 "), // 139 115 85
Wheat1 : Raphael.getRGB("#FFE7BA "), // 255 231 186
Wheat2 : Raphael.getRGB("#EED8AE "), // 238 216 174
Wheat3 : Raphael.getRGB("#CDBA96 "), // 205 186 150
Wheat4 : Raphael.getRGB("#8B7E66 "), // 139 126 102
Tan1 : Raphael.getRGB("#FFA54F "), // 255 165 79
Tan2 : Raphael.getRGB("#EE9A49 "), // 238 154 73
Tan3 : Raphael.getRGB("#CD853F "), // 205 133 63
Tan4 : Raphael.getRGB("#8B5A2B "), // 139 90 43
Chocolate1 : Raphael.getRGB("#FF7F24 "), // 255 127 36
Chocolate2 : Raphael.getRGB("#EE7621 "), // 238 118 33
Chocolate3 : Raphael.getRGB("#CD661D "), // 205 102 29
Chocolate4 : Raphael.getRGB("#8B4513 "), // 139 69 19
Firebrick1 : Raphael.getRGB("#FF3030 "), // 255 48 48
Firebrick2 : Raphael.getRGB("#EE2C2C "), // 238 44 44
Firebrick3 : Raphael.getRGB("#CD2626 "), // 205 38 38
Firebrick4 : Raphael.getRGB("#8B1A1A "), // 139 26 26
Brown1 : Raphael.getRGB("#FF4040 "), // 255 64 64
Brown2 : Raphael.getRGB("#EE3B3B "), // 238 59 59
Brown3 : Raphael.getRGB("#CD3333 "), // 205 51 51
Brown4 : Raphael.getRGB("#8B2323 "), // 139 35 35
Salmon1 : Raphael.getRGB("#FF8C69 "), // 255 140 105
Salmon2 : Raphael.getRGB("#EE8262 "), // 238 130 98
Salmon3 : Raphael.getRGB("#CD7054 "), // 205 112 84
Salmon4 : Raphael.getRGB("#8B4C39 "), // 139 76 57
LightSalmon1 : Raphael.getRGB("#FFA07A "), // 255 160 122
LightSalmon2 : Raphael.getRGB("#EE9572 "), // 238 149 114
LightSalmon3 : Raphael.getRGB("#CD8162 "), // 205 129 98
LightSalmon4 : Raphael.getRGB("#8B5742 "), // 139 87 66
Orange1 : Raphael.getRGB("#FFA500 "), // 255 165 0
Orange2 : Raphael.getRGB("#EE9A00 "), // 238 154 0
Orange3 : Raphael.getRGB("#CD8500 "), // 205 133 0
Orange4 : Raphael.getRGB("#8B5A00 "), // 139 90 0
DarkOrange1 : Raphael.getRGB("#FF7F00 "), // 255 127 0
DarkOrange2 : Raphael.getRGB("#EE7600 "), // 238 118 0
DarkOrange3 : Raphael.getRGB("#CD6600 "), // 205 102 0
DarkOrange4 : Raphael.getRGB("#8B4500 "), // 139 69 0
Coral1 : Raphael.getRGB("#FF7256 "), // 255 114 86
Coral2 : Raphael.getRGB("#EE6A50 "), // 238 106 80
Coral3 : Raphael.getRGB("#CD5B45 "), // 205 91 69
Coral4 : Raphael.getRGB("#8B3E2F "), // 139 62 47
Tomato1 : Raphael.getRGB("#FF6347 "), // 255 99 71
Tomato2 : Raphael.getRGB("#EE5C42 "), // 238 92 66
Tomato3 : Raphael.getRGB("#CD4F39 "), // 205 79 57
Tomato4 : Raphael.getRGB("#8B3626 "), // 139 54 38
OrangeRed1 : Raphael.getRGB("#FF4500 "), // 255 69 0
OrangeRed2 : Raphael.getRGB("#EE4000 "), // 238 64 0
OrangeRed3 : Raphael.getRGB("#CD3700 "), // 205 55 0
OrangeRed4 : Raphael.getRGB("#8B2500 "), // 139 37 0
Red1 : Raphael.getRGB("#FF0000 "), // 255 0 0
Red2 : Raphael.getRGB("#EE0000 "), // 238 0 0
Red3 : Raphael.getRGB("#CD0000 "), // 205 0 0
Red4 : Raphael.getRGB("#8B0000 "), // 139 0 0
DeepPink1 : Raphael.getRGB("#FF1493 "), // 255 20 147
DeepPink2 : Raphael.getRGB("#EE1289 "), // 238 18 137
DeepPink3 : Raphael.getRGB("#CD1076 "), // 205 16 118
DeepPink4 : Raphael.getRGB("#8B0A50 "), // 139 10 80
HotPink1 : Raphael.getRGB("#FF6EB4 "), // 255 110 180
HotPink2 : Raphael.getRGB("#EE6AA7 "), // 238 106 167
HotPink3 : Raphael.getRGB("#CD6090 "), // 205 96 144
HotPink4 : Raphael.getRGB("#8B3A62 "), // 139 58 98
Pink1 : Raphael.getRGB("#FFB5C5 "), // 255 181 197
Pink2 : Raphael.getRGB("#EEA9B8 "), // 238 169 184
Pink3 : Raphael.getRGB("#CD919E "), // 205 145 158
Pink4 : Raphael.getRGB("#8B636C "), // 139 99 108
LightPink1 : Raphael.getRGB("#FFAEB9 "), // 255 174 185
LightPink2 : Raphael.getRGB("#EEA2AD "), // 238 162 173
LightPink3 : Raphael.getRGB("#CD8C95 "), // 205 140 149
LightPink4 : Raphael.getRGB("#8B5F65 "), // 139 95 101
PaleVioletRed1 : Raphael.getRGB("#FF82AB "), // 255 130 171
PaleVioletRed2 : Raphael.getRGB("#EE799F "), // 238 121 159
PaleVioletRed3 : Raphael.getRGB("#CD6889 "), // 205 104 137
PaleVioletRed4 : Raphael.getRGB("#8B475D "), // 139 71 93
Maroon1 : Raphael.getRGB("#FF34B3 "), // 255 52 179
Maroon2 : Raphael.getRGB("#EE30A7 "), // 238 48 167
Maroon3 : Raphael.getRGB("#CD2990 "), // 205 41 144
Maroon4 : Raphael.getRGB("#8B1C62 "), // 139 28 98
VioletRed1 : Raphael.getRGB("#FF3E96 "), // 255 62 150
VioletRed2 : Raphael.getRGB("#EE3A8C "), // 238 58 140
VioletRed3 : Raphael.getRGB("#CD3278 "), // 205 50 120
VioletRed4 : Raphael.getRGB("#8B2252 "), // 139 34 82
Magenta1 : Raphael.getRGB("#FF00FF "), // 255 0 255
Magenta2 : Raphael.getRGB("#EE00EE "), // 238 0 238
Magenta3 : Raphael.getRGB("#CD00CD "), // 205 0 205
Magenta4 : Raphael.getRGB("#8B008B "), // 139 0 139
Orchid1 : Raphael.getRGB("#FF83FA "), // 255 131 250
Orchid2 : Raphael.getRGB("#EE7AE9 "), // 238 122 233
Orchid3 : Raphael.getRGB("#CD69C9 "), // 205 105 201
Orchid4 : Raphael.getRGB("#8B4789 "), // 139 71 137
Plum1 : Raphael.getRGB("#FFBBFF "), // 255 187 255
Plum2 : Raphael.getRGB("#EEAEEE "), // 238 174 238
Plum3 : Raphael.getRGB("#CD96CD "), // 205 150 205
Plum4 : Raphael.getRGB("#8B668B "), // 139 102 139
MediumOrchid1 : Raphael.getRGB("#E066FF "), // 224 102 255
MediumOrchid2 : Raphael.getRGB("#D15FEE "), // 209 95 238
MediumOrchid3 : Raphael.getRGB("#B452CD "), // 180 82 205
MediumOrchid4 : Raphael.getRGB("#7A378B "), // 122 55 139
DarkOrchid1 : Raphael.getRGB("#BF3EFF "), // 191 62 255
DarkOrchid2 : Raphael.getRGB("#B23AEE "), // 178 58 238
DarkOrchid3 : Raphael.getRGB("#9A32CD "), // 154 50 205
DarkOrchid4 : Raphael.getRGB("#68228B "), // 104 34 139
Purple1 : Raphael.getRGB("#9B30FF "), // 155 48 255
Purple2 : Raphael.getRGB("#912CEE "), // 145 44 238
Purple3 : Raphael.getRGB("#7D26CD "), // 125 38 205
Purple4 : Raphael.getRGB("#551A8B "), // 85 26 139
MediumPurple1 : Raphael.getRGB("#AB82FF "), // 171 130 255
MediumPurple2 : Raphael.getRGB("#9F79EE "), // 159 121 238
MediumPurple3 : Raphael.getRGB("#8968CD "), // 137 104 205
MediumPurple4 : Raphael.getRGB("#5D478B "), // 93 71 139
Thistle1 : Raphael.getRGB("#FFE1FF "), // 255 225 255
Thistle2 : Raphael.getRGB("#EED2EE "), // 238 210 238
Thistle3 : Raphael.getRGB("#CDB5CD "), // 205 181 205
Thistle4 : Raphael.getRGB("#8B7B8B "), // 139 123 139
grey11 : Raphael.getRGB("#1C1C1C "), // 28 28 28
grey21 : Raphael.getRGB("#363636 "), // 54 54 54
grey31 : Raphael.getRGB("#4F4F4F "), // 79 79 79
grey41 : Raphael.getRGB("#696969 "), // 105 105 105
grey51 : Raphael.getRGB("#828282 "), // 130 130 130
grey61 : Raphael.getRGB("#9C9C9C "), // 156 156 156
grey71 : Raphael.getRGB("#B5B5B5 "), // 181 181 181
gray81 : Raphael.getRGB("#CFCFCF "), // 207 207 207
gray91 : Raphael.getRGB("#E8E8E8 "), // 232 232 232
DarkGrey : Raphael.getRGB("#A9A9A9 "), // 169 169 169
DarkBlue : Raphael.getRGB("#00008B "), // 0 0 139
DarkCyan : Raphael.getRGB("#008B8B "), // 0 139 139
DarkMagenta : Raphael.getRGB("#8B008B "), // 139 0 139
DarkRed : Raphael.getRGB("#8B0000 "), // 139 0 0
LightGreen : Raphael.getRGB("#90EE90 "), // 144 238 144
get: function(R, G, B){
return Raphael.getRGB("rgb(" + R + ", " + G + ", " + B + ")");
}
};
\ No newline at end of file
... ...
/**
* Word wrapping
*
* @author (Javascript) Dmitry Farafonov
*/
var AttributedStringIterator = function(text){
//this.text = this.rtrim(this.ltrim(text));
text = text.replace(/(\s)+/, " ");
this.text = this.rtrim(text);
/*
if (beginIndex < 0 || beginIndex > endIndex || endIndex > length()) {
throw new IllegalArgumentException("Invalid substring range");
}
*/
this.beginIndex = 0;
this.endIndex = this.text.length;
this.currentIndex = this.beginIndex;
//console.group("[AttributedStringIterator]");
var i = 0;
var string = this.text;
var fullPos = 0;
//console.log("string: \"" + string + "\", length: " + string.length);
this.startWordOffsets = [];
this.startWordOffsets.push(fullPos);
// TODO: remove i 1000
while (i<1000) {
var pos = string.search(/[ \t\n\f-\.\,]/);
if (pos == -1)
break;
// whitespace start
fullPos += pos;
string = string.substr(pos);
////console.log("fullPos: " + fullPos + ", pos: " + pos + ", string: ", string);
// remove whitespaces
var pos = string.search(/[^ \t\n\f-\.\,]/);
if (pos == -1)
break;
// whitespace end
fullPos += pos;
string = string.substr(pos);
////console.log("fullPos: " + fullPos);
this.startWordOffsets.push(fullPos);
i++;
}
//console.log("startWordOffsets: ", this.startWordOffsets);
//console.groupEnd();
};
AttributedStringIterator.prototype = {
getEndIndex: function(pos){
if (typeof(pos) == "undefined")
return this.endIndex;
var string = this.text.substr(pos, this.endIndex - pos);
var posEndOfLine = string.search(/[\n]/);
if (posEndOfLine == -1)
return this.endIndex;
else
return pos + posEndOfLine;
},
getBeginIndex: function(){
return this.beginIndex;
},
isWhitespace: function(pos){
var str = this.text[pos];
var whitespaceChars = " \t\n\f";
return (whitespaceChars.indexOf(str) != -1);
},
isNewLine: function(pos){
var str = this.text[pos];
var whitespaceChars = "\n";
return (whitespaceChars.indexOf(str) != -1);
},
preceding: function(pos){
//console.group("[AttributedStringIterator.preceding]");
for(var i in this.startWordOffsets) {
var startWordOffset = this.startWordOffsets[i];
if (pos < startWordOffset && i>0) {
//console.log("startWordOffset: " + this.startWordOffsets[i-1]);
//console.groupEnd();
return this.startWordOffsets[i-1];
}
}
//console.log("pos: " + pos);
//console.groupEnd();
return this.startWordOffsets[i];
},
following: function(pos){
//console.group("[AttributedStringIterator.following]");
for(var i in this.startWordOffsets) {
var startWordOffset = this.startWordOffsets[i];
if (pos < startWordOffset && i>0) {
//console.log("startWordOffset: " + this.startWordOffsets[i]);
//console.groupEnd();
return this.startWordOffsets[i];
}
}
//console.log("pos: " + pos);
//console.groupEnd();
return this.startWordOffsets[i];
},
ltrim: function(str){
var patt2=/^\s+/g;
return str.replace(patt2, "");
},
rtrim: function(str){
var patt2=/\s+$/g;
return str.replace(patt2, "");
},
getLayout: function(start, limit){
return this.text.substr(start, limit - start);
},
getCharAtPos: function(pos) {
return this.text[pos];
}
};
var LineBreakMeasurer = function(paper, x, y, text, fontAttrs){
this.paper = paper;
this.text = new AttributedStringIterator(text);
this.fontAttrs = fontAttrs;
if (this.text.getEndIndex() - this.text.getBeginIndex() < 1) {
throw {message: "Text must contain at least one character.", code: "IllegalArgumentException"};
}
//this.measurer = new TextMeasurer(paper, this.text, this.fontAttrs);
this.limit = this.text.getEndIndex();
this.pos = this.start = this.text.getBeginIndex();
this.rafaelTextObject = this.paper.text(x, y, this.text.text).attr(fontAttrs).attr("text-anchor", "start");
this.svgTextObject = this.rafaelTextObject[0];
};
LineBreakMeasurer.prototype = {
nextOffset: function(wrappingWidth, offsetLimit, requireNextWord) {
//console.group("[nextOffset]");
var nextOffset = this.pos;
if (this.pos < this.limit) {
if (offsetLimit <= this.pos) {
throw {message: "offsetLimit must be after current position", code: "IllegalArgumentException"};
}
var charAtMaxAdvance = this.getLineBreakIndex(this.pos, wrappingWidth);
//charAtMaxAdvance --;
//console.log("charAtMaxAdvance:", charAtMaxAdvance, ", [" + this.text.getCharAtPos(charAtMaxAdvance) + "]");
if (charAtMaxAdvance == this.limit) {
nextOffset = this.limit;
//console.log("charAtMaxAdvance == this.limit");
} else if (this.text.isNewLine(charAtMaxAdvance)) {
//console.log("isNewLine");
nextOffset = charAtMaxAdvance+1;
} else if (this.text.isWhitespace(charAtMaxAdvance)) {
// TODO: find next noSpaceChar
//return nextOffset;
nextOffset = this.text.following(charAtMaxAdvance);
} else {
// Break is in a word; back up to previous break.
/*
var testPos = charAtMaxAdvance + 1;
if (testPos == this.limit) {
console.error("hbz...");
} else {
nextOffset = this.text.preceding(charAtMaxAdvance);
}
*/
nextOffset = this.text.preceding(charAtMaxAdvance);
if (nextOffset <= this.pos) {
nextOffset = Math.max(this.pos+1, charAtMaxAdvance);
}
}
}
if (nextOffset > offsetLimit) {
nextOffset = offsetLimit;
}
//console.log("nextOffset: " + nextOffset);
//console.groupEnd();
return nextOffset;
},
nextLayout: function(wrappingWidth) {
//console.groupCollapsed("[nextLayout]");
if (this.pos < this.limit) {
var requireNextWord = false;
var layoutLimit = this.nextOffset(wrappingWidth, this.limit, requireNextWord);
//console.log("layoutLimit:", layoutLimit);
if (layoutLimit == this.pos) {
//console.groupEnd();
return null;
}
var result = this.text.getLayout(this.pos, layoutLimit);
//console.log("layout: \"" + result + "\"");
// remove end of line
//var posEndOfLine = this.text.getEndIndex(this.pos);
//if (posEndOfLine < result.length)
// result = result.substr(0, posEndOfLine);
this.pos = layoutLimit;
//console.groupEnd();
return result;
} else {
//console.groupEnd();
return null;
}
},
getLineBreakIndex: function(pos, wrappingWidth) {
//console.group("[getLineBreakIndex]");
//console.log("pos:"+pos + ", text: \""+ this.text.text.replace(/\n/g, "_").substr(pos, 1) + "\"");
var bb = this.rafaelTextObject.getBBox();
var charNum = -1;
try {
var svgPoint = this.svgTextObject.getStartPositionOfChar(pos);
//var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.blue});
svgPoint.x = svgPoint.x + wrappingWidth;
//svgPoint.y = bb.y;
//console.log("svgPoint:", svgPoint);
//var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.red});
charNum = this.svgTextObject.getCharNumAtPosition(svgPoint);
} catch (e){
console.warn("getStartPositionOfChar error, pos:" + pos);
/*
var testPos = pos + 1;
if (testPos < this.limit) {
return testPos
}
*/
}
//console.log("charNum:", charNum);
if (charNum == -1) {
//console.groupEnd();
return this.text.getEndIndex(pos);
} else {
// When case there is new line between pos and charnum then use this new line
var newLineIndex = this.text.getEndIndex(pos);
if (newLineIndex < charNum ) {
console.log("newLineIndex <= charNum, newLineIndex:"+newLineIndex+", charNum:"+charNum, "\"" + this.text.text.substr(newLineIndex+1).replace(/\n/g, "?") + "\"");
//console.groupEnd();
return newLineIndex;
}
//var charAtMaxAdvance = this.text.text.substring(charNum, charNum + 1);
var charAtMaxAdvance = this.text.getCharAtPos(charNum);
//console.log("!!charAtMaxAdvance: " + charAtMaxAdvance);
//console.groupEnd();
return charNum;
}
},
getPosition: function() {
return this.pos;
}
};
\ No newline at end of file
... ...
/**
* Class to generate polyline
*
* @author Dmitry Farafonov
*/
var ANCHOR_TYPE= {
main: "main",
middle: "middle",
first: "first",
last: "last"
};
function Anchor(uuid, type, x, y) {
this.uuid = uuid;
this.x = x
this.y = y
this.type = (type == ANCHOR_TYPE.middle) ? ANCHOR_TYPE.middle : ANCHOR_TYPE.main;
};
Anchor.prototype = {
uuid: null,
x: 0,
y: 0,
type: ANCHOR_TYPE.main,
isFirst: false,
isLast: false,
ndex: 0,
typeIndex: 0
};
function Polyline(uuid, points, strokeWidth) {
/* Array on coordinates:
* points: [{x: 410, y: 110}, 1
* {x: 570, y: 110}, 1 2
* {x: 620, y: 240}, 2 3
* {x: 750, y: 270}, 3 4
* {x: 650, y: 370}]; 4
*/
this.points = points;
/*
* path for graph
* [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]]
*/
this.path = [];
this.anchors = [];
if (strokeWidth) this.strokeWidth = strokeWidth;
this.closePath = false;
this.init();
};
Polyline.prototype = {
id: null,
points: [],
path: [],
anchors: [],
strokeWidth: 1,
radius: 15,
showDetails: false,
element: null,
isDefaultConditionAvailable: false,
closePath: false,
init: function(points){
var linesCount = this.getLinesCount();
if (linesCount < 1)
return;
this.normalizeCoordinates();
// create anchors
this.pushAnchor(ANCHOR_TYPE.first, this.getLine(0).x1, this.getLine(0).y1);
for(var i = 1; i < linesCount; i++){
var line1 = this.getLine(i-1),
line2 = this.getLine(i);
//this.pushAnchor(ANCHOR_TYPE.middle, line1.x1 + line1.x2-line1.x1, line1.y1 + line1.y2-line1.y1);
this.pushAnchor(ANCHOR_TYPE.main, line1.x2, line1.y2);
//this.pushAnchor(ANCHOR_TYPE.middle, line2.x1 + line2.x2-line2.x1, line2.y1 + line2.y2-line2.y1);
}
this.pushAnchor(ANCHOR_TYPE.last, this.getLine(linesCount-1).x2, this.getLine(linesCount-1).y2);
this.rebuildPath();
},
normalizeCoordinates: function(){
for(var i=0; i < this.points.length; i++){
this.points[i].x = parseFloat(this.points[i].x);
this.points[i].y = parseFloat(this.points[i].y);
}
},
getLinesCount: function(){
return this.points.length-1;
},
_getLine: function(i){
return {x1: this.points[i].x, y1: this.points[i].y, x2: this.points[i+1].x, y2: this.points[i+1].y};
},
getLine: function(i){
var line = this._getLine(i);
line.angle = this.getLineAngle(i) ;
return line;
},
getLineAngle: function(i){
var line = this._getLine(i);
return Math.atan2(line.y2 - line.y1, line.x2 - line.x1);
},
getLineLengthX: function(i){
var line = this.getLine(i);
return (line.x2 - line.x1);
},
getLineLengthY: function(i){
var line = this.getLine(i);
return (line.y2 - line.y1);
},
getLineLength: function(i){
var line = this.getLine(i);
return Math.sqrt(Math.pow(this.getLineLengthX(i), 2) + Math.pow(this.getLineLengthY(i), 2));
},
getAnchors: function(){
//
// ????
return this.anchors;
},
getAnchorsCount: function(type){
if (!type)
return this.anchors.length;
else {
var count = 0;
for(var i=0; i < this.getAnchorsCount(); i++){
var anchor = this.anchors[i];
if (anchor.getType() == type) {
count++;
}
}
return count;
}
},
pushAnchor: function(type, x, y, index){
if (type == ANCHOR_TYPE.first) {
index = 0;
typeIndex = 0;
} else if (type == ANCHOR_TYPE.last) {
index = this.getAnchorsCount();
typeIndex = 0;
} else if (!index) {
index = this.anchors.length;
} else {
// anchors, , index
//var anchor = this.getAnchor()
for(var i=0; i < this.getAnchorsCount(); i++){
var anchor = this.anchors[i];
if (anchor.index > index) {
anchor.index++;
anchor.typeIndex++;
}
}
}
var anchor = new Anchor(this.id, ANCHOR_TYPE.main, x, y, index, typeIndex);
this.anchors.push(anchor);
},
getAnchor: function(position){
return this.anchors[position];
},
getAnchorByType: function(type, position){
if (type == ANCHOR_TYPE.first)
return this.anchors[0];
if (type == ANCHOR_TYPE.last)
return this.anchors[this.getAnchorsCount()-1];
for(var i=0; i < this.getAnchorsCount(); i++){
var anchor = this.anchors[i];
if (anchor.type == type) {
if( position == anchor.position)
return anchor;
}
}
return null;
},
addNewPoint: function(position, x, y){
//
for(var i = 0; i < this.getLinesCount(); i++){
var line = this.getLine(i);
if (x > line.x1 && x < line.x2 && y > line.y1 && y < line.y2) {
this.points.splice(i+1,0,{x: x, y: y});
break;
}
}
this.rebuildPath();
},
rebuildPath: function(){
var path = [];
for(var i = 0; i < this.getAnchorsCount(); i++){
var anchor = this.getAnchor(i);
var pathType = ""
if (i==0)
pathType = "M";
else
pathType = "L";
// TODO: save previous points and calculate new path just if points are updated, and then save currents values as previous
var targetX = anchor.x, targetY = anchor.y;
if (i>0 && i < this.getAnchorsCount()-1) {
// get new x,y
var cx = anchor.x, cy = anchor.y;
// pivot point of prev line
var AO = this.getLineLength(i-1);
if (AO < this.radius) {
AO = this.radius;
}
this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10));
//console.log("isDefaultConditionAvailable", this.isDefaultConditionAvailable);
var ED = this.getLineLengthY(i-1) * this.radius / AO;
var OD = this.getLineLengthX(i-1) * this.radius / AO;
targetX = anchor.x - OD;
targetY = anchor.y - ED;
if (AO < 2*this.radius && i>1) {
targetX = anchor.x - this.getLineLengthX(i-1)/2;
targetY = anchor.y - this.getLineLengthY(i-1)/2;;
}
// pivot point of next line
var AO = this.getLineLength(i);
if (AO < this.radius) {
AO = this.radius;
}
var ED = this.getLineLengthY(i) * this.radius / AO;
var OD = this.getLineLengthX(i) * this.radius / AO;
var nextSrcX = anchor.x + OD;
var nextSrcY = anchor.y + ED;
if (AO < 2*this.radius && i<this.getAnchorsCount()-2) {
nextSrcX = anchor.x + this.getLineLengthX(i)/2;
nextSrcY = anchor.y + this.getLineLengthY(i)/2;;
}
var dx0 = (cx - targetX) / 3,
dy0 = (cy - targetY) / 3,
ax = cx - dx0,
ay = cy - dy0,
dx1 = (cx - nextSrcX) / 3,
dy1 = (cy - nextSrcY) / 3,
bx = cx - dx1,
by = cy - dy1,
zx=nextSrcX, zy=nextSrcY;
if (this.showDetails) {
var c = ProcessDiagramCanvas.g.path("M"+targetX+","+targetY+"L"+ax+","+ay).attr({stroke: Color.get(255, 153, 51), "stroke-dasharray": "- "});
var c = ProcessDiagramCanvas.g.path("M"+nextSrcX+","+nextSrcY+"L"+bx+","+by).attr({stroke: Color.get(255, 153, 51), "stroke-dasharray": "- "});
var c = ProcessDiagramCanvas.g.ellipse(ax, ay, 2, 2).attr({stroke: Color.SlateGrey});
var c = ProcessDiagramCanvas.g.ellipse(bx, by, 2, 2).attr({stroke: Color.SlateGrey});
var c = ProcessDiagramCanvas.g.ellipse(cx, cy, this.radius, this.radius).attr({stroke: Color.Gainsboro});
var c = ProcessDiagramCanvas.g.ellipse(targetX, targetY, 2, 2).attr({fill: Color.red});
var c = ProcessDiagramCanvas.g.ellipse(nextSrcX, nextSrcY, 2, 2).attr({fill: Color.red});
}
} else if (i==1 && this.getAnchorsCount() == 2){
var AO = this.getLineLength(i-1);
if (AO < this.radius) {
AO = this.radius;
}
this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10));
//console.log("-- isDefaultConditionAvailable", this.isDefaultConditionAvailable);
}
// anti smoothing
if (this.strokeWidth%2 == 1) {
targetX += 0.5;
targetY += 0.5;
}
path.push([pathType, targetX, targetY]);
if (i>0 && i < this.getAnchorsCount()-1) {
path.push(["C", ax, ay, bx, by, zx, zy]);
}
}
if (this.closePath) {
console.log("closePath:", this.closePath);
path.push(["Z"]);
}
this.path = path;
},
transform: function(transformation){
this.element.transform(transformation);
},
attr: function(attrs){
//console.log("attrs: " +attrs, "", this.element);
// TODO: foreach and set each
this.element.attr(attrs);
}
};
function Polygone(points, strokeWidth) {
/* Array on coordinates:
* points: [{x: 410, y: 110}, 1
* {x: 570, y: 110}, 1 2
* {x: 620, y: 240}, 2 3
* {x: 750, y: 270}, 3 4
* {x: 650, y: 370}]; 4
*/
this.points = points;
/*
* path for graph
* [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]]
*/
this.path = [];
this.anchors = [];
if (strokeWidth) this.strokeWidth = strokeWidth;
this.closePath = true;
this.init();
};
/*
* Poligone is inherited from Poliline: draws closedPath of polyline
*/
var Foo = function () { };
Foo.prototype = Polyline.prototype;
Polygone.prototype = new Foo();
Polygone.prototype.rebuildPath = function(){
var path = [];
//console.log("Polygone rebuildPath");
for(var i = 0; i < this.getAnchorsCount(); i++){
var anchor = this.getAnchor(i);
var pathType = ""
if (i==0)
pathType = "M";
else
pathType = "L";
var targetX = anchor.x, targetY = anchor.y;
// anti smoothing
if (this.strokeWidth%2 == 1) {
targetX += 0.5;
targetY += 0.5;
}
path.push([pathType, targetX, targetY]);
}
if (this.closePath)
path.push(["Z"]);
this.path = path;
};
/*
Polygone.prototype.transform = function(transformation){
this.element.transform(transformation);
};
*/
\ No newline at end of file
... ...
/**
* Represents a canvas on which BPMN 2.0 constructs can be drawn.
*
* Some of the icons used are licenced under a Creative Commons Attribution 2.5
* License, see http://www.famfamfam.com/lab/icons/silk/
*
* @see ProcessDiagramGenerator
* @author (Java) Joram Barrez
* @author (Javascript) Dmitry Farafonov
*/
//Color.Cornsilk
var ARROW_HEAD_SIMPLE = "simple";
var ARROW_HEAD_EMPTY = "empty";
var ARROW_HEAD_FILL = "FILL";
var MULTILINE_VERTICAL_ALIGN_TOP = "top";
var MULTILINE_VERTICAL_ALIGN_MIDDLE = "middle";
var MULTILINE_VERTICAL_ALIGN_BOTTOM = "bottom";
var MULTILINE_HORIZONTAL_ALIGN_LEFT = "start";
var MULTILINE_HORIZONTAL_ALIGN_MIDDLE = "middle";
var MULTILINE_HORIZONTAL_ALIGN_RIGHT = "end";
// Predefined sized
var TEXT_PADDING = 3;
var ARROW_WIDTH = 4;
var CONDITIONAL_INDICATOR_WIDTH = 16;
var MARKER_WIDTH = 12;
var ANNOTATION_TEXT_PADDING = 7;
// Colors
var TASK_COLOR = Color.OldLace; // original: Color.get(255, 255, 204);
var TASK_STROKE_COLOR = Color.black; /*Color.SlateGrey; */
//var EXPANDED_SUBPROCESS_ATTRS = Color.black; /*Color.SlateGrey; */
var BOUNDARY_EVENT_COLOR = Color.white;
var CONDITIONAL_INDICATOR_COLOR = Color.get(255, 255, 255);
var HIGHLIGHT_COLOR = Color.Firebrick1;
//var SEQUENCEFLOW_COLOR = Color.DimGrey;
var SEQUENCEFLOW_COLOR = Color.black;
var CATCHING_EVENT_COLOR = Color.black; /* Color.SlateGrey; */
var START_EVENT_COLOR = Color.get(251,251,251);
var START_EVENT_STROKE_COLOR = Color.black; /* Color.SlateGrey; */
var END_EVENT_COLOR = Color.get(251,251,251);
//var END_EVENT_STROKE_COLOR = Color.black;
var NONE_END_EVENT_COLOR = Color.Firebrick4;
var NONE_END_EVENT_STROKE_COLOR = Color.Firebrick4;
var ERROR_END_EVENT_COLOR = Color.Firebrick;
var ERROR_END_EVENT_STROKE_COLOR = Color.Firebrick;
//var LABEL_COLOR = Color.get(112, 146, 190);
var LABEL_COLOR = Color.get(72, 106, 150);
// Fonts
var NORMAL_FONT = {font: "10px Arial", opacity: 1, fill: Color.black};
var LABEL_FONT = {font: "11px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR};
var LABEL_FONT_SMOOTH = {font: "10px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR, stroke: LABEL_COLOR, "stroke-width":.4};
var TASK_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
var TASK_FONT_SMOOTH = {font: "11px Arial", opacity: 1, fill: Color.black, stroke: LABEL_COLOR, "stroke-width":.4};
var POOL_LANE_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
var EXPANDED_SUBPROCESS_FONT = {font: "11px Arial", opacity: 1, fill: Color.black};
// Strokes
var NORMAL_STROKE = 1;
var SEQUENCEFLOW_STROKE = 1.5;
var SEQUENCEFLOW_HIGHLIGHT_STROKE = 2;
var THICK_TASK_BORDER_STROKE = 2.5;
var GATEWAY_TYPE_STROKE = 3.2;
var END_EVENT_STROKE = NORMAL_STROKE+2;
var MULTI_INSTANCE_STROKE = 1.3;
var EVENT_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "stroke-dasharray": ". "};
//var EXPANDED_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "fill": Color.FloralWhite};
var EXPANDED_SUBPROCESS_ATTRS = {"stroke": Color.black, "stroke-width": NORMAL_STROKE, "fill": Color.WhiteSmoke};
var NON_INTERRUPTING_EVENT_STROKE = "- ";
var TASK_CORNER_ROUND = 10;
var EXPANDED_SUBPROCESS_CORNER_ROUND = 10;
// icons
var ICON_SIZE = 16;
var ICON_PADDING = 4;
var USERTASK_IMAGE = "images/deployer/user.png";
var SCRIPTTASK_IMAGE = "images/deployer/script.png";
var SERVICETASK_IMAGE = "images/deployer/service.png";
var RECEIVETASK_IMAGE = "images/deployer/receive.png";
var SENDTASK_IMAGE = "images/deployer/send.png";
var MANUALTASK_IMAGE = "images/deployer/manual.png";
var BUSINESS_RULE_TASK_IMAGE = "images/deployer/business_rule.png";
var TIMER_IMAGE = "images/deployer/timer.png";
var MESSAGE_CATCH_IMAGE = "images/deployer/message_catch.png";
var MESSAGE_THROW_IMAGE = "images/deployer/message_throw.png";
var ERROR_THROW_IMAGE = "images/deployer/error_throw.png";
var ERROR_CATCH_IMAGE = "images/deployer/error_catch.png";
var SIGNAL_CATCH_IMAGE = "images/deployer/signal_catch.png";
var SIGNAL_THROW_IMAGE = "images/deployer/signal_throw.png";
var MULTIPLE_CATCH_IMAGE = "images/deployer/multiple_catch.png";
var ObjectType = {
ELLIPSE: "ellipse",
FLOW: "flow",
RECT: "rect",
RHOMBUS: "rhombus"
};
function OBJ(type){
this.c = null;
this.type = type;
this.nestedElements = [];
};
OBJ.prototype = {
};
var CONNECTION_TYPE = {
SEQUENCE_FLOW: "sequence_flow",
MESSAGE_FLOW: "message_flow",
ASSOCIATION: "association"
};
var ProcessDiagramCanvas = function(){
};
ProcessDiagramCanvas.prototype = {
// var DefaultProcessDiagramCanvas = {
canvasHolder: "holder",
canvasWidth: 0,
canvasHeight: 0,
paint: Color.black,
strokeWidth: 0,
font: null,
fontSmoothing: null,
g: null,
ninjaPaper: null,
objects: [],
processDefinitionId: null,
activity: null,
frame: null,
debug: false,
/**
* Creates an empty canvas with given width and height.
*/
init: function(width, height, processDefinitionId){
this.canvasWidth = width;
this.canvasHeight = height;
// TODO: name it as 'canvasName'
if (!processDefinitionId)
processDefinitionId = "holder";
this.processDefinitionId = processDefinitionId;
this.canvasHolder = this.processDefinitionId;
var h = document.getElementById(this.canvasHolder);
if (!h) return;
h.style.width = this.canvasWidth;
h.style.height = this.canvasHeight;
this.g = Raphael(this.canvasHolder);
this.g.clear();
//this.setPaint(Color.DimGrey);
this.setPaint(Color.black);
//this.setPaint(Color.white);
this.setStroke(NORMAL_STROKE);
//this.setFont("Arial", 11);
this.setFont(NORMAL_FONT);
//this.font = this.g.getFont("Arial");
this.fontSmoothing = true;
// ninja!
var RaphaelOriginal = Raphael;
this.ninjaPaper =(function (local_raphael) {
var paper = local_raphael(1, 1, 1, 1, processDefinitionId);
return paper;
})(Raphael.ninja());
Raphael = RaphaelOriginal;
},
setPaint: function(color){
this.paint = color;
},
getPaint: function(){
return this.paint;
},
setStroke: function(strokeWidth){
this.strokeWidth = strokeWidth;
},
getStroke: function(){
return this.strokeWidth;
},
/*
setFont: function(family, weight, style, stretch){
this.font = this.g.getFont(family, weight);
},
*/
setFont: function(font){
this.font = font;
},
getFont: function(){
return this.font;
},
drawShaddow: function(object){
var border = object.clone();
border.attr({"stroke-width": this.strokeWidth + 6,
"stroke": Color.white,
"fill": Color.white,
"opacity": 1,
"stroke-dasharray":null});
//border.toBack();
object.toFront();
return border;
},
setConextObject: function(obj){
this.contextObject = obj;
},
getConextObject: function(){
return this.contextObject;
},
setContextToElement: function(object){
var contextObject = this.getConextObject();
object.id = contextObject.id;
object.data("contextObject", contextObject);
},
onClick: function(event, instance, element){
var overlay = element;
var set = overlay.data("set");
var contextObject = overlay.data("contextObject");
//console.log("["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.click) {
var args = [instance, element, contextObject];
ProcessDiagramGenerator.options.on.click.apply(event, args);
}
},
onRightClick: function(event, instance, element){
var overlay = element;
var set = overlay.data("set");
var contextObject = overlay.data("contextObject");
//console.log("[%s], activityId: %s (RIGHTCLICK)", contextObject.getProperty("type"), contextObject.getId());
if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.rightClick) {
var args = [instance, element, contextObject];
ProcessDiagramGenerator.options.on.rightClick.apply(event, args);
}
},
onHoverIn: function(event, instance, element){
var overlay = element;
var set = overlay.data("set");
var contextObject = overlay.data("contextObject");
var border = instance.g.getById(contextObject.id + "_border");
border.attr("opacity", 0.3);
// provide callback
if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.over) {
var args = [instance, element, contextObject];
ProcessDiagramGenerator.options.on.over.apply(event, args);
}
},
onHoverOut: function(event, instance, element){
var overlay = element;
var set = overlay.data("set");
var contextObject = overlay.data("contextObject");
var border = instance.g.getById(contextObject.id + "_border");
border.attr("opacity", 0.0);
// provide callback
if (ProcessDiagramGenerator.options && ProcessDiagramGenerator.options.on && ProcessDiagramGenerator.options.on.out) {
var args = [instance, element, contextObject];
ProcessDiagramGenerator.options.on.out.apply(event, args);
}
},
addHandlers: function(set, x, y, width, height, type){
var contextObject = this.getConextObject();
var cx = x+width/2, cy = y+height/2;
if (type == "event") {
var border = this.g.ellipse(cx, cy, width/2+4, height/2+4);
var overlay = this.g.ellipse(cx, cy, width/2, height/2);
} else if (type == "gateway") {
// rhombus
var border = this.g.path( "M" + (x - 4) + " " + (y + (height / 2)) +
"L" + (x + (width / 2)) + " " + (y + height + 4) +
"L" + (x + width + 4) + " " + (y + (height / 2)) +
"L" + (x + (width / 2)) + " " + (y - 4) +
"z" );
var overlay = this.g.path( "M" + x + " " + (y + (height / 2)) +
"L" + (x + (width / 2)) + " " + (y + height) +
"L" + (x + width) + " " + (y + (height / 2)) +
"L" + (x + (width / 2)) + " " + y +
"z" );
} else if (type == "task") {
var border = this.g.rect(x - 4, y - 4, width+9, height+9, TASK_CORNER_ROUND+4);
var overlay = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
}
border.attr({stroke: Color.get(132,112,255)/*Color.Tan1*/,"stroke-width": 4, opacity: 0.0});
border.id = contextObject.id + "_border";
set.push(border);
overlay.attr({stroke: Color.Orange,"stroke-width": 3, fill: Color.get(0,0,0), opacity: 0.0, cursor: "hand"});
overlay.data("set",set);
overlay.id = contextObject.id;
overlay.data("contextObject",contextObject);
var instance = this;
overlay.mousedown(function(event){if (event.button == 2) instance.onRightClick(event, instance, this);});
overlay.click(function(event){instance.onClick(event, instance, this);});
overlay.hover(function(event){instance.onHoverIn(event, instance, this);}, function(event){instance.onHoverOut(event, instance, this);});
},
/*
* Start Events:
*
* drawNoneStartEvent
* drawTimerStartEvent
* drawMessageStartEvent
* drawErrorStartEvent
* drawSignalStartEvent
* _drawStartEventImage
* _drawStartEvent
*/
drawNoneStartEvent: function(x, y, width, height) {
this.g.setStart();
var isInterrupting = undefined;
this._drawStartEvent(x, y, width, height, isInterrupting, null);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawTimerStartEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawStartEvent(x, y, width, height, isInterrupting, null);
var cx = x + width/2 - this.getStroke()/4;
var cy = y + height/2 - this.getStroke()/4;
var w = width*.9;// - this.getStroke()*2;
var h = height*.9;// - this.getStroke()*2;
this._drawClock(cx, cy, w, h);
if (this.gebug)
var center = this.g.ellipse(cx, cy, 3, 3).attr({stroke:"none", fill: Color.green});
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawMessageStartEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawStartEvent(x, y, width, height, isInterrupting, null);
this._drawStartEventImage(x, y, width, height, MESSAGE_CATCH_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawErrorStartEvent: function(x, y, width, height, name) {
this.g.setStart();
var isInterrupting = undefined;
this._drawStartEvent(x, y, width, height, isInterrupting);
this._drawStartEventImage(x, y, width, height, ERROR_CATCH_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawSignalStartEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawStartEvent(x, y, width, height, isInterrupting, null);
this._drawStartEventImage(x, y, width, height, SIGNAL_CATCH_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawMultipleStartEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawStartEvent(x, y, width, height, isInterrupting, null);
var cx = x + width/2 - this.getStroke()/4;
var cy = y + height/2 - this.getStroke()/4;
var w = width*1;
var h = height*1;
this._drawPentagon(cx, cy, w, h);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
_drawStartEventImage: function(x, y, width, height, image){
var cx = x + width/2 - this.getStroke()/2;
var cy = y + height/2 - this.getStroke()/2;
var w = width*.65;// - this.getStroke()*2;
var h = height*.65;// - this.getStroke()*2;
var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
},
_drawStartEvent: function(x, y, width, height, isInterrupting){
var originalPaint = this.getPaint();
if (typeof(START_EVENT_STROKE_COLOR) != "undefined")
this.setPaint(START_EVENT_STROKE_COLOR);
width -= this.strokeWidth / 2;
height -= this.strokeWidth / 2;
x = x + width/2;
y = y + height/2;
var circle = this.g.ellipse(x, y, width/2, height/2);
circle.attr({"stroke-width": this.strokeWidth,
"stroke": this.paint,
//"stroke": START_EVENT_STROKE_COLOR,
"fill": START_EVENT_COLOR});
// white shaddow
this.drawShaddow(circle);
if (isInterrupting!=null && isInterrupting!=undefined && !isInterrupting)
circle.attr({"stroke-dasharray": NON_INTERRUPTING_EVENT_STROKE});
this.setContextToElement(circle);
this.setPaint(originalPaint);
},
/*
* End Events:
*
* drawNoneEndEvent
* drawErrorEndEvent
* drawMessageEndEvent
* drawSignalEndEvent
* drawMultipleEndEvent
* _drawEndEventImage
* _drawNoneEndEvent
*/
drawNoneEndEvent: function(x, y, width, height) {
this.g.setStart();
this._drawNoneEndEvent(x, y, width, height, null, "noneEndEvent");
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawErrorEndEvent: function(x, y, width, height) {
this.g.setStart();
var type = "errorEndEvent";
this._drawNoneEndEvent(x, y, width, height, null, type);
this._drawEndEventImage(x, y, width, height, ERROR_THROW_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawMessageEndEvent: function(x, y, width, height, name) {
this.g.setStart();
var type = "errorEndEvent";
this._drawNoneEndEvent(x, y, width, height, null, type);
this._drawEndEventImage(x, y, width, height, MESSAGE_THROW_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawSignalEndEvent: function(x, y, width, height, name) {
this.g.setStart();
var type = "errorEndEvent";
this._drawNoneEndEvent(x, y, width, height, null, type);
this._drawEndEventImage(x, y, width, height, SIGNAL_THROW_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawMultipleEndEvent: function(x, y, width, height, name) {
this.g.setStart();
var type = "errorEndEvent";
this._drawNoneEndEvent(x, y, width, height, null, type);
var cx = x + width/2;// - this.getStroke();
var cy = y + height/2;// - this.getStroke();
var w = width*1;
var h = height*1;
var filled = true;
this._drawPentagon(cx, cy, w, h, filled);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawTerminateEndEvent: function(x, y, width, height) {
this.g.setStart();
var type = "errorEndEvent";
this._drawNoneEndEvent(x, y, width, height, null, type);
var cx = x + width/2;// - this.getStroke()/2;
var cy = y + height/2;// - this.getStroke()/2;
var w = width/2*.6;
var h = height/2*.6;
var circle = this.g.ellipse(cx, cy, w, h).attr({fill: Color.black});
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
_drawEndEventImage: function(x, y, width, height, image){
var cx = x + width/2 - this.getStroke()/2;
var cy = y + height/2 - this.getStroke()/2;
var w = width*.65;
var h = height*.65;
var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
},
_drawNoneEndEvent: function(x, y, width, height, image, type) {
var originalPaint = this.getPaint();
if (typeof(CATCHING_EVENT_COLOR) != "undefined")
this.setPaint(CATCHING_EVENT_COLOR);
var strokeColor = this.getPaint();
var fillColor = this.getPaint();
if (type == "errorEndEvent") {
strokeColor = ERROR_END_EVENT_STROKE_COLOR;
fillColor = ERROR_END_EVENT_COLOR;
} else if (type == "noneEndEvent") {
strokeColor = NONE_END_EVENT_STROKE_COLOR;
fillColor = NONE_END_EVENT_COLOR;
} else
// event circles
width -= this.strokeWidth / 2;
height -= this.strokeWidth / 2;
x = x + width/2;// + this.strokeWidth/2;
y = y + width/2;// + this.strokeWidth/2;
// outerCircle
var outerCircle = this.g.ellipse(x, y, width/2, height/2);
// white shaddow
var shaddow = this.drawShaddow(outerCircle);
outerCircle.attr({"stroke-width": this.strokeWidth,
"stroke": strokeColor,
"fill": fillColor});
var innerCircleX = x;
var innerCircleY = y;
var innerCircleWidth = width/2 - 2;
var innerCircleHeight = height/2 - 2;
var innerCircle = this.g.ellipse(innerCircleX, innerCircleY, innerCircleWidth, innerCircleHeight);
innerCircle.attr({"stroke-width": this.strokeWidth,
"stroke": strokeColor,
"fill": Color.white});
// TODO: implement it
//var originalPaint = this.getPaint();
//this.g.setPaint(BOUNDARY_EVENT_COLOR);
this.setPaint(originalPaint);
},
/*
* Catching Events:
*
* drawCatchingTimerEvent
* drawCatchingErrorEvent
* drawCatchingSignalEvent
* drawCatchingMessageEvent
* drawCatchingMultipleEvent
* _drawCatchingEventImage
* _drawCatchingEvent
*/
drawCatchingTimerEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
var innerCircleWidth = width - 4;
var innerCircleHeight = height - 4;
var cx = x + width/2 - this.getStroke()/4;
var cy = y + height/2 - this.getStroke()/4;
var w = innerCircleWidth*.9;// - this.getStroke()*2;
var h = innerCircleHeight*.9;// - this.getStroke()*2;
this._drawClock(cx, cy, w, h);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawCatchingErrorEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
this._drawCatchingEventImage(x, y, width, height, ERROR_CATCH_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawCatchingSignalEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
this._drawCatchingEventImage(x, y, width, height, SIGNAL_CATCH_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawCatchingMessageEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
this._drawCatchingEventImage(x, y, width, height, MESSAGE_CATCH_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawCatchingMultipleEvent: function(x, y, width, height, isInterrupting, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, isInterrupting, null);
var cx = x + width/2 - this.getStroke();
var cy = y + height/2 - this.getStroke();
var w = width*.9;
var h = height*.9;
this._drawPentagon(cx, cy, w, h);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
_drawCatchingEventImage: function(x, y, width, height, image){
var innerCircleWidth = width - 4;
var innerCircleHeight = height - 4;
var cx = x + width/2 - this.getStroke()/2;
var cy = y + height/2 - this.getStroke()/2;
var w = innerCircleWidth*.6;// - this.getStroke()*2;
var h = innerCircleHeight*.6;// - this.getStroke()*2;
var img = this.g.image(image, cx-w/2, cy-h/2, w, h);
},
_drawCatchingEvent: function(x, y, width, height, isInterrupting, image) {
var originalPaint = this.getPaint();
if (typeof(CATCHING_EVENT_COLOR) != "undefined")
this.setPaint(CATCHING_EVENT_COLOR);
// event circles
width -= this.strokeWidth / 2;
height -= this.strokeWidth / 2;
x = x + width/2;// + this.strokeWidth/2;
y = y + width/2;// + this.strokeWidth/2;
// outerCircle
var outerCircle = this.g.ellipse(x, y, width/2, height/2);
// white shaddow
var shaddow = this.drawShaddow(outerCircle);
//console.log("isInterrupting: " + isInterrupting, "x:" , x, "y:",y);
if (isInterrupting!=null && isInterrupting!=undefined && !isInterrupting)
outerCircle.attr({"stroke-dasharray": NON_INTERRUPTING_EVENT_STROKE});
outerCircle.attr({"stroke-width": this.strokeWidth,
"stroke": this.getPaint(),
"fill": BOUNDARY_EVENT_COLOR});
var innerCircleX = x;
var innerCircleY = y;
var innerCircleRadiusX = width/2 - 4;
var innerCircleRadiusY = height/2 - 4;
var innerCircle = this.g.ellipse(innerCircleX, innerCircleY, innerCircleRadiusX, innerCircleRadiusY);
innerCircle.attr({"stroke-width": this.strokeWidth,
"stroke": this.getPaint()});
if (image) {
var imageWidth = imageHeight = innerCircleRadiusX*1.2 + this.getStroke()*2;
var imageX = innerCircleX-imageWidth/2 - this.strokeWidth/2;
var imageY = innerCircleY-imageWidth/2 - this.strokeWidth/2;
var img = this.g.image(image, imageX, imageY, imageWidth, imageHeight);
}
this.setPaint(originalPaint);
var set = this.g.set();
set.push(outerCircle, innerCircle, shaddow);
this.setContextToElement(outerCircle);
// TODO: add shapes to set
/*
var st = this.g.set();
st.push(
this.g.ellipse(innerCircleX, innerCircleY, 2, 2),
this.g.ellipse(imageX, imageY, 2, 2)
);
st.attr({fill: "red", "stroke-width":0});
*/
},
/*
* Catching Events:
*
* drawThrowingNoneEvent
* drawThrowingSignalEvent
* drawThrowingMessageEvent
* drawThrowingMultipleEvent
*/
drawThrowingNoneEvent: function(x, y, width, height, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, null, null);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawThrowingSignalEvent: function(x, y, width, height, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, null, null);
this._drawCatchingEventImage(x, y, width, height, SIGNAL_THROW_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawThrowingMessageEvent: function(x, y, width, height, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, null, null);
this._drawCatchingEventImage(x, y, width, height, MESSAGE_THROW_IMAGE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
drawThrowingMultipleEvent: function(x, y, width, height, name) {
this.g.setStart();
this._drawCatchingEvent(x, y, width, height, null, null);
var cx = x + width/2 - this.getStroke();
var cy = y + height/2 - this.getStroke();
var w = width*.9;
var h = height*.9;
var filled = true;
this._drawPentagon(cx, cy, w, h, filled);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "event");
},
/*
* Draw flows:
*
* _connectFlowToActivity
* _drawFlow
* _drawDefaultSequenceFlowIndicator
* drawSequenceflow
* drawMessageflow
* drawAssociation
* _drawCircleTail
* _drawArrowHead
* _drawConditionalSequenceFlowIndicator
* drawSequenceflowWithoutArrow
*/
_connectFlowToActivity: function(sourceActivityId, destinationActivityId, waypoints){
var sourceActivity = this.g.getById(sourceActivityId);
var destinationActivity = this.g.getById(destinationActivityId);
if (sourceActivity == null || destinationActivity == null) {
if (sourceActivity == null)
console.error("source activity["+sourceActivityId+"] not found");
else
console.error("destination activity["+destinationActivityId+"] not found");
return null;
}
var bbSourceActivity = sourceActivity.getBBox()
var bbDestinationActivity = destinationActivity.getBBox()
var path = [];
var newWaypoints = [];
for(var i = 0; i < waypoints.length; i++){
var pathType = ""
if (i==0)
pathType = "M";
else
pathType = "L";
path.push([pathType, waypoints[i].x, waypoints[i].y]);
newWaypoints.push({x:waypoints[i].x, y:waypoints[i].y});
}
var ninjaPathSourceActivity = this.ninjaPaper.path(sourceActivity.realPath);
var ninjaPathDestinationActivity = this.ninjaPaper.path(destinationActivity.realPath);
var ninjaBBSourceActivity = ninjaPathSourceActivity.getBBox();
var ninjaBBDestinationActivity = ninjaPathDestinationActivity.getBBox();
// set target of the flow to the center of the taskObject
var newPath = path;
var originalSource = {x: newPath[0][1], y: newPath[0][2]};
var originalTarget = {x: newPath[newPath.length-1][1], y: newPath[newPath.length-1][2]};
newPath[0][1] = ninjaBBSourceActivity.x + (ninjaBBSourceActivity.x2 - ninjaBBSourceActivity.x ) / 2;
newPath[0][2] = ninjaBBSourceActivity.y + (ninjaBBSourceActivity.y2 - ninjaBBSourceActivity.y ) / 2;
newPath[newPath.length-1][1] = ninjaBBDestinationActivity.x + (ninjaBBDestinationActivity.x2 - ninjaBBDestinationActivity.x ) / 2;
newPath[newPath.length-1][2] = ninjaBBDestinationActivity.y + (ninjaBBDestinationActivity.y2 - ninjaBBDestinationActivity.y ) / 2;
var ninjaPathFlowObject = this.ninjaPaper.path(newPath);
var ninjaBBFlowObject = ninjaPathFlowObject.getBBox();
var intersectionsSource = Raphael.pathIntersection(ninjaPathSourceActivity.realPath, ninjaPathFlowObject.realPath);
var intersectionsDestination = Raphael.pathIntersection(ninjaPathDestinationActivity.realPath, ninjaPathFlowObject.realPath);
var intersectionSource = intersectionsSource.pop();
var intersectionDestination = intersectionsDestination.pop();
if (intersectionSource != undefined) {
if (this.gebug) {
var diameter = 5;
var dotOriginal = this.g.ellipse(originalSource.x, originalSource.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Pink});
var dot = this.g.ellipse(intersectionSource.x, intersectionSource.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Green});
}
newWaypoints[0].x = intersectionSource.x;
newWaypoints[0].y = intersectionSource.y;
}
if (intersectionDestination != undefined) {
if (this.gebug) {
var diameter = 5;
var dotOriginal = this.g.ellipse(originalTarget.x, originalTarget.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Red});
var dot = this.g.ellipse(intersectionDestination.x, intersectionDestination.y, diameter, diameter).attr({"fill": Color.white, "stroke": Color.Blue});
}
newWaypoints[newWaypoints.length-1].x = intersectionDestination.x;
newWaypoints[newWaypoints.length-1].y = intersectionDestination.y;
}
this.ninjaPaper.clear();
return newWaypoints;
},
_drawFlow: function(waypoints, conditional, isDefault, highLighted, withArrowHead, connectionType){
var originalPaint = this.getPaint();
var originalStroke = this.getStroke();
this.setPaint(SEQUENCEFLOW_COLOR);
this.setStroke(SEQUENCEFLOW_STROKE);
if (highLighted) {
this.setPaint(HIGHLIGHT_COLOR);
this.setStroke(SEQUENCEFLOW_HIGHLIGHT_STROKE);
}
// TODO: generate polylineId or do something!!
var uuid = Raphael.createUUID();
var contextObject = this.getConextObject();
var newWaypoints = waypoints;
if (contextObject) {
var newWaypoints = this._connectFlowToActivity(contextObject.sourceActivityId, contextObject.destinationActivityId, waypoints);
if (!newWaypoints) {
console.error("Error draw flow from '"+contextObject.sourceActivityId+"' to '"+contextObject.destinationActivityId+"' ");
return;
}
}
var polyline = new Polyline(uuid, newWaypoints, this.getStroke());
//var polyline = new Polyline(waypoints, 3);
polyline.element = this.g.path(polyline.path);
polyline.element.attr("stroke-width", this.getStroke());
polyline.element.attr("stroke", this.getPaint());
if (contextObject) {
polyline.element.id = contextObject.id;
polyline.element.data("contextObject", contextObject);
} else {
polyline.element.id = uuid;
}
/*
polyline.element.mouseover(function(){
this.attr({"stroke-width": NORMAL_STROKE + 2});
}).mouseout(function(){
this.attr({"stroke-width": NORMAL_STROKE});
});
*/
var last = polyline.getAnchorsCount()-1;
var x = polyline.getAnchor(last).x;
var y = polyline.getAnchor(last).y;
//var c = this.g.ellipse(x, y, 5, 5);
var lastLineIndex = polyline.getLinesCount()-1;
var line = polyline.getLine(lastLineIndex);
var firstLine = polyline.getLine(0);
var arrowHead = null,
circleTail = null,
defaultSequenceFlowIndicator = null,
conditionalSequenceFlowIndicator = null;
if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW) {
circleTail = this._drawCircleTail(firstLine, connectionType);
}
if(withArrowHead)
arrowHead = this._drawArrowHead(line, connectionType);
//console.log("isDefault: ", isDefault, ", isDefaultConditionAvailable: ", polyline.isDefaultConditionAvailable);
if (isDefault && polyline.isDefaultConditionAvailable) {
//var angle = polyline.getLineAngle(0);
//console.log("firstLine", firstLine);
defaultSequenceFlowIndicator = this._drawDefaultSequenceFlowIndicator(firstLine);
}
if (conditional) {
conditionalSequenceFlowIndicator = this._drawConditionalSequenceFlowIndicator(firstLine);
}
// draw flow name
var flowName = contextObject.name;
if (flowName) {
var xPointArray = contextObject.xPointArray;
var yPointArray = contextObject.yPointArray;
var textX = xPointArray[0] < xPointArray[1] ? xPointArray[0] : xPointArray[1];
var textY = yPointArray[0] < yPointArray[1] ? yPointArray[1] : yPointArray[0];
// fix xy
textX += 20;
textY -= 10;
this.g.text(textX, textY, flowName).attr(LABEL_FONT);
}
var st = this.g.set();
st.push(polyline.element, arrowHead, circleTail, conditionalSequenceFlowIndicator);
polyline.element.data("set", st);
polyline.element.data("withArrowHead", withArrowHead);
var polyCloneAttrNormal = {"stroke-width": this.getStroke() + 5, stroke: Color.get(132,112,255), opacity: 0.0, cursor: "hand"};
var polyClone = st.clone().attr(polyCloneAttrNormal).hover(function () {
//if (polyLine.data("isSelected")) return;
polyClone.attr({opacity: 0.2});
}, function () {
//if (polyLine.data("isSelected")) return;
polyClone.attr({opacity: 0.0});
});
polyClone.data("objectId", polyline.element.id);
polyClone.click(function(){
var instance = this;
var objectId = instance.data("objectId");
var object = this.paper.getById(objectId);
var contextObject = object.data("contextObject");
if (contextObject) {
console.log("[flow], objectId: " + object.id +", flow: " + contextObject.flow);
ProcessDiagramGenerator.showFlowInfo(contextObject);
}
}).dblclick(function(){
console.log("!!! DOUBLE CLICK !!!");
}).hover(function (mouseEvent) {
var instance = this;
var objectId = instance.data("objectId");
var object = this.paper.getById(objectId);
var contextObject = object.data("contextObject");
if (contextObject)
ProcessDiagramGenerator.showFlowInfo(contextObject);
});
polyClone.data("parentId", uuid);
if (!connectionType || connectionType == CONNECTION_TYPE.SEQUENCE_FLOW)
polyline.element.attr("stroke-width", this.getStroke());
else if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW)
polyline.element.attr({"stroke-dasharray": "--"});
else if (connectionType == CONNECTION_TYPE.ASSOCIATION)
polyline.element.attr({"stroke-dasharray": ". "});
this.setPaint(originalPaint);
this.setStroke(originalStroke);
},
_drawDefaultSequenceFlowIndicator: function(line) {
//console.log("line: ", line);
var len = 10; c = len/2, f = 8;
var defaultIndicator = this.g.path("M" + (-c) + " " + 0 + "L" + (c) + " " + 0);
defaultIndicator.attr("stroke-width", this.getStroke()+0);
defaultIndicator.attr("stroke", this.getPaint());
var cosAngle = Math.cos((line.angle));
var sinAngle = Math.sin((line.angle));
var dx = f * cosAngle;
var dy = f * sinAngle;
var x1 = line.x1 + dx + 0*c*cosAngle;
var y1 = line.y1 + dy + 0*c*sinAngle;
defaultIndicator.transform("t" + (x1) + "," + (y1) + "");
defaultIndicator.transform("...r" + Raphael.deg(line.angle - 3*Math.PI / 4) + " " + 0 + " " + 0);
/*
var c0 = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Blue});
c0.transform("t" + (line.x1) + "," + (line.y1) + "");
var center = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Red});
center.transform("t" + (line.x1+dx) + "," + (line.y1+dy) + "");
*/
return defaultIndicator;
},
drawSequenceflow: function(waypoints, conditional, isDefault, highLighted) {
var withArrowHead = true;
this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW);
},
drawMessageflow: function(waypoints, highLighted) {
var withArrowHead = true;
var conditional=isDefault=false;
this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.MESSAGE_FLOW);
},
drawAssociation: function(waypoints, withArrowHead, highLighted) {
var withArrowHead = withArrowHead;
var conditional=isDefault=false;
this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.ASSOCIATION);
},
_drawCircleTail: function(line, connectionType){
var diameter = ARROW_WIDTH/2*1.5;
// anti smoothing
if (this.strokeWidth%2 == 1)
line.x1 += .5, line.y1 += .5;
var circleTail = this.g.ellipse(line.x1, line.y1, diameter, diameter);
circleTail.attr("fill", Color.white);
circleTail.attr("stroke", this.getPaint());
return circleTail;
},
_drawArrowHead: function(line, connectionType){
var doubleArrowWidth = 2 * ARROW_WIDTH;
if (connectionType == CONNECTION_TYPE.ASSOCIATION)
var arrowHead = this.g.path("M-" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "L 0 0 L" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth);
else
var arrowHead = this.g.path("M0 0L-" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "L" + (ARROW_WIDTH/2+.5) + " -" + doubleArrowWidth + "z");
//arrowHead.transform("t" + 0 + ",-" + this.getStroke() + "");
// anti smoothing
if (this.strokeWidth%2 == 1)
line.x2 += .5, line.y2 += .5;
arrowHead.transform("t" + line.x2 + "," + line.y2 + "");
arrowHead.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
if (!connectionType || connectionType == CONNECTION_TYPE.SEQUENCE_FLOW)
arrowHead.attr("fill", this.getPaint());
else if (connectionType == CONNECTION_TYPE.MESSAGE_FLOW)
arrowHead.attr("fill", Color.white);
arrowHead.attr("stroke-width", this.getStroke());
arrowHead.attr("stroke", this.getPaint());
return arrowHead;
},
/*
drawArrowHead2: function(srcX, srcY, targetX, targetY) {
var doubleArrowWidth = 2 * ARROW_WIDTH;
//var arrowHead = this.g.path("M-" + ARROW_WIDTH/2 + " -" + doubleArrowWidth + "L0 0" + "L" + ARROW_WIDTH/2 + " -" + doubleArrowWidth + "z");
var arrowHead = this.g.path("M0 0L-" + ARROW_WIDTH/1.5 + " -" + doubleArrowWidth + "L" + ARROW_WIDTH/1.5 + " -" + doubleArrowWidth + "z");
//var c = DefaultProcessDiagramCanvas.g.ellipse(0, 0, 3, 3);
//c.transform("t"+targetX+","+targetY+"");
var angle = Math.atan2(targetY - srcY, targetX - srcX);
arrowHead.transform("t"+targetX+","+targetY+"");
arrowHead.transform("...r" + Raphael.deg(angle - Math.PI / 2) + " "+0+" "+0);
//console.log(arrowHead.transform());
//console.log("--> " + Raphael.deg(angle - Math.PI / 2));
arrowHead.attr("fill", this.getPaint());
arrowHead.attr("stroke", this.getPaint());
/ *
// shaddow
var c0 = arrowHead.clone();
c0.transform("...t-1 1");
c0.attr("stroke-width", this.strokeWidth);
c0.attr("stroke", Color.black);
c0.attr("opacity", 0.15);
c0.toBack();
* /
},
*/
_drawConditionalSequenceFlowIndicator: function(line){
var horizontal = (CONDITIONAL_INDICATOR_WIDTH * 0.7);
var halfOfHorizontal = horizontal / 2;
var halfOfVertical = CONDITIONAL_INDICATOR_WIDTH / 2;
var uuid = null;
var waypoints = [{x: 0, y: 0},
{x: -halfOfHorizontal, y: halfOfVertical},
{x: 0, y: CONDITIONAL_INDICATOR_WIDTH},
{x: halfOfHorizontal, y: halfOfVertical}];
/*
var polyline = new Polyline(uuid, waypoints, this.getStroke());
polyline.element = this.g.path(polyline.path);
polyline.element.attr("stroke-width", this.getStroke());
polyline.element.attr("stroke", this.getPaint());
polyline.element.id = uuid;
*/
var polygone = new Polygone(waypoints, this.getStroke());
polygone.element = this.g.path(polygone.path);
polygone.element.attr("fill", Color.white);
polygone.transform("t" + line.x1 + "," + line.y1 + "");
polygone.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
var cosAngle = Math.cos((line.angle));
var sinAngle = Math.sin((line.angle));
//polygone.element.attr("stroke-width", this.getStroke());
//polygone.element.attr("stroke", this.getPaint());
polygone.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
return polygone.element;
},
drawSequenceflowWithoutArrow: function(waypoints, conditional, isDefault, highLighted) {
var withArrowHead = false;
this._drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW);
},
/*
* Draw artifacts
*/
drawPoolOrLane: function(x, y, width, height, name){
// anti smoothing
if (this.strokeWidth%2 == 1)
x = Math.round(x) + .5, y = Math.round(y) + .5;
// shape
var rect = this.g.rect(x, y, width, height);
var attr = {"stroke-width": NORMAL_STROKE, stroke: TASK_STROKE_COLOR};
rect.attr(attr);
// Add the name as text, vertical
if(name != null && name.length > 0) {
var attr = POOL_LANE_FONT;
// Include some padding
var availableTextSpace = height - 6;
// Create rotation for derived font
var truncated = this.fitTextToWidth(name, availableTextSpace);
var realWidth = this.getStringWidth(truncated, attr);
var realHeight = this.getStringHeight(truncated, attr);
//console.log("truncated:", truncated, ", height:", height, ", realHeight:", realHeight, ", availableTextSpace:", availableTextSpace, ", realWidth:", realWidth);
var newX = x + 2 + realHeight*1 - realHeight/2;
var newY = 3 + y + availableTextSpace - (availableTextSpace - realWidth) / 2 - realWidth/2;
var textElement = this.g.text(newX, newY, truncated).attr(attr);
//console.log(".getBBox(): ", t.getBBox());
textElement.transform("r" + Raphael.deg(270 * Math.PI/180) + " " + newX + " " + newY);
}
// TODO: add to set
},
_drawTask: function(name, x, y, width, height, thickBorder) {
var originalPaint = this.getPaint();
this.setPaint(TASK_COLOR);
// anti smoothing
if (this.strokeWidth%2 == 1)
x = Math.round(x) + .5, y = Math.round(y) + .5;
// shape
var shape = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
var attr = {"stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: this.getPaint()};
shape.attr(attr);
//shape.attr({fill: "90-"+this.getPaint()+"-" + Color.get(250, 250, 244)});
var contextObject = this.getConextObject();
if (contextObject) {
shape.id = contextObject.id;
shape.data("contextObject", contextObject);
}
//var activity = this.getConextObject();
//console.log("activity: " + activity.getId(), activity);
//Object.clone(activity);
/*
c.mouseover(function(){
this.attr({"stroke-width": NORMAL_STROKE + 2});
}).mouseout(function(){
this.attr({"stroke-width": NORMAL_STROKE});
});
*/
this.setPaint(originalPaint);
// white shaddow
this.drawShaddow(shape);
if (thickBorder) {
shape.attr({"stroke-width": THICK_TASK_BORDER_STROKE});
} else {
//g.draw(rect);
}
// text
if (name) {
var fontAttr = TASK_FONT;
// Include some padding
var paddingX = 5;
var paddingY = 5;
var availableTextSpace = width - paddingX*2;
// TODO: this.setFont
// var originalFont = this.getFont();
// this.setFont(TASK_FONT)
/*
var truncated = this.fitTextToWidth(name, availableTextSpace);
var realWidth = this.getStringWidth(truncated, fontAttr);
var realHeight = this.getStringHeight(truncated, fontAttr);
//var t = this.g.text(x + width/2 + realWidth*0/2 + paddingX*0, y + height/2, truncated).attr(fontAttr);
*/
//console.log("draw task name: " + name);
var boxWidth = width - (2 * TEXT_PADDING);
var boxHeight = height - ICON_SIZE - ICON_PADDING - ICON_PADDING - MARKER_WIDTH - 2 - 2;
var boxX = x + width/2 - boxWidth/2;
var boxY = y + height/2 - boxHeight/2 + ICON_PADDING + ICON_PADDING - 2 - 2;
/*
var boxWidth = width - (2 * ANNOTATION_TEXT_PADDING);
var boxHeight = height - (2 * ANNOTATION_TEXT_PADDING);
var boxX = x + width/2 - boxWidth/2;
var boxY = y + height/2 - boxHeight/2;
*/
this.drawTaskLabel(name, boxX, boxY, boxWidth, boxHeight);
}
},
drawTaskLabel: function(text, x, y, boxWidth, boxHeight){
var originalFont = this.getFont();
this.setFont(TASK_FONT);
this._drawMultilineText(text, x, y, boxWidth, boxHeight, MULTILINE_VERTICAL_ALIGN_MIDDLE, MULTILINE_HORIZONTAL_ALIGN_MIDDLE);
this.setFont(originalFont);
},
drawAnnotationText: function(text, x, y, width, height){
//this._drawMultilineText(text, x, y, width, height, "start");
var originalPaint = this.getPaint();
var originalFont = this.getFont();
this.setPaint(Color.black);
this.setFont(TASK_FONT);
this._drawMultilineText(text, x, y, width, height, MULTILINE_VERTICAL_ALIGN_TOP, MULTILINE_HORIZONTAL_ALIGN_LEFT);
this.setPaint(originalPaint);
this.setFont(originalFont);
},
drawLabel: function(text, x, y, width, height){
//this._drawMultilineText(text, x, y, width, height, "start");
var originalPaint = this.getPaint();
var originalFont = this.getFont();
this.setPaint(LABEL_COLOR);
//this.setFont(LABEL_FONT);
this.setFont(LABEL_FONT_SMOOTH);
// predefined box width for labels
// TODO: use label width as is, but not height (for stretching)
if (!width || !height) {
width = 100;
height = 0;
}
// TODO: remove it. It is debug
x = x - width/2;
this._drawMultilineText(text, x, y, width, height, MULTILINE_VERTICAL_ALIGN_TOP, MULTILINE_HORIZONTAL_ALIGN_MIDDLE);
this.setPaint(originalPaint);
this.setFont(originalFont);
},
/*
drawMultilineLabel: function(text, x, y){
var originalFont = this.getFont();
this.setFont(LABEL_FONT_SMOOTH);
var boxWidth = 80;
x = x - boxWidth/2
this._drawMultilineText(text, x, y, boxWidth, null, "middle");
this.setFont(originalFont);
},
*/
getStringWidth: function(text, fontAttrs){
var textElement = this.g.text(0, 0, text).attr(fontAttrs).hide();
var bb = textElement.getBBox();
//console.log("string width: ", t.getBBox().width);
return textElement.getBBox().width;
},
getStringHeight: function(text, fontAttrs){
var textElement = this.g.text(0, 0, text).attr(fontAttrs).hide();
var bb = textElement.getBBox();
//console.log("string height: ", t.getBBox().height);
return textElement.getBBox().height;
},
fitTextToWidth: function(original, width) {
var text = original;
// TODO: move attr on parameters
var attr = {font: "11px Arial", opacity: 0};
// remove length for "..."
var dots = this.g.text(0, 0, "...").attr(attr).hide();
var dotsBB = dots.getBBox();
var maxWidth = width - dotsBB.width;
var textElement = this.g.text(0, 0, text).attr(attr).hide();
var bb = textElement.getBBox();
// it's a little bit incorrect with "..."
while (bb.width > maxWidth && text.length > 0) {
text = text.substring(0, text.length - 1);
textElement.attr({"text": text});
bb = textElement.getBBox();
}
// remove element from paper
textElement.remove();
if (text != original) {
text = text + "...";
}
return text;
},
wrapTextToWidth: function(original, width){
//return original;
var text = original;
var wrappedText = "\n";
// TODO: move attr on parameters
var attr = {font: "11px Arial", opacity: 0};
var textElement = this.g.text(0, 0, wrappedText).attr(attr).hide();
var bb = textElement.getBBox();
var resultText = "";
var i = 0, j = 0;
while (text.length > 0) {
while (bb.width < width && text.length>0) {
// remove "\n"
wrappedText = wrappedText.substring(0,wrappedText.length-1);
// add new char, add "\n"
wrappedText = wrappedText + text.substring(0,1) + "\n";
text = text.substring(1);
textElement.attr({"text": wrappedText});
bb = textElement.getBBox();
i++;
if (i>200) break;
}
// remove "\n"
wrappedText = wrappedText.substring(0, wrappedText.length - 1);
if (text.length == 0) {
resultText += wrappedText;
break;
}
// return last char to text
text = wrappedText.substring(wrappedText.length-1) + text;
// remove last char from wrappedText
wrappedText = wrappedText.substring(0, wrappedText.length-1) + "\n";
textElement.attr({"text": wrappedText});
bb = textElement.getBBox();
//console.log(">> ", wrappedText, ", ", text);
resultText += wrappedText;
wrappedText = "\n";
j++;
if (j>20) break;
}
// remove element from paper
textElement.remove();
return resultText;
},
wrapTextToWidth2: function(original, width){
var text = original;
var wrappedText = "\n";
// TODO: move attr on parameters
var attr = {font: "11px Arial", opacity: 0};
var textElement = this.g.text(0, 0, wrappedText).attr(attr).hide();
var bb = textElement.getBBox();
var resultText = "";
var i = 0, j = 0;
while (text.length > 0) {
while (bb.width < width && text.length>0) {
// remove "\n"
wrappedText = wrappedText.substring(0,wrappedText.length-1);
// add new char, add "\n"
wrappedText = wrappedText + text.substring(0,1) + "\n";
text = text.substring(1);
textElement.attr({"text": wrappedText});
bb = textElement.getBBox();
i++;
if (i>200) break;
}
// remove "\n"
wrappedText = wrappedText.substring(0, wrappedText.length - 1);
if (text.length == 0) {
resultText += wrappedText;
break;
}
// return last char to text
text = wrappedText.substring(wrappedText.length-1) + text;
// remove last char from wrappedText
wrappedText = wrappedText.substring(0, wrappedText.length-1) + "\n";
textElement.attr({"text": wrappedText});
bb = textElement.getBBox();
//console.log(">> ", wrappedText, ", ", text);
resultText += wrappedText;
wrappedText = "\n";
j++;
if (j>20) break;
}
// remove element from paper
textElement.remove();
return resultText;
},
drawUserTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(USERTASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawScriptTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(SCRIPTTASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawServiceTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(SERVICETASK_IMAGE, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawReceiveTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(RECEIVETASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawSendTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(SENDTASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawManualTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(MANUALTASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawBusinessRuleTask: function(name, x, y, width, height) {
this.g.setStart();
this._drawTask(name, x, y, width, height);
var img = this.g.image(BUSINESS_RULE_TASK_IMAGE, x + 7, y + 7, ICON_SIZE, ICON_SIZE);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawExpandedSubProcess: function(name, x, y, width, height, isTriggeredByEvent){
this.g.setStart();
// anti smoothing
if (this.strokeWidth%2 == 1)
x = Math.round(x) + .5, y = Math.round(y) + .5;
// shape
var rect = this.g.rect(x, y, width, height, EXPANDED_SUBPROCESS_CORNER_ROUND);
// Use different stroke (dashed)
if(isTriggeredByEvent) {
rect.attr(EVENT_SUBPROCESS_ATTRS);
} else {
rect.attr(EXPANDED_SUBPROCESS_ATTRS);
}
this.setContextToElement(rect);
var fontAttr = EXPANDED_SUBPROCESS_FONT;
// Include some padding
var paddingX = 10;
var paddingY = 5;
var availableTextSpace = width - paddingX*2;
var truncated = this.fitTextToWidth(name, availableTextSpace);
var realWidth = this.getStringWidth(truncated, fontAttr);
var realHeight = this.getStringHeight(truncated, fontAttr);
var textElement = this.g.text(x + width/2 - realWidth*0/2 + 0*paddingX, y + realHeight/2 + paddingY, truncated).attr(fontAttr);
var set = this.g.setFinish();
// TODO: Expanded Sub Process may has specific handlers
//this.addHandlers(set, x, y, width, height, "task");
},
drawCollapsedSubProcess: function(name, x, y, width, height, isTriggeredByEvent) {
this.g.setStart();
this._drawCollapsedTask(name, x, y, width, height, false);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
drawCollapsedCallActivity: function(name, x, y, width, height) {
this.g.setStart();
this._drawCollapsedTask(name, x, y, width, height, true);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "task");
},
_drawCollapsedTask: function(name, x, y, width, height, thickBorder) {
// The collapsed marker is now visualized separately
this._drawTask(name, x, y, width, height, thickBorder);
},
drawCollapsedMarker: function(x, y, width, height){
// rectangle
var rectangleWidth = MARKER_WIDTH;
var rectangleHeight = MARKER_WIDTH;
// anti smoothing
if (this.strokeWidth%2 == 1)
y += .5;
var rect = this.g.rect(x + (width - rectangleWidth) / 2, y + height - rectangleHeight - 3, rectangleWidth, rectangleHeight);
// plus inside rectangle
var cx = rect.attr("x") + rect.attr("width")/2;
var cy = rect.attr("y") + rect.attr("height")/2;
var line = this.g.path(
"M" + cx + " " + (cy+2) + "L" + cx + " " + (cy-2) +
"M" + (cx-2) + " " + cy + "L" + (cx+2) + " " + cy
).attr({"stroke-width": this.strokeWidth});
},
drawActivityMarkers: function(x, y, width, height, multiInstanceSequential, multiInstanceParallel, collapsed){
if (collapsed) {
if (!multiInstanceSequential && !multiInstanceParallel) {
this.drawCollapsedMarker(x, y, width, height);
} else {
this.drawCollapsedMarker(x - MARKER_WIDTH / 2 - 2, y, width, height);
if (multiInstanceSequential) {
console.log("is collapsed and multiInstanceSequential");
this.drawMultiInstanceMarker(true, x + MARKER_WIDTH / 2 + 2, y, width, height);
} else if (multiInstanceParallel) {
console.log("is collapsed and multiInstanceParallel");
this.drawMultiInstanceMarker(false, x + MARKER_WIDTH / 2 + 2, y, width, height);
}
}
} else {
if (multiInstanceSequential) {
console.log("is multiInstanceSequential");
this.drawMultiInstanceMarker(true, x, y, width, height);
} else if (multiInstanceParallel) {
console.log("is multiInstanceParallel");
this.drawMultiInstanceMarker(false, x, y, width, height);
}
}
},
drawGateway: function(x, y, width, height) {
var rhombus = this.g.path( "M" + x + " " + (y + (height / 2)) +
"L" + (x + (width / 2)) + " " + (y + height) +
"L" + (x + width) + " " + (y + (height / 2)) +
"L" + (x + (width / 2)) + " " + y +
"z"
);
// white shaddow
this.drawShaddow(rhombus);
rhombus.attr("stroke-width", this.strokeWidth);
rhombus.attr("stroke", Color.SlateGrey);
rhombus.attr({fill: Color.white});
this.setContextToElement(rhombus);
return rhombus;
},
drawParallelGateway: function(x, y, width, height) {
this.g.setStart();
// rhombus
this.drawGateway(x, y, width, height);
// plus inside rhombus
var originalStroke = this.getStroke();
this.setStroke(GATEWAY_TYPE_STROKE);
var plus = this.g.path(
"M" + (x + 10) + " " + (y + height / 2) + "L" + (x + width - 10) + " " + (y + height / 2) + // horizontal
"M" + (x + width / 2) + " " + (y + height - 10) + "L" + (x + width / 2) + " " + (y + 10) // vertical
);
plus.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
this.setStroke(originalStroke);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "gateway");
},
drawExclusiveGateway: function(x, y, width, height) {
this.g.setStart();
// rhombus
var rhombus = this.drawGateway(x, y, width, height);
var quarterWidth = width / 4;
var quarterHeight = height / 4;
// X inside rhombus
var originalStroke = this.getStroke();
this.setStroke(GATEWAY_TYPE_STROKE);
var iks = this.g.path(
"M" + (x + quarterWidth + 3) + " " + (y + quarterHeight + 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + 3 * quarterHeight - 3) +
"M" + (x + quarterWidth + 3) + " " + (y + 3 * quarterHeight - 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + quarterHeight + 3)
);
iks.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
this.setStroke(originalStroke);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "gateway");
},
drawInclusiveGateway: function(x, y, width, height){
this.g.setStart();
// rhombus
this.drawGateway(x, y, width, height);
var diameter = width / 4;
// circle inside rhombus
var originalStroke = this.getStroke();
this.setStroke(GATEWAY_TYPE_STROKE);
var circle = this.g.ellipse(width/2 + x, height/2 + y, diameter, diameter);
circle.attr({"stroke-width": this.getStroke(), "stroke": this.getPaint()});
this.setStroke(originalStroke);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "gateway");
},
drawEventBasedGateway: function(x, y, width, height){
this.g.setStart();
// rhombus
this.drawGateway(x, y, width, height);
var diameter = width / 2;
// rombus inside rhombus
var originalStroke = this.getStroke();
this.setStroke(GATEWAY_TYPE_STROKE);
// draw GeneralPath (polygon)
var n=5;
var angle = 2*Math.PI/n;
var x1Points = [];
var y1Points = [];
for ( var index = 0; index < n; index++ ) {
var v = index*angle - Math.PI/2;
x1Points[index] = x + parseInt(Math.round(width/2)) + parseInt(Math.round((width/4)*Math.cos(v)));
y1Points[index] = y + parseInt(Math.round(height/2)) + parseInt(Math.round((height/4)*Math.sin(v)));
}
//g.drawPolygon(x1Points, y1Points, n);
var path = "";
for ( var index = 0; index < n; index++ ) {
if (index == 0)
path += "M";
else
path += "L";
path += x1Points[index] + "," + y1Points[index];
}
path += "z";
var polygone = this.g.path(path);
polygone.attr("stroke-width", this.strokeWidth);
polygone.attr("stroke", this.getPaint());
this.setStroke(originalStroke);
var set = this.g.setFinish();
this.addHandlers(set, x, y, width, height, "gateway");
},
/*
* drawMultiInstanceMarker
* drawHighLight
* highLightFlow
*/
drawMultiInstanceMarker: function(sequential, x, y, width, height) {
var rectangleWidth = MARKER_WIDTH;
var rectangleHeight = MARKER_WIDTH;
// anti smoothing
if (this.strokeWidth%2 == 1)
x += .5;//, y += .5;
var lineX = x + (width - rectangleWidth) / 2;
var lineY = y + height - rectangleHeight - 3;
var originalStroke = this.getStroke();
this.setStroke(MULTI_INSTANCE_STROKE);
if (sequential) {
var line = this.g.path(
"M" + lineX + " " + lineY + "L" + (lineX + rectangleWidth) + " " + lineY +
"M" + lineX + " " + (lineY + rectangleHeight / 2) + "L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight / 2) +
"M" + lineX + " " + (lineY + rectangleHeight) + "L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight)
).attr({"stroke-width": this.strokeWidth});
} else {
var line = this.g.path(
"M" + lineX + " " + lineY + "L" + lineX + " " + (lineY + rectangleHeight) +
"M" + (lineX + rectangleWidth / 2) + " " + lineY + "L" + (lineX + rectangleWidth / 2) + " " + (lineY + rectangleHeight) +
"M" + (lineX + rectangleWidth) + " " + lineY + "L" + (lineX + rectangleWidth) + " " + (lineY + rectangleHeight)
).attr({"stroke-width": this.strokeWidth});
}
this.setStroke(originalStroke);
},
drawHighLight: function(x, y, width, height){
var originalPaint = this.getPaint();
var originalStroke = this.getStroke();
this.setPaint(HIGHLIGHT_COLOR);
this.setStroke(THICK_TASK_BORDER_STROKE);
//var c = this.g.rect(x - width/2 - THICK_TASK_BORDER_STROKE, y - height/2 - THICK_TASK_BORDER_STROKE, width + THICK_TASK_BORDER_STROKE*2, height + THICK_TASK_BORDER_STROKE*2, 5);
var rect = this.g.rect(x - THICK_TASK_BORDER_STROKE, y - THICK_TASK_BORDER_STROKE, width + THICK_TASK_BORDER_STROKE*2, height + THICK_TASK_BORDER_STROKE*2, TASK_CORNER_ROUND);
rect.attr("stroke-width", this.strokeWidth);
rect.attr("stroke", this.getPaint());
this.setPaint(originalPaint);
this.setStroke(originalStroke);
},
highLightActivity: function(activityId){
var shape = this.g.getById(activityId);
if (!shape) {
console.error("Activity " + activityId + " not found");
return;
}
var contextObject = shape.data("contextObject");
if (contextObject)
console.log("--> highLightActivity: ["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
else
console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
shape.attr("stroke-width", THICK_TASK_BORDER_STROKE);
shape.attr("stroke", HIGHLIGHT_COLOR);
},
highLightFlow: function(flowId){
var shapeFlow = this.g.getById(flowId);
if (!shapeFlow) {
console.error("Flow " + flowId + " not found");
return;
}
var contextObject = shapeFlow.data("contextObject");
if (contextObject)
console.log("--> highLightFlow: ["+contextObject.id+"] " + contextObject.flow);
//console.log("--> highLightFlow: ", flow.flow, flow.data("set"));
var st = shapeFlow.data("set");
st.attr("stroke-width", SEQUENCEFLOW_HIGHLIGHT_STROKE);
st.attr("stroke", HIGHLIGHT_COLOR);
var withArrowHead = shapeFlow.data("withArrowHead");
if (withArrowHead)
st[1].attr("fill", HIGHLIGHT_COLOR);
st.forEach(function(el){
//console.log("---->", el);
//el.attr("")
});
},
_drawClock: function(cx, cy, width, height){
var circle = this.g.ellipse(cx, cy, 1, 1).attr({stroke:"none", fill: Color.get(232, 239, 241)});
//var c = this.g.ellipse(cx, cy, width, height).attr({stroke:"none", fill: Color.red});
//x = cx - width/2;
//y = cy - height/2;
var clock = this.g.path(
/* outer circle */ "M15.5,2.374 C8.251,2.375,2.376,8.251,2.374,15.5 C2.376,22.748,8.251,28.623,15.5,28.627c7.249-0.004,13.124-5.879,13.125-13.127C28.624,8.251,22.749,2.375,15.5,2.374z" +
/* inner circle */ "M15.5,26.623 C8.909,26.615,4.385,22.09,4.375,15.5 C4.385,8.909,8.909,4.384,15.5,4.374c4.59,0.01,11.115,3.535,11.124,11.125C26.615,22.09,22.091,26.615,15.5,26.623z" +
/* 9 */ "M8.625,15.5c-0.001-0.552-0.448-0.999-1.001-1c-0.553,0-1,0.448-1,1c0,0.553,0.449,1,1,1C8.176,16.5,8.624,16.053,8.625,15.5z" +
/* 8 */ "M8.179,18.572c-0.478,0.277-0.642,0.889-0.365,1.367c0.275,0.479,0.889,0.641,1.365,0.365c0.479-0.275,0.643-0.887,0.367-1.367C9.27,18.461,8.658,18.297,8.179,18.572z" +
/* 10 */ "M9.18,10.696c-0.479-0.276-1.09-0.112-1.366,0.366s-0.111,1.09,0.365,1.366c0.479,0.276,1.09,0.113,1.367-0.366C9.821,11.584,9.657,10.973,9.18,10.696z" +
/* 2 */ "M22.822,12.428c0.478-0.275,0.643-0.888,0.366-1.366c-0.275-0.478-0.89-0.642-1.366-0.366c-0.479,0.278-0.642,0.89-0.366,1.367C21.732,12.54,22.344,12.705,22.822,12.428z" +
/* 7 */ "M12.062,21.455c-0.478-0.275-1.089-0.111-1.366,0.367c-0.275,0.479-0.111,1.09,0.366,1.365c0.478,0.277,1.091,0.111,1.365-0.365C12.704,22.344,12.54,21.732,12.062,21.455z" +
/* 11 */ "M12.062,9.545c0.479-0.276,0.642-0.888,0.366-1.366c-0.276-0.478-0.888-0.642-1.366-0.366s-0.642,0.888-0.366,1.366C10.973,9.658,11.584,9.822,12.062,9.545z" +
/* 4 */ "M22.823,18.572c-0.48-0.275-1.092-0.111-1.367,0.365c-0.275,0.479-0.112,1.092,0.367,1.367c0.477,0.275,1.089,0.113,1.365-0.365C23.464,19.461,23.3,18.848,22.823,18.572z" +
/* 2 */ "M19.938,7.813c-0.477-0.276-1.091-0.111-1.365,0.366c-0.275,0.48-0.111,1.091,0.366,1.367s1.089,0.112,1.366-0.366C20.581,8.702,20.418,8.089,19.938,7.813z" +
/* 3 */ "M23.378,14.5c-0.554,0.002-1.001,0.45-1.001,1c0.001,0.552,0.448,1,1.001,1c0.551,0,1-0.447,1-1C24.378,14.949,23.929,14.5,23.378,14.5z" +
/* arrows */ "M15.501,6.624c-0.552,0-1,0.448-1,1l-0.466,7.343l-3.004,1.96c-0.478,0.277-0.642,0.889-0.365,1.365c0.275,0.479,0.889,0.643,1.365,0.367l3.305-1.676C15.39,16.99,15.444,17,15.501,17c0.828,0,1.5-0.671,1.5-1.5l-0.5-7.876C16.501,7.072,16.053,6.624,15.501,6.624z" +
/* 9 */ "M15.501,22.377c-0.552,0-1,0.447-1,1s0.448,1,1,1s1-0.447,1-1S16.053,22.377,15.501,22.377z" +
/* 8 */ "M18.939,21.455c-0.479,0.277-0.643,0.889-0.366,1.367c0.275,0.477,0.888,0.643,1.366,0.365c0.478-0.275,0.642-0.889,0.366-1.365C20.028,21.344,19.417,21.18,18.939,21.455z" +
"");
clock.attr({fill: Color.black, stroke: "none"});
//clock.transform("t " + (cx-29.75/2) + " " + (cy-29.75/2));
//clock.transform("...s 0.85");
//clock.transform("...s " + .85 + " " + .85);
clock.transform("t " + (-2.374) + " " + (-2.374) );
clock.transform("...t -" + (15.5-2.374) + " -" + (15.5-2.374) );
clock.transform("...s " + 1*(width/35) + " " + 1*(height/35));
clock.transform("...T " + cx + " " + cy);
//clock.transform("t " + (cx-width/2) + " " + (cy-height/2));
//console.log(".getBBox(): ", clock.getBBox());
//console.log(".attr(): ", c.attrs);
circle.attr("rx", clock.getBBox().width/2);
circle.attr("ry", clock.getBBox().height/2);
//return circle
},
_drawPentagon: function(cx, cy, width, height, filled){
// draw GeneralPath (polygon)
var n=5;
var angle = 2*Math.PI/n;
var waypoints = [];
for ( var index = 0; index < n; index++ ) {
var v = index*angle - Math.PI/2;
var point = {};
point.x = -width*1.2/2 + parseInt(Math.round(width*1.2/2)) + parseInt(Math.round((width*1.2/4)*Math.cos(v)));
point.y = -height*1.2/2 + parseInt(Math.round(height*1.2/2)) + parseInt(Math.round((height*1.2/4)*Math.sin(v)));
waypoints[index] = point;
}
var polygone = new Polygone(waypoints, this.getStroke());
polygone.element = this.g.path(polygone.path);
if (filled)
polygone.element.attr("fill", Color.black);
else
polygone.element.attr("fill", Color.white);
polygone.element.transform("s " + 1*(width/35) + " " + 1*(height/35));
polygone.element.transform("...T " + cx + " " + cy);
},
//_drawMultilineText: function(text, x, y, boxWidth, boxHeight, textAnchor) {
_drawMultilineText: function(text, x, y, boxWidth, boxHeight, verticalAlign, horizontalAlign) {
if (!text || text == "")
return;
// Autostretch boxHeight if boxHeight is 0
if (boxHeight == 0)
verticalAlign = MULTILINE_VERTICAL_ALIGN_TOP;
//var TEXT_PADDING = 3;
var width = boxWidth;
if (boxHeight)
var height = boxHeight;
var layouts = [];
//var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
var font = this.getFont();
var measurer = new LineBreakMeasurer(this.g, x, y, text, font);
var lineHeight = measurer.rafaelTextObject.getBBox().height;
//console.log("text: ", text.replace(/\n/g, "?"));
if (height) {
var availableLinesCount = parseInt(height/lineHeight);
//console.log("availableLinesCount: " + availableLinesCount);
}
var i = 1;
while (measurer.getPosition() < measurer.text.getEndIndex()) {
var layout = measurer.nextLayout(width);
//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
if (layout != null) {
// TODO: and check if measurer has next layout. If no then don't draw dots
if (!availableLinesCount || i < availableLinesCount) {
layouts.push(layout);
} else {
layouts.push(this.fitTextToWidth(layout + "...", boxWidth));
break;
}
}
i++;
};
//console.log(layouts);
measurer.rafaelTextObject.attr({"text": layouts.join("\n")});
if (horizontalAlign)
measurer.rafaelTextObject.attr({"text-anchor": horizontalAlign}); // end, middle, start
var bb = measurer.rafaelTextObject.getBBox();
// TODO: there is somethin wrong with wertical align. May be: measurer.rafaelTextObject.attr({"y": y + height/2 - bb.height/2})
measurer.rafaelTextObject.attr({"y": y + bb.height/2});
//var bb = measurer.rafaelTextObject.getBBox();
if (measurer.rafaelTextObject.attr("text-anchor") == MULTILINE_HORIZONTAL_ALIGN_MIDDLE )
measurer.rafaelTextObject.attr("x", x + boxWidth/2);
else if (measurer.rafaelTextObject.attr("text-anchor") == MULTILINE_HORIZONTAL_ALIGN_RIGHT )
measurer.rafaelTextObject.attr("x", x + boxWidth);
var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
//var box = this.g.rect(x+.5, y + .5, width, height).attr(boxStyle);
var textAreaCX = x + boxWidth/2;
var height = boxHeight;
if (!height) height = bb.height;
var textAreaCY = y + height/2;
var dotLeftTop = this.g.ellipse(x, y, 3, 3).attr({"stroke-width": 0, fill: Color.LightSteelBlue, stroke: "none"}).hide();
var dotCenter = this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"}).hide();
/*
// real bbox
var bb = measurer.rafaelTextObject.getBBox();
var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
*/
var rect = this.g.rect(x, y, boxWidth, height).attr({"stroke-width": 1}).attr(boxStyle).hide();
var debugSet = this.g.set();
debugSet.push(dotLeftTop, dotCenter, rect);
//debugSet.show();
},
drawTextAnnotation: function(text, x, y, width, height){
var lineLength = 18;
var path = [];
path.push(["M", x + lineLength, y]);
path.push(["L", x, y]);
path.push(["L", x, y + height]);
path.push(["L", x + lineLength, y + height]);
path.push(["L", x + lineLength, y + height -1]);
path.push(["L", x + 1, y + height -1]);
path.push(["L", x + 1, y + 1]);
path.push(["L", x + lineLength, y + 1]);
path.push(["z"]);
var textAreaLines = this.g.path(path);
var boxWidth = width - (2 * ANNOTATION_TEXT_PADDING);
var boxHeight = height - (2 * ANNOTATION_TEXT_PADDING);
var boxX = x + width/2 - boxWidth/2;
var boxY = y + height/2 - boxHeight/2;
// for debug
var rectStyle = {stroke: Color(112, 146, 190), "stroke-width": 1.0, "stroke-dasharray": "- "};
var r = this.g.rect(boxX, boxY, boxWidth, boxHeight).attr(rectStyle);
//
this.drawAnnotationText(text, boxX, boxY, boxWidth, boxHeight);
},
drawLabel111111111: function(text, x, y, width, height, labelAttrs){
var debug = false;
// text
if (text != null && text != undefined && text != "") {
var attr = LABEL_FONT;
//console.log("x", x, "y", y, "width", width, "height", height );
wrappedText = text;
if (labelAttrs && labelAttrs.wrapWidth) {
wrappedText = this.wrapTextToWidth(wrappedText, labelAttrs.wrapWidth);
}
var realWidth = this.getStringWidth(wrappedText, attr);
var realHeight = this.getStringHeight(wrappedText, attr);
var textAreaCX = x + width/2;
var textAreaCY = y + 3 + height + this.getStringHeight(wrappedText, attr)/2;
var textX = textAreaCX;
var textY = textAreaCY;
var textAttrs = {};
if (labelAttrs && labelAttrs.align) {
switch (labelAttrs.align) {
case "left":
textAttrs["text-anchor"] = "start";
textX = textX - realWidth/2;
break;
case "center":
textAttrs["text-anchor"] = "middle";
break;
case "right":
textAttrs["text-anchor"] = "end";
textX = textX + realWidth/2;
break;
}
}
if (labelAttrs && labelAttrs.wrapWidth) {
if (true) {
// Draw frameborder
var textAreaStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
var textAreaX = textAreaCX - realWidth/2;
var textAreaY = textAreaCY+.5 - realHeight/2;
var textArea = this.g.rect(textAreaX, textAreaY, realWidth, realHeight).attr(textAreaStyle);
var textAreaLines = this.g.path("M" + textAreaX + " " + textAreaY + "L" + (textAreaX+realWidth) + " " + (textAreaY+realHeight) + "M" + + (textAreaX+realWidth) + " " + textAreaY + "L" + textAreaX + " " + (textAreaY+realHeight));
textAreaLines.attr(textAreaStyle);
this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"});
}
}
var label = this.g.text(textX, textY, wrappedText).attr(attr).attr(textAttrs);
//label.id = Raphael.createUUID();
//console.log("label ", label.id, ", ", wrappedText);
if (this.fontSmoothing) {
label.attr({stroke: LABEL_COLOR, "stroke-width":.4});
}
// debug
if (debug) {
var imageAreaStyle = {stroke: Color.grey61, "stroke-width": 1.0, "stroke-dasharray": "- "};
var imageArea = this.g.rect(x+.5, y+.5, width, height).attr(imageAreaStyle);
var imageAreaLines = this.g.path("M" + x + " " + y + "L" + (x+width) + " " + (y+height) + "M" + + (x+width) + " " + y + "L" + x + " " + (y+height));
imageAreaLines.attr(imageAreaStyle);
var dotStyle = {fill: Color.Coral, stroke: "none"};
this.g.ellipse(x, y, 3, 3).attr(dotStyle);
this.g.ellipse(x+width, y, 2, 2).attr(dotStyle);
this.g.ellipse(x+width, y+height, 2, 2).attr(dotStyle);
this.g.ellipse(x, y+height, 2, 2).attr(dotStyle);
}
return label;
}
},
vvoid: function(){}
};
... ...
/**
* Class to generate an image based the diagram interchange information in a
* BPMN 2.0 process.
*
* @author (Javascript) Dmitry Farafonov
*/
var ProcessDiagramGenerator = {
options: {},
processDiagramCanvas: [],
activityDrawInstructions:{},
processDiagrams: {},
diagramBreadCrumbs: null,
init: function(){
// start event
this.activityDrawInstructions["startEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawNoneStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// start timer event
this.activityDrawInstructions["startTimerEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawTimerStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
};
// start event
this.activityDrawInstructions["messageStartEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawMessageStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
};
// start signal event
this.activityDrawInstructions["startSignalEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawSignalStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
};
// start multiple event
this.activityDrawInstructions["startMultipleEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawMultipleStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
};
// signal catch
this.activityDrawInstructions["intermediateSignalCatch"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingSignalEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// message catch
this.activityDrawInstructions["intermediateMessageCatch"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingMessageEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// multiple catch
this.activityDrawInstructions["intermediateMultipleCatch"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingMultipleEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// signal throw
this.activityDrawInstructions["intermediateSignalThrow"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawThrowingSignalEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// message throw
this.activityDrawInstructions["intermediateMessageThrow"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawThrowingMessageEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// multiple throw
this.activityDrawInstructions["intermediateMultipleThrow"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawThrowingMultipleEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// none throw
this.activityDrawInstructions["intermediateThrowEvent"] = function() {
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawThrowingNoneEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// end event
this.activityDrawInstructions["endEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawNoneEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// error end event
this.activityDrawInstructions["errorEndEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawErrorEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// message end event
this.activityDrawInstructions["messageEndEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawMessageEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// signal end event
this.activityDrawInstructions["signalEndEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawSignalEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// multiple end event
this.activityDrawInstructions["multipleEndEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawMultipleEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// terminate end event
this.activityDrawInstructions["terminateEndEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawTerminateEndEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// error start event
this.activityDrawInstructions["errorStartEvent"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawErrorStartEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), activityImpl.getProperty("name"));
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// task
this.activityDrawInstructions["task"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
// TODO:
//console.error("task is not implemented yet");
/*
var activityImpl = this;
processDiagramCanvas.drawTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), thickBorder);
*/
};
// user task
this.activityDrawInstructions["userTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawUserTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// script task
this.activityDrawInstructions["scriptTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawScriptTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// service task
this.activityDrawInstructions["serviceTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawServiceTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// receive task
this.activityDrawInstructions["receiveTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawReceiveTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// send task
this.activityDrawInstructions["sendTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawSendTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// manual task
this.activityDrawInstructions["manualTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawManualTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// businessRuleTask task
this.activityDrawInstructions["businessRuleTask"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawBusinessRuleTask(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// exclusive gateway
this.activityDrawInstructions["exclusiveGateway"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawExclusiveGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// inclusive gateway
this.activityDrawInstructions["inclusiveGateway"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawInclusiveGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// parallel gateway
this.activityDrawInstructions["parallelGateway"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawParallelGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// eventBasedGateway
this.activityDrawInstructions["eventBasedGateway"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawEventBasedGateway(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
// Boundary timer
this.activityDrawInstructions["boundaryTimer"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingTimerEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// Boundary catch error
this.activityDrawInstructions["boundaryError"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingErrorEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// Boundary signal event
this.activityDrawInstructions["boundarySignal"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingSignalEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// Boundary message event
this.activityDrawInstructions["boundaryMessage"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = activityImpl.getProperty("isInterrupting");
processDiagramCanvas.drawCatchingMessageEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, null);
var label = ProcessDiagramGenerator.getActivitiLabel(activityImpl);
if (label)
processDiagramCanvas.drawLabel(label.text, label.x, label.y, label.width, label.height);
};
// timer catch event
this.activityDrawInstructions["intermediateTimer"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
var isInterrupting = null;
processDiagramCanvas.drawCatchingTimerEvent(activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight(), isInterrupting, activityImpl.getProperty("name"));
};
// subprocess
this.activityDrawInstructions["subProcess"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
// TODO:
processDiagramCanvas.setConextObject(activityImpl);
var isExpanded = activityImpl.getProperty("isExpanded");
var isTriggeredByEvent = activityImpl.getProperty("triggeredByEvent");
if(isTriggeredByEvent == undefined) {
isTriggeredByEvent = true;
}
// TODO: check why isTriggeredByEvent = true when undefined
isTriggeredByEvent = false;
if (isExpanded != undefined && isExpanded == false) {
processDiagramCanvas.drawCollapsedSubProcess(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(),
activityImpl.getWidth(), activityImpl.getHeight(), isTriggeredByEvent);
} else {
processDiagramCanvas.drawExpandedSubProcess(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(),
activityImpl.getWidth(), activityImpl.getHeight(), isTriggeredByEvent);
}
//console.error("subProcess is not implemented yet");
};
// call activity
this.activityDrawInstructions["callActivity"] = function(){
var activityImpl = this.activity;
var processDiagramCanvas = this.processDiagramCanvas;
processDiagramCanvas.setConextObject(activityImpl);
processDiagramCanvas.drawCollapsedCallActivity(activityImpl.getProperty("name"), activityImpl.getX(), activityImpl.getY(), activityImpl.getWidth(), activityImpl.getHeight());
};
$(document).ready(function(){
// Protect right click on SVG elements (and on canvas too)
document.body.oncontextmenu = function(event) {
if (window.event.srcElement.tagName == "shape" || window.event.srcElement.tagName == "DIV" && window.event.srcElement.parentElement.className == "diagram") {
// IE DIAGRAM CANVAS OR SHAPE DETECTED!
return false;
}
return (!Object.isSVGElement(window.event.srcElement));
};
});
},
getActivitiLabel:function(activityImpl){
/*
TODO: Label object should be in activityImpl and looks like:
{
x: 250,
y: 250,
width: 80,
height: 30
}
And then:
if (!activityImpl.label)
return null;
var label = activityImpl.label;
label.text = activityImpl.name;
return label;
*/
// But now default label for all events is:
return {
text: activityImpl.getProperty("name"),
x: activityImpl.getX() + .5 + activityImpl.getWidth()/2,
y: activityImpl.getY() + .5 + activityImpl.getHeight() + ICON_PADDING,
width: 100,
height: 0
};
},
generateDiagram: function(processDefinitionDiagramLayout){
// Init canvas
var processDefinitionId = processDefinitionDiagramLayout.processDefinition.id;
//console.log("Init canvas ", processDefinitionId);
if (this.getProcessDiagram(processDefinitionId) != undefined) {
// TODO: may be reset canvas if exists.. Or just show
//console.log("ProcessDiagram '" + processDefinitionId + "' is already generated. Just show it.");
return;
}
var processDiagram = this.initProcessDiagramCanvas(processDefinitionDiagramLayout);
var processDiagramCanvas = processDiagram.diagramCanvas;
// Draw pool shape, if process is participant in collaboration
if(processDefinitionDiagramLayout.participantProcess != undefined) {
//console.log("Draw pool shape");
var pProc = processDefinitionDiagramLayout.participantProcess;
processDiagramCanvas.drawPoolOrLane(pProc.x, pProc.y, pProc.width, pProc.height, pProc.name);
}
var laneSets = processDefinitionDiagramLayout.laneSets;
var activities = processDefinitionDiagramLayout.activities;
var sequenceFlows = processDefinitionDiagramLayout.sequenceFlows;
pb1.set('value', 0);
var cnt = 0;
if (laneSets)
for(var i in laneSets) {
cnt += laneSets[i].lanes.length;
}
if (activities)
cnt += activities.length;
if (sequenceFlows)
cnt += sequenceFlows.length;
var step = (cnt>0)? 100/cnt : 0;
var progress = 0;
//console.log("progress bar step: ", step);
var task1 = new $.AsyncQueue();
// Draw lanes
task1.add(function (task1) {
if (!laneSets) laneSets = [];
//console.log("> draw lane sets, count:", laneSets.length)
});
for(var i in laneSets) {
var laneSet = laneSets[i];
//laneSet.id, laneSet.name
task1.add(laneSet.lanes,function (task1, lane) {
progress += step;
pb1.set('value', parseInt(progress));
//console.log("--> laneId: " + lane.name + ", name: " + lane.name);
processDiagramCanvas.drawPoolOrLane(lane.x, lane.y, lane.width, lane.height, lane.name);
});
}
// Draw activities
task1.add(function (task1) {
if (!activities) activities = [];
//console.log("> draw activities, count:", activities.length)
});
var activitiesLength = activities.length;
task1.add(activities,function (task1, activityJson) {
var activity = new ActivityImpl(activityJson);
activitiesLength --;
progress += step;
pb1.set('value', parseInt(progress));
//console.log(activitiesLength, "--> activityId: " + activity.getId() + ", name: " + activity.getProperty("name"));
ProcessDiagramGenerator.drawActivity(processDiagramCanvas, activity);
});
// Draw sequence-flows
task1.add(function (task1) {
if (!sequenceFlows) sequenceFlows = [];
//console.log("> draw sequence flows, count:", sequenceFlows.length)
});
var flowsLength = sequenceFlows.length;
task1.add(sequenceFlows,function (task1, flow) {
var waypoints = [];
for(var j in flow.xPointArray) {
waypoints[j] = {x: flow.xPointArray[j], y: flow.yPointArray[j]};
}
var isDefault = flow.isDefault;
var isConditional = flow.isConditional;
var isHighLighted = flow.isHighLighted;
// TODO: add source and destination for sequence flows in REST
// parse for test
var f = flow.flow;
var matches = f.match(/\((.*)\)--.*-->\((.*)\)/);
var sourceActivityId, destinationActivityId;
if (matches != null) {
sourceActivityId = matches[1];
destinationActivityId = matches[2];
}
flow.sourceActivityId = sourceActivityId;
flow.destinationActivityId = destinationActivityId;
//
flowsLength--;
progress += step;
pb1.set('value', parseInt(progress));
//console.log(flowsLength, "--> flow: " + flow.flow);
processDiagramCanvas.setConextObject(flow);
processDiagramCanvas.drawSequenceflow(waypoints, isConditional, isDefault, isHighLighted);
});
task1.onComplete(function(){
if (progress<100)
pb1.set('value', 100);
//console.log("COMPLETE!!!");
//console.timeEnd('generateDiagram');
});
task1.run();
},
getProcessDiagram: function (processDefinitionId) {
return this.processDiagrams[processDefinitionId];
},
initProcessDiagramCanvas: function (processDefinitionDiagramLayout) {
var minX = 0;
var maxX = 0;
var minY = 0;
var maxY = 0;
if(processDefinitionDiagramLayout.participantProcess != undefined) {
var pProc = processDefinitionDiagramLayout.participantProcess;
minX = pProc.x;
maxX = pProc.x + pProc.width;
minY = pProc.y;
maxY = pProc.y + pProc.height;
}
var activities = processDefinitionDiagramLayout.activities;
for(var i in activities) {
var activityJson = activities[i];
var activity = new ActivityImpl(activityJson);
// width
if (activity.getX() + activity.getWidth() > maxX) {
maxX = activity.getX() + activity.getWidth();
}
if (activity.getX() < minX) {
minX = activity.getX();
}
// height
if (activity.getY() + activity.getHeight() > maxY) {
maxY = activity.getY() + activity.getHeight();
}
if (activity.getY() < minY) {
minY = activity.getY();
}
}
var sequenceFlows = processDefinitionDiagramLayout.sequenceFlows;
for(var i in sequenceFlows) {
var flow = sequenceFlows[i];
var waypoints = [];
for(var j in flow.xPointArray) {
waypoints[j] = {x: flow.xPointArray[j], y: flow.yPointArray[j]};
// width
if (waypoints[j].x > maxX) {
maxX = waypoints[j].x;
}
if (waypoints[j].x < minX) {
minX = waypoints[j].x;
}
// height
if (waypoints[j].y > maxY) {
maxY = waypoints[j].y;
}
if (waypoints[j].y < minY) {
minY = waypoints[j].y;
}
}
}
var laneSets = processDefinitionDiagramLayout.laneSets;
for(var i in laneSets) {
var laneSet = laneSets[i];
//laneSet.id, laneSet.name
for(var j in laneSet.lanes) {
var lane = laneSet.lanes[j];
// width
if (lane.x + lane.width > maxX) {
maxX = lane.x + lane.width;
}
if (lane.x < minX) {
minX = lane.x;
}
// height
if (lane.y + lane.height > maxY) {
maxY = lane.y + lane.height;
}
if (lane.y < minY) {
minY = lane.y;
}
}
}
var diagramCanvas = new ProcessDiagramCanvas();
if (diagramCanvas) {
// create div in diagramHolder
var diagramHolder = document.getElementById(this.options.diagramHolderId);
if (!diagramHolder)
throw {msg: "Diagram holder not found", error: "diagramHolderNotFound"};
var div = document.createElement("DIV");
div.id = processDefinitionDiagramLayout.processDefinition.id;
div.className = "diagram";
diagramHolder.appendChild(div);
diagramCanvas.init(maxX + 20, maxY + 20, processDefinitionDiagramLayout.processDefinition.id);
this.processDiagrams[processDefinitionDiagramLayout.processDefinition.id] = {
processDefinitionDiagramLayout: processDefinitionDiagramLayout,
diagramCanvas: diagramCanvas
};
}
return this.getProcessDiagram(processDefinitionDiagramLayout.processDefinition.id);
//return new DefaultProcessDiagramCanvas(maxX + 10, maxY + 10, minX, minY);
},
drawActivity: function(processDiagramCanvas, activity, highLightedActivities) {
var type = activity.getProperty("type");
var drawInstruction = this.activityDrawInstructions[type];
if (drawInstruction != null) {
drawInstruction.apply({processDiagramCanvas:processDiagramCanvas, activity:activity});
} else {
//console.error("no drawInstruction for " + type + ": ", activity);
}
// Actually draw the markers
if (activity.getProperty("multiInstance") != undefined || activity.getProperty("collapsed") != undefined) {
//console.log(activity.getProperty("name"), activity.properties);
var multiInstanceSequential = (activity.getProperty("multiInstance") == "sequential");
var multiInstanceParallel = (activity.getProperty("multiInstance") == "parrallel");
var collapsed = activity.getProperty("collapsed");
processDiagramCanvas.drawActivityMarkers(activity.getX(), activity.getY(), activity.getWidth(), activity.getHeight(),
multiInstanceSequential, multiInstanceParallel, collapsed);
}
/*
processDiagramCanvas.drawActivityMarkers(activity.getX(), activity.getY(), activity.getWidth(), activity.getHeight(), multiInstanceSequential,
multiInstanceParallel, collapsed);
*/
// TODO: Draw highlighted activities if they are present
},
setHighLights: function(highLights){
if (highLights.processDefinitionId == undefined) {
//console.error("Process instance " + highLights.processInstanceId + " doesn't exist");
return;
}
var processDiagram = this.getProcessDiagram(highLights.processDefinitionId);
if (processDiagram == undefined) {
//console.error("Process diagram " + highLights.processDefinitionId + " not found");
return;
}
var processDiagramCanvas = processDiagram.diagramCanvas;
// TODO: remove highLightes from all activities before set new highLight
for (var i in highLights.activities) {
var activityId = highLights.activities[i];
processDiagramCanvas.highLightActivity(activityId);
}
// TODO: remove highLightes from all flows before set new highLight
for (var i in highLights.flows) {
var flowId = highLights.flows[i];
var object = processDiagramCanvas.g.getById(flowId);
var flow = object.data("contextObject");
flow.isHighLighted = true;
processDiagramCanvas.highLightFlow(flowId);
}
},
drawHighLights: function(processInstanceId) {
// Load highLights for the processInstanceId
/*
var url = Lang.sub(this.options.processInstanceHighLightsUrl, {processInstanceId: processInstanceId});
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
cache: false,
async: true,
}).done(function(data) {
var highLights = data;
if (!highLights) {
console.log("highLights not found");
return;
}
console.log("highLights[" + highLights.processDefinitionId + "][" + processInstanceId + "]: ", highLights);
ProcessDiagramGenerator.setHighLights(highLights);
}).fail(function(jqXHR, textStatus){
console.log('Get HighLights['+processDefinitionId+'] failure: ', textStatus, jqXHR);
});
*/
// 解决无流程实例的时候抛出异常问题。
var url = Lang.sub(ActivitiRest.options.processInstanceUrl, {processInstanceId: processInstanceId});
var _drawHighLights = this._drawHighLights;
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
cache: false,
async: true,
}).done(function(data) {
ActivitiRest.getHighLights(processInstanceId, _drawHighLights);
}).fail(function(jqXHR, textStatus){
console.log('Get HighLights['+processInstanceId+'] failure: ', textStatus, jqXHR);
});
//ActivitiRest.getHighLights(processInstanceId, this._drawHighLights);
},
_drawHighLights: function() {
var highLights = this.highLights;
ProcessDiagramGenerator.setHighLights(highLights);
},
// Load processDefinition
drawDiagram: function(processDefinitionId) {
// Hide all diagrams
var diagrams = $("#" + this.options.diagramHolderId + " div.diagram");
diagrams.addClass("hidden");
// If processDefinitionId doesn't contain ":" then it's a "processDefinitionKey", not an id.
// Get process definition by key
if (processDefinitionId.indexOf(":") < 0) {
ActivitiRest.getProcessDefinitionByKey(processDefinitionId, this._drawDiagram);
} else {
this._drawDiagram.apply({processDefinitionId: processDefinitionId});
}
},
_drawDiagram: function() {
var processDefinitionId = this.processDefinitionId;
ProcessDiagramGenerator.addBreadCrumbsItem(processDefinitionId);
// Check if processDefinition is already loaded and rendered
var processDiagram = ProcessDiagramGenerator.getProcessDiagram(processDefinitionId);
if (processDiagram != undefined && processDiagram != null) {
//console.log("Process diagram " + processDefinitionId + " is already loaded");
//return;
var diagram = document.getElementById(processDefinitionId);
$(diagram).removeClass("hidden");
// Regenerate image
var processDefinitionDiagramLayout = processDiagram.processDefinitionDiagramLayout;
ProcessDiagramGenerator.generateDiagram(processDefinitionDiagramLayout);
return;
}
//console.time('loadDiagram');
// Load processDefinition
ActivitiRest.getProcessDefinition(processDefinitionId, ProcessDiagramGenerator._generateDiagram);
},
_generateDiagram: function() {
var processDefinitionDiagramLayout = this.processDefinitionDiagramLayout;
//console.log("process-definition-diagram-layout["+processDefinitionDiagramLayout.processDefinition.id+"]: ", processDefinitionDiagramLayout);
//console.timeEnd('loadDiagram');
//console.time('generateDiagram');
pb1.set('value', 0);
ProcessDiagramGenerator.generateDiagram(processDefinitionDiagramLayout);
},
getProcessDefinitionByKey: function(processDefinitionKey) {
var url = Lang.sub(this.options.processDefinitionByKeyUrl, {processDefinitionKey: processDefinitionKey});
var processDefinition;
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
cache: false,
async: false
}).done(function(data) {
//console.log("ajax returned data");
//console.log("ajax returned data:", data);
processDefinition = data;
if (!processDefinition) {
//console.error("Process definition '" + processDefinitionKey + "' not found");
}
}).fail(function(jqXHR, textStatus){
//console.error('Get diagram layout['+processDefinitionKey+'] failure: ', textStatus, jqXHR);
});
if (processDefinition) {
//console.log("Get process definition by key '" + processDefinitionKey + "': ", processDefinition.id);
return processDefinition;
} else {
return null;
}
},
addBreadCrumbsItem: function(processDefinitionId){
var TPL_UL_CONTAINER = '<ul></ul>',
TPL_LI_CONTAINER = '<li id="{id}", processDefinitionId="{processDefinitionId}"><span>{name}</span></li>';
if (!this.diagramBreadCrumbs)
this.diagramBreadCrumbs = $("#" + this.options.diagramBreadCrumbsId);
if (!this.diagramBreadCrumbs) return;
var ul = this.diagramBreadCrumbs.find("ul");
//console.log("ul: ", ul);
if (ul.size() == 0) {
ul = $(TPL_UL_CONTAINER);
this.diagramBreadCrumbs.append(ul);
}
var liListOld = ul.find("li");
//console.warn("liListOld", liListOld);
// TODO: if there is any items after current then remove that before adding new item (m.b. it is a duplicate)
var currentBreadCrumbsItemId = this.currentBreadCrumbsItemId;
found = false;
liListOld.each(
function(index, item) {
//console.warn("item:", $(this));
if (!found && currentBreadCrumbsItemId == $(this).attr("id")) {
found = true;
return;
}
if (found) {
//console.warn("remove ", $(this).attr("id"));
$(this).remove();
}
}
);
var liListNew = ul.find("li");
//console.log("liListNew size: ", liListNew.size());
var values = {
id: 'breadCrumbsItem_' + liListNew.size(),
processDefinitionId: processDefinitionId,
name: processDefinitionId
};
var tpl = Lang.sub(TPL_LI_CONTAINER, values);
//console.log("tpl: ", tpl);
ul.append(tpl);
var li = ul.find("#" + values.id);
//console.warn("li:", li);
$('#' + values.id).on('click', this._breadCrumbsItemClick);
ul.find("li").removeClass("selected");
li.attr("num", liListNew.size());
li.addClass("selected");
this.currentBreadCrumbsItemId = li.attr("id");
},
_breadCrumbsItemClick: function(){
var li = $(this),
id = li.attr("id"),
processDefinitionId = li.attr("processDefinitionId");
//console.warn("_breadCrumbsItemClick: ", id, ", processDefinitionId: ", processDefinitionId);
var ul = ProcessDiagramGenerator.diagramBreadCrumbs.one("ul");
ul.find("li").removeClass("selected");
li.addClass("selected");
ProcessDiagramGenerator.currentBreadCrumbsItemId = li.attr("id");
// Hide all diagrams
var diagrams = $("#"+ProcessDiagramGenerator.options.diagramHolderId+" div.diagram");
diagrams.addClass("hidden");
var processDiagram = ProcessDiagramGenerator.getProcessDiagram(processDefinitionId);
var diagram = document.getElementById(processDefinitionId);
if (!diagram) return;
$(diagram).removeClass("hidden");
// Regenerate image
var processDefinitionDiagramLayout = processDiagram.processDefinitionDiagramLayout;
ProcessDiagramGenerator.generateDiagram(processDefinitionDiagramLayout);
},
showFlowInfo: function(flow){
var diagramInfo = $("#" + this.options.diagramInfoId);
if (!diagramInfo) return;
var values = {
flow: flow.flow,
isDefault: (flow.isDefault)? "true":"",
isConditional: (flow.isConditional)? "true":"",
isHighLighted: (flow.isHighLighted)? "true":"",
sourceActivityId: flow.sourceActivityId,
destinationActivityId: flow.destinationActivityId
};
var TPL_FLOW_INFO = '<div>{flow}</div>'
+ '<div><b>sourceActivityId</b>: {sourceActivityId}</div>'
+ '<div><b>destinationActivityId</b>: {destinationActivityId}</div>'
+ '<div><b>isDefault</b>: {isDefault}</div>'
+ '<div><b>isConditional</b>: {isConditional}</div>'
+ '<div><b>isHighLighted</b>: {isHighLighted}</div>';
var tpl = Lang.sub(TPL_FLOW_INFO, values);
//console.log("info: ", tpl);
diagramInfo.html(tpl);
},
showActivityInfo: function(activity){
var diagramInfo = $("#" + this.options.diagramInfoId);
if (!diagramInfo) return;
var values = {
activityId: activity.getId(),
name: activity.getProperty("name"),
type: activity.getProperty("type")
};
var TPL_ACTIVITY_INFO = ''
+ '<div><b>activityId</b>: {activityId}</div>'
+ '<div><b>name</b>: {name}</div>'
+ '<div><b>type</b>: {type}</div>';
var TPL_CALLACTIVITY_INFO = ''
+ '<div><b>collapsed</b>: {collapsed}</div>'
+ '<div><b>processDefinitonKey</b>: {processDefinitonKey}</div>';
var template = TPL_ACTIVITY_INFO;
if (activity.getProperty("type") == "callActivity") {
values.collapsed = activity.getProperty("collapsed");
values.processDefinitonKey = activity.getProperty("processDefinitonKey");
template += TPL_CALLACTIVITY_INFO;
} else if (activity.getProperty("type") == "callActivity") {
}
var tpl = Lang.sub(template, values);
//console.log("info: ", tpl);
diagramInfo.html(tpl);
},
hideInfo: function(){
var diagramInfo = $("#" + this.options.diagramInfoId);
if (!diagramInfo) return;
diagramInfo.html("");
},
vvoid: function(){}
};
var Lang = {
SUBREGEX: /\{\s*([^\|\}]+?)\s*(?:\|([^\}]*))?\s*\}/g,
UNDEFINED: 'undefined',
isUndefined: function(o) {
return typeof o === Lang.UNDEFINED;
},
sub: function(s, o) {
return ((s.replace) ? s.replace(Lang.SUBREGEX, function(match, key) {
return (!Lang.isUndefined(o[key])) ? o[key] : match;
}) : s);
}
};
if (Lang.isUndefined(console)) {
console = { log: function() {}, warn: function() {}, error: function() {}};
}
ProcessDiagramGenerator.init();
\ No newline at end of file
... ...
/*
* This file is part of the jquery plugin "asyncQueue".
*
* (c) Sebastien Roch <roch.sebastien@gmail.com>
* @author (parallel) Dmitry Farafonov
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
(function($){
$.AsyncQueue = function() {
var that = this,
queue = [],
completeFunc,
failureFunc,
paused = false,
lastCallbackData,
_run,
_complete,
inQueue = 0,
defaultTimeOut = 10;
_run = function() {
var f = queue.shift();
if (f) {
inQueue++;
setTimeout(function(){
f.fn.apply(that, [that]);
if (!f.isParallel)
if (paused === false) {
_run();
}
inQueue --;
if (inQueue == 0 && queue.length == 0)
_complete();
}, f.timeOut);
if (f.isParallel)
if (paused === false) {
_run();
}
}
};
_complete = function(){
if (completeFunc)
completeFunc.apply(that, [that]);
};
this.onComplete = function(func) {
completeFunc = func;
};
this.onFailure = function(func) {
failureFunc = func;
};
this.add = function(func) {
// TODO: add callback for queue[i] complete
var obj = arguments[0];
if (obj && Object.prototype.toString.call(obj) === "[object Array]") {
var fn = arguments[1];
var timeOut = (typeof(arguments[2]) != "undefined")? arguments[2] : defaultTimeOut;
if (typeof(fn) == "function") {
for(var i = 0; i < obj.length; i++) {
var f = function(objx){
queue.push({isParallel: true, fn: function(){fn.apply(that, [that, objx]);}, timeOut: timeOut});
}(obj[i])
}
}
} else {
var fn = arguments[0];
var timeOut = (typeof(arguments[1]) != "undefined")? arguments[2] : defaultTimeOut;
queue.push({isParallel: false, fn: func, timeOut: timeOut});
}
return this;
};
this.addParallel = function(func, timeOut) {
// TODO: add callback for queue[i] complete
queue.push({isParallel: true, fn: func, timeOut: timeOut});
return this;
};
this.storeData = function(dataObject) {
lastCallbackData = dataObject;
return this;
};
this.lastCallbackData = function () {
return lastCallbackData;
};
this.run = function() {
paused = false;
_run();
};
this.pause = function () {
paused = true;
return this;
};
this.failure = function() {
paused = true;
if (failureFunc) {
var args = [that];
for(i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
failureFunc.apply(that, args);
}
};
this.size = function(){
return queue.length;
};
return this;
}
})(jQuery);
... ...