forked from camunda-consulting/camunda-7-code-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bpmn.html
152 lines (131 loc) · 5.23 KB
/
bpmn.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- own CCS style for highlight of activity - color can be easily changed here -->
<style type="text/css">
.djs-container .highlight .djs-outline {
stroke-width: 2px important;
stroke: #08c !important;
fill: rgba(82,180,21,0.35) !important;
}
.djs-container .highlight .djs-visual>:nth-child(1) {
fill: rgba(82,180,21,0.35) !important;
}
.bpmn-badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
color: #fff;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: #777;
border-radius: 10px;
font-size: 12px;
border-width: 1px;
border-style: solid;
background-color: #52b415; // bpmn.io #610000 // camunda
border-color: #143d52;
color: #143d52;
}
</style>
<link type="text/css" rel="stylesheet" href="webjars/bootstrap/2.3.2/css/bootstrap.css" />
<!-- load jquery and bpmn-js dependencies -->
<script type="text/javascript" src="webjars/jquery/1.9.0/jquery.js"></script>
<!-- bpmn-js viewer -->
<script type="text/javascript" src="webjars/bpmn-js/0.16.0/dist/bpmn-navigated-viewer.js"></script>
<link type="text/css" rel="stylesheet" href="webjars/bpmn-js/0.16.0/dist/assets/diagram-js.css" />
<link type="text/css" rel="stylesheet" href="webjars/bpmn-js/0.16.0/dist/assets/bpmn-font/css/bpmn-embedded.css" />
<link type="text/css" rel="stylesheet" href="resources/css/modeler.css" />
</head>
<body>
<!-- to draw on -->
<div class="content" id="js-drop-zone">
<div id="diagramCanvas"></div>
</div>
<script>
$(document).ready(function() {
// get URL query parameter
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var taskId = getParameterByName('taskId');
var processInstanceId = getParameterByName('processInstanceId');
var restAccess = '/engine-rest';
var BpmnViewer = window.BpmnJS;
var viewer = new BpmnViewer({container: '#diagramCanvas', width: '100%', height: '100%'});
var container = $('#js-drop-zone');
$.get(restAccess + '/history/process-instance/' + processInstanceId, function(pi) {
$.get(restAccess + '/process-definition/' + pi.processDefinitionId + '/xml', function(data) {
// show it in bpmn.io
viewer.importXML(data.bpmn20Xml, function(err) {
if (err) {
console.log('error rendering', err);
} else {
var canvas = viewer.get('canvas');
var overlays = viewer.get('overlays');
container.removeClass('with-error')
.addClass('with-diagram');
// zoom to fit full viewport
canvas.zoom('fit-viewport');
// load runtime status
$.get(restAccess + '/process-instance/' + processInstanceId + '/activity-instances/', function(actInstTree) {
addMarkerForActivities(canvas, actInstTree);
}).fail(function(){}); // ignore 404 - ProcessInstance might be ended
// completed / not scope -> Overlay with Info
$.get(restAccess + '/history/activity-instance/?processInstanceId=' + processInstanceId, function(actInstList) {
addHistoryInfoOverlay(overlays, actInstList)
});
// TODO click to show documentation
// See e.g. https://github.com/bpmn-io/bpmn-js-examples/tree/master/commenting
}
});
});
});
});
function addMarkerForActivities(canvas, actInstTree) {
if (actInstTree.childTransitionInstances.length==0 && actInstTree.childActivityInstances.length==0) {
canvas.addMarker(actInstTree.activityId, 'highlight');
}
else {
for (index=0; index < actInstTree.childTransitionInstances.length; ++index) {
canvas.addMarker(actInstTree.childTransitionInstances[index].activityId, 'highlight');
}
for (index=0; index < actInstTree.childActivityInstances.length; ++index) {
// add recursively
addMarkerForActivities(canvas, actInstTree.childActivityInstances[index]);
}
}
}
function addHistoryInfoOverlay(overlays, actInstList) {
for (index = 0; index < actInstList.length; ++index) {
var calledPiLink = '';
var finished = '';
if (actInstList[index].endTime) {
finished = '<i class="icon-ok icon-white"></i>';
}
if (actInstList[index].calledCaseInstanceId) {
calledPiLink = '<a href="cmmn.html?caseInstanceId=' + actInstList[index].calledCaseInstanceId + '"><i class="icon-circle-arrow-right icon-white"></i></a>';
}
if (actInstList[index].calledProcessInstanceId) {
calledPiLink = '<a href="bpmn.html?processInstanceId=' + actInstList[index].calledProcessInstanceId + '"><i class="icon-circle-arrow-right icon-white"></i></a>';
}
if (finished || calledPiLink) {
overlays.add(actInstList[index].activityId, {
position: {
top: 0,
right: 0
},
html: '<div class="bpmn-badge">'+ finished + calledPiLink+'</div>'
});
}
}
}
</script>
</body>
</html>