camunda-bpmn-js 0.11.2 → 0.12.0

package/dist/camunda-cloud-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) {
@@ -30350,7 +30605,7 @@
 
 	  classes$1(gfx).add(MARKER_CONNECTION_PREVIEW);
 
-	  append(this._canvas.getDefaultLayer(), gfx);
+	  append(this._canvas.getActiveLayer(), gfx);
 
 	  return gfx;
 	};
@@ -32067,13 +32322,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);
@@ -33749,11 +34004,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) {
@@ -33792,6 +34052,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) {
@@ -36541,8 +36813,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;
@@ -36676,11 +36948,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],
@@ -38782,7 +39054,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);
 	    }
@@ -43393,6 +43665,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;
@@ -43420,7 +43735,6 @@
 	    LANE_TOP_PADDING = 20,
 	    LANE_BOTTOM_PADDING = 20;
 
-
 	function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
 	  var lanesRoot = getLanesRoot(laneShape);
 
@@ -43513,49 +43827,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;
 
 
@@ -47732,7 +48003,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);
@@ -47794,7 +48065,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 = [];
 
@@ -54171,9 +54442,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;
 	    }
@@ -54796,7 +55067,7 @@
 	  var visuals = {
 
 	    create: function(context) {
-	      var container = canvas.getDefaultLayer(),
+	      var container = canvas.getActiveLayer(),
 	          frame;
 
 	      frame = context.frame = create('rect');
@@ -65687,6 +65958,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);
 	  });
@@ -65798,7 +66077,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);
 
@@ -71790,78 +72069,183 @@
 	  Modeler$1.prototype._extensionModules
 	);
 
-	const HIGH_PRIORITY$l = 15000;
+	const HIGH_PRIORITY$l = 5000;
+
 
 	/**
-	 * BPMN specific create zeebe boundary event behavior
+	 * Zeebe BPMN behavior for ensuring that a BusinessRuleTask:
+	 * 1) Either has a taskDefinition ExtensionElement OR
+	 * 2) Or has a calledDecision ExtensionElement
+	 * 2.1) If it has a calledDecision ExtensionElement, it shall not have taskHeaders
 	 */
-	function CreateZeebeBoundaryEventBehavior(
-	    eventBus, elementFactory, bpmnFactory) {
+	class CleanUpBusinessRuleTaskBehavior extends CommandInterceptor {
+	  constructor(eventBus, modeling) {
+	    super(eventBus);
 
-	  CommandInterceptor.call(this, eventBus);
+	    /**
+	     * Remove zeebe:calledDecision when zeebe:taskDefinition is added
+	     */
+	    this.postExecute([
+	      'properties-panel.update-businessobject-list',
+	      'element.updateModdleProperties'
+	    ] , HIGH_PRIORITY$l, function(context) {
+	      const {
+	        element,
+	        currentObject,
+	        objectsToAdd,
+	        moddleElement,
+	        properties
+	      } = context;
 
-	  /**
-	   * replace intermediate catch event with boundary event when
-	   * attaching it to a shape
-	   */
-	  this.preExecute('shape.create', HIGH_PRIORITY$l, function(context) {
-	    const {
-	      shape,
-	      host
-	    } = context;
+	      // (1) map properties from both commands
+	      const extensionElement = currentObject || moddleElement,
+	            newValues = objectsToAdd || (properties && properties.values);
 
-	    const businessObject = getBusinessObject(shape);
+	      // (2) check conditions and potentially update
+	      if (
+	        is$1(element, 'bpmn:BusinessRuleTask')
+	        && extensionElement
+	        && is$1(extensionElement, 'bpmn:ExtensionElements')
+	        && extensionElement.get('values').some((ele) => is$1(ele, 'zeebe:CalledDecision'))
+	        && newValues
+	        && newValues.some((ele) => is$1(ele, 'zeebe:TaskDefinition'))
+	      ) {
+	        removeCalledDecision(element, extensionElement, modeling);
+	      }
+	    }, true);
 
-	    let attrs = {
-	      cancelActivity: true
-	    };
+	    /**
+	     * Remove zeebe:taskDefinition and zeebe:taskHeaders when zeebe:calledDecision
+	     */
+	    this.postExecute([
+	      'properties-panel.update-businessobject-list',
+	      'element.updateModdleProperties'
+	    ] , HIGH_PRIORITY$l, function(context) {
+	      const {
+	        element,
+	        currentObject,
+	        objectsToAdd,
+	        moddleElement,
+	        properties
+	      } = context;
 
-	    let newBusinessObject,
-	        hostBusinessObject,
-	        boundaryEvent,
-	        eventDefinitions;
+	      // (1) map properties from both commands
+	      const extensionElement = currentObject || moddleElement,
+	            newValues = objectsToAdd || (properties && properties.values);
 
-	    if (!host || !is$1(shape, 'bpmn:IntermediateCatchEvent')) {
-	      return;
-	    }
+	      // (2) check conditions and potentially update
+	      if (
+	        is$1(element, 'bpmn:BusinessRuleTask')
+	        && extensionElement
+	        && is$1(extensionElement, 'bpmn:ExtensionElements')
+	        && extensionElement.get('values').some(
+	          (ele) => is$1(ele, 'zeebe:TaskDefinition') || is$1(ele, 'zeebe:TaskHeaders'))
+	        && newValues
+	        && newValues.some((ele) => is$1(ele, 'zeebe:CalledDecision'))
+	      ) {
+	        removeTaskDefintionAndHeaders(element, extensionElement, modeling);
+	      }
+	    }, true);
 
-	    hostBusinessObject = getBusinessObject(host);
+	  }
+	}
 
-	    attrs = {
-	      attachedToRef: hostBusinessObject,
-	      ...attrs
-	    };
+	CleanUpBusinessRuleTaskBehavior.$inject = [
+	  'eventBus',
+	  'modeling'
+	];
 
-	    eventDefinitions = businessObject.eventDefinitions;
 
-	    newBusinessObject = bpmnFactory.create('bpmn:BoundaryEvent', attrs);
+	// helper ////////////////////
 
-	    boundaryEvent = {
-	      type: 'bpmn:BoundaryEvent',
-	      businessObject: newBusinessObject,
-	    };
+	function removeFromExtensionElements(element, extensionElements, modeling, filterFun) {
+	  const values = extensionElements.get('values').filter(filterFun);
+
+	  modeling.updateModdleProperties(element, extensionElements, {
+	    values
+	  });
+	}
+
+	function removeCalledDecision(element, extensionElements, modeling) {
+	  removeFromExtensionElements(element, extensionElements, modeling,
+	    (ele) => !is$1(ele, 'zeebe:CalledDecision'));
+	}
+
+	function removeTaskDefintionAndHeaders(element, extensionElements, modeling) {
+	  removeFromExtensionElements(element, extensionElements, modeling,
+	    (ele) => !is$1(ele, 'zeebe:TaskDefinition') && !is$1(ele, 'zeebe:TaskHeaders'));
+	}
+
+	const HIGH_PRIORITY$m = 5000;
+
+
+	/**
+	 * Zeebe BPMN specific behavior for creating boundary events.
+	 */
+	class CreateZeebeBoundaryEventBehavior extends CommandInterceptor {
+	  constructor(bpmnFactory, elementFactory, eventBus) {
+	    super(eventBus);
+
+	    /**
+	     * Replace intermediate catch event with boundary event when attaching it to a shape.
+	     */
+	    this.preExecute('shape.create', HIGH_PRIORITY$m, function(context) {
+	      const {
+	        shape,
+	        host
+	      } = context;
+
+	      const businessObject = getBusinessObject(shape);
+
+	      let attrs = {
+	        cancelActivity: true
+	      };
+
+	      let newBusinessObject,
+	          hostBusinessObject,
+	          boundaryEvent,
+	          eventDefinitions;
+
+	      if (!host || !is$1(shape, 'bpmn:IntermediateCatchEvent')) {
+	        return;
+	      }
+
+	      hostBusinessObject = getBusinessObject(host);
+
+	      attrs = {
+	        ...attrs,
+	        attachedToRef: hostBusinessObject
+	      };
+
+	      eventDefinitions = businessObject.eventDefinitions;
+
+	      newBusinessObject = bpmnFactory.create('bpmn:BoundaryEvent', attrs);
 
-	    if (eventDefinitions && eventDefinitions[0]) {
 	      boundaryEvent = {
-	        ...boundaryEvent,
-	        eventDefinitionType: eventDefinitions[0].$type
+	        type: 'bpmn:BoundaryEvent',
+	        businessObject: newBusinessObject,
 	      };
-	    }
 
-	    context.shape = elementFactory.createShape(boundaryEvent);
+	      if (eventDefinitions && eventDefinitions[0]) {
+	        boundaryEvent = {
+	          ...boundaryEvent,
+	          eventDefinitionType: eventDefinitions[0].$type
+	        };
+	      }
+
+	      context.shape = elementFactory.createShape(boundaryEvent);
 
-	  }, true);
-	}
+	    }, true);
 
+	  }
+	}
 
 	CreateZeebeBoundaryEventBehavior.$inject = [
-	  'eventBus',
+	  'bpmnFactory',
 	  'elementFactory',
-	  'bpmnFactory'
+	  'eventBus'
 	];
 
-	inherits_browser(CreateZeebeBoundaryEventBehavior, CommandInterceptor);
-
 	function isZeebeServiceTask(element) {
 	  if (!is$1(element, 'zeebe:ZeebeServiceTask')) return false;
 
@@ -71872,6 +72256,113 @@
 	  return true;
 	}
 
+	/**
+	 * Get zeebe:IoMapping from an element.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {ModdleElement}
+	 */
+	function getIoMapping(element) {
+	  const businessObject = getBusinessObject(element);
+
+	  const extensionElements = businessObject.get('extensionElements');
+
+	  if (!extensionElements) {
+	    return;
+	  }
+
+	  return extensionElements.get('values').find((value) => {
+	    return is$1(value, 'zeebe:IoMapping');
+	  });
+	}
+
+	/**
+	 * Get zeebe:InputParameters from an element.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {Array<ModdleElement>}
+	 */
+	function getInputParameters(element) {
+	  const ioMapping = getIoMapping(element);
+
+	  if (ioMapping) {
+	    return ioMapping.get('zeebe:inputParameters');
+	  }
+
+	  return [];
+	}
+
+	/**
+	 * Get zeebe:OutputParameters from an element.
+	 *
+	 * @param  {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {Array<ModdleElement>}
+	 */
+	function getOutputParameters(element) {
+	  const ioMapping = getIoMapping(element);
+
+	  if (ioMapping) {
+	    return ioMapping.get('zeebe:outputParameters');
+	  }
+
+	  return [];
+	}
+
+	/**
+	 * Check whether element supports zeebe:Input or zeebe:Output.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {boolean}
+	 */
+	function isInputOutputSupported(element) {
+	  return areInputParametersSupported(element) || areOutputParametersSupported(element);
+	}
+
+	/**
+	 * Check whether element supports zeebe:Input.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {boolean}
+	 */
+	function areInputParametersSupported(element) {
+	  return isAny(element, [
+	    'bpmn:CallActivity',
+	    'bpmn:SubProcess',
+	    'bpmn:UserTask'
+	  ]) || isZeebeServiceTask(element);
+	}
+
+	/**
+	 * Check whether element supports zeebe:Output.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @return {boolean}
+	 */
+	function areOutputParametersSupported(element) {
+	  return isAny(element, [
+	    'bpmn:CallActivity',
+	    'bpmn:Event',
+	    'bpmn:ReceiveTask',
+	    'bpmn:SubProcess',
+	    'bpmn:UserTask',
+	    'zeebe:ZeebeServiceTask'
+	  ]);
+	}
+
+	function createElement(type, parent, factory, properties) {
+	  return ElementHelper_1.createElement(type, properties, parent, factory);
+	}
+
+	function createIoMapping(parent, bpmnFactory, properties) {
+	  return createElement('zeebe:IoMapping', parent, bpmnFactory, properties);
+	}
+
 	var is$g = require$$0.is;
 
 	var ExtensionElementsHelper = {};
@@ -71922,406 +72413,223 @@
 
 	var ExtensionElementsHelper_1 = ExtensionElementsHelper;
 
-	function getElements(bo, type, prop) {
-	  const elems = ExtensionElementsHelper_1.getExtensionElements(bo, type);
-	  return !prop ? elems : (elems[0] || {})[prop] || [];
-	}
-
-	function getParameters(element, prop) {
-	  const inputOutput = getInputOutput(element);
-	  return (inputOutput && inputOutput.get(prop)) || [];
-	}
-
-	/**
-	   * Get a inputOutput from the business object
-	   *
-	   * @param {djs.model.Base} element
-	   *
-	   * @return {ModdleElement} the inputOutput object
-	   */
-	function getInputOutput(element) {
-	  const bo = getBusinessObject(element);
-	  return (getElements(bo, 'zeebe:IoMapping') || [])[0];
-	}
-
-
-	/**
-	   * Return all input parameters existing in the business object, and
-	   * an empty array if none exist.
-	   *
-	   * @param  {djs.model.Base} element
-	   *
-	   * @return {Array} a list of input parameter objects
-	   */
-	function getInputParameters(element) {
-	  return getParameters.apply(this, [ element, 'inputParameters' ]);
-	}
-
-	/**
-	   * Return all output parameters existing in the business object, and
-	   * an empty array if none exist.
-	   *
-	   * @param  {djs.model.Base} element
-	   *
-	   * @return {Array} a list of output parameter objects
-	   */
-	function getOutputParameters(element) {
-	  return getParameters.apply(this, [ element, 'outputParameters' ]);
-	}
-
 	/**
-	   * Returns 'true' if the given element supports inputOutput
-	   *
-	   * @param {djs.model.Base} element
-	   *
-	   * @return {boolean} a boolean value
-	   */
-	function isInputOutputSupported(element) {
-	  return areOutputParametersSupported(element) || areInputParametersSupported(element);
-	}
-
-	/**
-	   * Returns 'true' if the given element supports input parameters
-	   *
-	   * @param {djs.model.Base} element
-	   *
-	   * @return {boolean} a boolean value
-	   */
-	function areInputParametersSupported(element) {
-	  return isAny(element, [
-	    'bpmn:UserTask',
-	    'bpmn:SubProcess',
-	    'bpmn:CallActivity'
-	  ]) || isZeebeServiceTask(element);
-	}
-
-	/**
-	   * Returns 'true' if the given element supports output parameters
-	   *
-	   * @param {djs.model.Base} element
-	   *
-	   * @return {boolean} a boolean value
-	   */
-	function areOutputParametersSupported(element) {
-	  return isAny(element, [
-	    'zeebe:ZeebeServiceTask',
-	    'bpmn:UserTask',
-	    'bpmn:SubProcess',
-	    'bpmn:ReceiveTask',
-	    'bpmn:CallActivity',
-	    'bpmn:Event'
-	  ]);
-	}
-
-	function createElement(type, parent, factory, properties) {
-	  return ElementHelper_1.createElement(type, properties, parent, factory);
-	}
-
-	function createIOMapping(parent, bpmnFactory, properties) {
-	  return createElement('zeebe:IoMapping', parent, bpmnFactory, properties);
-	}
-
-	/**
-	 * Get getter function for IOMapping parameters according to provided property name
+	 * Get default value for zeebe:propagateAllChildVariables.
 	 *
-	 * @param {string} property
+	 * @param {djs.model.Base|ModdleElement} element
 	 *
-	 * @returns {Function} Getter function for the IOMapping parameters according to provided property name
+	 * @returns {boolean}
 	 */
-	function determineParamGetFunc(property) {
-	  if (property == 'inputParameters') {
-	    return getInputParameters;
+	function getPropagateAllChildVariablesDefault(element) {
+	  if (!is$1(element, 'bpmn:CallActivity')) {
+	    return;
 	  }
 
-	  if (property == 'outputParameters') {
-	    return getOutputParameters;
-	  }
-	}
-
-	/**
-	  * Determine default value for propagateAllChildVariables attribute
-	  * @param {Object} element representing a bpmn:CallActivity
-	  *
-	  * @returns {boolean}
-	  */
-	function determinePropAllChildVariablesDefault(element) {
 	  const outputParameters = getOutputParameters(element);
 
 	  if (outputParameters) {
-	    return (outputParameters.length > 0) ? false : true;
+	    return !outputParameters.length;
 	  }
 	}
 
 	/**
-	  * Get the 'zeebe:CalledElement' extension element for a given business Object
-	  * @param {Object} bo businessObject
-	  *
-	  * @returns {Object} the calledElement Moddle Object or undefined if zeebe:CalledElement does not exist
-	  */
+	 * Get zeebe:CalledElement of an element.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {ModdleElement}
+	 */
 	function getCalledElement(element) {
 	  const calledElements = getCalledElements(element);
-	  return calledElements[0];
+
+	  return calledElements[ 0 ];
 	}
 
 	function getCalledElements(element) {
-	  const bo = getBusinessObject(element);
-	  const extElements = ExtensionElementsHelper_1.getExtensionElements(bo, 'zeebe:CalledElement');
-	  return extElements;
+	  const businessObject = getBusinessObject(element);
+
+	  return ExtensionElementsHelper_1.getExtensionElements(businessObject, 'zeebe:CalledElement');
 	}
 
 	/**
-	  * Check whether the propagateAllChildVariables attribute is set on an element.
-	  * Note that a default logic will be determine if it is not explicitly set.
-	  * @param {Object} element
-	  *
-	  * @returns {boolean}
-	  */
+	 * Check whether zeebe:propagateAllChildVariables is set on an element.
+	 * Fall back to default if zeebe:propagateAllChildVariables not set.
+	 *
+	 * @param {djs.model.Base|ModdleElement} element
+	 *
+	 * @returns {boolean}
+	 */
 	function isPropagateAllChildVariables(element) {
 	  if (!is$1(element, 'bpmn:CallActivity')) {
-	    return undefined;
+	    return;
 	  }
 
-	  const bo = getBusinessObject(element),
-	        calledElement = getCalledElement(bo);
+	  const businessObject = getBusinessObject(element),
+	        calledElement = getCalledElement(businessObject);
 
-	  return calledElement && has(calledElement, 'propagateAllChildVariables') ?
-	    calledElement.get('propagateAllChildVariables') :
-	    determinePropAllChildVariablesDefault(element);
+	  if (calledElement && has(calledElement, 'propagateAllChildVariables')) {
+	    return calledElement.get('propagateAllChildVariables');
+	  } else {
+	    return getPropagateAllChildVariablesDefault(element);
+	  }
 	}
 
-	const HIGH_PRIORITY$m = 15000;
+	const HIGH_PRIORITY$n = 5000;
+
 
 	/**
-	 * BPMN specific create zeebe call activity behavior
+	 * Zeebe BPMN specific behavior for creating call activities.
 	 */
-	function CreateZeebeCallActivityBehavior(
-	    eventBus, bpmnFactory) {
+	class CreateZeebeCallActivityBehavior extends CommandInterceptor {
+	  constructor(bpmnFactory, eventBus, modeling) {
+	    super(eventBus);
 
-	  CommandInterceptor.call(this, eventBus);
+	    /**
+	     * Add zeebe:CalledElement extension element with zeebe:propagateAllChildVariables attribute = false
+	     * when creating bpmn:CallActivity.
+	     */
+	    this.postExecuted('shape.create', HIGH_PRIORITY$n, function(context) {
+	      const { shape } = context;
 
-	  /**
-	   * add a zeebe:calledElement extensionElement with
-	   * propagateAllChildVariables attribute = false when creating
-	   * a bpmn:callActivity
-	   */
-	  this.postExecuted('shape.create', HIGH_PRIORITY$m, function(context) {
-	    const {
-	      shape
-	    } = context;
+	      if (!is$1(shape, 'bpmn:CallActivity')) {
+	        return;
+	      }
 
-	    if (!is$1(shape, 'bpmn:CallActivity')) {
-	      return;
-	    }
+	      const businessObject = getBusinessObject(shape);
 
-	    const bo = getBusinessObject(shape);
+	      let calledElement = getCalledElement(businessObject);
 
-	    // Reuse ExtensionElement if existing
-	    const extensionElements = bo.get('extensionElements') ||
-	      ElementHelper_1.createElement('bpmn:ExtensionElements', { values: [] }, bo, bpmnFactory);
+	      if (!calledElement) {
+	        calledElement = bpmnFactory.create('zeebe:CalledElement', {
+	          propagateAllChildVariables: false
+	        });
 
-	    // Ensure we have a calledElement
-	    let calledElement = getCalledElement(bo);
+	        let extensionElements = businessObject.get('extensionElements');
 
-	    if (!calledElement) {
-	      calledElement = bpmnFactory.create('zeebe:CalledElement', {});
-	      calledElement.propagateAllChildVariables = false;
+	        if (!extensionElements) {
+	          extensionElements = ElementHelper_1.createElement('bpmn:ExtensionElements', { values: [] }, businessObject, bpmnFactory);
 
-	      extensionElements.get('values').push(
-	        calledElement
-	      );
+	          modeling.updateProperties(shape, { extensionElements });
+	        }
 
-	      bo.extensionElements = extensionElements;
+	        modeling.updateModdleProperties(shape, extensionElements, {
+	          values: [
+	            ...(extensionElements.values || []),
+	            calledElement
+	          ]
+	        });
+	      } else if (!has(calledElement, 'propagateAllChildVariables')) {
 
-	      // Handle existing callActivities
-	    } else if (!has(calledElement, 'propagateAllChildVariables')) {
-	      calledElement.propagateAllChildVariables = false;
-	    }
+	        // if zeebe:CalledElement exist set zeebe:propagateAllChildVariables to false
+	        modeling.updateModdleProperties(shape, calledElement, {
+	          propagateAllChildVariables: false
+	        });
+	      }
+	    }, true);
 
-	  }, true);
+	  }
 	}
 
-
 	CreateZeebeCallActivityBehavior.$inject = [
+	  'bpmnFactory',
 	  'eventBus',
-	  'bpmnFactory'
+	  'modeling'
 	];
 
-	inherits_browser(CreateZeebeCallActivityBehavior, CommandInterceptor);
-
-	const HIGH_PRIORITY$n = 15000;
+	const HIGH_PRIORITY$o = 5000;
 
 
 	/**
-	 * UpdatePropagateAllChildVariablesBehavior reacts to either (1) toggling on propagateAllChildVariables
-	 * when there are outputParameters present or (2) to adding outputParameters when
-	 * propagateAllChildVariables is set to true.
-	 * It will ensure that the propagateAllChildVariables attribute on calledElement
-	 * extensionElements for callActivities is always consistent with outputParameter mappings
+	 * Zeebe BPMN behavior for updating zeebe:propagateAllChildVariables.
 	 */
-	function UpdatePropagateAllChildVariablesBehavior(
-	    eventBus) {
-
-	  CommandInterceptor.call(this, eventBus);
-
-	  // Behavior when toggling propagateAllChildVariables /////////////////////////
-	  /**
-	   * remove outputParameters from zeebe:IoMapping when setting propgateAlLChildVariables
-	   * to true in the proeprties panel
-	   */
-	  this.executed('properties-panel.update-businessobject' , HIGH_PRIORITY$n, function(context) {
-	    const {
-	      element,
-	      properties
-	    } = context;
-
-	    // (1) Don't execute this behavior if we are not in a call activity or not
-	    // have properties to update or not update the propagateAllChildVariables
-	    // to false
-	    if (!is$1(element, 'bpmn:CallActivity') ||
-	        !properties ||
-	        !!properties.propagateAllChildVariables === false) {
-	      return;
-	    }
-
-	    // (2) Check whether we have outputParameters
-	    const outputParameters = getOutputParameters(element),
-	          inputParameters = getInputParameters(element);
-
-	    if (!outputParameters ||
-	      outputParameters.length === 0) {
-	      return;
-	    }
-
-	    // (3) Store old outputParameters and remove them
-	    context.oldOutputParameters = outputParameters;
-
-	    const inputOutput = getInputOutput(element);
-	    inputOutput.outputParameters = [];
-
-	    // (4) if we also have no inputParameters, store IOMapping and remove it
-	    if (!inputParameters || inputParameters.length === 0) {
-	      const extensionElements = getBusinessObject(element).extensionElements;
-	      context.oldExtensionElements = extensionElements.values;
-
-	      extensionElements.values = extensionElements.values.filter(ele => ele.$type !== 'zeebe:IoMapping');
-	    }
-	  }, true);
-
-	  // Revert behavior when toggling propagateAllChildVariables //////////////////
-	  this.reverted('properties-panel.update-businessobject', HIGH_PRIORITY$n, function(context) {
-	    const {
-	      element,
-	      oldOutputParameters,
-	      oldExtensionElements
-	    } = context;
-
-	    // (1) Only intercept the revert, if the behavior became active
-	    if (oldOutputParameters) {
+	class UpdatePropagateAllChildVariablesBehavior extends CommandInterceptor {
+	  constructor(eventBus, modeling) {
+	    super(eventBus);
 
-	      // (2) If we removed the IOMapping, bring it back first
-	      if (oldExtensionElements) {
-	        const extensionElements = getBusinessObject(element).extensionElements;
+	    /**
+	     * Remove zeebe:OutputParameters when zeebe:propagateAllChildVariables is set to true.
+	     */
+	    this.postExecute('properties-panel.update-businessobject' , HIGH_PRIORITY$o, function(context) {
+	      const {
+	        element,
+	        properties
+	      } = context;
 
-	        extensionElements.values = oldExtensionElements;
+	      if (
+	        !is$1(element, 'bpmn:CallActivity')
+	        || !properties
+	        || !!properties.propagateAllChildVariables === false
+	      ) {
+	        return;
 	      }
 
-	      // (3) Bring back the outputParameters
-	      const inputOutput = getInputOutput(element);
-	      inputOutput.outputParameters = oldOutputParameters;
-	    }
-	  }, true);
+	      const inputParameters = getInputParameters(element),
+	            outputParameters = getOutputParameters(element);
 
+	      if (!outputParameters || !outputParameters.length) {
+	        return;
+	      }
 
-	  // Behavior when adding outputParameters ////////////////////////////////////
-	  /**
-	   * un-toggle propgateAlLChildVariables when adding output parameters
-	   */
-	  this.executed('properties-panel.update-businessobject-list' , HIGH_PRIORITY$n, function(context) {
-	    const {
-	      element,
-	      objectsToAdd
-	    } = context;
-
+	      const ioMapping = getIoMapping(element);
 
-	    // (1) Exit if we are not in a CallActivity, not adding an OutputParameter or not
-	    // having set propagateAllChildVariables to false
-	    if (!is$1(element, 'bpmn:CallActivity') ||
-	     !objectsToAdd ||
-	     objectsToAdd.length === 0 ||
-	     objectsToAdd.filter(obj => is$1(obj, 'zeebe:Output')).length === 0 ||
-	    isPropagateAllChildVariables(element) === false) {
-	      return;
-	    }
+	      modeling.updateModdleProperties(element, ioMapping, {
+	        'zeebe:outputParameters': []
+	      });
 
-	    // (2) Store the old propAllChildVariables value and update it then
-	    const bo = getBusinessObject(element),
-	          calledElement = getCalledElement(bo);
+	      if (!inputParameters || !inputParameters.length) {
+	        const businessObject = getBusinessObject(element),
+	              extensionElements = businessObject.get('extensionElements');
 
-	    context.oldPropagateAllChildVariables = true;
+	        const values = extensionElements.get('values').filter((element) => {
+	          return !is$1(element, 'zeebe:IoMapping');
+	        });
 
-	    calledElement.propagateAllChildVariables = false;
-	  }, true);
+	        modeling.updateModdleProperties(element, extensionElements, {
+	          values
+	        });
+	      }
+	    }, true);
 
-	  // Revert behavior when adding outputParmaeters ////////////////////////////////////
-	  this.reverted('properties-panel.update-businessobject-list' , HIGH_PRIORITY$n, function(context) {
-	    const {
-	      element,
-	      oldPropagateAllChildVariables
-	    } = context;
 
-	    // (1) Only intercept the revert, if the behavior became active
-	    if (oldPropagateAllChildVariables) {
-	      const bo = getBusinessObject(element),
-	            calledElement = getCalledElement(bo);
+	    /**
+	     * Set zeebe:propagateAllChildVariables to false on zeebe:Output added.
+	     */
+	    this.postExecute('properties-panel.update-businessobject-list' , HIGH_PRIORITY$o, function(context) {
+	      const {
+	        currentObject,
+	        element,
+	        objectsToAdd,
+	        propertyName
+	      } = context;
+
+	      if (!is$1(element, 'bpmn:CallActivity')
+	        || !is$1(currentObject, 'zeebe:IoMapping')
+	        || (propertyName !== 'outputParameters' && propertyName !== 'zeebe:outputParameters')
+	        || !objectsToAdd
+	        || !objectsToAdd.length
+	        || !objectsToAdd.find((object) => is$1(object, 'zeebe:Output'))
+	        || !isPropagateAllChildVariables(element)) {
+	        return;
+	      }
 
-	      calledElement.propagateAllChildVariables = oldPropagateAllChildVariables;
-	    }
-	  }, true);
+	      const businessObject = getBusinessObject(element),
+	            calledElement = getCalledElement(businessObject);
 
+	      modeling.updateModdleProperties(element, calledElement, {
+	        'zeebe:propagateAllChildVariables': false
+	      });
+	    }, true);
 
+	  }
 	}
 
-
 	UpdatePropagateAllChildVariablesBehavior.$inject = [
-	  'eventBus'
+	  'eventBus',
+	  'modeling'
 	];
 
+	const USER_TASK_FORM_PREFIX = 'UserTaskForm_';
 
-	inherits_browser(UpdatePropagateAllChildVariablesBehavior, CommandInterceptor);
-
-	const USER_TASK_FORM_PREFIX = 'userTaskForm_';
-
-
-	function getUserTaskForm(element, parent) {
-
-	  const rootElement = parent || getRootElement$1(element);
-
-	  // (1) get form definition from user task
-	  const formDefinition = getFormDefinition(element);
-
-	  if (!formDefinition) {
-	    return;
-	  }
-
-	  const formKey = formDefinition.get('formKey');
-
-	  // (2) retrieve user task form via form key
-	  const userTaskForm = findUserTaskForm(formKey, rootElement);
-
-	  return userTaskForm;
-	}
-
-	function getFormDefinition(element) {
-	  const businessObject = getBusinessObject(element);
-
-	  const formDefinitions = ExtensionElementsHelper_1.getExtensionElements(businessObject, 'zeebe:FormDefinition');
-
-	  return formDefinitions[0];
-	}
-
-	function createFormKey(formId) {
-	  return 'camunda-forms:bpmn:' + formId;
-	}
 
 	function createFormDefinition(properties, extensionElements, bpmnFactory) {
 	  return ElementHelper_1.createElement(
@@ -72332,6 +72640,14 @@
 	  );
 	}
 
+	function createFormId() {
+	  return nextId_1(USER_TASK_FORM_PREFIX);
+	}
+
+	function createFormKey(formId) {
+	  return `camunda-forms:bpmn:${ formId }`;
+	}
+
 	function createUserTaskForm(properties, extensionElements, bpmnFactory) {
 	  return ElementHelper_1.createElement(
 	    'zeebe:UserTaskForm',
@@ -72341,19 +72657,22 @@
 	  );
 	}
 
-	function createFormId() {
-	  return nextId_1(USER_TASK_FORM_PREFIX);
-	}
+	function findUserTaskForm(formKey, rootElement) {
+	  const userTaskForms = ExtensionElementsHelper_1.getExtensionElements(rootElement, 'zeebe:UserTaskForm');
 
+	  return find(userTaskForms, function(userTaskForm) {
+	    const id = userTaskForm.get('zeebe:id');
 
-	// helpers /////////////////////
+	    return createFormKey(id) === formKey;
+	  });
+	}
 
-	function findUserTaskForm(formKey, rootElement) {
-	  const forms = ExtensionElementsHelper_1.getExtensionElements(rootElement, 'zeebe:UserTaskForm');
+	function getFormDefinition(element) {
+	  const businessObject = getBusinessObject(element);
 
-	  return find(forms, function(userTaskForm) {
-	    return createFormKey(userTaskForm.id) === formKey;
-	  });
+	  const formDefinitions = ExtensionElementsHelper_1.getExtensionElements(businessObject, 'zeebe:FormDefinition');
+
+	  return formDefinitions[ 0 ];
 	}
 
 	function getRootElement$1(element) {
@@ -72367,162 +72686,125 @@
 	  return parent;
 	}
 
-	/**
-	 * Zeebe specific form definition behavior.
-	 */
-	function FormDefinitionBehavior(
-	    eventBus, bpmnFactory) {
-
-	  CommandInterceptor.call(this, eventBus);
-
-	  /**
-	   * ensures a zeebe:userTaskForm is cleaned up when user task got removed
-	   */
-	  this.executed('shape.delete', function(context) {
-	    const {
-	      shape,
-	      oldParent
-	    } = context;
+	function getUserTaskForm(element, parent) {
+	  const rootElement = parent || getRootElement$1(element);
 
-	    const rootElement = getRootElement$2(oldParent);
+	  const formDefinition = getFormDefinition(element);
 
-	    const userTaskForm = getUserTaskForm(shape, rootElement);
+	  if (!formDefinition) {
+	    return;
+	  }
 
-	    const rootExtensionElements = rootElement.get('extensionElements');
+	  const formKey = formDefinition.get('zeebe:formKey');
 
-	    if (!is$1(shape, 'bpmn:UserTask') || !userTaskForm) {
-	      return;
-	    }
+	  return findUserTaskForm(formKey, rootElement);
+	}
 
-	    remove$2(rootExtensionElements.get('values'), userTaskForm);
+	/**
+	 * Zeebe BPMN specific form definition behavior.
+	 */
+	class FormDefinitionBehavior extends CommandInterceptor {
+	  constructor(bpmnFactory, eventBus, modeling) {
+	    super(eventBus);
 
-	    context.removedUserTaskForm = userTaskForm;
-	  }, true);
+	    /**
+	     * Remove zeebe:UserTaskForm on user task removed.
+	     */
+	    this.postExecute('shape.delete', function(context) {
+	      const {
+	        oldParent,
+	        shape
+	      } = context;
 
-	  this.revert('shape.delete', function(context) {
-	    const {
-	      removedUserTaskForm,
-	      oldParent
-	    } = context;
+	      const rootElement = getRootElement$2(oldParent);
 
-	    const rootElement = getRootElement$2(oldParent);
+	      const userTaskForm = getUserTaskForm(shape, rootElement);
 
-	    const rootExtensionElements = rootElement.get('extensionElements');
+	      if (!is$1(shape, 'bpmn:UserTask') || !userTaskForm) {
+	        return;
+	      }
 
-	    if (!removedUserTaskForm) {
-	      return;
-	    }
+	      const rootExtensionElements = rootElement.get('extensionElements');
 
-	    add$1(rootExtensionElements.get('values'), removedUserTaskForm);
-	  }, true);
+	      const values = rootExtensionElements.get('values').filter((element) => {
+	        return element !== userTaskForm;
+	      });
 
+	      modeling.updateModdleProperties(shape, rootExtensionElements, { values });
+	    }, true);
 
-	  /**
-	   * create fresh new copied form definition + user task form
-	   */
-	  this.executed('shape.create', function(context) {
-	    const {
-	      shape,
-	    } = context;
 
-	    const oldFormDefinition = getFormDefinition(shape);
+	    /**
+	     * Create new zeebe:FormDefinition and zeebe:UserTaskForm on user task created.
+	     */
+	    this.postExecute('shape.create', function(context) {
+	      const { shape } = context;
 
-	    if (!is$1(shape, 'bpmn:UserTask') || !oldFormDefinition) {
-	      return;
-	    }
+	      const oldFormDefinition = getFormDefinition(shape);
 
-	    const oldUserTaskForm = getUserTaskForm(shape);
+	      if (!is$1(shape, 'bpmn:UserTask') || !oldFormDefinition) {
+	        return;
+	      }
 
-	    const rootElement = getRootElement$2(shape);
+	      const oldUserTaskForm = getUserTaskForm(shape);
 
-	    const businessObject = getBusinessObject(shape);
+	      const rootElement = getRootElement$2(shape);
 
-	    const extensionElements = businessObject.get('extensionElements');
+	      const businessObject = getBusinessObject(shape);
 
-	    let rootExtensionElements = rootElement.get('extensionElements');
+	      const extensionElements = businessObject.get('extensionElements');
 
-	    // (1) ensure extension elements in root
-	    if (!rootExtensionElements) {
+	      let rootExtensionElements = rootElement.get('extensionElements');
 
-	      rootExtensionElements = ElementHelper_1.createElement(
-	        'bpmn:ExtensionElements',
-	        { values: [] },
-	        rootElement,
-	        bpmnFactory
-	      );
+	      // (1) ensure extension elements exists
+	      if (!rootExtensionElements) {
+	        rootExtensionElements = ElementHelper_1.createElement('bpmn:ExtensionElements', { values: [] }, rootElement, bpmnFactory);
 
-	      rootElement.set('extensionElements', rootExtensionElements);
-	    }
+	        modeling.updateModdleProperties(shape, rootElement, { extensionElements: rootExtensionElements });
+	      }
 
-	    // (2) remove existing form definition
-	    context.oldFormDefinition = oldFormDefinition;
+	      // (2) remove existing form definition
+	      let values = extensionElements.get('values').filter((element) => {
+	        return element !== oldFormDefinition;
+	      });
 
-	    remove$2(extensionElements.get('values'), oldFormDefinition);
+	      // (3) create new form definition
+	      const formId = createFormId();
 
-	    const formId = createFormId();
+	      const newFormDefinition = createFormDefinition({ formKey: createFormKey(formId) }, extensionElements, bpmnFactory);
 
-	    // (3) create new form definition
-	    const formDefinition = createFormDefinition(
-	      {
-	        formKey: createFormKey(formId)
-	      },
-	      extensionElements,
-	      bpmnFactory
-	    );
+	      values = [
+	        ...values,
+	        newFormDefinition
+	      ];
 
-	    add$1(extensionElements.get('values'), formDefinition);
+	      modeling.updateModdleProperties(shape, extensionElements, {
+	        values
+	      });
 
-	    // (4) create new user task form
-	    const userTaskForm = createUserTaskForm(
-	      {
+	      // (4) create new user task form
+	      const userTaskForm = createUserTaskForm({
 	        id: formId,
 	        body: oldUserTaskForm ? oldUserTaskForm.get('body') : ''
-	      },
-	      rootExtensionElements,
-	      bpmnFactory
-	    );
-
-	    add$1(rootExtensionElements.get('values'), userTaskForm);
-	  }, true);
-
-	  this.revert('shape.create', function(context) {
-	    const {
-	      shape,
-	      oldFormDefinition
-	    } = context;
-
-	    const businessObject = getBusinessObject(shape);
-
-	    const extensionElements = businessObject.get('extensionElements');
-
-	    const formDefinition = getFormDefinition(shape);
-
-	    const userTaskForm = getUserTaskForm(shape);
+	      }, rootExtensionElements, bpmnFactory);
 
-	    const rootElement = getRootElement$2(shape);
-
-	    const rootExtensionElements = rootElement.get('extensionElements');
-
-	    if (!is$1(shape, 'bpmn:UserTask') || !userTaskForm) {
-	      return;
-	    }
-
-	    // we need to cover the old form definition to make <redo> possible
-	    remove$2(extensionElements.get('values'), formDefinition);
-	    add$1(extensionElements.get('values'), oldFormDefinition);
-
-	    remove$2(rootExtensionElements.get('values'), userTaskForm);
-	  }, true);
+	      modeling.updateModdleProperties(shape, rootExtensionElements, {
+	        values: [
+	          ...(rootExtensionElements.get('values') || []),
+	          userTaskForm
+	        ]
+	      });
+	    }, true);
 
+	  }
 	}
 
 	FormDefinitionBehavior.$inject = [
+	  'bpmnFactory',
 	  'eventBus',
-	  'bpmnFactory'
+	  'modeling'
 	];
 
-	inherits_browser(FormDefinitionBehavior, CommandInterceptor);
-
 
 	// helpers //////////////
 
@@ -72539,11 +72821,13 @@
 
 	var zeebeModelingBehaviors = {
 	  __init__: [
+	    'cleanUpBusinessRuleTaskBehavior',
 	    'createZeebeBoundaryEventBehavior',
 	    'createZeebeCallActivityBehavior',
 	    'updatePropagateAllChildVariablesBehavior',
 	    'formDefinitionBehavior'
 	  ],
+	  cleanUpBusinessRuleTaskBehavior: [ 'type', CleanUpBusinessRuleTaskBehavior ],
 	  createZeebeBoundaryEventBehavior: [ 'type', CreateZeebeBoundaryEventBehavior ],
 	  createZeebeCallActivityBehavior: [ 'type', CreateZeebeCallActivityBehavior ],
 	  updatePropagateAllChildVariablesBehavior: [ 'type', UpdatePropagateAllChildVariablesBehavior ],
@@ -72772,7 +73056,7 @@
 	  zeebeReplaceMenuProvider: [ 'type', ReplaceMenuProvider$1 ]
 	};
 
-	const HIGH_PRIORITY$o = 15000;
+	const HIGH_PRIORITY$p = 5000;
 
 	/**
 	 * Zeebe rule provider that allows to create boundary events with catch events
@@ -72790,7 +73074,7 @@
 
 	  init() {
 	    super.init();
-	    this.addRule('shape.attach', HIGH_PRIORITY$o,(context) => {
+	    this.addRule('shape.attach', HIGH_PRIORITY$p,(context) => {
 	      return this.canAttach(
 	        context.shape,
 	        context.target,
@@ -73218,12 +73502,12 @@
 	    }
 
 	    // Get the IOMapping
-	    let inputOutput = getInputOutput(element);
+	    let inputOutput = getIoMapping(element);
 
 	    if (!inputOutput) {
 	      const parent = extensionElements;
 
-	      inputOutput = createIOMapping(parent, bpmnFactory, {
+	      inputOutput = createIoMapping(parent, bpmnFactory, {
 	        inputParameters: [],
 	        outputParameters: []
 	      });
@@ -73278,7 +73562,7 @@
 	function getIOMappingEntries(element, bpmnFactory, translate, options) {
 
 	  // Get the IOMapping and determine whether we are dealing with input or output parameters
-	  const inputOutput = getInputOutput(element),
+	  const inputOutput = getIoMapping(element),
 	        params = determineParamGetFunc(options.prop)(element, false);
 
 	  if (!params.length) {
@@ -73347,6 +73631,19 @@
 	  }
 	}
 
+
+	// helpers //////////
+
+	function determineParamGetFunc(property) {
+	  if (property == 'inputParameters') {
+	    return getInputParameters;
+	  }
+
+	  if (property == 'outputParameters') {
+	    return getOutputParameters;
+	  }
+	}
+
 	function inputOutput$1(group, element, bpmnFactory, translate, options) {
 
 	  const inputOutputEntry = inputOutput(element, bpmnFactory, translate, options);
@@ -75138,6 +75435,29 @@
 					isAttr: true
 				}
 			]
+		},
+		{
+			name: "CalledDecision",
+			superClass: [
+				"Element"
+			],
+			meta: {
+				allowedIn: [
+					"bpmn:BusinessRuleTask"
+				]
+			},
+			properties: [
+				{
+					name: "decisionId",
+					type: "String",
+					isAttr: true
+				},
+				{
+					name: "resultVariable",
+					type: "String",
+					isAttr: true
+				}
+			]
 		}
 	];
 	var zeebeModdle = {