camunda-bpmn-js 0.16.0 → 0.17.1

package/dist/base-navigated-viewer.development.js

@@ -71,6 +71,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.
    *
@@ -1133,149 +1153,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
    */
@@ -1426,11 +1303,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);
@@ -1444,16 +1321,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);
@@ -1469,11 +1346,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);
@@ -1486,11 +1363,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);
@@ -2011,97 +1888,733 @@
     _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
   };
 
-  map$1.td =
-  map$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+  map$1.td =
+  map$1.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+
+  map$1.option =
+  map$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
+
+  map$1.thead =
+  map$1.tbody =
+  map$1.colgroup =
+  map$1.caption =
+  map$1.tfoot = [1, '<table>', '</table>'];
+
+  map$1.polyline =
+  map$1.ellipse =
+  map$1.polygon =
+  map$1.circle =
+  map$1.text =
+  map$1.line =
+  map$1.path =
+  map$1.rect =
+  map$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+
+  /**
+   * Parse `html` and return a DOM Node instance, which could be a TextNode,
+   * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+   * instance, depending on the contents of the `html` string.
+   *
+   * @param {String} html - HTML string to "domify"
+   * @param {Document} doc - The `document` instance to create the Node for
+   * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+   * @api private
+   */
+
+  function parse$1(html, doc) {
+    if ('string' != typeof html) throw new TypeError('String expected');
+
+    // default to the global `document` object
+    if (!doc) doc = document;
+
+    // tag name
+    var m = /<([\w:]+)/.exec(html);
+    if (!m) return doc.createTextNode(html);
+
+    html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+
+    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;
 
-  map$1.option =
-  map$1.optgroup = [1, '<select multiple="multiple">', '</select>'];
+    // COMMENT
+    case 8:
+      output.push('<!--', escape(node.nodeValue, TEXT_ENTITIES), '-->');
+      break;
 
-  map$1.thead =
-  map$1.tbody =
-  map$1.colgroup =
-  map$1.caption =
-  map$1.tfoot = [1, '<table>', '</table>'];
+    // CDATA
+    case 4:
+      output.push('<![CDATA[', node.nodeValue, ']]>');
+      break;
 
-  map$1.polyline =
-  map$1.ellipse =
-  map$1.polygon =
-  map$1.circle =
-  map$1.text =
-  map$1.line =
-  map$1.path =
-  map$1.rect =
-  map$1.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+    default:
+      throw new Error('unable to handle node ' + node.nodeType);
+    }
+
+    return output;
+  }
 
   /**
-   * Parse `html` and return a DOM Node instance, which could be a TextNode,
-   * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
-   * instance, depending on the contents of the `html` string.
-   *
-   * @param {String} html - HTML string to "domify"
-   * @param {Document} doc - The `document` instance to create the Node for
-   * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
-   * @api private
+   * innerHTML like functionality for SVG elements.
+   * based on innerSVG (https://code.google.com/p/innersvg)
    */
 
-  function parse$1(html, doc) {
-    if ('string' != typeof html) throw new TypeError('String expected');
 
-    // default to the global `document` object
-    if (!doc) doc = document;
+  function set(element, svg) {
 
-    // tag name
-    var m = /<([\w:]+)/.exec(html);
-    if (!m) return doc.createTextNode(html);
+    var parsed = parse$2(svg);
 
-    html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+    // clear element contents
+    clear$2(element);
 
-    var tag = m[1];
+    if (!svg) {
+      return;
+    }
 
-    // body support
-    if (tag == 'body') {
-      var el = doc.createElement('html');
-      el.innerHTML = html;
-      return el.removeChild(el.lastChild);
+    if (!isFragment(parsed)) {
+      // extract <svg> from parsed document
+      parsed = parsed.documentElement;
     }
 
-    // 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;
+    var nodes = slice(parsed.childNodes);
 
-    // one element
-    if (el.firstChild == el.lastChild) {
-      return el.removeChild(el.firstChild);
+    // import + append each node
+    for (var i = 0; i < nodes.length; i++) {
+      appendTo$1(nodes[i], element);
     }
 
-    // several elements
-    var fragment = doc.createDocumentFragment();
-    while (el.firstChild) {
-      fragment.appendChild(el.removeChild(el.firstChild));
+  }
+
+  function get(element) {
+    var child = element.firstChild,
+        output = [];
+
+    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);
   }
 
   /**
@@ -2353,16 +2866,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,
@@ -2375,12 +2888,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;
     }
@@ -2404,8 +2917,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,
@@ -2419,8 +2932,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,
@@ -2433,8 +2946,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,
@@ -2448,8 +2961,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,
@@ -2464,8 +2977,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,
@@ -2480,8 +2993,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,
@@ -2495,8 +3008,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,
@@ -2531,15 +3044,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;
     }
@@ -2559,8 +3072,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,
@@ -2568,9 +3081,9 @@
         rx: r,
         ry: r
       });
-      attr(rect, attrs);
+      attr$2(rect, attrs);
 
-      append(parentGfx, rect);
+      append$1(parentGfx, rect);
 
       return rect;
     }
@@ -2580,7 +3093,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;
@@ -2592,13 +3105,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;
     }
@@ -2612,7 +3125,7 @@
 
       var line = createLine(waypoints, attrs);
 
-      append(parentGfx, line);
+      append$1(parentGfx, line);
 
       return line;
     }
@@ -2624,11 +3137,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;
     }
@@ -2652,7 +3165,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);
         }
@@ -2714,9 +3227,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;
     }
@@ -3326,7 +3839,7 @@
         });
 
         var businessHeaderPath = drawPath(parentGfx, headerPathData);
-        attr(businessHeaderPath, {
+        attr$2(businessHeaderPath, {
           strokeWidth: 1,
           fill: getFillColor(element, '#aaaaaa'),
           stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3340,7 +3853,7 @@
         });
 
         var businessPath = drawPath(parentGfx, headerData);
-        attr(businessPath, {
+        attr$2(businessPath, {
           strokeWidth: 1,
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
@@ -3358,7 +3871,7 @@
         var expanded = isExpanded(element);
 
         if (isEventSubProcess(element)) {
-          attr(rect, {
+          attr$2(rect, {
             strokeDasharray: '1,2'
           });
         }
@@ -3368,7 +3881,7 @@
         if (expanded) {
           attachTaskMarkers(parentGfx, element);
         } else {
-          attachTaskMarkers(parentGfx, element, ['SubProcessMarker']);
+          attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
         }
 
         return rect;
@@ -3580,7 +4093,7 @@
           });
 
           var parallelPath = drawPath(parentGfx, pathData);
-          attr(parallelPath, {
+          attr$2(parallelPath, {
             strokeWidth: 1,
             fill: 'none'
           });
@@ -3588,7 +4101,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)
@@ -3633,7 +4146,7 @@
 
           // conditional flow marker
           if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-            attr(path, {
+            attr$2(path, {
               markerStart: marker('conditional-flow-marker', fill, stroke)
             });
           }
@@ -3641,7 +4154,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)
             });
           }
@@ -4702,22 +5215,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 ' +
@@ -4729,67 +5242,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} ' +
@@ -4797,23 +5310,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} ' +
@@ -4822,15 +5335,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',
@@ -4859,15 +5372,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',
@@ -4922,8 +5435,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 ' +
@@ -4934,8 +5447,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 ' +
@@ -5616,11 +6129,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}', {
@@ -8389,7 +8897,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;
     }
 
@@ -8437,7 +8945,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,
@@ -8454,7 +8962,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,
@@ -8573,7 +9081,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 ],
@@ -8901,20 +9409,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);
           }
         });
       };
@@ -9230,7 +9729,7 @@
    *
    * @return {number} the previous index of the element
    */
-  function remove$2(collection, element) {
+  function remove$3(collection, element) {
 
     if (!collection || !element) {
       return -1;
@@ -10182,7 +10681,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 });
@@ -11506,7 +12005,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 + '>');
@@ -11554,7 +12053,7 @@
       attrs.id = type + '_' + (this._uid++);
     }
 
-    return create$1(type, attrs);
+    return create$2(type, attrs);
   };
 
   var FN_REF = '__fn';
@@ -16075,7 +16574,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) {
@@ -16335,12 +16850,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: [
@@ -19158,7 +19673,7 @@
   		]
   	}
   ];
-  var enumerations = [
+  var enumerations$3 = [
   	{
   		name: "ProcessType",
   		literalValues: [
@@ -19289,24 +19804,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: [
@@ -19457,7 +19972,7 @@
   		]
   	}
   ];
-  var enumerations$1 = [
+  var enumerations$2 = [
   	{
   		name: "ParticipantBandKind",
   		literalValues: [
@@ -19493,21 +20008,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"
   	},
@@ -19600,20 +20115,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,
@@ -19842,24 +20357,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": [
@@ -19897,23 +20412,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": [
@@ -19959,17 +20474,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 = {
@@ -20049,6 +20564,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);
         }
@@ -21618,6 +22134,16 @@
   // default moddle extensions the viewer is composed of
   Viewer.prototype._moddleExtensions = {};
 
+  var KEYCODE_C = 67;
+  var KEYCODE_V = 86;
+  var KEYCODE_Y = 89;
+  var KEYCODE_Z = 90;
+
+  var KEYS_COPY = [ 'c', 'C', KEYCODE_C ];
+  var KEYS_PASTE = [ 'v', 'V', KEYCODE_V ];
+  var KEYS_REDO = [ 'y', 'Y', KEYCODE_Y ];
+  var KEYS_UNDO = [ 'z', 'Z', KEYCODE_Z ];
+
   /**
    * Returns true if event was triggered with any modifier
    * @param {KeyboardEvent} event
@@ -21657,6 +22183,26 @@
    */
   function isShift(event) {
     return event.shiftKey;
+  }
+
+  function isCopy(event) {
+    return isCmd(event) && isKey(KEYS_COPY, event);
+  }
+
+  function isPaste(event) {
+    return isCmd(event) && isKey(KEYS_PASTE, event);
+  }
+
+  function isUndo(event) {
+    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
+  }
+
+  function isRedo(event) {
+    return isCmd(event) && (
+      isKey(KEYS_REDO, event) || (
+        isKey(KEYS_UNDO, event) && isShift(event)
+      )
+    );
   }
 
   var KEYDOWN_EVENT = 'keyboard.keydown',
@@ -21849,16 +22395,6 @@
 
   var LOW_PRIORITY$4 = 500;
 
-  var KEYCODE_C = 67;
-  var KEYCODE_V = 86;
-  var KEYCODE_Y = 89;
-  var KEYCODE_Z = 90;
-
-  var KEYS_COPY = [ 'c', 'C', KEYCODE_C ];
-  var KEYS_PASTE = [ 'v', 'V', KEYCODE_V ];
-  var KEYS_REDO = [ 'y', 'Y', KEYCODE_Y ];
-  var KEYS_UNDO = [ 'z', 'Z', KEYCODE_Z ];
-
 
   /**
    * Adds default keyboard bindings.
@@ -21916,7 +22452,7 @@
 
       var event = context.keyEvent;
 
-      if (isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event)) {
+      if (isUndo(event)) {
         editorActions.trigger('undo');
 
         return true;
@@ -21930,7 +22466,7 @@
 
       var event = context.keyEvent;
 
-      if (isCmd(event) && (isKey(KEYS_REDO, event) || (isKey(KEYS_UNDO, event) && isShift(event)))) {
+      if (isRedo(event)) {
         editorActions.trigger('redo');
 
         return true;
@@ -21943,7 +22479,7 @@
 
       var event = context.keyEvent;
 
-      if (isCmd(event) && isKey(KEYS_COPY, event)) {
+      if (isCopy(event)) {
         editorActions.trigger('copy');
 
         return true;
@@ -21956,7 +22492,7 @@
 
       var event = context.keyEvent;
 
-      if (isCmd(event) && isKey(KEYS_PASTE, event)) {
+      if (isPaste(event)) {
         editorActions.trigger('paste');
 
         return true;