feat(draw): render colored markers

Related to #629

lib/draw/BpmnRenderer.js

@@ -40,7 +40,7 @@ var LABEL_STYLE = {
 };
 
 
-function BpmnRenderer(eventBus, styles, pathMap, priority) {
+function BpmnRenderer(eventBus, styles, pathMap, canvas, priority) {
 
   BaseRenderer.call(this, eventBus, priority);
 
@@ -53,19 +53,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
 
   var computeStyle = styles.computeStyle;
 
-  function addMarker(id, element) {
+  function addMarker(id, options) {
-    markers[id] = element;
-  }
-
-  function marker(id) {
-    var marker = markers[id];
-
-    return 'url(#' + marker.id + ')';
-  }
-
-  function initMarkers(svg) {
-
-    function createMarker(id, options) {
     var attrs = assign({
       fill: 'black',
       strokeWidth: 1,
@@ -99,106 +87,137 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       orient: 'auto'
     });
 
-      var defs = domQuery('defs', svg);
+    var defs = domQuery('defs', canvas._svg);
 
     if (!defs) {
       defs = svgCreate('defs');
 
-        svgAppend(svg, defs);
+      svgAppend(canvas._svg, defs);
     }
 
     svgAppend(defs, marker);
 
-      return addMarker(id, marker);
+    markers[id] = marker;
   }
 
+  function marker(type, fill, stroke) {
+    var id = type + '-' + fill + '-' + stroke;
+
+    if (!includes(markers, id)) {
+      createMarker(type, fill, stroke);
+    }
+
+    return 'url(#' + id +  ')';
+  }
+
+  function createMarker(type, fill, stroke) {
+    var id = type + '-' + fill + '-' + stroke;
+
+    if (type === 'sequenceflow-end') {
       var sequenceflowEnd = svgCreate('path');
       svgAttr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
 
-    createMarker('sequenceflow-end', {
+      addMarker(id, {
         element: sequenceflowEnd,
         ref: { x: 11, y: 10 },
-      scale: 0.5
+        scale: 0.5,
+        attrs: {
+          fill: stroke,
+          stroke: stroke
+        }
       });
+    }
 
+    if (type === 'messageflow-start') {
       var messageflowStart = svgCreate('circle');
       svgAttr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
 
-    createMarker('messageflow-start', {
+      addMarker(id, {
         element: messageflowStart,
         attrs: {
-        fill: 'white',
+          fill: fill,
-        stroke: 'black'
+          stroke: stroke
         },
         ref: { x: 6, y: 6 }
       });
+    }
 
+    if (type === 'messageflow-end') {
       var messageflowEnd = svgCreate('path');
       svgAttr(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
 
-    createMarker('messageflow-end', {
+      addMarker(id, {
         element: messageflowEnd,
         attrs: {
-        fill: 'white',
+          fill: fill,
-        stroke: 'black',
+          stroke: stroke,
           strokeLinecap: 'butt'
         },
         ref: { x: 8.5, y: 5 }
       });
+    }
 
+    if (type === 'association-start') {
       var associationStart = svgCreate('path');
       svgAttr(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
 
-    createMarker('association-start', {
+      addMarker(id, {
         element: associationStart,
         attrs: {
           fill: 'none',
-        stroke: 'black',
+          stroke: stroke,
           strokeWidth: 1.5
         },
         ref: { x: 1, y: 10 },
         scale: 0.5
       });
+    }
 
+    if (type === 'association-end') {
       var associationEnd = svgCreate('path');
       svgAttr(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
 
-    createMarker('association-end', {
+      addMarker(id, {
         element: associationEnd,
         attrs: {
           fill: 'none',
-        stroke: 'black',
+          stroke: stroke,
           strokeWidth: 1.5
         },
         ref: { x: 12, y: 10 },
         scale: 0.5
       });
+    }
 
+    if (type === 'conditional-flow-marker') {
       var conditionalflowMarker = svgCreate('path');
       svgAttr(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
 
-    createMarker('conditional-flow-marker', {
+      addMarker(id, {
         element: conditionalflowMarker,
         attrs: {
-        fill: 'white',
+          fill: fill,
-        stroke: 'black'
+          stroke: stroke
         },
         ref: { x: -1, y: 10 },
         scale: 0.5
       });
+    }
 
+    if (type === 'conditional-default-flow-marker') {
       var conditionaldefaultflowMarker = svgCreate('path');
       svgAttr(conditionaldefaultflowMarker, { d: 'M 1 4 L 5 16' });
 
-    createMarker('conditional-default-flow-marker', {
+      addMarker(id, {
         element: conditionaldefaultflowMarker,
         attrs: {
-        stroke: 'black'
+          stroke: stroke
         },
         ref: { x: -5, y: 10 },
         scale: 0.5
       });
     }
+  }
 
   function drawCircle(parentGfx, width, height, offset, attrs) {
 
@@ -1280,9 +1299,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
     'bpmn:SequenceFlow': function(parentGfx, element) {
       var pathData = createPathFromConnection(element);
 
+      var fill = getFillColor(element),
+          stroke = getStrokeColor(element);
+
       var attrs = {
         strokeLinejoin: 'round',
-        markerEnd: marker('sequenceflow-end'),
+        markerEnd: marker('sequenceflow-end', fill, stroke),
         stroke: getStrokeColor(element)
       };
 
@@ -1294,7 +1316,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       // conditional flow marker
       if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
         svgAttr(path, {
-          markerStart: marker('conditional-flow-marker')
+          markerStart: marker('conditional-flow-marker', fill, stroke)
         });
       }
 
@@ -1302,7 +1324,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
           source.default === sequenceFlow) {
         svgAttr(path, {
-          markerStart: marker('conditional-default-flow-marker')
+          markerStart: marker('conditional-default-flow-marker', fill, stroke)
         });
       }
 
@@ -1312,31 +1334,41 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
 
       var semantic = getSemantic(element);
 
+      var fill = getFillColor(element),
+          stroke = getStrokeColor(element);
+
       attrs = assign({
         strokeDasharray: '0.5, 5',
         strokeLinecap: 'round',
-        strokeLinejoin: 'round'
+        strokeLinejoin: 'round',
+        stroke: getStrokeColor(element)
       }, attrs || {});
 
       if (semantic.associationDirection === 'One' ||
           semantic.associationDirection === 'Both') {
-        attrs.markerEnd = marker('association-end');
+        attrs.markerEnd = marker('association-end', fill, stroke);
       }
 
       if (semantic.associationDirection === 'Both') {
-        attrs.markerStart = marker('association-start');
+        attrs.markerStart = marker('association-start', fill, stroke);
       }
 
       return drawLine(parentGfx, element.waypoints, attrs);
     },
     'bpmn:DataInputAssociation': function(parentGfx, element) {
+      var fill = getFillColor(element),
+          stroke = getStrokeColor(element);
+
       return renderer('bpmn:Association')(parentGfx, element, {
-        markerEnd: marker('association-end')
+        markerEnd: marker('association-end', fill, stroke)
       });
     },
     'bpmn:DataOutputAssociation': function(parentGfx, element) {
+      var fill = getFillColor(element),
+          stroke = getStrokeColor(element);
+
       return renderer('bpmn:Association')(parentGfx, element, {
-        markerEnd: marker('association-end')
+        markerEnd: marker('association-end', fill, stroke)
       });
     },
     'bpmn:MessageFlow': function(parentGfx, element) {
@@ -1344,11 +1376,14 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       var semantic = getSemantic(element),
           di = getDi(element);
 
+      var fill = getFillColor(element),
+          stroke = getStrokeColor(element);
+
       var pathData = createPathFromConnection(element);
 
       var attrs = {
-        markerEnd: marker('messageflow-end'),
+        markerEnd: marker('messageflow-end', fill, stroke),
-        markerStart: marker('messageflow-start'),
+        markerStart: marker('messageflow-start', fill, stroke),
         strokeDasharray: '10, 12',
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
@@ -1735,18 +1770,12 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       strokeWidth: 2
     });
   }
-
-  // hook onto canvas init event to initialize
-  // connection start/end markers on svg
-  eventBus.on('canvas.init', function(event) {
-    initMarkers(event.svg);
-  });
 }
 
 
 inherits(BpmnRenderer, BaseRenderer);
 
-BpmnRenderer.$inject = [ 'eventBus', 'styles', 'pathMap' ];
+BpmnRenderer.$inject = [ 'eventBus', 'styles', 'pathMap', 'canvas' ];
 
 module.exports = BpmnRenderer;