camunda-bpmn-js 0.11.1 → 0.11.5

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);
 
@@ -72095,13 +72374,20 @@
 	    'properties-panel.update-businessobject-list'
 	  ], function(context) {
 	    const {
-	      element
+	      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;
+	    }
+
 	    // remove camunda:inputOutput if there are no input/output parameters anymore
 	    if (inputOutput && isEmpty$1(inputOutput)) {
 	      const filtered = extensionElements.values.filter(function(element) {
@@ -72216,6 +72502,12 @@
 	    ], function(context) {
 	      const { properties } = context;
 
+	      const businessObject = (
+	        context.moddleElement ||
+	        context.businessObject ||
+	        context.element.businessObject
+	      );
+
 	      if ('camunda:formKey' in properties) {
 	        Object.assign(properties, {
 	          'camunda:formRef': undefined,
@@ -72233,6 +72525,12 @@
 	            'camunda:formRefVersion': undefined
 	          });
 	        }
+
+	        if (!('camunda:formRefBinding' in properties) && isUndefined(businessObject.get('camunda:formRefBinding'))) {
+	          Object.assign(properties, {
+	            'camunda:formRefBinding': 'latest'
+	          });
+	        }
 	      }
 
 	      if ('camunda:formRefBinding' in properties && properties[ 'camunda:formRefBinding' ] !== 'version') {
@@ -88671,8 +88969,7 @@
 				{
 					name: "formRefBinding",
 					isAttr: true,
-					type: "String",
-					"default": "latest"
+					type: "String"
 				},
 				{
 					name: "formRefVersion",