feat(bpmnrenderer): add pool rendering

- collapsed pools
- empty pools
- pools with lanes
- lane sublanes

close #20

lib/draw/BpmnRenderer.js

@@ -273,6 +273,15 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
     return renderLabel(p, element.name, data, align);
   }
 
+  function renderLaneLabel(p, text, data) {
+    // position text left top
+    var textBox = renderLabel(p, text, {height: data.width, width: data.height}, 'left-top');
+    // rotate text and center it on the middle of the lane height
+    var bbox = textBox.getBBox();
+    var top = (data.height / 2) + (bbox.width / 2);
+    textBox.transform('translate(0,' + top + ') rotate(270)');
+  }
+
   var handlers = {
     'bpmn:Event': function(p, data) {
       var circle = drawCircle(p, data.width, data.height);
@@ -617,9 +626,35 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
       return rect;
     },
 
-    'bpmn:Participant': as('bpmn:Lane'),
+    'bpmn:Participant': function(p, data) {
+
+      var lane = renderer('bpmn:Lane')(p, data);
+
+      var expandedPool = !!(bpmnRegistry.getSemantic(data.id).processRef);
+
+      if (expandedPool) {
+        drawLine(p, [
+          {x: 30, y: 0},
+          {x: 30, y: data.height}
+        ]);
+        var text = bpmnRegistry.getSemantic(data.id).name;
+        renderLaneLabel(p, text, data);
+      } else {
+        // Collapsed pool draw text inline
+        var text2 = bpmnRegistry.getSemantic(data.id).name;
+        renderLabel(p, text2, data, 'center-middle');
+      }
+
+      return lane;
+    },
     'bpmn:Lane': function(p, data) {
       var rect = drawRect(p, data.width, data.height, 0);
+
+      if(bpmnRegistry.getSemantic(data.id).$type === 'bpmn:Lane') {
+        var text = bpmnRegistry.getSemantic(data.id).name;
+        renderLaneLabel(p, text, data);
+      }
+
       return rect;
     },
     'bpmn:InclusiveGateway': function(p, data) {
@@ -917,8 +952,6 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
       return renderExternalLabel(p, data, '');
     },
     'bpmn:TextAnnotation': function(p, data) {
-      console.log(data);
-      console.log(bpmnRegistry.getSemantic(data.id));
       var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
         xScaleFactor: 1,
         yScaleFactor: 1,