提交 | 用户 | 时间
|
1ac2bc
|
1 |
<html> |
懒 |
2 |
<head> |
|
3 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
4 |
|
|
5 |
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> |
|
6 |
<script src="js/jstools.js" type="text/javascript" charset="utf-8"></script> |
|
7 |
<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script> |
|
8 |
|
|
9 |
<script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script> |
|
10 |
<script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script> |
|
11 |
<script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script> |
|
12 |
|
|
13 |
<script src="js/Color.js" type="text/javascript" charset="utf-8"></script> |
|
14 |
<script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script> |
|
15 |
<script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script> |
|
16 |
<script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script> |
|
17 |
<script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script> |
|
18 |
<script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script> |
|
19 |
<script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script> |
|
20 |
|
|
21 |
<style type="text/css" media="screen"> |
|
22 |
|
|
23 |
</style> |
|
24 |
</head> |
|
25 |
<body> |
|
26 |
<div class="wrapper"> |
|
27 |
<div id="pb1"></div> |
|
28 |
<div id="overlayBox" > |
|
29 |
<div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div> |
|
30 |
<div id="diagramHolder" class="diagramHolder"></div> |
|
31 |
<div class="diagram-info" id="diagramInfo"></div> |
|
32 |
</div> |
|
33 |
</div> |
|
34 |
<script language='javascript'> |
|
35 |
var DiagramGenerator = {}; |
|
36 |
var pb1; |
|
37 |
$(document).ready(function(){ |
|
38 |
var query_string = {}; |
|
39 |
var query = window.location.search.substring(1); |
|
40 |
var vars = query.split("&"); |
|
41 |
for (var i=0;i<vars.length;i++) { |
|
42 |
var pair = vars[i].split("="); |
|
43 |
query_string[pair[0]] = pair[1]; |
|
44 |
} |
|
45 |
|
|
46 |
var processDefinitionId = query_string["processDefinitionId"]; |
|
47 |
var processInstanceId = query_string["processInstanceId"]; |
|
48 |
|
|
49 |
console.log("Initialize progress bar"); |
|
50 |
|
|
51 |
pb1 = new $.ProgressBar({ |
|
52 |
boundingBox: '#pb1', |
|
53 |
label: 'Progressbar!', |
|
54 |
on: { |
|
55 |
complete: function() { |
|
56 |
console.log("Progress Bar COMPLETE"); |
|
57 |
this.set('label', 'complete!'); |
|
58 |
if (processInstanceId) { |
|
59 |
ProcessDiagramGenerator.drawHighLights(processInstanceId); |
|
60 |
} |
|
61 |
}, |
|
62 |
valueChange: function(e) { |
|
63 |
this.set('label', e.newVal + '%'); |
|
64 |
} |
|
65 |
}, |
|
66 |
value: 0 |
|
67 |
}); |
|
68 |
console.log("Progress bar inited"); |
|
69 |
|
|
70 |
ProcessDiagramGenerator.options = { |
|
71 |
diagramBreadCrumbsId: "diagramBreadCrumbs", |
|
72 |
diagramHolderId: "diagramHolder", |
|
73 |
diagramInfoId: "diagramInfo", |
|
74 |
on: { |
|
75 |
click: function(canvas, element, contextObject){ |
|
76 |
var mouseEvent = this; |
|
77 |
console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
78 |
|
|
79 |
if (contextObject.getProperty("type") == "callActivity") { |
|
80 |
var processDefinitonKey = contextObject.getProperty("processDefinitonKey"); |
|
81 |
var processDefinitons = contextObject.getProperty("processDefinitons"); |
|
82 |
var processDefiniton = processDefinitons[0]; |
|
83 |
console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject); |
|
84 |
|
|
85 |
// Load processDefinition |
|
86 |
ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId); |
|
87 |
} |
|
88 |
}, |
|
89 |
rightClick: function(canvas, element, contextObject){ |
|
90 |
var mouseEvent = this; |
|
91 |
console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
92 |
}, |
|
93 |
over: function(canvas, element, contextObject){ |
|
94 |
var mouseEvent = this; |
|
95 |
//console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
96 |
|
|
97 |
// TODO: show tooltip-window with contextObject info |
|
98 |
ProcessDiagramGenerator.showActivityInfo(contextObject); |
|
99 |
}, |
|
100 |
out: function(canvas, element, contextObject){ |
|
101 |
var mouseEvent = this; |
|
102 |
//console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
103 |
|
|
104 |
ProcessDiagramGenerator.hideInfo(); |
|
105 |
} |
|
106 |
} |
|
107 |
}; |
|
108 |
|
|
109 |
var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/"; |
|
110 |
var shortenedUrl = window.document.location.href.replace(baseUrl, ""); |
|
111 |
baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/")); |
|
112 |
|
|
113 |
ActivitiRest.options = { |
|
114 |
processInstanceHighLightsUrl: baseUrl + "/service/process-instance/{processInstanceId}/highlights?callback=?", |
|
115 |
processDefinitionUrl: baseUrl + "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?", |
|
116 |
processDefinitionByKeyUrl: baseUrl + "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?" |
|
117 |
}; |
|
118 |
|
|
119 |
if (processDefinitionId) { |
|
120 |
ProcessDiagramGenerator.drawDiagram(processDefinitionId); |
|
121 |
|
|
122 |
} else { |
|
123 |
alert("processDefinitionId parameter is required"); |
|
124 |
} |
|
125 |
}); |
|
126 |
|
|
127 |
|
|
128 |
</script> |
|
129 |
</body> |
|
130 |
</html> |