diff --git a/Gruntfile.js b/Gruntfile.js
index 97f2445f..adf8a23e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -59,7 +59,7 @@ module.exports = function(grunt) {
alias: [
'<%= config.sources %>/main.js:bpmn',
'<%= config.sources %>/Model.js:bpmn/Model',
- '<%= config.sources %>/Renderer.js:bpmn/Renderer',
+ '<%= config.sources %>/Viewer.js:bpmn/Viewer',
'<%= config.sources %>/Modeler.js:bpmn/Modeler'
],
insertGlobalVars: []
diff --git a/example/app.js b/example/app.js
index 9b9f571e..e0d155e2 100644
--- a/example/app.js
+++ b/example/app.js
@@ -1,14 +1,14 @@
(function() {
var Model = require('bpmn/Model'),
- Renderer = require('bpmn/Renderer'),
+ Viewer = require('bpmn/Viewer'),
Modeler = require('bpmn/Modeler');
var container = $('#js-drop-zone');
var canvas = $('#js-canvas');
- var BpmnJS = canvas.is('.modeler') ? Modeler : Renderer;
+ var BpmnJS = canvas.is('.modeler') ? Modeler : Viewer;
var renderer = new BpmnJS(canvas.get(0));
diff --git a/example/diagram-js.css b/example/diagram-js.css
index de79351a..cdc85c9d 100644
--- a/example/diagram-js.css
+++ b/example/diagram-js.css
@@ -57,15 +57,10 @@
/**
* shape / connection basic styles
*/
-.djs-shape .djs-visual {
- stroke: black;
- stroke-width: 2px;
- fill: #F3F3F3;
-}
+.djs-shape .djs-visual { }
.djs-connection .djs-visual {
stroke-width: 2px;
- stroke: #333;
fill: none;
}
diff --git a/lib/Importer.js b/lib/Importer.js
index 3e1898bb..c2666de3 100644
--- a/lib/Importer.js
+++ b/lib/Importer.js
@@ -4,7 +4,7 @@ var BpmnTreeWalker = require('./BpmnTreeWalker');
function importBpmnDiagram(diagram, definitions, done) {
- var canvas = diagram.resolve('canvas');
+ var canvas = diagram.get('canvas');
var shapes = {};
diff --git a/lib/Modeler.js b/lib/Modeler.js
index 34e853cf..e11e9aca 100644
--- a/lib/Modeler.js
+++ b/lib/Modeler.js
@@ -1,17 +1,27 @@
var Diagram = require('diagram-js');
-var Renderer = require('./Renderer');
+
+var bpmnModule = require('./di').defaultModule,
+ Viewer = require('./Viewer');
+
+require('./draw/BpmnRenderer');
require('diagram-js/src/features/DragUI');
require('diagram-js/src/features/SelectionUI');
+
function Modeler(container) {
- Renderer.call(this, container);
+ Viewer.call(this, container);
}
-Modeler.prototype = new Renderer();
+Modeler.prototype = new Viewer();
Modeler.prototype.createDiagram = function() {
- return new Diagram({ canvas: { container: this.container }, plugins: [ 'selectionUI', 'dragUI' ]});
+
+ return new Diagram({
+ canvas: { container: this.container },
+ modules: [ bpmnModule ],
+ components: [ 'selectionUI', 'dragUI' ]
+ });
};
module.exports = Modeler;
\ No newline at end of file
diff --git a/lib/Renderer.js b/lib/Viewer.js
similarity index 60%
rename from lib/Renderer.js
rename to lib/Viewer.js
index 75bdd4e7..363ceaeb 100644
--- a/lib/Renderer.js
+++ b/lib/Viewer.js
@@ -1,11 +1,11 @@
var Diagram = require('diagram-js');
var Importer = require('./Importer');
-function Renderer(container) {
+function Viewer(container) {
this.container = container;
}
-Renderer.prototype.importDefinitions = function(definitions, done) {
+Viewer.prototype.importDefinitions = function(definitions, done) {
if (this.diagram) {
this.clear();
@@ -18,16 +18,16 @@ Renderer.prototype.importDefinitions = function(definitions, done) {
};
-Renderer.prototype.exportDefinitions = function(done) {
+Viewer.prototype.exportDefinitions = function(done) {
};
-Renderer.prototype.createDiagram = function() {
+Viewer.prototype.createDiagram = function() {
return new Diagram({ canvas: { container: this.container }});
};
-Renderer.prototype.clear = function() {
+Viewer.prototype.clear = function() {
this.container.innerHTML = '';
};
-module.exports = Renderer;
\ No newline at end of file
+module.exports = Viewer;
\ No newline at end of file
diff --git a/lib/di.js b/lib/di.js
new file mode 100644
index 00000000..a8001394
--- /dev/null
+++ b/lib/di.js
@@ -0,0 +1,5 @@
+var Module = require('didi').Module;
+
+module.exports = {
+ defaultModule: new Module()
+};
\ No newline at end of file
diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
new file mode 100644
index 00000000..578f2cb8
--- /dev/null
+++ b/lib/draw/BpmnRenderer.js
@@ -0,0 +1,132 @@
+var bpmnModule = require('../di').defaultModule;
+
+var DefaultRenderer = require('diagram-js/src/draw/Renderer');
+
+function BpmnRenderer() {
+
+ var TASK_BORDER_RADIUS = 8;
+ var INNER_OUTER_DIST = 3;
+
+ function drawCircle(p, width, height, offset) {
+
+ offset = offset || 0;
+
+ var cx = width / 2,
+ cy = height / 2;
+
+ return p.circle(cx, cy, Math.round((width + height) / 4 - offset)).attr({
+ 'stroke': 'Black',
+ 'stroke-width': 2,
+ 'fill': 'White'
+ });
+ }
+
+ function drawRect(p, width, height, r, offset) {
+ offset = offset || 0;
+
+ var x, y;
+
+ x = y = offset;
+
+ return p.rect(offset, offset, width - offset * 2, height - offset * 2, r).attr({
+ 'stroke': 'Black',
+ 'stroke-width': 2,
+ 'fill': 'White'
+ });
+ }
+
+ function as(type) {
+ return function(p, data) {
+ return handlers[type](p, data);
+ };
+ }
+
+ function renderer(type) {
+ return handlers[type];
+ }
+
+ var handlers = {
+ 'bpmn:Event': function(p, data) {
+ var circle = drawCircle(p, data.width, data.height);
+ return circle;
+ },
+ 'bpmn:StartEvent': as('bpmn:Event'),
+ 'bpmn:EndEvent': function(p, data) {
+ var circle = renderer('bpmn:Event')(p, data);
+
+ circle.attr({
+ 'stroke-width': 4
+ });
+
+ return circle;
+ },
+ 'bpmn:IntermediateEvent': function(p, data) {
+ var outer = renderer('bpmn:Event')(p, data);
+ var inner = drawCircle(p, data.width, data.height, INNER_OUTER_DIST);
+
+ outer.attr('stroke-width', 1);
+ inner.attr('stroke-width', 1);
+
+ return outer;
+ },
+ 'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
+ 'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
+
+ 'bpmn:Activity': function(p, data) {
+ var rect = drawRect(p, data.width, data.height, TASK_BORDER_RADIUS);
+ return rect;
+ },
+
+ 'bpmn:Task': as('bpmn:Activity'),
+ 'bpmn:ServiceTask': as('bpmn:Activity'),
+ 'bpmn:UserTask': as('bpmn:Activity'),
+ 'bpmn:ManualTask': as('bpmn:Activity'),
+ 'bpmn:SendTask': as('bpmn:Activity'),
+ 'bpmn:ReceiveTask': as('bpmn:Activity'),
+ 'bpmn:ScriptTask': as('bpmn:Activity'),
+ 'bpmn:BusinessRuleTask': as('bpmn:Activity'),
+ 'bpmn:SubProcess': as('bpmn:Activity'),
+ 'bpmn:AdHocSubProcess': as('bpmn:Activity'),
+ 'bpmn:Transaction': function(p, data) {
+ var outer = renderer('bpmn:Activity')(p, data);
+ var inner = drawRect(p, data.width, data.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST);
+
+ outer.attr('stroke-width', 1.5);
+ inner.attr('stroke-width', 1.5);
+
+ return outer;
+ },
+ 'bpmn:CallActivity': function(p, data) {
+ var rect = renderer('bpmn:Activity')(p, data);
+ rect.attr('stroke-width', 4);
+ return rect;
+ },
+
+ 'bpmn:Participant': as('bpmn:Lane'),
+ 'bpmn:Lane': function(p, data) {
+ var rect = drawRect(p, data.width, data.height, 0);
+ return rect;
+ }
+ };
+
+ function drawShape(parent, data) {
+
+ var type = data.type;
+ var h = handlers[type];
+
+ if (!h) {
+ return BpmnRenderer.prototype.drawShape(parent, data);
+ } else {
+ return h(parent, data);
+ }
+ }
+
+ this.drawShape = drawShape;
+}
+
+BpmnRenderer.prototype = new DefaultRenderer();
+
+
+bpmnModule.type('renderer', [ 'snap', BpmnRenderer ]);
+
+module.exports = BpmnRenderer;
\ No newline at end of file
diff --git a/lib/main.js b/lib/main.js
index d48be2a6..70efddb6 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -1,6 +1,6 @@
-var Renderer = require('./Renderer'),
+var Viewer = require('./Viewer'),
Model = require('./Model');
-module.exports.Renderer = Renderer;
+module.exports.Viewer = Viewer;
module.exports.Model = Model;
\ No newline at end of file
diff --git a/package.json b/package.json
index 3c216b3f..d829770b 100644
--- a/package.json
+++ b/package.json
@@ -50,8 +50,9 @@
"jsondiffpatch": "~0.1.4",
"xsd-schema-validator": "0.0.3",
"sax": "~0.6.0",
+ "brfs": "~1.0.0",
"lodash": "~2.4.0",
- "brfs": "~1.0.0"
+ "didi": "~0.0.4"
},
"dependencies": {
"moddle": "~0.0.1",
@@ -59,6 +60,7 @@
"diagram-js": "~0.0.1"
},
"peerDependencies": {
- "lodash": "~2.4.0"
+ "lodash": "~2.4.0",
+ "didi": "~0.0.4"
}
}
diff --git a/test/fixtures/bpmn/simple/activities.bpmn b/test/fixtures/bpmn/simple/activities.bpmn
new file mode 100644
index 00000000..2b65bb21
--- /dev/null
+++ b/test/fixtures/bpmn/simple/activities.bpmn
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/fixtures/bpmn/simple/data-items.bpmn b/test/fixtures/bpmn/simple/data-items.bpmn
new file mode 100644
index 00000000..089d0cb5
--- /dev/null
+++ b/test/fixtures/bpmn/simple/data-items.bpmn
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/fixtures/bpmn/simple/events.bpmn b/test/fixtures/bpmn/simple/events.bpmn
new file mode 100644
index 00000000..61b45d8a
--- /dev/null
+++ b/test/fixtures/bpmn/simple/events.bpmn
@@ -0,0 +1,226 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/fixtures/bpmn/simple/gateways.bpmn b/test/fixtures/bpmn/simple/gateways.bpmn
new file mode 100644
index 00000000..7d35fe5f
--- /dev/null
+++ b/test/fixtures/bpmn/simple/gateways.bpmn
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file