bpmn-js 8.7.3 → 8.8.3

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v8.7.3
+ * bpmn-js - bpmn-modeler v8.8.3
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-08-27
+ * Date: 2021-12-03
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2337,13 +2337,14 @@
 	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
 	    var type = evt.type,
 	        element = context.element,
-	        visuals = context.gfx;
+	        visuals = context.gfx,
+	        attrs = context.attrs;
 
 	    if (self.canRender(element)) {
 	      if (type === 'render.shape') {
-	        return self.drawShape(visuals, element);
+	        return self.drawShape(visuals, element, attrs);
 	      } else {
-	        return self.drawConnection(visuals, element);
+	        return self.drawConnection(visuals, element, attrs);
 	      }
 	    }
 	  });
@@ -2803,7 +2804,7 @@
 	  return true;
 	};
 
-	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element) {
+	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
 	  var rect = create$1('rect');
 
 	  attr(rect, {
@@ -2814,9 +2815,9 @@
 	  });
 
 	  if (isFrameElement$1(element)) {
-	    attr(rect, this.FRAME_STYLE);
+	    attr(rect, assign({}, this.FRAME_STYLE, attrs || {}));
 	  } else {
-	    attr(rect, this.SHAPE_STYLE);
+	    attr(rect, assign({}, this.SHAPE_STYLE, attrs || {}));
 	  }
 
 	  append(visuals, rect);
@@ -2824,9 +2825,9 @@
 	  return rect;
 	};
 
-	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection) {
+	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
-	  var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
+	  var line = createLine(connection.waypoints, assign({}, this.CONNECTION_STYLE, attrs || {}));
 	  append(visuals, line);
 
 	  return line;
@@ -4310,6 +4311,14 @@
 	  return isNumber(number) ? number + 'px' : number;
 	}
 
+	function findRoot(element) {
+	  while (element.parent) {
+	    element = element.parent;
+	  }
+
+	  return element;
+	}
+
 	/**
 	 * Creates a HTML container element for a SVG element with
 	 * the given configuration
@@ -4355,6 +4364,11 @@
 	}
 
 	var BASE_LAYER = 'base';
+	var HIDDEN_MARKER = 'djs-element-hidden';
+
+	// render plane contents behind utility layers
+	var PLANE_LAYER_INDEX = 0;
+	var UTILITY_LAYER_INDEX = 1;
 
 
 	var REQUIRED_MODEL_ATTRS = {
@@ -4391,23 +4405,23 @@
 	  'elementRegistry'
 	];
 
+	/**
+	 * Creates a <svg> element that is wrapped into a <div>.
+	 * This way we are always able to correctly figure out the size of the svg element
+	 * by querying the parent node.
+
+	 * (It is not possible to get the size of a svg element cross browser @ 2014-04-01)
 
+	 * <div class="djs-container" style="width: {desired-width}, height: {desired-height}">
+	 *   <svg width="100%" height="100%">
+	 *    ...
+	 *   </svg>
+	 * </div>
+	 */
 	Canvas.prototype._init = function(config) {
 
 	  var eventBus = this._eventBus;
 
-	  // Creates a <svg> element that is wrapped into a <div>.
-	  // This way we are always able to correctly figure out the size of the svg element
-	  // by querying the parent node.
-	  //
-	  // (It is not possible to get the size of a svg element cross browser @ 2014-04-01)
-	  //
-	  // <div class="djs-container" style="width: {desired-width}, height: {desired-height}">
-	  //   <svg width="100%" height="100%">
-	  //    ...
-	  //   </svg>
-	  // </div>
-
 	  // html container
 	  var container = this._container = createContainer(config);
 
@@ -4419,6 +4433,7 @@
 	  var viewport = this._viewport = createGroup(svg, 'viewport');
 
 	  this._layers = {};
+	  this._planes = {};
 
 	  // debounce canvas.viewbox.changed events
 	  // for smoother diagram interaction
@@ -4453,7 +4468,8 @@
 	    'connection.added',
 	    'shape.removed',
 	    'connection.removed',
-	    'elements.changed'
+	    'elements.changed',
+	    'plane.set'
 	  ], function() {
 	    delete this._cachedViewbox;
 	  }, this);
@@ -4477,7 +4493,8 @@
 	  delete this._svg;
 	  delete this._container;
 	  delete this._layers;
-	  delete this._rootElement;
+	  delete this._planes;
+	  delete this._activePlane;
 	  delete this._viewport;
 	};
 
@@ -4492,12 +4509,16 @@
 	    var type = getType(element);
 
 	    if (type === 'root') {
-	      self.setRootElement(null, true);
+	      self.setRootElementForPlane(null, self.findPlane(element), true);
 	    } else {
 	      self._removeElement(element, type);
 	    }
 	  });
 
+	  // remove all planes
+	  this._activePlane = null;
+	  this._planes = {};
+
 	  // force recomputation of view box
 	  delete this._cachedViewbox;
 	};
@@ -4509,7 +4530,7 @@
 	 * @returns {SVGElement}
 	 */
 	Canvas.prototype.getDefaultLayer = function() {
-	  return this.getLayer(BASE_LAYER, 0);
+	  return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
 	};
 
 	/**
@@ -4558,8 +4579,8 @@
 	 */
 	Canvas.prototype._createLayer = function(name, index) {
 
-	  if (!index) {
-	    index = 0;
+	  if (typeof index === 'undefined') {
+	    index = UTILITY_LAYER_INDEX;
 	  }
 
 	  var childIndex = reduce(this._layers, function(childIndex, layer) {
@@ -4577,6 +4598,140 @@
 
 	};
 
+	/**
+	 * 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);
+	  }
+
+	  this._activePlane = plane;
+
+	  // show current Plane
+	  classes(plane.layer).remove(HIDDEN_MARKER);
+
+	  if (plane.rootElement) {
+	    this._elementRegistry.updateGraphics(plane.rootElement, this._svg, true);
+	  }
+
+	  this._eventBus.fire('plane.set', { plane: plane });
+
+	  return plane;
+	};
+
+	/**
+	 * Returns the currently active layer
+	 *
+	 * @returns {SVGElement}
+	 */
+
+	Canvas.prototype.getActiveLayer = function() {
+	  return this.getActivePlane().layer;
+	};
+
+	/**
+	 * 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 plane;
+	};
+
+	/**
+	 * Returns the plane which contains the given element.
+	 *
+	 * @param {string|djs.model.Base} element
+	 *
+	 * @return {Object} plane descriptor with { layer, rootElement, name }
+	 */
+	Canvas.prototype.findPlane = function(element) {
+	  if (typeof element === 'string') {
+	    element = this._elementRegistry.get(element);
+	  }
+
+	  var root = findRoot(element);
+
+	  return find(this._planes, function(plane) {
+	    return plane.rootElement === root;
+	  });
+	};
+
 	/**
 	 * Returns the html element that encloses the
 	 * drawing canvas.
@@ -4698,11 +4853,9 @@
 	};
 
 	Canvas.prototype.getRootElement = function() {
-	  if (!this._rootElement) {
-	    this.setRootElement({ id: '__implicitroot', children: [] });
-	  }
+	  var plane = this.getActivePlane();
 
-	  return this._rootElement;
+	  return plane.rootElement;
 	};
 
 
@@ -4719,12 +4872,41 @@
 	 * @return {Object|djs.model.Root} new root element
 	 */
 	Canvas.prototype.setRootElement = function(element, override) {
+	  var activePlane = this._activePlane;
+
+	  if (activePlane) {
+	    return this.setRootElementForPlane(element, activePlane, override);
+	  } else {
+	    var basePlane = this.createPlane(BASE_LAYER, element);
+
+	    this.setActivePlane(basePlane);
+
+	    return basePlane.rootElement;
+	  }
+	};
+
+
+	/**
+	 * 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
+	 *
+	 * @return {Object|djs.model.Root} new root element
+	 */
+	Canvas.prototype.setRootElementForPlane = function(element, plane, override) {
+
+	  if (typeof plane === 'string') {
+	    plane = this.getPlane(plane);
+	  }
 
 	  if (element) {
 	    this._ensureValid('root', element);
 	  }
 
-	  var currentRoot = this._rootElement,
+	  var currentRoot = plane.rootElement,
 	      elementRegistry = this._elementRegistry,
 	      eventBus = this._eventBus;
 
@@ -4741,23 +4923,26 @@
 	  }
 
 	  if (element) {
-	    var gfx = this.getDefaultLayer();
+	    var gfx = plane.layer;
 
 	    // resemble element add event sequence
 	    eventBus.fire('root.add', { element: element });
 
-	    elementRegistry.add(element, gfx, this._svg);
+	    elementRegistry.add(element, gfx);
 
 	    eventBus.fire('root.added', { element: element, gfx: gfx });
+
+	    // associate SVG with root element when active
+	    if (plane === this._activePlane) {
+	      this._elementRegistry.updateGraphics(element, this._svg, true);
+	    }
 	  }
 
-	  this._rootElement = element;
+	  plane.rootElement = element;
 
 	  return element;
 	};
 
-
-
 	// add functionality //////////////////////
 
 	Canvas.prototype._ensureValid = function(type, element) {
@@ -5063,9 +5248,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();
@@ -5081,10 +5267,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
 	    };
@@ -5143,6 +5329,13 @@
 	 */
 	Canvas.prototype.scrollToElement = function(element, padding) {
 	  var defaultPadding = 100;
+
+	  // switch to correct Plane
+	  var targetPlane = this.findPlane(element);
+	  if (targetPlane !== this._activePlane) {
+	    this.setActivePlane(targetPlane);
+	  }
+
 	  if (!padding) {
 	    padding = {};
 	  }
@@ -5163,7 +5356,7 @@
 	      zoom = this.zoom(),
 	      dx, dy;
 
-	  // Shrink viewboxBounds with padding
+	  // shrink viewboxBounds with padding
 	  viewboxBounds.y += padding.top / zoom;
 	  viewboxBounds.x += padding.left / zoom;
 	  viewboxBounds.width -= (padding.right + padding.left) / zoom;
@@ -5485,6 +5678,29 @@
 	  this.add(element, gfx, secondaryGfx);
 	};
 
+	/**
+	 * Update the graphics of an element
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {SVGElement} gfx
+	 * @param {boolean} [secondary=false] whether to update the secondary connected element
+	 */
+	ElementRegistry.prototype.updateGraphics = function(filter, gfx, secondary) {
+	  var id = filter.id || filter;
+
+	  var container = this._elements[id];
+
+	  if (secondary) {
+	    container.secondaryGfx = gfx;
+	  } else {
+	    container.gfx = gfx;
+	  }
+
+	  attr(gfx, ELEMENT_ID, id);
+
+	  return gfx;
+	};
+
 	/**
 	 * Return the model element for a given id or graphics.
 	 *
@@ -6592,12 +6808,11 @@
 	    if (returnValue === false) {
 	      event.preventDefault();
 	    }
-	  } catch (e) {
-	    if (!this.handleError(e)) {
-	      console.error('unhandled error in event listener');
-	      console.error(e.stack);
+	  } catch (error) {
+	    if (!this.handleError(error)) {
+	      console.error('unhandled error in event listener', error);
 
-	      throw e;
+	      throw error;
 	    }
 	  }
 
@@ -19294,8 +19509,8 @@
 
 	// helpers //////////////////////
 
-	// copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
-	var tokenRegex = /\{([^}]+)\}/g,
+	// copied and adjusted from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
+	var tokenRegex = /\{([^{}]+)\}/g,
 	    objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
 
 	function replacer(all, key, obj) {
@@ -20519,9 +20734,10 @@
 	 *
 	 * @param {EventBus} eventBus the event bus
 	 */
-	function Selection(eventBus) {
+	function Selection(eventBus, canvas) {
 
 	  this._eventBus = eventBus;
+	  this._canvas = canvas;
 
 	  this._selectedElements = [];
 
@@ -20532,12 +20748,12 @@
 	    self.deselect(element);
 	  });
 
-	  eventBus.on([ 'diagram.clear' ], function(e) {
+	  eventBus.on([ 'diagram.clear', 'plane.set' ], function(e) {
 	    self.select(null);
 	  });
 	}
 
-	Selection.$inject = [ 'eventBus' ];
+	Selection.$inject = [ 'eventBus', 'canvas' ];
 
 
 	Selection.prototype.deselect = function(element) {
@@ -20583,6 +20799,14 @@
 	    elements = elements ? [ elements ] : [];
 	  }
 
+	  var canvas = this._canvas;
+
+	  elements = elements.filter(function(element) {
+	    var plane = canvas.findPlane(element);
+
+	    return plane === canvas.getActivePlane();
+	  });
+
 	  // selection may be cleared by passing an empty array or null
 	  // to the method
 	  if (add) {
@@ -21251,6 +21475,13 @@
 	    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);
+	  }
+
 	  overlay.htmlContainer = htmlContainer;
 
 	  overlayContainer.overlays.push(overlay);
@@ -21265,22 +21496,26 @@
 
 	Overlays.prototype._updateOverlayVisibilty = function(overlay, viewbox) {
 	  var show = overlay.show,
+	      plane = overlay.plane,
 	      minZoom = show && show.minZoom,
 	      maxZoom = show && show.maxZoom,
 	      htmlContainer = overlay.htmlContainer,
+	      activePlane = this._canvas.getActivePlane(),
 	      visible = true;
 
-	  if (show) {
+	  if (plane !== activePlane) {
+	    visible = false;
+	  } else if (show) {
 	    if (
 	      (isDefined(minZoom) && minZoom > viewbox.scale) ||
 	      (isDefined(maxZoom) && maxZoom < viewbox.scale)
 	    ) {
 	      visible = false;
 	    }
-
-	    setVisible$1(htmlContainer, visible);
 	  }
 
+	  setVisible$1(htmlContainer, visible);
+
 	  this._updateOverlayScale(overlay, viewbox);
 	};
 
@@ -21404,6 +21639,12 @@
 	  });
 
 
+	  eventBus.on('plane.set', function(e) {
+	    forEach(self._overlays, function(el) {
+	      setVisible$1(el.htmlContainer, el.plane === e.plane);
+	    });
+	  });
+
 	  // clear overlays with diagram
 
 	  eventBus.on('diagram.clear', this.clear, this);
@@ -21553,8 +21794,9 @@
 	var KEYDOWN_EVENT = 'keyboard.keydown',
 	    KEYUP_EVENT = 'keyboard.keyup';
 
-	var DEFAULT_PRIORITY$4 = 1000;
+	var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
 
+	var DEFAULT_PRIORITY$4 = 1000;
 
 	/**
 	 * A keyboard abstraction that may be activated and
@@ -21625,10 +21867,9 @@
 	};
 
 	Keyboard.prototype._keyHandler = function(event, type) {
-	  var target = event.target,
-	      eventBusResult;
+	  var eventBusResult;
 
-	  if (isInput(target)) {
+	  if (this._isEventIgnored(event)) {
 	    return;
 	  }
 
@@ -21643,6 +21884,29 @@
 	  }
 	};
 
+	Keyboard.prototype._isEventIgnored = function(event) {
+	  return isInput(event.target) && this._isModifiedKeyIgnored(event);
+	};
+
+	Keyboard.prototype._isModifiedKeyIgnored = function(event) {
+	  if (!isCmd(event)) {
+	    return true;
+	  }
+
+	  var allowedModifiers = this._getAllowedModifiers(event.target);
+	  return !allowedModifiers.includes(event.key);
+	};
+
+	Keyboard.prototype._getAllowedModifiers = function(element) {
+	  var modifierContainer = closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
+
+	  if (!modifierContainer || (this._node && !this._node.contains(modifierContainer))) {
+	    return [];
+	  }
+
+	  return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
+	};
+
 	Keyboard.prototype.bind = function(node) {
 
 	  // make sure that the keyboard is only bound once to the DOM
@@ -25639,7 +25903,7 @@
 	/**
 	 * Executes the alignment of a selection of elements
 	 *
-	 * @param  {Array} elements [description]
+	 * @param  {Array} elements
 	 * @param  {string} type left|right|center|top|bottom|middle
 	 */
 	AlignElements$1.prototype.trigger = function(elements, type) {
@@ -30130,7 +30394,7 @@
 
 	  classes(gfx).add(MARKER_CONNECTION_PREVIEW);
 
-	  append(this._canvas.getDefaultLayer(), gfx);
+	  append(this._canvas.getActiveLayer(), gfx);
 
 	  return gfx;
 	};
@@ -31847,13 +32111,13 @@
 	      dragGroup = context.dragGroup = createDragGroup(elements);
 	    }
 
-	    var defaultLayer;
+	    var activeLayer;
 
 	    if (hover) {
 	      if (!dragGroup.parentNode) {
-	        defaultLayer = canvas.getDefaultLayer();
+	        activeLayer = canvas.getActiveLayer();
 
-	        append(defaultLayer, dragGroup);
+	        append(activeLayer, dragGroup);
 	      }
 
 	      translate$2(dragGroup, event.x, event.y);
@@ -33529,11 +33793,16 @@
 
 	  var propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);
 
-	  // do NOT copy Ids and references
-	  if (propertyDescriptor.isId || propertyDescriptor.isReference) {
+	  // do NOT copy references
+	  if (propertyDescriptor.isReference) {
 	    return;
 	  }
 
+	  // copy id
+	  if (propertyDescriptor.isId) {
+	    return this._copyId(property, parent);
+	  }
+
 	  // copy arrays
 	  if (isArray$2(property)) {
 	    return reduce(property, function(childProperties, childProperty) {
@@ -33572,6 +33841,18 @@
 	  return property;
 	};
 
+	ModdleCopy.prototype._copyId = function(id, element) {
+
+	  // disallow if already taken
+	  if (this._moddle.ids.assigned(id)) {
+	    return;
+	  } else {
+
+	    this._moddle.ids.claim(id, element);
+	    return id;
+	  }
+	};
+
 	// helpers //////////
 
 	function getPropertyNames(descriptor, keepDefaultProperties) {
@@ -36321,8 +36602,8 @@
 	/**
 	 * Distributes the elements with a given orientation
 	 *
-	 * @param  {Array} elements    [description]
-	 * @param  {string} orientation [description]
+	 * @param  {Array} elements
+	 * @param  {string} orientation
 	 */
 	DistributeElements$1.prototype.trigger = function(elements, orientation) {
 	  var modeling = this._modeling;
@@ -36456,11 +36737,11 @@
 	/**
 	 * Returns the min and max values for an element
 	 *
-	 * @param  {[type]} element   [description]
-	 * @param  {[type]} axis      [description]
-	 * @param  {[type]} dimension [description]
+	 * @param  {Bounds} element
+	 * @param  {string} axis
+	 * @param  {string} dimension
 	 *
-	 * @return {[type]}           [description]
+	 * @return {{ min: number, max: number }}
 	 */
 	DistributeElements$1.prototype._findRange = function(element) {
 	  var axis = element[this._axis],
@@ -38562,7 +38843,7 @@
 	        frame = context.frame;
 
 	    if (!frame) {
-	      frame = context.frame = previewSupport.addFrame(shape, canvas.getDefaultLayer());
+	      frame = context.frame = previewSupport.addFrame(shape, canvas.getActiveLayer());
 
 	      canvas.addMarker(shape, MARKER_RESIZING$1);
 	    }
@@ -41020,12 +41301,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));
 	      }
 	    }
@@ -43173,6 +43454,49 @@
 	  'selection'
 	];
 
+	var HIGH_PRIORITY$8 = 1500;
+
+	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
+
+	var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };
+
+	var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };
+
+	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
+
+	/**
+	 * Set minimum bounds/resize constraints on resize.
+	 *
+	 * @param {EventBus} eventBus
+	 */
+	function ResizeBehavior(eventBus) {
+	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
+	    var context = event.context,
+	        shape = context.shape,
+	        direction = context.direction,
+	        balanced = context.balanced;
+
+	    if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
+	      context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
+	    }
+
+	    if (is$1(shape, 'bpmn:Participant')) {
+	      context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
+	    }
+
+	    if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
+	      context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
+	    }
+
+	    if (is$1(shape, 'bpmn:TextAnnotation')) {
+	      context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
+	    }
+	  });
+	}
+
+	ResizeBehavior.$inject = [ 'eventBus' ];
+
+
 	var abs$2 = Math.abs,
 	    min = Math.min,
 	    max$2 = Math.max;
@@ -43200,7 +43524,6 @@
 	    LANE_TOP_PADDING = 20,
 	    LANE_BOTTOM_PADDING = 20;
 
-
 	function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
 	  var lanesRoot = getLanesRoot(laneShape);
 
@@ -43293,49 +43616,6 @@
 	  };
 	}
 
-	var HIGH_PRIORITY$8 = 1500;
-
-	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
-
-	var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };
-
-	var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };
-
-	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
-
-
-	/**
-	 * Set minimum bounds/resize constraints on resize.
-	 *
-	 * @param {EventBus} eventBus
-	 */
-	function ResizeBehavior(eventBus) {
-	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
-	    var context = event.context,
-	        shape = context.shape,
-	        direction = context.direction,
-	        balanced = context.balanced;
-
-	    if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
-	      context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
-	    }
-
-	    if (is$1(shape, 'bpmn:Participant')) {
-	      context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
-	    }
-
-	    if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
-	      context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
-	    }
-
-	    if (is$1(shape, 'bpmn:TextAnnotation')) {
-	      context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
-	    }
-	  });
-	}
-
-	ResizeBehavior.$inject = [ 'eventBus' ];
-
 	var SLIGHTLY_HIGHER_PRIORITY = 1001;
 
 
@@ -47512,7 +47792,7 @@
 	      var dragGroup = create$1('g');
 	      attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));
 
-	      append(canvas.getDefaultLayer(), dragGroup);
+	      append(canvas.getActiveLayer(), dragGroup);
 
 	      // shapes
 	      addPreviewGfx(movingShapes, dragGroup);
@@ -47574,7 +47854,7 @@
 	      var frameGroup = create$1('g');
 	      attr(frameGroup, styles.cls('djs-frame-group', [ 'no-events' ]));
 
-	      append(canvas.getDefaultLayer(), frameGroup);
+	      append(canvas.getActiveLayer(), frameGroup);
 
 	      var frames = [];
 
@@ -53951,9 +54231,9 @@
 
 	      attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));
 
-	      var defaultLayer = canvas.getDefaultLayer();
+	      var activeLayer = canvas.getActiveLayer();
 
-	      append(defaultLayer, dragGroup);
+	      append(activeLayer, dragGroup);
 
 	      context.dragGroup = dragGroup;
 	    }
@@ -54576,7 +54856,7 @@
 	  var visuals = {
 
 	    create: function(context) {
-	      var container = canvas.getDefaultLayer(),
+	      var container = canvas.getActiveLayer(),
 	          frame;
 
 	      frame = context.frame = create$1('rect');