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

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

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-navigated-viewer v9.0.0-subprocesses.1
+ * bpmn-js - bpmn-navigated-viewer v9.0.0-subprocesses.2
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-10-26
+ * Date: 2021-11-05
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -3612,8 +3612,6 @@
 	          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
 
 	      attrs = assign({
-	        fill: fill,
-	        stroke: stroke,
 	        markerEnd: marker('association-end', fill, stroke)
 	      }, attrs);
 
@@ -3627,8 +3625,6 @@
 
 
 	      attrs = assign({
-	        fill: fill,
-	        stroke: stroke,
 	        markerEnd: marker('association-end', fill, stroke)
 	      }, attrs);
 
@@ -5352,32 +5348,6 @@
 	  });
 	}
 
-	var PLANE_PADDING = 50;
-
-	function getPlaneBounds(plane) {
-	  var planeTrbl = {
-	    top: Infinity,
-	    right: -Infinity,
-	    bottom: -Infinity,
-	    left: Infinity
-	  };
-
-	  plane.planeElement.forEach(function(element) {
-	    if (!element.bounds) {
-	      return;
-	    }
-
-	    var trbl = asTRBL(element.bounds);
-
-	    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
-	    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
-	    planeTrbl.right = Math.max(trbl.right, planeTrbl.right);
-	    planeTrbl.bottom = Math.max(trbl.bottom, planeTrbl.bottom);
-	  });
-
-	  return asBounds(planeTrbl);
-	}
-
 	function notYetDrawn(translate, semantic, refSemantic, property) {
 	  return new Error(translate('element {element} referenced by {referenced}#{property} not yet drawn', {
 	    element: elementToString(refSemantic),
@@ -5432,39 +5402,18 @@
 
 	  // ROOT ELEMENT
 	  // handle the special case that we deal with a
-	  // invisible root element (process or collaboration)
+	  // invisible root element (process, subprocess or collaboration)
 	  if (is$1(di, 'bpmndi:BPMNPlane')) {
 
-	    if (is$1(semantic, 'bpmn:SubProcess')) {
-	      var plane = this._canvas.createPlane(semantic.id, element);
-
-	      // Get size of expanded element
-	      var bounds = getPlaneBounds(di);
-
-	      var primary = this._elementRegistry.get(semantic.id);
-	      element = this._elementFactory.createShape(elementData(semantic, di, {
-	        collapsed: false,
-	        hidden: false,
-	        x: bounds.x - PLANE_PADDING,
-	        y: bounds.y - PLANE_PADDING,
-	        width: bounds.width + PLANE_PADDING * 2,
-	        height: bounds.height + PLANE_PADDING * 2,
-	        isFrame: true
-	      }));
-
-	      element.id = element.id + '_secondary';
-	      element.isSecondary = true;
-	      element.primaryShape = primary;
+	    // add a virtual element (not being drawn)
+	    element = this._elementFactory.createRoot(elementData(semantic, di));
 
-	      this._canvas.addShape(element, plane.rootElement);
+	    // for subprocesses, the id is already defined on the collapsed shape
+	    if (is$1(semantic, 'bpmn:SubProcess')) {
+	      element.id = element.id + '_plane';
 	    }
-	    else {
 
-	      // add a virtual element (not being drawn)
-	      element = this._elementFactory.createRoot(elementData(semantic, di));
-
-	      this._canvas.createPlane(semantic.id, element);
-	    }
+	    this._canvas.createPlane(semantic.id, element);
 	  }
 
 	  // SHAPE
@@ -5475,7 +5424,7 @@
 
 	    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-	    bounds = di.bounds;
+	    var bounds = di.bounds;
 
 	    element = this._elementFactory.createShape(elementData(semantic, di, {
 	      collapsed: collapsed,
@@ -6256,97 +6205,6 @@
 	  interactionEvents: [ 'type', InteractionEvents ]
 	};
 
-	/**
-	 * Adds an element to a collection and returns true if the
-	 * element was added.
-	 *
-	 * @param {Array<Object>} elements
-	 * @param {Object} e
-	 * @param {boolean} unique
-	 */
-	function add$1(elements, e, unique) {
-	  var canAdd = !unique || elements.indexOf(e) === -1;
-
-	  if (canAdd) {
-	    elements.push(e);
-	  }
-
-	  return canAdd;
-	}
-
-
-	/**
-	 * Iterate over each element in a collection, calling the iterator function `fn`
-	 * with (element, index, recursionDepth).
-	 *
-	 * Recurse into all elements that are returned by `fn`.
-	 *
-	 * @param  {Object|Array<Object>} elements
-	 * @param  {Function} fn iterator function called with (element, index, recursionDepth)
-	 * @param  {number} [depth] maximum recursion depth
-	 */
-	function eachElement(elements, fn, depth) {
-
-	  depth = depth || 0;
-
-	  if (!isArray$1(elements)) {
-	    elements = [ elements ];
-	  }
-
-	  forEach(elements, function(s, i) {
-	    var filter = fn(s, i, depth);
-
-	    if (isArray$1(filter) && filter.length) {
-	      eachElement(filter, fn, depth + 1);
-	    }
-	  });
-	}
-
-
-	/**
-	 * Collects self + child elements up to a given depth from a list of elements.
-	 *
-	 * @param  {djs.model.Base|Array<djs.model.Base>} elements the elements to select the children from
-	 * @param  {boolean} unique whether to return a unique result set (no duplicates)
-	 * @param  {number} maxDepth the depth to search through or -1 for infinite
-	 *
-	 * @return {Array<djs.model.Base>} found elements
-	 */
-	function selfAndChildren(elements, unique, maxDepth) {
-	  var result = [],
-	      processedChildren = [];
-
-	  eachElement(elements, function(element, i, depth) {
-	    add$1(result, element, unique);
-
-	    var children = element.children;
-
-	    // max traversal depth not reached yet
-	    if (maxDepth === -1 || depth < maxDepth) {
-
-	      // children exist && children not yet processed
-	      if (children && add$1(processedChildren, children, unique)) {
-	        return children;
-	      }
-	    }
-	  });
-
-	  return result;
-	}
-
-
-	/**
-	 * Return self + ALL children for a number of elements
-	 *
-	 * @param  {Array<djs.model.Base>} elements to query
-	 * @param  {boolean} allowDuplicates to allow duplicates in the result set
-	 *
-	 * @return {Array<djs.model.Base>} the collected elements
-	 */
-	function selfAndAllChildren(elements, allowDuplicates) {
-	  return selfAndChildren(elements, !allowDuplicates, -1);
-	}
-
 	/**
 	 * Returns the surrounding bbox for all elements in
 	 * the array or the element primitive.
@@ -7563,247 +7421,6 @@
 	  changeSupport: [ 'type', ChangeSupport ]
 	};
 
-	function SubprocessElements(eventBus, elementRegistry, canvas, elementFactory) {
-	  var attachBoundaries = function() {
-	    var secondaryShapes = elementRegistry.filter(function(el) {
-	      return is$1(el, 'bpmn:SubProcess') && el.isSecondary;
-	    });
-
-	    secondaryShapes.forEach(function(process) {
-
-	      // Add Boundary events
-	      if (process.primaryShape && process.primaryShape.attachers) {
-	        process.primaryShape.attachers.forEach(function(boundary) {
-	          var bo = getBusinessObject(boundary);
-
-	          var primary = process.primaryShape;
-
-	          var relativeXPos = (boundary.x + 15 - primary.x) / primary.width;
-	          var relativeYPos = (boundary.y + 15 - primary.y) / primary.height;
-
-	          var dx = process.x + (process.width * relativeXPos) - 15;
-	          var dy = process.y + (process.height * relativeYPos) - 15;
-
-	          var boundaryShape = elementFactory.createShape({
-	            id: bo.id + '_secondary',
-	            businessObject: bo,
-	            type: 'bpmn:BoundaryEvent',
-	            hidden: false,
-	            x: dx,
-	            y: dy,
-	            width: 30,
-	            height: 30,
-	            isFrame: false,
-	            isSecondary: true,
-	            primaryShape: boundary,
-	            di: boundary.di
-	          });
-
-	          canvas.addShape(boundaryShape, process.parent);
-
-	          if (!process.attachers) {
-	            process.attachers = [];
-	          }
-
-	          process.attachers.push(boundaryShape);
-	        });
-	      }
-	    });
-	  };
-
-	  eventBus.on('import.done', attachBoundaries);
-	}
-
-
-	SubprocessElements.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'elementFactory' ];
-
-	var defaultPosition = { x: 100, y: 50 };
-
-	function SubprocessCentering(eventBus, canvas) {
-	  var currentPlane = 'base';
-	  var positionMap = {};
-
-	  eventBus.on('plane.set', function(event) {
-
-	    var currentViewbox = canvas.viewbox();
-	    positionMap[currentPlane] = {
-	      x: currentViewbox.x,
-	      y: currentViewbox.y,
-	      zoom: currentViewbox.scale
-	    };
-
-	    var planeId = event.plane.name;
-	    var storedViewbox = positionMap[planeId];
-
-	    if (!storedViewbox) {
-	      if (!event.plane.rootElement.isImplicit) {
-	        storedViewbox = {
-	          x: 0,
-	          y: 0,
-	          zoom: 1
-	        };
-	      }
-	      else {
-	        var currentBoundingBox = canvas.getActiveLayer().getBBox();
-	        storedViewbox = {
-	          x: currentBoundingBox.x - defaultPosition.x,
-	          y: currentBoundingBox.y - defaultPosition.y,
-	          zoom: 1
-	        };
-	      }
-	    }
-
-	    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
-	        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
-
-	    if (dx !== 0 || dy !== 0) {
-	      canvas.scroll({
-	        dx: dx,
-	        dy: dy
-	      });
-	    }
-
-	    if (storedViewbox.zoom !== currentViewbox.scale) {
-	      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
-	    }
-
-	    currentPlane = planeId;
-	  });
-	}
-
-	SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];
-
-	function SubprocessCompatibility(eventBus, elementRegistry, canvas, moddle, elementFactory, bpmnjs) {
-	  this._eventBus = eventBus;
-	  this._elementRegistry = elementRegistry;
-	  this._canvas = canvas;
-	  this._bpmnjs = bpmnjs;
-	  this._moddle = moddle;
-	  this._elementFactory = elementFactory;
-
-	  var self = this;
-
-	  eventBus.on('import.done', 1500, function() {
-	    self._handleImport();
-	  });
-	}
-
-	SubprocessCompatibility.prototype._handleImport = function() {
-	  var elementRegistry = this._elementRegistry;
-	  var canvas = this._canvas;
-	  var elementFactory = this._elementFactory;
-	  var self = this;
-	  var legacyProcesses = elementRegistry.filter(function(element) {
-	    return is$1(element, 'bpmn:SubProcess') && !isExpanded(element) && element.children && element.children.length;
-	  });
-
-	  legacyProcesses.forEach(function(oldParent) {
-	    var bo = getBusinessObject(oldParent);
-
-	    var newDiagram = self.createDiagram(bo);
-
-	    var newParent = elementFactory.createRoot(
-	      {
-	        id: bo.id,
-	        type: bo.$type,
-	        businessObject: bo,
-	        di: newDiagram.plane
-	      }
-	    );
-
-	    newParent.id = newParent.id + '_plane';
-
-	    canvas.createPlane(bo.id, newParent);
-
-	    var elementsToChange = selfAndAllChildren(oldParent).filter(function(el) {
-	      return el !== oldParent;
-	    });
-
-	    self.moveElementsToRoot(elementsToChange);
-
-	    elementsToChange.forEach(function(el) {
-	      if (el.parent === oldParent) {
-	        el.parent = newParent;
-	      }
-	      el.hidden = el.parent && (el.parent.hidden || el.parent.collapsed);
-
-	      self.moveToDiPlane(el, newDiagram.plane);
-
-	      self._eventBus.fire('elements.changed', { elements: [el] });
-	    });
-	  });
-
-	};
-
-	SubprocessCompatibility.prototype.moveToDiPlane = function(element, newPlane) {
-	  var di = getDi(element);
-	  var containingDiagram = findRootDiagram(di);
-
-	  // Remove DI from old Plane and add it to the new one
-	  var parentPlaneElement = containingDiagram.plane.get('planeElement');
-	  parentPlaneElement.splice(parentPlaneElement.indexOf(di), 1);
-	  newPlane.get('planeElement').push(di);
-	};
-
-	SubprocessCompatibility.prototype.moveElementsToRoot = function(elements) {
-	  var defaultPosition = { x: 180, y: 160 },
-	      minX = Infinity,
-	      minY = Infinity;
-
-	  elements.forEach(function(el) {
-	    minX = Math.min(minX, el.x || Infinity);
-	    minY = Math.min(minY, el.y || Infinity);
-	  });
-
-	  var xOffset = defaultPosition.x - minX;
-	  var yOffset = defaultPosition.y - minY;
-
-	  elements.forEach(function(el) {
-	    if (el.waypoints) {
-	      el.waypoints.forEach(function(waypoint) {
-	        waypoint.x = waypoint.x + xOffset;
-	        waypoint.y = waypoint.y + yOffset;
-	      });
-	    } else {
-	      el.x = el.x + xOffset;
-	      el.y = el.y + yOffset;
-	    }
-	  });
-	};
-
-	SubprocessCompatibility.prototype.getDefinitions = function() {
-	  return this._bpmnjs._definitions || [];
-	};
-
-	SubprocessCompatibility.prototype.getDiagrams = function() {
-	  return this.getDefinitions().diagrams || [];
-	};
-
-	SubprocessCompatibility.prototype.createDiagram = function(bo) {
-	  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
-	  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
-	    plane: plane
-	  });
-	  plane.$parent = diagram;
-	  plane.bpmnElement = bo;
-	  diagram.$parent = this.getDefinitions();
-	  this.getDiagrams().push(diagram);
-	  return diagram;
-	};
-
-	SubprocessCompatibility.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'moddle', 'elementFactory', 'bpmnjs' ];
-
-
-	//  Util
-
-	var findRootDiagram = function(element) {
-	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
-	    return element;
-	  } else {
-	    return findRootDiagram(element.$parent);
-	  }
-	};
-
 	var css_escape = {exports: {}};
 
 	/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
@@ -7927,24 +7544,26 @@
 	}
 
 	var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
-	var ARROW_UP_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.1819805,12.4926407 L5.5003106,6.8103106 L5.5,12 L4,12 L4,4 L12,4 L12,5.5 L6.3103106,5.5003106 L12.2426407,11.4319805 C12.5355339,11.7248737 12.5355339,12.1997475 12.2426407,12.4926407 C11.9497475,12.7855339 11.4748737,12.7855339 11.1819805,12.4926407 Z"/></svg>';
 
-	function SubprocessOverlays(eventBus, elementRegistry, overlays, canvas) {
-
-	  function createBreadcrumbs(subProcess) {
-	    var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
-	    var drillUp = domify('<button class="bjs-drilldown">' + ARROW_UP_SVG + '</button>');
-	    drillUp.addEventListener('click', function() {
-	      var plane = canvas.findPlane(getBusinessObject(subProcess).id);
-	      canvas.setActivePlane(plane);
-	    });
-
-	    breadcrumbs.appendChild(drillUp);
+	/**
+	 * 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) {
+	  var breadcrumbs = domify('<ul class="bjs-breadcrumbs djs-element-hidden"></ul>');
+	  var container = canvas.getContainer();
+	  container.appendChild(breadcrumbs);
 
+	  function updateBreadcrumbs(plane) {
+	    var subProcess = elementRegistry.get(plane.name);
 	    var parents = getParentChain(subProcess);
 
 	    var path = parents.map(function(el) {
-	      var title = escapeHTML(el.name) || el.id;
+	      var title = escapeHTML(el.name || el.id);
 	      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
 
 	      link.addEventListener('click', function() {
@@ -7959,20 +7578,26 @@
 	      return link;
 	    });
 
+	    breadcrumbs.innerHTML = '';
+
+	    if (path.length > 1) {
+	      breadcrumbs.classList.remove('djs-element-hidden');
+	    } else {
+	      breadcrumbs.classList.add('djs-element-hidden');
+	    }
+
 	    path.forEach(function(el) {
 	      breadcrumbs.appendChild(el);
 	    });
-
-	    overlays.add(subProcess, {
-	      position: {
-	        top: -30,
-	        left: -10
-	      },
-	      html: breadcrumbs
-	    });
 	  }
 
-	  var createDrilldown = function(element) {
+	  eventBus.on('plane.set', function(event) {
+	    var plane = event.plane;
+
+	    updateBreadcrumbs(plane);
+	  });
+
+	  var createOverlay = function(element) {
 	    var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
 
 	    html.addEventListener('click', function() {
@@ -7993,11 +7618,7 @@
 	      if (is$1(element, 'bpmn:SubProcess')
 	          && element.collapsed
 	          && canvas.getPlane(element.id)) {
-	        createDrilldown(element);
-	      }
-
-	      if (is$1(element, 'bpmn:SubProcess') && element.isSecondary) {
-	        createBreadcrumbs(element);
+	        createOverlay(element);
 	      }
 	    });
 	  };
@@ -8009,9 +7630,10 @@
 	  });
 	}
 
-	SubprocessOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+	DrilldownOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
 
 
+	// helpers
 	var getParentChain = function(child) {
 	  var bo = getBusinessObject(child);
 
@@ -8026,124 +7648,244 @@
 	  return parents.reverse();
 	};
 
-	var FLOW_LENGTH = 50;
-	var HIGH_RENDER_PRIORITY = 2000;
+	/**
+	 * 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 = {};
 
-	function SubprocessFlows(eventBus, config) {
+	  eventBus.on('plane.set', function(event) {
+	    var currentViewbox = canvas.viewbox();
+	    positionMap[currentPlane] = {
+	      x: currentViewbox.x,
+	      y: currentViewbox.y,
+	      zoom: currentViewbox.scale
+	    };
 
-	  var mutedStrokeColor = (config && config.mutedStrokeColor) || '#dddddd';
+	    var planeId = event.plane.name;
+	    var storedViewbox = positionMap[planeId] || { x: 0, y: 0, zoom: 1 };
 
-	  function drawFakeFlows(element, parentGfx) {
-	    var primary = element.primaryShape;
+	    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
+	        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
 
-	    var drawFakeConnection = function(connection, isOutgoing) {
+	    if (dx !== 0 || dy !== 0) {
+	      canvas.scroll({
+	        dx: dx,
+	        dy: dy
+	      });
+	    }
 
-	      var segment;
-	      if (isOutgoing) {
-	        segment = connection.waypoints.slice(0, 2);
+	    if (storedViewbox.zoom !== currentViewbox.scale) {
+	      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
+	    }
 
-	        // Reverse order for normalizing
-	        segment = segment.reverse();
-	      } else {
-	        segment = connection.waypoints.slice(connection.waypoints.length - 2);
-	      }
+	    currentPlane = planeId;
+	  });
+	}
 
-	      var endpoint = segment[1];
+	DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];
 
-	      var relativePosition = {
-	        x: (endpoint.x - primary.x) / primary.width,
-	        y: (endpoint.y - primary.y) / primary.height
-	      };
+	var DEFAULT_POSITION = {
+	  x: 180,
+	  y: 160
+	};
 
-	      var anchorPoint = {
-	        x: endpoint.x - (element.width * relativePosition.x),
-	        y: endpoint.y - (element.height * relativePosition.y)
-	      };
+	/**
+	 * Hook into `import.render.start` and create new planes for diagrams with
+	 * collapsed subprocesses and all dis on the same plane.
+	 *
+	 * @param {eventBus} eventBus
+	 * @param {moddle} moddle
+	 */
+	function SubprocessCompatibility(eventBus, moddle) {
+	  this._eventBus = eventBus;
+	  this._moddle = moddle;
 
-	      var newWaypoints = segment.map(function(el) {
-	        return { x: el.x - anchorPoint.x, y: el.y - anchorPoint.y };
-	      });
+	  var self = this;
 
-	      newWaypoints[0] = normalizeLength(newWaypoints[1], newWaypoints[0], FLOW_LENGTH);
+	  eventBus.on('import.render.start', 1500, function(e, context) {
+	    self.handleImport(context.definitions);
+	  });
+	}
 
-	      var attrs = {
-	        stroke: mutedStrokeColor
-	      };
+	SubprocessCompatibility.prototype.handleImport = function(definitions) {
+	  if (!definitions.diagrams) {
+	    return;
+	  }
 
-	      if (isOutgoing) {
+	  var self = this;
+	  this._definitions = definitions;
+	  this._processToDiagramMap = {};
 
-	        // Reverse order again for correct end marker position
-	        newWaypoints = newWaypoints.reverse();
-	      } else {
+	  definitions.diagrams.forEach(function(diagram) {
+	    if (!diagram.plane || !diagram.plane.bpmnElement) {
+	      return;
+	    }
 
-	        // Remove start marker for incoming flows
-	        attrs.markerStart = undefined;
-	      }
+	    self._processToDiagramMap[diagram.plane.bpmnElement.id] = diagram;
+	  });
 
-	      eventBus.fire('render.connection', {
-	        type: connection.type,
-	        gfx: parentGfx,
-	        element: {
-	          type: connection.type,
-	          waypoints: newWaypoints,
-	          di: connection.di,
-	          businessObject: connection.businessObject
-	        },
-	        attrs: attrs
-	      });
-	    };
+	  var newDiagrams = [];
+	  definitions.diagrams.forEach(function(diagram) {
+	    var createdDiagrams = self.createNewDiagrams(diagram.plane);
+	    Array.prototype.push.apply(newDiagrams, createdDiagrams);
+	  });
 
-	    primary.incoming && primary.incoming.forEach(function(connection) {
-	      drawFakeConnection(connection, false);
-	    });
+	  newDiagrams.forEach(function(diagram) {
+	    self.movePlaneElementsToOrigin(diagram.plane);
+	  });
+	};
 
-	    primary.outgoing && primary.outgoing.forEach(function(connection) {
-	      drawFakeConnection(connection, true);
-	    });
-	  }
 
-	  eventBus.on([ 'render.shape' ], HIGH_RENDER_PRIORITY, function(evt, context) {
-	    var element = context.element,
-	        visuals = context.gfx;
+	/**
+	 * Moves all DI elements from collapsed subprocesses to a new plane.
+	 *
+	 * @param {Object} plane
+	 * @return {Array} new diagrams created for the collapsed subprocesses
+	 */
+	SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
+	  var self = this;
+
+	  var collapsedElements = [];
+	  var elementsToMove = [];
 
-	    if (element.isSecondary && element.primaryShape) {
-	      drawFakeFlows(element, visuals);
+	  plane.get('planeElement').forEach(function(diElement) {
+	    var bo = diElement.bpmnElement;
+	    var parent = bo.$parent;
+
+	    if (is$1(bo, 'bpmn:SubProcess') && !diElement.isExpanded) {
+	      collapsedElements.push(bo);
 	    }
 
+	    if (is$1(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
+
+	      // don't change the array while we iterate over it
+	      elementsToMove.push({ diElement: diElement, parent: parent });
+	    }
 	  });
 
-	}
+	  var newDiagrams = [];
 
-	SubprocessFlows.$inject = [ 'eventBus', 'config' ];
+	  elementsToMove.forEach(function(element) {
+	    var diElement = element.diElement;
+	    var parent = element.parent;
 
+	    // parent is expanded, get nearest collapsed parent
+	    while (parent && !collapsedElements.includes(parent)) {
+	      parent = parent.$parent;
+	    }
 
-	// helpers
+	    // false positive, all parents are expanded
+	    if (!parent) {
+	      return;
+	    }
 
-	function normalizeLength(fixedPoint, variablePoint, length) {
-	  var dx = fixedPoint.x - variablePoint.x,
-	      dy = fixedPoint.y - variablePoint.y,
-	      totalDistance = Math.abs(dx) + Math.abs(dy);
+	    var diagram = self._processToDiagramMap[parent.id];
+	    if (!diagram) {
+	      diagram = self.createDiagram(parent);
+	      self._processToDiagramMap[parent.id] = diagram;
+	      newDiagrams.push(diagram);
+	    }
 
-	  dx = dx / totalDistance;
-	  dy = dy / totalDistance;
+	    self.moveToDiPlane(diElement, diagram.plane);
+	  });
 
-	  dx *= length;
-	  dy *= length;
+	  return newDiagrams;
+	};
 
-	  return {
-	    x: fixedPoint.x - dx,
-	    y: fixedPoint.y - dy
+	SubprocessCompatibility.prototype.movePlaneElementsToOrigin = function(plane) {
+	  var elements = plane.get('planeElement');
+
+	  // get bounding box of all elements
+	  var planeBounds = getPlaneBounds(plane);
+
+	  var offset = {
+	    x: planeBounds.x - DEFAULT_POSITION.x,
+	    y: planeBounds.y - DEFAULT_POSITION.y
+	  };
+
+	  elements.forEach(function(diElement) {
+	    if (diElement.waypoint) {
+	      diElement.waypoint.forEach(function(waypoint) {
+	        waypoint.x = waypoint.x - offset.x;
+	        waypoint.y = waypoint.y - offset.y;
+	      });
+	    } else if (diElement.bounds) {
+	      diElement.bounds.x = diElement.bounds.x - offset.x;
+	      diElement.bounds.y = diElement.bounds.y - offset.y;
+	    }
+	  });
+	};
+
+
+	SubprocessCompatibility.prototype.moveToDiPlane = function(diElement, newPlane) {
+	  var containingDiagram = findRootDiagram(diElement);
+
+	  // remove DI from old Plane and add it to the new one
+	  var parentPlaneElement = containingDiagram.plane.get('planeElement');
+	  parentPlaneElement.splice(parentPlaneElement.indexOf(diElement), 1);
+	  newPlane.get('planeElement').push(diElement);
+	};
+
+
+	SubprocessCompatibility.prototype.createDiagram = function(bo) {
+	  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
+	  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
+	    plane: plane
+	  });
+	  plane.$parent = diagram;
+	  plane.bpmnElement = bo;
+	  diagram.$parent = this._definitions;
+	  this._definitions.diagrams.push(diagram);
+	  return diagram;
+	};
+
+	SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
+
+
+	// helpers
+
+	function findRootDiagram(element) {
+	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
+	    return element;
+	  } else {
+	    return findRootDiagram(element.$parent);
+	  }
+	}
+
+	function getPlaneBounds(plane) {
+	  var planeTrbl = {
+	    top: Infinity,
+	    right: -Infinity,
+	    bottom: -Infinity,
+	    left: Infinity
 	  };
+
+	  plane.planeElement.forEach(function(element) {
+	    if (!element.bounds) {
+	      return;
+	    }
+
+	    var trbl = asTRBL(element.bounds);
+
+	    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
+	    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
+	  });
+
+	  return asBounds(planeTrbl);
 	}
 
-	var SubprocessNavigationModule = {
+	var DrilldownModdule = {
 	  __depends__: [ OverlaysModule, ChangeSupportModule ],
-	  __init__: [ 'subprocessElements', 'subprocessOverlays', 'subprocessCompatibility', 'subprocessCentering', 'subprocessFlows' ],
-	  subprocessElements: [ 'type', SubprocessElements ],
-	  subprocessOverlays: [ 'type', SubprocessOverlays ],
-	  subprocessCompatibility: [ 'type', SubprocessCompatibility ],
-	  subprocessCentering: [ 'type', SubprocessCentering ],
-	  subprocessFlows: ['type', SubprocessFlows]
+	  __init__: [ 'drilldownOverlays', 'drilldownCentering', 'subprocessCompatibility'],
+	  drilldownOverlays: [ 'type', DrilldownOverlays ],
+	  drilldownCentering: [ 'type', DrilldownCentering ],
+	  subprocessCompatibility: [ 'type', SubprocessCompatibility ]
 	};
 
 	var CLASS_PATTERN = /^class /;
@@ -8785,6 +8527,9 @@
 	var BASE_LAYER = 'base';
 	var HIDDEN_MARKER = 'djs-element-hidden';
 
+	// render plane contents behind additional layers
+	var PLANE_LAYER_INDEX = -10;
+
 
 	var REQUIRED_MODEL_ATTRS = {
 	  shape: [ 'x', 'y', 'width', 'height' ],
@@ -8883,7 +8628,8 @@
 	    'connection.added',
 	    'shape.removed',
 	    'connection.removed',
-	    'elements.changed'
+	    'elements.changed',
+	    'plane.set'
 	  ], function() {
 	    delete this._cachedViewbox;
 	  }, this);
@@ -9024,9 +8770,7 @@
 	    throw new Error('must specify a name');
 	  }
 
-	  var plane = this._planes[name];
-
-	  return plane;
+	  return this._planes[name];
 	};
 
 	/**
@@ -9055,7 +8799,7 @@
 	    };
 	  }
 
-	  var svgLayer = this.getLayer(name);
+	  var svgLayer = this.getLayer(name, PLANE_LAYER_INDEX);
 	  classes$1(svgLayer).add(HIDDEN_MARKER);
 
 	  var plane = this._planes[name] = {
@@ -9664,9 +9408,10 @@
 	  if (!box) {
 
 	    // compute the inner box based on the
-	    // diagrams default layer. This allows us to exclude
+	    // diagrams active plane. This allows us to exclude
 	    // external components, such as overlays
-	    innerBox = this.getDefaultLayer().getBBox();
+
+	    innerBox = (this._activePlane && this._activePlane.layer.getBBox()) || {};
 
 	    transform = transform$1(viewport);
 	    matrix = transform ? transform.matrix : createMatrix();
@@ -9682,10 +9427,10 @@
 	      height: outerBox.height / scale,
 	      scale: scale,
 	      inner: {
-	        width: innerBox.width,
-	        height: innerBox.height,
-	        x: innerBox.x,
-	        y: innerBox.y
+	        width: innerBox.width || 0,
+	        height: innerBox.height || 0,
+	        x: innerBox.x || 0,
+	        y: innerBox.y || 0
 	      },
 	      outer: outerBox
 	    };
@@ -20799,7 +20544,7 @@
 	  TranslateModule,
 	  SelectionModule,
 	  OverlaysModule,
-	  SubprocessNavigationModule
+	  DrilldownModdule
 	];
 
 	// default moddle extensions the viewer is composed of