You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
3.9 KiB
152 lines
3.9 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<title>Hello World</title>
|
||
|
|
|
||
|
|
<!-- required modeler styles -->
|
||
|
|
<link rel="stylesheet" href="dist/assets/bpmn-js.css">
|
||
|
|
<link rel="stylesheet" href="dist/assets/diagram-js.css">
|
||
|
|
<link rel="stylesheet" href="dist/assets/bpmn-font/css/bpmn.css">
|
||
|
|
|
||
|
|
<!-- modeler distro -->
|
||
|
|
<script src="dist/bpmn-modeler.development.js"></script>
|
||
|
|
|
||
|
|
<!-- needed for this example only -->
|
||
|
|
<script src="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 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#save-button {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 20px;
|
||
|
|
left: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="canvas"></div>
|
||
|
|
|
||
|
|
<button id="save-button">print to console</button>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var diagramUrl = './diagram.bpmn';
|
||
|
|
|
||
|
|
// modeler instance
|
||
|
|
var bpmnModeler = new BpmnJS({
|
||
|
|
container: '#canvas',
|
||
|
|
keyboard: {
|
||
|
|
bindTo: window
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Save diagram contents and print them to the console.
|
||
|
|
*/
|
||
|
|
async function exportDiagram() {
|
||
|
|
|
||
|
|
try {
|
||
|
|
|
||
|
|
var result = await bpmnModeler.saveXML({ format: true });
|
||
|
|
|
||
|
|
alert('Diagram exported. Check the developer tools!');
|
||
|
|
|
||
|
|
console.log('DIAGRAM', result.xml);
|
||
|
|
} catch (err) {
|
||
|
|
|
||
|
|
console.error('could not save BPMN 2.0 diagram', err);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Open diagram in our modeler instance.
|
||
|
|
*
|
||
|
|
* @param {String} bpmnXML diagram to display
|
||
|
|
*/
|
||
|
|
async function openDiagram(bpmnXML) {
|
||
|
|
|
||
|
|
// import diagram
|
||
|
|
try {
|
||
|
|
|
||
|
|
await bpmnModeler.importXML(bpmnXML);
|
||
|
|
|
||
|
|
// access modeler components
|
||
|
|
var canvas = bpmnModeler.get('canvas');
|
||
|
|
var overlays = bpmnModeler.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');
|
||
|
|
|
||
|
|
// wire save button
|
||
|
|
$('#save-button').click(exportDiagram);
|
||
|
|
</script>
|
||
|
|
<!--
|
||
|
|
Thanks for trying out our BPMN toolkit!
|
||
|
|
|
||
|
|
This example uses the pre-built distribution of the bpmn-js modeler.
|
||
|
|
Consider rolling your own distribution to have more flexibility
|
||
|
|
regarding which features to include.
|
||
|
|
|
||
|
|
Checkout our advanced examples section to learn more:
|
||
|
|
* https://github.com/bpmn-io/bpmn-js-examples#advanced
|
||
|
|
|
||
|
|
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/viewer.html
|
||
|
|
-->
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|