forked from bpmn-io/bpmn-js-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
viewer.html
115 lines (91 loc) · 3.06 KB
/
viewer.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!-- viewer distro (without pan and zoom) -->
<!--
<script src="https://unpkg.com/[email protected]/dist/bpmn-viewer.development.js"></script>
-->
<!-- viewer distro (with pan and zoom) -->
<script src="https://unpkg.com/[email protected]/dist/bpmn-navigated-viewer.development.js"></script>
<!-- needed for this example only -->
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<!-- example styles -->
<style>
html, body, #canvas {
height: 100%;
padding: 0;
margin: 0;
}
.diagram-note {
background-color: rgba(66, 180, 21, 0.7);
color: White;
border-radius: 5px;
font-family: Arial;
font-size: 12px;
padding: 5px;
min-height: 16px;
width: 50px;
text-align: center;
}
.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}
</style>
</head>
<body>
<div id="canvas"></div>
<script>
var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
// viewer instance
var bpmnViewer = new BpmnJS({
container: '#canvas'
});
/**
* Open diagram in our viewer instance.
*
* @param {String} bpmnXML diagram to display
*/
async function openDiagram(bpmnXML) {
// import diagram
try {
await bpmnViewer.importXML(bpmnXML);
// access viewer components
var canvas = bpmnViewer.get('canvas');
var overlays = bpmnViewer.get('overlays');
// zoom to fit full viewport
canvas.zoom('fit-viewport');
// attach an overlay to a node
overlays.add('SCAN_OK', 'note', {
position: {
bottom: 0,
right: 0
},
html: '<div class="diagram-note">Mixed up the labels?</div>'
});
// add marker
canvas.addMarker('SCAN_OK', 'needs-discussion');
} catch (err) {
console.error('could not import BPMN 2.0 diagram', err);
}
}
// load external diagram file via AJAX and open it
$.get(diagramUrl, openDiagram, 'text');
</script>
<!--
Thanks for trying out our BPMN toolkit!
If you'd like to learn more about what our library,
continue with some more basic examples:
* https://github.com/bpmn-io/bpmn-js-examples/overlays
* https://github.com/bpmn-io/bpmn-js-examples/interaction
* https://github.com/bpmn-io/bpmn-js-examples/colors
* https://github.com/bpmn-io/bpmn-js-examples/commenting
To get a bit broader overview over how bpmn-js works,
follow our walkthrough:
* https://bpmn.io/toolkit/bpmn-js/walkthrough/
Related starters:
* https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/starter/modeler.html
-->
</body>
</html>