feat(BpmnRenderer): basic render events and activities

Related to #1

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: []

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));
 

example/diagram-js.css

@@ -57,15 +57,10 @@
 /**
  * shape / connection basic styles
  */
-.djs-shape .djs-visual {
+.djs-shape .djs-visual { }
-  stroke: black;
-  stroke-width: 2px;
-  fill: #F3F3F3;
-}
 
 .djs-connection .djs-visual {
   stroke-width: 2px;
-  stroke: #333;
   fill: none;
 }
 

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 = {};
 

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;

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;
+module.exports = Viewer;

lib/di.js

@@ -0,0 +1,5 @@
+var Module = require('didi').Module;
+
+module.exports = {
+  defaultModule: new Module()
+};

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;

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;

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"
   }
 }

test/fixtures/bpmn/simple/activities.bpmn

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:task id="Task_1"/>
+    <bpmn:userTask id="UserTask_1"/>
+    <bpmn:serviceTask id="ServiceTask_1"/>
+    <bpmn:sendTask id="SendTask_1"/>
+    <bpmn:receiveTask id="ReceiveTask_1"/>
+    <bpmn:scriptTask id="ScriptTask_1"/>
+    <bpmn:businessRuleTask id="BusinessRuleTask_1"/>
+    <bpmn:manualTask id="ManualTask_1"/>
+    <bpmn:subProcess id="SubProcess_2"/>
+    <bpmn:subProcess id="SubProcess_1"/>
+    <bpmn:transaction id="Transaction_1"/>
+    <bpmn:transaction id="Transaction_2"/>
+    <bpmn:adHocSubProcess id="AdHocSubProcess_1"/>
+    <bpmn:adHocSubProcess id="AdHocSubProcess_2"/>
+    <bpmn:callActivity id="CallActivity_1"/>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_Task_4" bpmnElement="Task_1">
+        <dc:Bounds height="80.0" width="100.0" x="112.0" y="105.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ManualTask_2" bpmnElement="ManualTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="264.0" y="348.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_UserTask_2" bpmnElement="UserTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="112.0" y="225.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ScriptTask_2" bpmnElement="ScriptTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="264.0" y="105.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_BusinessRuleTask_2" bpmnElement="BusinessRuleTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="264.0" y="228.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ServiceTask_2" bpmnElement="ServiceTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="112.0" y="348.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ReceiveTask_2" bpmnElement="ReceiveTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="264.0" y="468.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_SendTask_2" bpmnElement="SendTask_1">
+        <dc:Bounds height="80.0" width="100.0" x="264.0" y="591.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_SubProcess_2" bpmnElement="SubProcess_1">
+        <dc:Bounds height="80.0" width="100.0" x="672.0" y="105.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_SubProcess_3" bpmnElement="SubProcess_2" isExpanded="true">
+        <dc:Bounds height="157.0" width="217.0" x="420.0" y="105.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_Transaction_2" bpmnElement="Transaction_1" isExpanded="true">
+        <dc:Bounds height="162.0" width="217.0" x="420.0" y="348.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_Transaction_3" bpmnElement="Transaction_2">
+        <dc:Bounds height="80.0" width="100.0" x="672.0" y="348.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_AdHocSubProcess_2" bpmnElement="AdHocSubProcess_1" isExpanded="true">
+        <dc:Bounds height="166.0" width="217.0" x="420.0" y="591.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_AdHocSubProcess_3" bpmnElement="AdHocSubProcess_2">
+        <dc:Bounds height="80.0" width="100.0" x="672.0" y="591.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_CallActivity_2" bpmnElement="CallActivity_1">
+        <dc:Bounds height="80.0" width="100.0" x="828.0" y="105.0"/>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/fixtures/bpmn/simple/data-items.bpmn

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:ioSpecification id="InputOutputSpecification_1">
+      <bpmn:dataInput id="DataInput_1"/>
+      <bpmn:dataOutput id="DataOutput_1"/>
+    </bpmn:ioSpecification>
+    <bpmn:choreographyTask id="ChoreographyTask_1"/>
+    <bpmn:dataObject id="DataObject_1" name="Data Object 1"/>
+    <bpmn:dataObjectReference id="DataObjectReference_1" name="Data Object" dataObjectRef="DataObject_1"/>
+    <bpmn:dataStoreReference id="_DataStoreReference_2" name="Data Store" dataStoreRef="DataStore_1"/>
+  </bpmn:process>
+  <bpmn:dataStore id="DataStore_1" name="Data Store 1"/>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_ChoreographyTask_2" bpmnElement="ChoreographyTask_1">
+        <dc:Bounds height="150.0" width="150.0" x="981.0" y="363.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_DataObjectReference_2" bpmnElement="DataObjectReference_1">
+        <dc:Bounds height="50.0" width="36.0" x="108.0" y="84.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="22.0" width="148.0" x="52.0" y="139.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_DataStoreReference_2" bpmnElement="_DataStoreReference_2">
+        <dc:Bounds height="50.0" width="50.0" x="228.0" y="84.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="22.0" width="79.0" x="214.0" y="139.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_DataInput_2" bpmnElement="DataInput_1">
+        <dc:Bounds height="50.0" width="36.0" x="355.0" y="84.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="373.0" y="139.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_DataOutput_2" bpmnElement="DataOutput_1">
+        <dc:Bounds height="50.0" width="36.0" x="462.0" y="84.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="480.0" y="139.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/fixtures/bpmn/simple/events.bpmn

@@ -0,0 +1,226 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:timerEventDefinition id="TimerEventDefinition_1"/>
+    </bpmn:startEvent>
+    <bpmn:startEvent id="StartEvent_5">
+      <bpmn:conditionalEventDefinition id="ConditionalEventDefinition_1"/>
+    </bpmn:startEvent>
+    <bpmn:endEvent id="EndEvent_7">
+      <bpmn:terminateEventDefinition id="TerminateEventDefinition_1"/>
+    </bpmn:endEvent>
+    <bpmn:endEvent id="EndEvent_5">
+      <bpmn:errorEventDefinition id="ErrorEventDefinition_1"/>
+    </bpmn:endEvent>
+    <bpmn:endEvent id="EndEvent_8">
+      <bpmn:cancelEventDefinition id="CancelEventDefinition_1"/>
+    </bpmn:endEvent>
+    <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_8">
+      <bpmn:linkEventDefinition id="LinkEventDefinition_1"/>
+    </bpmn:intermediateThrowEvent>
+    <bpmn:endEvent id="EndEvent_2">
+      <bpmn:signalEventDefinition id="SignalEventDefinition_2"/>
+    </bpmn:endEvent>
+    <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_3">
+      <bpmn:signalEventDefinition id="SignalEventDefinition_3"/>
+    </bpmn:intermediateThrowEvent>
+    <bpmn:startEvent id="StartEvent_3">
+      <bpmn:signalEventDefinition id="SignalEventDefinition_1"/>
+    </bpmn:startEvent>
+    <bpmn:startEvent id="StartEvent_4">
+      <bpmn:messageEventDefinition id="MessageEventDefinition_1"/>
+    </bpmn:startEvent>
+    <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_4">
+      <bpmn:messageEventDefinition id="MessageEventDefinition_3"/>
+    </bpmn:intermediateThrowEvent>
+    <bpmn:endEvent id="EndEvent_3">
+      <bpmn:messageEventDefinition id="MessageEventDefinition_2"/>
+    </bpmn:endEvent>
+    <bpmn:endEvent id="EndEvent_1">
+      <bpmn:escalationEventDefinition id="EscalationEventDefinition_1"/>
+    </bpmn:endEvent>
+    <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_6">
+      <bpmn:escalationEventDefinition id="EscalationEventDefinition_2"/>
+    </bpmn:intermediateThrowEvent>
+    <bpmn:endEvent id="EndEvent_6">
+      <bpmn:compensateEventDefinition id="CompensateEventDefinition_1" waitForCompletion="true"/>
+    </bpmn:endEvent>
+    <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_7">
+      <bpmn:compensateEventDefinition id="CompensateEventDefinition_2" waitForCompletion="true"/>
+    </bpmn:intermediateThrowEvent>
+    <bpmn:endEvent id="EndEvent_4"/>
+    <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_2"/>
+    <bpmn:startEvent id="StartEvent_6"/>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_6"/>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_3">
+      <bpmn:messageEventDefinition id="MessageEventDefinition_4"/>
+    </bpmn:intermediateCatchEvent>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_1">
+      <bpmn:timerEventDefinition id="TimerEventDefinition_2"/>
+    </bpmn:intermediateCatchEvent>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_4">
+      <bpmn:conditionalEventDefinition id="ConditionalEventDefinition_2"/>
+    </bpmn:intermediateCatchEvent>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_2">
+      <bpmn:signalEventDefinition id="SignalEventDefinition_4"/>
+    </bpmn:intermediateCatchEvent>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_11">
+      <bpmn:linkEventDefinition id="LinkEventDefinition_2"/>
+    </bpmn:intermediateCatchEvent>
+  </bpmn: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="408.0" y="120.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="426.0" y="161.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_2" bpmnElement="EndEvent_1">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="377.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="418.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_2" bpmnElement="IntermediateCatchEvent_1">
+        <dc:Bounds height="36.0" width="36.0" x="624.0" y="120.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="642.0" y="161.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateThrowEvent_3" bpmnElement="IntermediateThrowEvent_2">
+        <dc:Bounds height="36.0" width="36.0" x="557.0" y="60.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="575.0" y="101.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateThrowEvent_4" bpmnElement="IntermediateThrowEvent_3">
+        <dc:Bounds height="36.0" width="36.0" x="557.0" y="185.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="575.0" y="226.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateThrowEvent_5" bpmnElement="IntermediateThrowEvent_4">
+        <dc:Bounds height="36.0" width="36.0" x="557.0" y="252.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="575.0" y="293.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_3" bpmnElement="IntermediateCatchEvent_2">
+        <dc:Bounds height="36.0" width="36.0" x="624.0" y="185.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="642.0" y="226.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_4" bpmnElement="IntermediateCatchEvent_3">
+        <dc:Bounds height="36.0" width="36.0" x="624.0" y="252.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="642.0" y="293.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_3" bpmnElement="EndEvent_2">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="185.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="226.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_4" bpmnElement="EndEvent_3">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="252.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="293.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_5" bpmnElement="EndEvent_4">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="60.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="101.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_4" bpmnElement="StartEvent_3">
+        <dc:Bounds height="36.0" width="36.0" x="408.0" y="185.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="426.0" y="226.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_5" bpmnElement="StartEvent_4">
+        <dc:Bounds height="36.0" width="36.0" x="408.0" y="252.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="426.0" y="293.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_6" bpmnElement="StartEvent_5">
+        <dc:Bounds height="36.0" width="36.0" x="410.0" y="317.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="428.0" y="358.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_7" bpmnElement="StartEvent_6">
+        <dc:Bounds height="36.0" width="36.0" x="406.0" y="60.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="424.0" y="101.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_6" bpmnElement="EndEvent_5">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="612.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="653.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_7" bpmnElement="EndEvent_6">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="437.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="478.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_8" bpmnElement="EndEvent_7">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="492.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="533.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_9" bpmnElement="EndEvent_8">
+        <dc:Bounds height="36.0" width="36.0" x="485.0" y="552.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="503.0" y="593.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateThrowEvent_7" bpmnElement="IntermediateThrowEvent_6">
+        <dc:Bounds height="36.0" width="36.0" x="557.0" y="377.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="575.0" y="418.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateThrowEvent_8" bpmnElement="IntermediateThrowEvent_7">
+        <dc:Bounds height="36.0" width="36.0" x="557.0" y="437.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="575.0" y="478.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateThrowEvent_9" bpmnElement="IntermediateThrowEvent_8">
+        <dc:Bounds height="36.0" width="36.0" x="557.0" y="672.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="575.0" y="713.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_5" bpmnElement="IntermediateCatchEvent_4">
+        <dc:Bounds height="36.0" width="36.0" x="624.0" y="317.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="642.0" y="358.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_7" bpmnElement="IntermediateCatchEvent_6">
+        <dc:Bounds height="36.0" width="36.0" x="624.0" y="60.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="642.0" y="101.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_IntermediateCatchEvent_12" bpmnElement="IntermediateCatchEvent_11">
+        <dc:Bounds height="36.0" width="36.0" x="624.0" y="672.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="642.0" y="713.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/fixtures/bpmn/simple/gateways.bpmn

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:inclusiveGateway id="InclusiveGateway_1"/>
+    <bpmn:exclusiveGateway id="ExclusiveGateway_1"/>
+    <bpmn:parallelGateway id="ParallelGateway_1"/>
+    <bpmn:eventBasedGateway id="EventBasedGateway_1"/>
+    <bpmn:complexGateway id="ComplexGateway_1"/>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_InclusiveGateway_2" bpmnElement="InclusiveGateway_1">
+        <dc:Bounds height="50.0" width="50.0" x="114.0" y="99.0"/>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ExclusiveGateway_2" bpmnElement="ExclusiveGateway_1" isMarkerVisible="true">
+        <dc:Bounds height="50.0" width="50.0" x="229.0" y="99.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="254.0" y="154.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ParallelGateway_2" bpmnElement="ParallelGateway_1">
+        <dc:Bounds height="50.0" width="50.0" x="336.0" y="99.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="361.0" y="154.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_EventBasedGateway_2" bpmnElement="EventBasedGateway_1">
+        <dc:Bounds height="50.0" width="50.0" x="456.0" y="99.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="481.0" y="154.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="_BPMNShape_ComplexGateway_2" bpmnElement="ComplexGateway_1">
+        <dc:Bounds height="50.0" width="50.0" x="576.0" y="99.0"/>
+        <bpmndi:BPMNLabel>
+          <dc:Bounds height="0.0" width="0.0" x="601.0" y="154.0"/>
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>