bpmn-js 9.0.0-subprocesses.3 → 9.0.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v9.0.0-subprocesses.3
+ * bpmn-js - bpmn-modeler v9.0.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-11-19
+ * Date: 2022-02-18
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -564,7 +564,7 @@
 	 *
 	 * const matcher = matchPattern({ id: 1 });
 	 *
-	 * var element = find(elements, matcher);
+	 * let element = find(elements, matcher);
 	 *
 	 * @param  {Object} pattern
 	 *
@@ -600,8 +600,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
@@ -614,23 +617,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++) {
@@ -643,7 +662,11 @@
 	    if (!timer) {
 	      schedule(timeout);
 	    }
-	  };
+	  }
+
+	  callback.flush = flush;
+	  callback.cancel = clear;
+	  return callback;
 	}
 	/**
 	 * Bind function against target <this>.
@@ -4364,7 +4387,6 @@
 	}
 
 	var BASE_LAYER = 'base';
-	var HIDDEN_MARKER = 'djs-element-hidden';
 
 	// render plane contents behind utility layers
 	var PLANE_LAYER_INDEX = 0;
@@ -4395,6 +4417,12 @@
 	  this._elementRegistry = elementRegistry;
 	  this._graphicsFactory = graphicsFactory;
 
+	  this._rootsIdx = 0;
+
+	  this._layers = {};
+	  this._planes = [];
+	  this._rootElement = null;
+
 	  this._init(config || {});
 	}
 
@@ -4432,9 +4460,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) {
@@ -4469,7 +4494,7 @@
 	    'shape.removed',
 	    'connection.removed',
 	    'elements.changed',
-	    'plane.set'
+	    'root.set'
 	  ], function() {
 	    delete this._cachedViewbox;
 	  }, this);
@@ -4494,7 +4519,7 @@
 	  delete this._container;
 	  delete this._layers;
 	  delete this._planes;
-	  delete this._activePlane;
+	  delete this._rootElement;
 	  delete this._viewport;
 	};
 
@@ -4509,15 +4534,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;
@@ -4598,140 +4623,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');
-	  }
-
-	  return this._planes[name];
-	};
-
-	/**
-	 * 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, PLANE_LAYER_INDEX);
-	  classes(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(this._activePlane.layer).add(HIDDEN_MARKER);
-	  }
+	Canvas.prototype._removeLayer = function(name) {
 
-	  this._activePlane = plane;
+	  var layer = this._layers[name];
 
-	  // show current Plane
-	  classes(plane.layer).remove(HIDDEN_MARKER);
+	  if (layer) {
+	    delete this._layers[name];
 
-	  if (plane.rootElement) {
-	    this._elementRegistry.updateGraphics(plane.rootElement, this._svg, true);
+	    remove$1(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.
@@ -4852,95 +4812,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++;
 
+	  if (!rootElement) {
+	    rootElement = {
+	      id: '__implicitroot_' + idx,
+	      children: [],
+	      isImplicit: true
+	    };
+	  }
 
-	// root element handling //////////////////////
+	  var layerName = rootElement.layer = 'root-' + idx;
+
+	  this._ensureValid('root', rootElement);
+
+	  var layer = this.getLayer(layerName, PLANE_LAYER_INDEX);
+
+	  attr(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);
 
-	    return basePlane.rootElement;
+	  // clean up plane
+	  this._planes = this._planes.filter(function(plane) {
+	    return plane.rootElement !== 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;
+	};
+
 
-	    // resemble element add event sequence
-	    eventBus.fire('root.add', { element: element });
+	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 });
+
+	  elementRegistry.remove(element);
+	};
+
+
+	Canvas.prototype._addRoot = function(element, gfx) {
+	  var elementRegistry = this._elementRegistry,
+	      eventBus = this._eventBus;
 
-	    elementRegistry.add(element, gfx);
+	  // 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) {
 
-	    eventBus.fire('root.added', { element: element, gfx: gfx });
+	    // un-associate previous root element <svg>
+	    this._elementRegistry.updateGraphics(currentRoot, null, true);
 
-	    // associate SVG with root element when active
-	    if (plane === this._activePlane) {
-	      this._elementRegistry.updateGraphics(element, this._svg, true);
+	    // hide previous layer
+	    currentLayer = this._findPlaneForRoot(currentRoot).layer;
+
+	    attr(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(layer, 'display', null);
 	  }
 
-	  plane.rootElement = element;
+	  this._rootElement = rootElement;
 
-	  return element;
+	  this._eventBus.fire('root.set', { element: rootElement });
 	};
 
 	// add functionality //////////////////////
@@ -4951,7 +5021,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];
@@ -5241,6 +5311,7 @@
 	      innerBox,
 	      outerBox = this.getSize(),
 	      matrix,
+	      activeLayer,
 	      transform,
 	      scale,
 	      x, y;
@@ -5248,10 +5319,11 @@
 	  if (!box) {
 
 	    // compute the inner box based on the
-	    // diagrams active plane. This allows us to exclude
+	    // diagrams active layer. This allows us to exclude
 	    // external components, such as overlays
 
-	    innerBox = (this._activePlane && this._activePlane.layer.getBBox()) || {};
+	    activeLayer = this._rootElement ? this.getActiveLayer() : null;
+	    innerBox = activeLayer && activeLayer.getBBox() || {};
 
 	    transform = transform$1(viewport);
 	    matrix = transform ? transform.matrix : createMatrix();
@@ -5334,10 +5406,11 @@
 	    element = this._elementRegistry.get(element);
 	  }
 
-	  // switch to correct Plane
-	  var targetPlane = this.findPlane(element);
-	  if (targetPlane !== this._activePlane) {
-	    this.setActivePlane(targetPlane);
+	  // set to correct rootElement
+	  var rootElement = this.findRoot(element);
+
+	  if (rootElement !== this.getRootElement()) {
+	    this.setRootElement(rootElement);
 	  }
 
 	  if (!padding) {
@@ -5700,7 +5773,9 @@
 	    container.gfx = gfx;
 	  }
 
-	  attr(gfx, ELEMENT_ID, id);
+	  if (gfx) {
+	    attr(gfx, ELEMENT_ID, id);
+	  }
 
 	  return gfx;
 	};
@@ -15466,6 +15541,57 @@
 	  };
 	}
 
+	/**
+	 * Is an element of the given BPMN type?
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 * @param  {string} type
+	 *
+	 * @return {boolean}
+	 */
+	function is$1(element, type) {
+	  var bo = getBusinessObject(element);
+
+	  return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
+	}
+
+
+	/**
+	 * Return true if element has any of the given types.
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<string>} types
+	 *
+	 * @return {boolean}
+	 */
+	function isAny(element, types) {
+	  return some(types, function(t) {
+	    return is$1(element, t);
+	  });
+	}
+
+	/**
+	 * Return the business object for a given element.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {ModdleElement}
+	 */
+	function getBusinessObject(element) {
+	  return (element && element.businessObject) || element;
+	}
+
+	/**
+	 * Return the di object for a given element.
+	 *
+	 * @param  {djs.model.Base} element
+	 *
+	 * @return {ModdleElement}
+	 */
+	function getDi(element) {
+	  return element && element.di;
+	}
+
 	/**
 	 * The importBpmnDiagram result.
 	 *
@@ -15530,18 +15656,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 rootId = bpmnDiagram.plane.bpmnElement.id;
 
-	    var mainDiagram = bpmnDiagram || definitions.diagrams[0];
-	    canvas.setActivePlane(mainDiagram.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) {
@@ -15569,6 +15706,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.
 	 *
@@ -16059,7 +16297,7 @@
 	    try {
 	      var canvas = self.get('canvas');
 
-	      var contentNode = canvas.getDefaultLayer(),
+	      var contentNode = canvas.getActiveLayer(),
 	          defsNode = query('defs', canvas._svg);
 
 	      var contents = innerSVG(contentNode),
@@ -16450,43 +16688,6 @@
 	  }
 	};
 
-	/**
-	 * Is an element of the given BPMN type?
-	 *
-	 * @param  {djs.model.Base|ModdleElement} element
-	 * @param  {string} type
-	 *
-	 * @return {boolean}
-	 */
-	function is$1(element, type) {
-	  var bo = getBusinessObject(element);
-
-	  return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
-	}
-
-
-	/**
-	 * Return the business object for a given element.
-	 *
-	 * @param  {djs.model.Base|ModdleElement} element
-	 *
-	 * @return {ModdleElement}
-	 */
-	function getBusinessObject(element) {
-	  return (element && element.businessObject) || element;
-	}
-
-	/**
-	 * Return the di object for a given element.
-	 *
-	 * @param  {djs.model.Base} element
-	 *
-	 * @return {ModdleElement}
-	 */
-	function getDi(element) {
-	  return element && element.di;
-	}
-
 	function isExpanded(element, di) {
 
 	  if (is$1(element, 'bpmn:CallActivity')) {
@@ -17076,16 +17277,16 @@
 	    return drawPath(parentGfx, path, assign({ 'data-marker': type }, attrs));
 	  }
 
+	  function renderer(type) {
+	    return handlers[type];
+	  }
+
 	  function as(type) {
 	    return function(parentGfx, element) {
-	      return handlers[type](parentGfx, element);
+	      return renderer(type)(parentGfx, element);
 	    };
 	  }
 
-	  function renderer(type) {
-	    return handlers[type];
-	  }
-
 	  function renderEventContent(element, parentGfx) {
 
 	    var event = getSemantic(element);
@@ -18566,6 +18767,7 @@
 	  // extension API, use at your own risk
 	  this._drawPath = drawPath;
 
+	  this._renderer = renderer;
 	}
 
 
@@ -18587,7 +18789,7 @@
 
 	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);
@@ -18595,7 +18797,7 @@
 
 	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);
@@ -19754,6 +19956,13 @@
 	  return element && !!element.labelTarget;
 	}
 
+	/**
+	 * @param {ModdleElement} semantic
+	 * @param {ModdleElement} di
+	 * @param {Object} [attrs=null]
+	 *
+	 * @return {Object}
+	 */
 	function elementData(semantic, di, attrs) {
 	  return assign({
 	    id: semantic.id,
@@ -19833,15 +20042,14 @@
 	  // invisible root element (process, subprocess or collaboration)
 	  if (is$1(di, 'bpmndi:BPMNPlane')) {
 
-	    // add a virtual element (not being drawn)
-	    element = this._elementFactory.createRoot(elementData(semantic, di));
+	    var attrs = is$1(semantic, 'bpmn:SubProcess')
+	      ? { id: semantic.id + '_plane' }
+	      : {};
 
-	    // for subprocesses, the id is already defined on the collapsed shape
-	    if (is$1(semantic, 'bpmn:SubProcess')) {
-	      element.id = element.id + '_plane';
-	    }
+	    // 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
@@ -19877,7 +20085,7 @@
 
 	      // check whether data store is inside our outside of its semantic parent
 	      if (!isPointInsideBBox$1(parentElement, getMid(bounds))) {
-	        parentElement = this._canvas.findPlane(parentElement).rootElement;
+	        parentElement = this._canvas.findRoot(parentElement);
 	      }
 	    }
 
@@ -19905,7 +20113,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)
@@ -20171,7 +20379,7 @@
 	  return isPrimaryButton(event) || isAuxiliaryButton(event);
 	}
 
-	var LOW_PRIORITY$m = 500;
+	var LOW_PRIORITY$o = 500;
 
 
 	/**
@@ -20366,7 +20574,7 @@
 	  eventBus.on([
 	    'shape.changed',
 	    'connection.changed'
-	  ], LOW_PRIORITY$m, function(event) {
+	  ], LOW_PRIORITY$o, function(event) {
 
 	    var element = event.element,
 	        gfx = event.gfx;
@@ -20374,7 +20582,7 @@
 	    eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
 	  });
 
-	  eventBus.on('interactionEvents.createHit', LOW_PRIORITY$m, function(event) {
+	  eventBus.on('interactionEvents.createHit', LOW_PRIORITY$o, function(event) {
 	    var element = event.element,
 	        gfx = event.gfx;
 
@@ -20648,7 +20856,7 @@
 	  interactionEvents: [ 'type', InteractionEvents ]
 	};
 
-	var LOW_PRIORITY$l = 500;
+	var LOW_PRIORITY$n = 500;
 
 
 	/**
@@ -20686,7 +20894,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$l, function(event) {
+	  eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$n, function(event) {
 	    var element = event.element,
 	        gfx = event.gfx;
 
@@ -20783,7 +20991,7 @@
 	    self.deselect(element);
 	  });
 
-	  eventBus.on([ 'diagram.clear', 'plane.set' ], function(e) {
+	  eventBus.on([ 'diagram.clear', 'root.set' ], function(e) {
 	    self.select(null);
 	  });
 	}
@@ -20836,10 +21044,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
@@ -21080,7 +21290,7 @@
 	// document wide unique overlay ids
 	var ids$1 = new IdGenerator('ov');
 
-	var LOW_PRIORITY$k = 500;
+	var LOW_PRIORITY$m = 500;
 
 
 	/**
@@ -21310,8 +21520,7 @@
 	 *
 	 * @see Overlays#get for filter options.
 	 *
-	 * @param {string} [id]
-	 * @param {Object} [filter]
+	 * @param {string|object} [filter]
 	 */
 	Overlays.prototype.remove = function(filter) {
 
@@ -21427,6 +21636,7 @@
 	  }
 
 	  setPosition$1(htmlContainer, left || 0, top || 0);
+	  this._updateOverlayVisibilty(overlay, this._canvas.viewbox());
 	};
 
 
@@ -21510,12 +21720,10 @@
 	    classes$1(htmlContainer).add('djs-overlay-' + overlay.type);
 	  }
 
-	  var plane = this._canvas.findPlane(element);
-	  var activePlane = this._canvas.getActivePlane();
-	  overlay.plane = plane;
-	  if (plane !== activePlane) {
-	    setVisible$1(htmlContainer, false);
-	  }
+	  var elementRoot = this._canvas.findRoot(element);
+	  var activeRoot = this._canvas.getRootElement();
+
+	  setVisible$1(htmlContainer, elementRoot === activeRoot);
 
 	  overlay.htmlContainer = htmlContainer;
 
@@ -21531,14 +21739,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 (
@@ -21649,7 +21857,7 @@
 
 	  // move integration
 
-	  eventBus.on('element.changed', LOW_PRIORITY$k, function(e) {
+	  eventBus.on('element.changed', LOW_PRIORITY$m, function(e) {
 	    var element = e.element;
 
 	    var container = self._getOverlayContainer(element, true);
@@ -21674,10 +21882,8 @@
 	  });
 
 
-	  eventBus.on('plane.set', function(e) {
-	    forEach(self._overlays, function(el) {
-	      setVisible$1(el.htmlContainer, el.plane === e.plane);
-	    });
+	  eventBus.on('root.set', function() {
+	    self._updateOverlaysVisibilty(self._canvas.viewbox());
 	  });
 
 	  // clear overlays with diagram
@@ -21790,6 +21996,181 @@
 	  changeSupport: [ 'type', ChangeSupport ]
 	};
 
+	var DEFAULT_PRIORITY$4 = 1000;
+
+	/**
+	 * 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;
+	}
+
+	CommandInterceptor.$inject = [ 'eventBus' ];
+
+	function unwrapEvent(fn, that) {
+	  return function(event) {
+	    return fn.call(that || null, event.context, event.command, event);
+	  };
+	}
+
+	/**
+	 * 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) {
+
+	  if (isFunction(hook) || isNumber(hook)) {
+	    that = unwrap;
+	    unwrap = handlerFn;
+	    handlerFn = priority;
+	    priority = hook;
+	    hook = null;
+	  }
+
+	  if (isFunction(priority)) {
+	    that = unwrap;
+	    unwrap = handlerFn;
+	    handlerFn = priority;
+	    priority = DEFAULT_PRIORITY$4;
+	  }
+
+	  if (isObject(unwrap)) {
+	    that = unwrap;
+	    unwrap = false;
+	  }
+
+	  if (!isFunction(handlerFn)) {
+	    throw new Error('handlerFn must be a function');
+	  }
+
+	  if (!isArray$2(events)) {
+	    events = [ events ];
+	  }
+
+	  var eventBus = this._eventBus;
+
+	  forEach(events, function(event) {
+
+	    // concat commandStack(.event)?(.hook)?
+	    var fullEvent = [ 'commandStack', event, hook ].filter(function(e) { return e; }).join('.');
+
+	    eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
+	  });
+	};
+
+
+	var hooks = [
+	  'canExecute',
+	  'preExecute',
+	  'preExecuted',
+	  'execute',
+	  'executed',
+	  'postExecute',
+	  'postExecuted',
+	  'revert',
+	  'reverted'
+	];
+
+	/*
+	 * Install hook shortcuts
+	 *
+	 * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
+	 * which will in term forward to CommandInterceptor#on.
+	 */
+	forEach(hooks, function(hook) {
+
+	  /**
+	   * {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) {
+
+	    if (isFunction(events) || isNumber(events)) {
+	      that = unwrap;
+	      unwrap = handlerFn;
+	      handlerFn = priority;
+	      priority = events;
+	      events = null;
+	    }
+
+	    this.on(events, hook, priority, handlerFn, unwrap, that);
+	  };
+	});
+
+	/**
+	 * 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) {
+
+	  injector.invoke(CommandInterceptor, this);
+
+	  this.executed(function(event) {
+	    var context = event.context;
+
+	    if (context.rootElement) {
+	      canvas.setRootElement(context.rootElement);
+	    } else {
+	      context.rootElement = canvas.getRootElement();
+	    }
+	  });
+
+	  this.revert(function(event) {
+	    var context = event.context;
+
+	    if (context.rootElement) {
+	      canvas.setRootElement(context.rootElement);
+	    }
+	  });
+	}
+
+	inherits$1(RootElementsBehavior, CommandInterceptor);
+
+	RootElementsBehavior.$inject = [ 'canvas', 'injector'];
+
+	var RootElementsModule = {
+	  __init__: [ 'rootElementsBehavior' ],
+	  rootElementsBehavior: [ 'type', RootElementsBehavior ]
+	};
+
 	var css_escape = {exports: {}};
 
 	/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
@@ -21914,39 +22295,135 @@
 	  });
 	}
 
-	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 planeSuffix = '_plane';
+
+	/**
+	 * Get primary shape ID for a plane.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {String}
+	 */
+	function getShapeIdFromPlane(element) {
+	  var id = element.id;
+
+	  return removePlaneSuffix(id);
+	}
+
+	/**
+	 * 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);
+	  }
+
+	  return id;
+	}
+
+	/**
+	 * Get plane ID for primary shape ID.
+	 *
+	 * @param {String} id
+	 *
+	 * @returns {String}
+	 */
+	function toPlaneId(id) {
+	  return addPlaneSuffix(id);
+	}
+
+	/**
+	 * Check wether element is plane.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {Boolean}
+	 */
+	function isPlane(element) {
+	  var di = getDi(element);
+
+	  return is$1(di, 'bpmndi:BPMNPlane');
+	}
+
+	function addPlaneSuffix(id) {
+	  return id + planeSuffix;
+	}
+
+	function removePlaneSuffix(id) {
+	  return id.replace(new RegExp(planeSuffix + '$'), '');
+	}
 
 	var OPEN_CLASS = 'bjs-breadcrumbs-shown';
 
+
 	/**
-	 * Adds Overlays that allow switching planes on collapsed subprocesses.
+	 * Adds overlays that allow switching planes on collapsed subprocesses.
 	 *
 	 * @param {eventBus} eventBus
 	 * @param {elementRegistry} elementRegistry
 	 * @param {overlays} overlays
 	 * @param {canvas} canvas
 	 */
-	function DrilldownOverlays(eventBus, elementRegistry, overlays, canvas) {
+	function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
 	  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
 	  var container = canvas.getContainer();
 	  var containerClasses = classes$1(container);
 	  container.appendChild(breadcrumbs);
 
-	  function updateBreadcrumbs(plane) {
-	    var subProcess = elementRegistry.get(plane.name);
-	    var parents = getParentChain(subProcess);
+	  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 path = parents.map(function(el) {
-	      var title = escapeHTML(el.name || el.id);
+	    var isPresent = find(boParents, function(el) {
+	      return el === bo;
+	    });
+
+	    if (!isPresent) {
+	      return;
+	    }
+
+	    updateBreadcrumbs();
+	  });
+
+	  /**
+	   * 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;
@@ -21963,50 +22440,26 @@
 	    });
 	  }
 
-	  eventBus.on('plane.set', function(event) {
-	    var plane = event.plane;
-
-	    updateBreadcrumbs(plane);
+	  eventBus.on('root.set', function(event) {
+	    updateBreadcrumbs(event.element);
 	  });
 
-	  var createOverlay = function(element) {
-	    var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
-
-	    html.addEventListener('click', function() {
-	      canvas.setActivePlane(element.id);
-	    });
-
-	    overlays.add(element, {
-	      position: {
-	        bottom: -7,
-	        right: -8
-	      },
-	      html: html
-	    });
-	  };
-
-	  var addOverlays = function(elements) {
-	    elements.forEach(function(element) {
-	      if (is$1(element, 'bpmn:SubProcess')
-	          && element.collapsed
-	          && canvas.getPlane(element.id)) {
-	        createOverlay(element);
-	      }
-	    });
-	  };
-
-	  eventBus.on('import.done', function() {
-	    addOverlays(elementRegistry.filter(function(el) {
-	      return is$1(el, 'bpmn:SubProcess');
-	    }));
-	  });
 	}
 
-	DrilldownOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+	DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
 
 
-	// helpers
-	var getParentChain = function(child) {
+	// 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 = [];
@@ -22018,29 +22471,40 @@
 	  }
 
 	  return parents.reverse();
-	};
+	}
 
 	/**
-	 * Move collapsed subprocesses into view when drilling down. Zoom and scroll
-	 * are saved in a session.
+	 * 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) {
-	  var currentPlane = 'base';
-	  var positionMap = {};
 
-	  eventBus.on('plane.set', function(event) {
+	  var currentRoot = null;
+	  var positionMap = new Map();
+
+	  eventBus.on('root.set', function(event) {
+	    var newRoot = event.element;
 	    var currentViewbox = canvas.viewbox();
-	    positionMap[currentPlane] = {
+	    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;
+	    }
 
-	    var planeId = event.plane.name;
-	    var storedViewbox = positionMap[planeId] || { x: 0, y: 0, zoom: 1 };
+	    storedViewbox = storedViewbox || { x: 0, y: 0, zoom: 1 };
 
 	    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
 	        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
@@ -22055,14 +22519,78 @@
 	    if (storedViewbox.zoom !== currentViewbox.scale) {
 	      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
 	    }
+	  });
 
-	    currentPlane = planeId;
+	  eventBus.on('diagram.clear', function() {
+	    positionMap.clear();
+	    currentRoot = null;
 	  });
+
 	}
 
 	DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];
 
-	var DEFAULT_POSITION = {
+
+	/**
+	 * 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 ]);
+	    }
+	  };
+
+	  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;
+
+	        break;
+	      }
+	    }
+
+	    if (idx !== -1) {
+	      this._entries.splice(idx, 1);
+	    }
+	  };
+	}
+
+	var DEFAULT_POSITION$1 = {
 	  x: 180,
 	  y: 160
 	};
@@ -22143,6 +22671,15 @@
 
 	  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;
@@ -22158,12 +22695,6 @@
 	    }
 
 	    var diagram = self._processToDiagramMap[parent.id];
-	    if (!diagram) {
-	      diagram = self.createDiagram(parent);
-	      self._processToDiagramMap[parent.id] = diagram;
-	      newDiagrams.push(diagram);
-	    }
-
 	    self.moveToDiPlane(diElement, diagram.plane);
 	  });
 
@@ -22177,8 +22708,8 @@
 	  var planeBounds = getPlaneBounds(plane);
 
 	  var offset = {
-	    x: planeBounds.x - DEFAULT_POSITION.x,
-	    y: planeBounds.y - DEFAULT_POSITION.y
+	    x: planeBounds.x - DEFAULT_POSITION$1.x,
+	    y: planeBounds.y - DEFAULT_POSITION$1.y
 	  };
 
 	  elements.forEach(function(diElement) {
@@ -22252,11 +22783,187 @@
 	  return asBounds(planeTrbl);
 	}
 
+	var LOW_PRIORITY$l = 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$l, 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$l, 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.executed(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY$l,
+	    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);
+	      }
+
+	      self.updateDrilldownOverlay(oldParent);
+	      self.updateDrilldownOverlay(newParent);
+	      self.updateDrilldownOverlay(shape);
+	    }, true);
+
+
+	  this.reverted(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY$l,
+	    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);
+	      }
+
+	      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$1(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;
+
+	  var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
+	  if (existingOverlays.length) {
+	    this.removeOverlay(element);
+	  }
+
+	  var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+
+	  button.addEventListener('click', function() {
+	    canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
+	  });
+
+	  overlays.add(element, 'drilldown', {
+	    position: {
+	      bottom: -7,
+	      right: -8
+	    },
+	    html: button
+	  });
+
+	  this.updateOverlayVisibility(element);
+	};
+
+	DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
+	  var overlays = this._overlays;
+
+	  overlays.remove({
+	    element: element,
+	    type: 'drilldown'
+	  });
+	};
+
+	DrilldownOverlayBehavior.$inject = [
+	  'canvas',
+	  'eventBus',
+	  'elementRegistry',
+	  'overlays'
+	];
+
 	var DrilldownModdule = {
-	  __depends__: [ OverlaysModule, ChangeSupportModule ],
-	  __init__: [ 'drilldownOverlays', 'drilldownCentering', 'subprocessCompatibility'],
-	  drilldownOverlays: [ 'type', DrilldownOverlays ],
+	  __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],
+	  __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility'],
+	  drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],
 	  drilldownCentering: [ 'type', DrilldownCentering ],
+	  drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],
 	  subprocessCompatibility: [ 'type', SubprocessCompatibility ]
 	};
 
@@ -22371,7 +23078,7 @@
 
 	var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
 
-	var DEFAULT_PRIORITY$4 = 1000;
+	var DEFAULT_PRIORITY$3 = 1000;
 
 	/**
 	 * A keyboard abstraction that may be activated and
@@ -22531,7 +23238,7 @@
 	  if (isFunction(priority)) {
 	    type = listener;
 	    listener = priority;
-	    priority = DEFAULT_PRIORITY$4;
+	    priority = DEFAULT_PRIORITY$3;
 	  }
 
 	  this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
@@ -22554,7 +23261,7 @@
 	  return target && (matchesSelector(target, 'input, textarea') || target.contentEditable === 'true');
 	}
 
-	var LOW_PRIORITY$j = 500;
+	var LOW_PRIORITY$k = 500;
 
 	var KEYCODE_C = 67;
 	var KEYCODE_V = 86;
@@ -22580,7 +23287,7 @@
 
 	  var self = this;
 
-	  eventBus.on('editorActions.init', LOW_PRIORITY$j, function(event) {
+	  eventBus.on('editorActions.init', LOW_PRIORITY$k, function(event) {
 
 	    var editorActions = event.editorActions;
 
@@ -26084,14 +26791,23 @@
 	  // the touch recognizer
 	  var recognizer;
 
-	  function handler(type) {
+	  function handler(type, buttonType) {
 
 	    return function(event) {
 
-	      interactionEvents.fire(type, event);
+	      var gfx = getGfx(event.target),
+	          element = gfx && elementRegistry.get(gfx);
+
+	      // translate into an actual mouse click event
+	      if (buttonType) {
+	        event.srcEvent.button = buttonType;
+	      }
+
+	      return interactionEvents.fire(type, event, element);
 	    };
 	  }
 
+
 	  function getGfx(target) {
 	    var node = closest(target, 'svg, .djs-element', true);
 	    return node;
@@ -26102,10 +26818,6 @@
 	    // touch recognizer
 	    recognizer = createTouchRecognizer(svg);
 
-	    recognizer.on('doubletap', handler('element.dblclick'));
-
-	    recognizer.on('tap', handler('element.click'));
-
 	    function startGrabCanvas(event) {
 
 	      var lx = 0, ly = 0;
@@ -26173,6 +26885,9 @@
 	      recognizer.on('pinchcancel', end);
 	    }
 
+	    recognizer.on('tap', handler('element.click'));
+	    recognizer.on('doubletap', handler('element.dblclick', 1));
+
 	    recognizer.on('panstart', startGrab);
 	    recognizer.on('press', startGrab);
 
@@ -26793,7 +27508,7 @@
 	  return true;
 	}
 
-	var LOW_PRIORITY$i = 100;
+	var LOW_PRIORITY$j = 100;
 
 
 	/**
@@ -26805,7 +27520,7 @@
 	 */
 	function AutoPlace$1(eventBus, modeling, canvas) {
 
-	  eventBus.on('autoPlace', LOW_PRIORITY$i, function(context) {
+	  eventBus.on('autoPlace', LOW_PRIORITY$j, function(context) {
 	    var shape = context.shape,
 	        source = context.source;
 
@@ -26910,21 +27625,6 @@
 	  autoPlaceSelectionBehavior: [ 'type', AutoPlaceSelectionBehavior ]
 	};
 
-	/**
-	 * Return true if element has any of the given types.
-	 *
-	 * @param {djs.model.Base} element
-	 * @param {Array<string>} types
-	 *
-	 * @return {boolean}
-	 */
-	function isAny(element, types) {
-	  return some(types, function(t) {
-	    return is$1(element, t);
-	  });
-	}
-
-
 	/**
 	 * Return the parent of the element with any of the given types.
 	 *
@@ -27093,142 +27793,6 @@
 	  bpmnAutoPlace: [ 'type', AutoPlace ]
 	};
 
-	var DEFAULT_PRIORITY$3 = 1000;
-
-	/**
-	 * 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;
-	}
-
-	CommandInterceptor.$inject = [ 'eventBus' ];
-
-	function unwrapEvent(fn, that) {
-	  return function(event) {
-	    return fn.call(that || null, event.context, event.command, event);
-	  };
-	}
-
-	/**
-	 * 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) {
-
-	  if (isFunction(hook) || isNumber(hook)) {
-	    that = unwrap;
-	    unwrap = handlerFn;
-	    handlerFn = priority;
-	    priority = hook;
-	    hook = null;
-	  }
-
-	  if (isFunction(priority)) {
-	    that = unwrap;
-	    unwrap = handlerFn;
-	    handlerFn = priority;
-	    priority = DEFAULT_PRIORITY$3;
-	  }
-
-	  if (isObject(unwrap)) {
-	    that = unwrap;
-	    unwrap = false;
-	  }
-
-	  if (!isFunction(handlerFn)) {
-	    throw new Error('handlerFn must be a function');
-	  }
-
-	  if (!isArray$2(events)) {
-	    events = [ events ];
-	  }
-
-	  var eventBus = this._eventBus;
-
-	  forEach(events, function(event) {
-
-	    // concat commandStack(.event)?(.hook)?
-	    var fullEvent = [ 'commandStack', event, hook ].filter(function(e) { return e; }).join('.');
-
-	    eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
-	  });
-	};
-
-
-	var hooks = [
-	  'canExecute',
-	  'preExecute',
-	  'preExecuted',
-	  'execute',
-	  'executed',
-	  'postExecute',
-	  'postExecuted',
-	  'revert',
-	  'reverted'
-	];
-
-	/*
-	 * Install hook shortcuts
-	 *
-	 * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
-	 * which will in term forward to CommandInterceptor#on.
-	 */
-	forEach(hooks, function(hook) {
-
-	  /**
-	   * {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) {
-
-	    if (isFunction(events) || isNumber(events)) {
-	      that = unwrap;
-	      unwrap = handlerFn;
-	      handlerFn = priority;
-	      priority = events;
-	      events = null;
-	    }
-
-	    this.on(events, hook, priority, handlerFn, unwrap, that);
-	  };
-	});
-
 	/**
 	 * An auto resize component that takes care of expanding a parent element
 	 * if child elements are created or moved close the parents edge.
@@ -27668,6 +28232,12 @@
 	 */
 	BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {
 
+	  // do not resize plane elements:
+	  // root elements, collapsed sub-processes
+	  if (is$1(target.di, 'bpmndi:BPMNPlane')) {
+	    return false;
+	  }
+
 	  if (!is$1(target, 'bpmn:Participant') && !is$1(target, 'bpmn:Lane') && !(is$1(target, 'bpmn:SubProcess'))) {
 	    return false;
 	  }
@@ -27694,7 +28264,7 @@
 	  bpmnAutoResizeProvider: [ 'type', BpmnAutoResizeProvider ]
 	};
 
-	var HIGH_PRIORITY$j = 1500;
+	var HIGH_PRIORITY$k = 1500;
 
 
 	/**
@@ -27762,7 +28332,7 @@
 	     */
 	    eventBus.on('drag.start', function(event) {
 
-	      eventBus.once('drag.move', HIGH_PRIORITY$j, function(event) {
+	      eventBus.once('drag.move', HIGH_PRIORITY$k, function(event) {
 
 	        ensureHover(event);
 
@@ -27793,7 +28363,7 @@
 	      hover = event.element;
 	    });
 
-	    eventBus.on('element.hover', HIGH_PRIORITY$j, function(event) {
+	    eventBus.on('element.hover', HIGH_PRIORITY$k, function(event) {
 
 	      // (3) am I on an element still?
 	      if (hover) {
@@ -29467,7 +30037,7 @@
 	    MARKER_CONNECT_UPDATING$1 = 'djs-updating',
 	    MARKER_ELEMENT_HIDDEN = 'djs-element-hidden';
 
-	var HIGH_PRIORITY$i = 1100;
+	var HIGH_PRIORITY$j = 1100;
 
 	/**
 	 * Preview connection while moving bendpoints.
@@ -29530,7 +30100,7 @@
 	  eventBus.on([
 	    'bendpoint.move.out',
 	    'bendpoint.move.cleanup'
-	  ], HIGH_PRIORITY$i, function(event) {
+	  ], HIGH_PRIORITY$j, function(event) {
 	    var context = event.context,
 	        hover = context.hover,
 	        target = context.target;
@@ -29616,7 +30186,7 @@
 	  eventBus.on([
 	    'bendpoint.move.end',
 	    'bendpoint.move.cancel'
-	  ], HIGH_PRIORITY$i, function(event) {
+	  ], HIGH_PRIORITY$j, function(event) {
 	    var context = event.context,
 	        connection = context.connection,
 	        draggerGfx = context.draggerGfx,
@@ -30547,8 +31117,8 @@
 	  return hover && source && hover === source && source !== target;
 	}
 
-	var HIGH_PRIORITY$h = 1100,
-	    LOW_PRIORITY$h = 900;
+	var HIGH_PRIORITY$i = 1100,
+	    LOW_PRIORITY$i = 900;
 
 	var MARKER_OK$3 = 'connect-ok',
 	    MARKER_NOT_OK$3 = 'connect-not-ok';
@@ -30592,7 +31162,7 @@
 	    });
 	  });
 
-	  eventBus.on('connect.hover', LOW_PRIORITY$h, function(event) {
+	  eventBus.on('connect.hover', LOW_PRIORITY$i, function(event) {
 	    var context = event.context,
 	        hover = event.hover,
 	        canExecute = context.canExecute;
@@ -30608,7 +31178,7 @@
 	  eventBus.on([
 	    'connect.out',
 	    'connect.cleanup'
-	  ], HIGH_PRIORITY$h, function(event) {
+	  ], HIGH_PRIORITY$i, function(event) {
 	    var hover = event.hover;
 
 	    if (hover) {
@@ -32160,7 +32730,7 @@
 
 	var PREFIX = 'create';
 
-	var HIGH_PRIORITY$g = 2000;
+	var HIGH_PRIORITY$h = 2000;
 
 
 	/**
@@ -32388,7 +32958,7 @@
 	  eventBus.on('create.init', function() {
 	    eventBus.on('elements.changed', cancel);
 
-	    eventBus.once([ 'create.cancel', 'create.end' ], HIGH_PRIORITY$g, function() {
+	    eventBus.once([ 'create.cancel', 'create.end' ], HIGH_PRIORITY$h, function() {
 	      eventBus.off('elements.changed', cancel);
 	    });
 	  });
@@ -32427,7 +32997,11 @@
 	      }
 	    });
 
-	    var bbox = getBBox(elements);
+	    var visibleElements = filter(elements, function(element) {
+	      return !element.hidden;
+	    });
+
+	    var bbox = getBBox(visibleElements);
 
 	    // center elements around cursor
 	    forEach(elements, function(element) {
@@ -32505,7 +33079,7 @@
 	  return !!element.labelTarget;
 	}
 
-	var LOW_PRIORITY$g = 750;
+	var LOW_PRIORITY$h = 750;
 
 
 	function CreatePreview(
@@ -32550,7 +33124,7 @@
 	    return dragGroup;
 	  }
 
-	  eventBus.on('create.move', LOW_PRIORITY$g, function(event) {
+	  eventBus.on('create.move', LOW_PRIORITY$h, function(event) {
 
 	    var hover = event.hover,
 	        context = event.context,
@@ -33298,6 +33872,14 @@
 	 * @param {Array<djs.model.Base>} context.elements
 	 */
 
+	/**
+	 * @typedef {Function} <copyPaste.createTree> listener
+	 *
+	 * @param {Object} context
+	 * @param {djs.model.Base} context.element
+	 * @param {Array<djs.model.Base>} context.children - Add children to be added to tree.
+	 */
+
 	/**
 	 * @typedef {Function} <copyPaste.elementsCopied> listener
 	 *
@@ -33766,7 +34348,19 @@
 
 	    addElementData(element, depth);
 
-	    return element.children;
+	    var children = [];
+
+	    if (element.children) {
+	      children = element.children.slice();
+	    }
+
+	    // allow others to add children to tree
+	    self._eventBus.fire('copyPaste.createTree', {
+	      element: element,
+	      children: children
+	    });
+
+	    return children;
 	  });
 
 	  elements = map$1(elementsData, function(elementData) {
@@ -33897,12 +34491,12 @@
 	  });
 	}
 
-	var LOW_PRIORITY$f = 750;
+	var LOW_PRIORITY$g = 750;
 
 
 	function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
 
-	  eventBus.on('copyPaste.copyElement', LOW_PRIORITY$f, function(context) {
+	  eventBus.on('copyPaste.copyElement', LOW_PRIORITY$g, function(context) {
 	    var descriptor = context.descriptor,
 	        element = context.element;
 
@@ -34006,6 +34600,7 @@
 	    );
 
 	    newDi = bpmnFactory.create(oldDi.$type);
+	    newDi.bpmnElement = newBusinessObject;
 
 	    descriptor.di = moddleCopy.copyElement(
 	      oldDi,
@@ -35644,7 +36239,7 @@
 	    return this._createEntries(element, DATA_OBJECT_REFERENCE);
 	  }
 
-	  if (is$1(businessObject, 'bpmn:DataStoreReference')) {
+	  if (is$1(businessObject, 'bpmn:DataStoreReference') && !is$1(element.parent, 'bpmn:Collaboration')) {
 	    return this._createEntries(element, DATA_STORE_REFERENCE);
 	  }
 
@@ -37709,7 +38304,7 @@
 	}
 
 	var LOWER_PRIORITY = 1200;
-	var LOW_PRIORITY$e = 800;
+	var LOW_PRIORITY$f = 800;
 
 	/**
 	 * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
@@ -37723,7 +38318,7 @@
 
 	  var self = this;
 
-	  eventBus.on('diagram.init', LOW_PRIORITY$e, function() {
+	  eventBus.on('diagram.init', LOW_PRIORITY$f, function() {
 	    self.setActive(active);
 	  });
 
@@ -38208,7 +38803,7 @@
 	  return newBounds;
 	};
 
-	var HIGH_PRIORITY$f = 2000;
+	var HIGH_PRIORITY$g = 2000;
 
 	/**
 	 * Integrates space tool with grid snapping.
@@ -38217,7 +38812,7 @@
 	  eventBus.on([
 	    'spaceTool.move',
 	    'spaceTool.end'
-	  ], HIGH_PRIORITY$f, function(event) {
+	  ], HIGH_PRIORITY$g, function(event) {
 	    var context = event.context;
 
 	    if (!context.initialized) {
@@ -38266,11 +38861,11 @@
 	  gridSnapping: [ 'type', GridSnapping ]
 	};
 
-	var HIGH_PRIORITY$e = 2000;
+	var HIGH_PRIORITY$f = 2000;
 
 
 	function AutoPlaceBehavior(eventBus, gridSnapping) {
-	  eventBus.on('autoPlace', HIGH_PRIORITY$e, function(context) {
+	  eventBus.on('autoPlace', HIGH_PRIORITY$f, function(context) {
 	    var source = context.source,
 	        sourceMid = getMid(source),
 	        shape = context.shape;
@@ -38356,7 +38951,7 @@
 	  'gridSnapping'
 	];
 
-	var HIGH_PRIORITY$d = 3000;
+	var HIGH_PRIORITY$e = 3000;
 
 
 	/**
@@ -38372,7 +38967,7 @@
 	  this.postExecuted([
 	    'connection.create',
 	    'connection.layout'
-	  ], HIGH_PRIORITY$d, function(event) {
+	  ], HIGH_PRIORITY$e, function(event) {
 	    var context = event.context,
 	        connection = context.connection,
 	        hints = context.hints || {},
@@ -39200,7 +39795,7 @@
 	var MARKER_RESIZING$1 = 'djs-resizing',
 	    MARKER_RESIZE_NOT_OK = 'resize-not-ok';
 
-	var LOW_PRIORITY$d = 500;
+	var LOW_PRIORITY$e = 500;
 
 
 	/**
@@ -39261,7 +39856,7 @@
 	  }
 
 	  // add and update previews
-	  eventBus.on('resize.move', LOW_PRIORITY$d, function(event) {
+	  eventBus.on('resize.move', LOW_PRIORITY$e, function(event) {
 	    updateFrame(event.context);
 	  });
 
@@ -39576,7 +40171,7 @@
 
 	  function activateDirectEdit(element, force) {
 	    if (force ||
-	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
+	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
 	        isCollapsedSubProcess(element)) {
 
 	      directEditing.activate(element);
@@ -40358,7 +40953,7 @@
 	  'modeling'
 	];
 
-	var LOW_PRIORITY$c = 500;
+	var LOW_PRIORITY$d = 500;
 
 
 	/**
@@ -40371,7 +40966,7 @@
 
 	  var self = this;
 
-	  this.postExecuted('elements.create', LOW_PRIORITY$c, function(context) {
+	  this.postExecuted('elements.create', LOW_PRIORITY$d, function(context) {
 	    var elements = context.elements;
 
 	    elements = elements.filter(function(shape) {
@@ -40394,7 +40989,7 @@
 	  }, true);
 
 
-	  this.preExecute('elements.move', LOW_PRIORITY$c, function(context) {
+	  this.preExecute('elements.move', LOW_PRIORITY$d, function(context) {
 	    var shapes = context.shapes,
 	        host = context.newHost;
 
@@ -40447,7 +41042,7 @@
 	    isAny(shape, [ 'bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent' ]) && !!host;
 	}
 
-	var HIGH_PRIORITY$c = 2000;
+	var HIGH_PRIORITY$d = 2000;
 
 
 	/**
@@ -40499,7 +41094,7 @@
 	  });
 
 	  // copy reference to root element on replace
-	  eventBus.on('moddleCopy.canCopyProperty', HIGH_PRIORITY$c, function(context) {
+	  eventBus.on('moddleCopy.canCopyProperty', HIGH_PRIORITY$d, function(context) {
 	    var parent = context.parent,
 	        property = context.property,
 	        propertyName = context.propertyName;
@@ -40520,167 +41115,6 @@
 
 	inherits$1(BoundaryEventBehavior, CommandInterceptor);
 
-	var LOW_PRIORITY$b = 500;
-
-
-	/**
-	 * Add referenced root elements (error, escalation, message, signal) if they don't exist.
-	 * Copy referenced root elements on copy & paste.
-	 */
-	function RootElementReferenceBehavior(
-	    bpmnjs, eventBus, injector, moddleCopy, bpmnFactory
-	) {
-	  injector.invoke(CommandInterceptor, this);
-
-	  function canHaveRootElementReference(element) {
-	    return isAny(element, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ]) ||
-	      hasAnyEventDefinition(element, [
-	        'bpmn:ErrorEventDefinition',
-	        'bpmn:EscalationEventDefinition',
-	        'bpmn:MessageEventDefinition',
-	        'bpmn:SignalEventDefinition'
-	      ]);
-	  }
-
-	  function hasRootElement(rootElement) {
-	    var definitions = bpmnjs.getDefinitions(),
-	        rootElements = definitions.get('rootElements');
-
-	    return !!find(rootElements, matchPattern({ id: rootElement.id }));
-	  }
-
-	  function getRootElementReferencePropertyName(eventDefinition) {
-	    if (is$1(eventDefinition, 'bpmn:ErrorEventDefinition')) {
-	      return 'errorRef';
-	    } else if (is$1(eventDefinition, 'bpmn:EscalationEventDefinition')) {
-	      return 'escalationRef';
-	    } else if (is$1(eventDefinition, 'bpmn:MessageEventDefinition')) {
-	      return 'messageRef';
-	    } else if (is$1(eventDefinition, 'bpmn:SignalEventDefinition')) {
-	      return 'signalRef';
-	    }
-	  }
-
-	  function getRootElement(businessObject) {
-	    if (isAny(businessObject, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ])) {
-	      return businessObject.get('messageRef');
-	    }
-
-	    var eventDefinitions = businessObject.get('eventDefinitions'),
-	        eventDefinition = eventDefinitions[ 0 ];
-
-	    return eventDefinition.get(getRootElementReferencePropertyName(eventDefinition));
-	  }
-
-	  function setRootElement(businessObject, rootElement) {
-	    if (isAny(businessObject, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ])) {
-	      return businessObject.set('messageRef', rootElement);
-	    }
-
-	    var eventDefinitions = businessObject.get('eventDefinitions'),
-	        eventDefinition = eventDefinitions[ 0 ];
-
-	    return eventDefinition.set(getRootElementReferencePropertyName(eventDefinition), rootElement);
-	  }
-
-	  // create shape
-	  this.executed('shape.create', function(context) {
-	    var shape = context.shape;
-
-	    if (!canHaveRootElementReference(shape)) {
-	      return;
-	    }
-
-	    var businessObject = getBusinessObject(shape),
-	        rootElement = getRootElement(businessObject),
-	        rootElements;
-
-	    if (rootElement && !hasRootElement(rootElement)) {
-	      rootElements = bpmnjs.getDefinitions().get('rootElements');
-
-	      // add root element
-	      add(rootElements, rootElement);
-
-	      context.addedRootElement = rootElement;
-	    }
-	  }, true);
-
-	  this.reverted('shape.create', function(context) {
-	    var addedRootElement = context.addedRootElement;
-
-	    if (!addedRootElement) {
-	      return;
-	    }
-
-	    var rootElements = bpmnjs.getDefinitions().get('rootElements');
-
-	    // remove root element
-	    remove(rootElements, addedRootElement);
-	  }, true);
-
-	  eventBus.on('copyPaste.copyElement', function(context) {
-	    var descriptor = context.descriptor,
-	        element = context.element;
-
-	    if (!canHaveRootElementReference(element)) {
-	      return;
-	    }
-
-	    var businessObject = getBusinessObject(element),
-	        rootElement = getRootElement(businessObject);
-
-	    if (rootElement) {
-	      descriptor.referencedRootElement = rootElement;
-	    }
-	  });
-
-	  eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$b, function(context) {
-	    var descriptor = context.descriptor,
-	        businessObject = descriptor.businessObject;
-
-	    if (!canHaveRootElementReference(businessObject)) {
-	      return;
-	    }
-
-	    var referencedRootElement = descriptor.referencedRootElement;
-
-	    if (!referencedRootElement) {
-	      return;
-	    }
-
-	    if (!hasRootElement(referencedRootElement)) {
-	      referencedRootElement = moddleCopy.copyElement(
-	        referencedRootElement,
-	        bpmnFactory.create(referencedRootElement.$type)
-	      );
-	    }
-
-	    setRootElement(businessObject, referencedRootElement);
-	  });
-	}
-
-	RootElementReferenceBehavior.$inject = [
-	  'bpmnjs',
-	  'eventBus',
-	  'injector',
-	  'moddleCopy',
-	  'bpmnFactory'
-	];
-
-	inherits$1(RootElementReferenceBehavior, CommandInterceptor);
-
-	// helpers //////////
-
-	function hasAnyEventDefinition(element, types) {
-	  if (!isArray$2(types)) {
-	    types = [ types ];
-	  }
-
-	  return some(types, function(type) {
-	    return hasEventDefinition$2(element, type);
-	  });
-	}
-
 	function CreateBehavior(injector) {
 	  injector.invoke(CommandInterceptor, this);
 
@@ -40701,118 +41135,6 @@
 
 	inherits$1(CreateBehavior, CommandInterceptor);
 
-	var HIGH_PRIORITY$b = 1500;
-	var HIGHEST_PRIORITY = 2000;
-
-
-	/**
-	 * Correct hover targets in certain situations to improve diagram interaction.
-	 *
-	 * @param {ElementRegistry} elementRegistry
-	 * @param {EventBus} eventBus
-	 * @param {Canvas} canvas
-	 */
-	function FixHoverBehavior(elementRegistry, eventBus, canvas) {
-
-	  eventBus.on([
-	    'create.hover',
-	    'create.move',
-	    'create.out',
-	    'create.end',
-	    'shape.move.hover',
-	    'shape.move.move',
-	    'shape.move.out',
-	    'shape.move.end'
-	  ], HIGH_PRIORITY$b, function(event) {
-	    var context = event.context,
-	        shape = context.shape || event.shape,
-	        hover = event.hover;
-
-	    // ensure elements are not dropped onto a bpmn:Lane but onto
-	    // the underlying bpmn:Participant
-	    if (is$1(hover, 'bpmn:Lane') && !isAny(shape, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
-	      event.hover = getLanesRoot(hover);
-	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
-	    }
-
-	    var rootElement = canvas.getRootElement();
-
-	    // ensure bpmn:Group and label elements are dropped
-	    // always onto the root
-	    if (hover !== rootElement && (shape.labelTarget || is$1(shape, 'bpmn:Group'))) {
-	      event.hover = rootElement;
-	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
-	    }
-	  });
-
-	  eventBus.on([
-	    'connect.hover',
-	    'connect.out',
-	    'connect.end',
-	    'connect.cleanup',
-	    'global-connect.hover',
-	    'global-connect.out',
-	    'global-connect.end',
-	    'global-connect.cleanup'
-	  ], HIGH_PRIORITY$b, function(event) {
-	    var hover = event.hover;
-
-	    // ensure connections start/end on bpmn:Participant,
-	    // not the underlying bpmn:Lane
-	    if (is$1(hover, 'bpmn:Lane')) {
-	      event.hover = getLanesRoot(hover) || hover;
-	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
-	    }
-	  });
-
-
-	  eventBus.on([
-	    'bendpoint.move.hover'
-	  ], HIGH_PRIORITY$b, function(event) {
-	    var context = event.context,
-	        hover = event.hover,
-	        type = context.type;
-
-	    // ensure reconnect start/end on bpmn:Participant,
-	    // not the underlying bpmn:Lane
-	    if (is$1(hover, 'bpmn:Lane') && /reconnect/.test(type)) {
-	      event.hover = getLanesRoot(hover) || hover;
-	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
-	    }
-	  });
-
-
-	  eventBus.on([
-	    'connect.start'
-	  ], HIGH_PRIORITY$b, function(event) {
-	    var context = event.context,
-	        start = context.start;
-
-	    // ensure connect start on bpmn:Participant,
-	    // not the underlying bpmn:Lane
-	    if (is$1(start, 'bpmn:Lane')) {
-	      context.start = getLanesRoot(start) || start;
-	    }
-	  });
-
-
-	  // allow movement of participants from lanes
-	  eventBus.on('shape.move.start', HIGHEST_PRIORITY, function(event) {
-	    var shape = event.shape;
-
-	    if (is$1(shape, 'bpmn:Lane')) {
-	      event.shape = getLanesRoot(shape) || shape;
-	    }
-	  });
-
-	}
-
-	FixHoverBehavior.$inject = [
-	  'elementRegistry',
-	  'eventBus',
-	  'canvas'
-	];
-
 	/**
 	 * BPMN specific create data object behavior
 	 */
@@ -40850,7 +41172,7 @@
 
 	var PARTICIPANT_BORDER_WIDTH = 30;
 
-	var HIGH_PRIORITY$a = 2000;
+	var HIGH_PRIORITY$c = 2000;
 
 
 	/**
@@ -40863,7 +41185,7 @@
 	  eventBus.on([
 	    'create.start',
 	    'shape.move.start'
-	  ], HIGH_PRIORITY$a, function(event) {
+	  ], HIGH_PRIORITY$c, function(event) {
 	    var context = event.context,
 	        shape = context.shape,
 	        rootElement = canvas.getRootElement();
@@ -40898,7 +41220,7 @@
 	  });
 
 	  // force hovering process when creating first participant
-	  eventBus.on('create.start', HIGH_PRIORITY$a, function(event) {
+	  eventBus.on('create.start', HIGH_PRIORITY$c, function(event) {
 	    var context = event.context,
 	        shape = context.shape,
 	        rootElement = canvas.getRootElement(),
@@ -40910,7 +41232,7 @@
 	    }
 
 	    if (is$1(shape, 'bpmn:Participant') && is$1(rootElement, 'bpmn:Process')) {
-	      eventBus.on('element.hover', HIGH_PRIORITY$a, ensureHoveringProcess);
+	      eventBus.on('element.hover', HIGH_PRIORITY$c, ensureHoveringProcess);
 
 	      eventBus.once('create.cleanup', function() {
 	        eventBus.off('element.hover', ensureHoveringProcess);
@@ -40918,122 +41240,97 @@
 	    }
 	  });
 
-	  function ensureCollaboration(context) {
-	    var parent = context.parent,
-	        collaboration;
-
+	  // turn process into collaboration when creating first participant
+	  function getOrCreateCollaboration() {
 	    var rootElement = canvas.getRootElement();
 
 	    if (is$1(rootElement, 'bpmn:Collaboration')) {
-	      collaboration = rootElement;
-	    } else {
-
-	      // update root element by making collaboration
-	      collaboration = modeling.makeCollaboration();
-
-	      // re-use process when creating first participant
-	      context.process = parent;
+	      return rootElement;
 	    }
 
-	    context.parent = collaboration;
+	    return modeling.makeCollaboration();
 	  }
 
-	  // turn process into collaboration before adding participant
-	  this.preExecute('shape.create', function(context) {
-	    var parent = context.parent,
-	        shape = context.shape;
-
-	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-	    }
-	  }, true);
-
-	  this.execute('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
-
-	    if (process) {
-	      context.oldProcessRef = shape.businessObject.processRef;
-
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = process.businessObject;
-	    }
-	  }, true);
+	  // when creating mutliple elements through `elements.create` parent must be set to collaboration
+	  // and passed to `shape.create` as hint
+	  this.preExecute('elements.create', HIGH_PRIORITY$c, function(context) {
+	    var elements = context.elements,
+	        parent = context.parent,
+	        participant = findParticipant(elements),
+	        hints;
 
-	  this.revert('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
+	    if (participant && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	    if (process) {
+	      hints = context.hints = context.hints || {};
 
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = context.oldProcessRef;
+	      hints.participant = participant;
+	      hints.process = parent;
+	      hints.processRef = getBusinessObject(participant).get('processRef');
 	    }
 	  }, true);
 
-	  this.postExecute('shape.create', function(context) {
-	    var process = context.process,
+	  // when creating single shape through `shape.create` parent must be set to collaboration
+	  // unless it was already set through `elements.create`
+	  this.preExecute('shape.create', function(context) {
+	    var parent = context.parent,
 	        shape = context.shape;
 
-	    if (process) {
-
-	      // move children from process to participant
-	      var processChildren = process.children.slice();
+	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, shape);
+	      context.process = parent;
+	      context.processRef = getBusinessObject(shape).get('processRef');
 	    }
-
 	  }, true);
 
-	  // turn process into collaboration when creating participants
-	  this.preExecute('elements.create', HIGH_PRIORITY$a, function(context) {
-	    var elements = context.elements,
-	        parent = context.parent,
-	        participant;
-
-	    var hasParticipants = findParticipant(elements);
-
-	    if (hasParticipants && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-
-	      participant = findParticipant(elements);
+	  // #execute necessary because #preExecute not called on CommandStack#redo
+	  this.execute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	      context.oldProcessRef = participant.businessObject.processRef;
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = parent.businessObject;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', getBusinessObject(process));
 	    }
 	  }, true);
 
-	  this.revert('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.revert('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        processRef = context.processRef || hints.processRef,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	    if (process) {
-	      participant = findParticipant(elements);
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = context.oldProcessRef;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', processRef);
 	    }
 	  }, true);
 
-	  this.postExecute('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.postExecute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || context.hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
 	    if (process) {
-	      participant = findParticipant(elements);
-
-	      // move children from process to first participant
-	      var processChildren = process.children.slice();
+	      var children = process.children.slice();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, participant);
+	      // both shape.create and elements.create must be handled
+	      if (!participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, shape);
+	      } else if (shape === participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, participant);
+	      }
 	    }
-
 	  }, true);
-
 	}
 
 	CreateParticipantBehavior.$inject = [
@@ -41460,7 +41757,7 @@
 	  }
 	}
 
-	var LOW_PRIORITY$a = 500;
+	var LOW_PRIORITY$c = 500;
 
 
 	/**
@@ -41529,7 +41826,7 @@
 	  /**
 	   * Adjust sizes of other lanes after lane deletion
 	   */
-	  this.postExecuted('shape.delete', LOW_PRIORITY$a, function(event) {
+	  this.postExecuted('shape.delete', LOW_PRIORITY$c, function(event) {
 
 	    var context = event.context,
 	        hints = context.hints,
@@ -41558,7 +41855,7 @@
 
 	inherits$1(DeleteLaneBehavior, CommandInterceptor);
 
-	var LOW_PRIORITY$9 = 500;
+	var LOW_PRIORITY$b = 500;
 
 
 	/**
@@ -41571,7 +41868,7 @@
 
 	  var self = this;
 
-	  this.postExecuted('elements.create', LOW_PRIORITY$9, function(context) {
+	  this.postExecuted('elements.create', LOW_PRIORITY$b, function(context) {
 	    var elements = context.elements;
 
 	    elements.filter(function(shape) {
@@ -41585,7 +41882,7 @@
 	    });
 	  }, true);
 
-	  this.preExecute('elements.move', LOW_PRIORITY$9, function(context) {
+	  this.preExecute('elements.move', LOW_PRIORITY$b, function(context) {
 	    var shapes = context.shapes,
 	        newHost = context.newHost;
 
@@ -41685,12 +41982,12 @@
 	      dockingPoint = intersection.bendpoint ? waypoints[intersection.index] : mid;
 
 	      // if last waypointBefore is inside shape's bounds, ignore docking point
-	      if (!isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
+	      if (waypointsBefore.length === 1 || !isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
 	        waypointsBefore.push(copy(dockingPoint));
 	      }
 
 	      // if first waypointAfter is inside shape's bounds, ignore docking point
-	      if (!isPointInsideBBox(shape, waypointsAfter[0])) {
+	      if (waypointsAfter.length === 1 || !isPointInsideBBox(shape, waypointsAfter[0])) {
 	        waypointsAfter.unshift(copy(dockingPoint));
 	      }
 	    }
@@ -41915,7 +42212,119 @@
 	  return is$1(connection, 'bpmn:SequenceFlow');
 	}
 
-	var HIGH_PRIORITY$9 = 2000;
+	var HIGH_PRIORITY$b = 1500;
+	var HIGHEST_PRIORITY = 2000;
+
+
+	/**
+	 * Correct hover targets in certain situations to improve diagram interaction.
+	 *
+	 * @param {ElementRegistry} elementRegistry
+	 * @param {EventBus} eventBus
+	 * @param {Canvas} canvas
+	 */
+	function FixHoverBehavior(elementRegistry, eventBus, canvas) {
+
+	  eventBus.on([
+	    'create.hover',
+	    'create.move',
+	    'create.out',
+	    'create.end',
+	    'shape.move.hover',
+	    'shape.move.move',
+	    'shape.move.out',
+	    'shape.move.end'
+	  ], HIGH_PRIORITY$b, function(event) {
+	    var context = event.context,
+	        shape = context.shape || event.shape,
+	        hover = event.hover;
+
+	    // ensure elements are not dropped onto a bpmn:Lane but onto
+	    // the underlying bpmn:Participant
+	    if (is$1(hover, 'bpmn:Lane') && !isAny(shape, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
+	      event.hover = getLanesRoot(hover);
+	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
+	    }
+
+	    var rootElement = canvas.getRootElement();
+
+	    // ensure bpmn:Group and label elements are dropped
+	    // always onto the root
+	    if (hover !== rootElement && (shape.labelTarget || is$1(shape, 'bpmn:Group'))) {
+	      event.hover = rootElement;
+	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
+	    }
+	  });
+
+	  eventBus.on([
+	    'connect.hover',
+	    'connect.out',
+	    'connect.end',
+	    'connect.cleanup',
+	    'global-connect.hover',
+	    'global-connect.out',
+	    'global-connect.end',
+	    'global-connect.cleanup'
+	  ], HIGH_PRIORITY$b, function(event) {
+	    var hover = event.hover;
+
+	    // ensure connections start/end on bpmn:Participant,
+	    // not the underlying bpmn:Lane
+	    if (is$1(hover, 'bpmn:Lane')) {
+	      event.hover = getLanesRoot(hover) || hover;
+	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
+	    }
+	  });
+
+
+	  eventBus.on([
+	    'bendpoint.move.hover'
+	  ], HIGH_PRIORITY$b, function(event) {
+	    var context = event.context,
+	        hover = event.hover,
+	        type = context.type;
+
+	    // ensure reconnect start/end on bpmn:Participant,
+	    // not the underlying bpmn:Lane
+	    if (is$1(hover, 'bpmn:Lane') && /reconnect/.test(type)) {
+	      event.hover = getLanesRoot(hover) || hover;
+	      event.hoverGfx = elementRegistry.getGraphics(event.hover);
+	    }
+	  });
+
+
+	  eventBus.on([
+	    'connect.start'
+	  ], HIGH_PRIORITY$b, function(event) {
+	    var context = event.context,
+	        start = context.start;
+
+	    // ensure connect start on bpmn:Participant,
+	    // not the underlying bpmn:Lane
+	    if (is$1(start, 'bpmn:Lane')) {
+	      context.start = getLanesRoot(start) || start;
+	    }
+	  });
+
+
+	  // allow movement of participants from lanes
+	  eventBus.on('shape.move.start', HIGHEST_PRIORITY, function(event) {
+	    var shape = event.shape;
+
+	    if (is$1(shape, 'bpmn:Lane')) {
+	      event.shape = getLanesRoot(shape) || shape;
+	    }
+	  });
+
+	}
+
+	FixHoverBehavior.$inject = [
+	  'elementRegistry',
+	  'eventBus',
+	  'canvas'
+	];
+
+	var HIGH_PRIORITY$a = 2000;
 
 
 	/**
@@ -42084,7 +42493,7 @@
 	  });
 
 	  // copy bpmn:CategoryValue when copying element
-	  eventBus.on('moddleCopy.canCopyProperty', HIGH_PRIORITY$9, function(context) {
+	  eventBus.on('moddleCopy.canCopyProperty', HIGH_PRIORITY$a, function(context) {
 	    var property = context.property,
 	        categoryValue;
 
@@ -43509,6 +43918,151 @@
 	  'translate'
 	];
 
+	/**
+	 * BPMN specific behavior ensuring that bpmndi:Label's dc:Bounds are removed
+	 * when shape is resized.
+	 */
+	function RemoveEmbeddedLabelBoundsBehavior(eventBus, modeling) {
+	  CommandInterceptor.call(this, eventBus);
+
+	  this.preExecute('shape.resize', function(context) {
+	    var shape = context.shape;
+
+	    var di = getDi(shape),
+	        label = di && di.get('label'),
+	        bounds = label && label.get('bounds');
+
+	    if (bounds) {
+	      modeling.updateModdleProperties(shape, label, {
+	        bounds: undefined
+	      });
+	    }
+	  }, true);
+	}
+
+	inherits$1(RemoveEmbeddedLabelBoundsBehavior, CommandInterceptor);
+
+	RemoveEmbeddedLabelBoundsBehavior.$inject = [
+	  'eventBus',
+	  'modeling'
+	];
+
+	function RemoveElementBehavior(eventBus, bpmnRules, modeling) {
+
+	  CommandInterceptor.call(this, eventBus);
+
+	  /**
+	   * Combine sequence flows when deleting an element
+	   * if there is one incoming and one outgoing
+	   * sequence flow
+	   */
+	  this.preExecute('shape.delete', function(e) {
+
+	    var shape = e.context.shape;
+
+	    // only handle [a] -> [shape] -> [b] patterns
+	    if (shape.incoming.length !== 1 || shape.outgoing.length !== 1) {
+	      return;
+	    }
+
+	    var inConnection = shape.incoming[0],
+	        outConnection = shape.outgoing[0];
+
+	    // only handle sequence flows
+	    if (!is$1(inConnection, 'bpmn:SequenceFlow') || !is$1(outConnection, 'bpmn:SequenceFlow')) {
+	      return;
+	    }
+
+	    if (bpmnRules.canConnect(inConnection.source, outConnection.target, inConnection)) {
+
+	      // compute new, combined waypoints
+	      var newWaypoints = getNewWaypoints(inConnection.waypoints, outConnection.waypoints);
+
+	      modeling.reconnectEnd(inConnection, outConnection.target, newWaypoints);
+	    }
+	  });
+
+	}
+
+	inherits$1(RemoveElementBehavior, CommandInterceptor);
+
+	RemoveElementBehavior.$inject = [
+	  'eventBus',
+	  'bpmnRules',
+	  'modeling'
+	];
+
+
+	// helpers //////////////////////
+
+	function getDocking$1(point) {
+	  return point.original || point;
+	}
+
+
+	function getNewWaypoints(inWaypoints, outWaypoints) {
+
+	  var intersection = lineIntersect(
+	    getDocking$1(inWaypoints[inWaypoints.length - 2]),
+	    getDocking$1(inWaypoints[inWaypoints.length - 1]),
+	    getDocking$1(outWaypoints[1]),
+	    getDocking$1(outWaypoints[0]));
+
+	  if (intersection) {
+	    return [].concat(
+	      inWaypoints.slice(0, inWaypoints.length - 1),
+	      [ intersection ],
+	      outWaypoints.slice(1));
+	  } else {
+	    return [
+	      getDocking$1(inWaypoints[0]),
+	      getDocking$1(outWaypoints[outWaypoints.length - 1])
+	    ];
+	  }
+	}
+
+	/**
+	 * BPMN specific remove behavior
+	 */
+	function RemoveParticipantBehavior(eventBus, modeling) {
+
+	  CommandInterceptor.call(this, eventBus);
+
+
+	  /**
+	   * morph collaboration diagram into process diagram
+	   * after the last participant has been removed
+	   */
+
+	  this.preExecute('shape.delete', function(context) {
+
+	    var shape = context.shape,
+	        parent = shape.parent;
+
+	    // activate the behavior if the shape to be removed
+	    // is a participant
+	    if (is$1(shape, 'bpmn:Participant')) {
+	      context.collaborationRoot = parent;
+	    }
+	  }, true);
+
+	  this.postExecute('shape.delete', function(context) {
+
+	    var collaborationRoot = context.collaborationRoot;
+
+	    if (collaborationRoot && !collaborationRoot.businessObject.participants.length) {
+
+	      // replace empty collaboration with process diagram
+	      modeling.makeProcess();
+	    }
+	  }, true);
+
+	}
+
+	RemoveParticipantBehavior.$inject = [ 'eventBus', 'modeling' ];
+
+	inherits$1(RemoveParticipantBehavior, CommandInterceptor);
+
 	function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules, injector) {
 
 	  CommandInterceptor.call(this, eventBus);
@@ -43681,48 +44235,6 @@
 	  'injector'
 	];
 
-	/**
-	 * BPMN specific remove behavior
-	 */
-	function RemoveParticipantBehavior(eventBus, modeling) {
-
-	  CommandInterceptor.call(this, eventBus);
-
-
-	  /**
-	   * morph collaboration diagram into process diagram
-	   * after the last participant has been removed
-	   */
-
-	  this.preExecute('shape.delete', function(context) {
-
-	    var shape = context.shape,
-	        parent = shape.parent;
-
-	    // activate the behavior if the shape to be removed
-	    // is a participant
-	    if (is$1(shape, 'bpmn:Participant')) {
-	      context.collaborationRoot = parent;
-	    }
-	  }, true);
-
-	  this.postExecute('shape.delete', function(context) {
-
-	    var collaborationRoot = context.collaborationRoot;
-
-	    if (collaborationRoot && !collaborationRoot.businessObject.participants.length) {
-
-	      // replace empty collaboration with process diagram
-	      modeling.makeProcess();
-	    }
-	  }, true);
-
-	}
-
-	RemoveParticipantBehavior.$inject = [ 'eventBus', 'modeling' ];
-
-	inherits$1(RemoveParticipantBehavior, CommandInterceptor);
-
 	/**
 	 * BPMN-specific replace behavior.
 	 */
@@ -43840,7 +44352,7 @@
 	  'selection'
 	];
 
-	var HIGH_PRIORITY$8 = 1500;
+	var HIGH_PRIORITY$9 = 1500;
 
 	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
 
@@ -43856,7 +44368,7 @@
 	 * @param {EventBus} eventBus
 	 */
 	function ResizeBehavior(eventBus) {
-	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
+	  eventBus.on('resize.start', HIGH_PRIORITY$9, function(event) {
 	    var context = event.context,
 	        shape = context.shape,
 	        direction = context.direction,
@@ -44056,78 +44568,165 @@
 	  'modeling'
 	];
 
-	function RemoveElementBehavior(eventBus, bpmnRules, modeling) {
-
-	  CommandInterceptor.call(this, eventBus);
-
-	  /**
-	   * Combine sequence flows when deleting an element
-	   * if there is one incoming and one outgoing
-	   * sequence flow
-	   */
-	  this.preExecute('shape.delete', function(e) {
-
-	    var shape = e.context.shape;
-
-	    // only handle [a] -> [shape] -> [b] patterns
-	    if (shape.incoming.length !== 1 || shape.outgoing.length !== 1) {
-	      return;
-	    }
-
-	    var inConnection = shape.incoming[0],
-	        outConnection = shape.outgoing[0];
-
-	    // only handle sequence flows
-	    if (!is$1(inConnection, 'bpmn:SequenceFlow') || !is$1(outConnection, 'bpmn:SequenceFlow')) {
-	      return;
-	    }
-
-	    if (bpmnRules.canConnect(inConnection.source, outConnection.target, inConnection)) {
-
-	      // compute new, combined waypoints
-	      var newWaypoints = getNewWaypoints(inConnection.waypoints, outConnection.waypoints);
-
-	      modeling.reconnectEnd(inConnection, outConnection.target, newWaypoints);
-	    }
-	  });
-
-	}
-
-	inherits$1(RemoveElementBehavior, CommandInterceptor);
-
-	RemoveElementBehavior.$inject = [
-	  'eventBus',
-	  'bpmnRules',
-	  'modeling'
-	];
-
-
-	// helpers //////////////////////
-
-	function getDocking$1(point) {
-	  return point.original || point;
-	}
-
-
-	function getNewWaypoints(inWaypoints, outWaypoints) {
-
-	  var intersection = lineIntersect(
-	    getDocking$1(inWaypoints[inWaypoints.length - 2]),
-	    getDocking$1(inWaypoints[inWaypoints.length - 1]),
-	    getDocking$1(outWaypoints[1]),
-	    getDocking$1(outWaypoints[0]));
-
-	  if (intersection) {
-	    return [].concat(
-	      inWaypoints.slice(0, inWaypoints.length - 1),
-	      [ intersection ],
-	      outWaypoints.slice(1));
-	  } else {
-	    return [
-	      getDocking$1(inWaypoints[0]),
-	      getDocking$1(outWaypoints[outWaypoints.length - 1])
-	    ];
-	  }
+	var LOW_PRIORITY$a = 500;
+
+
+	/**
+	 * Add referenced root elements (error, escalation, message, signal) if they don't exist.
+	 * Copy referenced root elements on copy & paste.
+	 */
+	function RootElementReferenceBehavior(
+	    bpmnjs, eventBus, injector, moddleCopy, bpmnFactory
+	) {
+	  injector.invoke(CommandInterceptor, this);
+
+	  function canHaveRootElementReference(element) {
+	    return isAny(element, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ]) ||
+	      hasAnyEventDefinition(element, [
+	        'bpmn:ErrorEventDefinition',
+	        'bpmn:EscalationEventDefinition',
+	        'bpmn:MessageEventDefinition',
+	        'bpmn:SignalEventDefinition'
+	      ]);
+	  }
+
+	  function hasRootElement(rootElement) {
+	    var definitions = bpmnjs.getDefinitions(),
+	        rootElements = definitions.get('rootElements');
+
+	    return !!find(rootElements, matchPattern({ id: rootElement.id }));
+	  }
+
+	  function getRootElementReferencePropertyName(eventDefinition) {
+	    if (is$1(eventDefinition, 'bpmn:ErrorEventDefinition')) {
+	      return 'errorRef';
+	    } else if (is$1(eventDefinition, 'bpmn:EscalationEventDefinition')) {
+	      return 'escalationRef';
+	    } else if (is$1(eventDefinition, 'bpmn:MessageEventDefinition')) {
+	      return 'messageRef';
+	    } else if (is$1(eventDefinition, 'bpmn:SignalEventDefinition')) {
+	      return 'signalRef';
+	    }
+	  }
+
+	  function getRootElement(businessObject) {
+	    if (isAny(businessObject, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ])) {
+	      return businessObject.get('messageRef');
+	    }
+
+	    var eventDefinitions = businessObject.get('eventDefinitions'),
+	        eventDefinition = eventDefinitions[ 0 ];
+
+	    return eventDefinition.get(getRootElementReferencePropertyName(eventDefinition));
+	  }
+
+	  function setRootElement(businessObject, rootElement) {
+	    if (isAny(businessObject, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ])) {
+	      return businessObject.set('messageRef', rootElement);
+	    }
+
+	    var eventDefinitions = businessObject.get('eventDefinitions'),
+	        eventDefinition = eventDefinitions[ 0 ];
+
+	    return eventDefinition.set(getRootElementReferencePropertyName(eventDefinition), rootElement);
+	  }
+
+	  // create shape
+	  this.executed('shape.create', function(context) {
+	    var shape = context.shape;
+
+	    if (!canHaveRootElementReference(shape)) {
+	      return;
+	    }
+
+	    var businessObject = getBusinessObject(shape),
+	        rootElement = getRootElement(businessObject),
+	        rootElements;
+
+	    if (rootElement && !hasRootElement(rootElement)) {
+	      rootElements = bpmnjs.getDefinitions().get('rootElements');
+
+	      // add root element
+	      add(rootElements, rootElement);
+
+	      context.addedRootElement = rootElement;
+	    }
+	  }, true);
+
+	  this.reverted('shape.create', function(context) {
+	    var addedRootElement = context.addedRootElement;
+
+	    if (!addedRootElement) {
+	      return;
+	    }
+
+	    var rootElements = bpmnjs.getDefinitions().get('rootElements');
+
+	    // remove root element
+	    remove(rootElements, addedRootElement);
+	  }, true);
+
+	  eventBus.on('copyPaste.copyElement', function(context) {
+	    var descriptor = context.descriptor,
+	        element = context.element;
+
+	    if (!canHaveRootElementReference(element)) {
+	      return;
+	    }
+
+	    var businessObject = getBusinessObject(element),
+	        rootElement = getRootElement(businessObject);
+
+	    if (rootElement) {
+	      descriptor.referencedRootElement = rootElement;
+	    }
+	  });
+
+	  eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$a, function(context) {
+	    var descriptor = context.descriptor,
+	        businessObject = descriptor.businessObject;
+
+	    if (!canHaveRootElementReference(businessObject)) {
+	      return;
+	    }
+
+	    var referencedRootElement = descriptor.referencedRootElement;
+
+	    if (!referencedRootElement) {
+	      return;
+	    }
+
+	    if (!hasRootElement(referencedRootElement)) {
+	      referencedRootElement = moddleCopy.copyElement(
+	        referencedRootElement,
+	        bpmnFactory.create(referencedRootElement.$type)
+	      );
+	    }
+
+	    setRootElement(businessObject, referencedRootElement);
+	  });
+	}
+
+	RootElementReferenceBehavior.$inject = [
+	  'bpmnjs',
+	  'eventBus',
+	  'injector',
+	  'moddleCopy',
+	  'bpmnFactory'
+	];
+
+	inherits$1(RootElementReferenceBehavior, CommandInterceptor);
+
+	// helpers //////////
+
+	function hasAnyEventDefinition(element, types) {
+	  if (!isArray$2(types)) {
+	    types = [ types ];
+	  }
+
+	  return some(types, function(type) {
+	    return hasEventDefinition$2(element, type);
+	  });
 	}
 
 	var max$1 = Math.max;
@@ -44240,6 +44839,547 @@
 	  }
 	}
 
+	var LOW_PRIORITY$9 = 400;
+	var HIGH_PRIORITY$8 = 600;
+
+	var DEFAULT_POSITION = {
+	  x: 180,
+	  y: 160
+	};
+
+
+	/**
+	 * Creates bpmndi:BPMNPlane elements and canvas planes when collapsed subprocesses are created.
+	 *
+	 *
+	 * @param {Canvas} canvas
+	 * @param {EventBus} eventBus
+	 * @param {Modeling} modeling
+	 * @param {ElementFactory} elementFactory
+	 * @param {BpmnFactory} bpmnFactory
+	 * @param {Bpmnjs} bpmnjs
+	 * @param {ElementRegistry} elementRegistry
+	 */
+	function SubProcessPlaneBehavior(
+	    canvas, eventBus, modeling,
+	    elementFactory, bpmnFactory, bpmnjs, elementRegistry) {
+
+	  CommandInterceptor.call(this, eventBus);
+
+	  this._canvas = canvas;
+	  this._eventBus = eventBus;
+	  this._modeling = modeling;
+	  this._elementFactory = elementFactory;
+	  this._bpmnFactory = bpmnFactory;
+	  this._bpmnjs = bpmnjs;
+	  this._elementRegistry = elementRegistry;
+
+	  var self = this;
+
+	  function isCollapsedSubProcess(element) {
+	    return is$1(element, 'bpmn:SubProcess') && !isExpanded(element);
+	  }
+
+	  function createRoot(context) {
+	    var shape = context.shape,
+	        rootElement = context.newRootElement;
+
+	    var businessObject = getBusinessObject(shape);
+
+	    rootElement = self._addDiagram(rootElement || businessObject);
+
+	    context.newRootElement = canvas.addRootElement(rootElement);
+	  }
+
+	  function removeRoot(context) {
+	    var shape = context.shape;
+
+	    var businessObject = getBusinessObject(shape);
+	    self._removeDiagram(businessObject);
+
+	    var rootElement = context.newRootElement = elementRegistry.get(getPlaneIdFromShape(businessObject));
+
+	    canvas.removeRootElement(rootElement);
+	  }
+
+	  // add plane elements for newly created sub-processes
+	  // this ensures we can actually drill down into the element
+	  this.executed('shape.create', function(context) {
+	    var shape = context.shape;
+	    if (!isCollapsedSubProcess(shape)) {
+	      return;
+	    }
+
+	    createRoot(context);
+	  }, true);
+
+
+	  this.postExecuted('shape.create', function(context) {
+	    var shape = context.shape,
+	        rootElement = context.newRootElement;
+
+	    if (!rootElement || !shape.children) {
+	      return;
+	    }
+
+	    self._showRecursively(shape.children);
+
+	    self._moveChildrenToShape(shape, rootElement);
+	  }, true);
+
+
+	  this.reverted('shape.create', function(context) {
+	    var shape = context.shape;
+	    if (!isCollapsedSubProcess(shape)) {
+	      return;
+	    }
+
+	    removeRoot(context);
+	  }, true);
+
+
+	  this.preExecuted('shape.delete', function(context) {
+	    var shape = context.shape;
+	    if (!isCollapsedSubProcess(shape)) {
+	      return;
+	    }
+
+	    var attachedRoot = elementRegistry.get(getPlaneIdFromShape(shape));
+
+	    if (!attachedRoot) {
+	      return;
+	    }
+
+	    modeling.removeElements(attachedRoot.children.slice());
+	  }, true);
+
+
+	  this.executed('shape.delete', function(context) {
+	    var shape = context.shape;
+	    if (!isCollapsedSubProcess(shape)) {
+	      return;
+	    }
+	    removeRoot(context);
+	  }, true);
+
+
+	  this.reverted('shape.delete', function(context) {
+	    var shape = context.shape;
+	    if (!isCollapsedSubProcess(shape)) {
+	      return;
+	    }
+
+	    createRoot(context);
+	  }, true);
+
+
+	  this.preExecuted('shape.replace', function(context) {
+	    var oldShape = context.oldShape;
+	    var newShape = context.newShape;
+
+	    if (!isCollapsedSubProcess(oldShape) || !isCollapsedSubProcess(newShape)) {
+	      return;
+	    }
+
+	    // old plane could have content,
+	    // we remove it so it is not recursively deleted from 'shape.delete'
+	    context.oldRoot = canvas.removeRootElement(getPlaneIdFromShape(oldShape));
+	  }, true);
+
+
+	  this.postExecuted('shape.replace', function(context) {
+	    var newShape = context.newShape,
+	        source = context.oldRoot,
+	        target = canvas.findRoot(getPlaneIdFromShape(newShape));
+
+	    if (!source || !target) {
+	      return;
+	    }
+	    var elements = source.children;
+
+	    modeling.moveElements(elements, { x: 0, y: 0 }, target);
+	  }, true);
+
+
+	  // rename primary elements when the secondary element changes
+	  // this ensures rootElement.id = element.id + '_plane'
+	  this.executed('element.updateProperties', function(context) {
+	    var shape = context.element;
+
+	    if (!is$1(shape, 'bpmn:SubProcess')) {
+	      return;
+	    }
+
+	    var properties = context.properties;
+	    var oldProperties = context.oldProperties;
+
+	    var oldId = oldProperties.id,
+	        newId = properties.id;
+
+	    if (oldId === newId) {
+	      return;
+	    }
+
+	    if (isPlane(shape)) {
+	      elementRegistry.updateId(shape, toPlaneId(newId));
+	      elementRegistry.updateId(oldId, newId);
+
+	      return;
+	    }
+
+	    var planeElement = elementRegistry.get(toPlaneId(oldId));
+
+	    if (!planeElement) {
+	      return;
+	    }
+
+	    elementRegistry.updateId(toPlaneId(oldId), toPlaneId(newId));
+	  }, true);
+
+
+	  this.reverted('element.updateProperties', function(context) {
+	    var shape = context.element;
+
+	    if (!is$1(shape, 'bpmn:SubProcess')) {
+	      return;
+	    }
+
+	    var properties = context.properties;
+	    var oldProperties = context.oldProperties;
+
+	    var oldId = oldProperties.id,
+	        newId = properties.id;
+
+	    if (oldId === newId) {
+	      return;
+	    }
+
+	    if (isPlane(shape)) {
+	      elementRegistry.updateId(shape, toPlaneId(oldId));
+	      elementRegistry.updateId(newId, oldId);
+
+	      return;
+	    }
+
+	    var planeElement = elementRegistry.get(toPlaneId(newId));
+
+	    if (!planeElement) {
+	      return;
+	    }
+
+	    elementRegistry.updateId(planeElement, toPlaneId(oldId));
+	  }, true);
+
+	  // re-throw element.changed to re-render primary shape if associated plane has
+	  // changed (e.g. bpmn:name property has changed)
+	  eventBus.on('element.changed', function(context) {
+	    var element = context.element;
+
+	    if (!isPlane(element)) {
+	      return;
+	    }
+
+	    var plane = element;
+
+	    var primaryShape = elementRegistry.get(getShapeIdFromPlane(plane));
+
+	    // do not re-throw if no associated primary shape (e.g. bpmn:Process)
+	    if (!primaryShape || primaryShape === plane) {
+	      return;
+	    }
+
+	    eventBus.fire('element.changed', { element: primaryShape });
+	  });
+
+
+	  // create/remove plane for the subprocess
+	  this.executed('shape.toggleCollapse', LOW_PRIORITY$9, function(context) {
+	    var shape = context.shape;
+
+	    if (!is$1(shape, 'bpmn:SubProcess')) {
+	      return;
+	    }
+
+	    if (!isExpanded(shape)) {
+	      createRoot(context);
+	      self._showRecursively(shape.children);
+	    } else {
+	      removeRoot(context);
+	    }
+
+	  }, true);
+
+
+	  // create/remove plane for the subprocess
+	  this.reverted('shape.toggleCollapse', LOW_PRIORITY$9, function(context) {
+	    var shape = context.shape;
+
+	    if (!is$1(shape, 'bpmn:SubProcess')) {
+	      return;
+	    }
+
+	    if (!isExpanded(shape)) {
+	      createRoot(context);
+	      self._showRecursively(shape.children);
+	    } else {
+	      removeRoot(context);
+	    }
+
+	  }, true);
+
+	  // move elements between planes
+	  this.postExecuted('shape.toggleCollapse', HIGH_PRIORITY$8, function(context) {
+	    var shape = context.shape;
+
+	    if (!is$1(shape, 'bpmn:SubProcess')) {
+	      return;
+	    }
+
+	    var rootElement = context.newRootElement;
+
+	    if (!rootElement) {
+	      return;
+	    }
+
+	    if (!isExpanded(shape)) {
+
+	      // collapsed
+	      self._moveChildrenToShape(shape, rootElement);
+
+	    } else {
+	      self._moveChildrenToShape(rootElement, shape);
+	    }
+	  }, true);
+
+
+	  // copy-paste ///////////
+
+	  // add elements in plane to tree
+	  eventBus.on('copyPaste.createTree', function(context) {
+	    var element = context.element,
+	        children = context.children;
+
+	    if (!isCollapsedSubProcess(element)) {
+	      return;
+	    }
+
+	    var id = getPlaneIdFromShape(element);
+	    var parent = elementRegistry.get(id);
+
+	    if (parent) {
+
+	      // do not copy invisible root element
+	      children.push.apply(children, parent.children);
+	    }
+	  });
+
+	  // set plane children as direct children of collapsed shape
+	  eventBus.on('copyPaste.copyElement', function(context) {
+	    var descriptor = context.descriptor,
+	        element = context.element,
+	        elements = context.elements;
+
+	    var parent = element.parent;
+
+	    var isPlane = is$1(getDi(parent), 'bpmndi:BPMNPlane');
+	    if (!isPlane) {
+	      return;
+	    }
+
+	    var parentId = getShapeIdFromPlane(parent);
+
+	    var referencedShape = find(elements, function(element) {
+	      return element.id === parentId;
+	    });
+
+	    if (!referencedShape) {
+	      return;
+	    }
+
+	    descriptor.parent = referencedShape.id;
+	  });
+
+	  // hide children during pasting
+	  eventBus.on('copyPaste.pasteElement', function(context) {
+	    var descriptor = context.descriptor;
+
+	    if (!descriptor.parent) {
+	      return;
+	    }
+
+	    if (isCollapsedSubProcess(descriptor.parent) || descriptor.parent.hidden) {
+	      descriptor.hidden = true;
+	    }
+	  });
+
+	}
+
+	inherits$1(SubProcessPlaneBehavior, CommandInterceptor);
+
+	/**
+	 * Moves the child elements from source to target.
+	 *
+	 * If the target is a plane, the children are moved to the top left corner.
+	 * Otherwise, the center of the target is used.
+	 *
+	 * @param {Object|djs.model.Base} source
+	 * @param {Object|djs.model.Base} target
+	 */
+	SubProcessPlaneBehavior.prototype._moveChildrenToShape = function(source, target) {
+	  var modeling = this._modeling;
+
+	  var children = source.children;
+	  var offset;
+
+	  if (!children) {
+	    return;
+	  }
+
+	  // only change plane if there are no visible children, but don't move them
+	  var visibleChildren = children.filter(function(child) {
+	    return !child.hidden;
+	  });
+
+	  if (!visibleChildren.length) {
+	    modeling.moveElements(children, { x: 0, y: 0 }, target, { autoResize: false });
+	    return;
+	  }
+
+	  var childrenBounds = getBBox(visibleChildren);
+
+	  // target is a plane
+	  if (!target.x) {
+	    offset = {
+	      x: DEFAULT_POSITION.x - childrenBounds.x,
+	      y: DEFAULT_POSITION.y - childrenBounds.y
+	    };
+	  }
+
+	  // source is a plane
+	  else {
+
+	    // move relative to the center of the shape
+	    var targetMid = getMid(target);
+	    var childrenMid = getMid(childrenBounds);
+
+	    offset = {
+	      x: targetMid.x - childrenMid.x,
+	      y: targetMid.y - childrenMid.y
+	    };
+	  }
+
+	  modeling.moveElements(children, offset, target, { autoResize: false });
+	};
+
+	/**
+	 * Sets `hidden` property on all children of the given shape.
+	 *
+	 * @param {Array} elements
+	 * @param {Boolean} [hidden]
+	 * @returns {Array} all child elements
+	 */
+	SubProcessPlaneBehavior.prototype._showRecursively = function(elements, hidden) {
+	  var self = this;
+
+	  var result = [];
+	  elements.forEach(function(element) {
+	    element.hidden = !!hidden;
+
+	    result = result.concat(element);
+
+	    if (element.children) {
+	      result = result.concat(
+	        self._showRecursively(element.children, element.collapsed || hidden)
+	      );
+	    }
+	  });
+
+	  return result;
+	};
+
+	/**
+	* Adds a given rootElement to the bpmnDi diagrams.
+	*
+	* @param {Object} rootElement
+	* @returns {Object} planeElement
+	*/
+	SubProcessPlaneBehavior.prototype._addDiagram = function(planeElement) {
+	  var bpmnjs = this._bpmnjs;
+	  var diagrams = bpmnjs.getDefinitions().diagrams;
+
+	  if (!planeElement.businessObject) {
+	    planeElement = this._createNewDiagram(planeElement);
+	  }
+
+	  diagrams.push(planeElement.di.$parent);
+
+	  return planeElement;
+	};
+
+
+	/**
+	* Creates a new plane element for the given sub process.
+	*
+	* @param {Object} bpmnElement
+	*
+	* @return {Object} new diagram element
+	*/
+	SubProcessPlaneBehavior.prototype._createNewDiagram = function(bpmnElement) {
+	  var bpmnFactory = this._bpmnFactory;
+	  var elementFactory = this._elementFactory;
+
+	  var diPlane = bpmnFactory.create('bpmndi:BPMNPlane', {
+	    bpmnElement: bpmnElement
+	  });
+	  var diDiagram = bpmnFactory.create('bpmndi:BPMNDiagram', {
+	    plane: diPlane
+	  });
+	  diPlane.$parent = diDiagram;
+
+	  // add a virtual element (not being drawn),
+	  // a copy cat of our BpmnImporter code
+	  var planeElement = elementFactory.createRoot({
+	    id: getPlaneIdFromShape(bpmnElement),
+	    type: bpmnElement.$type,
+	    di: diPlane,
+	    businessObject: bpmnElement,
+	    collapsed: true
+	  });
+
+	  return planeElement;
+	};
+
+	/**
+	 * Removes the diagram for a given root element
+	 *
+	 * @param {Object} rootElement
+	 * @returns {Object} removed bpmndi:BPMNDiagram
+	 */
+	SubProcessPlaneBehavior.prototype._removeDiagram = function(rootElement) {
+	  var bpmnjs = this._bpmnjs;
+
+	  var diagrams = bpmnjs.getDefinitions().diagrams;
+
+	  var removedDiagram = find(diagrams, function(diagram) {
+	    return diagram.plane.bpmnElement.id === rootElement.id;
+	  });
+
+	  diagrams.splice(diagrams.indexOf(removedDiagram), 1);
+
+	  return removedDiagram;
+	};
+
+
+	SubProcessPlaneBehavior.$inject = [
+	  'canvas',
+	  'eventBus',
+	  'modeling',
+	  'elementFactory',
+	  'bpmnFactory',
+	  'bpmnjs',
+	  'elementRegistry'
+	];
+
 	/**
 	 * Add start event replacing element with expanded sub process.
 	 *
@@ -44283,6 +45423,64 @@
 	  };
 	}
 
+	function ToggleCollapseConnectionBehaviour(
+	    eventBus, modeling
+	) {
+
+	  CommandInterceptor.call(this, eventBus);
+
+	  this.postExecuted('shape.toggleCollapse', 1500, function(context) {
+
+	    // var shape = context.shape;
+	    var shape = context.shape;
+
+	    // only change connections when collapsing
+	    if (isExpanded(shape)) {
+	      return;
+	    }
+
+	    var allChildren = selfAndAllChildren(shape);
+
+	    allChildren.forEach(function(child) {
+
+	      // Ensure that the connection array is not modified during iteration
+	      var incomingConnections = child.incoming.slice(),
+	          outgoingConnections = child.outgoing.slice();
+
+	      forEach(incomingConnections, function(c) {
+	        handleConnection(c, true);
+	      });
+
+	      forEach(outgoingConnections, function(c) {
+	        handleConnection(c, false);
+	      });
+	    });
+
+
+	    function handleConnection(c, incoming) {
+	      if (allChildren.includes(c.source) && allChildren.includes(c.target)) {
+	        return;
+	      }
+
+	      if (incoming) {
+	        modeling.reconnectEnd(c, shape, getMid(shape));
+	      } else {
+	        modeling.reconnectStart(c, shape, getMid(shape));
+	      }
+
+	    }
+
+	  }, true);
+
+	}
+
+	inherits$1(ToggleCollapseConnectionBehaviour, CommandInterceptor);
+
+	ToggleCollapseConnectionBehaviour.$inject = [
+	  'eventBus',
+	  'modeling',
+	];
+
 	var LOW_PRIORITY$8 = 500;
 
 
@@ -44459,7 +45657,9 @@
 	    var rootElement = canvas.getRootElement(),
 	        rootElementBo = rootElement.businessObject;
 
-	    moddle.ids.unclaim(rootElementBo.id);
+	    if (is$1(rootElement, 'bpmn:Collaboration')) {
+	      moddle.ids.unclaim(rootElementBo.id);
+	    }
 	  });
 	}
 
@@ -44467,6 +45667,54 @@
 
 	UnclaimIdBehavior.$inject = [ 'canvas', 'injector', 'moddle', 'modeling' ];
 
+	/**
+	 * A behavior that unsets the Default property of
+	 * sequence flow source on element delete, if the
+	 * removed element is the Gateway or Task's default flow.
+	 *
+	 * @param {EventBus} eventBus
+	 * @param {Modeling} modeling
+	 */
+	function DeleteSequenceFlowBehavior(eventBus, modeling) {
+
+	  CommandInterceptor.call(this, eventBus);
+
+
+	  this.preExecute('connection.delete', function(event) {
+	    var context = event.context,
+	        connection = context.connection,
+	        source = connection.source;
+
+	    if (isDefaultFlow(connection, source)) {
+	      modeling.updateProperties(source, {
+	        'default': null
+	      });
+	    }
+	  });
+	}
+
+	inherits$1(DeleteSequenceFlowBehavior, CommandInterceptor);
+
+	DeleteSequenceFlowBehavior.$inject = [
+	  'eventBus',
+	  'modeling'
+	];
+
+
+	// helpers //////////////////////
+
+	function isDefaultFlow(connection, source) {
+
+	  if (!is$1(connection, 'bpmn:SequenceFlow')) {
+	    return false;
+	  }
+
+	  var sourceBo = getBusinessObject(source),
+	      sequenceFlow = getBusinessObject(connection);
+
+	  return sourceBo.get('default') === sequenceFlow;
+	}
+
 	var LOW_PRIORITY$7 = 500,
 	    HIGH_PRIORITY$7 = 5000;
 
@@ -44618,54 +45866,6 @@
 	  };
 	}
 
-	/**
-	 * A behavior that unsets the Default property of
-	 * sequence flow source on element delete, if the
-	 * removed element is the Gateway or Task's default flow.
-	 *
-	 * @param {EventBus} eventBus
-	 * @param {Modeling} modeling
-	 */
-	function DeleteSequenceFlowBehavior(eventBus, modeling) {
-
-	  CommandInterceptor.call(this, eventBus);
-
-
-	  this.preExecute('connection.delete', function(event) {
-	    var context = event.context,
-	        connection = context.connection,
-	        source = connection.source;
-
-	    if (isDefaultFlow(connection, source)) {
-	      modeling.updateProperties(source, {
-	        'default': null
-	      });
-	    }
-	  });
-	}
-
-	inherits$1(DeleteSequenceFlowBehavior, CommandInterceptor);
-
-	DeleteSequenceFlowBehavior.$inject = [
-	  'eventBus',
-	  'modeling'
-	];
-
-
-	// helpers //////////////////////
-
-	function isDefaultFlow(connection, source) {
-
-	  if (!is$1(connection, 'bpmn:SequenceFlow')) {
-	    return false;
-	  }
-
-	  var sourceBo = getBusinessObject(source),
-	      sequenceFlow = getBusinessObject(connection);
-
-	  return sourceBo.get('default') === sequenceFlow;
-	}
-
 	var BehaviorModule = {
 	  __init__: [
 	    'adaptiveLabelPositioningBehavior',
@@ -44673,17 +45873,16 @@
 	    'associationBehavior',
 	    'attachEventBehavior',
 	    'boundaryEventBehavior',
-	    'rootElementReferenceBehavior',
 	    'createBehavior',
-	    'fixHoverBehavior',
 	    'createDataObjectBehavior',
 	    'createParticipantBehavior',
-	    'dataStoreBehavior',
 	    'dataInputAssociationBehavior',
+	    'dataStoreBehavior',
 	    'deleteLaneBehavior',
 	    'detachEventBehavior',
 	    'dropOnFlowBehavior',
 	    'eventBasedGatewayBehavior',
+	    'fixHoverBehavior',
 	    'groupBehavior',
 	    'importDockingFix',
 	    'isHorizontalFix',
@@ -44691,26 +45890,28 @@
 	    'messageFlowBehavior',
 	    'modelingFeedback',
 	    'removeElementBehavior',
+	    'removeEmbeddedLabelBoundsBehavior',
 	    'removeParticipantBehavior',
 	    'replaceConnectionBehavior',
 	    'replaceElementBehaviour',
 	    'resizeBehavior',
 	    'resizeLaneBehavior',
-	    'toggleElementCollapseBehaviour',
+	    'rootElementReferenceBehavior',
 	    'spaceToolBehavior',
+	    'subProcessPlaneBehavior',
 	    'subProcessStartEventBehavior',
+	    'toggleCollapseConnectionBehaviour',
+	    'toggleElementCollapseBehaviour',
 	    'unclaimIdBehavior',
-	    'unsetDefaultFlowBehavior',
-	    'updateFlowNodeRefsBehavior'
+	    'updateFlowNodeRefsBehavior',
+	    'unsetDefaultFlowBehavior'
 	  ],
 	  adaptiveLabelPositioningBehavior: [ 'type', AdaptiveLabelPositioningBehavior ],
 	  appendBehavior: [ 'type', AppendBehavior ],
 	  associationBehavior: [ 'type', AssociationBehavior ],
 	  attachEventBehavior: [ 'type', AttachEventBehavior ],
 	  boundaryEventBehavior: [ 'type', BoundaryEventBehavior ],
-	  rootElementReferenceBehavior: [ 'type', RootElementReferenceBehavior ],
 	  createBehavior: [ 'type', CreateBehavior ],
-	  fixHoverBehavior: [ 'type', FixHoverBehavior ],
 	  createDataObjectBehavior: [ 'type', CreateDataObjectBehavior ],
 	  createParticipantBehavior: [ 'type', CreateParticipantBehavior ],
 	  dataInputAssociationBehavior: [ 'type', DataInputAssociationBehavior ],
@@ -44719,24 +45920,29 @@
 	  detachEventBehavior: [ 'type', DetachEventBehavior ],
 	  dropOnFlowBehavior: [ 'type', DropOnFlowBehavior ],
 	  eventBasedGatewayBehavior: [ 'type', EventBasedGatewayBehavior ],
+	  fixHoverBehavior: [ 'type', FixHoverBehavior ],
 	  groupBehavior: [ 'type', GroupBehavior ],
 	  importDockingFix: [ 'type', ImportDockingFix ],
 	  isHorizontalFix: [ 'type', IsHorizontalFix ],
 	  labelBehavior: [ 'type', LabelBehavior ],
 	  messageFlowBehavior: [ 'type', MessageFlowBehavior ],
 	  modelingFeedback: [ 'type', ModelingFeedback ],
-	  replaceConnectionBehavior: [ 'type', ReplaceConnectionBehavior ],
+	  removeElementBehavior: [ 'type', RemoveElementBehavior ],
+	  removeEmbeddedLabelBoundsBehavior: ['type', RemoveEmbeddedLabelBoundsBehavior ],
 	  removeParticipantBehavior: [ 'type', RemoveParticipantBehavior ],
+	  replaceConnectionBehavior: [ 'type', ReplaceConnectionBehavior ],
 	  replaceElementBehaviour: [ 'type', ReplaceElementBehaviour ],
 	  resizeBehavior: [ 'type', ResizeBehavior ],
 	  resizeLaneBehavior: [ 'type', ResizeLaneBehavior ],
-	  removeElementBehavior: [ 'type', RemoveElementBehavior ],
-	  toggleElementCollapseBehaviour : [ 'type', ToggleElementCollapseBehaviour ],
+	  rootElementReferenceBehavior: [ 'type', RootElementReferenceBehavior ],
 	  spaceToolBehavior: [ 'type', SpaceToolBehavior ],
+	  subProcessPlaneBehavior: [ 'type', SubProcessPlaneBehavior ],
 	  subProcessStartEventBehavior: [ 'type', SubProcessStartEventBehavior ],
+	  toggleCollapseConnectionBehaviour: [ 'type', ToggleCollapseConnectionBehaviour ],
+	  toggleElementCollapseBehaviour : [ 'type', ToggleElementCollapseBehaviour ],
 	  unclaimIdBehavior: [ 'type', UnclaimIdBehavior ],
-	  updateFlowNodeRefsBehavior: [ 'type', UpdateFlowNodeRefsBehavior ],
-	  unsetDefaultFlowBehavior: [ 'type', DeleteSequenceFlowBehavior ]
+	  unsetDefaultFlowBehavior: [ 'type', DeleteSequenceFlowBehavior ],
+	  updateFlowNodeRefsBehavior: [ 'type', UpdateFlowNodeRefsBehavior ]
 	};
 
 	function getBoundaryAttachment(position, targetBounds) {
@@ -45686,21 +46892,24 @@
 	  eventBus.on('saveXML.start', HIGH_PRIORITY$6, orderDi);
 
 	  function orderDi() {
-	    var root = canvas.getRootElement(),
-	        rootDi = getDi(root),
-	        elements,
-	        diElements;
+	    var rootElements = canvas.getRootElements();
 
-	    elements = selfAndAllChildren([ root ], false);
+	    forEach(rootElements, function(root) {
+	      var rootDi = getDi(root),
+	          elements,
+	          diElements;
 
-	    // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
-	    elements = filter(elements, function(element) {
-	      return element !== root && !element.labelTarget;
-	    });
+	      elements = selfAndAllChildren([ root ], false);
+
+	      // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
+	      elements = filter(elements, function(element) {
+	        return element !== root && !element.labelTarget;
+	      });
 
-	    diElements = map$1(elements, getDi);
+	      diElements = map$1(elements, getDi);
 
-	    rootDi.set('planeElement', diElements);
+	      rootDi.set('planeElement', diElements);
+	    });
 	  }
 	}
 
@@ -45834,7 +47043,7 @@
 	        level: 9,
 	        containers: [
 	          'bpmn:Collaboration',
-	          'bpmn:Process'
+	          'bpmn:FlowElementsContainer'
 	        ]
 	      }
 	    },
@@ -45862,7 +47071,7 @@
 	        level: 10,
 	        containers: [
 	          'bpmn:Collaboration',
-	          'bpmn:Process'
+	          'bpmn:FlowElementsContainer'
 	        ]
 	      }
 	    },
@@ -45923,7 +47132,7 @@
 	    // render labels always on top
 	    if (element.labelTarget) {
 	      return {
-	        parent: canvas.getRootElement(),
+	        parent: canvas.findRoot(element.labelTarget) || canvas.getRootElement(),
 	        index: -1
 	      };
 	    }
@@ -48407,6 +49616,10 @@
 	};
 
 	BpmnFactory.prototype._ensureId = function(element) {
+	  if (element.id) {
+	    this._model.ids.claim(element.id, element);
+	    return;
+	  }
 
 	  // generate semantic ids for elements
 	  // bpmn:SequenceFlow -> SequenceFlow_ID
@@ -48477,7 +49690,7 @@
 	BpmnFactory.prototype.createDiEdge = function(semantic, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
 	    bpmnElement: semantic,
-	    waypoints: this.createDiWaypoints([])
+	    waypoint: this.createDiWaypoints([])
 	  }, attrs));
 	};
 
@@ -48805,7 +50018,18 @@
 
 	BpmnUpdater.prototype.updateBounds = function(shape) {
 
-	  var di = getDi(shape);
+	  var di = getDi(shape),
+	      embeddedLabelBounds = getEmbeddedLabelBounds(shape);
+
+	  // update embedded label bounds if possible
+	  if (embeddedLabelBounds) {
+	    var embeddedLabelBoundsDelta = delta(embeddedLabelBounds, di.get('bounds'));
+
+	    assign(embeddedLabelBounds, {
+	      x: shape.x + embeddedLabelBoundsDelta.x,
+	      y: shape.y + embeddedLabelBoundsDelta.y
+	    });
+	  }
 
 	  var target = (shape instanceof Label) ? this._getLabel(di) : di;
 
@@ -49180,6 +50404,33 @@
 	  };
 	}
 
+	/**
+	 * Return dc:Bounds of bpmndi:BPMNLabel if exists.
+	 *
+	 * @param {djs.model.shape} shape
+	 *
+	 * @returns {Object|undefined}
+	 */
+	function getEmbeddedLabelBounds(shape) {
+	  if (!is$1(shape, 'bpmn:Activity')) {
+	    return;
+	  }
+
+	  var di = getDi(shape);
+
+	  if (!di) {
+	    return;
+	  }
+
+	  var label = di.get('label');
+
+	  if (!label) {
+	    return;
+	  }
+
+	  return label.get('bounds');
+	}
+
 	/**
 	 * A bpmn-aware factory for diagram-js shapes
 	 */
@@ -49266,6 +50517,10 @@
 	    applyAttribute(di, attrs, 'isExpanded');
 	  }
 
+	  if (is$1(businessObject, 'bpmn:SubProcess')) {
+	    attrs.collapsed = !isExpanded(businessObject, di);
+	  }
+
 	  if (is$1(businessObject, 'bpmn:ExclusiveGateway')) {
 	    di.isMarkerVisible = true;
 	  }
@@ -49637,7 +50892,11 @@
 	    }
 	  });
 
-	  var bbox = getBBox(elements);
+	  var visibleElements = filter(elements, function(element) {
+	    return !element.hidden;
+	  });
+
+	  var bbox = getBBox(visibleElements);
 
 	  // center elements around position
 	  forEach(elements, function(element) {
@@ -52082,7 +53341,8 @@
 	      diPlane = getDi(oldRoot);
 
 	  // (1) replace process old <> new root
-	  canvas.setRootElement(newRoot, true);
+	  canvas.setRootElement(newRoot);
+	  canvas.removeRootElement(oldRoot);
 
 	  // (2) update root elements
 	  add(bpmnDefinitions.rootElements, newRootBusinessObject);
@@ -52116,7 +53376,8 @@
 	      diPlane = getDi(newRoot);
 
 	  // (1) replace process old <> new root
-	  canvas.setRootElement(oldRoot, true);
+	  canvas.setRootElement(oldRoot);
+	  canvas.removeRootElement(newRoot);
 
 	  // (2) update root elements
 	  remove(bpmnDefinitions.rootElements, newRootBusinessObject);
@@ -52686,12 +53947,26 @@
 	    // TODO @barmac: remove once we drop bpmn.io properties
 	    ensureLegacySupport(assignedDi);
 
-	    self._commandStack.execute('element.updateProperties', {
-	      element: element,
-	      properties: {
-	        di: assignedDi
-	      }
-	    });
+	    if (element.labelTarget) {
+
+	      // set label colors as bpmndi:BPMNLabel#color
+	      self._commandStack.execute('element.updateModdleProperties', {
+	        element: element,
+	        moddleElement: getDi(element).label,
+	        properties: {
+	          color: di['background-color']
+	        }
+	      });
+	    } else {
+
+	      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
+	      self._commandStack.execute('element.updateProperties', {
+	        element: element,
+	        properties: {
+	          di: assignedDi
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -52754,7 +54029,30 @@
 	/**
 	 * A handler that updates the text of a BPMN element.
 	 */
-	function UpdateLabelHandler(modeling, textRenderer) {
+	function UpdateLabelHandler(modeling, textRenderer, bpmnFactory) {
+
+	  /**
+	   * Creates an empty `diLabel` attribute for embedded labels.
+	   *
+	   * @param {djs.model.Base} element
+	   * @param {string} text
+	   */
+	  function ensureInternalLabelDi(element, text) {
+	    if (isLabelExternal(element)) {
+	      return;
+	    }
+
+	    var di = getDi(element);
+
+	    if (text && !di.label) {
+	      di.label = bpmnFactory.create('bpmndi:BPMNLabel');
+	    }
+
+	    if (!text && di.label) {
+	      di.label = null;
+	    }
+	  }
+
 
 	  /**
 	   * Set the label and return the changed elements.
@@ -52773,6 +54071,8 @@
 
 	    setLabel(label, text);
 
+	    ensureInternalLabelDi(element, text);
+
 	    return [ label, labelTarget ];
 	  }
 
@@ -52858,7 +54158,8 @@
 
 	UpdateLabelHandler.$inject = [
 	  'modeling',
-	  'textRenderer'
+	  'textRenderer',
+	  'bpmnFactory'
 	];
 
 
@@ -55903,7 +57204,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }