bpmn-js 9.0.0-subprocesses.1 → 9.0.1

package/dist/bpmn-viewer.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-viewer v9.0.0-subprocesses.1
+ * bpmn-js - bpmn-viewer v9.0.1
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-10-26
+ * Date: 2022-02-18
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -207,6 +207,23 @@
 	function some(collection, matcher) {
 	  return !!find(collection, matcher);
 	}
+	/**
+	 * Transform a collection into another collection
+	 * by piping each member through the given fn.
+	 *
+	 * @param  {Object|Array}   collection
+	 * @param  {Function} fn
+	 *
+	 * @return {Array} transformed collection
+	 */
+
+	function map$1(collection, fn) {
+	  var result = [];
+	  forEach(collection, function (val, key) {
+	    result.push(fn(val, key));
+	  });
+	  return result;
+	}
 	/**
 	 * Create an object pattern matcher.
 	 *
@@ -214,7 +231,7 @@
 	 *
 	 * const matcher = matchPattern({ id: 1 });
 	 *
-	 * var element = find(elements, matcher);
+	 * let element = find(elements, matcher);
 	 *
 	 * @param  {Object} pattern
 	 *
@@ -244,8 +261,11 @@
 	}
 
 	/**
-	 * Debounce fn, calling it only once if
-	 * the given time elapsed between calls.
+	 * Debounce fn, calling it only once if the given time
+	 * elapsed between calls.
+	 *
+	 * Lodash-style the function exposes methods to `#clear`
+	 * and `#flush` to control internal behavior.
 	 *
 	 * @param  {Function} fn
 	 * @param  {Number} timeout
@@ -258,23 +278,39 @@
 	  var lastThis;
 	  var lastNow;
 
-	  function fire() {
+	  function fire(force) {
 	    var now = Date.now();
-	    var scheduledDiff = lastNow + timeout - now;
+	    var scheduledDiff = force ? 0 : lastNow + timeout - now;
 
 	    if (scheduledDiff > 0) {
 	      return schedule(scheduledDiff);
 	    }
 
 	    fn.apply(lastThis, lastArgs);
-	    timer = lastNow = lastArgs = lastThis = undefined;
+	    clear();
 	  }
 
 	  function schedule(timeout) {
 	    timer = setTimeout(fire, timeout);
 	  }
 
-	  return function () {
+	  function clear() {
+	    if (timer) {
+	      clearTimeout(timer);
+	    }
+
+	    timer = lastNow = lastArgs = lastThis = undefined;
+	  }
+
+	  function flush() {
+	    if (timer) {
+	      fire(true);
+	    }
+
+	    clear();
+	  }
+
+	  function callback() {
 	    lastNow = Date.now();
 
 	    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -287,7 +323,11 @@
 	    if (!timer) {
 	      schedule(timeout);
 	    }
-	  };
+	  }
+
+	  callback.flush = flush;
+	  callback.cancel = clear;
+	  return callback;
 	}
 	/**
 	 * Bind function against target <this>.
@@ -476,7 +516,6 @@
 	  return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
 	}
 
-
 	/**
 	 * Return the business object for a given element.
 	 *
@@ -2530,68 +2569,68 @@
 	    return drawPath(parentGfx, path, assign({ 'data-marker': type }, attrs));
 	  }
 
-	  function as(type) {
-	    return function(parentGfx, element, attrs) {
-	      return handlers[type](parentGfx, element, attrs);
-	    };
-	  }
-
 	  function renderer(type) {
 	    return handlers[type];
 	  }
 
-	  function renderEventContent(element, parentGfx, attrs) {
+	  function as(type) {
+	    return function(parentGfx, element) {
+	      return renderer(type)(parentGfx, element);
+	    };
+	  }
+
+	  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 +2653,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 +2683,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 +2724,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 +2747,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 +2762,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 +2788,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 +2810,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 +2834,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 +2852,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 +2871,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 +2891,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 +2911,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 +2935,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 +2955,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 +2975,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 +2992,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 +3050,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 +3073,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 +3086,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 +3098,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 +3119,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 +3132,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 +3145,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 +3163,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 +3185,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 +3222,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 +3240,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 +3257,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 +3271,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 +3298,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 +3340,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 +3360,7 @@
 	      var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
 
 	      if (participantMultiplicity) {
-	        renderer('ParticipantMultiplicityMarker')(parentGfx, element, attrs);
+	        renderer('ParticipantMultiplicityMarker')(parentGfx, element);
 	      }
 
 	      return lane;
@@ -3373,23 +3381,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 +3408,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 +3431,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 +3453,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 +3489,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 +3511,7 @@
 	          }
 	        });
 
-	        var parallelPath = drawPath(parentGfx, pathData, attrs);
+	        var parallelPath = drawPath(parentGfx, pathData);
 	        attr$1(parallelPath, {
 	          strokeWidth: 1,
 	          fill: 'none'
@@ -3516,12 +3519,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 +3533,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,56 +3606,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({
-	        fill: fill,
-	        stroke: stroke,
+	      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({
-	        fill: fill,
-	        stroke: stroke,
+	      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);
 
@@ -3701,7 +3687,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,
@@ -3713,56 +3699,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,
@@ -3774,20 +3750,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';
@@ -3808,32 +3789,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);
 
@@ -3848,10 +3827,9 @@
 	        }
 	      });
 
-	      var pathAttrs = assign({
+	      drawPath(parentGfx, textPathData, {
 	        stroke: getStrokeColor(element, defaultStrokeColor)
-	      }, attrs);
-	      drawPath(parentGfx, textPathData, pathAttrs);
+	      });
 
 	      var text = getSemantic(element).text || '';
 	      renderLabel(parentGfx, text, {
@@ -3865,13 +3843,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,
@@ -3883,15 +3855,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
@@ -3908,14 +3883,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,
@@ -3927,13 +3900,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,
@@ -3945,15 +3917,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,
@@ -3965,17 +3934,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,
@@ -3987,15 +3952,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,
@@ -4007,11 +3972,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;
@@ -4036,15 +4005,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,
@@ -4053,23 +4022,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;
 
@@ -4084,13 +4050,16 @@
 	      }
 	    });
 
-	    /* collection path */ drawPath(parentGfx, pathData, attrs);
+	    /* collection path */ drawPath(parentGfx, pathData, {
+	      strokeWidth: 2
+	    });
 	  }
 
 
 	  // extension API, use at your own risk
 	  this._drawPath = drawPath;
 
+	  this._renderer = renderer;
 	}
 
 
@@ -4110,20 +4079,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];
+	  var h = this._renderer(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];
+	  var h = this._renderer(type);
 
 	  /* jshint -W040 */
-	  return h(parentGfx, element, attrs);
+	  return h(parentGfx, element);
 	};
 
 	BpmnRenderer.prototype.getShapePath = function(element) {
@@ -5330,6 +5299,13 @@
 	  return '<' + e.$type + (e.id ? ' id="' + e.id : '') + '" />';
 	}
 
+	/**
+	 * @param {ModdleElement} semantic
+	 * @param {ModdleElement} di
+	 * @param {Object} [attrs=null]
+	 *
+	 * @return {Object}
+	 */
 	function elementData(semantic, di, attrs) {
 	  return assign({
 	    id: semantic.id,
@@ -5352,32 +5328,6 @@
 	  });
 	}
 
-	var PLANE_PADDING = 50;
-
-	function getPlaneBounds(plane) {
-	  var planeTrbl = {
-	    top: Infinity,
-	    right: -Infinity,
-	    bottom: -Infinity,
-	    left: Infinity
-	  };
-
-	  plane.planeElement.forEach(function(element) {
-	    if (!element.bounds) {
-	      return;
-	    }
-
-	    var trbl = asTRBL(element.bounds);
-
-	    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
-	    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
-	    planeTrbl.right = Math.max(trbl.right, planeTrbl.right);
-	    planeTrbl.bottom = Math.max(trbl.bottom, planeTrbl.bottom);
-	  });
-
-	  return asBounds(planeTrbl);
-	}
-
 	function notYetDrawn(translate, semantic, refSemantic, property) {
 	  return new Error(translate('element {element} referenced by {referenced}#{property} not yet drawn', {
 	    element: elementToString(refSemantic),
@@ -5432,39 +5382,17 @@
 
 	  // ROOT ELEMENT
 	  // handle the special case that we deal with a
-	  // invisible root element (process or collaboration)
+	  // invisible root element (process, subprocess or collaboration)
 	  if (is$1(di, 'bpmndi:BPMNPlane')) {
 
-	    if (is$1(semantic, 'bpmn:SubProcess')) {
-	      var plane = this._canvas.createPlane(semantic.id, element);
-
-	      // Get size of expanded element
-	      var bounds = getPlaneBounds(di);
-
-	      var primary = this._elementRegistry.get(semantic.id);
-	      element = this._elementFactory.createShape(elementData(semantic, di, {
-	        collapsed: false,
-	        hidden: false,
-	        x: bounds.x - PLANE_PADDING,
-	        y: bounds.y - PLANE_PADDING,
-	        width: bounds.width + PLANE_PADDING * 2,
-	        height: bounds.height + PLANE_PADDING * 2,
-	        isFrame: true
-	      }));
-
-	      element.id = element.id + '_secondary';
-	      element.isSecondary = true;
-	      element.primaryShape = primary;
+	    var attrs = is$1(semantic, 'bpmn:SubProcess')
+	      ? { id: semantic.id + '_plane' }
+	      : {};
 
-	      this._canvas.addShape(element, plane.rootElement);
-	    }
-	    else {
-
-	      // add a virtual element (not being drawn)
-	      element = this._elementFactory.createRoot(elementData(semantic, di));
+	    // add a virtual element (not being drawn)
+	    element = this._elementFactory.createRoot(elementData(semantic, di, attrs));
 
-	      this._canvas.createPlane(semantic.id, element);
-	    }
+	    this._canvas.addRootElement(element);
 	  }
 
 	  // SHAPE
@@ -5475,7 +5403,7 @@
 
 	    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-	    bounds = di.bounds;
+	    var bounds = di.bounds;
 
 	    element = this._elementFactory.createShape(elementData(semantic, di, {
 	      collapsed: collapsed,
@@ -5500,7 +5428,7 @@
 
 	      // check whether data store is inside our outside of its semantic parent
 	      if (!isPointInsideBBox(parentElement, getMid(bounds))) {
-	        parentElement = this._canvas.findPlane(parentElement).rootElement;
+	        parentElement = this._canvas.findRoot(parentElement);
 	      }
 	    }
 
@@ -5528,7 +5456,7 @@
 	      // are rendered correctly across different "hacks" people
 	      // love to model such as cross participant / sub process
 	      // associations
-	      parentElement = this._canvas.findPlane(parentElement).rootElement;
+	      parentElement = this._canvas.findRoot(parentElement);
 	    }
 
 	    // insert sequence flows behind other flow nodes (cf. #727)
@@ -5762,7 +5690,7 @@
 	  return isPrimaryButton(event) || isAuxiliaryButton(event);
 	}
 
-	var LOW_PRIORITY$2 = 500;
+	var LOW_PRIORITY$3 = 500;
 
 
 	/**
@@ -5957,7 +5885,7 @@
 	  eventBus.on([
 	    'shape.changed',
 	    'connection.changed'
-	  ], LOW_PRIORITY$2, function(event) {
+	  ], LOW_PRIORITY$3, function(event) {
 
 	    var element = event.element,
 	        gfx = event.gfx;
@@ -5965,7 +5893,7 @@
 	    eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
 	  });
 
-	  eventBus.on('interactionEvents.createHit', LOW_PRIORITY$2, function(event) {
+	  eventBus.on('interactionEvents.createHit', LOW_PRIORITY$3, function(event) {
 	    var element = event.element,
 	        gfx = event.gfx;
 
@@ -6239,97 +6167,6 @@
 	  interactionEvents: [ 'type', InteractionEvents ]
 	};
 
-	/**
-	 * Adds an element to a collection and returns true if the
-	 * element was added.
-	 *
-	 * @param {Array<Object>} elements
-	 * @param {Object} e
-	 * @param {boolean} unique
-	 */
-	function add$1(elements, e, unique) {
-	  var canAdd = !unique || elements.indexOf(e) === -1;
-
-	  if (canAdd) {
-	    elements.push(e);
-	  }
-
-	  return canAdd;
-	}
-
-
-	/**
-	 * Iterate over each element in a collection, calling the iterator function `fn`
-	 * with (element, index, recursionDepth).
-	 *
-	 * Recurse into all elements that are returned by `fn`.
-	 *
-	 * @param  {Object|Array<Object>} elements
-	 * @param  {Function} fn iterator function called with (element, index, recursionDepth)
-	 * @param  {number} [depth] maximum recursion depth
-	 */
-	function eachElement(elements, fn, depth) {
-
-	  depth = depth || 0;
-
-	  if (!isArray$1(elements)) {
-	    elements = [ elements ];
-	  }
-
-	  forEach(elements, function(s, i) {
-	    var filter = fn(s, i, depth);
-
-	    if (isArray$1(filter) && filter.length) {
-	      eachElement(filter, fn, depth + 1);
-	    }
-	  });
-	}
-
-
-	/**
-	 * Collects self + child elements up to a given depth from a list of elements.
-	 *
-	 * @param  {djs.model.Base|Array<djs.model.Base>} elements the elements to select the children from
-	 * @param  {boolean} unique whether to return a unique result set (no duplicates)
-	 * @param  {number} maxDepth the depth to search through or -1 for infinite
-	 *
-	 * @return {Array<djs.model.Base>} found elements
-	 */
-	function selfAndChildren(elements, unique, maxDepth) {
-	  var result = [],
-	      processedChildren = [];
-
-	  eachElement(elements, function(element, i, depth) {
-	    add$1(result, element, unique);
-
-	    var children = element.children;
-
-	    // max traversal depth not reached yet
-	    if (maxDepth === -1 || depth < maxDepth) {
-
-	      // children exist && children not yet processed
-	      if (children && add$1(processedChildren, children, unique)) {
-	        return children;
-	      }
-	    }
-	  });
-
-	  return result;
-	}
-
-
-	/**
-	 * Return self + ALL children for a number of elements
-	 *
-	 * @param  {Array<djs.model.Base>} elements to query
-	 * @param  {boolean} allowDuplicates to allow duplicates in the result set
-	 *
-	 * @return {Array<djs.model.Base>} the collected elements
-	 */
-	function selfAndAllChildren(elements, allowDuplicates) {
-	  return selfAndChildren(elements, !allowDuplicates, -1);
-	}
-
 	/**
 	 * Returns the surrounding bbox for all elements in
 	 * the array or the element primitive.
@@ -6404,7 +6241,7 @@
 	  return !!(element && element.isFrame);
 	}
 
-	var LOW_PRIORITY$1 = 500;
+	var LOW_PRIORITY$2 = 500;
 
 
 	/**
@@ -6442,7 +6279,7 @@
 
 	  // A low priortity is necessary, because outlines of labels have to be updated
 	  // after the label bounds have been updated in the renderer.
-	  eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$1, function(event) {
+	  eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$2, function(event) {
 	    var element = event.element,
 	        gfx = event.gfx;
 
@@ -6539,7 +6376,7 @@
 	    self.deselect(element);
 	  });
 
-	  eventBus.on([ 'diagram.clear', 'plane.set' ], function(e) {
+	  eventBus.on([ 'diagram.clear', 'root.set' ], function(e) {
 	    self.select(null);
 	  });
 	}
@@ -6592,10 +6429,12 @@
 
 	  var canvas = this._canvas;
 
+	  var rootElement = canvas.getRootElement();
+
 	  elements = elements.filter(function(element) {
-	    var plane = canvas.findPlane(element);
+	    var elementRoot = canvas.findRoot(element);
 
-	    return plane === canvas.getActivePlane();
+	    return rootElement === elementRoot;
 	  });
 
 	  // selection may be cleared by passing an empty array or null
@@ -6836,7 +6675,7 @@
 	// document wide unique overlay ids
 	var ids = new IdGenerator('ov');
 
-	var LOW_PRIORITY = 500;
+	var LOW_PRIORITY$1 = 500;
 
 
 	/**
@@ -7066,8 +6905,7 @@
 	 *
 	 * @see Overlays#get for filter options.
 	 *
-	 * @param {string} [id]
-	 * @param {Object} [filter]
+	 * @param {string|object} [filter]
 	 */
 	Overlays.prototype.remove = function(filter) {
 
@@ -7183,6 +7021,7 @@
 	  }
 
 	  setPosition(htmlContainer, left || 0, top || 0);
+	  this._updateOverlayVisibilty(overlay, this._canvas.viewbox());
 	};
 
 
@@ -7266,12 +7105,10 @@
 	    classes(htmlContainer).add('djs-overlay-' + overlay.type);
 	  }
 
-	  var plane = this._canvas.findPlane(element);
-	  var activePlane = this._canvas.getActivePlane();
-	  overlay.plane = plane;
-	  if (plane !== activePlane) {
-	    setVisible(htmlContainer, false);
-	  }
+	  var elementRoot = this._canvas.findRoot(element);
+	  var activeRoot = this._canvas.getRootElement();
+
+	  setVisible(htmlContainer, elementRoot === activeRoot);
 
 	  overlay.htmlContainer = htmlContainer;
 
@@ -7287,14 +7124,14 @@
 
 	Overlays.prototype._updateOverlayVisibilty = function(overlay, viewbox) {
 	  var show = overlay.show,
-	      plane = overlay.plane,
+	      rootElement = this._canvas.findRoot(overlay.element),
 	      minZoom = show && show.minZoom,
 	      maxZoom = show && show.maxZoom,
 	      htmlContainer = overlay.htmlContainer,
-	      activePlane = this._canvas.getActivePlane(),
+	      activeRootElement = this._canvas.getRootElement(),
 	      visible = true;
 
-	  if (plane !== activePlane) {
+	  if (rootElement !== activeRootElement) {
 	    visible = false;
 	  } else if (show) {
 	    if (
@@ -7405,7 +7242,7 @@
 
 	  // move integration
 
-	  eventBus.on('element.changed', LOW_PRIORITY, function(e) {
+	  eventBus.on('element.changed', LOW_PRIORITY$1, function(e) {
 	    var element = e.element;
 
 	    var container = self._getOverlayContainer(element, true);
@@ -7430,10 +7267,8 @@
 	  });
 
 
-	  eventBus.on('plane.set', function(e) {
-	    forEach(self._overlays, function(el) {
-	      setVisible(el.htmlContainer, el.plane === e.plane);
-	    });
+	  eventBus.on('root.set', function() {
+	    self._updateOverlaysVisibilty(self._canvas.viewbox());
 	  });
 
 	  // clear overlays with diagram
@@ -7546,250 +7381,184 @@
 	  changeSupport: [ 'type', ChangeSupport ]
 	};
 
-	function SubprocessElements(eventBus, elementRegistry, canvas, elementFactory) {
-	  var attachBoundaries = function() {
-	    var secondaryShapes = elementRegistry.filter(function(el) {
-	      return is$1(el, 'bpmn:SubProcess') && el.isSecondary;
-	    });
-
-	    secondaryShapes.forEach(function(process) {
-
-	      // Add Boundary events
-	      if (process.primaryShape && process.primaryShape.attachers) {
-	        process.primaryShape.attachers.forEach(function(boundary) {
-	          var bo = getBusinessObject(boundary);
-
-	          var primary = process.primaryShape;
-
-	          var relativeXPos = (boundary.x + 15 - primary.x) / primary.width;
-	          var relativeYPos = (boundary.y + 15 - primary.y) / primary.height;
-
-	          var dx = process.x + (process.width * relativeXPos) - 15;
-	          var dy = process.y + (process.height * relativeYPos) - 15;
-
-	          var boundaryShape = elementFactory.createShape({
-	            id: bo.id + '_secondary',
-	            businessObject: bo,
-	            type: 'bpmn:BoundaryEvent',
-	            hidden: false,
-	            x: dx,
-	            y: dy,
-	            width: 30,
-	            height: 30,
-	            isFrame: false,
-	            isSecondary: true,
-	            primaryShape: boundary,
-	            di: boundary.di
-	          });
+	var DEFAULT_PRIORITY$1 = 1000;
 
-	          canvas.addShape(boundaryShape, process.parent);
+	/**
+	 * A utility that can be used to plug-in into the command execution for
+	 * extension and/or validation.
+	 *
+	 * @param {EventBus} eventBus
+	 *
+	 * @example
+	 *
+	 * import inherits from 'inherits';
+	 *
+	 * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+	 *
+	 * function CommandLogger(eventBus) {
+	 *   CommandInterceptor.call(this, eventBus);
+	 *
+	 *   this.preExecute(function(event) {
+	 *     console.log('command pre-execute', event);
+	 *   });
+	 * }
+	 *
+	 * inherits(CommandLogger, CommandInterceptor);
+	 *
+	 */
+	function CommandInterceptor(eventBus) {
+	  this._eventBus = eventBus;
+	}
 
-	          if (!process.attachers) {
-	            process.attachers = [];
-	          }
+	CommandInterceptor.$inject = [ 'eventBus' ];
 
-	          process.attachers.push(boundaryShape);
-	        });
-	      }
-	    });
+	function unwrapEvent(fn, that) {
+	  return function(event) {
+	    return fn.call(that || null, event.context, event.command, event);
 	  };
-
-	  eventBus.on('import.done', attachBoundaries);
 	}
 
+	/**
+	 * Register an interceptor for a command execution
+	 *
+	 * @param {string|Array<string>} [events] list of commands to register on
+	 * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
+	 * @param {number} [priority] the priority on which to hook into the execution
+	 * @param {Function} handlerFn interceptor to be invoked with (event)
+	 * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
+	 *                          listener instead
+	 * @param {Object} [that] Pass context (`this`) to the handler function
+	 */
+	CommandInterceptor.prototype.on = function(events, hook, priority, handlerFn, unwrap, that) {
 
-	SubprocessElements.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'elementFactory' ];
-
-	var defaultPosition = { x: 100, y: 50 };
-
-	function SubprocessCentering(eventBus, canvas) {
-	  var currentPlane = 'base';
-	  var positionMap = {};
+	  if (isFunction(hook) || isNumber(hook)) {
+	    that = unwrap;
+	    unwrap = handlerFn;
+	    handlerFn = priority;
+	    priority = hook;
+	    hook = null;
+	  }
 
-	  eventBus.on('plane.set', function(event) {
+	  if (isFunction(priority)) {
+	    that = unwrap;
+	    unwrap = handlerFn;
+	    handlerFn = priority;
+	    priority = DEFAULT_PRIORITY$1;
+	  }
 
-	    var currentViewbox = canvas.viewbox();
-	    positionMap[currentPlane] = {
-	      x: currentViewbox.x,
-	      y: currentViewbox.y,
-	      zoom: currentViewbox.scale
-	    };
+	  if (isObject(unwrap)) {
+	    that = unwrap;
+	    unwrap = false;
+	  }
 
-	    var planeId = event.plane.name;
-	    var storedViewbox = positionMap[planeId];
+	  if (!isFunction(handlerFn)) {
+	    throw new Error('handlerFn must be a function');
+	  }
 
-	    if (!storedViewbox) {
-	      if (!event.plane.rootElement.isImplicit) {
-	        storedViewbox = {
-	          x: 0,
-	          y: 0,
-	          zoom: 1
-	        };
-	      }
-	      else {
-	        var currentBoundingBox = canvas.getActiveLayer().getBBox();
-	        storedViewbox = {
-	          x: currentBoundingBox.x - defaultPosition.x,
-	          y: currentBoundingBox.y - defaultPosition.y,
-	          zoom: 1
-	        };
-	      }
-	    }
+	  if (!isArray$1(events)) {
+	    events = [ events ];
+	  }
 
-	    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
-	        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
+	  var eventBus = this._eventBus;
 
-	    if (dx !== 0 || dy !== 0) {
-	      canvas.scroll({
-	        dx: dx,
-	        dy: dy
-	      });
-	    }
+	  forEach(events, function(event) {
 
-	    if (storedViewbox.zoom !== currentViewbox.scale) {
-	      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
-	    }
+	    // concat commandStack(.event)?(.hook)?
+	    var fullEvent = [ 'commandStack', event, hook ].filter(function(e) { return e; }).join('.');
 
-	    currentPlane = planeId;
+	    eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
 	  });
-	}
-
-	SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];
-
-	function SubprocessCompatibility(eventBus, elementRegistry, canvas, moddle, elementFactory, bpmnjs) {
-	  this._eventBus = eventBus;
-	  this._elementRegistry = elementRegistry;
-	  this._canvas = canvas;
-	  this._bpmnjs = bpmnjs;
-	  this._moddle = moddle;
-	  this._elementFactory = elementFactory;
-
-	  var self = this;
+	};
 
-	  eventBus.on('import.done', 1500, function() {
-	    self._handleImport();
-	  });
-	}
 
-	SubprocessCompatibility.prototype._handleImport = function() {
-	  var elementRegistry = this._elementRegistry;
-	  var canvas = this._canvas;
-	  var elementFactory = this._elementFactory;
-	  var self = this;
-	  var legacyProcesses = elementRegistry.filter(function(element) {
-	    return is$1(element, 'bpmn:SubProcess') && !isExpanded(element) && element.children && element.children.length;
-	  });
+	var hooks = [
+	  'canExecute',
+	  'preExecute',
+	  'preExecuted',
+	  'execute',
+	  'executed',
+	  'postExecute',
+	  'postExecuted',
+	  'revert',
+	  'reverted'
+	];
 
-	  legacyProcesses.forEach(function(oldParent) {
-	    var bo = getBusinessObject(oldParent);
+	/*
+	 * Install hook shortcuts
+	 *
+	 * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
+	 * which will in term forward to CommandInterceptor#on.
+	 */
+	forEach(hooks, function(hook) {
 
-	    var newDiagram = self.createDiagram(bo);
+	  /**
+	   * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
+	   *
+	   * A named hook for plugging into the command execution
+	   *
+	   * @param {string|Array<string>} [events] list of commands to register on
+	   * @param {number} [priority] the priority on which to hook into the execution
+	   * @param {Function} handlerFn interceptor to be invoked with (event)
+	   * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
+	   *                          listener instead
+	   * @param {Object} [that] Pass context (`this`) to the handler function
+	   */
+	  CommandInterceptor.prototype[hook] = function(events, priority, handlerFn, unwrap, that) {
 
-	    var newParent = elementFactory.createRoot(
-	      {
-	        id: bo.id,
-	        type: bo.$type,
-	        businessObject: bo,
-	        di: newDiagram.plane
-	      }
-	    );
+	    if (isFunction(events) || isNumber(events)) {
+	      that = unwrap;
+	      unwrap = handlerFn;
+	      handlerFn = priority;
+	      priority = events;
+	      events = null;
+	    }
 
-	    newParent.id = newParent.id + '_plane';
+	    this.on(events, hook, priority, handlerFn, unwrap, that);
+	  };
+	});
 
-	    canvas.createPlane(bo.id, newParent);
+	/**
+	 * A modeling behavior that ensures we set the correct root element
+	 * as we undo and redo commands.
+	 *
+	 * @param {Canvas} canvas
+	 * @param {didi.Injector} injector
+	 */
+	function RootElementsBehavior(canvas, injector) {
 
-	    var elementsToChange = selfAndAllChildren(oldParent).filter(function(el) {
-	      return el !== oldParent;
-	    });
+	  injector.invoke(CommandInterceptor, this);
 
-	    self.moveElementsToRoot(elementsToChange);
+	  this.executed(function(event) {
+	    var context = event.context;
 
-	    elementsToChange.forEach(function(el) {
-	      if (el.parent === oldParent) {
-	        el.parent = newParent;
-	      }
-	      el.hidden = el.parent && (el.parent.hidden || el.parent.collapsed);
+	    if (context.rootElement) {
+	      canvas.setRootElement(context.rootElement);
+	    } else {
+	      context.rootElement = canvas.getRootElement();
+	    }
+	  });
 
-	      self.moveToDiPlane(el, newDiagram.plane);
+	  this.revert(function(event) {
+	    var context = event.context;
 
-	      self._eventBus.fire('elements.changed', { elements: [el] });
-	    });
+	    if (context.rootElement) {
+	      canvas.setRootElement(context.rootElement);
+	    }
 	  });
+	}
 
-	};
+	inherits$1(RootElementsBehavior, CommandInterceptor);
 
-	SubprocessCompatibility.prototype.moveToDiPlane = function(element, newPlane) {
-	  var di = getDi(element);
-	  var containingDiagram = findRootDiagram(di);
+	RootElementsBehavior.$inject = [ 'canvas', 'injector'];
 
-	  // Remove DI from old Plane and add it to the new one
-	  var parentPlaneElement = containingDiagram.plane.get('planeElement');
-	  parentPlaneElement.splice(parentPlaneElement.indexOf(di), 1);
-	  newPlane.get('planeElement').push(di);
+	var RootElementsModule = {
+	  __init__: [ 'rootElementsBehavior' ],
+	  rootElementsBehavior: [ 'type', RootElementsBehavior ]
 	};
 
-	SubprocessCompatibility.prototype.moveElementsToRoot = function(elements) {
-	  var defaultPosition = { x: 180, y: 160 },
-	      minX = Infinity,
-	      minY = Infinity;
-
-	  elements.forEach(function(el) {
-	    minX = Math.min(minX, el.x || Infinity);
-	    minY = Math.min(minY, el.y || Infinity);
-	  });
+	var css_escape = {exports: {}};
 
-	  var xOffset = defaultPosition.x - minX;
-	  var yOffset = defaultPosition.y - minY;
-
-	  elements.forEach(function(el) {
-	    if (el.waypoints) {
-	      el.waypoints.forEach(function(waypoint) {
-	        waypoint.x = waypoint.x + xOffset;
-	        waypoint.y = waypoint.y + yOffset;
-	      });
-	    } else {
-	      el.x = el.x + xOffset;
-	      el.y = el.y + yOffset;
-	    }
-	  });
-	};
-
-	SubprocessCompatibility.prototype.getDefinitions = function() {
-	  return this._bpmnjs._definitions || [];
-	};
-
-	SubprocessCompatibility.prototype.getDiagrams = function() {
-	  return this.getDefinitions().diagrams || [];
-	};
-
-	SubprocessCompatibility.prototype.createDiagram = function(bo) {
-	  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
-	  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
-	    plane: plane
-	  });
-	  plane.$parent = diagram;
-	  plane.bpmnElement = bo;
-	  diagram.$parent = this.getDefinitions();
-	  this.getDiagrams().push(diagram);
-	  return diagram;
-	};
-
-	SubprocessCompatibility.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'moddle', 'elementFactory', 'bpmnjs' ];
-
-
-	//  Util
-
-	var findRootDiagram = function(element) {
-	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
-	    return element;
-	  } else {
-	    return findRootDiagram(element.$parent);
-	  }
-	};
-
-	var css_escape = {exports: {}};
-
-	/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
+	/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
 
 	(function (module, exports) {
 	(function(root, factory) {
@@ -7909,224 +7678,640 @@
 	  });
 	}
 
-	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 ARROW_UP_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.1819805,12.4926407 L5.5003106,6.8103106 L5.5,12 L4,12 L4,4 L12,4 L12,5.5 L6.3103106,5.5003106 L12.2426407,11.4319805 C12.5355339,11.7248737 12.5355339,12.1997475 12.2426407,12.4926407 C11.9497475,12.7855339 11.4748737,12.7855339 11.1819805,12.4926407 Z"/></svg>';
+	var planeSuffix = '_plane';
 
-	function SubprocessOverlays(eventBus, elementRegistry, overlays, canvas) {
+	/**
+	 * Get plane ID for a primary shape.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {String}
+	 */
+	function getPlaneIdFromShape(element) {
+	  var id = element.id;
+
+	  if (is$1(element, 'bpmn:SubProcess')) {
+	    return addPlaneSuffix(id);
+	  }
 
-	  function createBreadcrumbs(subProcess) {
-	    var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
-	    var drillUp = domify('<button class="bjs-drilldown">' + ARROW_UP_SVG + '</button>');
-	    drillUp.addEventListener('click', function() {
-	      var plane = canvas.findPlane(getBusinessObject(subProcess).id);
-	      canvas.setActivePlane(plane);
+	  return id;
+	}
+
+	function addPlaneSuffix(id) {
+	  return id + planeSuffix;
+	}
+
+	var OPEN_CLASS = 'bjs-breadcrumbs-shown';
+
+
+	/**
+	 * Adds overlays that allow switching planes on collapsed subprocesses.
+	 *
+	 * @param {eventBus} eventBus
+	 * @param {elementRegistry} elementRegistry
+	 * @param {overlays} overlays
+	 * @param {canvas} canvas
+	 */
+	function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
+	  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+	  var container = canvas.getContainer();
+	  var containerClasses = classes(container);
+	  container.appendChild(breadcrumbs);
+
+	  var boParents = [];
+
+	  // update breadcrumbs if name or ID of the primary shape changes
+	  eventBus.on('element.changed', function(e) {
+	    var shape = e.element,
+	        bo = getBusinessObject(shape);
+
+	    var isPresent = find(boParents, function(el) {
+	      return el === bo;
 	    });
 
-	    breadcrumbs.appendChild(drillUp);
+	    if (!isPresent) {
+	      return;
+	    }
 
-	    var parents = getParentChain(subProcess);
+	    updateBreadcrumbs();
+	  });
 
-	    var path = parents.map(function(el) {
-	      var title = escapeHTML(el.name) || el.id;
+	  /**
+	   * Updates the displayed breadcrumbs. If no element is provided, only the
+	   * labels are updated.
+	   *
+	   * @param {djs.model.Base} [element]
+	   */
+	  function updateBreadcrumbs(element) {
+	    if (element) {
+	      boParents = getBoParentChain(element);
+	    }
+
+	    var path = boParents.map(function(parent) {
+	      var title = escapeHTML(parent.name || parent.id);
 	      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
 
+	      var parentPlane = canvas.findRoot(getPlaneIdFromShape(parent)) || canvas.findRoot(parent.id);
+
+	      // when the root is a collaboration, the process does not have a corresponding
+	      // element in the elementRegisty. Instead, we search for the corresponding participant
+	      if (!parentPlane && is$1(parent, 'bpmn:Process')) {
+	        var participant = elementRegistry.find(function(element) {
+	          var bo = getBusinessObject(element);
+	          return bo && bo.processRef && bo.processRef === parent;
+	        });
+
+	        parentPlane = canvas.findRoot(participant.id);
+	      }
+
 	      link.addEventListener('click', function() {
-	        if (canvas.getPlane(el.id)) {
-	          canvas.setActivePlane(el.id);
-	        } else {
-	          var plane = canvas.findPlane(el.id);
-	          canvas.setActivePlane(plane);
-	        }
+	        canvas.setRootElement(parentPlane);
 	      });
 
 	      return link;
 	    });
 
+	    breadcrumbs.innerHTML = '';
+
+	    // 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);
 	    });
+	  }
 
-	    overlays.add(subProcess, {
-	      position: {
-	        top: -30,
-	        left: -10
-	      },
-	      html: breadcrumbs
-	    });
+	  eventBus.on('root.set', function(event) {
+	    updateBreadcrumbs(event.element);
+	  });
+
+	}
+
+	DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+	// helpers //////////
+
+	/**
+	 * Returns the parents for the element using the business object chain,
+	 * starting with the root element.
+	 *
+	 * @param {djs.model.Shape} child
+	 *
+	 * @returns {Array<djs.model.Shape>} parents
+	 */
+	function getBoParentChain(child) {
+	  var bo = getBusinessObject(child);
+
+	  var parents = [];
+
+	  for (var element = bo; element; element = element.$parent) {
+	    if (is$1(element, 'bpmn:SubProcess') || is$1(element, 'bpmn:Process')) {
+	      parents.push(element);
+	    }
 	  }
 
-	  var createDrilldown = function(element) {
-	    var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+	  return parents.reverse();
+	}
 
-	    html.addEventListener('click', function() {
-	      canvas.setActivePlane(element.id);
-	    });
+	/**
+	 * Move collapsed subprocesses into view when drilling down.
+	 *
+	 * Zoom and scroll are saved in a session.
+	 *
+	 * @param {eventBus} eventBus
+	 * @param {canvas} canvas
+	 */
+	function DrilldownCentering(eventBus, canvas) {
 
-	    overlays.add(element, {
-	      position: {
-	        bottom: -7,
-	        right: -8
-	      },
-	      html: html
+	  var currentRoot = null;
+	  var positionMap = new Map();
+
+	  eventBus.on('root.set', function(event) {
+	    var newRoot = event.element;
+	    var currentViewbox = canvas.viewbox();
+	    var storedViewbox = positionMap.get(newRoot);
+
+	    positionMap.set(currentRoot, {
+	      x: currentViewbox.x,
+	      y: currentViewbox.y,
+	      zoom: currentViewbox.scale
 	    });
+
+	    currentRoot = newRoot;
+
+	    // current root was replaced with a collaboration, we don't update the viewbox
+	    if (is$1(newRoot, 'bpmn:Collaboration') && !storedViewbox) {
+	      return;
+	    }
+
+	    storedViewbox = storedViewbox || { x: 0, y: 0, zoom: 1 };
+
+	    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
+	        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
+
+	    if (dx !== 0 || dy !== 0) {
+	      canvas.scroll({
+	        dx: dx,
+	        dy: dy
+	      });
+	    }
+
+	    if (storedViewbox.zoom !== currentViewbox.scale) {
+	      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
+	    }
+	  });
+
+	  eventBus.on('diagram.clear', function() {
+	    positionMap.clear();
+	    currentRoot = null;
+	  });
+
+	}
+
+	DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];
+
+
+	/**
+	 * ES5 Map implementation. Works.
+	 */
+	function Map() {
+
+	  this._entries = [];
+
+	  this.set = function(key, value) {
+
+	    var found = false;
+
+	    for (var k in this._entries) {
+	      if (this._entries[k][0] === key) {
+	        this._entries[k][1] = value;
+
+	        found = true;
+
+	        break;
+	      }
+	    }
+
+	    if (!found) {
+	      this._entries.push([ key, value ]);
+	    }
 	  };
 
-	  var addOverlays = function(elements) {
-	    elements.forEach(function(element) {
-	      if (is$1(element, 'bpmn:SubProcess')
-	          && element.collapsed
-	          && canvas.getPlane(element.id)) {
-	        createDrilldown(element);
+	  this.get = function(key) {
+
+	    for (var k in this._entries) {
+	      if (this._entries[k][0] === key) {
+	        return this._entries[k][1];
 	      }
+	    }
+
+	    return null;
+	  };
+
+	  this.clear = function() {
+	    this._entries.length = 0;
+	  };
+
+	  this.remove = function(key) {
+
+	    var idx = -1;
+
+	    for (var k in this._entries) {
+	      if (this._entries[k][0] === key) {
+	        idx = k;
 
-	      if (is$1(element, 'bpmn:SubProcess') && element.isSecondary) {
-	        createBreadcrumbs(element);
+	        break;
 	      }
-	    });
+	    }
+
+	    if (idx !== -1) {
+	      this._entries.splice(idx, 1);
+	    }
 	  };
+	}
 
-	  eventBus.on('import.done', function() {
-	    addOverlays(elementRegistry.filter(function(el) {
-	      return is$1(el, 'bpmn:SubProcess');
-	    }));
+	var DEFAULT_POSITION = {
+	  x: 180,
+	  y: 160
+	};
+
+	/**
+	 * Hook into `import.render.start` and create new planes for diagrams with
+	 * collapsed subprocesses and all dis on the same plane.
+	 *
+	 * @param {eventBus} eventBus
+	 * @param {moddle} moddle
+	 */
+	function SubprocessCompatibility(eventBus, moddle) {
+	  this._eventBus = eventBus;
+	  this._moddle = moddle;
+
+	  var self = this;
+
+	  eventBus.on('import.render.start', 1500, function(e, context) {
+	    self.handleImport(context.definitions);
 	  });
 	}
 
-	SubprocessOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+	SubprocessCompatibility.prototype.handleImport = function(definitions) {
+	  if (!definitions.diagrams) {
+	    return;
+	  }
 
+	  var self = this;
+	  this._definitions = definitions;
+	  this._processToDiagramMap = {};
 
-	var getParentChain = function(child) {
-	  var bo = getBusinessObject(child);
+	  definitions.diagrams.forEach(function(diagram) {
+	    if (!diagram.plane || !diagram.plane.bpmnElement) {
+	      return;
+	    }
 
-	  var parents = [];
+	    self._processToDiagramMap[diagram.plane.bpmnElement.id] = diagram;
+	  });
 
-	  for (var element = bo; element; element = element.$parent) {
-	    if (is$1(element, 'bpmn:SubProcess') || is$1(element, 'bpmn:Process')) {
-	      parents.push(element);
-	    }
-	  }
+	  var newDiagrams = [];
+	  definitions.diagrams.forEach(function(diagram) {
+	    var createdDiagrams = self.createNewDiagrams(diagram.plane);
+	    Array.prototype.push.apply(newDiagrams, createdDiagrams);
+	  });
 
-	  return parents.reverse();
+	  newDiagrams.forEach(function(diagram) {
+	    self.movePlaneElementsToOrigin(diagram.plane);
+	  });
 	};
 
-	var FLOW_LENGTH = 50;
-	var HIGH_RENDER_PRIORITY = 2000;
 
-	function SubprocessFlows(eventBus, config) {
+	/**
+	 * Moves all DI elements from collapsed subprocesses to a new plane.
+	 *
+	 * @param {Object} plane
+	 * @return {Array} new diagrams created for the collapsed subprocesses
+	 */
+	SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
+	  var self = this;
 
-	  var mutedStrokeColor = (config && config.mutedStrokeColor) || '#dddddd';
+	  var collapsedElements = [];
+	  var elementsToMove = [];
 
-	  function drawFakeFlows(element, parentGfx) {
-	    var primary = element.primaryShape;
+	  plane.get('planeElement').forEach(function(diElement) {
+	    var bo = diElement.bpmnElement;
 
-	    var drawFakeConnection = function(connection, isOutgoing) {
+	    if (!bo) {
+	      return;
+	    }
 
-	      var segment;
-	      if (isOutgoing) {
-	        segment = connection.waypoints.slice(0, 2);
+	    var parent = bo.$parent;
 
-	        // Reverse order for normalizing
-	        segment = segment.reverse();
-	      } else {
-	        segment = connection.waypoints.slice(connection.waypoints.length - 2);
-	      }
+	    if (is$1(bo, 'bpmn:SubProcess') && !diElement.isExpanded) {
+	      collapsedElements.push(bo);
+	    }
 
-	      var endpoint = segment[1];
+	    if (is$1(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
 
-	      var relativePosition = {
-	        x: (endpoint.x - primary.x) / primary.width,
-	        y: (endpoint.y - primary.y) / primary.height
-	      };
+	      // don't change the array while we iterate over it
+	      elementsToMove.push({ diElement: diElement, parent: parent });
+	    }
+	  });
 
-	      var anchorPoint = {
-	        x: endpoint.x - (element.width * relativePosition.x),
-	        y: endpoint.y - (element.height * relativePosition.y)
-	      };
+	  var newDiagrams = [];
+
+	  // create new planes for all collapsed subprocesses, even when they are empty
+	  collapsedElements.forEach(function(element) {
+	    if (!self._processToDiagramMap[element.id]) {
+	      var diagram = self.createDiagram(element);
+	      self._processToDiagramMap[element.id] = diagram;
+	      newDiagrams.push(diagram);
+	    }
+	  });
+
+	  elementsToMove.forEach(function(element) {
+	    var diElement = element.diElement;
+	    var parent = element.parent;
+
+	    // parent is expanded, get nearest collapsed parent
+	    while (parent && collapsedElements.indexOf(parent) === -1) {
+	      parent = parent.$parent;
+	    }
+
+	    // false positive, all parents are expanded
+	    if (!parent) {
+	      return;
+	    }
+
+	    var diagram = self._processToDiagramMap[parent.id];
+	    self.moveToDiPlane(diElement, diagram.plane);
+	  });
+
+	  return newDiagrams;
+	};
+
+	SubprocessCompatibility.prototype.movePlaneElementsToOrigin = function(plane) {
+	  var elements = plane.get('planeElement');
+
+	  // get bounding box of all elements
+	  var planeBounds = getPlaneBounds(plane);
+
+	  var offset = {
+	    x: planeBounds.x - DEFAULT_POSITION.x,
+	    y: planeBounds.y - DEFAULT_POSITION.y
+	  };
 
-	      var newWaypoints = segment.map(function(el) {
-	        return { x: el.x - anchorPoint.x, y: el.y - anchorPoint.y };
+	  elements.forEach(function(diElement) {
+	    if (diElement.waypoint) {
+	      diElement.waypoint.forEach(function(waypoint) {
+	        waypoint.x = waypoint.x - offset.x;
+	        waypoint.y = waypoint.y - offset.y;
 	      });
+	    } else if (diElement.bounds) {
+	      diElement.bounds.x = diElement.bounds.x - offset.x;
+	      diElement.bounds.y = diElement.bounds.y - offset.y;
+	    }
+	  });
+	};
 
-	      newWaypoints[0] = normalizeLength(newWaypoints[1], newWaypoints[0], FLOW_LENGTH);
 
-	      var attrs = {
-	        stroke: mutedStrokeColor
-	      };
+	SubprocessCompatibility.prototype.moveToDiPlane = function(diElement, newPlane) {
+	  var containingDiagram = findRootDiagram(diElement);
 
-	      if (isOutgoing) {
+	  // remove DI from old Plane and add it to the new one
+	  var parentPlaneElement = containingDiagram.plane.get('planeElement');
+	  parentPlaneElement.splice(parentPlaneElement.indexOf(diElement), 1);
+	  newPlane.get('planeElement').push(diElement);
+	};
+
+
+	SubprocessCompatibility.prototype.createDiagram = function(bo) {
+	  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
+	  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
+	    plane: plane
+	  });
+	  plane.$parent = diagram;
+	  plane.bpmnElement = bo;
+	  diagram.$parent = this._definitions;
+	  this._definitions.diagrams.push(diagram);
+	  return diagram;
+	};
+
+	SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
+
+
+	// helpers
+
+	function findRootDiagram(element) {
+	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
+	    return element;
+	  } else {
+	    return findRootDiagram(element.$parent);
+	  }
+	}
+
+	function getPlaneBounds(plane) {
+	  var planeTrbl = {
+	    top: Infinity,
+	    right: -Infinity,
+	    bottom: -Infinity,
+	    left: Infinity
+	  };
+
+	  plane.planeElement.forEach(function(element) {
+	    if (!element.bounds) {
+	      return;
+	    }
+
+	    var trbl = asTRBL(element.bounds);
+
+	    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
+	    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
+	  });
+
+	  return asBounds(planeTrbl);
+	}
+
+	var LOW_PRIORITY = 250;
+	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 EMPTY_MARKER = 'bjs-drilldown-empty';
+
+	function DrilldownOverlayBehavior(
+	    canvas, eventBus, elementRegistry, overlays
+	) {
+	  CommandInterceptor.call(this, eventBus);
+
+	  this._canvas = canvas;
+	  this._eventBus = eventBus;
+	  this._elementRegistry = elementRegistry;
+	  this._overlays = overlays;
+
+	  var self = this;
+
+	  this.executed('shape.toggleCollapse', LOW_PRIORITY, function(context) {
+	    var shape = context.shape;
+
+	    // Add overlay to the collapsed shape
+	    if (self.canDrillDown(shape)) {
+	      self.addOverlay(shape);
+	    } else {
+	      self.removeOverlay(shape);
+	    }
+	  }, true);
+
+
+	  this.reverted('shape.toggleCollapse', LOW_PRIORITY, function(context) {
+	    var shape = context.shape;
+
+	    // Add overlay to the collapsed shape
+	    if (self.canDrillDown(shape)) {
+	      self.addOverlay(shape);
+	    } else {
+	      self.removeOverlay(shape);
+	    }
+	  }, true);
 
-	        // Reverse order again for correct end marker position
-	        newWaypoints = newWaypoints.reverse();
-	      } else {
 
-	        // Remove start marker for incoming flows
-	        attrs.markerStart = undefined;
+	  this.executed(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY,
+	    function(context) {
+	      var oldParent = context.oldParent,
+	          newParent = context.newParent || context.parent,
+	          shape = context.shape;
+
+	      // Add overlay to the collapsed shape
+	      if (self.canDrillDown(shape)) {
+	        self.addOverlay(shape);
 	      }
 
-	      eventBus.fire('render.connection', {
-	        type: connection.type,
-	        gfx: parentGfx,
-	        element: {
-	          type: connection.type,
-	          waypoints: newWaypoints,
-	          di: connection.di,
-	          businessObject: connection.businessObject
-	        },
-	        attrs: attrs
-	      });
-	    };
+	      self.updateDrilldownOverlay(oldParent);
+	      self.updateDrilldownOverlay(newParent);
+	      self.updateDrilldownOverlay(shape);
+	    }, true);
+
+
+	  this.reverted(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY,
+	    function(context) {
+	      var oldParent = context.oldParent,
+	          newParent = context.newParent || context.parent,
+	          shape = context.shape;
 
-	    primary.incoming && primary.incoming.forEach(function(connection) {
-	      drawFakeConnection(connection, false);
+	      // Add overlay to the collapsed shape
+	      if (self.canDrillDown(shape)) {
+	        self.addOverlay(shape);
+	      }
+
+	      self.updateDrilldownOverlay(oldParent);
+	      self.updateDrilldownOverlay(newParent);
+	      self.updateDrilldownOverlay(shape);
+	    }, true);
+
+
+	  eventBus.on('import.done', function() {
+	    elementRegistry.filter(function(e) {
+	      return self.canDrillDown(e);
+	    }).map(function(el) {
+	      self.addOverlay(el);
 	    });
+	  });
+
+	}
+
+	inherits$1(DrilldownOverlayBehavior, CommandInterceptor);
+
+	DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
+	  var canvas = this._canvas;
+
+	  if (!shape) {
+	    return;
+	  }
+
+	  var root = canvas.findRoot(shape);
+	  if (root) {
+	    this.updateOverlayVisibility(root);
+	  }
+	};
+
+
+	DrilldownOverlayBehavior.prototype.canDrillDown = function(element) {
+	  var canvas = this._canvas;
+	  return is$1(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));
+	};
+
+	/**
+	 * Updates visibility of the drilldown overlay. If the plane has no elements,
+	 * the drilldown will be only shown when the element is selected.
+	 *
+	 * @param {djs.model.Shape|djs.model.Root} element collapsed shape or root element
+	 */
+	DrilldownOverlayBehavior.prototype.updateOverlayVisibility = function(element) {
+	  var overlays = this._overlays;
+
+	  var bo = element.businessObject;
+
+	  var overlay = overlays.get({ element: bo.id, type: 'drilldown' })[0];
+
+	  if (!overlay) {
+	    return;
+	  }
+
+	  var hasContent = bo && bo.flowElements && bo.flowElements.length;
+	  classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+	};
+
+	/**
+	 * Attaches a drilldown button to the given element. We assume that the plane has
+	 * the same id as the element.
+	 *
+	 * @param {djs.model.Shape} element collapsed shape
+	 */
+	DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
+	  var canvas = this._canvas;
+	  var overlays = this._overlays;
 
-	    primary.outgoing && primary.outgoing.forEach(function(connection) {
-	      drawFakeConnection(connection, true);
-	    });
+	  var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
+	  if (existingOverlays.length) {
+	    this.removeOverlay(element);
 	  }
 
-	  eventBus.on([ 'render.shape' ], HIGH_RENDER_PRIORITY, function(evt, context) {
-	    var element = context.element,
-	        visuals = context.gfx;
-
-	    if (element.isSecondary && element.primaryShape) {
-	      drawFakeFlows(element, visuals);
-	    }
+	  var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
 
+	  button.addEventListener('click', function() {
+	    canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
 	  });
 
-	}
-
-	SubprocessFlows.$inject = [ 'eventBus', 'config' ];
-
-
-	// helpers
+	  overlays.add(element, 'drilldown', {
+	    position: {
+	      bottom: -7,
+	      right: -8
+	    },
+	    html: button
+	  });
 
-	function normalizeLength(fixedPoint, variablePoint, length) {
-	  var dx = fixedPoint.x - variablePoint.x,
-	      dy = fixedPoint.y - variablePoint.y,
-	      totalDistance = Math.abs(dx) + Math.abs(dy);
+	  this.updateOverlayVisibility(element);
+	};
 
-	  dx = dx / totalDistance;
-	  dy = dy / totalDistance;
+	DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
+	  var overlays = this._overlays;
 
-	  dx *= length;
-	  dy *= length;
+	  overlays.remove({
+	    element: element,
+	    type: 'drilldown'
+	  });
+	};
 
-	  return {
-	    x: fixedPoint.x - dx,
-	    y: fixedPoint.y - dy
-	  };
-	}
+	DrilldownOverlayBehavior.$inject = [
+	  'canvas',
+	  'eventBus',
+	  'elementRegistry',
+	  'overlays'
+	];
 
-	var SubprocessNavigationModule = {
-	  __depends__: [ OverlaysModule, ChangeSupportModule ],
-	  __init__: [ 'subprocessElements', 'subprocessOverlays', 'subprocessCompatibility', 'subprocessCentering', 'subprocessFlows' ],
-	  subprocessElements: [ 'type', SubprocessElements ],
-	  subprocessOverlays: [ 'type', SubprocessOverlays ],
-	  subprocessCompatibility: [ 'type', SubprocessCompatibility ],
-	  subprocessCentering: [ 'type', SubprocessCentering ],
-	  subprocessFlows: ['type', SubprocessFlows]
+	var DrilldownModdule = {
+	  __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],
+	  __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility'],
+	  drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],
+	  drilldownCentering: [ 'type', DrilldownCentering ],
+	  drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],
+	  subprocessCompatibility: [ 'type', SubprocessCompatibility ]
 	};
 
 	var CLASS_PATTERN = /^class /;
@@ -8766,7 +8951,10 @@
 	}
 
 	var BASE_LAYER = 'base';
-	var HIDDEN_MARKER = 'djs-element-hidden';
+
+	// render plane contents behind utility layers
+	var PLANE_LAYER_INDEX = 0;
+	var UTILITY_LAYER_INDEX = 1;
 
 
 	var REQUIRED_MODEL_ATTRS = {
@@ -8793,6 +8981,12 @@
 	  this._elementRegistry = elementRegistry;
 	  this._graphicsFactory = graphicsFactory;
 
+	  this._rootsIdx = 0;
+
+	  this._layers = {};
+	  this._planes = [];
+	  this._rootElement = null;
+
 	  this._init(config || {});
 	}
 
@@ -8830,9 +9024,6 @@
 
 	  var viewport = this._viewport = createGroup(svg, 'viewport');
 
-	  this._layers = {};
-	  this._planes = {};
-
 	  // debounce canvas.viewbox.changed events
 	  // for smoother diagram interaction
 	  if (config.deferUpdate !== false) {
@@ -8866,7 +9057,8 @@
 	    'connection.added',
 	    'shape.removed',
 	    'connection.removed',
-	    'elements.changed'
+	    'elements.changed',
+	    'root.set'
 	  ], function() {
 	    delete this._cachedViewbox;
 	  }, this);
@@ -8891,7 +9083,7 @@
 	  delete this._container;
 	  delete this._layers;
 	  delete this._planes;
-	  delete this._activePlane;
+	  delete this._rootElement;
 	  delete this._viewport;
 	};
 
@@ -8906,15 +9098,15 @@
 	    var type = getType(element);
 
 	    if (type === 'root') {
-	      self.setRootElementForPlane(null, self.findPlane(element), true);
+	      self.removeRootElement(element);
 	    } else {
 	      self._removeElement(element, type);
 	    }
 	  });
 
 	  // remove all planes
-	  this._activePlane = null;
-	  this._planes = {};
+	  this._planes = [];
+	  this._rootElement = null;
 
 	  // force recomputation of view box
 	  delete this._cachedViewbox;
@@ -8927,7 +9119,7 @@
 	 * @returns {SVGElement}
 	 */
 	Canvas.prototype.getDefaultLayer = function() {
-	  return this.getLayer(BASE_LAYER);
+	  return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
 	};
 
 	/**
@@ -8976,8 +9168,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) {
@@ -8995,142 +9187,75 @@
 
 	};
 
-	/**
-	 * Returns a plane that is used to draw elements on it.
-	 *
-	 * @param {string} name
-	 *
-	 * @return {Object} plane descriptor with { layer, rootElement, name }
-	 */
-	Canvas.prototype.getPlane = function(name) {
-	  if (!name) {
-	    throw new Error('must specify a name');
-	  }
-
-	  var plane = this._planes[name];
-
-	  return plane;
-	};
-
-	/**
-	 * Creates a plane that is used to draw elements on it. If no
-	 * root element is provided, an implicit root will be used.
-	 *
-	 * @param {string} name
-	 * @param {Object|djs.model.Root} [rootElement] optional root element
-	 *
-	 * @return {Object} plane descriptor with { layer, rootElement, name }
-	 */
-	Canvas.prototype.createPlane = function(name, rootElement) {
-	  if (!name) {
-	    throw new Error('must specify a name');
-	  }
-
-	  if (this._planes[name]) {
-	    throw new Error('plane ' + name + ' already exists');
-	  }
-
-	  if (!rootElement) {
-	    rootElement = {
-	      id: '__implicitroot' + name,
-	      children: [],
-	      isImplicit: true
-	    };
-	  }
-
-	  var svgLayer = this.getLayer(name);
-	  classes$1(svgLayer).add(HIDDEN_MARKER);
-
-	  var plane = this._planes[name] = {
-	    layer: svgLayer,
-	    name: name,
-	    rootElement: null
-	  };
-
-	  this.setRootElementForPlane(rootElement, plane);
-
-	  return plane;
-	};
-
-	/**
-	 * Sets the active plane and hides the previously active plane.
-	 *
-	 * @param {string|Object} plane
-	 *
-	 * @return {Object} plane descriptor with { layer, rootElement, name }
-	 */
-	Canvas.prototype.setActivePlane = function(plane) {
-	  if (!plane) {
-	    throw new Error('must specify a plane');
-	  }
-
-	  if (typeof plane === 'string') {
-	    plane = this.getPlane(plane);
-	  }
 
-	  // hide previous Plane
-	  if (this._activePlane) {
-	    classes$1(this._activePlane.layer).add(HIDDEN_MARKER);
-	  }
+	Canvas.prototype._removeLayer = function(name) {
 
-	  this._activePlane = plane;
+	  var layer = this._layers[name];
 
-	  // show current Plane
-	  classes$1(plane.layer).remove(HIDDEN_MARKER);
+	  if (layer) {
+	    delete this._layers[name];
 
-	  if (plane.rootElement) {
-	    this._elementRegistry.updateGraphics(plane.rootElement, this._svg, true);
+	    remove$2(layer.group);
 	  }
-
-	  this._eventBus.fire('plane.set', { plane: plane });
-
-	  return plane;
 	};
 
 	/**
-	 * Returns the currently active layer
+	 * Returns the currently active layer. Can be null.
 	 *
-	 * @returns {SVGElement}
+	 * @returns {SVGElement|null}
 	 */
-
 	Canvas.prototype.getActiveLayer = function() {
-	  return this.getActivePlane().layer;
-	};
+	  var plane = this._findPlaneForRoot(this.getRootElement());
 
-	/**
-	 * Returns the currently active plane.
-	 *
-	 * @return {Object} plane descriptor with { layer, rootElement, name }
-	 */
-	Canvas.prototype.getActivePlane = function() {
-	  var plane = this._activePlane;
 	  if (!plane) {
-	    plane = this.createPlane(BASE_LAYER);
-	    this.setActivePlane(BASE_LAYER);
+	    return null;
 	  }
 
-	  return plane;
+	  return plane.layer;
 	};
 
+
 	/**
 	 * Returns the plane which contains the given element.
 	 *
 	 * @param {string|djs.model.Base} element
 	 *
-	 * @return {Object} plane descriptor with { layer, rootElement, name }
+	 * @return {djs.model.Base} root for element
 	 */
-	Canvas.prototype.findPlane = function(element) {
+	Canvas.prototype.findRoot = function(element) {
 	  if (typeof element === 'string') {
 	    element = this._elementRegistry.get(element);
 	  }
 
-	  var root = findRoot(element);
+	  if (!element) {
+	    return;
+	  }
+
+	  var plane = this._findPlaneForRoot(
+	    findRoot(element)
+	  ) || {};
+
+	  return plane.rootElement;
+	};
+
+	/**
+	 * Return a list of all root elements on the diagram.
+	 *
+	 * @return {djs.model.Root[]}
+	 */
+	Canvas.prototype.getRootElements = function() {
+	  return this._planes.map(function(plane) {
+	    return plane.rootElement;
+	  });
+	};
 
+	Canvas.prototype._findPlaneForRoot = function(rootElement) {
 	  return find(this._planes, function(plane) {
-	    return plane.rootElement === root;
+	    return plane.rootElement === rootElement;
 	  });
 	};
 
+
 	/**
 	 * Returns the html element that encloses the
 	 * drawing canvas.
@@ -9251,95 +9376,205 @@
 	  }
 	};
 
+	/**
+	 * Returns the current root element.
+	 *
+	 * Supports two different modes for handling root elements:
+	 *
+	 * 1. if no root element has been added before, an implicit root will be added
+	 * and returned. This is used in applications that don't require explicit
+	 * root elements.
+	 *
+	 * 2. when root elements have been added before calling `getRootElement`,
+	 * root elements can be null. This is used for applications that want to manage
+	 * root elements themselves.
+	 *
+	 * @returns {Object|djs.model.Root|null} rootElement.
+	 */
 	Canvas.prototype.getRootElement = function() {
-	  var plane = this.getActivePlane();
+	  var rootElement = this._rootElement;
 
-	  return plane.rootElement;
+	  // can return null if root elements are present but none was set yet
+	  if (rootElement || this._planes.length) {
+	    return rootElement;
+	  }
+
+	  return this.setRootElement(this.addRootElement(null));
 	};
 
+	/**
+	 * Adds a given root element and returns it.
+	 *
+	 * @param {Object|djs.model.Root} rootElement
+	 *
+	 * @return {Object|djs.model.Root} rootElement
+	 */
 
+	Canvas.prototype.addRootElement = function(rootElement) {
+	  var idx = this._rootsIdx++;
 
-	// root element handling //////////////////////
+	  if (!rootElement) {
+	    rootElement = {
+	      id: '__implicitroot_' + idx,
+	      children: [],
+	      isImplicit: true
+	    };
+	  }
+
+	  var layerName = rootElement.layer = 'root-' + idx;
+
+	  this._ensureValid('root', rootElement);
+
+	  var layer = this.getLayer(layerName, PLANE_LAYER_INDEX);
+
+	  attr$1(layer, 'display', 'none');
+
+	  this._addRoot(rootElement, layer);
+
+	  this._planes.push({
+	    rootElement: rootElement,
+	    layer: layer
+	  });
+
+	  return rootElement;
+	};
 
 	/**
-	 * Sets a given element as the new root element for the canvas
-	 * and returns the new root element.
+	 * Removes a given rootElement and returns it.
 	 *
-	 * @param {Object|djs.model.Root} element
-	 * @param {boolean} [override] whether to override the current root element, if any
+	 * @param {djs.model.Root|String} rootElement
 	 *
-	 * @return {Object|djs.model.Root} new root element
+	 * @return {Object|djs.model.Root} rootElement
 	 */
-	Canvas.prototype.setRootElement = function(element, override) {
-	  var activePlane = this._activePlane;
+	Canvas.prototype.removeRootElement = function(rootElement) {
 
-	  if (activePlane) {
-	    return this.setRootElementForPlane(element, activePlane, override);
-	  } else {
-	    var basePlane = this.createPlane(BASE_LAYER, element);
+	  if (typeof rootElement === 'string') {
+	    rootElement = this._elementRegistry.get(rootElement);
+	  }
+
+	  var plane = this._findPlaneForRoot(rootElement);
+
+	  if (!plane) {
+	    return;
+	  }
+
+	  // hook up life-cycle events
+	  this._removeRoot(rootElement);
 
-	    this.setActivePlane(basePlane);
+	  // clean up layer
+	  this._removeLayer(rootElement.layer);
+
+	  // clean up plane
+	  this._planes = this._planes.filter(function(plane) {
+	    return plane.rootElement !== rootElement;
+	  });
 
-	    return basePlane.rootElement;
+	  // clean up active root
+	  if (this._rootElement === rootElement) {
+	    this._rootElement = null;
 	  }
+
+	  return rootElement;
 	};
 
 
+	// root element handling //////////////////////
+
 	/**
 	 * Sets a given element as the new root element for the canvas
 	 * and returns the new root element.
 	 *
-	 * @param {Object|djs.model.Root} element
-	 * @param {Object|djs.model.Root} plane
-	 * @param {boolean} [override] whether to override the current root element, if any
+	 * @param {Object|djs.model.Root} rootElement
 	 *
 	 * @return {Object|djs.model.Root} new root element
 	 */
-	Canvas.prototype.setRootElementForPlane = function(element, plane, override) {
+	Canvas.prototype.setRootElement = function(rootElement, override) {
 
-	  if (typeof plane === 'string') {
-	    plane = this.getPlane(plane);
+	  if (isDefined(override)) {
+	    throw new Error('override not supported');
 	  }
 
-	  if (element) {
-	    this._ensureValid('root', element);
+	  if (rootElement === this._rootElement) {
+	    return;
 	  }
 
-	  var currentRoot = plane.rootElement,
-	      elementRegistry = this._elementRegistry,
-	      eventBus = this._eventBus;
+	  var plane;
 
-	  if (currentRoot) {
-	    if (!override) {
-	      throw new Error('rootElement already set, need to specify override');
-	    }
+	  if (!rootElement) {
+	    throw new Error('rootElement required');
+	  }
 
-	    // simulate element remove event sequence
-	    eventBus.fire('root.remove', { element: currentRoot });
-	    eventBus.fire('root.removed', { element: currentRoot });
+	  plane = this._findPlaneForRoot(rootElement);
 
-	    elementRegistry.remove(currentRoot);
+	  // give set add semantics for backwards compatibility
+	  if (!plane) {
+	    rootElement = this.addRootElement(rootElement);
 	  }
 
-	  if (element) {
-	    var gfx = plane.layer;
+	  this._setRoot(rootElement);
+
+	  return rootElement;
+	};
+
+
+	Canvas.prototype._removeRoot = function(element) {
+	  var elementRegistry = this._elementRegistry,
+	      eventBus = this._eventBus;
+
+	  // simulate element remove event sequence
+	  eventBus.fire('root.remove', { element: element });
+	  eventBus.fire('root.removed', { element: element });
 
-	    // resemble element add event sequence
-	    eventBus.fire('root.add', { element: element });
+	  elementRegistry.remove(element);
+	};
+
+
+	Canvas.prototype._addRoot = function(element, gfx) {
+	  var elementRegistry = this._elementRegistry,
+	      eventBus = this._eventBus;
+
+	  // resemble element add event sequence
+	  eventBus.fire('root.add', { element: element });
+
+	  elementRegistry.add(element, gfx);
+
+	  eventBus.fire('root.added', { element: element, gfx: gfx });
+	};
+
+
+	Canvas.prototype._setRoot = function(rootElement, layer) {
+
+	  var currentRoot = this._rootElement;
+
+	  var currentLayer;
+
+	  if (currentRoot) {
 
-	    elementRegistry.add(element, gfx);
+	    // un-associate previous root element <svg>
+	    this._elementRegistry.updateGraphics(currentRoot, null, true);
 
-	    eventBus.fire('root.added', { element: element, gfx: gfx });
+	    // hide previous layer
+	    currentLayer = this._findPlaneForRoot(currentRoot).layer;
 
-	    // associate SVG with root element when active
-	    if (plane === this._activePlane) {
-	      this._elementRegistry.updateGraphics(element, this._svg, true);
+	    attr$1(currentLayer, 'display', 'none');
+	  }
+
+	  if (rootElement) {
+
+	    if (!layer) {
+	      layer = this._findPlaneForRoot(rootElement).layer;
 	    }
+
+	    // associate element with <svg>
+	    this._elementRegistry.updateGraphics(rootElement, this._svg, true);
+
+	    // show root layer
+	    attr$1(layer, 'display', null);
 	  }
 
-	  plane.rootElement = element;
+	  this._rootElement = rootElement;
 
-	  return element;
+	  this._eventBus.fire('root.set', { element: rootElement });
 	};
 
 	// add functionality //////////////////////
@@ -9350,7 +9585,7 @@
 	  }
 
 	  if (this._elementRegistry.get(element.id)) {
-	    throw new Error('element with id ' + element.id + ' already exists');
+	    throw new Error('element <' + element.id + '> already exists');
 	  }
 
 	  var requiredAttrs = REQUIRED_MODEL_ATTRS[type];
@@ -9640,6 +9875,7 @@
 	      innerBox,
 	      outerBox = this.getSize(),
 	      matrix,
+	      activeLayer,
 	      transform,
 	      scale,
 	      x, y;
@@ -9647,9 +9883,11 @@
 	  if (!box) {
 
 	    // compute the inner box based on the
-	    // diagrams default layer. This allows us to exclude
+	    // diagrams active layer. This allows us to exclude
 	    // external components, such as overlays
-	    innerBox = this.getDefaultLayer().getBBox();
+
+	    activeLayer = this._rootElement ? this.getActiveLayer() : null;
+	    innerBox = activeLayer && activeLayer.getBBox() || {};
 
 	    transform = transform$1(viewport);
 	    matrix = transform ? transform.matrix : createMatrix();
@@ -9665,10 +9903,10 @@
 	      height: outerBox.height / scale,
 	      scale: scale,
 	      inner: {
-	        width: innerBox.width,
-	        height: innerBox.height,
-	        x: innerBox.x,
-	        y: innerBox.y
+	        width: innerBox.width || 0,
+	        height: innerBox.height || 0,
+	        x: innerBox.x || 0,
+	        y: innerBox.y || 0
 	      },
 	      outer: outerBox
 	    };
@@ -9721,17 +9959,22 @@
 	 * 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;
 
-	  // switch to correct Plane
-	  var targetPlane = this.findPlane(element);
-	  if (targetPlane !== this._activePlane) {
-	    this.setActivePlane(targetPlane);
+	  if (typeof element === 'string') {
+	    element = this._elementRegistry.get(element);
+	  }
+
+	  // set to correct rootElement
+	  var rootElement = this.findRoot(element);
+
+	  if (rootElement !== this.getRootElement()) {
+	    this.setRootElement(rootElement);
 	  }
 
 	  if (!padding) {
@@ -10094,7 +10337,9 @@
 	    container.gfx = gfx;
 	  }
 
-	  attr$1(gfx, ELEMENT_ID, id);
+	  if (gfx) {
+	    attr$1(gfx, ELEMENT_ID, id);
+	  }
 
 	  return gfx;
 	};
@@ -19871,18 +20116,29 @@
 
 	    var walker = new BpmnTreeWalker(visitor, translate);
 
+
+	    bpmnDiagram = bpmnDiagram || (definitions.diagrams && definitions.diagrams[0]);
+
+	    var diagramsToImport = getDiagramsToImport(definitions, bpmnDiagram);
+
+	    if (!diagramsToImport) {
+	      throw new Error(translate('no diagram to display'));
+	    }
+
 	    // traverse BPMN 2.0 document model,
 	    // starting at definitions
-	    if (!bpmnDiagram && definitions.diagrams) {
-	      for (var i = 0; i < definitions.diagrams.length; i++) {
-	        walker.handleDefinitions(definitions, definitions.diagrams[i]);
-	      }
-	    } else {
-	      walker.handleDefinitions(definitions, bpmnDiagram);
-	    }
+	    forEach(diagramsToImport, function(diagram) {
+	      walker.handleDefinitions(definitions, diagram);
+	    });
 
-	    var mainDiagram = bpmnDiagram || definitions.diagrams[0];
-	    canvas.setActivePlane(mainDiagram.plane.bpmnElement.id);
+	    var rootId = bpmnDiagram.plane.bpmnElement.id;
+
+	    // we do need to account for different ways we create root elements
+	    // each nested imported <root> do have the `_plane` suffix, while
+	    // the root <root> is found under the business object ID
+	    canvas.setRootElement(
+	      canvas.findRoot(rootId + '_plane') || canvas.findRoot(rootId)
+	    );
 	  }
 
 	  return new Promise(function(resolve, reject) {
@@ -19910,6 +20166,107 @@
 	  });
 	}
 
+	/**
+	 * Returns all diagrams in the same hirarchy as the requested diagram.
+	 * Includes all parent and sub process diagrams.
+	 *
+	 * @param {Array} definitions
+	 * @param {Object} bpmnDiagram
+	 *
+	 * @returns {Array<Object>}
+	 */
+	function getDiagramsToImport(definitions, bpmnDiagram) {
+	  if (!bpmnDiagram) {
+	    return;
+	  }
+
+	  var bpmnElement = bpmnDiagram.plane.bpmnElement,
+	      rootElement = bpmnElement;
+
+	  if (!is$1(bpmnElement, 'bpmn:Process') && !is$1(bpmnElement, 'bpmn:Collaboration')) {
+	    rootElement = findRootProcess(bpmnElement);
+	  }
+
+	  // in case the process is part of a collaboration, the plane references the
+	  // collaboration, not the process
+	  var collaboration;
+
+	  if (is$1(rootElement, 'bpmn:Collaboration')) {
+	    collaboration = rootElement;
+	  } else {
+	    collaboration = find(definitions.rootElements, function(element) {
+	      if (!is$1(element, 'bpmn:Collaboration')) {
+	        return;
+	      }
+
+	      return find(element.participants, function(participant) {
+	        return participant.processRef === rootElement;
+	      });
+	    });
+	  }
+
+	  var rootElements = [ rootElement ];
+
+	  // all collaboration processes can contain sub-diagrams
+	  if (collaboration) {
+	    rootElements = map$1(collaboration.participants, function(participant) {
+	      return participant.processRef;
+	    });
+
+	    rootElements.push(collaboration);
+	  }
+
+	  var allChildren = selfAndAllFlowElements(rootElements);
+
+	  // if we have multiple diagrams referencing the same element, we
+	  // use the first in the file
+	  var diagramsToImport = [ bpmnDiagram ];
+	  var handledElements = [ bpmnElement ];
+
+	  forEach(definitions.diagrams, function(diagram) {
+	    var businessObject = diagram.plane.bpmnElement;
+
+	    if (
+	      allChildren.indexOf(businessObject) !== -1 &&
+	      handledElements.indexOf(businessObject) === -1
+	    ) {
+	      diagramsToImport.push(diagram);
+	      handledElements.push(businessObject);
+	    }
+	  });
+
+
+	  return diagramsToImport;
+	}
+
+	function selfAndAllFlowElements(elements) {
+	  var result = [];
+
+	  forEach(elements, function(element) {
+	    if (!element) {
+	      return;
+	    }
+
+	    result.push(element);
+
+	    result = result.concat(selfAndAllFlowElements(element.flowElements));
+	  });
+
+	  return result;
+	}
+
+	function findRootProcess(element) {
+	  var parent = element;
+
+	  while (parent) {
+	    if (is$1(parent, 'bpmn:Process')) {
+	      return parent;
+	    }
+
+	    parent = parent.$parent;
+	  }
+	}
+
 	/**
 	 * This file must not be changed or exchanged.
 	 *
@@ -20400,7 +20757,7 @@
 	    try {
 	      var canvas = self.get('canvas');
 
-	      var contentNode = canvas.getDefaultLayer(),
+	      var contentNode = canvas.getActiveLayer(),
 	          defsNode = query('defs', canvas._svg);
 
 	      var contents = innerSVG(contentNode),
@@ -20782,7 +21139,7 @@
 	  TranslateModule,
 	  SelectionModule,
 	  OverlaysModule,
-	  SubprocessNavigationModule
+	  DrilldownModdule
 	];
 
 	// default moddle extensions the viewer is composed of