feat(draw): render association start/end markers

Closes #454

lib/draw/BpmnRenderer.js

@@ -107,13 +107,25 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       ref: { x: 8.5, y: 5 }
     });
 
-    createMarker('data-association-end', {
+    createMarker('association-start', {
+      element: svg.path('M 11 5 L 1 10 L 11 15'),
+      attrs: {
+        fill: 'none',
+        stroke: 'black',
+        strokeWidth: 1.5
+      },
+      ref: { x: 1, y: 10 },
+      scale: 0.5
+    });
+
+    createMarker('association-end', {
       element: svg.path('M 1 5 L 11 10 L 1 15'),
       attrs: {
-        fill: 'white',
+        fill: 'none',
-        stroke: 'black'
+        stroke: 'black',
+        strokeWidth: 1.5
       },
-      ref: { x: 11, y: 10 },
+      ref: { x: 12, y: 10 },
       scale: 0.5
     });
 
@@ -1080,23 +1092,33 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
     },
     'bpmn:Association': function(p, element, attrs) {
 
+      var semantic = getSemantic(element);
+
       attrs = assign({
         strokeDasharray: '1,6',
         strokeLinecap: 'round',
         strokeLinejoin: 'round'
       }, attrs || {});
 
-      // TODO(nre): style according to directed state
+      if (semantic.associationDirection === 'One' ||
+          semantic.associationDirection === 'Both') {
+        attrs.markerEnd = marker('association-end');
+      }
+
+      if (semantic.associationDirection === 'Both') {
+        attrs.markerStart = marker('association-start');
+      }
+
       return drawLine(p, element.waypoints, attrs);
     },
     'bpmn:DataInputAssociation': function(p, element) {
       return renderer('bpmn:Association')(p, element, {
-        markerEnd: marker('data-association-end')
+        markerEnd: marker('association-end')
       });
     },
     'bpmn:DataOutputAssociation': function(p, element) {
       return renderer('bpmn:Association')(p, element, {
-        markerEnd: marker('data-association-end')
+        markerEnd: marker('association-end')
       });
     },
     'bpmn:MessageFlow': function(p, element) {

test/fixtures/bpmn/draw/associations.bpmn

@@ -0,0 +1,55 @@
+<?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" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:task id="Task_0s7r08v">
+      <bpmn:outgoing>Association_None</bpmn:outgoing>
+      <bpmn:outgoing>Association_One</bpmn:outgoing>
+      <bpmn:outgoing>Association_Both</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:endEvent id="EndEvent_106rzzp">
+      <bpmn:incoming>SequenceFlow_064b5j6</bpmn:incoming>
+      <bpmn:incoming>SequenceFlow_0sdtitg</bpmn:incoming>
+      <bpmn:incoming>SequenceFlow_11iyafm</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:association id="Association_None" associationDirection="None" sourceRef="Task_0s7r08v" targetRef="EndEvent_106rzzp" />
+    <bpmn:association id="Association_One" associationDirection="One" sourceRef="Task_0s7r08v" targetRef="EndEvent_106rzzp" />
+    <bpmn:association id="Association_Both" associationDirection="Both" sourceRef="Task_0s7r08v" targetRef="EndEvent_106rzzp" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="Task_0s7r08v_di" bpmnElement="Task_0s7r08v">
+        <dc:Bounds x="316" y="161" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_106rzzp_di" bpmnElement="EndEvent_106rzzp">
+        <dc:Bounds x="565" y="291" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="538" y="327" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Association_None_di" bpmnElement="Association_None">
+        <di:waypoint xsi:type="dc:Point" x="380" y="241" />
+        <di:waypoint xsi:type="dc:Point" x="406" y="315" />
+        <di:waypoint xsi:type="dc:Point" x="468" y="340" />
+        <di:waypoint xsi:type="dc:Point" x="566" y="314" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="444" y="255.5" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Association_One_di" bpmnElement="Association_One">
+        <di:waypoint xsi:type="dc:Point" x="416" y="209" />
+        <di:waypoint xsi:type="dc:Point" x="511" y="223" />
+        <di:waypoint xsi:type="dc:Point" x="572" y="296" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="444" y="255.5" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Association_Both_di" bpmnElement="Association_Both">
+        <di:waypoint xsi:type="dc:Point" x="414" y="233" />
+        <di:waypoint xsi:type="dc:Point" x="566" y="304" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="446" y="245" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/draw/BpmnRendererSpec.js

@@ -16,6 +16,12 @@ describe('draw - bpmn renderer', function() {
   });
 
 
+  it('should render association markers', function(done) {
+    var xml = require('../../fixtures/bpmn/draw/associations.bpmn');
+    bootstrapViewer(xml)(done);
+  });
+
+
   it('should render activity markers (combination)', function(done) {
     var xml = require('../../fixtures/bpmn/draw/activity-markers-combination.bpmn');
     bootstrapViewer(xml)(done);