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
<!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> |