camunda-bpmn-js 0.11.3 → 0.12.1

package/dist/camunda-platform-modeler.development.js

@@ -4512,6 +4512,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
@@ -4557,6 +4565,7 @@
 	}
 
 	var BASE_LAYER = 'base';
+	var HIDDEN_MARKER = 'djs-element-hidden';
 
 
 	var REQUIRED_MODEL_ATTRS = {
@@ -4593,23 +4602,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);
 
@@ -4621,6 +4630,7 @@
 	  var viewport = this._viewport = createGroup(svg, 'viewport');
 
 	  this._layers = {};
+	  this._planes = {};
 
 	  // debounce canvas.viewbox.changed events
 	  // for smoother diagram interaction
@@ -4679,7 +4689,8 @@
 	  delete this._svg;
 	  delete this._container;
 	  delete this._layers;
-	  delete this._rootElement;
+	  delete this._planes;
+	  delete this._activePlane;
 	  delete this._viewport;
 	};
 
@@ -4694,12 +4705,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;
 	};
@@ -4711,7 +4726,7 @@
 	 * @returns {SVGElement}
 	 */
 	Canvas.prototype.getDefaultLayer = function() {
-	  return this.getLayer(BASE_LAYER, 0);
+	  return this.getLayer(BASE_LAYER);
 	};
 
 	/**
@@ -4779,6 +4794,142 @@
 
 	};
 
+	/**
+	 * Returns a plane that is used to draw elements on it.
+	 *
+	 * @param {string} name
+	 *
+	 * @return {Object} plane descriptor with { layer, rootElement, name }
+	 */
+	Canvas.prototype.getPlane = function(name) {
+	  if (!name) {
+	    throw new Error('must specify a name');
+	  }
+
+	  var plane = this._planes[name];
+
+	  return plane;
+	};
+
+	/**
+	 * Creates a plane that is used to draw elements on it. If no
+	 * root element is provided, an implicit root will be used.
+	 *
+	 * @param {string} name
+	 * @param {Object|djs.model.Root} [rootElement] optional root element
+	 *
+	 * @return {Object} plane descriptor with { layer, rootElement, name }
+	 */
+	Canvas.prototype.createPlane = function(name, rootElement) {
+	  if (!name) {
+	    throw new Error('must specify a name');
+	  }
+
+	  if (this._planes[name]) {
+	    throw new Error('plane ' + name + ' already exists');
+	  }
+
+	  if (!rootElement) {
+	    rootElement = {
+	      id: '__implicitroot' + name,
+	      children: [],
+	      isImplicit: true
+	    };
+	  }
+
+	  var svgLayer = this.getLayer(name);
+	  classes$1(svgLayer).add(HIDDEN_MARKER);
+
+	  var plane = this._planes[name] = {
+	    layer: svgLayer,
+	    name: name,
+	    rootElement: null
+	  };
+
+	  this.setRootElementForPlane(rootElement, plane);
+
+	  return plane;
+	};
+
+	/**
+	 * Sets the active plane and hides the previously active plane.
+	 *
+	 * @param {string|Object} plane
+	 *
+	 * @return {Object} plane descriptor with { layer, rootElement, name }
+	 */
+	Canvas.prototype.setActivePlane = function(plane) {
+	  if (!plane) {
+	    throw new Error('must specify a plane');
+	  }
+
+	  if (typeof plane === 'string') {
+	    plane = this.getPlane(plane);
+	  }
+
+	  // hide previous Plane
+	  if (this._activePlane) {
+	    classes$1(this._activePlane.layer).add(HIDDEN_MARKER);
+	  }
+
+	  this._activePlane = plane;
+
+	  // show current Plane
+	  classes$1(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.
@@ -4900,11 +5051,9 @@
 	};
 
 	Canvas.prototype.getRootElement = function() {
-	  if (!this._rootElement) {
-	    this.setRootElement({ id: '__implicitroot', children: [] });
-	  }
+	  var plane = this.getActivePlane();
 
-	  return this._rootElement;
+	  return plane.rootElement;
 	};
 
 
@@ -4921,12 +5070,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;
 
@@ -4943,23 +5121,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) {
@@ -5345,6 +5526,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 = {};
 	  }
@@ -5365,7 +5553,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;
@@ -5687,6 +5875,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$1(gfx, ELEMENT_ID, id);
+
+	  return gfx;
+	};
+
 	/**
 	 * Return the model element for a given id or graphics.
 	 *
@@ -6792,12 +7003,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;
 	    }
 	  }
 
@@ -19511,8 +19721,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) {
@@ -20741,9 +20951,10 @@
 	 *
 	 * @param {EventBus} eventBus the event bus
 	 */
-	function Selection(eventBus) {
+	function Selection(eventBus, canvas) {
 
 	  this._eventBus = eventBus;
+	  this._canvas = canvas;
 
 	  this._selectedElements = [];
 
@@ -20754,12 +20965,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) {
@@ -20805,6 +21016,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) {
@@ -21473,6 +21692,13 @@
 	    classes(htmlContainer).add('djs-overlay-' + overlay.type);
 	  }
 
+	  var plane = this._canvas.findPlane(element);
+	  var activePlane = this._canvas.getActivePlane();
+	  overlay.plane = plane;
+	  if (plane !== activePlane) {
+	    setVisible(htmlContainer, false);
+	  }
+
 	  overlay.htmlContainer = htmlContainer;
 
 	  overlayContainer.overlays.push(overlay);
@@ -21626,6 +21852,12 @@
 	  });
 
 
+	  eventBus.on('plane.set', function(e) {
+	    forEach(self._overlays, function(el) {
+	      setVisible(el.htmlContainer, el.plane === e.plane);
+	    });
+	  });
+
 	  // clear overlays with diagram
 
 	  eventBus.on('diagram.clear', this.clear, this);
@@ -21775,8 +22007,9 @@
 	var KEYDOWN_EVENT = 'keyboard.keydown',
 	    KEYUP_EVENT = 'keyboard.keyup';
 
-	var DEFAULT_PRIORITY$1 = 1000;
+	var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
 
+	var DEFAULT_PRIORITY$1 = 1000;
 
 	/**
 	 * A keyboard abstraction that may be activated and
@@ -21847,10 +22080,9 @@
 	};
 
 	Keyboard.prototype._keyHandler = function(event, type) {
-	  var target = event.target,
-	      eventBusResult;
+	  var eventBusResult;
 
-	  if (isInput(target)) {
+	  if (this._isEventIgnored(event)) {
 	    return;
 	  }
 
@@ -21865,6 +22097,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
@@ -25857,7 +26112,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.prototype.trigger = function(elements, type) {
@@ -30355,7 +30610,7 @@
 
 	  classes$1(gfx).add(MARKER_CONNECTION_PREVIEW);
 
-	  append(this._canvas.getDefaultLayer(), gfx);
+	  append(this._canvas.getActiveLayer(), gfx);
 
 	  return gfx;
 	};
@@ -32072,13 +32327,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(dragGroup, event.x, event.y);
@@ -33754,11 +34009,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(property)) {
 	    return reduce(property, function(childProperties, childProperty) {
@@ -33797,6 +34057,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) {
@@ -36546,8 +36818,8 @@
 	/**
 	 * Distributes the elements with a given orientation
 	 *
-	 * @param  {Array} elements    [description]
-	 * @param  {string} orientation [description]
+	 * @param  {Array} elements
+	 * @param  {string} orientation
 	 */
 	DistributeElements.prototype.trigger = function(elements, orientation) {
 	  var modeling = this._modeling;
@@ -36681,11 +36953,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.prototype._findRange = function(element) {
 	  var axis = element[this._axis],
@@ -38787,7 +39059,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);
 	    }
@@ -43398,6 +43670,49 @@
 	  'selection'
 	];
 
+	var HIGH_PRIORITY$b = 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$1(eventBus) {
+	  eventBus.on('resize.start', HIGH_PRIORITY$b, 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$1.$inject = [ 'eventBus' ];
+
+
 	var abs$5 = Math.abs,
 	    min$3 = Math.min,
 	    max$4 = Math.max;
@@ -43425,7 +43740,6 @@
 	    LANE_TOP_PADDING = 20,
 	    LANE_BOTTOM_PADDING = 20;
 
-
 	function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
 	  var lanesRoot = getLanesRoot(laneShape);
 
@@ -43518,49 +43832,6 @@
 	  };
 	}
 
-	var HIGH_PRIORITY$b = 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$1(eventBus) {
-	  eventBus.on('resize.start', HIGH_PRIORITY$b, 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$1.$inject = [ 'eventBus' ];
-
 	var SLIGHTLY_HIGHER_PRIORITY = 1001;
 
 
@@ -47737,7 +48008,7 @@
 	      var dragGroup = create('g');
 	      attr$1(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));
 
-	      append(canvas.getDefaultLayer(), dragGroup);
+	      append(canvas.getActiveLayer(), dragGroup);
 
 	      // shapes
 	      addPreviewGfx(movingShapes, dragGroup);
@@ -47799,7 +48070,7 @@
 	      var frameGroup = create('g');
 	      attr$1(frameGroup, styles.cls('djs-frame-group', [ 'no-events' ]));
 
-	      append(canvas.getDefaultLayer(), frameGroup);
+	      append(canvas.getActiveLayer(), frameGroup);
 
 	      var frames = [];
 
@@ -54176,9 +54447,9 @@
 
 	      attr$1(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;
 	    }
@@ -54801,7 +55072,7 @@
 	  var visuals = {
 
 	    create: function(context) {
-	      var container = canvas.getDefaultLayer(),
+	      var container = canvas.getActiveLayer(),
 	          frame;
 
 	      frame = context.frame = create('rect');
@@ -65692,6 +65963,14 @@
 	    priority = DEFAULT_PRIORITY$6;
 	  }
 
+	  if (typeof provider.getTabs !== 'function') {
+	    console.error(
+	      'Properties provider does not impement #getTabs(element) API'
+	    );
+
+	    return;
+	  }
+
 	  this._eventBus.on('propertiesPanel.getProviders', priority, function(event) {
 	    event.providers.push(provider);
 	  });
@@ -65803,7 +66082,7 @@
 	    self.detach();
 	  });
 
-	  this._container = domify$2('<div class="bpp-properties-panel"></div>');
+	  this._container = domify$2('<div class="bpp-properties-panel" input-handle-modified-keys="z,y"></div>');
 
 	  this._bindListeners(this._container);
 
@@ -71799,18 +72078,19 @@
 
 
 	/**
-	 * Camunda BPMN specific `camunda:errorEventDefinition` behavior.
-	 *
-	 * When `camunda:type` is set to something different than `external`
-	 * on an element, then `camunda:errorEventDefinition` extension elements
-	 * shall be removed.
+	 * Camunda BPMN specific camunda:ErrorEventDefinition behavior.
 	 */
-	function DeleteErrorEventDefinitionBehavior(eventBus) {
-
-	  CommandInterceptor.call(this, eventBus);
+	class DeleteErrorEventDefinitionBehavior extends CommandInterceptor {
+	  constructor(eventBus, modeling) {
+	    super(eventBus);
 
-	  this.executed([ 'properties-panel.update-businessobject', 'element.updateProperties' ],
-	    HIGH_PRIORITY$l, function(context) {
+	    /**
+	     * Remove camunda:ErrorEventDefinitions on camunda:type set to external.
+	     */
+	    this.postExecute([
+	      'element.updateProperties',
+	      'properties-panel.update-businessobject'
+	    ], HIGH_PRIORITY$l, function(context) {
 	      const {
 	        element,
 	        oldProperties,
@@ -71818,52 +72098,30 @@
 	      } = context;
 
 	      const businessObject = getBusinessObject(element),
-	            extensionElements = businessObject.extensionElements;
+	            extensionElements = businessObject.get('extensionElements');
 
-	      // (1) Check whether behavior is suitable
-	      if (
-	        is$1(element, 'camunda:ExternalCapable') &&
-	        extensionElements &&
-	        externalTypeChanged(oldProperties, properties)
-	      ) {
+	      if (is$1(element, 'camunda:ExternalCapable')
+	        && extensionElements
+	        && externalTypeChanged(oldProperties, properties)) {
 
-	        // (2) Delete camunda:ErrorEventDefinition elements and save them for revert
-	        context.deletedErrorEventDefinitions = extensionElements.values;
+	        const values = extensionElements.get('values').filter((element) => {
+	          return !is$1(element, 'camunda:ErrorEventDefinition');
+	        });
 
-	        extensionElements.values = extensionElements.values.filter(
-	          element => !is$1(element, 'camunda:ErrorEventDefinition')
-	        );
+	        modeling.updateModdleProperties(element, extensionElements, { values });
 	      }
-
 	    }, true);
 
-	  this.reverted([ 'properties-panel.update-businessobject', 'element.updateProperties' ],
-	    HIGH_PRIORITY$l, function({ context }) {
-	      const {
-	        element,
-	        deletedErrorEventDefinitions: oldExtensionElements
-	      } = context;
-
-	      const businessObject = getBusinessObject(element);
-
-	      // Only intercept the revert, if the behavior became active
-	      if (oldExtensionElements) {
-	        const extensionElements = businessObject.extensionElements;
-
-	        extensionElements.values = oldExtensionElements;
-	      }
-	    });
+	  }
 	}
 
-
 	DeleteErrorEventDefinitionBehavior.$inject = [
-	  'eventBus'
+	  'eventBus',
+	  'modeling'
 	];
 
-	inherits_browser(DeleteErrorEventDefinitionBehavior, CommandInterceptor);
 
-
-	// helper //////////////////
+	// helpers //////////
 
 	function externalTypeChanged(oldProperties, updatesProperties) {
 	  const {
@@ -71877,22 +72135,23 @@
 	  return oldType === 'external' && newType !== 'external';
 	}
 
-	const HIGH_PRIORITY$m = 15000;
+	const HIGH_PRIORITY$m = 5000;
 
 
 	/**
-	 * Camunda BPMN specific `camunda:FailedJobRetryTimeCycle` behavior.
-	 *
-	 * When `camunda:asyncAfter` or `camunda:asyncBefore` are set to false
-	 * on an element, then `camunda:FailedJobRetryTimeCycle` shall be removed. This ensures
-	 * that the BPMN diagram XML reflects the behavior of Camunda Platform engine.
+	 * Camunda BPMN specific camunda:FailedJobRetryTimeCycle behavior.
 	 */
-	function DeleteRetryTimeCycleBehavior(eventBus) {
-
-	  CommandInterceptor.call(this, eventBus);
+	class DeleteRetryTimeCycleBehavior extends CommandInterceptor {
+	  constructor(eventBus, modeling) {
+	    super(eventBus);
 
-	  this.executed([ 'properties-panel.update-businessobject', 'element.updateProperties' ],
-	    HIGH_PRIORITY$m, function(context) {
+	    /**
+	     * Remove camunda:FailedJobRetryTimeCycle if camunda:asyncAfter or camunda:asyncBefore is set to false.
+	     */
+	    this.postExecute([
+	      'element.updateProperties',
+	      'properties-panel.update-businessobject'
+	    ], HIGH_PRIORITY$m, function(context) {
 	      const {
 	        element,
 	        properties
@@ -71901,112 +72160,76 @@
 	      const businessObject = getBusinessObject(element),
 	            extensionElements = businessObject.extensionElements;
 
-	      // (1.1) Execute if...
-	      if (is$1(element, 'camunda:AsyncCapable') && // ...asyncCapable
-	        properties && // ...properties updated
-	        (properties['camunda:asyncBefore'] === false || // ...update async (1)
-	          properties['camunda:asyncAfter'] === false) && // ...update async (2)
-	        (extensionElements && extensionElements.values.length) && // ...we have extensionElements
-	        (extensionElements.values.find(ele => is$1(ele, 'camunda:FailedJobRetryTimeCycle'))) && // ...we have retryTimeCycle
-	        !getTimerEventDefinition(element) // ...we don't have a TimerEventDefinition
+	      if (
+	        !is$1(element, 'camunda:AsyncCapable')
+	        || (properties[ 'camunda:asyncBefore' ] !== false && properties[ 'camunda:asyncAfter' ] !== false)
+	        || !extensionElements
+	        || !extensionElements.get('values').length
+	        || !extensionElements.get('values').find((value) => is$1(value, 'camunda:FailedJobRetryTimeCycle'))
+	        || getTimerEventDefinition(element)
+	        || isAsyncBefore(businessObject)
+	        || isAsyncAfter(businessObject)
 	      ) {
-
-	        // (1.2) ... but don't execute if one async is still true
-	        if (isAsyncBefore(businessObject) || isAsyncAfter(businessObject)) {
-	          return;
-	        }
-
-	        // (2) Delete the camunda:FailedJobRetryTimeCycle and save them for revert
-	        context.deleteRetryCycleOldExtElements = extensionElements.values;
-
-	        extensionElements.values = extensionElements.values.filter(
-	          ele => !is$1(ele, 'camunda:FailedJobRetryTimeCycle'));
+	        return;
 	      }
 
-	    }, true);
-
-	  this.reverted([ 'properties-panel.update-businessobject', 'element.updateProperties' ],
-	    HIGH_PRIORITY$m, function({ context }) {
-	      const {
-	        element,
-	        deleteRetryCycleOldExtElements: oldExtensionElements
-	      } = context;
-
-	      const businessObject = getBusinessObject(element);
+	      const values = extensionElements.get('values').filter((element) => {
+	        return !is$1(element, 'camunda:FailedJobRetryTimeCycle');
+	      });
 
-	      // Only intercept the revert, if the behavior became active
-	      if (oldExtensionElements) {
-	        const extensionElements = businessObject.extensionElements;
+	      modeling.updateModdleProperties(element, extensionElements, { values });
+	    }, true);
 
-	        extensionElements.values = oldExtensionElements;
-	      }
-	    });
+	  }
 	}
 
-
 	DeleteRetryTimeCycleBehavior.$inject = [
-	  'eventBus'
+	  'eventBus',
+	  'modeling'
 	];
 
-	inherits_browser(DeleteRetryTimeCycleBehavior, CommandInterceptor);
-
 
-	// helper //////////////////
+	// helpers //////////
 
-	/**
-	 * Returns true if the attribute 'camunda:asyncBefore' is set
-	 * to true.
-	 *
-	 * @param  {ModdleElement} bo
-	 *
-	 * @return {boolean} a boolean value
-	 */
-	function isAsyncBefore(bo) {
-	  return !!(bo.get('camunda:asyncBefore') || bo.get('camunda:async'));
+	function isAsyncBefore(businessObject) {
+	  return !!(businessObject.get('camunda:asyncBefore') || businessObject.get('camunda:async'));
 	}
 
-	/**
-	 * Returns true if the attribute 'camunda:asyncAfter' is set
-	 * to true.
-	 *
-	 * @param  {ModdleElement} bo
-	 *
-	 * @return {boolean} a boolean value
-	 */
-	function isAsyncAfter(bo) {
-	  return !!bo.get('camunda:asyncAfter');
+	function isAsyncAfter(businessObject) {
+	  return !!businessObject.get('camunda:asyncAfter');
 	}
 
 	function getTimerEventDefinition(element) {
 	  return getEventDefinition$2(element, 'bpmn:TimerEventDefinition');
 	}
 
-	function getEventDefinition$2(element, eventType) {
+	function getEventDefinition$2(element, type) {
 	  const businessObject = getBusinessObject(element);
 
 	  const eventDefinitions = businessObject.get('eventDefinitions') || [];
 
-	  return find(eventDefinitions, function(definition) {
-	    return is$1(definition, eventType);
+	  return eventDefinitions.find((eventDefinition) => {
+	    return is$1(eventDefinition, type);
 	  });
 	}
 
-	const HIGH_PRIORITY$n = 15000;
+	const HIGH_PRIORITY$n = 5000;
 
 
 	/**
-	 * Camunda BPMN specific `camunda:exclusive` behavior.
-	 *
-	 * When `camunda:asyncAfter` or `camunda:asyncBefore` are set to false
-	 * on an element, then `camunda:exclusive` shall be set to true. This ensures
-	 * that the BPMN diagram XML reflects the behavior of Camunda Platform engine.
+	 * Camunda BPMN specific camunda:exclusive behavior.
 	 */
-	function UpdateCamundaExclusiveBehavior(eventBus) {
-
-	  CommandInterceptor.call(this, eventBus);
+	class UpdateCamundaExclusiveBehavior extends CommandInterceptor {
+	  constructor(eventBus) {
+	    super(eventBus);
 
-	  this.preExecute([ 'properties-panel.update-businessobject', 'element.updateProperties' ],
-	    HIGH_PRIORITY$n, function(context) {
+	    /**
+	     * Set camunda:exclusive to true on camunda:asyncBefore or camunda:asyncAfter set to false.
+	     */
+	    this.preExecute([
+	      'element.updateProperties',
+	      'properties-panel.update-businessobject'
+	    ], HIGH_PRIORITY$n, function(context) {
 	      const {
 	        element,
 	        properties
@@ -72014,125 +72237,53 @@
 
 	      const businessObject = getBusinessObject(element);
 
-	      // (1.1) Execute if...
-	      if (is$1(element, 'camunda:AsyncCapable') && // ...asyncCapable
-	          properties && // ...properties updated
-	          (properties['camunda:asyncBefore'] === false || // ...update async before or (1)
-	            properties['camunda:asyncAfter'] === false) && // ...update async after (2)
-	          !isExclusive(businessObject) // ...is currently not exclusive
+	      if (!is$1(element, 'camunda:AsyncCapable')
+	        || (properties[ 'camunda:asyncBefore' ] !== false && properties[ 'camunda:asyncAfter' ] !== false)
+	        || isExclusive(businessObject)
+	        || (isAsyncAfter$1(businessObject) && properties[ 'camunda:asyncAfter' ] !== false)
+	        || (isAsyncBefore$1(businessObject) && properties[ 'camunda:asyncBefore' ] !== false)
+	        || (properties[ 'camunda:asyncBefore' ] === true || properties[ 'camunda:asyncAfter' ] === true)
 	      ) {
-
-	        // (1.2) ...but don't execute if...
-	        if ((isAsyncAfter$1(businessObject) && properties['camunda:asyncAfter'] !== false) || // ...asyncAfter will stay
-	            (isAsyncBefore$1(businessObject) && properties['camunda:asyncBefore'] !== false) || // ...asyncBefore will stay
-	            (properties['camunda:asyncBefore'] || properties['camunda:asyncAfter']) // one is set to true
-	        ) {
-	          return;
-	        }
-
-	        // (2) Update the context
-	        properties['camunda:exclusive'] = true;
+	        return;
 	      }
+
+	      properties[ 'camunda:exclusive' ] = true;
 	    }, true);
-	}
 
+	  }
+	}
 
 	UpdateCamundaExclusiveBehavior.$inject = [
 	  'eventBus'
 	];
 
-	inherits_browser(UpdateCamundaExclusiveBehavior, CommandInterceptor);
 
+	// helpers //////////
 
-	// helper //////////////////
-
-	/**
-	 * Returns true if the attribute 'camunda:asyncBefore' is set
-	 * to true.
-	 *
-	 * @param  {ModdleElement} bo
-	 *
-	 * @return {boolean} a boolean value
-	 */
-	function isAsyncBefore$1(bo) {
-	  return !!(bo.get('camunda:asyncBefore') || bo.get('camunda:async'));
+	function isAsyncBefore$1(businessObject) {
+	  return !!(businessObject.get('camunda:asyncBefore') || businessObject.get('camunda:async'));
 	}
 
-	/**
-	 * Returns true if the attribute 'camunda:asyncAfter' is set
-	 * to true.
-	 *
-	 * @param  {ModdleElement} bo
-	 *
-	 * @return {boolean} a boolean value
-	 */
-	function isAsyncAfter$1(bo) {
-	  return !!bo.get('camunda:asyncAfter');
+	function isAsyncAfter$1(businessObject) {
+	  return !!businessObject.get('camunda:asyncAfter');
 	}
 
-	/**
-	* Returns true if the attribute 'camunda:exclusive' is set
-	* to true.
-	*
-	* @param  {ModdleElement} bo
-	*
-	* @return {boolean} a boolean value
-	*/
-	function isExclusive(bo) {
-	  return !!bo.get('camunda:exclusive');
+	function isExclusive(businessObject) {
+	  return !!businessObject.get('camunda:exclusive');
 	}
 
-	/**
-	 * Camunda BPMN specific `camunda:inputOutput` behavior.
-	 */
-	function UpdateInputOutputBehavior(eventBus, modeling) {
-
-	  CommandInterceptor.call(this, eventBus);
-
-	  this.postExecute([
-	    'element.updateProperties',
-	    'element.updateModdleProperties',
-	    'properties-panel.update-businessobject-list'
-	  ], function(context) {
-	    const {
-	      element,
-	      oldProperties,
-	      propertyName
-	    } = context;
-
-	    const businessObject = getBusinessObject(element);
-	    const inputOutput = getInputOutput(businessObject);
-	    const extensionElements = businessObject.get('extensionElements');
-
-	    // do not apply if inputOutput got recently added
-	    if (!oldProperties && propertyName === 'values') {
-	      return;
-	    }
+	function getInputOutput(businessObject) {
+	  const extensionElements = businessObject.get('extensionElements');
 
-	    // remove camunda:inputOutput if there are no input/output parameters anymore
-	    if (inputOutput && isEmpty$1(inputOutput)) {
-	      const filtered = extensionElements.values.filter(function(element) {
-	        return element !== inputOutput;
-	      });
+	  if (!extensionElements) {
+	    return;
+	  }
 
-	      modeling.updateModdleProperties(element, extensionElements, {
-	        values: filtered
-	      });
-	    }
-	  }, true);
+	  return extensionElements.get('values').find((value) => {
+	    return is$1(value, 'camunda:InputOutput');
+	  });
 	}
 
-
-	UpdateInputOutputBehavior.$inject = [
-	  'eventBus',
-	  'modeling'
-	];
-
-	inherits_browser(UpdateInputOutputBehavior, CommandInterceptor);
-
-
-	// helper //////////////////
-
 	function getInputParameters(inputOutput) {
 	  return inputOutput.get('inputParameters');
 	}
@@ -72141,81 +72292,117 @@
 	  return inputOutput.get('outputParameters');
 	}
 
-	function getInputOutput(businessObject) {
-	  const extensionElements = businessObject.get('extensionElements');
+	function isInputOutputEmpty(inputOutput) {
+	  const inputParameters = getInputParameters(inputOutput);
+	  const outputParameters = getOutputParameters(inputOutput);
 
-	  if (!extensionElements) {
-	    return;
-	  }
+	  return !inputParameters.length && !outputParameters.length;
+	}
 
-	  const values = extensionElements.get('values');
+	/**
+	 * Camunda BPMN specific camunda:InputOutput behavior.
+	 */
+	class UpdateInputOutputBehavior extends CommandInterceptor {
+	  constructor(eventBus, modeling) {
+	    super(eventBus);
 
-	  return values.find((value) => {
-	    return is$1(value, 'camunda:InputOutput');
-	  });
-	}
+	    /**
+	     * Remove empty camunda:InputOutput on update.
+	     */
+	    this.postExecute([
+	      'element.updateProperties',
+	      'element.updateModdleProperties',
+	      'properties-panel.update-businessobject-list'
+	    ], function(context) {
+	      const {
+	        element,
+	        oldProperties,
+	        propertyName
+	      } = context;
 
-	function isEmpty$1(inputOutput) {
-	  const inputParameters = getInputParameters(inputOutput);
-	  const outputParameters = getOutputParameters(inputOutput);
+	      const businessObject = getBusinessObject(element),
+	            inputOutput = getInputOutput(businessObject),
+	            extensionElements = businessObject.get('extensionElements');
 
-	  return inputParameters.length === 0 && outputParameters.length === 0;
+	      // do not remove newly added camunda:InputOutput
+	      if (!oldProperties && propertyName === 'values') {
+	        return;
+	      }
+
+	      if (inputOutput && isInputOutputEmpty(inputOutput)) {
+	        const values = extensionElements.get('values').filter(function(element) {
+	          return element !== inputOutput;
+	        });
+
+	        modeling.updateModdleProperties(element, extensionElements, { values });
+	      }
+	    }, true);
+	  }
 	}
 
+	UpdateInputOutputBehavior.$inject = [
+	  'eventBus',
+	  'modeling'
+	];
+
 	const HIGH_PRIORITY$o = 5000;
 
 
 	/**
-	 * Camunda BPMN specific `camunda:resultVariable` behavior.
-	 *
-	 * When `camunda:resultVariable` is removed from a service task like element
-	 * `camunda:mapDecisionResult` for the element will be cleaned up.
+	 * Camunda BPMN specific camunda:resultVariable behavior.
 	 */
-	function UpdateResultVariableBehavior(eventBus) {
-
-	  CommandInterceptor.call(this, eventBus);
+	class UpdateResultVariableBehavior extends CommandInterceptor {
+	  constructor(eventBus) {
+	    super(eventBus);
 
-	  this.preExecute([ 'properties-panel.update-businessobject', 'element.updateProperties' ],
-	    HIGH_PRIORITY$o, function(context) {
+	    /**
+	     * Remove camunda:mapDecisionResult on camunda:resultVariable removed.
+	     */
+	    this.preExecute([
+	      'element.updateProperties',
+	      'properties-panel.update-businessobject'
+	    ], HIGH_PRIORITY$o, function(context) {
 	      const {
 	        element,
 	        properties
 	      } = context;
 
 	      if (
-	        is$1(element, 'camunda:DmnCapable') &&
-	        has(properties, 'camunda:resultVariable') &&
-	        isEmpty$2(properties['camunda:resultVariable'])
+	        is$1(element, 'camunda:DmnCapable')
+	        && has(properties, 'camunda:resultVariable')
+	        && isEmpty$1(properties[ 'camunda:resultVariable' ])
 	      ) {
-	        properties['camunda:mapDecisionResult'] = null;
+	        properties[ 'camunda:mapDecisionResult' ] = null;
 	      }
 	    }, true);
-	}
 
+	  }
+	}
 
 	UpdateResultVariableBehavior.$inject = [
 	  'eventBus'
 	];
 
-	inherits_browser(UpdateResultVariableBehavior, CommandInterceptor);
-
 
-	// helper //////////////////
+	// helpers //////////
 
-	function isEmpty$2(value) {
+	function isEmpty$1(value) {
 	  return value == undefined || value === '';
 	}
 
 	/**
-	 * Camunda BPMN specific user task forms behavior ensuring that only one of the following options is configured:
-	 *
-	 * 1. embedded, external or Camunda forms using camunda:formKey
-	 * 2. Camunda forms using camunda:formRef
+	 * Camunda BPMN specific user task forms behavior.
 	 */
 	class UserTaskFormsBehavior extends CommandInterceptor {
 	  constructor(eventBus) {
 	    super(eventBus);
 
+	    /**
+	     * Ensure that only one of the following options is configured:
+	     *
+	     * 1. embedded, external or Camunda forms using camunda:formKey
+	     * 2. Camunda forms using camunda:formRef
+	     */
 	    this.preExecute([
 	      'element.updateProperties',
 	      'element.updateModdleProperties',
@@ -72229,13 +72416,13 @@
 	        context.element.businessObject
 	      );
 
-	      if ('camunda:formKey' in properties) {
+	      if (has(properties, 'camunda:formKey')) {
 	        Object.assign(properties, {
 	          'camunda:formRef': undefined,
 	          'camunda:formRefBinding': undefined,
 	          'camunda:formRefVersion': undefined
 	        });
-	      } else if ('camunda:formRef' in properties) {
+	      } else if (has(properties, 'camunda:formRef')) {
 	        Object.assign(properties, {
 	          'camunda:formKey': undefined
 	        });
@@ -72247,23 +72434,23 @@
 	          });
 	        }
 
-	        if (!('camunda:formRefBinding' in properties) && isUndefined(businessObject.get('camunda:formRefBinding'))) {
+	        if (!has(properties, 'camunda:formRefBinding') && isUndefined(businessObject.get('camunda:formRefBinding'))) {
 	          Object.assign(properties, {
 	            'camunda:formRefBinding': 'latest'
 	          });
 	        }
 	      }
 
-	      if ('camunda:formRefBinding' in properties && properties[ 'camunda:formRefBinding' ] !== 'version') {
+	      if (has(properties, 'camunda:formRefBinding') && properties[ 'camunda:formRefBinding' ] !== 'version') {
 	        Object.assign(properties, {
 	          'camunda:formRefVersion': undefined
 	        });
 	      }
 	    }, true);
+
 	  }
 	}
 
-
 	UserTaskFormsBehavior.$inject = [ 'eventBus' ];
 
 	/**
@@ -85088,7 +85275,7 @@
 
 	  var constraints = property.constraints || {};
 
-	  if (constraints.notEmpty && isEmpty$3(value)) {
+	  if (constraints.notEmpty && isEmpty$2(value)) {
 	    return translate('Must not be empty');
 	  }
 
@@ -85165,7 +85352,7 @@
 	  return regexp.test(str);
 	}
 
-	function isEmpty$3(str) {
+	function isEmpty$2(str) {
 	  return !str || /^\s*$/.test(str);
 	}