@huksley/bpmn-to-image
Version:
Convert a BPMN 2.0 diagrams to PDF, SVG or PNG images
200 lines (155 loc) • 4.56 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Diagram Viewer</title>
<!-- bpmn-js script is injected via loadScript -->
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html, body, #canvas {
height: 100%;
padding: 0;
margin: 0;
}
.footer {
position: absolute;
bottom: 15px;
left: 15px;
}
#title {
font-size: .85em;
color: #AAA;
font-weight: normal;
padding: 5px 0;
margin: 0;
}
</style>
</head>
<body>
<div id="canvas"></div>
<div class="footer">
<h4 id="title"></h4>
</div>
<script>
// viewer instance, lazily initialized
var bpmnViewer;
/**
* Get or create viewer instance.
*
* @return {BpmnViewer}
*/
function getViewer() {
if (bpmnViewer) {
return bpmnViewer;
}
bpmnViewer = new BpmnJS({
container: '#canvas'
});
bpmnViewer.on('import.done', function(event) {
var error = event.error;
var warnings = event.warnings;
if (error) {
return console.error('could not import BPMN 2.0 diagram', error);
}
// zoom to fit full viewport
bpmnViewer.get('canvas').zoom('fit-viewport');
});
return bpmnViewer;
}
/**
* Open diagram in our viewer instance.
*
* @param {String} bpmnXML diagram to display
* @param {Object} [options]
* @param {Dimensions} [options.minDimensions]
*
* @return {Promise<Bounds, Error>}
*/
function openDiagram(bpmnXML, options) {
// viewer instance, lazily initialized
const bpmnViewer = getViewer();
options = options || {};
var minDimensions = options.minDimensions || {
width: 0,
height: 0
};
var title = options.title;
var footer = options.footer;
return new Promise(function(resolve, reject) {
bpmnViewer.importXML(bpmnXML, function(err) {
if (err) {
return reject(err);
}
var viewbox = bpmnViewer.get('canvas').viewbox();
// uses provided title
var titleNode = document.querySelector('#title');
if (title) {
titleNode.textContent = title;
}
titleNode.style.display = title ? 'block' : 'none';
var width = Math.max(viewbox.inner.width, minDimensions.width);
var diagramHeight = Math.max(viewbox.inner.height + (footer ? 90 : 0), minDimensions.height);
var desiredViewport = {
width,
height: diagramHeight + (footer ? 0 : 90),
diagramHeight
};
return resolve(desiredViewport);
});
});
}
/**
* Resize to viewport
*/
function resize() {
const bpmnViewer = getViewer();
var canvas = bpmnViewer.get('canvas');
return new Promise(function(resolve, reject) {
canvas.resized();
canvas.zoom('fit-viewport');
return resolve();
});
}
function toSVG() {
const bpmnViewer = getViewer();
return new Promise(function(resolve, reject) {
bpmnViewer.saveSVG(function(err, svg) {
if (err) {
reject(err);
} else {
resolve(svg);
}
});
});
}
/**
* Load the script that provides the BpmnJS global
*
* @param {String} src
*
* @return {Promise<Void>}
*/
function loadScript(src) {
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf8';
script.src = src;
const promise = new Promise((resolve, reject) => {
function callback(fn) {
return (arg) => {
script.onload = script.onerror = null;
return fn(arg);
};
}
script.onload = callback(resolve);
script.onerror = callback(reject);
});
head.appendChild(script);
return promise;
}
</script>
</body>
</html>