2014-03-11 15:24:31 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>bpmn-js demo</title>
|
2014-03-13 15:06:30 +00:00
|
|
|
<link rel="stylesheet" href="style.css" />
|
2014-03-13 19:21:42 +00:00
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#drop-zone {
|
|
|
|
|
width: 200px;
|
|
|
|
|
line-height: 100px;
|
|
|
|
|
background: fuchsia;
|
|
|
|
|
color: #FFF;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2014-03-11 15:24:31 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-03-13 19:21:42 +00:00
|
|
|
<div id="drop-zone">Drop BPMN here</div>
|
2014-03-11 15:24:31 +00:00
|
|
|
<output id="list"></output>
|
|
|
|
|
|
2014-03-13 15:06:30 +00:00
|
|
|
<div id="canvas"></div>
|
2014-03-13 10:21:03 +00:00
|
|
|
|
2014-03-11 15:24:31 +00:00
|
|
|
<script src="../bpmn.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
2014-03-13 10:21:03 +00:00
|
|
|
var bpmn = require('bpmn');
|
|
|
|
|
var Model = require('bpmn/Model');
|
2014-03-13 15:06:30 +00:00
|
|
|
var Diagram = require('bpmn/Diagram');
|
2014-03-11 15:24:31 +00:00
|
|
|
</script>
|
2014-03-13 10:21:03 +00:00
|
|
|
|
2014-03-11 15:24:31 +00:00
|
|
|
<script>
|
2014-03-13 19:21:42 +00:00
|
|
|
var diagram = new Diagram(document.getElementById('canvas'));
|
|
|
|
|
|
2014-03-11 15:24:31 +00:00
|
|
|
function handleFileSelect(evt) {
|
|
|
|
|
evt.stopPropagation();
|
|
|
|
|
evt.preventDefault();
|
|
|
|
|
|
|
|
|
|
var files = evt.dataTransfer.files; // FileList object.
|
|
|
|
|
|
|
|
|
|
// files is a FileList of File objects. List some properties.
|
|
|
|
|
for (var i = 0, f; f = files[i]; i++) {
|
|
|
|
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
|
|
|
|
|
reader.onload = function(e) {
|
|
|
|
|
|
|
|
|
|
var xml = e.target.result;
|
|
|
|
|
|
2014-03-13 10:21:03 +00:00
|
|
|
Model.fromXML(xml, 'bpmn:Definitions', function(err, definitions) {
|
|
|
|
|
if (err) {
|
|
|
|
|
console.error(err);
|
|
|
|
|
} else {
|
2014-03-13 15:06:30 +00:00
|
|
|
diagram.importDefinitions(definitions, function() {
|
|
|
|
|
console.log("import done!!");
|
|
|
|
|
});
|
2014-03-13 10:21:03 +00:00
|
|
|
}
|
2014-03-11 15:24:31 +00:00
|
|
|
});
|
2014-03-13 10:21:03 +00:00
|
|
|
|
|
|
|
|
/*renderer.renderXML(xml, function(err) {
|
|
|
|
|
console.log('diagram rendererd');
|
|
|
|
|
});*/
|
2014-03-11 15:24:31 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
reader.readAsText(f);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleDragOver(evt) {
|
|
|
|
|
evt.stopPropagation();
|
|
|
|
|
evt.preventDefault();
|
|
|
|
|
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Setup the dnd listeners.
|
|
|
|
|
var dropZone = document.getElementById('drop-zone');
|
|
|
|
|
dropZone.addEventListener('dragover', handleDragOver, false);
|
|
|
|
|
dropZone.addEventListener('drop', handleFileSelect, false);
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
