camunda-bpmn-js 0.16.1 → 0.17.0

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

@@ -108,6 +108,26 @@
 	  });
 	  return match;
 	}
+	/**
+	 * Find element index in collection.
+	 *
+	 * @param  {Array|Object} collection
+	 * @param  {Function} matcher
+	 *
+	 * @return {Object}
+	 */
+
+	function findIndex(collection, matcher) {
+	  matcher = toMatcher(matcher);
+	  var idx = isArray(collection) ? -1 : undefined;
+	  forEach(collection, function (val, key) {
+	    if (matcher(val, key)) {
+	      idx = key;
+	      return false;
+	    }
+	  });
+	  return idx;
+	}
 	/**
 	 * Find element in collection.
 	 *
@@ -1170,149 +1190,6 @@
 	  }
 	}
 
-	/**
-	 * Serialization util
-	 */
-
-	var TEXT_ENTITIES = /([&<>]{1})/g;
-	var ATTR_ENTITIES = /([\n\r"]{1})/g;
-
-	var ENTITY_REPLACEMENT = {
-	  '&': '&amp;',
-	  '<': '&lt;',
-	  '>': '&gt;',
-	  '"': '\''
-	};
-
-	function escape(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(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(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(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(svg);
-
-	  // clear element contents
-	  clear(element);
-
-	  if (!svg) {
-	    return;
-	  }
-
-	  if (!isFragment(parsed)) {
-	    // extract <svg> from parsed document
-	    parsed = parsed.documentElement;
-	  }
-
-	  var nodes = slice(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(arr) {
-	  return Array.prototype.slice.call(arr);
-	}
-
 	/**
 	 * transform accessor utility
 	 */
@@ -1463,11 +1340,11 @@
 	      radius = shape.width / 2;
 
 	  var circlePath = [
-	    ['M', cx, cy],
-	    ['m', 0, -radius],
-	    ['a', radius, radius, 0, 1, 1, 0, 2 * radius],
-	    ['a', radius, radius, 0, 1, 1, 0, -2 * radius],
-	    ['z']
+	    [ 'M', cx, cy ],
+	    [ 'm', 0, -radius ],
+	    [ 'a', radius, radius, 0, 1, 1, 0, 2 * radius ],
+	    [ 'a', radius, radius, 0, 1, 1, 0, -2 * radius ],
+	    [ 'z' ]
 	  ];
 
 	  return componentsToPath(circlePath);
@@ -1481,16 +1358,16 @@
 	      height = shape.height;
 
 	  var roundRectPath = [
-	    ['M', x + borderRadius, y],
-	    ['l', width - borderRadius * 2, 0],
-	    ['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius],
-	    ['l', 0, height - borderRadius * 2],
-	    ['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius],
-	    ['l', borderRadius * 2 - width, 0],
-	    ['a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius],
-	    ['l', 0, borderRadius * 2 - height],
-	    ['a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius],
-	    ['z']
+	    [ 'M', x + borderRadius, y ],
+	    [ 'l', width - borderRadius * 2, 0 ],
+	    [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius ],
+	    [ 'l', 0, height - borderRadius * 2 ],
+	    [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius ],
+	    [ 'l', borderRadius * 2 - width, 0 ],
+	    [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius ],
+	    [ 'l', 0, borderRadius * 2 - height ],
+	    [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius ],
+	    [ 'z' ]
 	  ];
 
 	  return componentsToPath(roundRectPath);
@@ -1506,11 +1383,11 @@
 	      halfHeight = height / 2;
 
 	  var diamondPath = [
-	    ['M', x + halfWidth, y],
-	    ['l', halfWidth, halfHeight],
-	    ['l', -halfWidth, halfHeight],
-	    ['l', -halfWidth, -halfHeight],
-	    ['z']
+	    [ 'M', x + halfWidth, y ],
+	    [ 'l', halfWidth, halfHeight ],
+	    [ 'l', -halfWidth, halfHeight ],
+	    [ 'l', -halfWidth, -halfHeight ],
+	    [ 'z' ]
 	  ];
 
 	  return componentsToPath(diamondPath);
@@ -1523,11 +1400,11 @@
 	      height = shape.height;
 
 	  var rectPath = [
-	    ['M', x, y],
-	    ['l', width, 0],
-	    ['l', 0, height],
-	    ['l', -width, 0],
-	    ['z']
+	    [ 'M', x, y ],
+	    [ 'l', width, 0 ],
+	    [ 'l', 0, height ],
+	    [ 'l', -width, 0 ],
+	    [ 'z' ]
 	  ];
 
 	  return componentsToPath(rectPath);
@@ -2093,52 +1970,688 @@
 
 	  html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
 
-	  var tag = m[1];
+	  var tag = m[1];
+
+	  // body support
+	  if (tag == 'body') {
+	    var el = doc.createElement('html');
+	    el.innerHTML = html;
+	    return el.removeChild(el.lastChild);
+	  }
+
+	  // wrap map
+	  var wrap = map$1[tag] || map$1._default;
+	  var depth = wrap[0];
+	  var prefix = wrap[1];
+	  var suffix = wrap[2];
+	  var el = doc.createElement('div');
+	  el.innerHTML = prefix + html + suffix;
+	  while (depth--) el = el.lastChild;
+
+	  // one element
+	  if (el.firstChild == el.lastChild) {
+	    return el.removeChild(el.firstChild);
+	  }
+
+	  // several elements
+	  var fragment = doc.createDocumentFragment();
+	  while (el.firstChild) {
+	    fragment.appendChild(el.removeChild(el.firstChild));
+	  }
+
+	  return fragment;
+	}
+
+	function query(selector, el) {
+	  el = el || document;
+
+	  return el.querySelector(selector);
+	}
+
+	function all(selector, el) {
+	  el = el || document;
+
+	  return el.querySelectorAll(selector);
+	}
+
+	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;
+	}
+
+	/**
+	 * 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$2(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;
+	}
+
+	/**
+	 * Clear utility
+	 */
+	function index$1(arr, obj) {
+	  if (arr.indexOf) {
+	    return arr.indexOf(obj);
+	  }
+
+
+	  for (var i = 0; i < arr.length; ++i) {
+	    if (arr[i] === obj) {
+	      return i;
+	    }
+	  }
+
+	  return -1;
+	}
+
+	var re$2 = /\s+/;
+
+	var toString$2 = Object.prototype.toString;
+
+	function defined$1(o) {
+	  return typeof o !== 'undefined';
+	}
+
+	/**
+	 * Wrap `el` in a `ClassList`.
+	 *
+	 * @param {Element} el
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	function classes$2(el) {
+	  return new ClassList$2(el);
+	}
+
+	function ClassList$2(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$2.prototype.add = function(name) {
+
+	  // classList
+	  if (this.list) {
+	    this.list.add(name);
+	    return this;
+	  }
+
+	  // fallback
+	  var arr = this.array();
+	  var i = index$1(arr, name);
+	  if (!~i) {
+	    arr.push(name);
+	  }
+
+	  if (defined$1(this.el.className.baseVal)) {
+	    this.el.className.baseVal = arr.join(' ');
+	  } else {
+	    this.el.className = arr.join(' ');
+	  }
+
+	  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$2.prototype.remove = function(name) {
+	  if ('[object RegExp]' === toString$2.call(name)) {
+	    return this.removeMatching(name);
+	  }
+
+	  // classList
+	  if (this.list) {
+	    this.list.remove(name);
+	    return this;
+	  }
+
+	  // fallback
+	  var arr = this.array();
+	  var i = index$1(arr, name);
+	  if (~i) {
+	    arr.splice(i, 1);
+	  }
+	  this.el.className.baseVal = arr.join(' ');
+	  return this;
+	};
+
+	/**
+	 * Remove all classes matching `re`.
+	 *
+	 * @param {RegExp} re
+	 * @return {ClassList}
+	 * @api private
+	 */
+
+	ClassList$2.prototype.removeMatching = function(re) {
+	  var arr = this.array();
+	  for (var 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$2.prototype.toggle = function(name, force) {
+	  // classList
+	  if (this.list) {
+	    if (defined$1(force)) {
+	      if (force !== this.list.toggle(name, force)) {
+	        this.list.toggle(name); // toggle again to correct
+	      }
+	    } else {
+	      this.list.toggle(name);
+	    }
+	    return this;
+	  }
+
+	  // fallback
+	  if (defined$1(force)) {
+	    if (!force) {
+	      this.remove(name);
+	    } else {
+	      this.add(name);
+	    }
+	  } else {
+	    if (this.has(name)) {
+	      this.remove(name);
+	    } else {
+	      this.add(name);
+	    }
+	  }
+
+	  return this;
+	};
+
+	/**
+	 * Return an array of classes.
+	 *
+	 * @return {Array}
+	 * @api public
+	 */
+
+	ClassList$2.prototype.array = function() {
+	  var className = this.el.getAttribute('class') || '';
+	  var str = className.replace(/^\s+|\s+$/g, '');
+	  var arr = str.split(re$2);
+	  if ('' === arr[0]) {
+	    arr.shift();
+	  }
+	  return arr;
+	};
+
+	/**
+	 * Check if class `name` is present.
+	 *
+	 * @param {String} name
+	 * @return {ClassList}
+	 * @api public
+	 */
+
+	ClassList$2.prototype.has =
+	ClassList$2.prototype.contains = function(name) {
+	  return (
+	    this.list ?
+	      this.list.contains(name) :
+	      !! ~index$1(this.array(), name)
+	  );
+	};
+
+	function remove$2(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$2(element) {
+	  var child;
+
+	  while ((child = element.firstChild)) {
+	    remove$2(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$2(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$1(name, attrs) {
+	  var element;
+
+	  if (name.charAt(0) === '<') {
+	    element = parse$2(name).firstChild;
+	    element = document.importNode(element, true);
+	  } else {
+	    element = document.createElementNS(ns$1.svg, name);
+	  }
+
+	  if (attrs) {
+	    attr$2(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(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(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(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(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$2(svg);
+
+	  // clear element contents
+	  clear$2(element);
+
+	  if (!svg) {
+	    return;
+	  }
+
+	  if (!isFragment(parsed)) {
+	    // extract <svg> from parsed document
+	    parsed = parsed.documentElement;
+	  }
+
+	  var nodes = slice(parsed.childNodes);
 
-	  // body support
-	  if (tag == 'body') {
-	    var el = doc.createElement('html');
-	    el.innerHTML = html;
-	    return el.removeChild(el.lastChild);
+	  // import + append each node
+	  for (var i = 0; i < nodes.length; i++) {
+	    appendTo$1(nodes[i], element);
 	  }
 
-	  // wrap map
-	  var wrap = map$1[tag] || map$1._default;
-	  var depth = wrap[0];
-	  var prefix = wrap[1];
-	  var suffix = wrap[2];
-	  var el = doc.createElement('div');
-	  el.innerHTML = prefix + html + suffix;
-	  while (depth--) el = el.lastChild;
+	}
 
-	  // one element
-	  if (el.firstChild == el.lastChild) {
-	    return el.removeChild(el.firstChild);
-	  }
+	function get(element) {
+	  var child = element.firstChild,
+	      output = [];
 
-	  // several elements
-	  var fragment = doc.createDocumentFragment();
-	  while (el.firstChild) {
-	    fragment.appendChild(el.removeChild(el.firstChild));
+	  while (child) {
+	    serialize(child, output);
+	    child = child.nextSibling;
 	  }
 
-	  return fragment;
+	  return output.join('');
 	}
 
-	function query(selector, el) {
-	  el = el || document;
-
-	  return el.querySelector(selector);
+	function isFragment(node) {
+	  return node.nodeName === '#document-fragment';
 	}
 
-	function all(selector, el) {
-	  el = el || document;
+	function innerSVG(element, svg) {
 
-	  return el.querySelectorAll(selector);
+	  if (svg !== undefined) {
+
+	    try {
+	      set(element, svg);
+	    } catch (e) {
+	      throw new Error('error parsing SVG: ' + e.message);
+	    }
+
+	    return element;
+	  } else {
+	    return get(element);
+	  }
 	}
 
-	function remove$1(el) {
-	  el.parentNode && el.parentNode.removeChild(el);
+
+	function slice(arr) {
+	  return Array.prototype.slice.call(arr);
 	}
 
 	/**
@@ -2390,16 +2903,16 @@
 	    // fix for safari / chrome / firefox bug not correctly
 	    // resetting stroke dash array
 	    if (attrs.strokeDasharray === 'none') {
-	      attrs.strokeDasharray = [10000, 1];
+	      attrs.strokeDasharray = [ 10000, 1 ];
 	    }
 
-	    var marker = create('marker');
+	    var marker = create$1('marker');
 
-	    attr(options.element, attrs);
+	    attr$2(options.element, attrs);
 
-	    append(marker, options.element);
+	    append$1(marker, options.element);
 
-	    attr(marker, {
+	    attr$2(marker, {
 	      id: id,
 	      viewBox: '0 0 20 20',
 	      refX: ref.x,
@@ -2412,12 +2925,12 @@
 	    var defs = query('defs', canvas._svg);
 
 	    if (!defs) {
-	      defs = create('defs');
+	      defs = create$1('defs');
 
-	      append(canvas._svg, defs);
+	      append$1(canvas._svg, defs);
 	    }
 
-	    append(defs, marker);
+	    append$1(defs, marker);
 
 	    markers[id] = marker;
 	  }
@@ -2441,8 +2954,8 @@
 	  function createMarker(id, type, fill, stroke) {
 
 	    if (type === 'sequenceflow-end') {
-	      var sequenceflowEnd = create('path');
-	      attr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+	      var sequenceflowEnd = create$1('path');
+	      attr$2(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
 
 	      addMarker(id, {
 	        element: sequenceflowEnd,
@@ -2456,8 +2969,8 @@
 	    }
 
 	    if (type === 'messageflow-start') {
-	      var messageflowStart = create('circle');
-	      attr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+	      var messageflowStart = create$1('circle');
+	      attr$2(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
 
 	      addMarker(id, {
 	        element: messageflowStart,
@@ -2470,8 +2983,8 @@
 	    }
 
 	    if (type === 'messageflow-end') {
-	      var messageflowEnd = create('path');
-	      attr(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
+	      var messageflowEnd = create$1('path');
+	      attr$2(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
 
 	      addMarker(id, {
 	        element: messageflowEnd,
@@ -2485,8 +2998,8 @@
 	    }
 
 	    if (type === 'association-start') {
-	      var associationStart = create('path');
-	      attr(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
+	      var associationStart = create$1('path');
+	      attr$2(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
 
 	      addMarker(id, {
 	        element: associationStart,
@@ -2501,8 +3014,8 @@
 	    }
 
 	    if (type === 'association-end') {
-	      var associationEnd = create('path');
-	      attr(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
+	      var associationEnd = create$1('path');
+	      attr$2(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
 
 	      addMarker(id, {
 	        element: associationEnd,
@@ -2517,8 +3030,8 @@
 	    }
 
 	    if (type === 'conditional-flow-marker') {
-	      var conditionalflowMarker = create('path');
-	      attr(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
+	      var conditionalflowMarker = create$1('path');
+	      attr$2(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
 
 	      addMarker(id, {
 	        element: conditionalflowMarker,
@@ -2532,8 +3045,8 @@
 	    }
 
 	    if (type === 'conditional-default-flow-marker') {
-	      var conditionaldefaultflowMarker = create('path');
-	      attr(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
+	      var conditionaldefaultflowMarker = create$1('path');
+	      attr$2(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
 
 	      addMarker(id, {
 	        element: conditionaldefaultflowMarker,
@@ -2568,15 +3081,15 @@
 	    var cx = width / 2,
 	        cy = height / 2;
 
-	    var circle = create('circle');
-	    attr(circle, {
+	    var circle = create$1('circle');
+	    attr$2(circle, {
 	      cx: cx,
 	      cy: cy,
 	      r: Math.round((width + height) / 4 - offset)
 	    });
-	    attr(circle, attrs);
+	    attr$2(circle, attrs);
 
-	    append(parentGfx, circle);
+	    append$1(parentGfx, circle);
 
 	    return circle;
 	  }
@@ -2596,8 +3109,8 @@
 	      fill: 'white'
 	    });
 
-	    var rect = create('rect');
-	    attr(rect, {
+	    var rect = create$1('rect');
+	    attr$2(rect, {
 	      x: offset,
 	      y: offset,
 	      width: width - offset * 2,
@@ -2605,9 +3118,9 @@
 	      rx: r,
 	      ry: r
 	    });
-	    attr(rect, attrs);
+	    attr$2(rect, attrs);
 
-	    append(parentGfx, rect);
+	    append$1(parentGfx, rect);
 
 	    return rect;
 	  }
@@ -2617,7 +3130,7 @@
 	    var x_2 = width / 2;
 	    var y_2 = height / 2;
 
-	    var points = [{ x: x_2, y: 0 }, { x: width, y: y_2 }, { x: x_2, y: height }, { x: 0, y: y_2 }];
+	    var points = [ { x: x_2, y: 0 }, { x: width, y: y_2 }, { x: x_2, y: height }, { x: 0, y: y_2 } ];
 
 	    var pointsString = points.map(function(point) {
 	      return point.x + ',' + point.y;
@@ -2629,13 +3142,13 @@
 	      fill: 'white'
 	    });
 
-	    var polygon = create('polygon');
-	    attr(polygon, {
+	    var polygon = create$1('polygon');
+	    attr$2(polygon, {
 	      points: pointsString
 	    });
-	    attr(polygon, attrs);
+	    attr$2(polygon, attrs);
 
-	    append(parentGfx, polygon);
+	    append$1(parentGfx, polygon);
 
 	    return polygon;
 	  }
@@ -2649,7 +3162,7 @@
 
 	    var line = createLine(waypoints, attrs);
 
-	    append(parentGfx, line);
+	    append$1(parentGfx, line);
 
 	    return line;
 	  }
@@ -2661,11 +3174,11 @@
 	      stroke: black
 	    });
 
-	    var path = create('path');
-	    attr(path, { d: d });
-	    attr(path, attrs);
+	    var path = create$1('path');
+	    attr$2(path, { d: d });
+	    attr$2(path, attrs);
 
-	    append(parentGfx, path);
+	    append$1(parentGfx, path);
 
 	    return path;
 	  }
@@ -2689,7 +3202,7 @@
 	    var event = getSemantic(element);
 	    var isThrowing = isThrowEvent(event);
 
-	    if (event.eventDefinitions && event.eventDefinitions.length>1) {
+	    if (event.eventDefinitions && event.eventDefinitions.length > 1) {
 	      if (event.parallelMultiple) {
 	        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
 	      }
@@ -2751,9 +3264,9 @@
 
 	    var text = textRenderer.createText(label || '', options);
 
-	    classes(text).add('djs-label');
+	    classes$2(text).add('djs-label');
 
-	    append(parentGfx, text);
+	    append$1(parentGfx, text);
 
 	    return text;
 	  }
@@ -3363,7 +3876,7 @@
 	      });
 
 	      var businessHeaderPath = drawPath(parentGfx, headerPathData);
-	      attr(businessHeaderPath, {
+	      attr$2(businessHeaderPath, {
 	        strokeWidth: 1,
 	        fill: getFillColor(element, '#aaaaaa'),
 	        stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3377,7 +3890,7 @@
 	      });
 
 	      var businessPath = drawPath(parentGfx, headerData);
-	      attr(businessPath, {
+	      attr$2(businessPath, {
 	        strokeWidth: 1,
 	        stroke: getStrokeColor(element, defaultStrokeColor)
 	      });
@@ -3395,7 +3908,7 @@
 	      var expanded = isExpanded(element);
 
 	      if (isEventSubProcess(element)) {
-	        attr(rect, {
+	        attr$2(rect, {
 	          strokeDasharray: '1,2'
 	        });
 	      }
@@ -3405,7 +3918,7 @@
 	      if (expanded) {
 	        attachTaskMarkers(parentGfx, element);
 	      } else {
-	        attachTaskMarkers(parentGfx, element, ['SubProcessMarker']);
+	        attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
 	      }
 
 	      return rect;
@@ -3617,7 +4130,7 @@
 	        });
 
 	        var parallelPath = drawPath(parentGfx, pathData);
-	        attr(parallelPath, {
+	        attr$2(parallelPath, {
 	          strokeWidth: 1,
 	          fill: 'none'
 	        });
@@ -3625,7 +4138,7 @@
 
 	        if (!instantiate) {
 	          var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-	          attr(innerCircle, {
+	          attr$2(innerCircle, {
 	            strokeWidth: 1,
 	            fill: 'none',
 	            stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3670,7 +4183,7 @@
 
 	        // conditional flow marker
 	        if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-	          attr(path, {
+	          attr$2(path, {
 	            markerStart: marker('conditional-flow-marker', fill, stroke)
 	          });
 	        }
@@ -3678,7 +4191,7 @@
 	        // default marker
 	        if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
 	            source.default === sequenceFlow) {
-	          attr(path, {
+	          attr$2(path, {
 	            markerStart: marker('conditional-default-flow-marker', fill, stroke)
 	          });
 	        }
@@ -4739,22 +5252,22 @@
 	      d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',
 	      height: 36,
 	      width:  36,
-	      heightElements: [6, 14],
-	      widthElements: [10.5, 21]
+	      heightElements: [ 6, 14 ],
+	      widthElements: [ 10.5, 21 ]
 	    },
 	    'EVENT_SIGNAL': {
 	      d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x1},0 Z',
 	      height: 36,
 	      width: 36,
-	      heightElements: [18],
-	      widthElements: [10, 20]
+	      heightElements: [ 18 ],
+	      widthElements: [ 10, 20 ]
 	    },
 	    'EVENT_ESCALATION': {
 	      d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x0},-{e.y1} l -{e.x0},{e.y1} Z',
 	      height: 36,
 	      width: 36,
-	      heightElements: [20, 7],
-	      widthElements: [8]
+	      heightElements: [ 20, 7 ],
+	      widthElements: [ 8 ]
 	    },
 	    'EVENT_CONDITIONAL': {
 	      d: 'M {e.x0},{e.y0} l {e.x1},0 l 0,{e.y2} l -{e.x1},0 Z ' +
@@ -4766,67 +5279,67 @@
 	         'M {e.x2},{e.y8} l {e.x0},0 ',
 	      height: 36,
 	      width:  36,
-	      heightElements: [8.5, 14.5, 18, 11.5, 14.5, 17.5, 20.5, 23.5, 26.5],
-	      widthElements:  [10.5, 14.5, 12.5]
+	      heightElements: [ 8.5, 14.5, 18, 11.5, 14.5, 17.5, 20.5, 23.5, 26.5 ],
+	      widthElements:  [ 10.5, 14.5, 12.5 ]
 	    },
 	    'EVENT_LINK': {
 	      d: 'm {mx},{my} 0,{e.y0} -{e.x1},0 0,{e.y1} {e.x1},0 0,{e.y0} {e.x0},-{e.y2} -{e.x0},-{e.y2} z',
 	      height: 36,
 	      width: 36,
-	      heightElements: [4.4375, 6.75, 7.8125],
-	      widthElements: [9.84375, 13.5]
+	      heightElements: [ 4.4375, 6.75, 7.8125 ],
+	      widthElements: [ 9.84375, 13.5 ]
 	    },
 	    'EVENT_ERROR': {
 	      d: 'm {mx},{my} {e.x0},-{e.y0} {e.x1},-{e.y1} {e.x2},{e.y2} {e.x3},-{e.y3} -{e.x4},{e.y4} -{e.x5},-{e.y5} z',
 	      height: 36,
 	      width: 36,
-	      heightElements: [0.023, 8.737, 8.151, 16.564, 10.591, 8.714],
-	      widthElements: [0.085, 6.672, 6.97, 4.273, 5.337, 6.636]
+	      heightElements: [ 0.023, 8.737, 8.151, 16.564, 10.591, 8.714 ],
+	      widthElements: [ 0.085, 6.672, 6.97, 4.273, 5.337, 6.636 ]
 	    },
 	    'EVENT_CANCEL_45': {
 	      d: 'm {mx},{my} -{e.x1},0 0,{e.x0} {e.x1},0 0,{e.y1} {e.x0},0 ' +
 	        '0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',
 	      height: 36,
 	      width: 36,
-	      heightElements: [4.75, 8.5],
-	      widthElements: [4.75, 8.5]
+	      heightElements: [ 4.75, 8.5 ],
+	      widthElements: [ 4.75, 8.5 ]
 	    },
 	    'EVENT_COMPENSATION': {
 	      d: 'm {mx},{my} {e.x0},-{e.y0} 0,{e.y1} z m {e.x1},-{e.y2} {e.x2},-{e.y3} 0,{e.y1} -{e.x2},-{e.y3} z',
 	      height: 36,
 	      width: 36,
-	      heightElements: [6.5, 13, 0.4, 6.1],
-	      widthElements: [9, 9.3, 8.7]
+	      heightElements: [ 6.5, 13, 0.4, 6.1 ],
+	      widthElements: [ 9, 9.3, 8.7 ]
 	    },
 	    'EVENT_TIMER_WH': {
 	      d: 'M {mx},{my} l {e.x0},-{e.y0} m -{e.x0},{e.y0} l {e.x1},{e.y1} ',
 	      height: 36,
 	      width:  36,
-	      heightElements: [10, 2],
-	      widthElements: [3, 7]
+	      heightElements: [ 10, 2 ],
+	      widthElements: [ 3, 7 ]
 	    },
 	    'EVENT_TIMER_LINE': {
 	      d:  'M {mx},{my} ' +
 	          'm {e.x0},{e.y0} l -{e.x1},{e.y1} ',
 	      height: 36,
 	      width:  36,
-	      heightElements: [10, 3],
-	      widthElements: [0, 0]
+	      heightElements: [ 10, 3 ],
+	      widthElements: [ 0, 0 ]
 	    },
 	    'EVENT_MULTIPLE': {
 	      d:'m {mx},{my} {e.x1},-{e.y0} {e.x1},{e.y0} -{e.x0},{e.y1} -{e.x2},0 z',
 	      height: 36,
 	      width:  36,
-	      heightElements: [6.28099, 12.56199],
-	      widthElements: [3.1405, 9.42149, 12.56198]
+	      heightElements: [ 6.28099, 12.56199 ],
+	      widthElements: [ 3.1405, 9.42149, 12.56198 ]
 	    },
 	    'EVENT_PARALLEL_MULTIPLE': {
 	      d:'m {mx},{my} {e.x0},0 0,{e.y1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
 	        '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
 	      height: 36,
 	      width:  36,
-	      heightElements: [2.56228, 7.68683],
-	      widthElements: [2.56228, 7.68683]
+	      heightElements: [ 2.56228, 7.68683 ],
+	      widthElements: [ 2.56228, 7.68683 ]
 	    },
 	    'GATEWAY_EXCLUSIVE': {
 	      d:'m {mx},{my} {e.x0},{e.y0} {e.x1},{e.y0} {e.x2},0 {e.x4},{e.y2} ' +
@@ -4834,23 +5347,23 @@
 	                    '{e.x3},0 {e.x5},{e.y1} {e.x5},{e.y2} {e.x3},0 z',
 	      height: 17.5,
 	      width:  17.5,
-	      heightElements: [8.5, 6.5312, -6.5312, -8.5],
-	      widthElements:  [6.5, -6.5, 3, -3, 5, -5]
+	      heightElements: [ 8.5, 6.5312, -6.5312, -8.5 ],
+	      widthElements:  [ 6.5, -6.5, 3, -3, 5, -5 ]
 	    },
 	    'GATEWAY_PARALLEL': {
 	      d:'m {mx},{my} 0,{e.y1} -{e.x1},0 0,{e.y0} {e.x1},0 0,{e.y1} {e.x0},0 ' +
 	        '0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',
 	      height: 30,
 	      width:  30,
-	      heightElements: [5, 12.5],
-	      widthElements: [5, 12.5]
+	      heightElements: [ 5, 12.5 ],
+	      widthElements: [ 5, 12.5 ]
 	    },
 	    'GATEWAY_EVENT_BASED': {
 	      d:'m {mx},{my} {e.x0},{e.y0} {e.x0},{e.y1} {e.x1},{e.y2} {e.x2},0 z',
 	      height: 11,
 	      width:  11,
-	      heightElements: [-6, 6, 12, -12],
-	      widthElements: [9, -3, -12]
+	      heightElements: [ -6, 6, 12, -12 ],
+	      widthElements: [ 9, -3, -12 ]
 	    },
 	    'GATEWAY_COMPLEX': {
 	      d:'m {mx},{my} 0,{e.y0} -{e.x0},-{e.y1} -{e.x1},{e.y2} {e.x0},{e.y1} -{e.x2},0 0,{e.y3} ' +
@@ -4859,15 +5372,15 @@
 	        '-{e.x0},{e.y1} 0,-{e.y0} -{e.x3},0 z',
 	      height: 17.125,
 	      width:  17.125,
-	      heightElements: [4.875, 3.4375, 2.125, 3],
-	      widthElements: [3.4375, 2.125, 4.875, 3]
+	      heightElements: [ 4.875, 3.4375, 2.125, 3 ],
+	      widthElements: [ 3.4375, 2.125, 4.875, 3 ]
 	    },
 	    'DATA_OBJECT_PATH': {
 	      d:'m 0,0 {e.x1},0 {e.x0},{e.y0} 0,{e.y1} -{e.x2},0 0,-{e.y2} {e.x1},0 0,{e.y0} {e.x0},0',
 	      height: 61,
 	      width:  51,
-	      heightElements: [10, 50, 60],
-	      widthElements: [10, 40, 50, 60]
+	      heightElements: [ 10, 50, 60 ],
+	      widthElements: [ 10, 40, 50, 60 ]
 	    },
 	    'DATA_OBJECT_COLLECTION_PATH': {
 	      d: 'm{mx},{my} m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10',
@@ -4896,15 +5409,15 @@
 	        'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0',
 	      height: 61,
 	      width:  61,
-	      heightElements: [7, 10, 45],
-	      widthElements:  [2, 58, 60]
+	      heightElements: [ 7, 10, 45 ],
+	      widthElements:  [ 2, 58, 60 ]
 	    },
 	    'TEXT_ANNOTATION': {
 	      d: 'm {mx}, {my} m 10,0 l -10,0 l 0,{e.y0} l 10,0',
 	      height: 30,
 	      width: 10,
-	      heightElements: [30],
-	      widthElements: [10]
+	      heightElements: [ 30 ],
+	      widthElements: [ 10 ]
 	    },
 	    'MARKER_SUB_PROCESS': {
 	      d: 'm{mx},{my} m 7,2 l 0,10 m -5,-5 l 10,0',
@@ -4959,8 +5472,8 @@
 	      d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',
 	      height: 14,
 	      width:  21,
-	      heightElements: [6, 14],
-	      widthElements: [10.5, 21]
+	      heightElements: [ 6, 14 ],
+	      widthElements: [ 10.5, 21 ]
 	    },
 	    'TASK_TYPE_SCRIPT': {
 	      d: 'm {mx},{my} c 9.966553,-6.27276 -8.000926,-7.91932 2.968968,-14.938 l -8.802728,0 ' +
@@ -4971,8 +5484,8 @@
 	        'm -4,3 l 5,0',
 	      height: 15,
 	      width:  12.6,
-	      heightElements: [6, 14],
-	      widthElements: [10.5, 21]
+	      heightElements: [ 6, 14 ],
+	      widthElements: [ 10.5, 21 ]
 	    },
 	    'TASK_TYPE_USER_1': {
 	      d: 'm {mx},{my} c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 ' +
@@ -5657,11 +6170,6 @@
 	      parentElement = this._canvas.findRoot(parentElement);
 	    }
 
-	    // insert sequence flows behind other flow nodes (cf. #727)
-	    if (is(semantic, 'bpmn:SequenceFlow')) {
-	      parentIndex = 0;
-	    }
-
 	    this._canvas.addConnection(element, parentElement, parentIndex);
 	  } else {
 	    throw new Error(translate('unknown di {di} for element {semantic}', {
@@ -8406,7 +8914,7 @@
 
 	  // dataAssociations are children of the subprocess but rendered on process level
 	  // cf. https://github.com/bpmn-io/bpmn-js/issues/1619
-	  if (isAny(bo, ['bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation'])) {
+	  if (isAny(bo, [ 'bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation' ])) {
 	    return false;
 	  }
 
@@ -8454,7 +8962,7 @@
 	  }, true);
 
 
-	  this.executed(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY$3,
+	  this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$3,
 	    function(context) {
 	      var oldParent = context.oldParent,
 	          newParent = context.newParent || context.parent,
@@ -8471,7 +8979,7 @@
 	    }, true);
 
 
-	  this.reverted(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY$3,
+	  this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$3,
 	    function(context) {
 	      var oldParent = context.oldParent,
 	          newParent = context.newParent || context.parent,
@@ -8590,7 +9098,7 @@
 
 	var DrilldownModdule = {
 	  __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],
-	  __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility'],
+	  __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility' ],
 	  drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],
 	  drilldownCentering: [ 'type', DrilldownCentering ],
 	  drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],
@@ -8918,20 +9426,11 @@
 	    return function() {
 	      initializers.forEach(function(initializer) {
 
-	        try {
-
-	          // eagerly resolve component (fn or string)
-	          if (typeof initializer === 'string') {
-	            injector.get(initializer);
-	          } else {
-	            injector.invoke(initializer);
-	          }
-	        } catch (error) {
-	          if (typeof AggregateError !== 'undefined') {
-	            throw new AggregateError([ error ], 'Failed to initialize!');
-	          }
-
-	          throw new Error('Failed to initialize! ' + error.message);
+	        // eagerly resolve component (fn or string)
+	        if (typeof initializer === 'string') {
+	          injector.get(initializer);
+	        } else {
+	          injector.invoke(initializer);
 	        }
 	      });
 	    };
@@ -9247,7 +9746,7 @@
 	 *
 	 * @return {number} the previous index of the element
 	 */
-	function remove$2(collection, element) {
+	function remove$3(collection, element) {
 
 	  if (!collection || !element) {
 	    return -1;
@@ -10199,7 +10698,7 @@
 	  graphicsFactory.remove(element);
 
 	  // unset parent <-> child relationship
-	  remove$2(element.parent && element.parent.children, element);
+	  remove$3(element.parent && element.parent.children, element);
 	  element.parent = null;
 
 	  eventBus.fire(type + '.removed', { element: element });
@@ -11523,7 +12022,7 @@
 	 *
 	 * @return {Base} the new model instance
 	 */
-	function create$1(type, attrs) {
+	function create$2(type, attrs) {
 	  var Type = types[type];
 	  if (!Type) {
 	    throw new Error('unknown type: <' + type + '>');
@@ -11571,7 +12070,7 @@
 	    attrs.id = type + '_' + (this._uid++);
 	  }
 
-	  return create$1(type, attrs);
+	  return create$2(type, attrs);
 	};
 
 	var FN_REF = '__fn';
@@ -16092,7 +16591,23 @@
 	    value = escapeAttr(value);
 	  }
 
-	  attrs.push({ name: name, value: value });
+	  // de-duplicate attributes
+	  // https://github.com/bpmn-io/moddle-xml/issues/66
+	  var idx = findIndex(attrs, function(element) {
+	    return (
+	      element.name.localName === name.localName &&
+	      element.name.uri === name.uri &&
+	      element.name.prefix === name.prefix
+	    );
+	  });
+
+	  var attr = { name: name, value: value };
+
+	  if (idx !== -1) {
+	    attrs.splice(idx, 1, attr);
+	  } else {
+	    attrs.push(attr);
+	  }
 	};
 
 	ElementSerializer.prototype.serializeAttributes = function(writer) {
@@ -16352,12 +16867,12 @@
 	  });
 	};
 
-	var name = "BPMN20";
-	var uri = "http://www.omg.org/spec/BPMN/20100524/MODEL";
-	var prefix$1 = "bpmn";
-	var associations = [
+	var name$5 = "BPMN20";
+	var uri$5 = "http://www.omg.org/spec/BPMN/20100524/MODEL";
+	var prefix$5 = "bpmn";
+	var associations$5 = [
 	];
-	var types$1 = [
+	var types$5 = [
 		{
 			name: "Interface",
 			superClass: [
@@ -19175,7 +19690,7 @@
 			]
 		}
 	];
-	var enumerations = [
+	var enumerations$3 = [
 		{
 			name: "ProcessType",
 			literalValues: [
@@ -19306,24 +19821,24 @@
 			]
 		}
 	];
-	var xml = {
+	var xml$1 = {
 		tagAlias: "lowerCase",
 		typePrefix: "t"
 	};
 	var BpmnPackage = {
-		name: name,
-		uri: uri,
-		prefix: prefix$1,
-		associations: associations,
-		types: types$1,
-		enumerations: enumerations,
-		xml: xml
+		name: name$5,
+		uri: uri$5,
+		prefix: prefix$5,
+		associations: associations$5,
+		types: types$5,
+		enumerations: enumerations$3,
+		xml: xml$1
 	};
 
-	var name$1 = "BPMNDI";
-	var uri$1 = "http://www.omg.org/spec/BPMN/20100524/DI";
-	var prefix$1$1 = "bpmndi";
-	var types$1$1 = [
+	var name$4 = "BPMNDI";
+	var uri$4 = "http://www.omg.org/spec/BPMN/20100524/DI";
+	var prefix$4 = "bpmndi";
+	var types$4 = [
 		{
 			name: "BPMNDiagram",
 			properties: [
@@ -19474,7 +19989,7 @@
 			]
 		}
 	];
-	var enumerations$1 = [
+	var enumerations$2 = [
 		{
 			name: "ParticipantBandKind",
 			literalValues: [
@@ -19510,21 +20025,21 @@
 			]
 		}
 	];
-	var associations$1 = [
+	var associations$4 = [
 	];
 	var BpmnDiPackage = {
-		name: name$1,
-		uri: uri$1,
-		prefix: prefix$1$1,
-		types: types$1$1,
-		enumerations: enumerations$1,
-		associations: associations$1
+		name: name$4,
+		uri: uri$4,
+		prefix: prefix$4,
+		types: types$4,
+		enumerations: enumerations$2,
+		associations: associations$4
 	};
 
-	var name$2 = "DC";
-	var uri$2 = "http://www.omg.org/spec/DD/20100524/DC";
-	var prefix$2 = "dc";
-	var types$2 = [
+	var name$3 = "DC";
+	var uri$3 = "http://www.omg.org/spec/DD/20100524/DC";
+	var prefix$3 = "dc";
+	var types$3 = [
 		{
 			name: "Boolean"
 		},
@@ -19617,20 +20132,20 @@
 			]
 		}
 	];
-	var associations$2 = [
+	var associations$3 = [
 	];
 	var DcPackage = {
-		name: name$2,
-		uri: uri$2,
-		prefix: prefix$2,
-		types: types$2,
-		associations: associations$2
+		name: name$3,
+		uri: uri$3,
+		prefix: prefix$3,
+		types: types$3,
+		associations: associations$3
 	};
 
-	var name$3 = "DI";
-	var uri$3 = "http://www.omg.org/spec/DD/20100524/DI";
-	var prefix$3 = "di";
-	var types$3 = [
+	var name$2 = "DI";
+	var uri$2 = "http://www.omg.org/spec/DD/20100524/DI";
+	var prefix$2 = "di";
+	var types$2 = [
 		{
 			name: "DiagramElement",
 			isAbstract: true,
@@ -19859,24 +20374,24 @@
 			]
 		}
 	];
-	var associations$3 = [
+	var associations$2 = [
 	];
-	var xml$1 = {
+	var xml = {
 		tagAlias: "lowerCase"
 	};
 	var DiPackage = {
-		name: name$3,
-		uri: uri$3,
-		prefix: prefix$3,
-		types: types$3,
-		associations: associations$3,
-		xml: xml$1
+		name: name$2,
+		uri: uri$2,
+		prefix: prefix$2,
+		types: types$2,
+		associations: associations$2,
+		xml: xml
 	};
 
-	var name$4 = "bpmn.io colors for BPMN";
-	var uri$4 = "http://bpmn.io/schema/bpmn/biocolor/1.0";
-	var prefix$4 = "bioc";
-	var types$4 = [
+	var name$1 = "bpmn.io colors for BPMN";
+	var uri$1 = "http://bpmn.io/schema/bpmn/biocolor/1.0";
+	var prefix$1 = "bioc";
+	var types$1 = [
 		{
 			name: "ColoredShape",
 			"extends": [
@@ -19914,23 +20429,23 @@
 			]
 		}
 	];
-	var enumerations$2 = [
+	var enumerations$1 = [
 	];
-	var associations$4 = [
+	var associations$1 = [
 	];
 	var BiocPackage = {
-		name: name$4,
-		uri: uri$4,
-		prefix: prefix$4,
-		types: types$4,
-		enumerations: enumerations$2,
-		associations: associations$4
+		name: name$1,
+		uri: uri$1,
+		prefix: prefix$1,
+		types: types$1,
+		enumerations: enumerations$1,
+		associations: associations$1
 	};
 
-	var name$5 = "BPMN in Color";
-	var uri$5 = "http://www.omg.org/spec/BPMN/non-normative/color/1.0";
-	var prefix$5 = "color";
-	var types$5 = [
+	var name = "BPMN in Color";
+	var uri = "http://www.omg.org/spec/BPMN/non-normative/color/1.0";
+	var prefix$6 = "color";
+	var types$6 = [
 		{
 			name: "ColoredLabel",
 			"extends": [
@@ -19976,17 +20491,17 @@
 			]
 		}
 	];
-	var enumerations$3 = [
+	var enumerations = [
 	];
-	var associations$5 = [
+	var associations = [
 	];
 	var BpmnInColorPackage = {
-		name: name$5,
-		uri: uri$5,
-		prefix: prefix$5,
-		types: types$5,
-		enumerations: enumerations$3,
-		associations: associations$5
+		name: name,
+		uri: uri,
+		prefix: prefix$6,
+		types: types$6,
+		enumerations: enumerations,
+		associations: associations
 	};
 
 	var packages = {
@@ -20066,6 +20581,7 @@
 	  // bpmnElement can have multiple independent DIs
 	  if (!has(businessObject, 'di')) {
 	    Object.defineProperty(businessObject, 'di', {
+	      enumerable: false,
 	      get: function() {
 	        throw new Error(DI_ERROR_MESSAGE);
 	      }
@@ -21635,7 +22151,7 @@
 	// default moddle extensions the viewer is composed of
 	Viewer.prototype._moddleExtensions = {};
 
-	function ensureImported$1(element, target) {
+	function ensureImported$2(element, target) {
 
 	  if (element.ownerDocument !== target.ownerDocument) {
 	    try {
@@ -21661,8 +22177,8 @@
 	 *
 	 * @return {SVGElement} the appended node
 	 */
-	function appendTo$1(element, target) {
-	  return target.appendChild(ensureImported$1(element, target));
+	function appendTo$2(element, target) {
+	  return target.appendChild(ensureImported$2(element, target));
 	}
 
 	/**
@@ -21677,8 +22193,8 @@
 	 *
 	 * @return {SVGElement} the element
 	 */
-	function append$1(target, node) {
-	  appendTo$1(node, target);
+	function append$2(target, node) {
+	  appendTo$2(node, target);
 	  return target;
 	}
 
@@ -21686,9 +22202,9 @@
 	 * attribute accessor utility
 	 */
 
-	var LENGTH_ATTR$1 = 2;
+	var LENGTH_ATTR$2 = 2;
 
-	var CSS_PROPERTIES$1 = {
+	var CSS_PROPERTIES$2 = {
 	  'alignment-baseline': 1,
 	  'baseline-shift': 1,
 	  'clip': 1,
@@ -21712,7 +22228,7 @@
 	  'flood-opacity': 1,
 	  'font': 1,
 	  'font-family': 1,
-	  'font-size': LENGTH_ATTR$1,
+	  'font-size': LENGTH_ATTR$2,
 	  'font-size-adjust': 1,
 	  'font-stretch': 1,
 	  'font-style': 1,
@@ -21742,7 +22258,7 @@
 	  'stroke-linejoin': 1,
 	  'stroke-miterlimit': 1,
 	  'stroke-opacity': 1,
-	  'stroke-width': LENGTH_ATTR$1,
+	  'stroke-width': LENGTH_ATTR$2,
 	  'text-anchor': 1,
 	  'text-decoration': 1,
 	  'text-rendering': 1,
@@ -21753,22 +22269,22 @@
 	};
 
 
-	function getAttribute$1(node, name) {
-	  if (CSS_PROPERTIES$1[name]) {
+	function getAttribute$2(node, name) {
+	  if (CSS_PROPERTIES$2[name]) {
 	    return node.style[name];
 	  } else {
 	    return node.getAttributeNS(null, name);
 	  }
 	}
 
-	function setAttribute$1(node, name, value) {
+	function setAttribute$2(node, name, value) {
 	  var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 
-	  var type = CSS_PROPERTIES$1[hyphenated];
+	  var type = CSS_PROPERTIES$2[hyphenated];
 
 	  if (type) {
 	    // append pixel unit, unless present
-	    if (type === LENGTH_ATTR$1 && typeof value === 'number') {
+	    if (type === LENGTH_ATTR$2 && typeof value === 'number') {
 	      value = String(value) + 'px';
 	    }
 
@@ -21778,12 +22294,12 @@
 	  }
 	}
 
-	function setAttributes$1(node, attrs) {
+	function setAttributes$2(node, attrs) {
 
 	  var names = Object.keys(attrs), i, name;
 
 	  for (i = 0, name; (name = names[i]); i++) {
-	    setAttribute$1(node, name, attrs[name]);
+	    setAttribute$2(node, name, attrs[name]);
 	  }
 	}
 
@@ -21797,21 +22313,21 @@
 	 *
 	 * @return {String}
 	 */
-	function attr$2(node, name, value) {
+	function attr$3(node, name, value) {
 	  if (typeof name === 'string') {
 	    if (value !== undefined) {
-	      setAttribute$1(node, name, value);
+	      setAttribute$2(node, name, value);
 	    } else {
-	      return getAttribute$1(node, name);
+	      return getAttribute$2(node, name);
 	    }
 	  } else {
-	    setAttributes$1(node, name);
+	    setAttributes$2(node, name);
 	  }
 
 	  return node;
 	}
 
-	var ns$1 = {
+	var ns$2 = {
 	  svg: 'http://www.w3.org/2000/svg'
 	};
 
@@ -21819,24 +22335,24 @@
 	 * DOM parsing utility
 	 */
 
-	var SVG_START$1 = '<svg xmlns="' + ns$1.svg + '"';
+	var SVG_START$2 = '<svg xmlns="' + ns$2.svg + '"';
 
-	function parse$2(svg) {
+	function parse$3(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);
+	    if (svg.indexOf(ns$2.svg) === -1) {
+	      svg = SVG_START$2 + svg.substring(4);
 	    }
 	  } else {
 	    // namespace svg
-	    svg = SVG_START$1 + '>' + svg + '</svg>';
+	    svg = SVG_START$2 + '>' + svg + '</svg>';
 	    unwrap = true;
 	  }
 
-	  var parsed = parseDocument$1(svg);
+	  var parsed = parseDocument$2(svg);
 
 	  if (!unwrap) {
 	    return parsed;
@@ -21853,7 +22369,7 @@
 	  return fragment;
 	}
 
-	function parseDocument$1(svg) {
+	function parseDocument$2(svg) {
 
 	  var parser;
 
@@ -21877,18 +22393,18 @@
 	 *
 	 * @returns {SVGElement}
 	 */
-	function create$2(name, attrs) {
+	function create$3(name, attrs) {
 	  var element;
 
 	  if (name.charAt(0) === '<') {
-	    element = parse$2(name).firstChild;
+	    element = parse$3(name).firstChild;
 	    element = document.importNode(element, true);
 	  } else {
-	    element = document.createElementNS(ns$1.svg, name);
+	    element = document.createElementNS(ns$2.svg, name);
 	  }
 
 	  if (attrs) {
-	    attr$2(element, attrs);
+	    attr$3(element, attrs);
 	  }
 
 	  return element;
@@ -21899,7 +22415,7 @@
 	 */
 
 	// fake node used to instantiate svg geometry elements
-	create$2('svg');
+	create$3('svg');
 
 	function getModelerTemplateIcon(element) {
 	  var modelerTemplateIcon = getBusinessObject(element).get('zeebe:modelerTemplateIcon');
@@ -21940,8 +22456,8 @@
 
 	  var modelerTemplateIcon = getModelerTemplateIcon(element);
 
-	  var icon = create$2('image');
-	  attr$2(icon, {
+	  var icon = create$3('image');
+	  attr$3(icon, {
 	    href: modelerTemplateIcon,
 	    x: 5,
 	    y: 5,
@@ -21949,7 +22465,7 @@
 	    height: 18
 	  });
 
-	  append$1(parentGfx, icon);
+	  append$2(parentGfx, icon);
 
 	  return gfx;
 	};
@@ -21969,14 +22485,14 @@
 	};
 
 	var name$6 = "zeebe";
-	var prefix$6 = "zeebe";
+	var prefix$7 = "zeebe";
 	var uri$6 = "http://camunda.org/schema/zeebe/1.0";
 	var xml$2 = {
 		tagAlias: "lowerCase"
 	};
 	var associations$6 = [
 	];
-	var types$6 = [
+	var types$7 = [
 		{
 			name: "ZeebeServiceTask",
 			"extends": [
@@ -22022,7 +22538,8 @@
 					"bpmn:Event",
 					"bpmn:ReceiveTask",
 					"zeebe:ZeebeServiceTask",
-					"bpmn:SubProcess"
+					"bpmn:SubProcess",
+					"bpmn:UserTask"
 				]
 			}
 		},
@@ -22063,7 +22580,8 @@
 				allowedIn: [
 					"bpmn:CallActivity",
 					"zeebe:ZeebeServiceTask",
-					"bpmn:SubProcess"
+					"bpmn:SubProcess",
+					"bpmn:UserTask"
 				]
 			}
 		},
@@ -22078,7 +22596,8 @@
 					"bpmn:Event",
 					"bpmn:ReceiveTask",
 					"zeebe:ZeebeServiceTask",
-					"bpmn:SubProcess"
+					"bpmn:SubProcess",
+					"bpmn:UserTask"
 				]
 			}
 		},
@@ -22089,7 +22608,8 @@
 			],
 			meta: {
 				allowedIn: [
-					"zeebe:ZeebeServiceTask"
+					"zeebe:ZeebeServiceTask",
+					"bpmn:UserTask"
 				]
 			},
 			properties: [
@@ -22296,6 +22816,51 @@
 				}
 			]
 		},
+		{
+			name: "Properties",
+			superClass: [
+				"Element"
+			],
+			properties: [
+				{
+					name: "properties",
+					type: "Property",
+					isMany: true
+				}
+			],
+			meta: {
+				allowedIn: [
+					"zeebe:PropertiesHolder"
+				]
+			}
+		},
+		{
+			name: "Property",
+			properties: [
+				{
+					name: "name",
+					type: "String",
+					isAttr: true
+				},
+				{
+					name: "value",
+					type: "String",
+					isAttr: true
+				}
+			],
+			meta: {
+				allowedIn: [
+					"zeebe:PropertiesHolder"
+				]
+			}
+		},
+		{
+			name: "PropertiesHolder",
+			isAbstract: true,
+			"extends": [
+				"bpmn:FlowNode"
+			]
+		},
 		{
 			name: "TemplateSupported",
 			isAbstract: true,
@@ -22325,11 +22890,11 @@
 	];
 	var zeebeModdle = {
 		name: name$6,
-		prefix: prefix$6,
+		prefix: prefix$7,
 		uri: uri$6,
 		xml: xml$2,
 		associations: associations$6,
-		types: types$6
+		types: types$7
 	};
 
 	const commonModules = [