sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(example): update renderer/modeler example 

This commit updates the example to accompain a renderer AND modeler
component.
This commit is contained in:
Nico Rehwaldt 2014-03-18 17:01:24 +01:00
parent 286beb3aed
commit 0954398c8d
14 changed files with 332 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Gruntfile.js
View File

@ -59,7 +59,8 @@ module.exports = function(grunt) {
alias: [
'<%= config.sources %>/main.js:bpmn',
'<%= config.sources %>/Model.js:bpmn/Model',
'<%= config.sources %>/Diagram.js:bpmn/Diagram'
'<%= config.sources %>/Renderer.js:bpmn/Renderer',
'<%= config.sources %>/Modeler.js:bpmn/Modeler'
],
insertGlobalVars: []
},

65
example/app.css Normal file
View File

@ -0,0 +1,65 @@
* {
box-sizing: border-box;
}
body, html {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
height: 100%;
padding: 0;
margin: 0;
}
a:link {
text-decoration: none;
}
.content,
.content > div {
width: 100%;
height: 100%;
}
.content .intro {
text-align: center;
display: table;
font-size: 16px;
color: #111;
}
.content .intro .note {
vertical-align: middle;
text-align: center;
display: table-cell;
}
.content .canvas,
.content.with-diagram .intro {
display: none;
}
.content.with-diagram .canvas {
display: block;
}
.buttons {
position: fixed;
bottom: 20px;
left: 20px;
}
.logo {
width: 80px;
height: 80px;
position: fixed;
bottom: 20px;
right: 20px;
opacity: 0.8;
background: no-repeat url('bpmn-io-icon.png');
}

133
example/app.js Normal file
View File

@ -0,0 +1,133 @@
(function() {
var Model = require('bpmn/Model'),
Renderer = require('bpmn/Renderer'),
Modeler = require('bpmn/Modeler');
var container = $('#js-drop-zone');
var canvas = $('#js-canvas');
var BpmnJS = canvas.is('.modeler') ? Modeler : Renderer;
var renderer = new BpmnJS(canvas.get(0));
var newDiagramXML =
'<?xml version="1.0" encoding="UTF-8"?>' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://activiti.org/bpmn">' +
' <bpmn2:process id="Process_1" isExecutable="false">' +
' <bpmn2:startEvent id="StartEvent_1"/>' +
' </bpmn2:process>' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
' <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>' +
' </bpmndi:BPMNShape>' +
' </bpmndi:BPMNPlane>' +
' </bpmndi:BPMNDiagram>' +
'</bpmn2:definitions>';
function createNewDiagram() {
var bpmn = Model.instance();
openDiagram(newDiagramXML);
}
function openDiagram(xml) {
Model.fromXML(xml, 'bpmn:Definitions', function(err, definitions) {
if (err) {
console.error(err);
} else {
renderer.importDefinitions(definitions, function() {
container.addClass('with-diagram');
});
}
});
}
function saveDiagram(done) {
var definitions = renderer.definitions;
if (definitions) {
Model.toXML(definitions, { format: true }, function(err, xml) {
done(err, xml);
});
}
}
////// file drag / drop ///////////////////////
// check file api availability
if (!window.FileList || !window.FileReader) {
window.alert('Looks like you use an older browser that does not support drag and drop. Try using Chrome, Firefox or the Internet Explorer > 10.');
return;
}
(function onFileDrop(container, callback) {
function handleFileSelect(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var xml = e.target.result;
callback(xml);
};
reader.readAsText(file);
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
container.get(0).addEventListener('dragover', handleDragOver, false);
container.get(0).addEventListener('drop', handleFileSelect, false);
})(container, openDiagram);
$(document).on('ready', function() {
$('#js-create-diagram').click(function(e) {
e.stopPropagation();
e.preventDefault();
createNewDiagram();
});
var downloadLink = $('#js-download-diagram');
setInterval(function() {
saveDiagram(function(err, xml) {
if (!xml || err) {
return;
}
var encoded = encodeURIComponent(xml);
downloadLink.attr({
'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encoded,
'download': 'diagram.bpmn'
});
});
}, 5000);
});
})();

BIN
example/bpmn-io-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

0
example/style.css → example/diagram-js.css
View File

35
example/index-modeler.html Normal file
View File

@ -0,0 +1,35 @@
<html>
<head>
<title>bpmn-js demo</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="diagram-js.css" />
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
</head>
<body>
<div class="content" id="js-drop-zone">
<div class="intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
</div>
</div>
<div class="canvas modeler" id="js-canvas"></div>
</div>
<div class="logo"></div>
<div class="buttons">
<a id="js-download-diagram" href>
<i class="fa fa-download fa-3"></i>
</a>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="../bpmn.js"></script>
<script src="app.js"></script>
</html>

94
example/index.html
View File

@ -1,79 +1,35 @@
<html>
<head>
<title>bpmn-js demo</title>
<link rel="stylesheet" href="style.css" />
<style>
#drop-zone {
width: 200px;
line-height: 100px;
background: fuchsia;
color: #FFF;
font-size: 20px;
text-align: center;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="diagram-js.css" />
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
</head>
<body>
<div id="drop-zone">Drop BPMN here</div>
<output id="list"></output>
<div class="content" id="js-drop-zone">
<div id="canvas"></div>
<div class="intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
</div>
</div>
<div class="canvas" id="js-canvas"></div>
</div>
<div class="logo"></div>
<div class="buttons">
<a id="js-download-diagram" href>
<i class="fa fa-download fa-3"></i>
</a>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="../bpmn.js"></script>
<script>
var bpmn = require('bpmn');
var Model = require('bpmn/Model');
var Diagram = require('bpmn/Diagram');
</script>
<script>
var diagram = new Diagram(document.getElementById('canvas'));
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;
Model.fromXML(xml, 'bpmn:Definitions', function(err, definitions) {
if (err) {
console.error(err);
} else {
diagram.importDefinitions(definitions, function() {
console.log("import done!!");
});
}
});
/*renderer.renderXML(xml, function(err) {
console.log('diagram rendererd');
});*/
};
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>
<script src="app.js"></script>
</html>

23
lib/Diagram.js
View File

@ -1,23 +0,0 @@
var DiagramJS = require('diagram-js');
var Importer = require('./Importer');
function Diagram(container) {
this.container = container;
}
Diagram.prototype.importDefinitions = function(definitions, done) {
if (this.diagram) {
this.clear();
}
this.diagram = new DiagramJS({ canvas: { container: this.container }});
Importer.importBpmnDiagram(this.diagram, definitions, done);
};
Diagram.prototype.clear = function() {
this.container.innerHTML = '';
};
module.exports = Diagram;

15
lib/Importer.js
View File

@ -6,20 +6,31 @@ function importBpmnDiagram(diagram, definitions, done) {
var canvas = diagram.resolve('canvas');
var shapes = {};
var visitor = function(element, di, parent) {
var shape;
if (di.$type === 'bpmndi:BPMNShape') {
var bounds = di.bounds;
canvas.addShape({ id: element.id, type: element.$type, x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height });
shape = { id: element.id, type: element.$type, x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, parent: parent };
canvas.addShape(shape);
} else {
var waypoints = _.collect(di.waypoint, function(p) {
return { x: p.x, y: p.y };
});
canvas.addConnection({ id: element.id, waypoints: waypoints });
shape = { id: element.id, waypoints: waypoints };
canvas.addConnection(shape);
}
shapes[element.id] = shape;
return shape;
};
var walker = new BpmnTreeWalker(visitor);

17
lib/Modeler.js Normal file
View File

@ -0,0 +1,17 @@
var Diagram = require('diagram-js');
var Renderer = require('./Renderer');
require('diagram-js/src/features/DragUI');
require('diagram-js/src/features/SelectionUI');
function Modeler(container) {
Renderer.call(this, container);
}
Modeler.prototype = new Renderer();
Modeler.prototype.createDiagram = function() {
return new Diagram({ canvas: { container: this.container }, plugins: [ 'selectionUI', 'dragUI' ]});
};
module.exports = Modeler;

33
lib/Renderer.js Normal file
View File

@ -0,0 +1,33 @@
var Diagram = require('diagram-js');
var Importer = require('./Importer');
function Renderer(container) {
this.container = container;
}
Renderer.prototype.importDefinitions = function(definitions, done) {
if (this.diagram) {
this.clear();
}
this.diagram = this.createDiagram();
this.definitions = definitions;
Importer.importBpmnDiagram(this.diagram, definitions, done);
};
Renderer.prototype.exportDefinitions = function(done) {
};
Renderer.prototype.createDiagram = function() {
return new Diagram({ canvas: { container: this.container }});
};
Renderer.prototype.clear = function() {
this.container.innerHTML = '';
};
module.exports = Renderer;

4
lib/main.js
View File

@ -1,6 +1,6 @@
var Diagram = require('./Diagram'),
var Renderer = require('./Renderer'),
Model = require('./Model');
module.exports.Diagram = Diagram;
module.exports.Renderer = Renderer;
module.exports.Model = Model;

3
test/fixtures/bpmn/complex-no-extensions.bpmn vendored
View File

@ -1,4 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:signavio="http://www.signavio.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" exporter="Signavio Process Editor, http://www.signavio.com" exporterVersion="6.2.1" expressionLanguage="http://www.w3.org/1999/XPath" id="sid-d5a68e61-ca67-438f-971d-6843c39b383e" targetNamespace="http://www.signavio.com/bpmn20" typeLanguage="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:signavio="http://www.signavio.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" exporter="Signavio Process Editor, http://www.signavio.com" exporterVersion="6.2.1" expressionLanguage="http://www.w3.org/1999/XPath" id="sid-d5a68e61-ca67-438f-971d-6843c39b383e" targetNamespace="http://www.signavio.com/bpmn20" typeLanguage="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
<dataStore capacity="0" id="sid-1f3b3b35-28a1-4fff-8835-ae271ef486d5" isUnlimited="false" name="HR-Tool"/>
<collaboration id="sid-3524ea26-a8cb-4d8f-b997-347710bca219">
<extensionElements/>

10
test/spec/browser/ImporterSpec.js
View File

@ -1,7 +1,7 @@
var fs = require('fs');
var BpmnModel = require('../../../lib/Model'),
Diagram = require('../../../lib/Diagram');
Renderer = require('../../../lib/Renderer');
var Matchers = require('../Matchers');
@ -31,9 +31,9 @@ describe('Importer', function() {
var xml = fs.readFileSync('test/fixtures/bpmn/simple.bpmn', 'utf8');
read(xml, function(err, result) {
var diagram = new Diagram(container);
var renderer = new Renderer(container);
diagram.importDefinitions(result, done);
renderer.importDefinitions(result, done);
});
});
@ -42,9 +42,9 @@ describe('Importer', function() {
var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8');
read(xml, function(err, result) {
var diagram = new Diagram(container);
var renderer = new Renderer(container);
diagram.importDefinitions(result, done);
renderer.importDefinitions(result, done);
});
});
});