bpmn-js 9.0.0-subprocesses.2 → 9.0.0-subprocesses.3

package/dist/bpmn-navigated-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-navigated-viewer v9.0.0-subprocesses.2
+ * bpmn-js - bpmn-navigated-viewer v9.0.0-subprocesses.3
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-11-05
+ * Date: 2021-11-19
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2531,8 +2531,8 @@
 	  }
 
 	  function as(type) {
-	    return function(parentGfx, element, attrs) {
-	      return handlers[type](parentGfx, element, attrs);
+	    return function(parentGfx, element) {
+	      return handlers[type](parentGfx, element);
 	    };
 	  }
 
@@ -2540,58 +2540,58 @@
 	    return handlers[type];
 	  }
 
-	  function renderEventContent(element, parentGfx, 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, attrs, isThrowing);
+	        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
 	      }
 	      else {
-	        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, attrs, isThrowing);
+	        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
 	      }
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
-	      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
-	      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
-	      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element, attrs);
+	      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
-	      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
-	      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
-	      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
-	      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
-	      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
-	      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
-	      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, attrs, isThrowing);
+	      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
 	    }
 
 	    return null;
@@ -2614,20 +2614,20 @@
 	    return text;
 	  }
 
-	  function renderEmbeddedLabel(parentGfx, element, align, attrs) {
+	  function renderEmbeddedLabel(parentGfx, element, align) {
 	    var semantic = getSemantic(element);
 
 	    return renderLabel(parentGfx, semantic.name, {
 	      box: element,
 	      align: align,
 	      padding: 5,
-	      style: assign({
+	      style: {
 	        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-	      }, attrs)
+	      }
 	    });
 	  }
 
-	  function renderExternalLabel(parentGfx, element, attrs) {
+	  function renderExternalLabel(parentGfx, element) {
 
 	    var box = {
 	      width: 90,
@@ -2644,22 +2644,21 @@
 	        textRenderer.getExternalStyle(),
 	        {
 	          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-	        },
-	        attrs
+	        }
 	      )
 	    });
 	  }
 
-	  function renderLaneLabel(parentGfx, text, element, attrs) {
+	  function renderLaneLabel(parentGfx, text, element) {
 	    var textBox = renderLabel(parentGfx, text, {
 	      box: {
 	        height: 30,
 	        width: element.height
 	      },
 	      align: 'center-middle',
-	      style: assign({
+	      style: {
 	        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-	      }, attrs)
+	      }
 	    });
 
 	    var top = -1 * element.height;
@@ -2686,11 +2685,11 @@
 
 	      return drawCircle(parentGfx, element.width, element.height, attrs);
 	    },
-	    'bpmn:StartEvent': function(parentGfx, element, attrs) {
-	      attrs = assign({
+	    'bpmn:StartEvent': function(parentGfx, element) {
+	      var attrs = {
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
+	      };
 
 	      var semantic = getSemantic(element);
 
@@ -2709,7 +2708,7 @@
 
 	      return circle;
 	    },
-	    'bpmn:MessageEventDefinition': function(parentGfx, element, attrs, isThrowing) {
+	    'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
 	        xScaleFactor: 0.9,
 	        yScaleFactor: 0.9,
@@ -2724,24 +2723,20 @@
 	      var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
 	      var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
 
-	      attrs = assign({
+	      var messagePath = drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: stroke
-	      }, attrs);
-
-	      var messagePath = drawPath(parentGfx, pathData, attrs);
+	      });
 
 	      return messagePath;
 	    },
-	    'bpmn:TimerEventDefinition': function(parentGfx, element, attrs) {
-	      var outerAttrs = assign({
+	    'bpmn:TimerEventDefinition': function(parentGfx, element) {
+	      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
 	        strokeWidth: 2,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
-	      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, outerAttrs);
+	      });
 
 	      var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
 	        xScaleFactor: 0.75,
@@ -2754,13 +2749,11 @@
 	        }
 	      });
 
-	      var innerAttrs = assign({
+	      drawPath(parentGfx, pathData, {
 	        strokeWidth: 2,
 	        strokeLinecap: 'square',
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
-	      drawPath(parentGfx, pathData, innerAttrs);
+	      });
 
 	      for (var i = 0;i < 12; i++) {
 
@@ -2778,25 +2771,17 @@
 	        var width = element.width / 2;
 	        var height = element.height / 2;
 
-	        var lineAttrs = assign({
+	        drawPath(parentGfx, linePathData, {
 	          strokeWidth: 1,
 	          strokeLinecap: 'square',
 	          transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
 	          stroke: getStrokeColor(element, defaultStrokeColor)
-	        }, attrs);
-
-	        drawPath(parentGfx, linePathData, lineAttrs);
+	        });
 	      }
 
 	      return circle;
 	    },
-	    'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs, isThrowing) {
-	      attrs = assign({
-	        strokeWidth: 1,
-	        fill: fill,
-	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
+	    'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -2810,14 +2795,13 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, attrs);
-	    },
-	    'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs) {
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
+	        fill: fill,
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
+	      });
+	    },
+	    'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
 	      var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -2829,9 +2813,12 @@
 	        }
 	      });
 
-	      return drawPath(parentGfx, pathData, attrs);
+	      return drawPath(parentGfx, pathData, {
+	        strokeWidth: 1,
+	        stroke: getStrokeColor(event, defaultStrokeColor)
+	      });
 	    },
-	    'bpmn:LinkEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	    'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_LINK', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -2845,15 +2832,13 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
-	      return drawPath(parentGfx, pathData, attrs);
+	      });
 	    },
-	    'bpmn:ErrorEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	    'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_ERROR', {
 	        xScaleFactor: 1.1,
 	        yScaleFactor: 1.1,
@@ -2867,15 +2852,13 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
-	      return drawPath(parentGfx, pathData, attrs);
+	      });
 	    },
-	    'bpmn:CancelEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	    'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {
 	        xScaleFactor: 1.0,
 	        yScaleFactor: 1.0,
@@ -2889,19 +2872,17 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      attrs = assign({
+	      var path = drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
-	      var path = drawPath(parentGfx, pathData, attrs);
+	      });
 
 	      rotate(path, 45);
 
 	      return path;
 	    },
-	    'bpmn:CompensateEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	    'bpmn:CompensateEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -2915,15 +2896,13 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
-	      return drawPath(parentGfx, pathData, attrs);
+	      });
 	    },
-	    'bpmn:SignalEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	    'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
 	        xScaleFactor: 0.9,
 	        yScaleFactor: 0.9,
@@ -2937,15 +2916,13 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
-	      return drawPath(parentGfx, pathData, attrs);
+	      });
 	    },
-	    'bpmn:MultipleEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	    'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
 	        xScaleFactor: 1.1,
 	        yScaleFactor: 1.1,
@@ -2959,14 +2936,12 @@
 
 	      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: fill
-	      }, attrs);
-
-	      return drawPath(parentGfx, pathData, attrs);
+	      });
 	    },
-	    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs) {
+	    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
 	      var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
 	        xScaleFactor: 1.2,
 	        yScaleFactor: 1.2,
@@ -2978,54 +2953,47 @@
 	        }
 	      });
 
-	      attrs = assign({
+	      return drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: getStrokeColor(event, defaultStrokeColor),
 	        stroke: getStrokeColor(event, defaultStrokeColor)
-	      }, attrs);
-
-
-	      return drawPath(parentGfx, pathData, attrs);
+	      });
 	    },
-	    'bpmn:EndEvent': function(parentGfx, element, attrs) {
-	      var outerAttrs = assign({
+	    'bpmn:EndEvent': function(parentGfx, element) {
+	      var circle = renderer('bpmn:Event')(parentGfx, element, {
 	        strokeWidth: 4,
 	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor(element, defaultStrokeColor),
-	      }, attrs);
-
-	      var circle = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
-	      renderEventContent(element, parentGfx, attrs);
+	      renderEventContent(element, parentGfx);
 
 	      return circle;
 	    },
-	    'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs) {
-	      attrs = assign({
-	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor(element, defaultStrokeColor),
-	        strokeWidth: 4
-	      }, attrs);
-
-	      var circle = drawCircle(parentGfx, element.width, element.height, 8, attrs);
+	    'bpmn:TerminateEventDefinition': function(parentGfx, element) {
+	      var circle = drawCircle(parentGfx, element.width, element.height, 8, {
+	        strokeWidth: 4,
+	        fill: getStrokeColor(element, defaultStrokeColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
 	      return circle;
 	    },
-	    'bpmn:IntermediateEvent': function(parentGfx, element, attrs) {
-	      var outerAttrs = assign({
+	    'bpmn:IntermediateEvent': function(parentGfx, element) {
+	      var outer = renderer('bpmn:Event')(parentGfx, element, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
-	      var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+	      });
 
 	      /* inner */
-	      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, assign({}, outerAttrs, {
+	      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+	        strokeWidth: 1,
 	        fill: getFillColor(element, 'none'),
-	      }));
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
-	      renderEventContent(element, parentGfx, attrs);
+	      renderEventContent(element, parentGfx);
 
 	      return outer;
 	    },
@@ -3043,21 +3011,21 @@
 	      return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
 	    },
 
-	    'bpmn:Task': function(parentGfx, element, attrs) {
-	      attrs = assign({
+	    'bpmn:Task': function(parentGfx, element) {
+	      var attrs = {
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
+	      };
 
 	      var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
 
 	      renderEmbeddedLabel(parentGfx, element, 'center-middle');
-	      attachTaskMarkers(parentGfx, element, attrs);
+	      attachTaskMarkers(parentGfx, element);
 
 	      return rect;
 	    },
-	    'bpmn:ServiceTask': function(parentGfx, element, attrs) {
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	    'bpmn:ServiceTask': function(parentGfx, element) {
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 
 	      var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
 	        abspos: {
@@ -3066,12 +3034,11 @@
 	        }
 	      });
 
-	      var serviceAttrs = assign({
+	      /* service bg */ drawPath(parentGfx, pathDataBG, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* service bg */ drawPath(parentGfx, pathDataBG, serviceAttrs);
+	      });
 
 	      var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
 	        abspos: {
@@ -3080,11 +3047,10 @@
 	        }
 	      });
 
-	      var fillAttrs = assign({
+	      /* service fill */ drawPath(parentGfx, fillPathData, {
 	        strokeWidth: 0,
 	        fill: getFillColor(element, defaultFillColor)
-	      }, attrs);
-	      /* service fill */ drawPath(parentGfx, fillPathData, fillAttrs);
+	      });
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
 	        abspos: {
@@ -3093,12 +3059,16 @@
 	        }
 	      });
 
-	      /* service */ drawPath(parentGfx, pathData, serviceAttrs);
+	      /* service */ drawPath(parentGfx, pathData, {
+	        strokeWidth: 1,
+	        fill: getFillColor(element, defaultFillColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
 	      return task;
 	    },
-	    'bpmn:UserTask': function(parentGfx, element, attrs) {
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	    'bpmn:UserTask': function(parentGfx, element) {
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 
 	      var x = 15;
 	      var y = 12;
@@ -3110,12 +3080,11 @@
 	        }
 	      });
 
-	      var userAttrs = assign({
+	      /* user path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 0.5,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* user path */ drawPath(parentGfx, pathData, userAttrs);
+	      });
 
 	      var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
 	        abspos: {
@@ -3124,7 +3093,11 @@
 	        }
 	      });
 
-	      /* user2 path */ drawPath(parentGfx, pathData2, userAttrs);
+	      /* user2 path */ drawPath(parentGfx, pathData2, {
+	        strokeWidth: 0.5,
+	        fill: getFillColor(element, defaultFillColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
 	      var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
 	        abspos: {
@@ -3133,12 +3106,16 @@
 	        }
 	      });
 
-	      /* user3 path */ drawPath(parentGfx, pathData3, userAttrs);
+	      /* user3 path */ drawPath(parentGfx, pathData3, {
+	        strokeWidth: 0.5,
+	        fill: getStrokeColor(element, defaultStrokeColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
 	      return task;
 	    },
-	    'bpmn:ManualTask': function(parentGfx, element, attrs) {
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	    'bpmn:ManualTask': function(parentGfx, element) {
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
 	        abspos: {
@@ -3147,17 +3124,16 @@
 	        }
 	      });
 
-	      var manualAttrs = assign({
+	      /* manual path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 0.5, // 0.25,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* manual path */ drawPath(parentGfx, pathData, manualAttrs);
+	      });
 
 	      return task;
 	    },
-	    'bpmn:SendTask': function(parentGfx, element, attrs) {
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	    'bpmn:SendTask': function(parentGfx, element) {
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
 	        xScaleFactor: 1,
@@ -3170,25 +3146,22 @@
 	        }
 	      });
 
-	      /* send path */
-	      var pathAttrs = assign({
+	      /* send path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: getStrokeColor(element, defaultStrokeColor),
 	        stroke: getFillColor(element, defaultFillColor)
-	      }, attrs);
-
-	      drawPath(parentGfx, pathData, pathAttrs);
+	      });
 
 	      return task;
 	    },
-	    'bpmn:ReceiveTask' : function(parentGfx, element, attrs) {
+	    'bpmn:ReceiveTask' : function(parentGfx, element) {
 	      var semantic = getSemantic(element);
 
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 	      var pathData;
 
 	      if (semantic.instantiate) {
-	        drawCircle(parentGfx, 28, 28, 20 * 0.22, assign({ strokeWidth: 1 }, attrs));
+	        drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
 
 	        pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
 	          abspos: {
@@ -3210,18 +3183,16 @@
 	        });
 	      }
 
-	      var receiveAttrs = assign({
+	      /* receive path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
-	      /* receive path */ drawPath(parentGfx, pathData, receiveAttrs);
+	      });
 
 	      return task;
 	    },
-	    'bpmn:ScriptTask': function(parentGfx, element, attrs) {
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	    'bpmn:ScriptTask': function(parentGfx, element) {
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
 	        abspos: {
@@ -3230,16 +3201,15 @@
 	        }
 	      });
 
-	      var scriptAttrs = assign({
+	      /* script path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* script path */ drawPath(parentGfx, pathData, scriptAttrs);
+	      });
 
 	      return task;
 	    },
-	    'bpmn:BusinessRuleTask': function(parentGfx, element, attrs) {
-	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
+	    'bpmn:BusinessRuleTask': function(parentGfx, element) {
+	      var task = renderer('bpmn:Task')(parentGfx, element);
 
 	      var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
 	        abspos: {
@@ -3248,12 +3218,12 @@
 	        }
 	      });
 
-	      var headerAttrs = assign({
+	      var businessHeaderPath = drawPath(parentGfx, headerPathData);
+	      attr$1(businessHeaderPath, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, '#aaaaaa'),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      drawPath(parentGfx, headerPathData, headerAttrs);
+	      });
 
 	      var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
 	        abspos: {
@@ -3262,11 +3232,11 @@
 	        }
 	      });
 
-	      var businessAttrs = assign({
+	      var businessPath = drawPath(parentGfx, headerData);
+	      attr$1(businessPath, {
 	        strokeWidth: 1,
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      drawPath(parentGfx, headerData, businessAttrs);
+	      });
 
 	      return task;
 	    },
@@ -3289,42 +3259,41 @@
 	      renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
 
 	      if (expanded) {
-	        attachTaskMarkers(parentGfx, element, attrs);
+	        attachTaskMarkers(parentGfx, element);
 	      } else {
-	        attachTaskMarkers(parentGfx, element, attrs, ['SubProcessMarker']);
+	        attachTaskMarkers(parentGfx, element, ['SubProcessMarker']);
 	      }
 
 	      return rect;
 	    },
-	    'bpmn:AdHocSubProcess': function(parentGfx, element, attrs) {
-	      return renderer('bpmn:SubProcess')(parentGfx, element, attrs);
+	    'bpmn:AdHocSubProcess': function(parentGfx, element) {
+	      return renderer('bpmn:SubProcess')(parentGfx, element);
 	    },
-	    'bpmn:Transaction': function(parentGfx, element, attrs) {
-	      var outer = renderer('bpmn:SubProcess')(parentGfx, element, attrs);
+	    'bpmn:Transaction': function(parentGfx, element) {
+	      var outer = renderer('bpmn:SubProcess')(parentGfx, element);
 
 	      var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
 	        stroke: getStrokeColor(element, defaultStrokeColor)
 	      });
 
-	      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, assign(innerAttrs, attrs));
+	      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
 
 	      return outer;
 	    },
-	    'bpmn:CallActivity': function(parentGfx, element, attrs) {
-	      attrs = assign({
+	    'bpmn:CallActivity': function(parentGfx, element) {
+	      return renderer('bpmn:SubProcess')(parentGfx, element, {
 	        strokeWidth: 5
-	      }, attrs);
-
-	      return renderer('bpmn:SubProcess')(parentGfx, element, attrs);
+	      });
 	    },
-	    'bpmn:Participant': function(parentGfx, element, attrs) {
-	      var outerAttrs = assign({
+	    'bpmn:Participant': function(parentGfx, element) {
+
+	      var attrs = {
 	        fillOpacity: DEFAULT_FILL_OPACITY,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
+	      };
 
-	      var lane = renderer('bpmn:Lane')(parentGfx, element, outerAttrs);
+	      var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
 
 	      var expandedPool = isExpanded(element);
 
@@ -3332,9 +3301,9 @@
 	        drawLine(parentGfx, [
 	          { x: 30, y: 0 },
 	          { x: 30, y: element.height }
-	        ], assign({
+	        ], {
 	          stroke: getStrokeColor(element, defaultStrokeColor)
-	        }, attrs));
+	        });
 	        var text = getSemantic(element).name;
 	        renderLaneLabel(parentGfx, text, element);
 	      } else {
@@ -3352,7 +3321,7 @@
 	      var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
 
 	      if (participantMultiplicity) {
-	        renderer('ParticipantMultiplicityMarker')(parentGfx, element, attrs);
+	        renderer('ParticipantMultiplicityMarker')(parentGfx, element);
 	      }
 
 	      return lane;
@@ -3373,23 +3342,20 @@
 
 	      return rect;
 	    },
-	    'bpmn:InclusiveGateway': function(parentGfx, element, attrs) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
+	    'bpmn:InclusiveGateway': function(parentGfx, element) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
 
-
-	      var circleAttrs = assign({
+	      /* circle path */
+	      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
 	        strokeWidth: 2.5,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
-	      /* circle path */
-	      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, circleAttrs);
+	      });
 
 	      return diamond;
 	    },
-	    'bpmn:ExclusiveGateway': function(parentGfx, element, attrs) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
+	    'bpmn:ExclusiveGateway': function(parentGfx, element) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
 
 	      var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
 	        xScaleFactor: 0.4,
@@ -3403,17 +3369,17 @@
 	      });
 
 	      if ((getDi(element).isMarkerVisible)) {
-	        drawPath(parentGfx, pathData, assign({
+	        drawPath(parentGfx, pathData, {
 	          strokeWidth: 1,
 	          fill: getStrokeColor(element, defaultStrokeColor),
 	          stroke: getStrokeColor(element, defaultStrokeColor)
-	        }, attrs));
+	        });
 	      }
 
 	      return diamond;
 	    },
-	    'bpmn:ComplexGateway': function(parentGfx, element, attrs) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
+	    'bpmn:ComplexGateway': function(parentGfx, element) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
 
 	      var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
 	        xScaleFactor: 0.5,
@@ -3426,17 +3392,16 @@
 	        }
 	      });
 
-	      var innerAttrs = assign({
+	      /* complex path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: getStrokeColor(element, defaultStrokeColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* complex path */ drawPath(parentGfx, pathData, innerAttrs);
+	      });
 
 	      return diamond;
 	    },
-	    'bpmn:ParallelGateway': function(parentGfx, element, attrs) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
+	    'bpmn:ParallelGateway': function(parentGfx, element) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
 
 	      var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
 	        xScaleFactor: 0.6,
@@ -3449,27 +3414,25 @@
 	        }
 	      });
 
-	      var innerAttrs = assign({
+	      /* parallel path */ drawPath(parentGfx, pathData, {
 	        strokeWidth: 1,
 	        fill: getStrokeColor(element, defaultStrokeColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* parallel path */ drawPath(parentGfx, pathData, innerAttrs);
+	      });
 
 	      return diamond;
 	    },
-	    'bpmn:EventBasedGateway': function(parentGfx, element, attrs) {
+	    'bpmn:EventBasedGateway': function(parentGfx, element) {
 
 	      var semantic = getSemantic(element);
 
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
 
-	      var outerAttrs = assign({
+	      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
 	        strokeWidth: 1,
 	        fill: 'none',
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, outerAttrs);
+	      });
 
 	      var type = semantic.eventGatewayType;
 	      var instantiate = !!semantic.instantiate;
@@ -3487,12 +3450,13 @@
 	          }
 	        });
 
-	        var innerAttrs = assign({
+	        var attrs = {
 	          strokeWidth: 2,
 	          fill: getFillColor(element, 'none'),
 	          stroke: getStrokeColor(element, defaultStrokeColor)
-	        }, attrs);
-	        /* event path */ drawPath(parentGfx, pathData, innerAttrs);
+	        };
+
+	        /* event path */ drawPath(parentGfx, pathData, attrs);
 	      }
 
 	      if (type === 'Parallel') {
@@ -3508,7 +3472,7 @@
 	          }
 	        });
 
-	        var parallelPath = drawPath(parentGfx, pathData, attrs);
+	        var parallelPath = drawPath(parentGfx, pathData);
 	        attr$1(parallelPath, {
 	          strokeWidth: 1,
 	          fill: 'none'
@@ -3516,12 +3480,12 @@
 	      } else if (type === 'Exclusive') {
 
 	        if (!instantiate) {
-	          var innerCircleAttrs = assign({
+	          var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
+	          attr$1(innerCircle, {
 	            strokeWidth: 1,
 	            fill: 'none',
 	            stroke: getStrokeColor(element, defaultStrokeColor)
-	          }, attrs);
-	          drawCircle(parentGfx, element.width, element.height, element.height * 0.26, innerCircleAttrs);
+	          });
 	        }
 
 	        drawEvent();
@@ -3530,28 +3494,26 @@
 
 	      return diamond;
 	    },
-	    'bpmn:Gateway': function(parentGfx, element, attrs) {
-	      attrs = assign({
+	    'bpmn:Gateway': function(parentGfx, element) {
+	      var attrs = {
 	        fill: getFillColor(element, defaultFillColor),
 	        fillOpacity: DEFAULT_FILL_OPACITY,
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
+	      };
 
 	      return drawDiamond(parentGfx, element.width, element.height, attrs);
 	    },
-	    'bpmn:SequenceFlow': function(parentGfx, element, attrs) {
-	      attrs = attrs || {};
-
+	    'bpmn:SequenceFlow': function(parentGfx, element) {
 	      var pathData = createPathFromConnection(element);
 
-	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
-	          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
+	      var fill = getFillColor(element, defaultFillColor),
+	          stroke = getStrokeColor(element, defaultStrokeColor);
 
-	      attrs = assign({
+	      var attrs = {
 	        strokeLinejoin: 'round',
 	        markerEnd: marker('sequenceflow-end', fill, stroke),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs || {});
+	      };
 
 	      var path = drawPath(parentGfx, pathData, attrs);
 
@@ -3605,52 +3567,41 @@
 
 	      return drawLine(parentGfx, element.waypoints, attrs);
 	    },
-	    'bpmn:DataInputAssociation': function(parentGfx, element, attrs) {
-	      attrs = attrs || {};
-
-	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
-	          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
+	    'bpmn:DataInputAssociation': function(parentGfx, element) {
+	      var fill = getFillColor(element, defaultFillColor),
+	          stroke = getStrokeColor(element, defaultStrokeColor);
 
-	      attrs = assign({
+	      return renderer('bpmn:Association')(parentGfx, element, {
 	        markerEnd: marker('association-end', fill, stroke)
-	      }, attrs);
-
-	      return renderer('bpmn:Association')(parentGfx, element, attrs);
+	      });
 	    },
-	    'bpmn:DataOutputAssociation': function(parentGfx, element, attrs) {
-	      attrs = attrs || {};
-
-	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
-	          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
-
+	    'bpmn:DataOutputAssociation': function(parentGfx, element) {
+	      var fill = getFillColor(element, defaultFillColor),
+	          stroke = getStrokeColor(element, defaultStrokeColor);
 
-	      attrs = assign({
+	      return renderer('bpmn:Association')(parentGfx, element, {
 	        markerEnd: marker('association-end', fill, stroke)
-	      }, attrs);
-
-	      return renderer('bpmn:Association')(parentGfx, element, attrs);
+	      });
 	    },
-	    'bpmn:MessageFlow': function(parentGfx, element, attrs) {
-	      attrs = attrs || {};
+	    'bpmn:MessageFlow': function(parentGfx, element) {
 
 	      var semantic = getSemantic(element),
 	          di = getDi(element);
 
-	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
-	          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
+	      var fill = getFillColor(element, defaultFillColor),
+	          stroke = getStrokeColor(element, defaultStrokeColor);
 
 	      var pathData = createPathFromConnection(element);
 
-
-	      attrs = assign({
+	      var attrs = {
 	        markerEnd: marker('messageflow-end', fill, stroke),
 	        markerStart: marker('messageflow-start', fill, stroke),
 	        strokeDasharray: '10, 12',
 	        strokeLinecap: 'round',
 	        strokeLinejoin: 'round',
 	        strokeWidth: '1.5px',
-	        stroke: stroke
-	      }, attrs);
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      };
 
 	      var path = drawPath(parentGfx, pathData, attrs);
 
@@ -3697,7 +3648,7 @@
 
 	      return path;
 	    },
-	    'bpmn:DataObject': function(parentGfx, element, attrs) {
+	    'bpmn:DataObject': function(parentGfx, element) {
 	      var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3709,56 +3660,46 @@
 	        }
 	      });
 
-	      var outerAttrs = assign({
+	      var elementObject = drawPath(parentGfx, pathData, {
 	        fill: getFillColor(element, defaultFillColor),
 	        fillOpacity: DEFAULT_FILL_OPACITY,
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      var elementObject = drawPath(parentGfx, pathData, outerAttrs);
+	      });
 
 	      var semantic = getSemantic(element);
 
 	      if (isCollection(semantic)) {
-	        renderDataItemCollection(parentGfx, element, attrs);
+	        renderDataItemCollection(parentGfx, element);
 	      }
 
 	      return elementObject;
 	    },
 	    'bpmn:DataObjectReference': as('bpmn:DataObject'),
-	    'bpmn:DataInput': function(parentGfx, element, attrs) {
+	    'bpmn:DataInput': function(parentGfx, element) {
 
 	      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
 	      // page
-	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element, attrs);
+	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
 
-	      var innerAttrs = assign({ strokeWidth: 1 }, attrs);
-	      /* input arrow path */ drawPath(parentGfx, arrowPathData, innerAttrs);
+	      /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
 
 	      return elementObject;
 	    },
-	    'bpmn:DataOutput': function(parentGfx, element, attrs) {
+	    'bpmn:DataOutput': function(parentGfx, element) {
 	      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
 	      // page
-	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element, attrs);
+	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
 
-	      var arrowAttrs = assign({
+	      /* output arrow path */ drawPath(parentGfx, arrowPathData, {
 	        strokeWidth: 1,
 	        fill: 'black'
-	      }, attrs);
-	      /* output arrow path */ drawPath(parentGfx, arrowPathData, arrowAttrs);
+	      });
 
 	      return elementObject;
 	    },
-	    'bpmn:DataStoreReference': function(parentGfx, element, attrs) {
-	      attrs = assign({
-	        strokeWidth: 2,
-	        fill: getFillColor(element, defaultFillColor),
-	        fillOpacity: DEFAULT_FILL_OPACITY,
-	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
+	    'bpmn:DataStoreReference': function(parentGfx, element) {
 	      var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3770,20 +3711,25 @@
 	        }
 	      });
 
-	      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, attrs);
+	      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
+	        strokeWidth: 2,
+	        fill: getFillColor(element, defaultFillColor),
+	        fillOpacity: DEFAULT_FILL_OPACITY,
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 
 	      return elementStore;
 	    },
-	    'bpmn:BoundaryEvent': function(parentGfx, element, attrs) {
+	    'bpmn:BoundaryEvent': function(parentGfx, element) {
 
 	      var semantic = getSemantic(element),
 	          cancel = semantic.cancelActivity;
 
-	      attrs = assign({
+	      var attrs = {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
+	      };
 
 	      if (!cancel) {
 	        attrs.strokeDasharray = '6';
@@ -3804,32 +3750,30 @@
 
 	      /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
 
-	      renderEventContent(element, parentGfx, attrs);
+	      renderEventContent(element, parentGfx);
 
 	      return outer;
 	    },
-	    'bpmn:Group': function(parentGfx, element, attrs) {
+	    'bpmn:Group': function(parentGfx, element) {
 
-	      attrs = assign({
+	      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
 	        stroke: getStrokeColor(element, defaultStrokeColor),
 	        strokeWidth: 1,
 	        strokeDasharray: '8,3,1,3',
 	        fill: 'none',
 	        pointerEvents: 'none'
-	      }, attrs);
-
-	      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
+	      });
 
 	      return group;
 	    },
 	    'label': function(parentGfx, element) {
 	      return renderExternalLabel(parentGfx, element);
 	    },
-	    'bpmn:TextAnnotation': function(parentGfx, element, attrs) {
-	      var style = assign({}, attrs, {
+	    'bpmn:TextAnnotation': function(parentGfx, element) {
+	      var style = {
 	        'fill': 'none',
 	        'stroke': 'none'
-	      });
+	      };
 
 	      var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
 
@@ -3844,10 +3788,9 @@
 	        }
 	      });
 
-	      var pathAttrs = assign({
+	      drawPath(parentGfx, textPathData, {
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      drawPath(parentGfx, textPathData, pathAttrs);
+	      });
 
 	      var text = getSemantic(element).text || '';
 	      renderLabel(parentGfx, text, {
@@ -3861,13 +3804,7 @@
 
 	      return textElement;
 	    },
-	    'ParticipantMultiplicityMarker': function(parentGfx, element, attrs) {
-	      attrs = assign({
-	        strokeWidth: 2,
-	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
+	    'ParticipantMultiplicityMarker': function(parentGfx, element) {
 	      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3879,15 +3816,18 @@
 	        }
 	      });
 
-	      drawMarker('participant-multiplicity', parentGfx, markerPath, attrs);
+	      drawMarker('participant-multiplicity', parentGfx, markerPath, {
+	        strokeWidth: 2,
+	        fill: getFillColor(element, defaultFillColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 	    },
-	    'SubProcessMarker': function(parentGfx, element, attrs) {
-	      attrs = assign({
+	    'SubProcessMarker': function(parentGfx, element) {
+	      var markerRect = drawRect(parentGfx, 14, 14, 0, {
+	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
-	      var markerRect = drawRect(parentGfx, 14, 14, 0, assign({ strokeWidth: 1 }, attrs));
+	      });
 
 	      // Process marker is placed in the middle of the box
 	      // therefore fixed values can be used here
@@ -3904,14 +3844,12 @@
 	        }
 	      });
 
-	      drawMarker('sub-process', parentGfx, markerPath, attrs);
-	    },
-	    'ParallelMarker': function(parentGfx, element, attrs, position) {
-	      attrs = assign({
+	      drawMarker('sub-process', parentGfx, markerPath, {
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
+	      });
+	    },
+	    'ParallelMarker': function(parentGfx, element, position) {
 	      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3923,13 +3861,12 @@
 	        }
 	      });
 
-	      drawMarker('parallel', parentGfx, markerPath, attrs);
-	    },
-	    'SequentialMarker': function(parentGfx, element, attrs, position) {
-	      attrs = assign({
+	      drawMarker('parallel', parentGfx, markerPath, {
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
+	      });
+	    },
+	    'SequentialMarker': function(parentGfx, element, position) {
 	      var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3941,15 +3878,12 @@
 	        }
 	      });
 
-	      drawMarker('sequential', parentGfx, markerPath, attrs);
-	    },
-	    'CompensationMarker': function(parentGfx, element, attrs, position) {
-	      attrs = assign({
-	        strokeWidth: 1,
+	      drawMarker('sequential', parentGfx, markerPath, {
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
+	      });
+	    },
+	    'CompensationMarker': function(parentGfx, element, position) {
 	      var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3961,17 +3895,13 @@
 	        }
 	      });
 
-	      drawMarker('compensation', parentGfx, markerMath, attrs);
-	    },
-	    'LoopMarker': function(parentGfx, element, attrs, position) {
-	      attrs = assign({
+	      drawMarker('compensation', parentGfx, markerMath, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor(element, defaultStrokeColor),
-	        strokeLinecap: 'round',
-	        strokeMiterlimit: 0.5
-	      }, attrs);
-
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
+	    },
+	    'LoopMarker': function(parentGfx, element, position) {
 	      var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -3983,15 +3913,15 @@
 	        }
 	      });
 
-	      drawMarker('loop', parentGfx, markerPath, attrs);
-	    },
-	    'AdhocMarker': function(parentGfx, element, attrs, position) {
-	      attrs = assign({
+	      drawMarker('loop', parentGfx, markerPath, {
 	        strokeWidth: 1,
-	        fill: getStrokeColor(element, defaultStrokeColor),
-	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-
+	        fill: getFillColor(element, defaultFillColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor),
+	        strokeLinecap: 'round',
+	        strokeMiterlimit: 0.5
+	      });
+	    },
+	    'AdhocMarker': function(parentGfx, element, position) {
 	      var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -4003,11 +3933,15 @@
 	        }
 	      });
 
-	      drawMarker('adhoc', parentGfx, markerPath, attrs);
+	      drawMarker('adhoc', parentGfx, markerPath, {
+	        strokeWidth: 1,
+	        fill: getStrokeColor(element, defaultStrokeColor),
+	        stroke: getStrokeColor(element, defaultStrokeColor)
+	      });
 	    }
 	  };
 
-	  function attachTaskMarkers(parentGfx, element, attrs, taskMarkers) {
+	  function attachTaskMarkers(parentGfx, element, taskMarkers) {
 	    var obj = getSemantic(element);
 
 	    var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
@@ -4032,15 +3966,15 @@
 	    }
 
 	    forEach(taskMarkers, function(marker) {
-	      renderer(marker)(parentGfx, element, attrs, position);
+	      renderer(marker)(parentGfx, element, position);
 	    });
 
 	    if (obj.isForCompensation) {
-	      renderer('CompensationMarker')(parentGfx, element, attrs, position);
+	      renderer('CompensationMarker')(parentGfx, element, position);
 	    }
 
 	    if (obj.$type === 'bpmn:AdHocSubProcess') {
-	      renderer('AdhocMarker')(parentGfx, element, attrs, position);
+	      renderer('AdhocMarker')(parentGfx, element, position);
 	    }
 
 	    var loopCharacteristics = obj.loopCharacteristics,
@@ -4049,23 +3983,20 @@
 	    if (loopCharacteristics) {
 
 	      if (isSequential === undefined) {
-	        renderer('LoopMarker')(parentGfx, element, attrs, position);
+	        renderer('LoopMarker')(parentGfx, element, position);
 	      }
 
 	      if (isSequential === false) {
-	        renderer('ParallelMarker')(parentGfx, element, attrs, position);
+	        renderer('ParallelMarker')(parentGfx, element, position);
 	      }
 
 	      if (isSequential === true) {
-	        renderer('SequentialMarker')(parentGfx, element, attrs, position);
+	        renderer('SequentialMarker')(parentGfx, element, position);
 	      }
 	    }
 	  }
 
-	  function renderDataItemCollection(parentGfx, element, attrs) {
-	    attrs = assign({
-	      strokeWidth: 2
-	    }, attrs);
+	  function renderDataItemCollection(parentGfx, element) {
 
 	    var yPosition = (element.height - 18) / element.height;
 
@@ -4080,7 +4011,9 @@
 	      }
 	    });
 
-	    /* collection path */ drawPath(parentGfx, pathData, attrs);
+	    /* collection path */ drawPath(parentGfx, pathData, {
+	      strokeWidth: 2
+	    });
 	  }
 
 
@@ -4106,20 +4039,20 @@
 	  return is$1(element, 'bpmn:BaseElement');
 	};
 
-	BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs) {
+	BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
 	  var type = element.type;
 	  var h = this.handlers[type];
 
 	  /* jshint -W040 */
-	  return h(parentGfx, element, attrs);
+	  return h(parentGfx, element);
 	};
 
-	BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs) {
+	BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
 	  var type = element.type;
 	  var h = this.handlers[type];
 
 	  /* jshint -W040 */
-	  return h(parentGfx, element, attrs);
+	  return h(parentGfx, element);
 	};
 
 	BpmnRenderer.prototype.getShapePath = function(element) {
@@ -7545,6 +7478,8 @@
 
 	var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
 
+	var OPEN_CLASS = 'bjs-breadcrumbs-shown';
+
 	/**
 	 * Adds Overlays that allow switching planes on collapsed subprocesses.
 	 *
@@ -7554,8 +7489,9 @@
 	 * @param {canvas} canvas
 	 */
 	function DrilldownOverlays(eventBus, elementRegistry, overlays, canvas) {
-	  var breadcrumbs = domify('<ul class="bjs-breadcrumbs djs-element-hidden"></ul>');
+	  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
 	  var container = canvas.getContainer();
+	  var containerClasses = classes(container);
 	  container.appendChild(breadcrumbs);
 
 	  function updateBreadcrumbs(plane) {
@@ -7580,11 +7516,9 @@
 
 	    breadcrumbs.innerHTML = '';
 
-	    if (path.length > 1) {
-	      breadcrumbs.classList.remove('djs-element-hidden');
-	    } else {
-	      breadcrumbs.classList.add('djs-element-hidden');
-	    }
+	    // show breadcrumbs and expose state to .djs-container
+	    var visible = path.length > 1;
+	    containerClasses.toggle(OPEN_CLASS, visible);
 
 	    path.forEach(function(el) {
 	      breadcrumbs.appendChild(el);
@@ -8527,8 +8461,9 @@
 	var BASE_LAYER = 'base';
 	var HIDDEN_MARKER = 'djs-element-hidden';
 
-	// render plane contents behind additional layers
-	var PLANE_LAYER_INDEX = -10;
+	// render plane contents behind utility layers
+	var PLANE_LAYER_INDEX = 0;
+	var UTILITY_LAYER_INDEX = 1;
 
 
 	var REQUIRED_MODEL_ATTRS = {
@@ -8690,7 +8625,7 @@
 	 * @returns {SVGElement}
 	 */
 	Canvas.prototype.getDefaultLayer = function() {
-	  return this.getLayer(BASE_LAYER);
+	  return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
 	};
 
 	/**
@@ -8739,8 +8674,8 @@
 	 */
 	Canvas.prototype._createLayer = function(name, index) {
 
-	  if (!index) {
-	    index = 0;
+	  if (typeof index === 'undefined') {
+	    index = UTILITY_LAYER_INDEX;
 	  }
 
 	  var childIndex = reduce(this._layers, function(childIndex, layer) {
@@ -9483,13 +9418,17 @@
 	 * Scrolls the viewbox to contain the given element.
 	 * Optionally specify a padding to be applied to the edges.
 	 *
-	 * @param {Object} [element] the element to scroll to.
+	 * @param {Object|String} [element] the element to scroll to.
 	 * @param {Object|Number} [padding=100] the padding to be applied. Can also specify top, bottom, left and right.
 	 *
 	 */
 	Canvas.prototype.scrollToElement = function(element, padding) {
 	  var defaultPadding = 100;
 
+	  if (typeof element === 'string') {
+	    element = this._elementRegistry.get(element);
+	  }
+
 	  // switch to correct Plane
 	  var targetPlane = this.findPlane(element);
 	  if (targetPlane !== this._activePlane) {