bpmn-js - npm Package Compare versions

Comparing version 14.2.0 to 15.0.0

lib/draw/BpmnRenderer.d.ts

@@ -20,62 +20,41 @@ /**
   handlers: {
-      'bpmn:Event': (parentGfx: any, element: any, attrs: any) => SVGCircleElement;
-      'bpmn:StartEvent': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:MessageEventDefinition': (parentGfx: any, element: any, isThrowing: any) => SVGPathElement;
-      'bpmn:TimerEventDefinition': (parentGfx: any, element: any) => SVGCircleElement;
-      'bpmn:EscalationEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:ConditionalEventDefinition': (parentGfx: any, event: any) => SVGPathElement;
-      'bpmn:LinkEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:ErrorEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:CancelEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:CompensateEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:SignalEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:MultipleEventDefinition': (parentGfx: any, event: any, isThrowing: any) => SVGPathElement;
-      'bpmn:ParallelMultipleEventDefinition': (parentGfx: any, event: any) => SVGPathElement;
-      'bpmn:EndEvent': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:TerminateEventDefinition': (parentGfx: any, element: any) => SVGCircleElement;
-      'bpmn:IntermediateEvent': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:IntermediateCatchEvent': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:IntermediateThrowEvent': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:Activity': (parentGfx: any, element: any, attrs: any) => SVGRectElement;
-      'bpmn:Task': (parentGfx: any, element: any) => any;
-      'bpmn:ServiceTask': (parentGfx: any, element: any) => any;
-      'bpmn:UserTask': (parentGfx: any, element: any) => any;
-      'bpmn:ManualTask': (parentGfx: any, element: any) => any;
-      'bpmn:SendTask': (parentGfx: any, element: any) => any;
-      'bpmn:ReceiveTask': (parentGfx: any, element: any) => any;
-      'bpmn:ScriptTask': (parentGfx: any, element: any) => any;
-      'bpmn:BusinessRuleTask': (parentGfx: any, element: any) => any;
-      'bpmn:SubProcess': (parentGfx: any, element: any, attrs: any) => any;
-      'bpmn:AdHocSubProcess': (parentGfx: any, element: any) => any;
-      'bpmn:Transaction': (parentGfx: any, element: any) => any;
-      'bpmn:CallActivity': (parentGfx: any, element: any) => any;
-      'bpmn:Participant': (parentGfx: any, element: any) => any;
-      'bpmn:Lane': (parentGfx: any, element: any, attrs: any) => SVGRectElement;
-      'bpmn:InclusiveGateway': (parentGfx: any, element: any) => any;
-      'bpmn:ExclusiveGateway': (parentGfx: any, element: any) => any;
-      'bpmn:ComplexGateway': (parentGfx: any, element: any) => any;
-      'bpmn:ParallelGateway': (parentGfx: any, element: any) => any;
-      'bpmn:EventBasedGateway': (parentGfx: any, element: any) => any;
-      'bpmn:Gateway': (parentGfx: any, element: any) => SVGPolygonElement;
-      'bpmn:SequenceFlow': (parentGfx: any, element: any) => SVGElement;
-      'bpmn:Association': (parentGfx: any, element: any, attrs: any) => SVGElement;
-      'bpmn:DataInputAssociation': (parentGfx: any, element: any) => any;
-      'bpmn:DataOutputAssociation': (parentGfx: any, element: any) => any;
-      'bpmn:MessageFlow': (parentGfx: any, element: any) => SVGElement;
-      'bpmn:DataObject': (parentGfx: any, element: any) => SVGPathElement;
-      'bpmn:DataObjectReference': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:DataInput': (parentGfx: any, element: any) => any;
-      'bpmn:DataOutput': (parentGfx: any, element: any) => any;
-      'bpmn:DataStoreReference': (parentGfx: any, element: any) => SVGPathElement;
-      'bpmn:BoundaryEvent': (parentGfx: any, element: any, options: any) => any;
-      'bpmn:Group': (parentGfx: any, element: any) => SVGRectElement;
-      label: (parentGfx: any, element: any) => SVGElement;
-      'bpmn:TextAnnotation': (parentGfx: any, element: any) => SVGRectElement;
-      ParticipantMultiplicityMarker: (parentGfx: any, element: any) => void;
-      SubProcessMarker: (parentGfx: any, element: any) => void;
-      ParallelMarker: (parentGfx: any, element: any, position: any) => void;
-      SequentialMarker: (parentGfx: any, element: any, position: any) => void;
-      CompensationMarker: (parentGfx: any, element: any, position: any) => void;
-      LoopMarker: (parentGfx: any, element: any, position: any) => void;
-      AdhocMarker: (parentGfx: any, element: any, position: any) => void;
+      'bpmn:AdHocSubProcess': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:Association': (parentGfx: any, element: any, attrs?: {}) => SVGElement;
+      'bpmn:BoundaryEvent': (parentGfx: any, element: any, attrs?: {}) => SVGCircleElement;
+      'bpmn:BusinessRuleTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:CallActivity': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:ComplexGateway': (parentGfx: any, element: any, attrs?: {}) => SVGPolygonElement;
+      'bpmn:DataInput': (parentGfx: any, element: any, attrs?: {}) => SVGPathElement;
+      'bpmn:DataInputAssociation': (parentGfx: any, element: any, attrs?: {}) => SVGElement;
+      'bpmn:DataObject': (parentGfx: any, element: any, attrs?: {}) => SVGPathElement;
+      'bpmn:DataObjectReference': (parentGfx: any, element: any, attrs: any) => any;
+      'bpmn:DataOutput': (parentGfx: any, element: any, attrs?: {}) => SVGPathElement;
+      'bpmn:DataOutputAssociation': (parentGfx: any, element: any, attrs?: {}) => SVGElement;
+      'bpmn:DataStoreReference': (parentGfx: any, element: any, attrs?: {}) => SVGPathElement;
+      'bpmn:EndEvent': (parentGfx: any, element: any, attrs?: {}) => SVGCircleElement;
+      'bpmn:EventBasedGateway': (parentGfx: any, element: any, attrs?: {}) => SVGPolygonElement;
+      'bpmn:ExclusiveGateway': (parentGfx: any, element: any, attrs?: {}) => SVGPolygonElement;
+      'bpmn:Gateway': (parentGfx: any, element: any, attrs?: {}) => SVGPolygonElement;
+      'bpmn:Group': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:InclusiveGateway': (parentGfx: any, element: any, attrs?: {}) => SVGPolygonElement;
+      'bpmn:IntermediateEvent': (parentGfx: any, element: any, attrs?: {}) => SVGCircleElement;
+      'bpmn:IntermediateCatchEvent': (parentGfx: any, element: any, attrs: any) => any;
+      'bpmn:IntermediateThrowEvent': (parentGfx: any, element: any, attrs: any) => any;
+      'bpmn:Lane': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:ManualTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:MessageFlow': (parentGfx: any, element: any, attrs?: {}) => SVGElement;
+      'bpmn:ParallelGateway': (parentGfx: any, element: any, attrs?: {}) => SVGPolygonElement;
+      'bpmn:Participant': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:ReceiveTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:ScriptTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:SendTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:SequenceFlow': (parentGfx: any, element: any, attrs?: {}) => SVGElement;
+      'bpmn:ServiceTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:StartEvent': (parentGfx: any, element: any, attrs?: {}) => SVGCircleElement;
+      'bpmn:SubProcess': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:Task': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:TextAnnotation': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:Transaction': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      'bpmn:UserTask': (parentGfx: any, element: any, attrs?: {}) => SVGRectElement;
+      label: (parentGfx: any, element: any, attrs?: {}) => SVGElement;
   };
@@ -95,6 +74,7 @@
    * @param element
+   * @param attrs
    *
    * @return mainGfx
    */
-  drawShape(parentGfx: SVGElement, element: Element): SVGElement;
+  drawShape(parentGfx: SVGElement, element: Element, attrs?: Attrs): SVGElement;
 
@@ -106,6 +86,7 @@ /**
    * @param element
+   * @param attrs
    *
    * @return mainGfx
    */
-  drawConnection(parentGfx: SVGElement, element: Element): SVGElement;
+  drawConnection(parentGfx: SVGElement, element: Element, attrs?: Attrs): SVGElement;
 
@@ -128,3 +109,10 @@ /**
 
+export type Attrs = Partial<{
+    fill: string;
+    stroke: string;
+    width: string;
+    height: string;
+}>;
+
 type Element = import('../model/Types').Element;
 import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

lib/draw/BpmnRenderer.js

 import inherits from 'inherits-browser';
 
 import {
-  isObject,
   assign,
-  forEach
+  forEach,
+  isObject
 } from 'min-dash';
@@ -20,3 +20,5 @@
 
-import { is } from '../util/ModelUtil';
+import {
+  is
+} from '../util/ModelUtil';
 
@@ -31,2 +33,3 @@ import {
   isCollection,
+  getBounds,
   getDi,
@@ -40,3 +43,5 @@ getSemantic,
   getStrokeColor,
-  getLabelColor
+  getLabelColor,
+  getHeight,
+  getWidth
 } from './BpmnRenderUtil';
@@ -65,12 +70,13 @@
 
-var RENDERER_IDS = new Ids();
+var rendererIds = new Ids();
 
-var TASK_BORDER_RADIUS = 10;
-var INNER_OUTER_DIST = 3;
+var ELEMENT_LABEL_DISTANCE = 10,
+    INNER_OUTER_DIST = 3,
+    PARTICIPANT_STROKE_WIDTH = 1.5,
+    TASK_BORDER_RADIUS = 10;
 
-var DEFAULT_FILL_OPACITY = .95,
-    HIGH_FILL_OPACITY = .35;
+var DEFAULT_OPACITY = 0.95,
+    FULL_OPACITY = 1,
+    LOW_OPACITY = 0.25;
 
-var ELEMENT_LABEL_DISTANCE = 10;
-
 /**
@@ -82,2 +88,9 @@ * @typedef { Partial<{
  * }> } BpmnRendererConfig
+ *
+ * @typedef { Partial<{
+ *   fill: string,
+ *   stroke: string,
+ *   width: string,
+ *   height: string
+ * }> } Attrs
  */
@@ -110,3 +123,3 @@
 
-  var rendererId = RENDERER_IDS.next();
+  var rendererId = rendererIds.next();
 
@@ -207,3 +220,3 @@ var markers = {};
         ...shapeStyle({
-          fill: fill,
+          fill,
           stroke: stroke,
@@ -228,3 +241,3 @@ strokeWidth: 1,
         ...shapeStyle({
-          fill: fill,
+          fill,
           stroke: stroke,
@@ -250,3 +263,3 @@ strokeWidth: 1,
           fill: 'none',
-          stroke: stroke,
+          stroke,
           strokeWidth: 1.5,
@@ -272,3 +285,3 @@
           fill: 'none',
-          stroke: stroke,
+          stroke,
           strokeWidth: 1.5,
@@ -293,3 +306,3 @@
         ...shapeStyle({
-          fill: fill,
+          fill,
           stroke: stroke
@@ -322,3 +335,3 @@ })
 
-  function drawCircle(parentGfx, width, height, offset, attrs) {
+  function drawCircle(parentGfx, width, height, offset, attrs = {}) {
 
@@ -334,6 +347,2 @@ if (isObject(offset)) {
 
-    if (attrs.fill === 'none') {
-      delete attrs.fillOpacity;
-    }
-
     var cx = width / 2,
@@ -438,3 +447,2 @@ cy = height / 2;
   function drawPath(parentGfx, d, attrs) {
-
     attrs = lineStyle(attrs);
@@ -461,167 +469,9 @@
   function as(type) {
-    return function(parentGfx, element, options) {
-      return renderer(type)(parentGfx, element, options);
+    return function(parentGfx, element, attrs) {
+      return renderer(type)(parentGfx, element, attrs);
     };
   }
 
-  function renderEventContent(element, parentGfx) {
-
-    var event = getSemantic(element);
-    var isThrowing = isThrowEvent(event);
-
-    if (event.eventDefinitions && event.eventDefinitions.length > 1) {
-      if (event.parallelMultiple) {
-        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
-      }
-      else {
-        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
-      }
-    }
-
-    if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
-      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
-      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
-      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
-    }
-
-    if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
-      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
-      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
-      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
-      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
-      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
-      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
-      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
-    }
-
-    return null;
-  }
-
-  function renderLabel(parentGfx, label, options) {
-
-    options = assign({
-      size: {
-        width: 100
-      }
-    }, options);
-
-    var text = textRenderer.createText(label || '', options);
-
-    svgClasses(text).add('djs-label');
-
-    svgAppend(parentGfx, text);
-
-    return text;
-  }
-
-  function renderEmbeddedLabel(parentGfx, element, align) {
-    var semantic = getSemantic(element);
-
-    return renderLabel(parentGfx, semantic.name, {
-      box: element,
-      align: align,
-      padding: 7,
-      style: {
-        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-      }
-    });
-  }
-
-  function renderExternalLabel(parentGfx, element) {
-
-    var box = {
-      width: 90,
-      height: 30,
-      x: element.width / 2 + element.x,
-      y: element.height / 2 + element.y
-    };
-
-    return renderLabel(parentGfx, getLabel(element), {
-      box: box,
-      fitBox: true,
-      style: assign(
-        {},
-        textRenderer.getExternalStyle(),
-        {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-        }
-      )
-    });
-  }
-
-  function renderLaneLabel(parentGfx, text, element) {
-    var textBox = renderLabel(parentGfx, text, {
-      box: {
-        height: 30,
-        width: element.height
-      },
-      align: 'center-middle',
-      style: {
-        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-      }
-    });
-
-    var top = -1 * element.height;
-
-    transform(textBox, 0, -top, 270);
-  }
-
-  var handlers = this.handlers = {
-    'bpmn:Event': function(parentGfx, element, attrs) {
-
-      if (!('fillOpacity' in attrs)) {
-        attrs.fillOpacity = DEFAULT_FILL_OPACITY;
-      }
-
-      return drawCircle(parentGfx, element.width, element.height, attrs);
-    },
-    'bpmn:StartEvent': function(parentGfx, element, options) {
-      var attrs = {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      };
-
-      var semantic = getSemantic(element);
-
-      if (!semantic.isInterrupting) {
-        attrs = {
-          strokeDasharray: '6',
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-      }
-
-      var circle = renderer('bpmn:Event')(parentGfx, element, attrs);
-
-      if (!options || options.renderIcon !== false) {
-        renderEventContent(element, parentGfx);
-      }
-
-      return circle;
-    },
-    'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
+  var eventIconRenderers = {
+    'bpmn:MessageEventDefinition': function(parentGfx, element, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
@@ -638,9 +488,14 @@ xScaleFactor: 0.9,
 
-      var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
-      var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
+      var fill = isThrowing
+        ? getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+        : getFillColor(element, defaultFillColor, attrs.fill);
 
+      var stroke = isThrowing
+        ? getFillColor(element, defaultFillColor, attrs.fill)
+        : getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
       var messagePath = drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill,
-        stroke: stroke
+        fill,
+        stroke,
+        strokeWidth: 1
       });
@@ -650,7 +505,7 @@
     },
-    'bpmn:TimerEventDefinition': function(parentGfx, element) {
+    'bpmn:TimerEventDefinition': function(parentGfx, element, attrs = {}) {
       var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
-        strokeWidth: 2,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 2
       });
@@ -670,8 +525,7 @@
       drawPath(parentGfx, pathData, {
-        strokeWidth: 2,
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 2
       });
 
-      for (var i = 0;i < 12; i++) {
-
+      for (var i = 0; i < 12; i++) {
         var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
@@ -688,9 +542,9 @@ xScaleFactor: 0.75,
 
-        var width = element.width / 2;
-        var height = element.height / 2;
+        var width = element.width / 2,
+            height = element.height / 2;
 
         drawPath(parentGfx, linePathData, {
           strokeWidth: 1,
-          transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')'
         });
@@ -701,3 +555,3 @@ }
     },
-    'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
@@ -714,11 +568,13 @@ xScaleFactor: 1,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing
+        ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+        : getFillColor(event, defaultFillColor, attrs.fill);
 
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
     },
-    'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
+    'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs = {}) {
       var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
@@ -736,7 +592,8 @@ xScaleFactor: 1,
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill: getFillColor(event, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
     },
-    'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:LinkEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_LINK', {
@@ -753,11 +610,13 @@ xScaleFactor: 1,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing
+        ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+        : getFillColor(event, defaultFillColor, attrs.fill);
 
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
     },
-    'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:ErrorEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_ERROR', {
@@ -774,11 +633,13 @@ xScaleFactor: 1.1,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing
+        ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+        : getFillColor(event, defaultFillColor, attrs.fill);
 
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
     },
-    'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:CancelEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {
@@ -795,8 +656,8 @@ xScaleFactor: 1.0,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor, attrs.stroke) : 'none';
 
       var path = drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
@@ -808,3 +669,3 @@
     },
-    'bpmn:CompensateEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:CompensateEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
@@ -821,11 +682,13 @@ xScaleFactor: 1,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing
+        ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+        : getFillColor(event, defaultFillColor, attrs.fill);
 
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
     },
-    'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:SignalEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
@@ -842,11 +705,13 @@ xScaleFactor: 0.9,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing
+        ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+        : getFillColor(event, defaultFillColor, attrs.fill);
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: fill,
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill,
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke)
       });
     },
-    'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:MultipleEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
@@ -863,10 +728,12 @@ xScaleFactor: 1.1,
 
-      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+      var fill = isThrowing
+        ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+        : getFillColor(event, defaultFillColor, attrs.fill);
 
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: fill
+        fill,
+        strokeWidth: 1
       });
     },
-    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
+    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs = {}) {
       var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
@@ -884,442 +751,637 @@ xScaleFactor: 1.2,
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getStrokeColor(event, defaultStrokeColor),
-        stroke: getStrokeColor(event, defaultStrokeColor)
+        fill: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
     },
-    'bpmn:EndEvent': function(parentGfx, element, options) {
-      var circle = renderer('bpmn:Event')(parentGfx, element, {
-        strokeWidth: 4,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-
-      if (!options || options.renderIcon !== false) {
-        renderEventContent(element, parentGfx, true);
-      }
-
-      return circle;
-    },
-    'bpmn:TerminateEventDefinition': function(parentGfx, element) {
+    'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs = {}) {
       var circle = drawCircle(parentGfx, element.width, element.height, 8, {
-        strokeWidth: 4,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 4
       });
 
       return circle;
-    },
-    'bpmn:IntermediateEvent': function(parentGfx, element, options) {
-      var outer = renderer('bpmn:Event')(parentGfx, element, {
-        strokeWidth: 1.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+    }
+  };
 
-      /* inner */
-      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-        strokeWidth: 1.5,
-        fill: getFillColor(element, 'none'),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+  function renderEventIcon(element, parentGfx, attrs = {}) {
+    var semantic = getSemantic(element),
+        isThrowing = isThrowEvent(semantic);
 
-      if (!options || options.renderIcon !== false) {
-        renderEventContent(element, parentGfx);
+    if (semantic.get('eventDefinitions') && semantic.get('eventDefinitions').length > 1) {
+      if (semantic.get('parallelMultiple')) {
+        return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
       }
+      else {
+        return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
+    }
 
-      return outer;
-    },
-    'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
-    'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
+    if (isTypedEvent(semantic, 'bpmn:MessageEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-    'bpmn:Activity': function(parentGfx, element, attrs) {
+    if (isTypedEvent(semantic, 'bpmn:TimerEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      attrs = attrs || {};
+    if (isTypedEvent(semantic, 'bpmn:ConditionalEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      if (!('fillOpacity' in attrs)) {
-        attrs.fillOpacity = DEFAULT_FILL_OPACITY;
-      }
+    if (isTypedEvent(semantic, 'bpmn:SignalEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
-    },
+    if (isTypedEvent(semantic, 'bpmn:EscalationEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-    'bpmn:Task': function(parentGfx, element) {
-      var attrs = {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+    if (isTypedEvent(semantic, 'bpmn:LinkEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+    if (isTypedEvent(semantic, 'bpmn:ErrorEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      renderEmbeddedLabel(parentGfx, element, 'center-middle');
-      attachTaskMarkers(parentGfx, element);
+    if (isTypedEvent(semantic, 'bpmn:CancelEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      return rect;
-    },
-    'bpmn:ServiceTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    if (isTypedEvent(semantic, 'bpmn:CompensateEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
 
-      var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
-        abspos: {
-          x: 12,
-          y: 18
+    if (isTypedEvent(semantic, 'bpmn:TerminateEventDefinition')) {
+      return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+    }
+
+    return null;
+  }
+
+  var taskMarkerRenderers = {
+    'ParticipantMultiplicityMarker': function(parentGfx, element, attrs = {}) {
+      var width = getWidth(element, attrs),
+          height = getHeight(element, attrs);
+
+      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: width,
+        containerHeight: height,
+        position: {
+          mx: ((width / 2 - 6) / width),
+          my: (height - 15) / height
         }
       });
 
-      /* service bg */ drawPath(parentGfx, pathDataBG, {
+      drawMarker('participant-multiplicity', parentGfx, markerPath, {
+        strokeWidth: 2,
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    },
+    'SubProcessMarker': function(parentGfx, element, attrs = {}) {
+      var markerRect = drawRect(parentGfx, 14, 14, 0, {
         strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
 
-      var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
-        abspos: {
-          x: 17.2,
-          y: 18
-        }
-      });
+      translate(markerRect, element.width / 2 - 7.5, element.height - 20);
 
-      /* service fill */ drawPath(parentGfx, fillPathData, {
-        strokeWidth: 0,
-        fill: getFillColor(element, defaultFillColor)
-      });
-
-      var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
-        abspos: {
-          x: 17,
-          y: 22
+      var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
+        xScaleFactor: 1.5,
+        yScaleFactor: 1.5,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: (element.width / 2 - 7.5) / element.width,
+          my: (element.height - 20) / element.height
         }
       });
 
-      /* service */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('sub-process', parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
-
-      return task;
     },
-    'bpmn:UserTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'ParallelMarker': function(parentGfx, element, attrs) {
+      var width = getWidth(element, attrs),
+          height = getHeight(element, attrs);
 
-      var x = 15;
-      var y = 12;
-
-      var pathData = pathMap.getScaledPath('TASK_TYPE_USER_1', {
-        abspos: {
-          x: x,
-          y: y
+      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: width,
+        containerHeight: height,
+        position: {
+          mx: ((width / 2 + attrs.parallel) / width),
+          my: (height - 20) / height
         }
       });
 
-      /* user path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 0.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('parallel', parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
-
-      var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
-        abspos: {
-          x: x,
-          y: y
+    },
+    'SequentialMarker': function(parentGfx, element, attrs) {
+      var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: ((element.width / 2 + attrs.seq) / element.width),
+          my: (element.height - 19) / element.height
         }
       });
 
-      /* user2 path */ drawPath(parentGfx, pathData2, {
-        strokeWidth: 0.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('sequential', parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
-
-      var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
-        abspos: {
-          x: x,
-          y: y
+    },
+    'CompensationMarker': function(parentGfx, element, attrs) {
+      var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: ((element.width / 2 + attrs.compensation) / element.width),
+          my: (element.height - 13) / element.height
         }
       });
 
-      /* user3 path */ drawPath(parentGfx, pathData3, {
-        strokeWidth: 0.5,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('compensation', parentGfx, markerMath, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
-
-      return task;
     },
-    'bpmn:ManualTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'LoopMarker': function(parentGfx, element, attrs) {
+      var width = getWidth(element, attrs),
+          height = getHeight(element, attrs);
 
-      var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
-        abspos: {
-          x: 17,
-          y: 15
+      var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: width,
+        containerHeight: height,
+        position: {
+          mx: ((width / 2 + attrs.loop) / width),
+          my: (height - 7) / height
         }
       });
 
-      /* manual path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 0.5, // 0.25,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('loop', parentGfx, markerPath, {
+        strokeWidth: 1.5,
+        fill: 'none',
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeMiterlimit: 0.5
       });
-
-      return task;
     },
-    'bpmn:SendTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'AdhocMarker': function(parentGfx, element, attrs) {
+      var width = getWidth(element, attrs),
+          height = getHeight(element, attrs);
 
-      var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+      var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
         xScaleFactor: 1,
         yScaleFactor: 1,
-        containerWidth: 21,
-        containerHeight: 14,
+        containerWidth: width,
+        containerHeight: height,
         position: {
-          mx: 0.285,
-          my: 0.357
+          mx: ((width / 2 + attrs.adhoc) / width),
+          my: (height - 15) / height
         }
       });
 
-      /* send path */ drawPath(parentGfx, pathData, {
+      drawMarker('adhoc', parentGfx, markerPath, {
         strokeWidth: 1,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getFillColor(element, defaultFillColor)
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
+    }
+  };
 
-      return task;
-    },
-    'bpmn:ReceiveTask' : function(parentGfx, element) {
-      var semantic = getSemantic(element);
+  function renderTaskMarker(type, parentGfx, element, attrs) {
+    taskMarkerRenderers[ type ](parentGfx, element, attrs);
+  }
 
-      var task = renderer('bpmn:Task')(parentGfx, element);
-      var pathData;
+  function renderTaskMarkers(parentGfx, element, taskMarkers, attrs = {}) {
+    attrs = {
+      fill: attrs.fill,
+      stroke: attrs.stroke,
+      width: getWidth(element, attrs),
+      height: getHeight(element, attrs)
+    };
 
-      if (semantic.instantiate) {
-        drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
+    var semantic = getSemantic(element);
 
-        pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
-          abspos: {
-            x: 7.77,
-            y: 9.52
-          }
-        });
-      } else {
+    var subprocess = taskMarkers && taskMarkers.includes('SubProcessMarker');
 
-        pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
-          xScaleFactor: 0.9,
-          yScaleFactor: 0.9,
-          containerWidth: 21,
-          containerHeight: 14,
-          position: {
-            mx: 0.3,
-            my: 0.4
-          }
-        });
+    if (subprocess) {
+      attrs = {
+        ...attrs,
+        seq: -21,
+        parallel: -22,
+        compensation: -42,
+        loop: -18,
+        adhoc: 10
+      };
+    } else {
+      attrs = {
+        ...attrs,
+        seq: -5,
+        parallel: -6,
+        compensation: -27,
+        loop: 0,
+        adhoc: 10
+      };
+    }
+
+    forEach(taskMarkers, function(marker) {
+      renderTaskMarker(marker, parentGfx, element, attrs);
+    });
+
+    if (semantic.get('isForCompensation')) {
+      renderTaskMarker('CompensationMarker', parentGfx, element, attrs);
+    }
+
+    if (is(semantic, 'bpmn:AdHocSubProcess')) {
+      renderTaskMarker('AdhocMarker', parentGfx, element, attrs);
+    }
+
+    var loopCharacteristics = semantic.get('loopCharacteristics'),
+        isSequential = loopCharacteristics && loopCharacteristics.get('isSequential');
+
+    if (loopCharacteristics) {
+
+      if (isSequential === undefined) {
+        renderTaskMarker('LoopMarker', parentGfx, element, attrs);
       }
 
-      /* receive path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      if (isSequential === false) {
+        renderTaskMarker('ParallelMarker', parentGfx, element, attrs);
+      }
 
-      return task;
-    },
-    'bpmn:ScriptTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+      if (isSequential === true) {
+        renderTaskMarker('SequentialMarker', parentGfx, element, attrs);
+      }
+    }
+  }
 
-      var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
-        abspos: {
-          x: 15,
-          y: 20
-        }
-      });
+  function renderLabel(parentGfx, label, attrs = {}) {
+    attrs = assign({
+      size: {
+        width: 100
+      }
+    }, attrs);
 
-      /* script path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+    var text = textRenderer.createText(label || '', attrs);
 
-      return task;
-    },
-    'bpmn:BusinessRuleTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    svgClasses(text).add('djs-label');
 
-      var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
-        abspos: {
-          x: 8,
-          y: 8
+    svgAppend(parentGfx, text);
+
+    return text;
+  }
+
+  function renderEmbeddedLabel(parentGfx, element, align, attrs = {}) {
+    var semantic = getSemantic(element);
+
+    var box = getBounds({
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      height: element.height
+    }, attrs);
+
+    return renderLabel(parentGfx, semantic.name, {
+      align,
+      box,
+      padding: 7,
+      style: {
+        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+      }
+    });
+  }
+
+  function renderExternalLabel(parentGfx, element, attrs = {}) {
+    var box = {
+      width: 90,
+      height: 30,
+      x: element.width / 2 + element.x,
+      y: element.height / 2 + element.y
+    };
+
+    return renderLabel(parentGfx, getLabel(element), {
+      box: box,
+      fitBox: true,
+      style: assign(
+        {},
+        textRenderer.getExternalStyle(),
+        {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
         }
-      });
+      )
+    });
+  }
 
-      var businessHeaderPath = drawPath(parentGfx, headerPathData);
-      svgAttr(businessHeaderPath, {
-        strokeWidth: 1,
-        fill: getFillColor(element, '#aaaaaa'),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+  function renderLaneLabel(parentGfx, text, element, attrs = {}) {
+    var textBox = renderLabel(parentGfx, text, {
+      box: {
+        height: 30,
+        width: getHeight(element, attrs),
+      },
+      align: 'center-middle',
+      style: {
+        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+      }
+    });
 
-      var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
-        abspos: {
-          x: 8,
-          y: 8
+    var top = -1 * getHeight(element, attrs);
+
+    transform(textBox, 0, -top, 270);
+  }
+
+  function renderActivity(parentGfx, element, attrs = {}) {
+    var {
+      width,
+      height
+    } = getBounds(element, attrs);
+
+    return drawRect(parentGfx, width, height, TASK_BORDER_RADIUS, {
+      ...attrs,
+      fill: getFillColor(element, defaultFillColor, attrs.fill),
+      fillOpacity: DEFAULT_OPACITY,
+      stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+    });
+  }
+
+  function renderAssociation(parentGfx, element, attrs = {}) {
+    var semantic = getSemantic(element);
+
+    var fill = getFillColor(element, defaultFillColor, attrs.fill),
+        stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+    if (semantic.get('associationDirection') === 'One' ||
+        semantic.get('associationDirection') === 'Both') {
+      attrs.markerEnd = marker('association-end', fill, stroke);
+    }
+
+    if (semantic.get('associationDirection') === 'Both') {
+      attrs.markerStart = marker('association-start', fill, stroke);
+    }
+
+    attrs = pickAttrs(attrs, [
+      'markerStart',
+      'markerEnd'
+    ]);
+
+    return drawConnectionSegments(parentGfx, element.waypoints, {
+      ...attrs,
+      stroke,
+      strokeDasharray: '0, 5'
+    });
+  }
+
+  function renderDataObject(parentGfx, element, attrs = {}) {
+    var fill = getFillColor(element, defaultFillColor, attrs.fill),
+        stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+    var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
+      xScaleFactor: 1,
+      yScaleFactor: 1,
+      containerWidth: element.width,
+      containerHeight: element.height,
+      position: {
+        mx: 0.474,
+        my: 0.296
+      }
+    });
+
+    var dataObject = drawPath(parentGfx, pathData, {
+      fill,
+      fillOpacity: DEFAULT_OPACITY,
+      stroke
+    });
+
+    var semantic = getSemantic(element);
+
+    if (isCollection(semantic)) {
+      var collectionPathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.33,
+          my: (element.height - 18) / element.height
         }
       });
 
-      var businessPath = drawPath(parentGfx, headerData);
-      svgAttr(businessPath, {
-        strokeWidth: 1,
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, collectionPathData, {
+        strokeWidth: 2,
+        fill,
+        stroke
       });
+    }
 
-      return task;
-    },
-    'bpmn:SubProcess': function(parentGfx, element, attrs) {
-      attrs = {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        ...attrs
-      };
+    return dataObject;
+  }
 
-      var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+  function renderEvent(parentGfx, element, attrs = {}) {
+    return drawCircle(parentGfx, element.width, element.height, {
+      fillOpacity: DEFAULT_OPACITY,
+      ...attrs,
+      fill: getFillColor(element, defaultFillColor, attrs.fill),
+      stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+    });
+  }
 
-      var expanded = isExpanded(element);
+  function renderGateway(parentGfx, element, attrs = {}) {
+    return drawDiamond(parentGfx, element.width, element.height, {
+      fill: getFillColor(element, defaultFillColor, attrs.fill),
+      fillOpacity: DEFAULT_OPACITY,
+      stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+    });
+  }
 
-      if (isEventSubProcess(element)) {
-        svgAttr(rect, {
-          strokeDasharray: '0, 5.5',
-          strokeWidth: 2.5
-        });
-      }
+  function renderLane(parentGfx, element, attrs = {}) {
+    var lane = drawRect(parentGfx, getWidth(element, attrs), getHeight(element, attrs), 0, {
+      fill: getFillColor(element, defaultFillColor, attrs.fill),
+      fillOpacity: attrs.fillOpacity || DEFAULT_OPACITY,
+      stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+      strokeWidth: 1.5
+    });
 
-      renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
+    var semantic = getSemantic(element);
 
-      if (expanded) {
-        attachTaskMarkers(parentGfx, element);
-      } else {
-        attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
-      }
+    if (is(semantic, 'bpmn:Lane')) {
+      var text = semantic.get('name');
 
-      return rect;
-    },
-    'bpmn:AdHocSubProcess': function(parentGfx, element) {
-      return renderer('bpmn:SubProcess')(parentGfx, element);
-    },
-    'bpmn:Transaction': function(parentGfx, element) {
-      var outer = renderer('bpmn:SubProcess')(parentGfx, element, { strokeWidth: 1.5 });
+      renderLaneLabel(parentGfx, text, element, attrs);
+    }
 
-      var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeWidth: 1.5
-      });
+    return lane;
+  }
 
-      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 3, INNER_OUTER_DIST, innerAttrs);
+  function renderSubProcess(parentGfx, element, attrs = {}) {
+    var activity = renderActivity(parentGfx, element, attrs);
 
-      return outer;
-    },
-    'bpmn:CallActivity': function(parentGfx, element) {
-      return renderer('bpmn:SubProcess')(parentGfx, element, {
-        strokeWidth: 5
+    if (isEventSubProcess(element)) {
+      svgAttr(activity, {
+        strokeDasharray: '0, 5.5',
+        strokeWidth: 2.5
       });
-    },
-    'bpmn:Participant': function(parentGfx, element) {
+    }
 
-      var strokeWidth = 1.5;
+    var expanded = isExpanded(element);
 
-      var attrs = {
-        fillOpacity: DEFAULT_FILL_OPACITY,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeWidth
-      };
+    renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle', attrs);
 
-      var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
+    if (expanded) {
+      renderTaskMarkers(parentGfx, element, undefined, attrs);
+    } else {
+      renderTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ], attrs);
+    }
 
-      var expandedPool = isExpanded(element);
+    return activity;
+  }
 
-      if (expandedPool) {
-        drawLine(parentGfx, [
-          { x: 30, y: 0 },
-          { x: 30, y: element.height }
-        ], {
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth
-        });
-        var text = getSemantic(element).name;
-        renderLaneLabel(parentGfx, text, element);
-      } else {
+  function renderTask(parentGfx, element, attrs = {}) {
+    var activity = renderActivity(parentGfx, element, attrs);
 
-        // collapsed pool draw text inline
-        var text2 = getSemantic(element).name;
-        renderLabel(parentGfx, text2, {
-          box: element, align: 'center-middle',
-          style: {
-            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-          }
-        });
-      }
+    renderEmbeddedLabel(parentGfx, element, 'center-middle', attrs);
 
-      var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
+    renderTaskMarkers(parentGfx, element, undefined, attrs);
 
-      if (participantMultiplicity) {
-        renderer('ParticipantMultiplicityMarker')(parentGfx, element);
+    return activity;
+  }
+
+  var handlers = this.handlers = {
+    'bpmn:AdHocSubProcess': function(parentGfx, element, attrs = {}) {
+      if (isExpanded(element)) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+      } else {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
       }
 
-      return lane;
+      return renderSubProcess(parentGfx, element, attrs);
     },
-    'bpmn:Lane': function(parentGfx, element, attrs) {
-      var rect = drawRect(parentGfx, element.width, element.height, 0, {
-        fill: getFillColor(element, defaultFillColor),
-        fillOpacity: HIGH_FILL_OPACITY,
-        stroke: getStrokeColor(element, defaultStrokeColor),
+    'bpmn:Association': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      return renderAssociation(parentGfx, element, attrs);
+    },
+    'bpmn:BoundaryEvent': function(parentGfx, element, attrs = {}) {
+      var { renderIcon = true } = attrs;
+
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var semantic = getSemantic(element),
+          cancelActivity = semantic.get('cancelActivity');
+
+      attrs = {
         strokeWidth: 1.5,
-        ...attrs
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: FULL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      };
+
+      if (!cancelActivity) {
+        attrs.strokeDasharray = '6';
+      }
+
+      var event = renderEvent(parentGfx, element, attrs);
+
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+        ...attrs,
+        fill: 'none'
       });
 
-      var semantic = getSemantic(element);
-
-      if (semantic.$type === 'bpmn:Lane') {
-        var text = semantic.name;
-        renderLaneLabel(parentGfx, text, element);
+      if (renderIcon) {
+        renderEventIcon(element, parentGfx, attrs);
       }
 
-      return rect;
+      return event;
     },
-    'bpmn:InclusiveGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:BusinessRuleTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      /* circle path */
-      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
-        strokeWidth: 2.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      var task = renderTask(parentGfx, element, attrs);
+
+      var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
+        abspos: {
+          x: 8,
+          y: 8
+        }
       });
 
-      return diamond;
-    },
-    'bpmn:ExclusiveGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      var businessPath = drawPath(parentGfx, headerData);
 
-      var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
-        xScaleFactor: 0.4,
-        yScaleFactor: 0.4,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: 0.32,
-          my: 0.3
+      svgAttr(businessPath, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
+        abspos: {
+          x: 8,
+          y: 8
         }
       });
 
-      if ((getDi(element).isMarkerVisible)) {
-        drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-      }
+      var businessHeaderPath = drawPath(parentGfx, headerPathData);
 
-      return diamond;
+      svgAttr(businessHeaderPath, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return task;
     },
-    'bpmn:ComplexGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:CallActivity': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
+      return renderSubProcess(parentGfx, element, {
+        strokeWidth: 5,
+        ...attrs
+      });
+    },
+    'bpmn:ComplexGateway': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var gateway = renderGateway(parentGfx, element, attrs);
+
       var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
@@ -1336,46 +1398,138 @@ xScaleFactor: 0.5,
 
-      /* complex path */ drawPath(parentGfx, pathData, {
+      drawPath(parentGfx, pathData, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return gateway;
+    },
+    'bpmn:DataInput': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+
+      var dataObject = renderDataObject(parentGfx, element, attrs);
+
+      drawPath(parentGfx, arrowPathData, {
+        fill: 'none',
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return dataObject;
+    },
+    'bpmn:DataInputAssociation': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      return renderAssociation(parentGfx, element, {
+        ...attrs,
+        markerEnd: marker('association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))
+      });
+    },
+    'bpmn:DataObject': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      return renderDataObject(parentGfx, element, attrs);
+    },
+    'bpmn:DataObjectReference': as('bpmn:DataObject'),
+    'bpmn:DataOutput': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+
+      var dataObject = renderDataObject(parentGfx, element, attrs);
+
+      drawPath(parentGfx, arrowPathData, {
         strokeWidth: 1,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
 
-      return diamond;
+      return dataObject;
     },
-    'bpmn:ParallelGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:DataOutputAssociation': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
-        xScaleFactor: 0.6,
-        yScaleFactor:0.6,
+      return renderAssociation(parentGfx, element, {
+        ...attrs,
+        markerEnd: marker('association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))
+      });
+    },
+    'bpmn:DataStoreReference': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var dataStorePath = pathMap.getScaledPath('DATA_STORE', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
         containerWidth: element.width,
         containerHeight: element.height,
         position: {
-          mx: 0.46,
-          my: 0.2
+          mx: 0,
+          my: 0.133
         }
       });
 
-      /* parallel path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      return drawPath(parentGfx, dataStorePath, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 2
       });
+    },
+    'bpmn:EndEvent': function(parentGfx, element, attrs = {}) {
+      var { renderIcon = true } = attrs;
 
-      return diamond;
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var event = renderEvent(parentGfx, element, {
+        ...attrs,
+        strokeWidth: 4
+      });
+
+      if (renderIcon) {
+        renderEventIcon(element, parentGfx, attrs);
+      }
+
+      return event;
     },
-    'bpmn:EventBasedGateway': function(parentGfx, element) {
+    'bpmn:EventBasedGateway': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
       var semantic = getSemantic(element);
 
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      var diamond = renderGateway(parentGfx, element, attrs);
 
-      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
-        strokeWidth: 1,
-        fill: 'none',
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
+        fill: getFillColor(element, 'none', attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
 
-      var type = semantic.eventGatewayType;
-      var instantiate = !!semantic.instantiate;
+      var type = semantic.get('eventGatewayType'),
+          instantiate = !!semantic.get('instantiate');
 
@@ -1395,6 +1549,6 @@ function drawEvent() {
 
-        /* event path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 2,
-          fill: getFillColor(element, 'none'),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathData, {
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
@@ -1404,6 +1558,5 @@ }
       if (type === 'Parallel') {
-
         var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
           xScaleFactor: 0.4,
-          yScaleFactor:0.4,
+          yScaleFactor: 0.4,
           containerWidth: element.width,
@@ -1418,12 +1571,12 @@ containerHeight: element.height,
         drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: 'none'
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       } else if (type === 'Exclusive') {
-
         if (!instantiate) {
           drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {
-            strokeWidth: 1,
             fill: 'none',
-            stroke: getStrokeColor(element, defaultStrokeColor)
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
           });
@@ -1438,84 +1591,143 @@ }
     },
-    'bpmn:Gateway': function(parentGfx, element) {
-      return drawDiamond(parentGfx, element.width, element.height, {
-        fill: getFillColor(element, defaultFillColor),
-        fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-    },
-    'bpmn:SequenceFlow': function(parentGfx, element) {
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+    'bpmn:ExclusiveGateway': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      var path = drawConnectionSegments(parentGfx, element.waypoints, {
-        markerEnd: marker('sequenceflow-end', fill, stroke),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      var gateway = renderGateway(parentGfx, element, attrs);
+
+      var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
+        xScaleFactor: 0.4,
+        yScaleFactor: 0.4,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.32,
+          my: 0.3
+        }
       });
 
-      var sequenceFlow = getSemantic(element);
+      var di = getDi(element);
 
-      var source;
+      if (di.get('isMarkerVisible')) {
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+      }
 
-      if (element.source) {
-        source = element.source.businessObject;
+      return gateway;
+    },
+    'bpmn:Gateway': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-        // conditional flow marker
-        if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-          svgAttr(path, {
-            markerStart: marker('conditional-flow-marker', fill, stroke)
-          });
-        }
+      return renderGateway(parentGfx, element, attrs);
+    },
+    'bpmn:Group': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke',
+        'width',
+        'height'
+      ]);
 
-        // default marker
-        if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
-            source.default === sequenceFlow) {
-          svgAttr(path, {
-            markerStart: marker('conditional-default-flow-marker', fill, stroke)
-          });
-        }
-      }
+      return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1.5,
+        strokeDasharray: '10, 6, 0, 6',
+        fill: 'none',
+        pointerEvents: 'none',
+        width: getWidth(element, attrs),
+        height: getHeight(element, attrs)
+      });
+    },
+    'bpmn:InclusiveGateway': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      return path;
+      var gateway = renderGateway(parentGfx, element, attrs);
+
+      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 2.5
+      });
+
+      return gateway;
     },
-    'bpmn:Association': function(parentGfx, element, attrs) {
+    'bpmn:IntermediateEvent': function(parentGfx, element, attrs = {}) {
+      var { renderIcon = true } = attrs;
 
-      var semantic = getSemantic(element);
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+      var outer = renderEvent(parentGfx, element, {
+        ...attrs,
+        strokeWidth: 1.5
+      });
 
-      attrs = {
-        strokeDasharray: '0, 5',
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        ...attrs
-      };
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+        fill: 'none',
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1.5
+      });
 
-      if (semantic.associationDirection === 'One' ||
-          semantic.associationDirection === 'Both') {
-        attrs.markerEnd = marker('association-end', fill, stroke);
+      if (renderIcon) {
+        renderEventIcon(element, parentGfx, attrs);
       }
 
-      if (semantic.associationDirection === 'Both') {
-        attrs.markerStart = marker('association-start', fill, stroke);
-      }
-
-      return drawConnectionSegments(parentGfx, element.waypoints, attrs);
+      return outer;
     },
-    'bpmn:DataInputAssociation': function(parentGfx, element) {
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+    'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
+    'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
+    'bpmn:Lane': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke',
+        'width',
+        'height'
+      ]);
 
-      return renderer('bpmn:Association')(parentGfx, element, {
-        markerEnd: marker('association-end', fill, stroke)
+      return renderLane(parentGfx, element, {
+        ...attrs,
+        fillOpacity: LOW_OPACITY
       });
     },
-    'bpmn:DataOutputAssociation': function(parentGfx, element) {
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+    'bpmn:ManualTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      return renderer('bpmn:Association')(parentGfx, element, {
-        markerEnd: marker('association-end', fill, stroke)
+      var task = renderTask(parentGfx, element, attrs);
+
+      var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
+        abspos: {
+          x: 17,
+          y: 15
+        }
       });
+
+      drawPath(parentGfx, pathData, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 0.5
+      });
+
+      return task;
     },
-    'bpmn:MessageFlow': function(parentGfx, element) {
+    'bpmn:MessageFlow': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
@@ -1525,4 +1737,4 @@ var semantic = getSemantic(element),
 
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
@@ -1532,8 +1744,8 @@ var path = drawConnectionSegments(parentGfx, element.waypoints, {
         markerStart: marker('messageflow-start', fill, stroke),
+        stroke,
         strokeDasharray: '10, 11',
-        strokeWidth: 1.5,
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        strokeWidth: 1.5
       });
 
-      if (semantic.messageRef) {
+      if (semantic.get('messageRef')) {
         var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
@@ -1548,10 +1760,12 @@
 
-        var messageAttrs = { strokeWidth: 1 };
+        var messageAttrs = {
+          strokeWidth: 1
+        };
 
-        if (di.messageVisibleKind === 'initiating') {
-          messageAttrs.fill = 'white';
-          messageAttrs.stroke = black;
+        if (di.get('messageVisibleKind') === 'initiating') {
+          messageAttrs.fill = fill;
+          messageAttrs.stroke = stroke;
         } else {
-          messageAttrs.fill = '#888';
-          messageAttrs.stroke = 'white';
+          messageAttrs.fill = stroke;
+          messageAttrs.stroke = fill;
         }
@@ -1561,8 +1775,10 @@
 
-        var labelText = semantic.messageRef.name;
-        var label = renderLabel(parentGfx, labelText, {
+        var messageRef = semantic.get('messageRef'),
+            name = messageRef.get('name');
+
+        var label = renderLabel(parentGfx, name, {
           align: 'center-top',
           fitBox: true,
           style: {
-            fill: getStrokeColor(element, defaultLabelColor, defaultStrokeColor)
+            fill: stroke
           }
@@ -1578,3 +1794,2 @@ });
         transform(label, translateX, translateY, 0);
-
       }
@@ -1584,127 +1799,325 @@
     },
-    'bpmn:DataObject': function(parentGfx, element) {
-      var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
+    'bpmn:ParallelGateway': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var diamond = renderGateway(parentGfx, element, attrs);
+
+      var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
+        xScaleFactor: 0.6,
+        yScaleFactor: 0.6,
         containerWidth: element.width,
         containerHeight: element.height,
         position: {
-          mx: 0.474,
-          my: 0.296
+          mx: 0.46,
+          my: 0.2
         }
       });
 
-      var elementObject = drawPath(parentGfx, pathData, {
-        fill: getFillColor(element, defaultFillColor),
-        fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, pathData, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
 
-      var semantic = getSemantic(element);
+      return diamond;
+    },
+    'bpmn:Participant': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke',
+        'width',
+        'height'
+      ]);
 
-      if (isCollection(semantic)) {
-        renderDataItemCollection(parentGfx, element);
+      var participant = renderLane(parentGfx, element, attrs);
+
+      var expandedParticipant = isExpanded(element);
+
+      var semantic = getSemantic(element),
+          name = semantic.get('name');
+
+      if (expandedParticipant) {
+        drawLine(parentGfx, [
+          {
+            x: 30,
+            y: 0
+          },
+          {
+            x: 30,
+            y: getHeight(element, attrs)
+          }
+        ], {
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: PARTICIPANT_STROKE_WIDTH
+        });
+
+        renderLaneLabel(parentGfx, name, element, attrs);
+      } else {
+        renderLabel(parentGfx, name, {
+          box: getBounds(element, attrs),
+          align: 'center-middle',
+          style: {
+            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+          }
+        });
       }
 
-      return elementObject;
+      if (semantic.get('participantMultiplicity')) {
+        renderTaskMarker('ParticipantMultiplicityMarker', parentGfx, element, attrs);
+      }
+
+      return participant;
     },
-    'bpmn:DataObjectReference': as('bpmn:DataObject'),
-    'bpmn:DataInput': function(parentGfx, element) {
+    'bpmn:ReceiveTask' : function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+      var semantic = getSemantic(element);
 
-      // page
-      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+      var task = renderTask(parentGfx, element, attrs);
 
-      /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+      var pathData;
 
-      return elementObject;
+      if (semantic.get('instantiate')) {
+        drawCircle(parentGfx, 28, 28, 20 * 0.22, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
+          abspos: {
+            x: 7.77,
+            y: 9.52
+          }
+        });
+      } else {
+        pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+          xScaleFactor: 0.9,
+          yScaleFactor: 0.9,
+          containerWidth: 21,
+          containerHeight: 14,
+          position: {
+            mx: 0.3,
+            my: 0.4
+          }
+        });
+      }
+
+      drawPath(parentGfx, pathData, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return task;
     },
-    'bpmn:DataOutput': function(parentGfx, element) {
-      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+    'bpmn:ScriptTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      // page
-      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+      var task = renderTask(parentGfx, element, attrs);
 
-      /* output arrow path */ drawPath(parentGfx, arrowPathData, {
-        strokeWidth: 1,
-        fill: black
+      var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
+        abspos: {
+          x: 15,
+          y: 20
+        }
       });
 
-      return elementObject;
+      drawPath(parentGfx, pathData, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return task;
     },
-    'bpmn:DataStoreReference': function(parentGfx, element) {
-      var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
+    'bpmn:SendTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var task = renderTask(parentGfx, element, attrs);
+
+      var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
         xScaleFactor: 1,
         yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
+        containerWidth: 21,
+        containerHeight: 14,
         position: {
-          mx: 0,
-          my: 0.133
+          mx: 0.285,
+          my: 0.357
         }
       });
 
-      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
-        strokeWidth: 2,
-        fill: getFillColor(element, defaultFillColor),
-        fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, pathData, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getFillColor(element, defaultFillColor, attrs.fill),
+        strokeWidth: 1
       });
 
-      return elementStore;
+      return task;
     },
-    'bpmn:BoundaryEvent': function(parentGfx, element, options) {
+    'bpmn:SequenceFlow': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      var semantic = getSemantic(element),
-          cancel = semantic.cancelActivity;
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
-      var attrs = {
-        strokeWidth: 1.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      var connection = drawConnectionSegments(parentGfx, element.waypoints, {
+        markerEnd: marker('sequenceflow-end', fill, stroke),
+        stroke
+      });
 
-      if (!cancel) {
-        attrs.strokeDasharray = '6';
+      var semantic = getSemantic(element);
+
+      var { source } = element;
+
+      if (source) {
+        var sourceSemantic = getSemantic(source);
+
+        // conditional flow marker
+        if (semantic.get('conditionExpression') && is(sourceSemantic, 'bpmn:Activity')) {
+          svgAttr(connection, {
+            markerStart: marker('conditional-flow-marker', fill, stroke)
+          });
+        }
+
+        // default marker
+        if (sourceSemantic.get('default') && (is(sourceSemantic, 'bpmn:Gateway') || is(sourceSemantic, 'bpmn:Activity')) &&
+            sourceSemantic.get('default') === semantic) {
+          svgAttr(connection, {
+            markerStart: marker('conditional-default-flow-marker', fill, stroke)
+          });
+        }
       }
 
-      // apply fillOpacity
-      var outerAttrs = {
-        ...attrs,
-        fillOpacity: 1
-      };
+      return connection;
+    },
+    'bpmn:ServiceTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      // apply no-fill
-      var innerAttrs = {
-        ...attrs,
-        fill: 'none'
-      };
+      var task = renderTask(parentGfx, element, attrs);
 
-      var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+      drawCircle(parentGfx, 10, 10, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: 'none',
+        transform: 'translate(6, 6)'
+      });
 
-      /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
+      var pathDataService1 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
+        abspos: {
+          x: 12,
+          y: 18
+        }
+      });
 
-      if (!options || options.renderIcon !== false) {
-        renderEventContent(element, parentGfx);
+      drawPath(parentGfx, pathDataService1, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      drawCircle(parentGfx, 10, 10, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: 'none',
+        transform: 'translate(11, 10)'
+      });
+
+      var pathDataService2 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
+        abspos: {
+          x: 17,
+          y: 22
+        }
+      });
+
+      drawPath(parentGfx, pathDataService2, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return task;
+    },
+    'bpmn:StartEvent': function(parentGfx, element, attrs = {}) {
+      var { renderIcon = true } = attrs;
+
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var semantic = getSemantic(element);
+
+      if (!semantic.get('isInterrupting')) {
+        attrs = {
+          ...attrs,
+          strokeDasharray: '6'
+        };
       }
 
-      return outer;
+      var event = renderEvent(parentGfx, element, attrs);
+
+      if (renderIcon) {
+        renderEventIcon(element, parentGfx, attrs);
+      }
+
+      return event;
     },
-    'bpmn:Group': function(parentGfx, element) {
-      return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeWidth: 1.5,
-        strokeDasharray: '10,6,0,6',
-        fill: 'none',
-        pointerEvents: 'none'
-      });
+    'bpmn:SubProcess': function(parentGfx, element, attrs = {}) {
+      if (isExpanded(element)) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+      } else {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+      }
+
+      return renderSubProcess(parentGfx, element, attrs);
     },
-    'label': function(parentGfx, element) {
-      return renderExternalLabel(parentGfx, element);
+    'bpmn:Task': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      return renderTask(parentGfx, element, attrs);
     },
-    'bpmn:TextAnnotation': function(parentGfx, element) {
-      var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, {
-        'fill': 'none',
-        'stroke': 'none'
+    'bpmn:TextAnnotation': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke',
+        'width',
+        'height'
+      ]);
+
+      var {
+        width,
+        height
+      } = getBounds(element, attrs);
+
+      var textElement = drawRect(parentGfx, width, height, 0, 0, {
+        fill: 'none',
+        stroke: 'none'
       });
@@ -1715,4 +2128,4 @@
         yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
+        containerWidth: width,
+        containerHeight: height,
         position: {
@@ -1725,12 +2138,14 @@ mx: 0.0,
       drawPath(parentGfx, textPathData, {
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
 
-      var text = getSemantic(element).text || '';
+      var semantic = getSemantic(element),
+          text = semantic.get('text') || '';
+
       renderLabel(parentGfx, text, {
-        box: element,
         align: 'left-top',
+        box: getBounds(element, attrs),
         padding: 7,
         style: {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
         }
@@ -1741,214 +2156,101 @@ });
     },
-    'ParticipantMultiplicityMarker': function(parentGfx, element) {
-      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: ((element.width / 2) / element.width),
-          my: (element.height - 15) / element.height
-        }
+    'bpmn:Transaction': function(parentGfx, element, attrs = {}) {
+      if (isExpanded(element)) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+      } else {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+      }
+
+      var outer = renderSubProcess(parentGfx, element, {
+        strokeWidth: 1.5,
+        ...attrs
       });
 
-      drawMarker('participant-multiplicity', parentGfx, markerPath, {
-        strokeWidth: 2,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1.5
       });
+
+      var expanded = isExpanded(element);
+
+      if (!expanded) {
+        attrs = {};
+      }
+
+      drawRect(
+        parentGfx,
+        getWidth(element, attrs),
+        getHeight(element, attrs),
+        TASK_BORDER_RADIUS - INNER_OUTER_DIST,
+        INNER_OUTER_DIST,
+        innerAttrs
+      );
+
+      return outer;
     },
-    'SubProcessMarker': function(parentGfx, element) {
-      var markerRect = drawRect(parentGfx, 14, 14, 0, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+    'bpmn:UserTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      // Process marker is placed in the middle of the box
-      // therefore fixed values can be used here
-      translate(markerRect, element.width / 2 - 7.5, element.height - 20);
+      var task = renderTask(parentGfx, element, attrs);
 
-      var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
-        xScaleFactor: 1.5,
-        yScaleFactor: 1.5,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: (element.width / 2 - 7.5) / element.width,
-          my: (element.height - 20) / element.height
+      var x = 15;
+      var y = 12;
+
+      var pathDataUser1 = pathMap.getScaledPath('TASK_TYPE_USER_1', {
+        abspos: {
+          x: x,
+          y: y
         }
       });
 
-      drawMarker('sub-process', parentGfx, markerPath, {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, pathDataUser1, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 0.5
       });
-    },
-    'ParallelMarker': function(parentGfx, element, position) {
-      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: ((element.width / 2 + position.parallel) / element.width),
-          my: (element.height - 20) / element.height
+
+      var pathDataUser2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
+        abspos: {
+          x: x,
+          y: y
         }
       });
 
-      drawMarker('parallel', parentGfx, markerPath, {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, pathDataUser2, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 0.5
       });
-    },
-    'SequentialMarker': function(parentGfx, element, position) {
-      var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: ((element.width / 2 + position.seq) / element.width),
-          my: (element.height - 19) / element.height
-        }
-      });
 
-      drawMarker('sequential', parentGfx, markerPath, {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-    },
-    'CompensationMarker': function(parentGfx, element, position) {
-      var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: ((element.width / 2 + position.compensation) / element.width),
-          my: (element.height - 13) / element.height
+      var pathDataUser3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
+        abspos: {
+          x: x,
+          y: y
         }
       });
 
-      drawMarker('compensation', parentGfx, markerMath, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, pathDataUser3, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 0.5
       });
-    },
-    'LoopMarker': function(parentGfx, element, position) {
-      var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: ((element.width / 2 + position.loop) / element.width),
-          my: (element.height - 7) / element.height
-        }
-      });
 
-      drawMarker('loop', parentGfx, markerPath, {
-        strokeWidth: 1.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeMiterlimit: 0.5
-      });
+      return task;
     },
-    'AdhocMarker': function(parentGfx, element, position) {
-      var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: ((element.width / 2 + position.adhoc) / element.width),
-          my: (element.height - 15) / element.height
-        }
-      });
-
-      drawMarker('adhoc', parentGfx, markerPath, {
-        strokeWidth: 1,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+    'label': function(parentGfx, element, attrs = {}) {
+      return renderExternalLabel(parentGfx, element, attrs);
     }
   };
 
-  function attachTaskMarkers(parentGfx, element, taskMarkers) {
-    var obj = getSemantic(element);
-
-    var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
-    var position;
-
-    if (subprocess) {
-      position = {
-        seq: -21,
-        parallel: -22,
-        compensation: -42,
-        loop: -18,
-        adhoc: 10
-      };
-    } else {
-      position = {
-        seq: -3,
-        parallel: -6,
-        compensation: -27,
-        loop: 0,
-        adhoc: 10
-      };
-    }
-
-    forEach(taskMarkers, function(marker) {
-      renderer(marker)(parentGfx, element, position);
-    });
-
-    if (obj.isForCompensation) {
-      renderer('CompensationMarker')(parentGfx, element, position);
-    }
-
-    if (obj.$type === 'bpmn:AdHocSubProcess') {
-      renderer('AdhocMarker')(parentGfx, element, position);
-    }
-
-    var loopCharacteristics = obj.loopCharacteristics,
-        isSequential = loopCharacteristics && loopCharacteristics.isSequential;
-
-    if (loopCharacteristics) {
-
-      if (isSequential === undefined) {
-        renderer('LoopMarker')(parentGfx, element, position);
-      }
-
-      if (isSequential === false) {
-        renderer('ParallelMarker')(parentGfx, element, position);
-      }
-
-      if (isSequential === true) {
-        renderer('SequentialMarker')(parentGfx, element, position);
-      }
-    }
-  }
-
-  function renderDataItemCollection(parentGfx, element) {
-
-    var yPosition = (element.height - 18) / element.height;
-
-    var pathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
-      xScaleFactor: 1,
-      yScaleFactor: 1,
-      containerWidth: element.width,
-      containerHeight: element.height,
-      position: {
-        mx: 0.33,
-        my: yPosition
-      }
-    });
-
-    /* collection path */ drawPath(parentGfx, pathData, {
-      strokeWidth: 2
-    });
-  }
-
-
   // extension API, use at your own risk
@@ -1987,11 +2289,12 @@ this._drawPath = drawPath;
  * @param {Element} element
+ * @param {Attrs} [attrs]
  *
  * @return {SVGElement} mainGfx
  */
-BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
-  var type = element.type;
-  var h = this._renderer(type);
+BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs = {}) {
+  var { type } = element;
 
-  /* jshint -W040 */
-  return h(parentGfx, element);
+  var handler = this._renderer(type);
+
+  return handler(parentGfx, element, attrs);
 };
@@ -2004,11 +2307,12 @@
  * @param {Element} element
+ * @param {Attrs} [attrs]
  *
  * @return {SVGElement} mainGfx
  */
-BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
-  var type = element.type;
-  var h = this._renderer(type);
+BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs = {}) {
+  var { type } = element;
 
-  /* jshint -W040 */
-  return h(parentGfx, element);
+  var handler = this._renderer(type);
+
+  return handler(parentGfx, element, attrs);
 };
@@ -2024,3 +2328,2 @@
 BpmnRenderer.prototype.getShapePath = function(element) {
-
   if (is(element, 'bpmn:Event')) {
@@ -2040,1 +2343,19 @@ return getCirclePath(element);
 };
+
+/**
+ * Pick attributes if they exist.
+ *
+ * @param {Object} attrs
+ * @param {string[]} keys
+ *
+ * @returns {Object}
+ */
+function pickAttrs(attrs, keys = []) {
+  return keys.reduce((pickedAttrs, key) => {
+    if (attrs[ key ]) {
+      pickedAttrs[ key ] = attrs[ key ];
+    }
+
+    return pickedAttrs;
+  }, {});
+}

lib/draw/BpmnRenderUtil.d.ts

@@ -10,2 +10,3 @@ /**
 export function isTypedEvent(event: any, eventDefinitionType: string): boolean;
+
 /**
@@ -19,2 +20,3 @@ * Check if element is a throw event.
 export function isThrowEvent(event: any): boolean;
+
 /**
@@ -28,16 +30,21 @@ * Check if element is a throw event.
 export function isCollection(element: any): boolean;
+
 /**
  * @param element
  * @param defaultColor
+ * @param overrideColor
  *
  * @return
  */
-export function getFillColor(element: any, defaultColor?: string): string;
+export function getFillColor(element: any, defaultColor?: string, overrideColor?: string): string;
+
 /**
  * @param element
  * @param defaultColor
+ * @param overrideColor
  *
  * @return
  */
-export function getStrokeColor(element: any, defaultColor?: string): string;
+export function getStrokeColor(element: any, defaultColor?: string, overrideColor?: string): string;
+
 /**
@@ -47,6 +54,8 @@ * @param element
  * @param defaultStrokeColor
+ * @param overrideColor
  *
  * @return
  */
-export function getLabelColor(element: any, defaultColor?: string, defaultStrokeColor?: string): string;
+export function getLabelColor(element: any, defaultColor?: string, defaultStrokeColor?: string, overrideColor?: string): string;
+
 /**
@@ -58,2 +67,3 @@ * @param shape
 export function getCirclePath(shape: any): string;
+
 /**
@@ -66,2 +76,3 @@ * @param shape
 export function getRoundRectPath(shape: any, borderRadius?: number): string;
+
 /**
@@ -73,2 +84,3 @@ * @param shape
 export function getDiamondPath(shape: any): string;
+
 /**
@@ -80,6 +92,40 @@ * @param shape
 export function getRectPath(shape: any): string;
+
+/**
+ * Get width and height from element or overrides.
+ *
+ * @param bounds
+ * @param overrides
+ *
+ * @returns
+ */
+export function getBounds(bounds: Dimensions | Rect | Shape, overrides?: any): Dimensions;
+
+/**
+ * Get width from element or overrides.
+ *
+ * @param bounds
+ * @param overrides
+ *
+ * @returns
+ */
+export function getWidth(bounds: Dimensions | Rect | Shape, overrides?: any): number;
+
+/**
+ * Get height from element or overrides.
+ *
+ * @param bounds
+ * @param overrides
+ *
+ * @returns
+ */
+export function getHeight(bounds: Dimensions | Rect | Shape, overrides?: any): number;
+
 export const black: string;
+export const white: string;
 export type ModdleElement = any;
 export type Element = any;
 export type ShapeLike = any;
+type Dimensions = import('diagram-js/lib/util/Types').Dimensions;
+type Rect = import('diagram-js/lib/util/Types').Rect;
 export { getDi, getBusinessObject as getSemantic } from "../util/ModelUtil";

lib/draw/BpmnRenderUtil.js

 import {
+  has,
   some
@@ -19,2 +20,5 @@ } from 'min-dash';
  * @typedef {import('../model').ShapeLike} ShapeLike
+ *
+ * @typedef {import('diagram-js/lib/util/Types').Dimensions} Dimensions
+ * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
  */
@@ -30,2 +34,3 @@
 export var black = 'hsl(225, 10%, 15%)';
+export var white = 'white';
 
@@ -78,9 +83,10 @@ // element utils //////////////////////
  * @param {string} [defaultColor]
+ * @param {string} [overrideColor]
  *
  * @return {string}
  */
-export function getFillColor(element, defaultColor) {
+export function getFillColor(element, defaultColor, overrideColor) {
   var di = getDi(element);
 
-  return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
+  return overrideColor || di.get('color:background-color') || di.get('bioc:fill') || defaultColor || white;
 }
@@ -91,9 +97,10 @@
  * @param {string} [defaultColor]
+ * @param {string} [overrideColor]
  *
  * @return {string}
  */
-export function getStrokeColor(element, defaultColor) {
+export function getStrokeColor(element, defaultColor, overrideColor) {
   var di = getDi(element);
 
-  return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
+  return overrideColor || di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
 }
@@ -105,10 +112,11 @@
  * @param {string} [defaultStrokeColor]
+ * @param {string} [overrideColor]
  *
  * @return {string}
  */
-export function getLabelColor(element, defaultColor, defaultStrokeColor) {
+export function getLabelColor(element, defaultColor, defaultStrokeColor, overrideColor) {
   var di = getDi(element),
       label = di.get('label');
 
-  return label && label.get('color:color') || defaultColor ||
+  return overrideColor || (label && label.get('color:color')) || defaultColor ||
     getStrokeColor(element, defaultStrokeColor);
@@ -216,1 +224,40 @@ }
 }
+
+/**
+ * Get width and height from element or overrides.
+ *
+ * @param {Dimensions|Rect|Shape} bounds
+ * @param {Object} overrides
+ *
+ * @returns {Dimensions}
+ */
+export function getBounds(bounds, overrides = {}) {
+  return {
+    width: getWidth(bounds, overrides),
+    height: getHeight(bounds, overrides)
+  };
+}
+
+/**
+ * Get width from element or overrides.
+ *
+ * @param {Dimensions|Rect|Shape} bounds
+ * @param {Object} overrides
+ *
+ * @returns {number}
+ */
+export function getWidth(bounds, overrides = {}) {
+  return has(overrides, 'width') ? overrides.width : bounds.width;
+}
+
+/**
+ * Get height from element or overrides.
+ *
+ * @param {Dimensions|Rect|Shape} bounds
+ * @param {Object} overrides
+ *
+ * @returns {number}
+ */
+export function getHeight(bounds, overrides = {}) {
+  return has(overrides, 'height') ? overrides.height : bounds.height;
+}

lib/features/context-pad/ContextPadProvider.d.ts

@@ -24,3 +24,16 @@ /**
    */
-  constructor(config: ContextPadConfig, injector: Injector, eventBus: EventBus, contextPad: ContextPad, modeling: Modeling, elementFactory: ElementFactory, connect: Connect, create: Create, popupMenu: PopupMenu, canvas: any, rules: Rules, translate: Translate);
+  constructor(
+    config: ContextPadConfig,
+    injector: Injector,
+    eventBus: EventBus,
+    contextPad: ContextPad,
+    modeling: Modeling,
+    elementFactory: ElementFactory,
+    connect: Connect,
+    create: Create,
+    popupMenu: PopupMenu,
+    canvas: any,
+    rules: Rules,
+    translate: Translate
+  );
 
@@ -27,0 +40,0 @@ /**

lib/features/context-pad/ContextPadProvider.js

@@ -74,3 +74,3 @@ import {
     connect, create, popupMenu,
-    canvas, rules, translate) {
+    canvas, rules, translate, appendPreview) {
 
@@ -92,2 +92,4 @@ config = config || {};
   this._translate = translate;
+  this._eventBus = eventBus;
+  this._appendPreview = appendPreview;
 
@@ -126,3 +128,4 @@ if (config.autoPlace !== false) {
   'rules',
-  'translate'
+  'translate',
+  'appendPreview'
 ];
@@ -186,3 +189,2 @@
       modeling = this._modeling,
-
       elementFactory = this._elementFactory,
@@ -194,3 +196,4 @@ connect = this._connect,
       autoPlace = this._autoPlace,
-      translate = this._translate;
+      translate = this._translate,
+      appendPreview = this._appendPreview;
 
@@ -249,15 +252,30 @@ var actions = {};
       var shape = elementFactory.createShape(assign({ type: type }, options));
+
       create.start(event, shape, {
         source: element
       });
+
+      appendPreview.cleanUp();
     }
 
-
-    var append = autoPlace ? function(event, element) {
+    var append = autoPlace ? function(_, element) {
       var shape = elementFactory.createShape(assign({ type: type }, options));
 
       autoPlace.append(element, shape);
+
+      appendPreview.cleanUp();
     } : appendStart;
 
+    var previewAppend = autoPlace ? function(_, element) {
 
+      // mouseover
+      appendPreview.create(element, type, options);
+
+      return () => {
+
+        // mouseout
+        appendPreview.cleanUp();
+      };
+    } : null;
+
     return {
@@ -269,3 +287,4 @@ group: 'model',
         dragstart: appendStart,
-        click: append
+        click: append,
+        hover: previewAppend
       }
@@ -272,0 +291,0 @@ };

lib/features/context-pad/index.js

@@ -0,1 +1,2 @@
+import AppendPreviewModule from '../append-preview';
 import DirectEditingModule from 'diagram-js-direct-editing';
@@ -12,2 +13,3 @@ import ContextPadModule from 'diagram-js/lib/features/context-pad';
   __depends__: [
+    AppendPreviewModule,
     DirectEditingModule,
@@ -14,0 +16,0 @@ ContextPadModule,

lib/features/modeling/index.d.ts

 declare namespace _default {
     const __init__: string[];
     const __depends__: (import("didi").ModuleDeclaration | {
-      bpmnReplace: (string | typeof import("../replace/BpmnReplace").default)[];
-    } | {
       bpmnRules: (string | typeof import("../rules/BpmnRules").default)[];
@@ -12,2 +10,4 @@ } | {
     } | {
+      bpmnReplace: (string | typeof import("../replace/BpmnReplace").default)[];
+    } | {
       spaceTool: (string | typeof import("../space-tool/BpmnSpaceTool").default)[];
@@ -14,0 +14,0 @@ })[];

lib/Modeler.js

@@ -33,2 +33,3 @@ import inherits from 'inherits-browser';
 import MoveModule from 'diagram-js/lib/features/move';
+import OutlineModule from './features/outline';
 import PaletteModule from './features/palette';
@@ -186,2 +187,3 @@ import ReplacePreviewModule from './features/replace-preview';
   MoveModule,
+  OutlineModule,
   PaletteModule,
@@ -188,0 +190,0 @@ ReplacePreviewModule,

package.json

 {
   "name": "bpmn-js",
-  "version": "14.2.0",
+  "version": "15.0.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
@@ -106,3 +106,3 @@ "main": "index.js",
     "rollup-plugin-license": "^3.0.0",
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.0",
     "sinon-chai": "^3.7.0",
@@ -115,3 +115,3 @@ "ts-expect": "^1.3.0",
     "bpmn-moddle": "^8.0.1",
-    "diagram-js": "^12.5.0",
+    "diagram-js": "^12.6.0",
     "diagram-js-direct-editing": "^2.0.0",
@@ -118,0 +118,0 @@ "ids": "^1.0.5",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4931633

increased by1.65%

Number of package files

353

increased by2.92%

Lines of code

125292

increased by1.82%

Dependency changes

• Updateddiagram-js@^12.6.0