fix(draw): add plus sign (+) to call activities

Closes #403

lib/draw/BpmnRenderer.js

@@ -212,6 +212,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
     return p.path(d).attr(attrs);
   }
 
+  function drawMarker(type, p, path, attrs) {
+    return drawPath(p, path, assign({ 'data-marker': type }, attrs));
+  }
+
   function as(type) {
     return function(p, element) {
       return handlers[type](p, element);
@@ -854,7 +858,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       return outer;
     },
     'bpmn:CallActivity': function(p, element) {
-      return renderer('bpmn:Task')(p, element, {
+      return renderer('bpmn:SubProcess')(p, element, {
         strokeWidth: 5
       });
     },
@@ -881,7 +885,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
 
       var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
 
-      if(participantMultiplicity) {
+      if (participantMultiplicity) {
         renderer('ParticipantMultiplicityMarker')(p, element);
       }
 
@@ -1256,7 +1260,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       return textElement;
     },
     'ParticipantMultiplicityMarker': function(p, element) {
-      var subProcessPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
         containerWidth: element.width,
@@ -1267,7 +1271,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
         }
       });
 
-      drawPath(p, subProcessPath);
+      drawMarker('participant-multiplicity', p, markerPath);
     },
     'SubProcessMarker': function(p, element) {
       var markerRect = drawRect(p, 14, 14, 0, {
@@ -1278,7 +1282,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       // therefore fixed values can be used here
       markerRect.transform('translate(' + (element.width / 2 - 7.5) + ',' + (element.height - 20) + ')');
 
-      var subProcessPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
+      var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
         xScaleFactor: 1.5,
         yScaleFactor: 1.5,
         containerWidth: element.width,
@@ -1289,10 +1293,10 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
         }
       });
 
-      drawPath(p, subProcessPath);
+      drawMarker('sub-process', p, markerPath);
     },
     'ParallelMarker': function(p, element, position) {
-      var subProcessPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
         containerWidth: element.width,
@@ -1302,10 +1306,11 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
           my: (element.height - 20) / element.height
         }
       });
-      drawPath(p, subProcessPath);
+
+      drawMarker('parallel', p, markerPath);
     },
     'SequentialMarker': function(p, element, position) {
-      var sequentialPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
+      var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
         containerWidth: element.width,
@@ -1315,10 +1320,11 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
           my: (element.height - 19) / element.height
         }
       });
-      drawPath(p, sequentialPath);
+
+      drawMarker('sequential', p, markerPath);
     },
     'CompensationMarker': function(p, element, position) {
-      var compensationPath = pathMap.getScaledPath('MARKER_COMPENSATION', {
+      var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
         xScaleFactor: 1,
         yScaleFactor: 1,
         containerWidth: element.width,
@@ -1328,10 +1334,11 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
           my: (element.height - 13) / element.height
         }
       });
-      drawPath(p, compensationPath, { strokeWidth: 1 });
+
+      drawMarker('compensation', p, markerMath, { strokeWidth: 1 });
     },
     'LoopMarker': function(p, element, position) {
-      var loopPath = pathMap.getScaledPath('MARKER_LOOP', {
+      var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
         xScaleFactor: 1,
         yScaleFactor: 1,
         containerWidth: element.width,
@@ -1342,7 +1349,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
         }
       });
 
-      drawPath(p, loopPath, {
+      drawMarker('loop', p, markerPath, {
         strokeWidth: 1,
         fill: 'none',
         strokeLinecap: 'round',
@@ -1350,7 +1357,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       });
     },
     'AdhocMarker': function(p, element, position) {
-      var loopPath = pathMap.getScaledPath('MARKER_ADHOC', {
+      var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
         xScaleFactor: 1,
         yScaleFactor: 1,
         containerWidth: element.width,
@@ -1361,7 +1368,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
         }
       });
 
-      drawPath(p, loopPath, {
+      drawMarker('adhoc', p, markerPath, {
         strokeWidth: 1,
         fill: 'black'
       });

test/fixtures/bpmn/draw/call-activity.bpmn

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:callActivity id="CallActivity" name="A" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="CallActivity_di" bpmnElement="CallActivity">
+        <dc:Bounds x="399" y="130" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/draw/BpmnRendererSpec.js

@@ -123,32 +123,83 @@ describe('draw - bpmn renderer', function() {
     bootstrapViewer(xml)(done);
   });
 
+
   it('should render xor gateways blank and with X', function(done) {
     var xml = require('../../fixtures/bpmn/draw/xor.bpmn');
     bootstrapViewer(xml)(done);
   });
 
+
   it('should render boundary events with correct z-index', function(done) {
     var xml = require('../../fixtures/bpmn/draw/boundary-event-z-index.bpmn');
     bootstrapViewer(xml)(done);
   });
 
+
   it('should render boundary events without flowNodeRef', function(done) {
    var xml = require('../../fixtures/bpmn/draw/boundary-event-without-refnode.bpmn');
    bootstrapViewer(xml)(done);
   });
 
+
   it('should render boundary event only once if referenced incorrectly via flowNodeRef (robustness)', function(done) {
     var xml = require('../../fixtures/bpmn/draw/boundary-event-with-refnode.bpmn');
     bootstrapViewer(xml)(done);
   });
 
+
   it('should render gateway event if attribute is missing in XML', function(done) {
     var xml = require('../../fixtures/bpmn/draw/gateway-type-default.bpmn');
     bootstrapViewer(xml)(done);
   });
 
 
+  it('should render call activity', function(done) {
+    var xml = require('../../fixtures/bpmn/draw/call-activity.bpmn');
+
+    bootstrapViewer(xml)(function(err) {
+
+      if (err) {
+        return done(err);
+      }
+
+      inject(function(elementRegistry) {
+
+        var callActivityGfx = elementRegistry.getGraphics('CallActivity');
+
+        // make sure the + marker is shown
+        expect(callActivityGfx.select('[data-marker=sub-process]')).to.exist;
+
+        done();
+      })();
+    });
+
+  });
+
+
+  it('should render adhoc sub process', function(done) {
+    var xml = require('../../fixtures/bpmn/draw/activity-markers-simple.bpmn');
+
+    bootstrapViewer(xml)(function(err) {
+
+      if (err) {
+        return done(err);
+      }
+
+      inject(function(elementRegistry) {
+
+        var callActivityGfx = elementRegistry.getGraphics('AdHocSubProcess');
+
+        // make sure the + marker is shown
+        expect(callActivityGfx.select('[data-marker=adhoc]')).to.exist;
+
+        done();
+      })();
+    });
+
+  });
+
+
   describe('path', function () {
 
     var diagramXML = require('../../fixtures/bpmn/simple-cropping.bpmn');
@@ -159,7 +210,6 @@ describe('draw - bpmn renderer', function() {
 
     describe('circle', function () {
 
-
       it('should return a circle path', inject(function(canvas, elementRegistry, graphicsFactory) {
 
         // given