camunda-bpmn-js 0.23.1 → 0.24.0

package/dist/camunda-cloud-viewer.development.js

@@ -682,7 +682,7 @@
 	  }
 	}
 
-	function ensureImported$2(element, target) {
+	function ensureImported(element, target) {
 
 	  if (element.ownerDocument !== target.ownerDocument) {
 	    try {
@@ -710,8 +710,8 @@
 	 *
 	 * @return {SVGElement} the appended node
 	 */
-	function appendTo$2(element, target) {
-	  return target.appendChild(ensureImported$2(element, target));
+	function appendTo(element, target) {
+	  return target.appendChild(ensureImported(element, target));
 	}
 
 	/**
@@ -726,8 +726,8 @@
 	 *
 	 * @return {SVGElement} the element
 	 */
-	function append$2(target, node) {
-	  appendTo$2(node, target);
+	function append(target, node) {
+	  appendTo(node, target);
 	  return target;
 	}
 
@@ -735,9 +735,9 @@
 	 * attribute accessor utility
 	 */
 
-	var LENGTH_ATTR$2 = 2;
+	var LENGTH_ATTR = 2;
 
-	var CSS_PROPERTIES$2 = {
+	var CSS_PROPERTIES = {
 	  'alignment-baseline': 1,
 	  'baseline-shift': 1,
 	  'clip': 1,
@@ -761,7 +761,7 @@
 	  'flood-opacity': 1,
 	  'font': 1,
 	  'font-family': 1,
-	  'font-size': LENGTH_ATTR$2,
+	  'font-size': LENGTH_ATTR,
 	  'font-size-adjust': 1,
 	  'font-stretch': 1,
 	  'font-style': 1,
@@ -791,7 +791,7 @@
 	  'stroke-linejoin': 1,
 	  'stroke-miterlimit': 1,
 	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR$2,
+	  'stroke-width': LENGTH_ATTR,
 	  'text-anchor': 1,
 	  'text-decoration': 1,
 	  'text-rendering': 1,
@@ -802,23 +802,23 @@
 	};
 
 
-	function getAttribute$2(node, name) {
-	  if (CSS_PROPERTIES$2[name]) {
+	function getAttribute(node, name) {
+	  if (CSS_PROPERTIES[name]) {
 	    return node.style[name];
 	  } else {
 	    return node.getAttributeNS(null, name);
 	  }
 	}
 
-	function setAttribute$2(node, name, value) {
+	function setAttribute(node, name, value) {
 	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 
-	  var type = CSS_PROPERTIES$2[hyphenated];
+	  var type = CSS_PROPERTIES[hyphenated];
 
 	  if (type) {
 
 	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR$2 && typeof value === 'number') {
+	    if (type === LENGTH_ATTR && typeof value === 'number') {
 	      value = String(value) + 'px';
 	    }
 
@@ -828,12 +828,12 @@
 	  }
 	}
 
-	function setAttributes$2(node, attrs) {
+	function setAttributes(node, attrs) {
 
 	  var names = Object.keys(attrs), i, name;
 
 	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute$2(node, name, attrs[name]);
+	    setAttribute(node, name, attrs[name]);
 	  }
 	}
 
@@ -847,15 +847,15 @@
 	 *
 	 * @return {String}
 	 */
-	function attr$3(node, name, value) {
+	function attr$1(node, name, value) {
 	  if (typeof name === 'string') {
 	    if (value !== undefined) {
-	      setAttribute$2(node, name, value);
+	      setAttribute(node, name, value);
 	    } else {
-	      return getAttribute$2(node, name);
+	      return getAttribute(node, name);
 	    }
 	  } else {
-	    setAttributes$2(node, name);
+	    setAttributes(node, name);
 	  }
 
 	  return node;
@@ -871,7 +871,7 @@
 	 * toString reference.
 	 */
 
-	const toString$2 = Object.prototype.toString;
+	const toString$1 = Object.prototype.toString;
 
 	/**
 	  * Wrap `el` in a `ClassList`.
@@ -881,11 +881,11 @@
 	  * @api public
 	  */
 
-	function classes$2(el) {
-	  return new ClassList$2(el);
+	function classes$1(el) {
+	  return new ClassList$1(el);
 	}
 
-	function ClassList$2(el) {
+	function ClassList$1(el) {
 	  if (!el || !el.nodeType) {
 	    throw new Error('A DOM element reference is required');
 	  }
@@ -901,7 +901,7 @@
 	  * @api public
 	  */
 
-	ClassList$2.prototype.add = function(name) {
+	ClassList$1.prototype.add = function(name) {
 	  this.list.add(name);
 	  return this;
 	};
@@ -916,8 +916,8 @@
 	  * @api public
 	  */
 
-	ClassList$2.prototype.remove = function(name) {
-	  if ('[object RegExp]' == toString$2.call(name)) {
+	ClassList$1.prototype.remove = function(name) {
+	  if ('[object RegExp]' == toString$1.call(name)) {
 	    return this.removeMatching(name);
 	  }
 
@@ -933,7 +933,7 @@
 	  * @api private
 	  */
 
-	ClassList$2.prototype.removeMatching = function(re) {
+	ClassList$1.prototype.removeMatching = function(re) {
 	  const arr = this.array();
 	  for (let i = 0; i < arr.length; i++) {
 	    if (re.test(arr[i])) {
@@ -955,7 +955,7 @@
 	  * @api public
 	  */
 
-	ClassList$2.prototype.toggle = function(name, force) {
+	ClassList$1.prototype.toggle = function(name, force) {
 	  if ('undefined' !== typeof force) {
 	    if (force !== this.list.toggle(name, force)) {
 	      this.list.toggle(name); // toggle again to correct
@@ -973,7 +973,7 @@
 	  * @api public
 	  */
 
-	ClassList$2.prototype.array = function() {
+	ClassList$1.prototype.array = function() {
 	  return Array.from(this.list);
 	};
 
@@ -985,12 +985,12 @@
 	  * @api public
 	  */
 
-	ClassList$2.prototype.has =
-	 ClassList$2.prototype.contains = function(name) {
+	ClassList$1.prototype.has =
+	 ClassList$1.prototype.contains = function(name) {
 	   return this.list.contains(name);
 	 };
 
-	function remove$3(element) {
+	function remove$2(element) {
 	  var parent = element.parentNode;
 
 	  if (parent) {
@@ -1010,17 +1010,17 @@
 	 * @param  {DOMElement} element
 	 * @return {DOMElement} the element (for chaining)
 	 */
-	function clear$2(element) {
+	function clear$1(element) {
 	  var child;
 
 	  while ((child = element.firstChild)) {
-	    remove$3(child);
+	    remove$2(child);
 	  }
 
 	  return element;
 	}
 
-	var ns$2 = {
+	var ns = {
 	  svg: 'http://www.w3.org/2000/svg'
 	};
 
@@ -1028,25 +1028,25 @@
 	 * DOM parsing utility
 	 */
 
-	var SVG_START$2 = '<svg xmlns="' + ns$2.svg + '"';
+	var SVG_START = '<svg xmlns="' + ns.svg + '"';
 
-	function parse$3(svg) {
+	function parse$1(svg) {
 
 	  var unwrap = false;
 
 	  // ensure we import a valid svg document
 	  if (svg.substring(0, 4) === '<svg') {
-	    if (svg.indexOf(ns$2.svg) === -1) {
-	      svg = SVG_START$2 + svg.substring(4);
+	    if (svg.indexOf(ns.svg) === -1) {
+	      svg = SVG_START + svg.substring(4);
 	    }
 	  } else {
 
 	    // namespace svg
-	    svg = SVG_START$2 + '>' + svg + '</svg>';
+	    svg = SVG_START + '>' + svg + '</svg>';
 	    unwrap = true;
 	  }
 
-	  var parsed = parseDocument$2(svg);
+	  var parsed = parseDocument(svg);
 
 	  if (!unwrap) {
 	    return parsed;
@@ -1063,7 +1063,7 @@
 	  return fragment;
 	}
 
-	function parseDocument$2(svg) {
+	function parseDocument(svg) {
 
 	  var parser;
 
@@ -1087,18 +1087,18 @@
 	 *
 	 * @returns {SVGElement}
 	 */
-	function create$3(name, attrs) {
+	function create$1(name, attrs) {
 	  var element;
 
 	  if (name.charAt(0) === '<') {
-	    element = parse$3(name).firstChild;
+	    element = parse$1(name).firstChild;
 	    element = document.importNode(element, true);
 	  } else {
-	    element = document.createElementNS(ns$2.svg, name);
+	    element = document.createElementNS(ns.svg, name);
 	  }
 
 	  if (attrs) {
-	    attr$3(element, attrs);
+	    attr$1(element, attrs);
 	  }
 
 	  return element;
@@ -1113,7 +1113,7 @@
 
 	function getNode() {
 	  if (node === null) {
-	    node = create$3('svg');
+	    node = create$1('svg');
 	  }
 
 	  return node;
@@ -1168,6 +1168,152 @@
 	  }
 	}
 
+	/**
+	 * Serialization util
+	 */
+
+	var TEXT_ENTITIES = /([&<>]{1})/g;
+	var ATTR_ENTITIES = /([\n\r"]{1})/g;
+
+	var ENTITY_REPLACEMENT = {
+	  '&': '&amp;',
+	  '<': '&lt;',
+	  '>': '&gt;',
+	  '"': '\''
+	};
+
+	function escape$1(str, pattern) {
+
+	  function replaceFn(match, entity) {
+	    return ENTITY_REPLACEMENT[entity] || entity;
+	  }
+
+	  return str.replace(pattern, replaceFn);
+	}
+
+	function serialize(node, output) {
+
+	  var i, len, attrMap, attrNode, childNodes;
+
+	  switch (node.nodeType) {
+
+	  // TEXT
+	  case 3:
+
+	    // replace special XML characters
+	    output.push(escape$1(node.textContent, TEXT_ENTITIES));
+	    break;
+
+	  // ELEMENT
+	  case 1:
+	    output.push('<', node.tagName);
+
+	    if (node.hasAttributes()) {
+	      attrMap = node.attributes;
+	      for (i = 0, len = attrMap.length; i < len; ++i) {
+	        attrNode = attrMap.item(i);
+	        output.push(' ', attrNode.name, '="', escape$1(attrNode.value, ATTR_ENTITIES), '"');
+	      }
+	    }
+
+	    if (node.hasChildNodes()) {
+	      output.push('>');
+	      childNodes = node.childNodes;
+	      for (i = 0, len = childNodes.length; i < len; ++i) {
+	        serialize(childNodes.item(i), output);
+	      }
+	      output.push('</', node.tagName, '>');
+	    } else {
+	      output.push('/>');
+	    }
+	    break;
+
+	  // COMMENT
+	  case 8:
+	    output.push('<!--', escape$1(node.nodeValue, TEXT_ENTITIES), '-->');
+	    break;
+
+	  // CDATA
+	  case 4:
+	    output.push('<![CDATA[', node.nodeValue, ']]>');
+	    break;
+
+	  default:
+	    throw new Error('unable to handle node ' + node.nodeType);
+	  }
+
+	  return output;
+	}
+
+	/**
+	 * innerHTML like functionality for SVG elements.
+	 * based on innerSVG (https://code.google.com/p/innersvg)
+	 */
+
+
+	function set(element, svg) {
+
+	  var parsed = parse$1(svg);
+
+	  // clear element contents
+	  clear$1(element);
+
+	  if (!svg) {
+	    return;
+	  }
+
+	  if (!isFragment(parsed)) {
+
+	    // extract <svg> from parsed document
+	    parsed = parsed.documentElement;
+	  }
+
+	  var nodes = slice$1(parsed.childNodes);
+
+	  // import + append each node
+	  for (var i = 0; i < nodes.length; i++) {
+	    appendTo(nodes[i], element);
+	  }
+
+	}
+
+	function get(element) {
+	  var child = element.firstChild,
+	      output = [];
+
+	  while (child) {
+	    serialize(child, output);
+	    child = child.nextSibling;
+	  }
+
+	  return output.join('');
+	}
+
+	function isFragment(node) {
+	  return node.nodeName === '#document-fragment';
+	}
+
+	function innerSVG(element, svg) {
+
+	  if (svg !== undefined) {
+
+	    try {
+	      set(element, svg);
+	    } catch (e) {
+	      throw new Error('error parsing SVG: ' + e.message);
+	    }
+
+	    return element;
+	  } else {
+	    return get(element);
+	  }
+	}
+
+
+	function slice$1(arr) {
+	  return Array.prototype.slice.call(arr);
+	}
+
 	/**
 	 * transform accessor utility
 	 */
@@ -1230,18 +1376,18 @@
 
 	function createLine(points, attrs) {
 
-	  var line = create$3('polyline');
-	  attr$3(line, { points: toSVGPoints(points) });
+	  var line = create$1('polyline');
+	  attr$1(line, { points: toSVGPoints(points) });
 
 	  if (attrs) {
-	    attr$3(line, attrs);
+	    attr$1(line, attrs);
 	  }
 
 	  return line;
 	}
 
 	function updateLine(gfx, points) {
-	  attr$3(gfx, { points: toSVGPoints(points) });
+	  attr$1(gfx, { points: toSVGPoints(points) });
 
 	  return gfx;
 	}
@@ -1510,7 +1656,7 @@
 	 * @param {String} [val]
 	 * @api public
 	 */
-	function attr$2(el, name, val) {
+	function attr(el, name, val) {
 
 	  // get
 	  if (arguments.length == 2) {
@@ -1538,7 +1684,7 @@
 	 * toString reference.
 	 */
 
-	const toString$1 = Object.prototype.toString;
+	const toString = Object.prototype.toString;
 
 	/**
 	 * Wrap `el` in a `ClassList`.
@@ -1548,8 +1694,8 @@
 	 * @api public
 	 */
 
-	function classes$1(el) {
-	  return new ClassList$1(el);
+	function classes(el) {
+	  return new ClassList(el);
 	}
 
 	/**
@@ -1559,7 +1705,7 @@
 	 * @api private
 	 */
 
-	function ClassList$1(el) {
+	function ClassList(el) {
 	  if (!el || !el.nodeType) {
 	    throw new Error('A DOM element reference is required');
 	  }
@@ -1575,7 +1721,7 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.add = function(name) {
+	ClassList.prototype.add = function(name) {
 	  this.list.add(name);
 	  return this;
 	};
@@ -1590,8 +1736,8 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.remove = function(name) {
-	  if ('[object RegExp]' == toString$1.call(name)) {
+	ClassList.prototype.remove = function(name) {
+	  if ('[object RegExp]' == toString.call(name)) {
 	    return this.removeMatching(name);
 	  }
 
@@ -1607,7 +1753,7 @@
 	 * @api private
 	 */
 
-	ClassList$1.prototype.removeMatching = function(re) {
+	ClassList.prototype.removeMatching = function(re) {
 	  const arr = this.array();
 	  for (let i = 0; i < arr.length; i++) {
 	    if (re.test(arr[i])) {
@@ -1629,7 +1775,7 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.toggle = function(name, force) {
+	ClassList.prototype.toggle = function(name, force) {
 	  if ('undefined' !== typeof force) {
 	    if (force !== this.list.toggle(name, force)) {
 	      this.list.toggle(name); // toggle again to correct
@@ -1647,7 +1793,7 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.array = function() {
+	ClassList.prototype.array = function() {
 	  return Array.from(this.list);
 	};
 
@@ -1659,15 +1805,15 @@
 	 * @api public
 	 */
 
-	ClassList$1.prototype.has =
-	ClassList$1.prototype.contains = function(name) {
+	ClassList.prototype.has =
+	ClassList.prototype.contains = function(name) {
 	  return this.list.contains(name);
 	};
 
 	/**
 	 * Remove all children from the given element.
 	 */
-	function clear$1(el) {
+	function clear(el) {
 
 	  var c;
 
@@ -1819,7 +1965,7 @@
 	 * Expose `parse`.
 	 */
 
-	var domify = parse$2;
+	var domify = parse;
 
 	/**
 	 * Tests for browser support.
@@ -1883,7 +2029,7 @@
 	 * @api private
 	 */
 
-	function parse$2(html, doc) {
+	function parse(html, doc) {
 	  if ('string' != typeof html) throw new TypeError('String expected');
 
 	  // default to the global `document` object
@@ -1941,625 +2087,57 @@
 	  return el.querySelectorAll(selector);
 	}
 
-	function remove$2(el) {
+	function remove$1(el) {
 	  el.parentNode && el.parentNode.removeChild(el);
 	}
 
-	function ensureImported$1(element, target) {
-
-	  if (element.ownerDocument !== target.ownerDocument) {
-	    try {
-
-	      // may fail on webkit
-	      return target.ownerDocument.importNode(element, true);
-	    } catch (e) {
-
-	      // ignore
-	    }
-	  }
-
-	  return element;
+	/**
+	 * @param {<SVGElement>} element
+	 * @param {number} x
+	 * @param {number} y
+	 * @param {number} angle
+	 * @param {number} amount
+	 */
+	function transform(gfx, x, y, angle, amount) {
+	  var translate = createTransform();
+	  translate.setTranslate(x, y);
+
+	  var rotate = createTransform();
+	  rotate.setRotate(angle || 0, 0, 0);
+
+	  var scale = createTransform();
+	  scale.setScale(amount || 1, amount || 1);
+
+	  transform$1(gfx, [ translate, rotate, scale ]);
+	}
+
+
+	/**
+	 * @param {SVGElement} element
+	 * @param {number} x
+	 * @param {number} y
+	 */
+	function translate$1(gfx, x, y) {
+	  var translate = createTransform();
+	  translate.setTranslate(x, y);
+
+	  transform$1(gfx, translate);
+	}
+
+
+	/**
+	 * @param {SVGElement} element
+	 * @param {number} angle
+	 */
+	function rotate(gfx, angle) {
+	  var rotate = createTransform();
+	  rotate.setRotate(angle, 0, 0);
+
+	  transform$1(gfx, rotate);
 	}
 
-	/**
-	 * appendTo utility
-	 */
-
-	/**
-	 * Append a node to a target element and return the appended node.
-	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} target
-	 *
-	 * @return {SVGElement} the appended node
-	 */
-	function appendTo$1(element, target) {
-	  return target.appendChild(ensureImported$1(element, target));
-	}
-
-	/**
-	 * append utility
-	 */
-
-	/**
-	 * Append a node to an element
-	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} node
-	 *
-	 * @return {SVGElement} the element
-	 */
-	function append$1(target, node) {
-	  appendTo$1(node, target);
-	  return target;
-	}
-
-	/**
-	 * attribute accessor utility
-	 */
-
-	var LENGTH_ATTR$1 = 2;
-
-	var CSS_PROPERTIES$1 = {
-	  'alignment-baseline': 1,
-	  'baseline-shift': 1,
-	  'clip': 1,
-	  'clip-path': 1,
-	  'clip-rule': 1,
-	  'color': 1,
-	  'color-interpolation': 1,
-	  'color-interpolation-filters': 1,
-	  'color-profile': 1,
-	  'color-rendering': 1,
-	  'cursor': 1,
-	  'direction': 1,
-	  'display': 1,
-	  'dominant-baseline': 1,
-	  'enable-background': 1,
-	  'fill': 1,
-	  'fill-opacity': 1,
-	  'fill-rule': 1,
-	  'filter': 1,
-	  'flood-color': 1,
-	  'flood-opacity': 1,
-	  'font': 1,
-	  'font-family': 1,
-	  'font-size': LENGTH_ATTR$1,
-	  'font-size-adjust': 1,
-	  'font-stretch': 1,
-	  'font-style': 1,
-	  'font-variant': 1,
-	  'font-weight': 1,
-	  'glyph-orientation-horizontal': 1,
-	  'glyph-orientation-vertical': 1,
-	  'image-rendering': 1,
-	  'kerning': 1,
-	  'letter-spacing': 1,
-	  'lighting-color': 1,
-	  'marker': 1,
-	  'marker-end': 1,
-	  'marker-mid': 1,
-	  'marker-start': 1,
-	  'mask': 1,
-	  'opacity': 1,
-	  'overflow': 1,
-	  'pointer-events': 1,
-	  'shape-rendering': 1,
-	  'stop-color': 1,
-	  'stop-opacity': 1,
-	  'stroke': 1,
-	  'stroke-dasharray': 1,
-	  'stroke-dashoffset': 1,
-	  'stroke-linecap': 1,
-	  'stroke-linejoin': 1,
-	  'stroke-miterlimit': 1,
-	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR$1,
-	  'text-anchor': 1,
-	  'text-decoration': 1,
-	  'text-rendering': 1,
-	  'unicode-bidi': 1,
-	  'visibility': 1,
-	  'word-spacing': 1,
-	  'writing-mode': 1
-	};
-
-
-	function getAttribute$1(node, name) {
-	  if (CSS_PROPERTIES$1[name]) {
-	    return node.style[name];
-	  } else {
-	    return node.getAttributeNS(null, name);
-	  }
-	}
-
-	function setAttribute$1(node, name, value) {
-	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-
-	  var type = CSS_PROPERTIES$1[hyphenated];
-
-	  if (type) {
-
-	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR$1 && typeof value === 'number') {
-	      value = String(value) + 'px';
-	    }
-
-	    node.style[hyphenated] = value;
-	  } else {
-	    node.setAttributeNS(null, name, value);
-	  }
-	}
-
-	function setAttributes$1(node, attrs) {
-
-	  var names = Object.keys(attrs), i, name;
-
-	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute$1(node, name, attrs[name]);
-	  }
-	}
-
-	/**
-	 * Gets or sets raw attributes on a node.
-	 *
-	 * @param  {SVGElement} node
-	 * @param  {Object} [attrs]
-	 * @param  {String} [name]
-	 * @param  {String} [value]
-	 *
-	 * @return {String}
-	 */
-	function attr$1(node, name, value) {
-	  if (typeof name === 'string') {
-	    if (value !== undefined) {
-	      setAttribute$1(node, name, value);
-	    } else {
-	      return getAttribute$1(node, name);
-	    }
-	  } else {
-	    setAttributes$1(node, name);
-	  }
-
-	  return node;
-	}
-
-	/**
-	 * Taken from https://github.com/component/classes
-	 *
-	 * Without the component bits.
-	 */
-
-	/**
-	 * toString reference.
-	 */
-
-	const toString = Object.prototype.toString;
-
-	/**
-	  * Wrap `el` in a `ClassList`.
-	  *
-	  * @param {Element} el
-	  * @return {ClassList}
-	  * @api public
-	  */
-
-	function classes(el) {
-	  return new ClassList(el);
-	}
-
-	function ClassList(el) {
-	  if (!el || !el.nodeType) {
-	    throw new Error('A DOM element reference is required');
-	  }
-	  this.el = el;
-	  this.list = el.classList;
-	}
-
-	/**
-	  * Add class `name` if not already present.
-	  *
-	  * @param {String} name
-	  * @return {ClassList}
-	  * @api public
-	  */
-
-	ClassList.prototype.add = function(name) {
-	  this.list.add(name);
-	  return this;
-	};
-
-	/**
-	  * Remove class `name` when present, or
-	  * pass a regular expression to remove
-	  * any which match.
-	  *
-	  * @param {String|RegExp} name
-	  * @return {ClassList}
-	  * @api public
-	  */
-
-	ClassList.prototype.remove = function(name) {
-	  if ('[object RegExp]' == toString.call(name)) {
-	    return this.removeMatching(name);
-	  }
-
-	  this.list.remove(name);
-	  return this;
-	};
-
-	/**
-	  * Remove all classes matching `re`.
-	  *
-	  * @param {RegExp} re
-	  * @return {ClassList}
-	  * @api private
-	  */
-
-	ClassList.prototype.removeMatching = function(re) {
-	  const arr = this.array();
-	  for (let i = 0; i < arr.length; i++) {
-	    if (re.test(arr[i])) {
-	      this.remove(arr[i]);
-	    }
-	  }
-	  return this;
-	};
-
-	/**
-	  * Toggle class `name`, can force state via `force`.
-	  *
-	  * For browsers that support classList, but do not support `force` yet,
-	  * the mistake will be detected and corrected.
-	  *
-	  * @param {String} name
-	  * @param {Boolean} force
-	  * @return {ClassList}
-	  * @api public
-	  */
-
-	ClassList.prototype.toggle = function(name, force) {
-	  if ('undefined' !== typeof force) {
-	    if (force !== this.list.toggle(name, force)) {
-	      this.list.toggle(name); // toggle again to correct
-	    }
-	  } else {
-	    this.list.toggle(name);
-	  }
-	  return this;
-	};
-
-	/**
-	  * Return an array of classes.
-	  *
-	  * @return {Array}
-	  * @api public
-	  */
-
-	ClassList.prototype.array = function() {
-	  return Array.from(this.list);
-	};
-
-	/**
-	  * Check if class `name` is present.
-	  *
-	  * @param {String} name
-	  * @return {ClassList}
-	  * @api public
-	  */
-
-	ClassList.prototype.has =
-	 ClassList.prototype.contains = function(name) {
-	   return this.list.contains(name);
-	 };
-
-	function remove$1(element) {
-	  var parent = element.parentNode;
-
-	  if (parent) {
-	    parent.removeChild(element);
-	  }
-
-	  return element;
-	}
-
-	/**
-	 * Clear utility
-	 */
-
-	/**
-	 * Removes all children from the given element
-	 *
-	 * @param  {DOMElement} element
-	 * @return {DOMElement} the element (for chaining)
-	 */
-	function clear(element) {
-	  var child;
-
-	  while ((child = element.firstChild)) {
-	    remove$1(child);
-	  }
-
-	  return element;
-	}
-
-	var ns$1 = {
-	  svg: 'http://www.w3.org/2000/svg'
-	};
-
-	/**
-	 * DOM parsing utility
-	 */
-
-	var SVG_START$1 = '<svg xmlns="' + ns$1.svg + '"';
-
-	function parse$1(svg) {
-
-	  var unwrap = false;
-
-	  // ensure we import a valid svg document
-	  if (svg.substring(0, 4) === '<svg') {
-	    if (svg.indexOf(ns$1.svg) === -1) {
-	      svg = SVG_START$1 + svg.substring(4);
-	    }
-	  } else {
-
-	    // namespace svg
-	    svg = SVG_START$1 + '>' + svg + '</svg>';
-	    unwrap = true;
-	  }
-
-	  var parsed = parseDocument$1(svg);
-
-	  if (!unwrap) {
-	    return parsed;
-	  }
-
-	  var fragment = document.createDocumentFragment();
-
-	  var parent = parsed.firstChild;
-
-	  while (parent.firstChild) {
-	    fragment.appendChild(parent.firstChild);
-	  }
-
-	  return fragment;
-	}
-
-	function parseDocument$1(svg) {
-
-	  var parser;
-
-	  // parse
-	  parser = new DOMParser();
-	  parser.async = false;
-
-	  return parser.parseFromString(svg, 'text/xml');
-	}
-
-	/**
-	 * Create utility for SVG elements
-	 */
-
-
-	/**
-	 * Create a specific type from name or SVG markup.
-	 *
-	 * @param {String} name the name or markup of the element
-	 * @param {Object} [attrs] attributes to set on the element
-	 *
-	 * @returns {SVGElement}
-	 */
-	function create$2(name, attrs) {
-	  var element;
-
-	  if (name.charAt(0) === '<') {
-	    element = parse$1(name).firstChild;
-	    element = document.importNode(element, true);
-	  } else {
-	    element = document.createElementNS(ns$1.svg, name);
-	  }
-
-	  if (attrs) {
-	    attr$1(element, attrs);
-	  }
-
-	  return element;
-	}
-
-	/**
-	 * Serialization util
-	 */
-
-	var TEXT_ENTITIES = /([&<>]{1})/g;
-	var ATTR_ENTITIES = /([\n\r"]{1})/g;
-
-	var ENTITY_REPLACEMENT = {
-	  '&': '&amp;',
-	  '<': '&lt;',
-	  '>': '&gt;',
-	  '"': '\''
-	};
-
-	function escape$1(str, pattern) {
-
-	  function replaceFn(match, entity) {
-	    return ENTITY_REPLACEMENT[entity] || entity;
-	  }
-
-	  return str.replace(pattern, replaceFn);
-	}
-
-	function serialize(node, output) {
-
-	  var i, len, attrMap, attrNode, childNodes;
-
-	  switch (node.nodeType) {
-
-	  // TEXT
-	  case 3:
-
-	    // replace special XML characters
-	    output.push(escape$1(node.textContent, TEXT_ENTITIES));
-	    break;
-
-	  // ELEMENT
-	  case 1:
-	    output.push('<', node.tagName);
-
-	    if (node.hasAttributes()) {
-	      attrMap = node.attributes;
-	      for (i = 0, len = attrMap.length; i < len; ++i) {
-	        attrNode = attrMap.item(i);
-	        output.push(' ', attrNode.name, '="', escape$1(attrNode.value, ATTR_ENTITIES), '"');
-	      }
-	    }
-
-	    if (node.hasChildNodes()) {
-	      output.push('>');
-	      childNodes = node.childNodes;
-	      for (i = 0, len = childNodes.length; i < len; ++i) {
-	        serialize(childNodes.item(i), output);
-	      }
-	      output.push('</', node.tagName, '>');
-	    } else {
-	      output.push('/>');
-	    }
-	    break;
-
-	  // COMMENT
-	  case 8:
-	    output.push('<!--', escape$1(node.nodeValue, TEXT_ENTITIES), '-->');
-	    break;
-
-	  // CDATA
-	  case 4:
-	    output.push('<![CDATA[', node.nodeValue, ']]>');
-	    break;
-
-	  default:
-	    throw new Error('unable to handle node ' + node.nodeType);
-	  }
-
-	  return output;
-	}
-
-	/**
-	 * innerHTML like functionality for SVG elements.
-	 * based on innerSVG (https://code.google.com/p/innersvg)
-	 */
-
-
-	function set(element, svg) {
-
-	  var parsed = parse$1(svg);
-
-	  // clear element contents
-	  clear(element);
-
-	  if (!svg) {
-	    return;
-	  }
-
-	  if (!isFragment(parsed)) {
-
-	    // extract <svg> from parsed document
-	    parsed = parsed.documentElement;
-	  }
-
-	  var nodes = slice$1(parsed.childNodes);
-
-	  // import + append each node
-	  for (var i = 0; i < nodes.length; i++) {
-	    appendTo$1(nodes[i], element);
-	  }
-
-	}
-
-	function get(element) {
-	  var child = element.firstChild,
-	      output = [];
-
-	  while (child) {
-	    serialize(child, output);
-	    child = child.nextSibling;
-	  }
-
-	  return output.join('');
-	}
-
-	function isFragment(node) {
-	  return node.nodeName === '#document-fragment';
-	}
-
-	function innerSVG(element, svg) {
-
-	  if (svg !== undefined) {
-
-	    try {
-	      set(element, svg);
-	    } catch (e) {
-	      throw new Error('error parsing SVG: ' + e.message);
-	    }
-
-	    return element;
-	  } else {
-	    return get(element);
-	  }
-	}
-
-
-	function slice$1(arr) {
-	  return Array.prototype.slice.call(arr);
-	}
-
-	/**
-	 * @param {<SVGElement>} element
-	 * @param {number} x
-	 * @param {number} y
-	 * @param {number} angle
-	 * @param {number} amount
-	 */
-	function transform(gfx, x, y, angle, amount) {
-	  var translate = createTransform();
-	  translate.setTranslate(x, y);
-
-	  var rotate = createTransform();
-	  rotate.setRotate(angle || 0, 0, 0);
-
-	  var scale = createTransform();
-	  scale.setScale(amount || 1, amount || 1);
-
-	  transform$1(gfx, [ translate, rotate, scale ]);
-	}
-
-
-	/**
-	 * @param {SVGElement} element
-	 * @param {number} x
-	 * @param {number} y
-	 */
-	function translate$1(gfx, x, y) {
-	  var translate = createTransform();
-	  translate.setTranslate(x, y);
-
-	  transform$1(gfx, translate);
-	}
-
-
-	/**
-	 * @param {SVGElement} element
-	 * @param {number} angle
-	 */
-	function rotate(gfx, angle) {
-	  var rotate = createTransform();
-	  rotate.setRotate(angle, 0, 0);
-
-	  transform$1(gfx, rotate);
-	}
-
-	function createCommonjsModule(fn, module) {
-		return module = { exports: {} }, fn(module, module.exports), module.exports;
+	function createCommonjsModule(fn, module) {
+		return module = { exports: {} }, fn(module, module.exports), module.exports;
 	}
 
 	var hat_1 = createCommonjsModule(function (module) {
@@ -2765,11 +2343,11 @@
 	      attrs.strokeDasharray = [ 10000, 1 ];
 	    }
 
-	    var marker = create$2('marker');
+	    var marker = create$1('marker');
 
 	    attr$1(options.element, attrs);
 
-	    append$1(marker, options.element);
+	    append(marker, options.element);
 
 	    attr$1(marker, {
 	      id: id,
@@ -2784,12 +2362,12 @@
 	    var defs = query('defs', canvas._svg);
 
 	    if (!defs) {
-	      defs = create$2('defs');
+	      defs = create$1('defs');
 
-	      append$1(canvas._svg, defs);
+	      append(canvas._svg, defs);
 	    }
 
-	    append$1(defs, marker);
+	    append(defs, marker);
 
 	    markers[id] = marker;
 	  }
@@ -2813,7 +2391,7 @@
 	  function createMarker(id, type, fill, stroke) {
 
 	    if (type === 'sequenceflow-end') {
-	      var sequenceflowEnd = create$2('path');
+	      var sequenceflowEnd = create$1('path');
 	      attr$1(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
 
 	      addMarker(id, {
@@ -2828,7 +2406,7 @@
 	    }
 
 	    if (type === 'messageflow-start') {
-	      var messageflowStart = create$2('circle');
+	      var messageflowStart = create$1('circle');
 	      attr$1(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
 
 	      addMarker(id, {
@@ -2842,7 +2420,7 @@
 	    }
 
 	    if (type === 'messageflow-end') {
-	      var messageflowEnd = create$2('path');
+	      var messageflowEnd = create$1('path');
 	      attr$1(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
 
 	      addMarker(id, {
@@ -2857,7 +2435,7 @@
 	    }
 
 	    if (type === 'association-start') {
-	      var associationStart = create$2('path');
+	      var associationStart = create$1('path');
 	      attr$1(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
 
 	      addMarker(id, {
@@ -2873,7 +2451,7 @@
 	    }
 
 	    if (type === 'association-end') {
-	      var associationEnd = create$2('path');
+	      var associationEnd = create$1('path');
 	      attr$1(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
 
 	      addMarker(id, {
@@ -2889,7 +2467,7 @@
 	    }
 
 	    if (type === 'conditional-flow-marker') {
-	      var conditionalflowMarker = create$2('path');
+	      var conditionalflowMarker = create$1('path');
 	      attr$1(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
 
 	      addMarker(id, {
@@ -2904,7 +2482,7 @@
 	    }
 
 	    if (type === 'conditional-default-flow-marker') {
-	      var conditionaldefaultflowMarker = create$2('path');
+	      var conditionaldefaultflowMarker = create$1('path');
 	      attr$1(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
 
 	      addMarker(id, {
@@ -2940,7 +2518,7 @@
 	    var cx = width / 2,
 	        cy = height / 2;
 
-	    var circle = create$2('circle');
+	    var circle = create$1('circle');
 	    attr$1(circle, {
 	      cx: cx,
 	      cy: cy,
@@ -2948,7 +2526,7 @@
 	    });
 	    attr$1(circle, attrs);
 
-	    append$1(parentGfx, circle);
+	    append(parentGfx, circle);
 
 	    return circle;
 	  }
@@ -2968,7 +2546,7 @@
 	      fill: 'white'
 	    });
 
-	    var rect = create$2('rect');
+	    var rect = create$1('rect');
 	    attr$1(rect, {
 	      x: offset,
 	      y: offset,
@@ -2979,7 +2557,7 @@
 	    });
 	    attr$1(rect, attrs);
 
-	    append$1(parentGfx, rect);
+	    append(parentGfx, rect);
 
 	    return rect;
 	  }
@@ -3001,13 +2579,13 @@
 	      fill: 'white'
 	    });
 
-	    var polygon = create$2('polygon');
+	    var polygon = create$1('polygon');
 	    attr$1(polygon, {
 	      points: pointsString
 	    });
 	    attr$1(polygon, attrs);
 
-	    append$1(parentGfx, polygon);
+	    append(parentGfx, polygon);
 
 	    return polygon;
 	  }
@@ -3021,7 +2599,7 @@
 
 	    var line = createLine(waypoints, attrs);
 
-	    append$1(parentGfx, line);
+	    append(parentGfx, line);
 
 	    return line;
 	  }
@@ -3033,11 +2611,11 @@
 	      stroke: black
 	    });
 
-	    var path = create$2('path');
+	    var path = create$1('path');
 	    attr$1(path, { d: d });
 	    attr$1(path, attrs);
 
-	    append$1(parentGfx, path);
+	    append(parentGfx, path);
 
 	    return path;
 	  }
@@ -3123,9 +2701,9 @@
 
 	    var text = textRenderer.createText(label || '', options);
 
-	    classes(text).add('djs-label');
+	    classes$1(text).add('djs-label');
 
-	    append$1(parentGfx, text);
+	    append(parentGfx, text);
 
 	    return text;
 	  }
@@ -4768,9 +4346,9 @@
 	  var helperSvg = document.getElementById('helper-svg');
 
 	  if (!helperSvg) {
-	    helperSvg = create$3('svg');
+	    helperSvg = create$1('svg');
 
-	    attr$3(helperSvg, {
+	    attr$1(helperSvg, {
 	      id: 'helper-svg'
 	    });
 
@@ -4864,13 +4442,13 @@
 	  var maxWidth = box.width - padding.left - padding.right;
 
 	  // ensure correct rendering by attaching helper text node to invisible SVG
-	  var helperText = create$3('text');
-	  attr$3(helperText, { x: 0, y: 0 });
-	  attr$3(helperText, style);
+	  var helperText = create$1('text');
+	  attr$1(helperText, { x: 0, y: 0 });
+	  attr$1(helperText, style);
 
 	  var helperSvg = getHelperSvg();
 
-	  append$2(helperSvg, helperText);
+	  append(helperSvg, helperText);
 
 	  while (lines.length) {
 	    layouted.push(layoutNext(lines, maxWidth, helperText));
@@ -4899,9 +4477,9 @@
 	  y -= (lineHeight || layouted[0].height) / 4;
 
 
-	  var textElement = create$3('text');
+	  var textElement = create$1('text');
 
-	  attr$3(textElement, style);
+	  attr$1(textElement, style);
 
 	  // layout each line taking into account that parent
 	  // shape might resize to fit text size
@@ -4928,15 +4506,15 @@
 	        - line.width) / 2 + padding.left), 0);
 	    }
 
-	    var tspan = create$3('tspan');
-	    attr$3(tspan, { x: x, y: y });
+	    var tspan = create$1('tspan');
+	    attr$1(tspan, { x: x, y: y });
 
 	    tspan.textContent = line.text;
 
-	    append$2(textElement, tspan);
+	    append(textElement, tspan);
 	  });
 
-	  remove$3(helperText);
+	  remove$2(helperText);
 
 	  var dimensions = {
 	    width: maxLineWidth,
@@ -6511,13 +6089,13 @@
 	      throw new Error('invalid hit type <' + type + '>');
 	    }
 
-	    attr$3(hit, attrs);
+	    attr$1(hit, attrs);
 
 	    return hit;
 	  }
 
 	  function appendHit(gfx, hit) {
-	    append$2(gfx, hit);
+	    append(gfx, hit);
 	  }
 
 
@@ -6531,7 +6109,7 @@
 	  this.removeHits = function(gfx) {
 	    var hits = all('.djs-hit', gfx);
 
-	    forEach$1(hits, remove$3);
+	    forEach$1(hits, remove$2);
 	  };
 
 	  /**
@@ -6595,11 +6173,11 @@
 	      y: 0
 	    }, attrs);
 
-	    var hit = create$3('rect');
+	    var hit = create$1('rect');
 
 	    applyStyle(hit, type);
 
-	    attr$3(hit, attrs);
+	    attr$1(hit, attrs);
 
 	    appendHit(gfx, hit);
 
@@ -6625,7 +6203,7 @@
 	    if (element.waypoints) {
 	      updateLine(hit, element.waypoints);
 	    } else {
-	      attr$3(hit, {
+	      attr$1(hit, {
 	        width: element.width,
 	        height: element.height
 	      });
@@ -6833,9 +6411,9 @@
 	  var self = this;
 
 	  function createOutline(gfx, bounds) {
-	    var outline = create$3('rect');
+	    var outline = create$1('rect');
 
-	    attr$3(outline, assign$1({
+	    attr$1(outline, assign$1({
 	      x: 10,
 	      y: 10,
 	      rx: 3,
@@ -6843,7 +6421,7 @@
 	      height: 100
 	    }, OUTLINE_STYLE));
 
-	    append$2(gfx, outline);
+	    append(gfx, outline);
 
 	    return outline;
 	  }
@@ -6887,7 +6465,7 @@
 	 */
 	Outline.prototype.updateShapeOutline = function(outline, element) {
 
-	  attr$3(outline, {
+	  attr$1(outline, {
 	    x: -this.offset,
 	    y: -this.offset,
 	    width: element.width + this.offset * 2,
@@ -6908,7 +6486,7 @@
 
 	  var bbox = getBBox(connection);
 
-	  attr$3(outline, {
+	  attr$1(outline, {
 	    x: bbox.x - this.offset,
 	    y: bbox.y - this.offset,
 	    width: bbox.width + this.offset * 2,
@@ -7112,13 +6690,13 @@
 	SelectionVisuals.prototype._updateSelectionOutline = function(selection) {
 	  var layer = this._canvas.getLayer('selectionOutline');
 
-	  clear$2(layer);
+	  clear$1(layer);
 
 	  var enabled = selection.length > 1;
 
 	  var container = this._canvas.getContainer();
 
-	  classes$2(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+	  classes$1(container)[enabled ? 'add' : 'remove']('djs-multi-select');
 
 	  if (!enabled) {
 	    return;
@@ -7126,15 +6704,15 @@
 
 	  var bBox = addSelectionOutlinePadding(getBBox(selection));
 
-	  var rect = create$3('rect');
+	  var rect = create$1('rect');
 
-	  attr$3(rect, assign$1({
+	  attr$1(rect, assign$1({
 	    rx: 3
 	  }, bBox));
 
-	  classes$2(rect).add('djs-selection-outline');
+	  classes$1(rect).add('djs-selection-outline');
 
-	  append$2(layer, rect);
+	  append(layer, rect);
 	};
 
 	// helpers //////////
@@ -7543,8 +7121,8 @@
 	    var container = self._getOverlayContainer(overlay.element, true);
 
 	    if (overlay) {
-	      remove$2(overlay.html);
-	      remove$2(overlay.htmlContainer);
+	      remove$1(overlay.html);
+	      remove$1(overlay.htmlContainer);
 
 	      delete overlay.htmlContainer;
 	      delete overlay.element;
@@ -7577,7 +7155,7 @@
 
 	  this._overlayContainers = [];
 
-	  clear$1(this._overlayRoot);
+	  clear(this._overlayRoot);
 	};
 
 	Overlays.prototype._updateOverlayContainer = function(container) {
@@ -7598,7 +7176,7 @@
 
 	  setPosition(html, x, y);
 
-	  attr$2(container.html, 'data-container-id', element.id);
+	  attr(container.html, 'data-container-id', element.id);
 	};
 
 
@@ -7725,7 +7303,7 @@
 	  htmlContainer.appendChild(html);
 
 	  if (overlay.type) {
-	    classes$1(htmlContainer).add('djs-overlay-' + overlay.type);
+	    classes(htmlContainer).add('djs-overlay-' + overlay.type);
 	  }
 
 	  var elementRoot = this._canvas.findRoot(element);
@@ -7854,7 +7432,7 @@
 	    var container = self._getOverlayContainer(element);
 
 	    if (container) {
-	      remove$2(container.html);
+	      remove$1(container.html);
 	      var i = self._overlayContainers.indexOf(container);
 	      if (i !== -1) {
 	        self._overlayContainers.splice(i, 1);
@@ -7885,7 +7463,7 @@
 	  eventBus.on('element.marker.update', function(e) {
 	    var container = self._getOverlayContainer(e.element, true);
 	    if (container) {
-	      classes$1(container.html)[e.add ? 'add' : 'remove'](e.marker);
+	      classes(container.html)[e.add ? 'add' : 'remove'](e.marker);
 	    }
 	  });
 
@@ -8350,7 +7928,7 @@
 	function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
 	  var breadcrumbs = domify$1('<ul class="bjs-breadcrumbs"></ul>');
 	  var container = canvas.getContainer();
-	  var containerClasses = classes$1(container);
+	  var containerClasses = classes(container);
 	  container.appendChild(breadcrumbs);
 
 	  var boParents = [];
@@ -8906,7 +8484,7 @@
 	  }
 
 	  var hasContent = bo && bo.flowElements && bo.flowElements.length;
-	  classes$1(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+	  classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
 	};
 
 	/**
@@ -9458,9 +9036,9 @@
 	};
 
 	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
-	  var rect = create$3('rect');
+	  var rect = create$1('rect');
 
-	  attr$3(rect, {
+	  attr$1(rect, {
 	    x: 0,
 	    y: 0,
 	    width: element.width || 0,
@@ -9468,12 +9046,12 @@
 	  });
 
 	  if (isFrameElement(element)) {
-	    attr$3(rect, assign$1({}, this.FRAME_STYLE, attrs || {}));
+	    attr$1(rect, assign$1({}, this.FRAME_STYLE, attrs || {}));
 	  } else {
-	    attr$3(rect, assign$1({}, this.SHAPE_STYLE, attrs || {}));
+	    attr$1(rect, assign$1({}, this.SHAPE_STYLE, attrs || {}));
 	  }
 
-	  append$2(visuals, rect);
+	  append(visuals, rect);
 
 	  return rect;
 	};
@@ -9481,7 +9059,7 @@
 	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
 	  var line = createLine(connection.waypoints, assign$1({}, this.CONNECTION_STYLE, attrs || {}));
-	  append$2(visuals, line);
+	  append(visuals, line);
 
 	  return line;
 	};
@@ -9704,7 +9282,7 @@
 	  // this way we can always get the correct container size
 	  // (this is impossible for <svg> elements at the moment)
 	  const parent = document.createElement('div');
-	  parent.setAttribute('class', 'djs-container');
+	  parent.setAttribute('class', 'djs-container djs-parent');
 
 	  assign(parent, {
 	    position: 'relative',
@@ -9719,8 +9297,8 @@
 	}
 
 	function createGroup(parent, cls, childIndex) {
-	  const group = create$3('g');
-	  classes$2(group).add(cls);
+	  const group = create$1('g');
+	  classes$1(group).add(cls);
 
 	  const index = childIndex !== undefined ? childIndex : parent.childNodes.length - 1;
 
@@ -9798,10 +9376,10 @@
 	  // html container
 	  const container = this._container = createContainer(config);
 
-	  const svg = this._svg = create$3('svg');
-	  attr$3(svg, { width: '100%', height: '100%' });
+	  const svg = this._svg = create$1('svg');
+	  attr$1(svg, { width: '100%', height: '100%' });
 
-	  append$2(container, svg);
+	  append(container, svg);
 
 	  const viewport = this._viewport = createGroup(svg, 'viewport');
 
@@ -10039,7 +9617,7 @@
 	    return group;
 	  }
 
-	  remove$3(group);
+	  remove$2(group);
 
 	  layer.visible = false;
 
@@ -10054,7 +9632,7 @@
 	  if (layer) {
 	    delete this._layers[name];
 
-	    remove$3(layer.group);
+	    remove$2(layer.group);
 	  }
 	};
 
@@ -10147,9 +9725,9 @@
 
 	      // invoke either addClass or removeClass based on mode
 	      if (add) {
-	        classes$2(gfx).add(marker);
+	        classes$1(gfx).add(marker);
 	      } else {
-	        classes$2(gfx).remove(marker);
+	        classes$1(gfx).remove(marker);
 	      }
 	    }
 	  });
@@ -10215,7 +9793,7 @@
 
 	  const gfx = this.getGraphics(element);
 
-	  return classes$2(gfx).has(marker);
+	  return classes$1(gfx).has(marker);
 	};
 
 	/**
@@ -11113,10 +10691,10 @@
 	  this._validateId(id);
 
 	  // associate dom node with element
-	  attr$3(gfx, ELEMENT_ID, id);
+	  attr$1(gfx, ELEMENT_ID, id);
 
 	  if (secondaryGfx) {
-	    attr$3(secondaryGfx, ELEMENT_ID, id);
+	    attr$1(secondaryGfx, ELEMENT_ID, id);
 	  }
 
 	  this._elements[id] = { element: element, gfx: gfx, secondaryGfx: secondaryGfx };
@@ -11125,7 +10703,7 @@
 	/**
 	 * Removes an element from the registry.
 	 *
-	 * @param {djs.model.Base} element
+	 * @param {string|djs.model.Base} element
 	 */
 	ElementRegistry.prototype.remove = function(element) {
 	  var elements = this._elements,
@@ -11135,10 +10713,10 @@
 	  if (container) {
 
 	    // unset element id on gfx
-	    attr$3(container.gfx, ELEMENT_ID, '');
+	    attr$1(container.gfx, ELEMENT_ID, '');
 
 	    if (container.secondaryGfx) {
-	      attr$3(container.secondaryGfx, ELEMENT_ID, '');
+	      attr$1(container.secondaryGfx, ELEMENT_ID, '');
 	    }
 
 	    delete elements[id];
@@ -11148,7 +10726,7 @@
 	/**
 	 * Update the id of an element
 	 *
-	 * @param {djs.model.Base} element
+	 * @param {string|djs.model.Base} element
 	 * @param {string} newId
 	 */
 	ElementRegistry.prototype.updateId = function(element, newId) {
@@ -11177,7 +10755,7 @@
 	/**
 	 * Update the graphics of an element
 	 *
-	 * @param {djs.model.Base} element
+	 * @param {string|djs.model.Base} element
 	 * @param {SVGElement} gfx
 	 * @param {boolean} [secondary=false] whether to update the secondary connected element
 	 */
@@ -11193,7 +10771,7 @@
 	  }
 
 	  if (gfx) {
-	    attr$3(gfx, ELEMENT_ID, id);
+	    attr$1(gfx, ELEMENT_ID, id);
 	  }
 
 	  return gfx;
@@ -11218,7 +10796,7 @@
 	  if (typeof filter === 'string') {
 	    id = filter;
 	  } else {
-	    id = filter && attr$3(filter, ELEMENT_ID);
+	    id = filter && attr$1(filter, ELEMENT_ID);
 	  }
 
 	  var container = this._elements[id];
@@ -11883,7 +11461,7 @@
 	 *
 	 * @return {Base} the new model instance
 	 */
-	function create$1(type, attrs) {
+	function create(type, attrs) {
 	  var Type = types$7[type];
 	  if (!Type) {
 	    throw new Error('unknown type: <' + type + '>');
@@ -11931,7 +11509,7 @@
 	    attrs.id = type + '_' + (this._uid++);
 	  }
 
-	  return create$1(type, attrs);
+	  return create(type, attrs);
 	};
 
 	var FN_REF = '__fn';
@@ -12501,10 +12079,10 @@
 	  } else {
 	    childrenGfx = getChildren(gfx);
 	    if (!childrenGfx) {
-	      childrenGfx = create$3('g');
-	      classes$2(childrenGfx).add('djs-children');
+	      childrenGfx = create$1('g');
+	      classes$1(childrenGfx).add('djs-children');
 
-	      append$2(gfx.parentNode, childrenGfx);
+	      append(gfx.parentNode, childrenGfx);
 	    }
 	  }
 
@@ -12518,7 +12096,7 @@
 	GraphicsFactory.prototype._clear = function(gfx) {
 	  var visual = getVisual(gfx);
 
-	  clear$1(visual);
+	  clear(visual);
 
 	  return visual;
 	};
@@ -12553,31 +12131,31 @@
 	GraphicsFactory.prototype._createContainer = function(
 	    type, childrenGfx, parentIndex, isFrame
 	) {
-	  var outerGfx = create$3('g');
-	  classes$2(outerGfx).add('djs-group');
+	  var outerGfx = create$1('g');
+	  classes$1(outerGfx).add('djs-group');
 
 	  // insert node at position
 	  if (typeof parentIndex !== 'undefined') {
 	    prependTo(outerGfx, childrenGfx, childrenGfx.childNodes[parentIndex]);
 	  } else {
-	    append$2(childrenGfx, outerGfx);
+	    append(childrenGfx, outerGfx);
 	  }
 
-	  var gfx = create$3('g');
-	  classes$2(gfx).add('djs-element');
-	  classes$2(gfx).add('djs-' + type);
+	  var gfx = create$1('g');
+	  classes$1(gfx).add('djs-element');
+	  classes$1(gfx).add('djs-' + type);
 
 	  if (isFrame) {
-	    classes$2(gfx).add('djs-frame');
+	    classes$1(gfx).add('djs-frame');
 	  }
 
-	  append$2(outerGfx, gfx);
+	  append(outerGfx, gfx);
 
 	  // create visual
-	  var visual = create$3('g');
-	  classes$2(visual).add('djs-visual');
+	  var visual = create$1('g');
+	  classes$1(visual).add('djs-visual');
 
-	  append$2(gfx, visual);
+	  append(gfx, visual);
 
 	  return gfx;
 	};
@@ -12669,9 +12247,9 @@
 	  }
 
 	  if (element.hidden) {
-	    attr$3(gfx, 'display', 'none');
+	    attr$1(gfx, 'display', 'none');
 	  } else {
-	    attr$3(gfx, 'display', 'block');
+	    attr$1(gfx, 'display', 'block');
 	  }
 	};
 
@@ -12679,7 +12257,7 @@
 	  var gfx = this._elementRegistry.getGraphics(element);
 
 	  // remove
-	  remove$3(gfx.parentNode);
+	  remove$2(gfx.parentNode);
 	};
 
 
@@ -21355,903 +20933,640 @@
 	      definitions: definitions,
 	      elementsById: elementsById,
 	      references: references,
-	      warnings: aggregatedWarnings
-	    })) || definitions;
-
-	    const importResult = await this.importDefinitions(definitions, bpmnDiagram);
-
-	    aggregatedWarnings = aggregatedWarnings.concat(importResult.warnings);
-
-	    this._emit('import.done', { error: null, warnings: aggregatedWarnings });
-
-	    return { warnings: aggregatedWarnings };
-	  } catch (err) {
-	    let error = err;
-	    aggregatedWarnings = aggregatedWarnings.concat(error.warnings || []);
-	    addWarningsToError(error, aggregatedWarnings);
-
-	    error = checkValidationError(error);
-
-	    this._emit('import.done', { error, warnings: error.warnings });
-
-	    throw error;
-	  }
-	});
-
-	/**
-	* The importDefinitions result.
-	*
-	* @typedef {Object} ImportDefinitionsResult
-	*
-	* @property {Array<string>} warnings
-	*/
-
-	/**
-	* The importDefinitions error.
-	*
-	* @typedef {Error} ImportDefinitionsError
-	*
-	* @property {Array<string>} warnings
-	*/
-
-	/**
-	 * Import parsed definitions and render a BPMN 2.0 diagram.
-	 *
-	 * Once finished the viewer reports back the result to the
-	 * provided callback function with (err, warnings).
-	 *
-	 * ## Life-Cycle Events
-	 *
-	 * During import the viewer will fire life-cycle events:
-	 *
-	 *   * import.render.start (graphical import start)
-	 *   * import.render.complete (graphical import finished)
-	 *
-	 * You can use these events to hook into the life-cycle.
-	 *
-	 * @param {ModdleElement<Definitions>} definitions parsed BPMN 2.0 definitions
-	 * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
-	 *
-	 * Returns {Promise<ImportDefinitionsResult, ImportDefinitionsError>}
-	 */
-	BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function importDefinitions(definitions, bpmnDiagram) {
-	  this._setDefinitions(definitions);
-	  const result = await this.open(bpmnDiagram);
-
-	  return { warnings: result.warnings };
-	});
-
-	/**
-	 * The open result.
-	 *
-	 * @typedef {Object} OpenResult
-	 *
-	 * @property {Array<string>} warnings
-	 */
-
-	/**
-	* The open error.
-	*
-	* @typedef {Error} OpenError
-	*
-	* @property {Array<string>} warnings
-	*/
-
-	/**
-	 * Open diagram of previously imported XML.
-	 *
-	 * Once finished the viewer reports back the result to the
-	 * provided callback function with (err, warnings).
-	 *
-	 * ## Life-Cycle Events
-	 *
-	 * During switch the viewer will fire life-cycle events:
-	 *
-	 *   * import.render.start (graphical import start)
-	 *   * import.render.complete (graphical import finished)
-	 *
-	 * You can use these events to hook into the life-cycle.
-	 *
-	 * @param {string|ModdleElement<BPMNDiagram>} [bpmnDiagramOrId] id or the diagram to open
-	 *
-	 * Returns {Promise<OpenResult, OpenError>}
-	 */
-	BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagramOrId) {
-
-	  const definitions = this._definitions;
-	  let bpmnDiagram = bpmnDiagramOrId;
-
-	  if (!definitions) {
-	    const error = new Error('no XML imported');
-	    addWarningsToError(error, []);
-
-	    throw error;
-	  }
-
-	  if (typeof bpmnDiagramOrId === 'string') {
-	    bpmnDiagram = findBPMNDiagram(definitions, bpmnDiagramOrId);
-
-	    if (!bpmnDiagram) {
-	      const error = new Error('BPMNDiagram <' + bpmnDiagramOrId + '> not found');
-	      addWarningsToError(error, []);
-
-	      throw error;
-	    }
-	  }
-
-	  // clear existing rendered diagram
-	  // catch synchronous exceptions during #clear()
-	  try {
-	    this.clear();
-	  } catch (error) {
-	    addWarningsToError(error, []);
-
-	    throw error;
-	  }
-
-	  // perform graphical import
-	  const { warnings } = await importBpmnDiagram(this, definitions, bpmnDiagram);
-
-	  return { warnings };
-	});
-
-	/**
-	 * The saveXML result.
-	 *
-	 * @typedef {Object} SaveXMLResult
-	 *
-	 * @property {string} xml
-	 */
-
-	/**
-	 * Export the currently displayed BPMN 2.0 diagram as
-	 * a BPMN 2.0 XML document.
-	 *
-	 * ## Life-Cycle Events
-	 *
-	 * During XML saving the viewer will fire life-cycle events:
-	 *
-	 *   * saveXML.start (before serialization)
-	 *   * saveXML.serialized (after xml generation)
-	 *   * saveXML.done (everything done)
-	 *
-	 * You can use these events to hook into the life-cycle.
-	 *
-	 * @param {Object} [options] export options
-	 * @param {boolean} [options.format=false] output formatted XML
-	 * @param {boolean} [options.preamble=true] output preamble
-	 *
-	 * Returns {Promise<SaveXMLResult, Error>}
-	 */
-	BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(options) {
-
-	  options = options || {};
-
-	  let definitions = this._definitions,
-	      error, xml;
-
-	  try {
-	    if (!definitions) {
-	      throw new Error('no definitions loaded');
-	    }
+	      warnings: aggregatedWarnings
+	    })) || definitions;
 
-	    // allow to fiddle around with definitions
-	    definitions = this._emit('saveXML.start', {
-	      definitions
-	    }) || definitions;
+	    const importResult = await this.importDefinitions(definitions, bpmnDiagram);
 
-	    const result = await this._moddle.toXML(definitions, options);
-	    xml = result.xml;
+	    aggregatedWarnings = aggregatedWarnings.concat(importResult.warnings);
 
-	    xml = this._emit('saveXML.serialized', {
-	      xml
-	    }) || xml;
+	    this._emit('import.done', { error: null, warnings: aggregatedWarnings });
+
+	    return { warnings: aggregatedWarnings };
 	  } catch (err) {
-	    error = err;
-	  }
+	    let error = err;
+	    aggregatedWarnings = aggregatedWarnings.concat(error.warnings || []);
+	    addWarningsToError(error, aggregatedWarnings);
 
-	  const result = error ? { error } : { xml };
+	    error = checkValidationError(error);
 
-	  this._emit('saveXML.done', result);
+	    this._emit('import.done', { error, warnings: error.warnings });
 
-	  if (error) {
 	    throw error;
 	  }
-
-	  return result;
 	});
 
 	/**
-	 * The saveSVG result.
-	 *
-	 * @typedef {Object} SaveSVGResult
-	 *
-	 * @property {string} svg
-	 */
+	* The importDefinitions result.
+	*
+	* @typedef {Object} ImportDefinitionsResult
+	*
+	* @property {Array<string>} warnings
+	*/
 
 	/**
-	 * Export the currently displayed BPMN 2.0 diagram as
-	 * an SVG image.
+	* The importDefinitions error.
+	*
+	* @typedef {Error} ImportDefinitionsError
+	*
+	* @property {Array<string>} warnings
+	*/
+
+	/**
+	 * Import parsed definitions and render a BPMN 2.0 diagram.
+	 *
+	 * Once finished the viewer reports back the result to the
+	 * provided callback function with (err, warnings).
 	 *
 	 * ## Life-Cycle Events
 	 *
-	 * During SVG saving the viewer will fire life-cycle events:
+	 * During import the viewer will fire life-cycle events:
 	 *
-	 *   * saveSVG.start (before serialization)
-	 *   * saveSVG.done (everything done)
+	 *   * import.render.start (graphical import start)
+	 *   * import.render.complete (graphical import finished)
 	 *
 	 * You can use these events to hook into the life-cycle.
 	 *
-	 * @param {Object} [options]
+	 * @param {ModdleElement<Definitions>} definitions parsed BPMN 2.0 definitions
+	 * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
 	 *
-	 * Returns {Promise<SaveSVGResult, Error>}
+	 * Returns {Promise<ImportDefinitionsResult, ImportDefinitionsError>}
 	 */
-	BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG(options = {}) {
-	  this._emit('saveSVG.start');
-
-	  let svg, err;
-
-	  try {
-	    const canvas = this.get('canvas');
-
-	    const contentNode = canvas.getActiveLayer(),
-	          defsNode = query('defs', canvas._svg);
-
-	    const contents = innerSVG(contentNode),
-	          defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';
-
-	    const bbox = contentNode.getBBox();
-
-	    svg =
-	      '<?xml version="1.0" encoding="utf-8"?>\n' +
-	      '<!-- created with bpmn-js / http://bpmn.io -->\n' +
-	      '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
-	      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
-	      'width="' + bbox.width + '" height="' + bbox.height + '" ' +
-	      'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
-	      defs + contents +
-	      '</svg>';
-	  } catch (e) {
-	    err = e;
-	  }
-
-	  this._emit('saveSVG.done', {
-	    error: err,
-	    svg: svg
-	  });
-
-	  if (err) {
-	    throw err;
-	  }
+	BaseViewer.prototype.importDefinitions = wrapForCompatibility(async function importDefinitions(definitions, bpmnDiagram) {
+	  this._setDefinitions(definitions);
+	  const result = await this.open(bpmnDiagram);
 
-	  return { svg };
+	  return { warnings: result.warnings };
 	});
 
 	/**
-	 * Get a named diagram service.
-	 *
-	 * @example
-	 *
-	 * const elementRegistry = viewer.get('elementRegistry');
-	 * const startEventShape = elementRegistry.get('StartEvent_1');
-	 *
-	 * @param {string} name
+	 * The open result.
 	 *
-	 * @return {Object} diagram service instance
+	 * @typedef {Object} OpenResult
 	 *
-	 * @method BaseViewer#get
+	 * @property {Array<string>} warnings
 	 */
 
 	/**
-	 * Invoke a function in the context of this viewer.
-	 *
-	 * @example
-	 *
-	 * viewer.invoke(function(elementRegistry) {
-	 *   const startEventShape = elementRegistry.get('StartEvent_1');
-	 * });
-	 *
-	 * @param {Function} fn to be invoked
-	 *
-	 * @return {Object} the functions return value
-	 *
-	 * @method BaseViewer#invoke
-	 */
-
-
-	BaseViewer.prototype._setDefinitions = function(definitions) {
-	  this._definitions = definitions;
-	};
-
-	BaseViewer.prototype.getModules = function() {
-	  return this._modules;
-	};
+	* The open error.
+	*
+	* @typedef {Error} OpenError
+	*
+	* @property {Array<string>} warnings
+	*/
 
 	/**
-	 * Remove all drawn elements from the viewer.
+	 * Open diagram of previously imported XML.
 	 *
-	 * After calling this method the viewer can still
-	 * be reused for opening another diagram.
+	 * Once finished the viewer reports back the result to the
+	 * provided callback function with (err, warnings).
 	 *
-	 * @method BaseViewer#clear
-	 */
-	BaseViewer.prototype.clear = function() {
-	  if (!this.getDefinitions()) {
-
-	    // no diagram to clear
-	    return;
-	  }
-
-	  // remove drawn elements
-	  Diagram.prototype.clear.call(this);
-	};
-
-	/**
-	 * Destroy the viewer instance and remove all its
-	 * remainders from the document tree.
-	 */
-	BaseViewer.prototype.destroy = function() {
-
-	  // diagram destroy
-	  Diagram.prototype.destroy.call(this);
-
-	  // dom detach
-	  remove$2(this._container);
-	};
-
-	/**
-	 * Register an event listener
+	 * ## Life-Cycle Events
 	 *
-	 * Remove a previously added listener via {@link #off(event, callback)}.
+	 * During switch the viewer will fire life-cycle events:
 	 *
-	 * @param {string} event
-	 * @param {number} [priority]
-	 * @param {Function} callback
-	 * @param {Object} [that]
-	 */
-	BaseViewer.prototype.on = function(event, priority, callback, target) {
-	  return this.get('eventBus').on(event, priority, callback, target);
-	};
-
-	/**
-	 * De-register an event listener
+	 *   * import.render.start (graphical import start)
+	 *   * import.render.complete (graphical import finished)
 	 *
-	 * @param {string} event
-	 * @param {Function} callback
+	 * You can use these events to hook into the life-cycle.
+	 *
+	 * @param {string|ModdleElement<BPMNDiagram>} [bpmnDiagramOrId] id or the diagram to open
+	 *
+	 * Returns {Promise<OpenResult, OpenError>}
 	 */
-	BaseViewer.prototype.off = function(event, callback) {
-	  this.get('eventBus').off(event, callback);
-	};
-
-	BaseViewer.prototype.attachTo = function(parentNode) {
-
-	  if (!parentNode) {
-	    throw new Error('parentNode required');
-	  }
-
-	  // ensure we detach from the
-	  // previous, old parent
-	  this.detach();
-
-	  // unwrap jQuery if provided
-	  if (parentNode.get && parentNode.constructor.prototype.jquery) {
-	    parentNode = parentNode.get(0);
-	  }
-
-	  if (typeof parentNode === 'string') {
-	    parentNode = query(parentNode);
-	  }
-
-	  parentNode.appendChild(this._container);
-
-	  this._emit('attach', {});
-
-	  this.get('canvas').resized();
-	};
-
-	BaseViewer.prototype.getDefinitions = function() {
-	  return this._definitions;
-	};
-
-	BaseViewer.prototype.detach = function() {
-
-	  const container = this._container,
-	        parentNode = container.parentNode;
-
-	  if (!parentNode) {
-	    return;
-	  }
+	BaseViewer.prototype.open = wrapForCompatibility(async function open(bpmnDiagramOrId) {
 
-	  this._emit('detach', {});
+	  const definitions = this._definitions;
+	  let bpmnDiagram = bpmnDiagramOrId;
 
-	  parentNode.removeChild(container);
-	};
+	  if (!definitions) {
+	    const error = new Error('no XML imported');
+	    addWarningsToError(error, []);
 
-	BaseViewer.prototype._init = function(container, moddle, options) {
+	    throw error;
+	  }
 
-	  const baseModules = options.modules || this.getModules(),
-	        additionalModules = options.additionalModules || [],
-	        staticModules = [
-	          {
-	            bpmnjs: [ 'value', this ],
-	            moddle: [ 'value', moddle ]
-	          }
-	        ];
+	  if (typeof bpmnDiagramOrId === 'string') {
+	    bpmnDiagram = findBPMNDiagram(definitions, bpmnDiagramOrId);
 
-	  const diagramModules = [].concat(staticModules, baseModules, additionalModules);
+	    if (!bpmnDiagram) {
+	      const error = new Error('BPMNDiagram <' + bpmnDiagramOrId + '> not found');
+	      addWarningsToError(error, []);
 
-	  const diagramOptions = assign$1(omit(options, [ 'additionalModules' ]), {
-	    canvas: assign$1({}, options.canvas, { container: container }),
-	    modules: diagramModules
-	  });
+	      throw error;
+	    }
+	  }
 
-	  // invoke diagram constructor
-	  Diagram.call(this, diagramOptions);
+	  // clear existing rendered diagram
+	  // catch synchronous exceptions during #clear()
+	  try {
+	    this.clear();
+	  } catch (error) {
+	    addWarningsToError(error, []);
 
-	  if (options && options.container) {
-	    this.attachTo(options.container);
+	    throw error;
 	  }
-	};
+
+	  // perform graphical import
+	  const { warnings } = await importBpmnDiagram(this, definitions, bpmnDiagram);
+
+	  return { warnings };
+	});
 
 	/**
-	 * Emit an event on the underlying {@link EventBus}
+	 * The saveXML result.
 	 *
-	 * @param  {string} type
-	 * @param  {Object} event
+	 * @typedef {Object} SaveXMLResult
 	 *
-	 * @return {Object} event processing result (if any)
+	 * @property {string} xml
 	 */
-	BaseViewer.prototype._emit = function(type, event) {
-	  return this.get('eventBus').fire(type, event);
-	};
-
-	BaseViewer.prototype._createContainer = function(options) {
-
-	  const container = domify$1('<div class="bjs-container"></div>');
-
-	  assign(container, {
-	    width: ensureUnit(options.width),
-	    height: ensureUnit(options.height),
-	    position: options.position
-	  });
-
-	  return container;
-	};
-
-	BaseViewer.prototype._createModdle = function(options) {
-	  const moddleOptions = assign$1({}, this._moddleExtensions, options.moddleExtensions);
 
-	  return new simple(moddleOptions);
-	};
-
-	BaseViewer.prototype._modules = [];
+	/**
+	 * Export the currently displayed BPMN 2.0 diagram as
+	 * a BPMN 2.0 XML document.
+	 *
+	 * ## Life-Cycle Events
+	 *
+	 * During XML saving the viewer will fire life-cycle events:
+	 *
+	 *   * saveXML.start (before serialization)
+	 *   * saveXML.serialized (after xml generation)
+	 *   * saveXML.done (everything done)
+	 *
+	 * You can use these events to hook into the life-cycle.
+	 *
+	 * @param {Object} [options] export options
+	 * @param {boolean} [options.format=false] output formatted XML
+	 * @param {boolean} [options.preamble=true] output preamble
+	 *
+	 * Returns {Promise<SaveXMLResult, Error>}
+	 */
+	BaseViewer.prototype.saveXML = wrapForCompatibility(async function saveXML(options) {
 
-	// helpers ///////////////
+	  options = options || {};
 
-	function addWarningsToError(err, warningsAry) {
-	  err.warnings = warningsAry;
-	  return err;
-	}
+	  let definitions = this._definitions,
+	      error, xml;
 
-	function checkValidationError(err) {
+	  try {
+	    if (!definitions) {
+	      throw new Error('no definitions loaded');
+	    }
 
-	  // check if we can help the user by indicating wrong BPMN 2.0 xml
-	  // (in case he or the exporting tool did not get that right)
+	    // allow to fiddle around with definitions
+	    definitions = this._emit('saveXML.start', {
+	      definitions
+	    }) || definitions;
 
-	  const pattern = /unparsable content <([^>]+)> detected([\s\S]*)$/;
-	  const match = pattern.exec(err.message);
+	    const result = await this._moddle.toXML(definitions, options);
+	    xml = result.xml;
 
-	  if (match) {
-	    err.message =
-	      'unparsable content <' + match[1] + '> detected; ' +
-	      'this may indicate an invalid BPMN 2.0 diagram file' + match[2];
+	    xml = this._emit('saveXML.serialized', {
+	      xml
+	    }) || xml;
+	  } catch (err) {
+	    error = err;
 	  }
 
-	  return err;
-	}
-
-	const DEFAULT_OPTIONS = {
-	  width: '100%',
-	  height: '100%',
-	  position: 'relative'
-	};
+	  const result = error ? { error } : { xml };
 
+	  this._emit('saveXML.done', result);
 
-	/**
-	 * Ensure the passed argument is a proper unit (defaulting to px)
-	 */
-	function ensureUnit(val) {
-	  return val + (isNumber(val) ? 'px' : '');
-	}
+	  if (error) {
+	    throw error;
+	  }
 
+	  return result;
+	});
 
 	/**
-	 * Find BPMNDiagram in definitions by ID
+	 * The saveSVG result.
 	 *
-	 * @param {ModdleElement<Definitions>} definitions
-	 * @param {string} diagramId
+	 * @typedef {Object} SaveSVGResult
 	 *
-	 * @return {ModdleElement<BPMNDiagram>|null}
+	 * @property {string} svg
 	 */
-	function findBPMNDiagram(definitions, diagramId) {
-	  if (!diagramId) {
-	    return null;
-	  }
-
-	  return find(definitions.diagrams, function(element) {
-	    return element.id === diagramId;
-	  }) || null;
-	}
 
 	/**
-	 * Adds the project logo to the diagram container as
-	 * required by the bpmn.io license.
+	 * Export the currently displayed BPMN 2.0 diagram as
+	 * an SVG image.
 	 *
-	 * @see http://bpmn.io/license
+	 * ## Life-Cycle Events
 	 *
-	 * @param {Element} container
+	 * During SVG saving the viewer will fire life-cycle events:
+	 *
+	 *   * saveSVG.start (before serialization)
+	 *   * saveSVG.done (everything done)
+	 *
+	 * You can use these events to hook into the life-cycle.
+	 *
+	 * @param {Object} [options]
+	 *
+	 * Returns {Promise<SaveSVGResult, Error>}
 	 */
-	function addProjectLogo(container) {
-	  const img = BPMNIO_IMG;
+	BaseViewer.prototype.saveSVG = wrapForCompatibility(async function saveSVG(options = {}) {
+	  this._emit('saveSVG.start');
 
-	  const linkMarkup =
-	    '<a href="http://bpmn.io" ' +
-	    'target="_blank" ' +
-	    'class="bjs-powered-by" ' +
-	    'title="Powered by bpmn.io" ' +
-	    '>' +
-	    img +
-	    '</a>';
+	  let svg, err;
 
-	  const linkElement = domify$1(linkMarkup);
+	  try {
+	    const canvas = this.get('canvas');
 
-	  assign(query('svg', linkElement), LOGO_STYLES);
-	  assign(linkElement, LINK_STYLES, {
-	    position: 'absolute',
-	    bottom: '15px',
-	    right: '15px',
-	    zIndex: '100'
-	  });
+	    const contentNode = canvas.getActiveLayer(),
+	          defsNode = query('defs', canvas._svg);
 
-	  container.appendChild(linkElement);
+	    const contents = innerSVG(contentNode),
+	          defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';
 
-	  event.bind(linkElement, 'click', function(event) {
-	    open();
+	    const bbox = contentNode.getBBox();
 
-	    event.preventDefault();
+	    svg =
+	      '<?xml version="1.0" encoding="utf-8"?>\n' +
+	      '<!-- created with bpmn-js / http://bpmn.io -->\n' +
+	      '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
+	      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
+	      'width="' + bbox.width + '" height="' + bbox.height + '" ' +
+	      'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
+	      defs + contents +
+	      '</svg>';
+	  } catch (e) {
+	    err = e;
+	  }
+
+	  this._emit('saveSVG.done', {
+	    error: err,
+	    svg: svg
 	  });
-	}
 
-	/* </project-logo> */
+	  if (err) {
+	    throw err;
+	  }
+
+	  return { svg };
+	});
 
 	/**
-	 * A viewer for BPMN 2.0 diagrams.
-	 *
-	 * Have a look at {@link NavigatedViewer} or {@link Modeler} for bundles that include
-	 * additional features.
-	 *
+	 * Get a named diagram service.
 	 *
-	 * ## Extending the Viewer
+	 * @example
 	 *
-	 * In order to extend the viewer pass extension modules to bootstrap via the
-	 * `additionalModules` option. An extension module is an object that exposes
-	 * named services.
+	 * const elementRegistry = viewer.get('elementRegistry');
+	 * const startEventShape = elementRegistry.get('StartEvent_1');
 	 *
-	 * The following example depicts the integration of a simple
-	 * logging component that integrates with interaction events:
+	 * @param {string} name
 	 *
+	 * @return {Object} diagram service instance
 	 *
-	 * ```javascript
+	 * @method BaseViewer#get
+	 */
+
+	/**
+	 * Invoke a function in the context of this viewer.
 	 *
-	 * // logging component
-	 * function InteractionLogger(eventBus) {
-	 *   eventBus.on('element.hover', function(event) {
-	 *     console.log()
-	 *   })
-	 * }
+	 * @example
 	 *
-	 * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
+	 * viewer.invoke(function(elementRegistry) {
+	 *   const startEventShape = elementRegistry.get('StartEvent_1');
+	 * });
 	 *
-	 * // extension module
-	 * var extensionModule = {
-	 *   __init__: [ 'interactionLogger' ],
-	 *   interactionLogger: [ 'type', InteractionLogger ]
-	 * };
+	 * @param {Function} fn to be invoked
 	 *
-	 * // extend the viewer
-	 * var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
-	 * bpmnViewer.importXML(...);
-	 * ```
+	 * @return {Object} the functions return value
 	 *
-	 * @param {Object} [options] configuration options to pass to the viewer
-	 * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
-	 * @param {string|number} [options.width] the width of the viewer
-	 * @param {string|number} [options.height] the height of the viewer
-	 * @param {Object} [options.moddleExtensions] extension packages to provide
-	 * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
-	 * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+	 * @method BaseViewer#invoke
 	 */
-	function Viewer$1(options) {
-	  BaseViewer.call(this, options);
-	}
-
-	e(Viewer$1, BaseViewer);
-
-	// modules the viewer is composed of
-	Viewer$1.prototype._modules = [
-	  CoreModule$1,
-	  TranslateModule,
-	  SelectionModule,
-	  OverlaysModule,
-	  DrilldownModdule
-	];
 
-	// default moddle extensions the viewer is composed of
-	Viewer$1.prototype._moddleExtensions = {};
 
-	function ensureImported(element, target) {
+	BaseViewer.prototype._setDefinitions = function(definitions) {
+	  this._definitions = definitions;
+	};
 
-	  if (element.ownerDocument !== target.ownerDocument) {
-	    try {
+	BaseViewer.prototype.getModules = function() {
+	  return this._modules;
+	};
 
-	      // may fail on webkit
-	      return target.ownerDocument.importNode(element, true);
-	    } catch (e) {
+	/**
+	 * Remove all drawn elements from the viewer.
+	 *
+	 * After calling this method the viewer can still
+	 * be reused for opening another diagram.
+	 *
+	 * @method BaseViewer#clear
+	 */
+	BaseViewer.prototype.clear = function() {
+	  if (!this.getDefinitions()) {
 
-	      // ignore
-	    }
+	    // no diagram to clear
+	    return;
 	  }
 
-	  return element;
-	}
+	  // remove drawn elements
+	  Diagram.prototype.clear.call(this);
+	};
 
 	/**
-	 * appendTo utility
+	 * Destroy the viewer instance and remove all its
+	 * remainders from the document tree.
 	 */
+	BaseViewer.prototype.destroy = function() {
 
-	/**
-	 * Append a node to a target element and return the appended node.
-	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} target
-	 *
-	 * @return {SVGElement} the appended node
-	 */
-	function appendTo(element, target) {
-	  return target.appendChild(ensureImported(element, target));
-	}
+	  // diagram destroy
+	  Diagram.prototype.destroy.call(this);
 
-	/**
-	 * append utility
-	 */
+	  // dom detach
+	  remove$1(this._container);
+	};
 
 	/**
-	 * Append a node to an element
+	 * Register an event listener
 	 *
-	 * @param  {SVGElement} element
-	 * @param  {SVGElement} node
+	 * Remove a previously added listener via {@link #off(event, callback)}.
 	 *
-	 * @return {SVGElement} the element
+	 * @param {string} event
+	 * @param {number} [priority]
+	 * @param {Function} callback
+	 * @param {Object} [that]
 	 */
-	function append(target, node) {
-	  appendTo(node, target);
-	  return target;
-	}
+	BaseViewer.prototype.on = function(event, priority, callback, target) {
+	  return this.get('eventBus').on(event, priority, callback, target);
+	};
 
 	/**
-	 * attribute accessor utility
+	 * De-register an event listener
+	 *
+	 * @param {string} event
+	 * @param {Function} callback
 	 */
+	BaseViewer.prototype.off = function(event, callback) {
+	  this.get('eventBus').off(event, callback);
+	};
 
-	var LENGTH_ATTR = 2;
+	BaseViewer.prototype.attachTo = function(parentNode) {
 
-	var CSS_PROPERTIES = {
-	  'alignment-baseline': 1,
-	  'baseline-shift': 1,
-	  'clip': 1,
-	  'clip-path': 1,
-	  'clip-rule': 1,
-	  'color': 1,
-	  'color-interpolation': 1,
-	  'color-interpolation-filters': 1,
-	  'color-profile': 1,
-	  'color-rendering': 1,
-	  'cursor': 1,
-	  'direction': 1,
-	  'display': 1,
-	  'dominant-baseline': 1,
-	  'enable-background': 1,
-	  'fill': 1,
-	  'fill-opacity': 1,
-	  'fill-rule': 1,
-	  'filter': 1,
-	  'flood-color': 1,
-	  'flood-opacity': 1,
-	  'font': 1,
-	  'font-family': 1,
-	  'font-size': LENGTH_ATTR,
-	  'font-size-adjust': 1,
-	  'font-stretch': 1,
-	  'font-style': 1,
-	  'font-variant': 1,
-	  'font-weight': 1,
-	  'glyph-orientation-horizontal': 1,
-	  'glyph-orientation-vertical': 1,
-	  'image-rendering': 1,
-	  'kerning': 1,
-	  'letter-spacing': 1,
-	  'lighting-color': 1,
-	  'marker': 1,
-	  'marker-end': 1,
-	  'marker-mid': 1,
-	  'marker-start': 1,
-	  'mask': 1,
-	  'opacity': 1,
-	  'overflow': 1,
-	  'pointer-events': 1,
-	  'shape-rendering': 1,
-	  'stop-color': 1,
-	  'stop-opacity': 1,
-	  'stroke': 1,
-	  'stroke-dasharray': 1,
-	  'stroke-dashoffset': 1,
-	  'stroke-linecap': 1,
-	  'stroke-linejoin': 1,
-	  'stroke-miterlimit': 1,
-	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR,
-	  'text-anchor': 1,
-	  'text-decoration': 1,
-	  'text-rendering': 1,
-	  'unicode-bidi': 1,
-	  'visibility': 1,
-	  'word-spacing': 1,
-	  'writing-mode': 1
-	};
+	  if (!parentNode) {
+	    throw new Error('parentNode required');
+	  }
 
+	  // ensure we detach from the
+	  // previous, old parent
+	  this.detach();
 
-	function getAttribute(node, name) {
-	  if (CSS_PROPERTIES[name]) {
-	    return node.style[name];
-	  } else {
-	    return node.getAttributeNS(null, name);
+	  // unwrap jQuery if provided
+	  if (parentNode.get && parentNode.constructor.prototype.jquery) {
+	    parentNode = parentNode.get(0);
 	  }
-	}
 
-	function setAttribute(node, name, value) {
-	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+	  if (typeof parentNode === 'string') {
+	    parentNode = query(parentNode);
+	  }
 
-	  var type = CSS_PROPERTIES[hyphenated];
+	  parentNode.appendChild(this._container);
 
-	  if (type) {
+	  this._emit('attach', {});
 
-	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR && typeof value === 'number') {
-	      value = String(value) + 'px';
-	    }
+	  this.get('canvas').resized();
+	};
 
-	    node.style[hyphenated] = value;
-	  } else {
-	    node.setAttributeNS(null, name, value);
+	BaseViewer.prototype.getDefinitions = function() {
+	  return this._definitions;
+	};
+
+	BaseViewer.prototype.detach = function() {
+
+	  const container = this._container,
+	        parentNode = container.parentNode;
+
+	  if (!parentNode) {
+	    return;
 	  }
-	}
 
-	function setAttributes(node, attrs) {
+	  this._emit('detach', {});
+
+	  parentNode.removeChild(container);
+	};
+
+	BaseViewer.prototype._init = function(container, moddle, options) {
+
+	  const baseModules = options.modules || this.getModules(),
+	        additionalModules = options.additionalModules || [],
+	        staticModules = [
+	          {
+	            bpmnjs: [ 'value', this ],
+	            moddle: [ 'value', moddle ]
+	          }
+	        ];
+
+	  const diagramModules = [].concat(staticModules, baseModules, additionalModules);
+
+	  const diagramOptions = assign$1(omit(options, [ 'additionalModules' ]), {
+	    canvas: assign$1({}, options.canvas, { container: container }),
+	    modules: diagramModules
+	  });
 
-	  var names = Object.keys(attrs), i, name;
+	  // invoke diagram constructor
+	  Diagram.call(this, diagramOptions);
 
-	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute(node, name, attrs[name]);
+	  if (options && options.container) {
+	    this.attachTo(options.container);
 	  }
-	}
+	};
 
 	/**
-	 * Gets or sets raw attributes on a node.
+	 * Emit an event on the underlying {@link EventBus}
 	 *
-	 * @param  {SVGElement} node
-	 * @param  {Object} [attrs]
-	 * @param  {String} [name]
-	 * @param  {String} [value]
+	 * @param  {string} type
+	 * @param  {Object} event
 	 *
-	 * @return {String}
+	 * @return {Object} event processing result (if any)
 	 */
-	function attr(node, name, value) {
-	  if (typeof name === 'string') {
-	    if (value !== undefined) {
-	      setAttribute(node, name, value);
-	    } else {
-	      return getAttribute(node, name);
-	    }
-	  } else {
-	    setAttributes(node, name);
-	  }
+	BaseViewer.prototype._emit = function(type, event) {
+	  return this.get('eventBus').fire(type, event);
+	};
 
-	  return node;
-	}
+	BaseViewer.prototype._createContainer = function(options) {
 
-	var ns = {
-	  svg: 'http://www.w3.org/2000/svg'
-	};
+	  const container = domify$1('<div class="bjs-container"></div>');
 
-	/**
-	 * DOM parsing utility
-	 */
+	  assign(container, {
+	    width: ensureUnit(options.width),
+	    height: ensureUnit(options.height),
+	    position: options.position
+	  });
 
-	var SVG_START = '<svg xmlns="' + ns.svg + '"';
+	  return container;
+	};
 
-	function parse(svg) {
+	BaseViewer.prototype._createModdle = function(options) {
+	  const moddleOptions = assign$1({}, this._moddleExtensions, options.moddleExtensions);
 
-	  var unwrap = false;
+	  return new simple(moddleOptions);
+	};
 
-	  // ensure we import a valid svg document
-	  if (svg.substring(0, 4) === '<svg') {
-	    if (svg.indexOf(ns.svg) === -1) {
-	      svg = SVG_START + svg.substring(4);
-	    }
-	  } else {
+	BaseViewer.prototype._modules = [];
 
-	    // namespace svg
-	    svg = SVG_START + '>' + svg + '</svg>';
-	    unwrap = true;
-	  }
+	// helpers ///////////////
 
-	  var parsed = parseDocument(svg);
+	function addWarningsToError(err, warningsAry) {
+	  err.warnings = warningsAry;
+	  return err;
+	}
 
-	  if (!unwrap) {
-	    return parsed;
-	  }
+	function checkValidationError(err) {
 
-	  var fragment = document.createDocumentFragment();
+	  // check if we can help the user by indicating wrong BPMN 2.0 xml
+	  // (in case he or the exporting tool did not get that right)
 
-	  var parent = parsed.firstChild;
+	  const pattern = /unparsable content <([^>]+)> detected([\s\S]*)$/;
+	  const match = pattern.exec(err.message);
 
-	  while (parent.firstChild) {
-	    fragment.appendChild(parent.firstChild);
+	  if (match) {
+	    err.message =
+	      'unparsable content <' + match[1] + '> detected; ' +
+	      'this may indicate an invalid BPMN 2.0 diagram file' + match[2];
 	  }
 
-	  return fragment;
+	  return err;
 	}
 
-	function parseDocument(svg) {
-
-	  var parser;
+	const DEFAULT_OPTIONS = {
+	  width: '100%',
+	  height: '100%',
+	  position: 'relative'
+	};
 
-	  // parse
-	  parser = new DOMParser();
-	  parser.async = false;
 
-	  return parser.parseFromString(svg, 'text/xml');
+	/**
+	 * Ensure the passed argument is a proper unit (defaulting to px)
+	 */
+	function ensureUnit(val) {
+	  return val + (isNumber(val) ? 'px' : '');
 	}
 
+
 	/**
-	 * Create utility for SVG elements
+	 * Find BPMNDiagram in definitions by ID
+	 *
+	 * @param {ModdleElement<Definitions>} definitions
+	 * @param {string} diagramId
+	 *
+	 * @return {ModdleElement<BPMNDiagram>|null}
 	 */
+	function findBPMNDiagram(definitions, diagramId) {
+	  if (!diagramId) {
+	    return null;
+	  }
 
+	  return find(definitions.diagrams, function(element) {
+	    return element.id === diagramId;
+	  }) || null;
+	}
 
 	/**
-	 * Create a specific type from name or SVG markup.
+	 * Adds the project logo to the diagram container as
+	 * required by the bpmn.io license.
 	 *
-	 * @param {String} name the name or markup of the element
-	 * @param {Object} [attrs] attributes to set on the element
+	 * @see http://bpmn.io/license
 	 *
-	 * @returns {SVGElement}
+	 * @param {Element} container
 	 */
-	function create(name, attrs) {
-	  var element;
+	function addProjectLogo(container) {
+	  const img = BPMNIO_IMG;
 
-	  if (name.charAt(0) === '<') {
-	    element = parse(name).firstChild;
-	    element = document.importNode(element, true);
-	  } else {
-	    element = document.createElementNS(ns.svg, name);
-	  }
+	  const linkMarkup =
+	    '<a href="http://bpmn.io" ' +
+	    'target="_blank" ' +
+	    'class="bjs-powered-by" ' +
+	    'title="Powered by bpmn.io" ' +
+	    '>' +
+	    img +
+	    '</a>';
 
-	  if (attrs) {
-	    attr(element, attrs);
-	  }
+	  const linkElement = domify$1(linkMarkup);
 
-	  return element;
+	  assign(query('svg', linkElement), LOGO_STYLES);
+	  assign(linkElement, LINK_STYLES, {
+	    position: 'absolute',
+	    bottom: '15px',
+	    right: '15px',
+	    zIndex: '100'
+	  });
+
+	  container.appendChild(linkElement);
+
+	  event.bind(linkElement, 'click', function(event) {
+	    open();
+
+	    event.preventDefault();
+	  });
+	}
+
+	/* </project-logo> */
+
+	/**
+	 * A viewer for BPMN 2.0 diagrams.
+	 *
+	 * Have a look at {@link NavigatedViewer} or {@link Modeler} for bundles that include
+	 * additional features.
+	 *
+	 *
+	 * ## Extending the Viewer
+	 *
+	 * In order to extend the viewer pass extension modules to bootstrap via the
+	 * `additionalModules` option. An extension module is an object that exposes
+	 * named services.
+	 *
+	 * The following example depicts the integration of a simple
+	 * logging component that integrates with interaction events:
+	 *
+	 *
+	 * ```javascript
+	 *
+	 * // logging component
+	 * function InteractionLogger(eventBus) {
+	 *   eventBus.on('element.hover', function(event) {
+	 *     console.log()
+	 *   })
+	 * }
+	 *
+	 * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
+	 *
+	 * // extension module
+	 * var extensionModule = {
+	 *   __init__: [ 'interactionLogger' ],
+	 *   interactionLogger: [ 'type', InteractionLogger ]
+	 * };
+	 *
+	 * // extend the viewer
+	 * var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
+	 * bpmnViewer.importXML(...);
+	 * ```
+	 *
+	 * @param {Object} [options] configuration options to pass to the viewer
+	 * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
+	 * @param {string|number} [options.width] the width of the viewer
+	 * @param {string|number} [options.height] the height of the viewer
+	 * @param {Object} [options.moddleExtensions] extension packages to provide
+	 * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
+	 * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+	 */
+	function Viewer$1(options) {
+	  BaseViewer.call(this, options);
 	}
 
+	e(Viewer$1, BaseViewer);
+
+	// modules the viewer is composed of
+	Viewer$1.prototype._modules = [
+	  CoreModule$1,
+	  TranslateModule,
+	  SelectionModule,
+	  OverlaysModule,
+	  DrilldownModdule
+	];
+
+	// default moddle extensions the viewer is composed of
+	Viewer$1.prototype._moddleExtensions = {};
+
 	function getModelerTemplateIcon(element) {
 	  var modelerTemplateIcon = getBusinessObject(element).get('zeebe:modelerTemplateIcon');
 	  return modelerTemplateIcon;
@@ -22291,8 +21606,8 @@
 
 	  var modelerTemplateIcon = getModelerTemplateIcon(element);
 
-	  var icon = create('image');
-	  attr(icon, {
+	  var icon = create$1('image');
+	  attr$1(icon, {
 	    href: modelerTemplateIcon,
 	    x: 5,
 	    y: 5,
@@ -22722,6 +22037,29 @@
 					type: "String"
 				}
 			]
+		},
+		{
+			name: "Script",
+			superClass: [
+				"Element"
+			],
+			meta: {
+				allowedIn: [
+					"bpmn:ScriptTask"
+				]
+			},
+			properties: [
+				{
+					name: "expression",
+					type: "String",
+					isAttr: true
+				},
+				{
+					name: "resultVariable",
+					type: "String",
+					isAttr: true
+				}
+			]
 		}
 	];
 	var zeebeModdle = {