camunda-bpmn-js 0.23.1 → 0.24.1

package/dist/base-viewer.development.js

@@ -646,7 +646,7 @@
     }
   }
 
-  function ensureImported$1(element, target) {
+  function ensureImported(element, target) {
 
     if (element.ownerDocument !== target.ownerDocument) {
       try {
@@ -674,8 +674,8 @@
    *
    * @return {SVGElement} the appended node
    */
-  function appendTo$1(element, target) {
-    return target.appendChild(ensureImported$1(element, target));
+  function appendTo(element, target) {
+    return target.appendChild(ensureImported(element, target));
   }
 
   /**
@@ -690,8 +690,8 @@
    *
    * @return {SVGElement} the element
    */
-  function append$1(target, node) {
-    appendTo$1(node, target);
+  function append(target, node) {
+    appendTo(node, target);
     return target;
   }
 
@@ -699,9 +699,9 @@
    * attribute accessor utility
    */
 
-  var LENGTH_ATTR$1 = 2;
+  var LENGTH_ATTR = 2;
 
-  var CSS_PROPERTIES$1 = {
+  var CSS_PROPERTIES = {
     'alignment-baseline': 1,
     'baseline-shift': 1,
     'clip': 1,
@@ -725,7 +725,7 @@
     'flood-opacity': 1,
     'font': 1,
     'font-family': 1,
-    'font-size': LENGTH_ATTR$1,
+    'font-size': LENGTH_ATTR,
     'font-size-adjust': 1,
     'font-stretch': 1,
     'font-style': 1,
@@ -755,7 +755,7 @@
     'stroke-linejoin': 1,
     'stroke-miterlimit': 1,
     'stroke-opacity': 1,
-    'stroke-width': LENGTH_ATTR$1,
+    'stroke-width': LENGTH_ATTR,
     'text-anchor': 1,
     'text-decoration': 1,
     'text-rendering': 1,
@@ -766,23 +766,23 @@
   };
 
 
-  function getAttribute$1(node, name) {
-    if (CSS_PROPERTIES$1[name]) {
+  function getAttribute(node, name) {
+    if (CSS_PROPERTIES[name]) {
       return node.style[name];
     } else {
       return node.getAttributeNS(null, name);
     }
   }
 
-  function setAttribute$1(node, name, value) {
+  function setAttribute(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[hyphenated];
 
     if (type) {
 
       // append pixel unit, unless present
-      if (type === LENGTH_ATTR$1 && typeof value === 'number') {
+      if (type === LENGTH_ATTR && typeof value === 'number') {
         value = String(value) + 'px';
       }
 
@@ -792,12 +792,12 @@
     }
   }
 
-  function setAttributes$1(node, attrs) {
+  function setAttributes(node, attrs) {
 
     var names = Object.keys(attrs), i, name;
 
     for (i = 0, name; (name = names[i]); i++) {
-      setAttribute$1(node, name, attrs[name]);
+      setAttribute(node, name, attrs[name]);
     }
   }
 
@@ -811,15 +811,15 @@
    *
    * @return {String}
    */
-  function attr$2(node, name, value) {
+  function attr$1(node, name, value) {
     if (typeof name === 'string') {
       if (value !== undefined) {
-        setAttribute$1(node, name, value);
+        setAttribute(node, name, value);
       } else {
-        return getAttribute$1(node, name);
+        return getAttribute(node, name);
       }
     } else {
-      setAttributes$1(node, name);
+      setAttributes(node, name);
     }
 
     return node;
@@ -835,7 +835,7 @@
    * toString reference.
    */
 
-  const toString$2 = Object.prototype.toString;
+  const toString$1 = Object.prototype.toString;
 
   /**
     * Wrap `el` in a `ClassList`.
@@ -845,11 +845,11 @@
     * @api public
     */
 
-  function classes$2(el) {
-    return new ClassList$2(el);
+  function classes$1(el) {
+    return new ClassList$1(el);
   }
 
-  function ClassList$2(el) {
+  function ClassList$1(el) {
     if (!el || !el.nodeType) {
       throw new Error('A DOM element reference is required');
     }
@@ -865,7 +865,7 @@
     * @api public
     */
 
-  ClassList$2.prototype.add = function(name) {
+  ClassList$1.prototype.add = function(name) {
     this.list.add(name);
     return this;
   };
@@ -880,8 +880,8 @@
     * @api public
     */
 
-  ClassList$2.prototype.remove = function(name) {
-    if ('[object RegExp]' == toString$2.call(name)) {
+  ClassList$1.prototype.remove = function(name) {
+    if ('[object RegExp]' == toString$1.call(name)) {
       return this.removeMatching(name);
     }
 
@@ -897,7 +897,7 @@
     * @api private
     */
 
-  ClassList$2.prototype.removeMatching = function(re) {
+  ClassList$1.prototype.removeMatching = function(re) {
     const arr = this.array();
     for (let i = 0; i < arr.length; i++) {
       if (re.test(arr[i])) {
@@ -919,7 +919,7 @@
     * @api public
     */
 
-  ClassList$2.prototype.toggle = function(name, force) {
+  ClassList$1.prototype.toggle = function(name, force) {
     if ('undefined' !== typeof force) {
       if (force !== this.list.toggle(name, force)) {
         this.list.toggle(name); // toggle again to correct
@@ -937,7 +937,7 @@
     * @api public
     */
 
-  ClassList$2.prototype.array = function() {
+  ClassList$1.prototype.array = function() {
     return Array.from(this.list);
   };
 
@@ -949,12 +949,12 @@
     * @api public
     */
 
-  ClassList$2.prototype.has =
-   ClassList$2.prototype.contains = function(name) {
+  ClassList$1.prototype.has =
+   ClassList$1.prototype.contains = function(name) {
      return this.list.contains(name);
    };
 
-  function remove$3(element) {
+  function remove$2(element) {
     var parent = element.parentNode;
 
     if (parent) {
@@ -974,17 +974,17 @@
    * @param  {DOMElement} element
    * @return {DOMElement} the element (for chaining)
    */
-  function clear$2(element) {
+  function clear$1(element) {
     var child;
 
     while ((child = element.firstChild)) {
-      remove$3(child);
+      remove$2(child);
     }
 
     return element;
   }
 
-  var ns$1 = {
+  var ns = {
     svg: 'http://www.w3.org/2000/svg'
   };
 
@@ -992,25 +992,25 @@
    * DOM parsing utility
    */
 
-  var SVG_START$1 = '<svg xmlns="' + ns$1.svg + '"';
+  var SVG_START = '<svg xmlns="' + ns.svg + '"';
 
-  function parse$2(svg) {
+  function parse$1(svg) {
 
     var unwrap = false;
 
     // ensure we import a valid svg document
     if (svg.substring(0, 4) === '<svg') {
-      if (svg.indexOf(ns$1.svg) === -1) {
-        svg = SVG_START$1 + svg.substring(4);
+      if (svg.indexOf(ns.svg) === -1) {
+        svg = SVG_START + svg.substring(4);
       }
     } else {
 
       // namespace svg
-      svg = SVG_START$1 + '>' + svg + '</svg>';
+      svg = SVG_START + '>' + svg + '</svg>';
       unwrap = true;
     }
 
-    var parsed = parseDocument$1(svg);
+    var parsed = parseDocument(svg);
 
     if (!unwrap) {
       return parsed;
@@ -1027,7 +1027,7 @@
     return fragment;
   }
 
-  function parseDocument$1(svg) {
+  function parseDocument(svg) {
 
     var parser;
 
@@ -1051,18 +1051,18 @@
    *
    * @returns {SVGElement}
    */
-  function create$2(name, attrs) {
+  function create$1(name, attrs) {
     var element;
 
     if (name.charAt(0) === '<') {
-      element = parse$2(name).firstChild;
+      element = parse$1(name).firstChild;
       element = document.importNode(element, true);
     } else {
-      element = document.createElementNS(ns$1.svg, name);
+      element = document.createElementNS(ns.svg, name);
     }
 
     if (attrs) {
-      attr$2(element, attrs);
+      attr$1(element, attrs);
     }
 
     return element;
@@ -1077,7 +1077,7 @@
 
   function getNode() {
     if (node === null) {
-      node = create$2('svg');
+      node = create$1('svg');
     }
 
     return node;
@@ -1132,6 +1132,152 @@
     }
   }
 
+  /**
+   * Serialization util
+   */
+
+  var TEXT_ENTITIES = /([&<>]{1})/g;
+  var ATTR_ENTITIES = /([\n\r"]{1})/g;
+
+  var ENTITY_REPLACEMENT = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '\''
+  };
+
+  function escape$1(str, pattern) {
+
+    function replaceFn(match, entity) {
+      return ENTITY_REPLACEMENT[entity] || entity;
+    }
+
+    return str.replace(pattern, replaceFn);
+  }
+
+  function serialize(node, output) {
+
+    var i, len, attrMap, attrNode, childNodes;
+
+    switch (node.nodeType) {
+
+    // TEXT
+    case 3:
+
+      // replace special XML characters
+      output.push(escape$1(node.textContent, TEXT_ENTITIES));
+      break;
+
+    // ELEMENT
+    case 1:
+      output.push('<', node.tagName);
+
+      if (node.hasAttributes()) {
+        attrMap = node.attributes;
+        for (i = 0, len = attrMap.length; i < len; ++i) {
+          attrNode = attrMap.item(i);
+          output.push(' ', attrNode.name, '="', escape$1(attrNode.value, ATTR_ENTITIES), '"');
+        }
+      }
+
+      if (node.hasChildNodes()) {
+        output.push('>');
+        childNodes = node.childNodes;
+        for (i = 0, len = childNodes.length; i < len; ++i) {
+          serialize(childNodes.item(i), output);
+        }
+        output.push('</', node.tagName, '>');
+      } else {
+        output.push('/>');
+      }
+      break;
+
+    // COMMENT
+    case 8:
+      output.push('<!--', escape$1(node.nodeValue, TEXT_ENTITIES), '-->');
+      break;
+
+    // CDATA
+    case 4:
+      output.push('<![CDATA[', node.nodeValue, ']]>');
+      break;
+
+    default:
+      throw new Error('unable to handle node ' + node.nodeType);
+    }
+
+    return output;
+  }
+
+  /**
+   * innerHTML like functionality for SVG elements.
+   * based on innerSVG (https://code.google.com/p/innersvg)
+   */
+
+
+  function set(element, svg) {
+
+    var parsed = parse$1(svg);
+
+    // clear element contents
+    clear$1(element);
+
+    if (!svg) {
+      return;
+    }
+
+    if (!isFragment(parsed)) {
+
+      // extract <svg> from parsed document
+      parsed = parsed.documentElement;
+    }
+
+    var nodes = slice$1(parsed.childNodes);
+
+    // import + append each node
+    for (var i = 0; i < nodes.length; i++) {
+      appendTo(nodes[i], element);
+    }
+
+  }
+
+  function get(element) {
+    var child = element.firstChild,
+        output = [];
+
+    while (child) {
+      serialize(child, output);
+      child = child.nextSibling;
+    }
+
+    return output.join('');
+  }
+
+  function isFragment(node) {
+    return node.nodeName === '#document-fragment';
+  }
+
+  function innerSVG(element, svg) {
+
+    if (svg !== undefined) {
+
+      try {
+        set(element, svg);
+      } catch (e) {
+        throw new Error('error parsing SVG: ' + e.message);
+      }
+
+      return element;
+    } else {
+      return get(element);
+    }
+  }
+
+
+  function slice$1(arr) {
+    return Array.prototype.slice.call(arr);
+  }
+
   /**
    * transform accessor utility
    */
@@ -1194,18 +1340,18 @@
 
   function createLine(points, attrs) {
 
-    var line = create$2('polyline');
-    attr$2(line, { points: toSVGPoints(points) });
+    var line = create$1('polyline');
+    attr$1(line, { points: toSVGPoints(points) });
 
     if (attrs) {
-      attr$2(line, attrs);
+      attr$1(line, attrs);
     }
 
     return line;
   }
 
   function updateLine(gfx, points) {
-    attr$2(gfx, { points: toSVGPoints(points) });
+    attr$1(gfx, { points: toSVGPoints(points) });
 
     return gfx;
   }
@@ -1474,7 +1620,7 @@
    * @param {String} [val]
    * @api public
    */
-  function attr$1(el, name, val) {
+  function attr(el, name, val) {
 
     // get
     if (arguments.length == 2) {
@@ -1502,7 +1648,7 @@
    * toString reference.
    */
 
-  const toString$1 = Object.prototype.toString;
+  const toString = Object.prototype.toString;
 
   /**
    * Wrap `el` in a `ClassList`.
@@ -1512,8 +1658,8 @@
    * @api public
    */
 
-  function classes$1(el) {
-    return new ClassList$1(el);
+  function classes(el) {
+    return new ClassList(el);
   }
 
   /**
@@ -1523,7 +1669,7 @@
    * @api private
    */
 
-  function ClassList$1(el) {
+  function ClassList(el) {
     if (!el || !el.nodeType) {
       throw new Error('A DOM element reference is required');
     }
@@ -1539,7 +1685,7 @@
    * @api public
    */
 
-  ClassList$1.prototype.add = function(name) {
+  ClassList.prototype.add = function(name) {
     this.list.add(name);
     return this;
   };
@@ -1554,8 +1700,8 @@
    * @api public
    */
 
-  ClassList$1.prototype.remove = function(name) {
-    if ('[object RegExp]' == toString$1.call(name)) {
+  ClassList.prototype.remove = function(name) {
+    if ('[object RegExp]' == toString.call(name)) {
       return this.removeMatching(name);
     }
 
@@ -1571,7 +1717,7 @@
    * @api private
    */
 
-  ClassList$1.prototype.removeMatching = function(re) {
+  ClassList.prototype.removeMatching = function(re) {
     const arr = this.array();
     for (let i = 0; i < arr.length; i++) {
       if (re.test(arr[i])) {
@@ -1593,7 +1739,7 @@
    * @api public
    */
 
-  ClassList$1.prototype.toggle = function(name, force) {
+  ClassList.prototype.toggle = function(name, force) {
     if ('undefined' !== typeof force) {
       if (force !== this.list.toggle(name, force)) {
         this.list.toggle(name); // toggle again to correct
@@ -1611,7 +1757,7 @@
    * @api public
    */
 
-  ClassList$1.prototype.array = function() {
+  ClassList.prototype.array = function() {
     return Array.from(this.list);
   };
 
@@ -1623,15 +1769,15 @@
    * @api public
    */
 
-  ClassList$1.prototype.has =
-  ClassList$1.prototype.contains = function(name) {
+  ClassList.prototype.has =
+  ClassList.prototype.contains = function(name) {
     return this.list.contains(name);
   };
 
   /**
    * Remove all children from the given element.
    */
-  function clear$1(el) {
+  function clear(el) {
 
     var c;
 
@@ -1719,762 +1865,194 @@
     bind: bind_1,
     unbind: unbind_1,
     'default': componentEvent
-  }, [componentEvent]);
-
-  /**
-   * Module dependencies.
-   */
-
-  /**
-   * Delegate event `type` to `selector`
-   * and invoke `fn(e)`. A callback function
-   * is returned which may be passed to `.unbind()`.
-   *
-   * @param {Element} el
-   * @param {String} selector
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @return {Function}
-   * @api public
-   */
-
-  // Some events don't bubble, so we want to bind to the capture phase instead
-  // when delegating.
-  var forceCaptureEvents = [ 'focus', 'blur' ];
-
-  function bind(el, selector, type, fn, capture) {
-    if (forceCaptureEvents.indexOf(type) !== -1) {
-      capture = true;
-    }
-
-    return event.bind(el, type, function(e) {
-      var target = e.target || e.srcElement;
-      e.delegateTarget = closest(target, selector, true);
-      if (e.delegateTarget) {
-        fn.call(el, e);
-      }
-    }, capture);
-  }
-
-  /**
-   * Unbind event `type`'s callback `fn`.
-   *
-   * @param {Element} el
-   * @param {String} type
-   * @param {Function} fn
-   * @param {Boolean} capture
-   * @api public
-   */
-  function unbind(el, type, fn, capture) {
-    if (forceCaptureEvents.indexOf(type) !== -1) {
-      capture = true;
-    }
-
-    return event.unbind(el, type, fn, capture);
-  }
-
-  var delegate = {
-    bind,
-    unbind
-  };
-
-  /**
-   * Expose `parse`.
-   */
-
-  var domify = parse$1;
-
-  /**
-   * Tests for browser support.
-   */
-
-  var innerHTMLBug = false;
-  var bugTestDiv;
-  if (typeof document !== 'undefined') {
-    bugTestDiv = document.createElement('div');
-    // Setup
-    bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
-    // Make sure that link elements get serialized correctly by innerHTML
-    // This requires a wrapper element in IE
-    innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
-    bugTestDiv = undefined;
-  }
-
-  /**
-   * Wrap map from jquery.
-   */
-
-  var map = {
-    legend: [1, '<fieldset>', '</fieldset>'],
-    tr: [2, '<table><tbody>', '</tbody></table>'],
-    col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
-    // for script/link/style tags to work in IE6-8, you have to wrap
-    // in a div with a non-whitespace character in front, ha!
-    _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
-  };
-
-  map.td =
-  map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
-
-  map.option =
-  map.optgroup = [1, '<select multiple="multiple">', '</select>'];
-
-  map.thead =
-  map.tbody =
-  map.colgroup =
-  map.caption =
-  map.tfoot = [1, '<table>', '</table>'];
-
-  map.polyline =
-  map.ellipse =
-  map.polygon =
-  map.circle =
-  map.text =
-  map.line =
-  map.path =
-  map.rect =
-  map.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 = Object.prototype.hasOwnProperty.call(map, tag) ? map[tag] : map._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;
-  }
-
-  var domify$1 = domify;
-
-  function query(selector, el) {
-    el = el || document;
-
-    return el.querySelector(selector);
-  }
-
-  function all(selector, el) {
-    el = el || document;
-
-    return el.querySelectorAll(selector);
-  }
-
-  function remove$2(el) {
-    el.parentNode && el.parentNode.removeChild(el);
-  }
-
-  function ensureImported(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(element, target) {
-    return target.appendChild(ensureImported(element, target));
-  }
-
-  /**
-   * append utility
-   */
-
-  /**
-   * Append a node to an element
-   *
-   * @param  {SVGElement} element
-   * @param  {SVGElement} node
-   *
-   * @return {SVGElement} the element
-   */
-  function append(target, node) {
-    appendTo(node, target);
-    return target;
-  }
-
-  /**
-   * attribute accessor utility
-   */
-
-  var LENGTH_ATTR = 2;
-
-  var CSS_PROPERTIES = {
-    'alignment-baseline': 1,
-    'baseline-shift': 1,
-    'clip': 1,
-    'clip-path': 1,
-    'clip-rule': 1,
-    'color': 1,
-    'color-interpolation': 1,
-    'color-interpolation-filters': 1,
-    'color-profile': 1,
-    'color-rendering': 1,
-    'cursor': 1,
-    'direction': 1,
-    'display': 1,
-    'dominant-baseline': 1,
-    'enable-background': 1,
-    'fill': 1,
-    'fill-opacity': 1,
-    'fill-rule': 1,
-    'filter': 1,
-    'flood-color': 1,
-    'flood-opacity': 1,
-    'font': 1,
-    'font-family': 1,
-    'font-size': LENGTH_ATTR,
-    'font-size-adjust': 1,
-    'font-stretch': 1,
-    'font-style': 1,
-    'font-variant': 1,
-    'font-weight': 1,
-    'glyph-orientation-horizontal': 1,
-    'glyph-orientation-vertical': 1,
-    'image-rendering': 1,
-    'kerning': 1,
-    'letter-spacing': 1,
-    'lighting-color': 1,
-    'marker': 1,
-    'marker-end': 1,
-    'marker-mid': 1,
-    'marker-start': 1,
-    'mask': 1,
-    'opacity': 1,
-    'overflow': 1,
-    'pointer-events': 1,
-    'shape-rendering': 1,
-    'stop-color': 1,
-    'stop-opacity': 1,
-    'stroke': 1,
-    'stroke-dasharray': 1,
-    'stroke-dashoffset': 1,
-    'stroke-linecap': 1,
-    'stroke-linejoin': 1,
-    'stroke-miterlimit': 1,
-    'stroke-opacity': 1,
-    'stroke-width': LENGTH_ATTR,
-    'text-anchor': 1,
-    'text-decoration': 1,
-    'text-rendering': 1,
-    'unicode-bidi': 1,
-    'visibility': 1,
-    'word-spacing': 1,
-    'writing-mode': 1
-  };
-
-
-  function getAttribute(node, name) {
-    if (CSS_PROPERTIES[name]) {
-      return node.style[name];
-    } else {
-      return node.getAttributeNS(null, name);
-    }
-  }
-
-  function setAttribute(node, name, value) {
-    var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-
-    var type = CSS_PROPERTIES[hyphenated];
-
-    if (type) {
-
-      // append pixel unit, unless present
-      if (type === LENGTH_ATTR && typeof value === 'number') {
-        value = String(value) + 'px';
-      }
-
-      node.style[hyphenated] = value;
-    } else {
-      node.setAttributeNS(null, name, value);
-    }
-  }
-
-  function setAttributes(node, attrs) {
-
-    var names = Object.keys(attrs), i, name;
-
-    for (i = 0, name; (name = names[i]); i++) {
-      setAttribute(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(node, name, value) {
-    if (typeof name === 'string') {
-      if (value !== undefined) {
-        setAttribute(node, name, value);
-      } else {
-        return getAttribute(node, name);
-      }
-    } else {
-      setAttributes(node, name);
-    }
-
-    return node;
-  }
-
-  /**
-   * Taken from https://github.com/component/classes
-   *
-   * Without the component bits.
-   */
-
-  /**
-   * toString reference.
-   */
-
-  const toString = Object.prototype.toString;
-
-  /**
-    * Wrap `el` in a `ClassList`.
-    *
-    * @param {Element} el
-    * @return {ClassList}
-    * @api public
-    */
-
-  function classes(el) {
-    return new ClassList(el);
-  }
-
-  function ClassList(el) {
-    if (!el || !el.nodeType) {
-      throw new Error('A DOM element reference is required');
-    }
-    this.el = el;
-    this.list = el.classList;
-  }
-
-  /**
-    * Add class `name` if not already present.
-    *
-    * @param {String} name
-    * @return {ClassList}
-    * @api public
-    */
-
-  ClassList.prototype.add = function(name) {
-    this.list.add(name);
-    return this;
-  };
-
-  /**
-    * Remove class `name` when present, or
-    * pass a regular expression to remove
-    * any which match.
-    *
-    * @param {String|RegExp} name
-    * @return {ClassList}
-    * @api public
-    */
-
-  ClassList.prototype.remove = function(name) {
-    if ('[object RegExp]' == toString.call(name)) {
-      return this.removeMatching(name);
-    }
-
-    this.list.remove(name);
-    return this;
-  };
-
-  /**
-    * Remove all classes matching `re`.
-    *
-    * @param {RegExp} re
-    * @return {ClassList}
-    * @api private
-    */
-
-  ClassList.prototype.removeMatching = function(re) {
-    const arr = this.array();
-    for (let i = 0; i < arr.length; i++) {
-      if (re.test(arr[i])) {
-        this.remove(arr[i]);
-      }
-    }
-    return this;
-  };
-
-  /**
-    * Toggle class `name`, can force state via `force`.
-    *
-    * For browsers that support classList, but do not support `force` yet,
-    * the mistake will be detected and corrected.
-    *
-    * @param {String} name
-    * @param {Boolean} force
-    * @return {ClassList}
-    * @api public
-    */
-
-  ClassList.prototype.toggle = function(name, force) {
-    if ('undefined' !== typeof force) {
-      if (force !== this.list.toggle(name, force)) {
-        this.list.toggle(name); // toggle again to correct
-      }
-    } else {
-      this.list.toggle(name);
-    }
-    return this;
-  };
-
-  /**
-    * Return an array of classes.
-    *
-    * @return {Array}
-    * @api public
-    */
-
-  ClassList.prototype.array = function() {
-    return Array.from(this.list);
-  };
-
-  /**
-    * Check if class `name` is present.
-    *
-    * @param {String} name
-    * @return {ClassList}
-    * @api public
-    */
-
-  ClassList.prototype.has =
-   ClassList.prototype.contains = function(name) {
-     return this.list.contains(name);
-   };
-
-  function remove$1(element) {
-    var parent = element.parentNode;
-
-    if (parent) {
-      parent.removeChild(element);
-    }
-
-    return element;
-  }
-
-  /**
-   * Clear utility
-   */
-
-  /**
-   * Removes all children from the given element
-   *
-   * @param  {DOMElement} element
-   * @return {DOMElement} the element (for chaining)
-   */
-  function clear(element) {
-    var child;
-
-    while ((child = element.firstChild)) {
-      remove$1(child);
-    }
-
-    return element;
-  }
-
-  var ns = {
-    svg: 'http://www.w3.org/2000/svg'
-  };
-
-  /**
-   * DOM parsing utility
-   */
-
-  var SVG_START = '<svg xmlns="' + ns.svg + '"';
-
-  function parse(svg) {
-
-    var unwrap = false;
-
-    // ensure we import a valid svg document
-    if (svg.substring(0, 4) === '<svg') {
-      if (svg.indexOf(ns.svg) === -1) {
-        svg = SVG_START + svg.substring(4);
-      }
-    } else {
-
-      // namespace svg
-      svg = SVG_START + '>' + svg + '</svg>';
-      unwrap = true;
-    }
-
-    var parsed = parseDocument(svg);
-
-    if (!unwrap) {
-      return parsed;
-    }
-
-    var fragment = document.createDocumentFragment();
-
-    var parent = parsed.firstChild;
-
-    while (parent.firstChild) {
-      fragment.appendChild(parent.firstChild);
-    }
-
-    return fragment;
-  }
-
-  function parseDocument(svg) {
-
-    var parser;
-
-    // parse
-    parser = new DOMParser();
-    parser.async = false;
-
-    return parser.parseFromString(svg, 'text/xml');
-  }
+  }, [componentEvent]);
 
   /**
-   * Create utility for SVG elements
+   * Module dependencies.
    */
 
-
   /**
-   * 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
+   * Delegate event `type` to `selector`
+   * and invoke `fn(e)`. A callback function
+   * is returned which may be passed to `.unbind()`.
    *
-   * @returns {SVGElement}
+   * @param {Element} el
+   * @param {String} selector
+   * @param {String} type
+   * @param {Function} fn
+   * @param {Boolean} capture
+   * @return {Function}
+   * @api public
    */
-  function create$1(name, attrs) {
-    var element;
 
-    if (name.charAt(0) === '<') {
-      element = parse(name).firstChild;
-      element = document.importNode(element, true);
-    } else {
-      element = document.createElementNS(ns.svg, name);
-    }
+  // Some events don't bubble, so we want to bind to the capture phase instead
+  // when delegating.
+  var forceCaptureEvents = [ 'focus', 'blur' ];
 
-    if (attrs) {
-      attr(element, attrs);
+  function bind(el, selector, type, fn, capture) {
+    if (forceCaptureEvents.indexOf(type) !== -1) {
+      capture = true;
     }
 
-    return element;
+    return event.bind(el, type, function(e) {
+      var target = e.target || e.srcElement;
+      e.delegateTarget = closest(target, selector, true);
+      if (e.delegateTarget) {
+        fn.call(el, e);
+      }
+    }, capture);
   }
 
   /**
-   * Serialization util
+   * Unbind event `type`'s callback `fn`.
+   *
+   * @param {Element} el
+   * @param {String} type
+   * @param {Function} fn
+   * @param {Boolean} capture
+   * @api public
    */
-
-  var TEXT_ENTITIES = /([&<>]{1})/g;
-  var ATTR_ENTITIES = /([\n\r"]{1})/g;
-
-  var ENTITY_REPLACEMENT = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '\''
-  };
-
-  function escape$1(str, pattern) {
-
-    function replaceFn(match, entity) {
-      return ENTITY_REPLACEMENT[entity] || entity;
+  function unbind(el, type, fn, capture) {
+    if (forceCaptureEvents.indexOf(type) !== -1) {
+      capture = true;
     }
 
-    return str.replace(pattern, replaceFn);
+    return event.unbind(el, type, fn, capture);
   }
 
-  function serialize(node, output) {
-
-    var i, len, attrMap, attrNode, childNodes;
+  var delegate = {
+    bind,
+    unbind
+  };
 
-    switch (node.nodeType) {
+  /**
+   * Expose `parse`.
+   */
 
-    // TEXT
-    case 3:
+  var domify = parse;
 
-      // replace special XML characters
-      output.push(escape$1(node.textContent, TEXT_ENTITIES));
-      break;
+  /**
+   * Tests for browser support.
+   */
 
-    // ELEMENT
-    case 1:
-      output.push('<', node.tagName);
+  var innerHTMLBug = false;
+  var bugTestDiv;
+  if (typeof document !== 'undefined') {
+    bugTestDiv = document.createElement('div');
+    // Setup
+    bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+    // Make sure that link elements get serialized correctly by innerHTML
+    // This requires a wrapper element in IE
+    innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+    bugTestDiv = undefined;
+  }
 
-      if (node.hasAttributes()) {
-        attrMap = node.attributes;
-        for (i = 0, len = attrMap.length; i < len; ++i) {
-          attrNode = attrMap.item(i);
-          output.push(' ', attrNode.name, '="', escape$1(attrNode.value, ATTR_ENTITIES), '"');
-        }
-      }
+  /**
+   * Wrap map from jquery.
+   */
 
-      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;
+  var map = {
+    legend: [1, '<fieldset>', '</fieldset>'],
+    tr: [2, '<table><tbody>', '</tbody></table>'],
+    col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+    // for script/link/style tags to work in IE6-8, you have to wrap
+    // in a div with a non-whitespace character in front, ha!
+    _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+  };
 
-    // COMMENT
-    case 8:
-      output.push('<!--', escape$1(node.nodeValue, TEXT_ENTITIES), '-->');
-      break;
+  map.td =
+  map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
 
-    // CDATA
-    case 4:
-      output.push('<![CDATA[', node.nodeValue, ']]>');
-      break;
+  map.option =
+  map.optgroup = [1, '<select multiple="multiple">', '</select>'];
 
-    default:
-      throw new Error('unable to handle node ' + node.nodeType);
-    }
+  map.thead =
+  map.tbody =
+  map.colgroup =
+  map.caption =
+  map.tfoot = [1, '<table>', '</table>'];
 
-    return output;
-  }
+  map.polyline =
+  map.ellipse =
+  map.polygon =
+  map.circle =
+  map.text =
+  map.line =
+  map.path =
+  map.rect =
+  map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
 
   /**
-   * innerHTML like functionality for SVG elements.
-   * based on innerSVG (https://code.google.com/p/innersvg)
+   * 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(html, doc) {
+    if ('string' != typeof html) throw new TypeError('String expected');
 
-  function set(element, svg) {
-
-    var parsed = parse(svg);
+    // default to the global `document` object
+    if (!doc) doc = document;
 
-    // clear element contents
-    clear(element);
+    // tag name
+    var m = /<([\w:]+)/.exec(html);
+    if (!m) return doc.createTextNode(html);
 
-    if (!svg) {
-      return;
-    }
+    html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
 
-    if (!isFragment(parsed)) {
+    var tag = m[1];
 
-      // extract <svg> from parsed document
-      parsed = parsed.documentElement;
+    // body support
+    if (tag == 'body') {
+      var el = doc.createElement('html');
+      el.innerHTML = html;
+      return el.removeChild(el.lastChild);
     }
 
-    var nodes = slice$1(parsed.childNodes);
+    // wrap map
+    var wrap = Object.prototype.hasOwnProperty.call(map, tag) ? map[tag] : map._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;
 
-    // import + append each node
-    for (var i = 0; i < nodes.length; i++) {
-      appendTo(nodes[i], element);
+    // one element
+    if (el.firstChild == el.lastChild) {
+      return el.removeChild(el.firstChild);
     }
 
-  }
-
-  function get(element) {
-    var child = element.firstChild,
-        output = [];
-
-    while (child) {
-      serialize(child, output);
-      child = child.nextSibling;
+    // several elements
+    var fragment = doc.createDocumentFragment();
+    while (el.firstChild) {
+      fragment.appendChild(el.removeChild(el.firstChild));
     }
 
-    return output.join('');
+    return fragment;
   }
 
-  function isFragment(node) {
-    return node.nodeName === '#document-fragment';
-  }
+  var domify$1 = domify;
 
-  function innerSVG(element, svg) {
+  function query(selector, el) {
+    el = el || document;
 
-    if (svg !== undefined) {
+    return el.querySelector(selector);
+  }
 
-      try {
-        set(element, svg);
-      } catch (e) {
-        throw new Error('error parsing SVG: ' + e.message);
-      }
+  function all(selector, el) {
+    el = el || document;
 
-      return element;
-    } else {
-      return get(element);
-    }
+    return el.querySelectorAll(selector);
   }
 
-
-  function slice$1(arr) {
-    return Array.prototype.slice.call(arr);
+  function remove$1(el) {
+    el.parentNode && el.parentNode.removeChild(el);
   }
 
   /**
@@ -2731,11 +2309,11 @@
 
       var marker = create$1('marker');
 
-      attr(options.element, attrs);
+      attr$1(options.element, attrs);
 
       append(marker, options.element);
 
-      attr(marker, {
+      attr$1(marker, {
         id: id,
         viewBox: '0 0 20 20',
         refX: ref.x,
@@ -2778,7 +2356,7 @@
 
       if (type === 'sequenceflow-end') {
         var sequenceflowEnd = create$1('path');
-        attr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+        attr$1(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
 
         addMarker(id, {
           element: sequenceflowEnd,
@@ -2793,7 +2371,7 @@
 
       if (type === 'messageflow-start') {
         var messageflowStart = create$1('circle');
-        attr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
+        attr$1(messageflowStart, { cx: 6, cy: 6, r: 3.5 });
 
         addMarker(id, {
           element: messageflowStart,
@@ -2807,7 +2385,7 @@
 
       if (type === 'messageflow-end') {
         var messageflowEnd = create$1('path');
-        attr(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
+        attr$1(messageflowEnd, { d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z' });
 
         addMarker(id, {
           element: messageflowEnd,
@@ -2822,7 +2400,7 @@
 
       if (type === 'association-start') {
         var associationStart = create$1('path');
-        attr(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
+        attr$1(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });
 
         addMarker(id, {
           element: associationStart,
@@ -2838,7 +2416,7 @@
 
       if (type === 'association-end') {
         var associationEnd = create$1('path');
-        attr(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
+        attr$1(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });
 
         addMarker(id, {
           element: associationEnd,
@@ -2854,7 +2432,7 @@
 
       if (type === 'conditional-flow-marker') {
         var conditionalflowMarker = create$1('path');
-        attr(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
+        attr$1(conditionalflowMarker, { d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z' });
 
         addMarker(id, {
           element: conditionalflowMarker,
@@ -2869,7 +2447,7 @@
 
       if (type === 'conditional-default-flow-marker') {
         var conditionaldefaultflowMarker = create$1('path');
-        attr(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
+        attr$1(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });
 
         addMarker(id, {
           element: conditionaldefaultflowMarker,
@@ -2905,12 +2483,12 @@
           cy = height / 2;
 
       var circle = create$1('circle');
-      attr(circle, {
+      attr$1(circle, {
         cx: cx,
         cy: cy,
         r: Math.round((width + height) / 4 - offset)
       });
-      attr(circle, attrs);
+      attr$1(circle, attrs);
 
       append(parentGfx, circle);
 
@@ -2933,7 +2511,7 @@
       });
 
       var rect = create$1('rect');
-      attr(rect, {
+      attr$1(rect, {
         x: offset,
         y: offset,
         width: width - offset * 2,
@@ -2941,7 +2519,7 @@
         rx: r,
         ry: r
       });
-      attr(rect, attrs);
+      attr$1(rect, attrs);
 
       append(parentGfx, rect);
 
@@ -2966,10 +2544,10 @@
       });
 
       var polygon = create$1('polygon');
-      attr(polygon, {
+      attr$1(polygon, {
         points: pointsString
       });
-      attr(polygon, attrs);
+      attr$1(polygon, attrs);
 
       append(parentGfx, polygon);
 
@@ -2998,8 +2576,8 @@
       });
 
       var path = create$1('path');
-      attr(path, { d: d });
-      attr(path, attrs);
+      attr$1(path, { d: d });
+      attr$1(path, attrs);
 
       append(parentGfx, path);
 
@@ -3087,7 +2665,7 @@
 
       var text = textRenderer.createText(label || '', options);
 
-      classes(text).add('djs-label');
+      classes$1(text).add('djs-label');
 
       append(parentGfx, text);
 
@@ -3699,7 +3277,7 @@
         });
 
         var businessHeaderPath = drawPath(parentGfx, headerPathData);
-        attr(businessHeaderPath, {
+        attr$1(businessHeaderPath, {
           strokeWidth: 1,
           fill: getFillColor(element, '#aaaaaa'),
           stroke: getStrokeColor(element, defaultStrokeColor)
@@ -3713,7 +3291,7 @@
         });
 
         var businessPath = drawPath(parentGfx, headerData);
-        attr(businessPath, {
+        attr$1(businessPath, {
           strokeWidth: 1,
           stroke: getStrokeColor(element, defaultStrokeColor)
         });
@@ -3731,7 +3309,7 @@
         var expanded = isExpanded(element);
 
         if (isEventSubProcess(element)) {
-          attr(rect, {
+          attr$1(rect, {
             strokeDasharray: '1,2'
           });
         }
@@ -3953,7 +3531,7 @@
           });
 
           var parallelPath = drawPath(parentGfx, pathData);
-          attr(parallelPath, {
+          attr$1(parallelPath, {
             strokeWidth: 1,
             fill: 'none'
           });
@@ -3961,7 +3539,7 @@
 
           if (!instantiate) {
             var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-            attr(innerCircle, {
+            attr$1(innerCircle, {
               strokeWidth: 1,
               fill: 'none',
               stroke: getStrokeColor(element, defaultStrokeColor)
@@ -4006,7 +3584,7 @@
 
           // conditional flow marker
           if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-            attr(path, {
+            attr$1(path, {
               markerStart: marker('conditional-flow-marker', fill, stroke)
             });
           }
@@ -4014,7 +3592,7 @@
           // default marker
           if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
               source.default === sequenceFlow) {
-            attr(path, {
+            attr$1(path, {
               markerStart: marker('conditional-default-flow-marker', fill, stroke)
             });
           }
@@ -4732,9 +4310,9 @@
     var helperSvg = document.getElementById('helper-svg');
 
     if (!helperSvg) {
-      helperSvg = create$2('svg');
+      helperSvg = create$1('svg');
 
-      attr$2(helperSvg, {
+      attr$1(helperSvg, {
         id: 'helper-svg'
       });
 
@@ -4828,13 +4406,13 @@
     var maxWidth = box.width - padding.left - padding.right;
 
     // ensure correct rendering by attaching helper text node to invisible SVG
-    var helperText = create$2('text');
-    attr$2(helperText, { x: 0, y: 0 });
-    attr$2(helperText, style);
+    var helperText = create$1('text');
+    attr$1(helperText, { x: 0, y: 0 });
+    attr$1(helperText, style);
 
     var helperSvg = getHelperSvg();
 
-    append$1(helperSvg, helperText);
+    append(helperSvg, helperText);
 
     while (lines.length) {
       layouted.push(layoutNext(lines, maxWidth, helperText));
@@ -4863,9 +4441,9 @@
     y -= (lineHeight || layouted[0].height) / 4;
 
 
-    var textElement = create$2('text');
+    var textElement = create$1('text');
 
-    attr$2(textElement, style);
+    attr$1(textElement, style);
 
     // layout each line taking into account that parent
     // shape might resize to fit text size
@@ -4892,15 +4470,15 @@
           - line.width) / 2 + padding.left), 0);
       }
 
-      var tspan = create$2('tspan');
-      attr$2(tspan, { x: x, y: y });
+      var tspan = create$1('tspan');
+      attr$1(tspan, { x: x, y: y });
 
       tspan.textContent = line.text;
 
-      append$1(textElement, tspan);
+      append(textElement, tspan);
     });
 
-    remove$3(helperText);
+    remove$2(helperText);
 
     var dimensions = {
       width: maxLineWidth,
@@ -6477,13 +6055,13 @@
         throw new Error('invalid hit type <' + type + '>');
       }
 
-      attr$2(hit, attrs);
+      attr$1(hit, attrs);
 
       return hit;
     }
 
     function appendHit(gfx, hit) {
-      append$1(gfx, hit);
+      append(gfx, hit);
     }
 
 
@@ -6497,7 +6075,7 @@
     this.removeHits = function(gfx) {
       var hits = all('.djs-hit', gfx);
 
-      forEach$1(hits, remove$3);
+      forEach$1(hits, remove$2);
     };
 
     /**
@@ -6561,11 +6139,11 @@
         y: 0
       }, attrs);
 
-      var hit = create$2('rect');
+      var hit = create$1('rect');
 
       applyStyle(hit, type);
 
-      attr$2(hit, attrs);
+      attr$1(hit, attrs);
 
       appendHit(gfx, hit);
 
@@ -6591,7 +6169,7 @@
       if (element.waypoints) {
         updateLine(hit, element.waypoints);
       } else {
-        attr$2(hit, {
+        attr$1(hit, {
           width: element.width,
           height: element.height
         });
@@ -6799,9 +6377,9 @@
     var self = this;
 
     function createOutline(gfx, bounds) {
-      var outline = create$2('rect');
+      var outline = create$1('rect');
 
-      attr$2(outline, assign$1({
+      attr$1(outline, assign$1({
         x: 10,
         y: 10,
         rx: 3,
@@ -6809,7 +6387,7 @@
         height: 100
       }, OUTLINE_STYLE));
 
-      append$1(gfx, outline);
+      append(gfx, outline);
 
       return outline;
     }
@@ -6853,7 +6431,7 @@
    */
   Outline.prototype.updateShapeOutline = function(outline, element) {
 
-    attr$2(outline, {
+    attr$1(outline, {
       x: -this.offset,
       y: -this.offset,
       width: element.width + this.offset * 2,
@@ -6874,7 +6452,7 @@
 
     var bbox = getBBox(connection);
 
-    attr$2(outline, {
+    attr$1(outline, {
       x: bbox.x - this.offset,
       y: bbox.y - this.offset,
       width: bbox.width + this.offset * 2,
@@ -7078,13 +6656,13 @@
   SelectionVisuals.prototype._updateSelectionOutline = function(selection) {
     var layer = this._canvas.getLayer('selectionOutline');
 
-    clear$2(layer);
+    clear$1(layer);
 
     var enabled = selection.length > 1;
 
     var container = this._canvas.getContainer();
 
-    classes$2(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+    classes$1(container)[enabled ? 'add' : 'remove']('djs-multi-select');
 
     if (!enabled) {
       return;
@@ -7092,15 +6670,15 @@
 
     var bBox = addSelectionOutlinePadding(getBBox(selection));
 
-    var rect = create$2('rect');
+    var rect = create$1('rect');
 
-    attr$2(rect, assign$1({
+    attr$1(rect, assign$1({
       rx: 3
     }, bBox));
 
-    classes$2(rect).add('djs-selection-outline');
+    classes$1(rect).add('djs-selection-outline');
 
-    append$1(layer, rect);
+    append(layer, rect);
   };
 
   // helpers //////////
@@ -7509,8 +7087,8 @@
       var container = self._getOverlayContainer(overlay.element, true);
 
       if (overlay) {
-        remove$2(overlay.html);
-        remove$2(overlay.htmlContainer);
+        remove$1(overlay.html);
+        remove$1(overlay.htmlContainer);
 
         delete overlay.htmlContainer;
         delete overlay.element;
@@ -7543,7 +7121,7 @@
 
     this._overlayContainers = [];
 
-    clear$1(this._overlayRoot);
+    clear(this._overlayRoot);
   };
 
   Overlays.prototype._updateOverlayContainer = function(container) {
@@ -7564,7 +7142,7 @@
 
     setPosition(html, x, y);
 
-    attr$1(container.html, 'data-container-id', element.id);
+    attr(container.html, 'data-container-id', element.id);
   };
 
 
@@ -7691,7 +7269,7 @@
     htmlContainer.appendChild(html);
 
     if (overlay.type) {
-      classes$1(htmlContainer).add('djs-overlay-' + overlay.type);
+      classes(htmlContainer).add('djs-overlay-' + overlay.type);
     }
 
     var elementRoot = this._canvas.findRoot(element);
@@ -7820,7 +7398,7 @@
       var container = self._getOverlayContainer(element);
 
       if (container) {
-        remove$2(container.html);
+        remove$1(container.html);
         var i = self._overlayContainers.indexOf(container);
         if (i !== -1) {
           self._overlayContainers.splice(i, 1);
@@ -7851,7 +7429,7 @@
     eventBus.on('element.marker.update', function(e) {
       var container = self._getOverlayContainer(e.element, true);
       if (container) {
-        classes$1(container.html)[e.add ? 'add' : 'remove'](e.marker);
+        classes(container.html)[e.add ? 'add' : 'remove'](e.marker);
       }
     });
 
@@ -8316,7 +7894,7 @@
   function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
     var breadcrumbs = domify$1('<ul class="bjs-breadcrumbs"></ul>');
     var container = canvas.getContainer();
-    var containerClasses = classes$1(container);
+    var containerClasses = classes(container);
     container.appendChild(breadcrumbs);
 
     var boParents = [];
@@ -8872,7 +8450,7 @@
     }
 
     var hasContent = bo && bo.flowElements && bo.flowElements.length;
-    classes$1(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+    classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
   };
 
   /**
@@ -9424,9 +9002,9 @@
   };
 
   DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
-    var rect = create$2('rect');
+    var rect = create$1('rect');
 
-    attr$2(rect, {
+    attr$1(rect, {
       x: 0,
       y: 0,
       width: element.width || 0,
@@ -9434,12 +9012,12 @@
     });
 
     if (isFrameElement(element)) {
-      attr$2(rect, assign$1({}, this.FRAME_STYLE, attrs || {}));
+      attr$1(rect, assign$1({}, this.FRAME_STYLE, attrs || {}));
     } else {
-      attr$2(rect, assign$1({}, this.SHAPE_STYLE, attrs || {}));
+      attr$1(rect, assign$1({}, this.SHAPE_STYLE, attrs || {}));
     }
 
-    append$1(visuals, rect);
+    append(visuals, rect);
 
     return rect;
   };
@@ -9447,7 +9025,7 @@
   DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
     var line = createLine(connection.waypoints, assign$1({}, this.CONNECTION_STYLE, attrs || {}));
-    append$1(visuals, line);
+    append(visuals, line);
 
     return line;
   };
@@ -9670,7 +9248,7 @@
     // this way we can always get the correct container size
     // (this is impossible for <svg> elements at the moment)
     const parent = document.createElement('div');
-    parent.setAttribute('class', 'djs-container');
+    parent.setAttribute('class', 'djs-container djs-parent');
 
     assign(parent, {
       position: 'relative',
@@ -9685,8 +9263,8 @@
   }
 
   function createGroup(parent, cls, childIndex) {
-    const group = create$2('g');
-    classes$2(group).add(cls);
+    const group = create$1('g');
+    classes$1(group).add(cls);
 
     const index = childIndex !== undefined ? childIndex : parent.childNodes.length - 1;
 
@@ -9764,10 +9342,10 @@
     // html container
     const container = this._container = createContainer(config);
 
-    const svg = this._svg = create$2('svg');
-    attr$2(svg, { width: '100%', height: '100%' });
+    const svg = this._svg = create$1('svg');
+    attr$1(svg, { width: '100%', height: '100%' });
 
-    append$1(container, svg);
+    append(container, svg);
 
     const viewport = this._viewport = createGroup(svg, 'viewport');
 
@@ -10005,7 +9583,7 @@
       return group;
     }
 
-    remove$3(group);
+    remove$2(group);
 
     layer.visible = false;
 
@@ -10020,7 +9598,7 @@
     if (layer) {
       delete this._layers[name];
 
-      remove$3(layer.group);
+      remove$2(layer.group);
     }
   };
 
@@ -10113,9 +9691,9 @@
 
         // invoke either addClass or removeClass based on mode
         if (add) {
-          classes$2(gfx).add(marker);
+          classes$1(gfx).add(marker);
         } else {
-          classes$2(gfx).remove(marker);
+          classes$1(gfx).remove(marker);
         }
       }
     });
@@ -10181,7 +9759,7 @@
 
     const gfx = this.getGraphics(element);
 
-    return classes$2(gfx).has(marker);
+    return classes$1(gfx).has(marker);
   };
 
   /**
@@ -11079,10 +10657,10 @@
     this._validateId(id);
 
     // associate dom node with element
-    attr$2(gfx, ELEMENT_ID, id);
+    attr$1(gfx, ELEMENT_ID, id);
 
     if (secondaryGfx) {
-      attr$2(secondaryGfx, ELEMENT_ID, id);
+      attr$1(secondaryGfx, ELEMENT_ID, id);
     }
 
     this._elements[id] = { element: element, gfx: gfx, secondaryGfx: secondaryGfx };
@@ -11091,7 +10669,7 @@
   /**
    * Removes an element from the registry.
    *
-   * @param {djs.model.Base} element
+   * @param {string|djs.model.Base} element
    */
   ElementRegistry.prototype.remove = function(element) {
     var elements = this._elements,
@@ -11101,10 +10679,10 @@
     if (container) {
 
       // unset element id on gfx
-      attr$2(container.gfx, ELEMENT_ID, '');
+      attr$1(container.gfx, ELEMENT_ID, '');
 
       if (container.secondaryGfx) {
-        attr$2(container.secondaryGfx, ELEMENT_ID, '');
+        attr$1(container.secondaryGfx, ELEMENT_ID, '');
       }
 
       delete elements[id];
@@ -11114,7 +10692,7 @@
   /**
    * Update the id of an element
    *
-   * @param {djs.model.Base} element
+   * @param {string|djs.model.Base} element
    * @param {string} newId
    */
   ElementRegistry.prototype.updateId = function(element, newId) {
@@ -11143,7 +10721,7 @@
   /**
    * Update the graphics of an element
    *
-   * @param {djs.model.Base} element
+   * @param {string|djs.model.Base} element
    * @param {SVGElement} gfx
    * @param {boolean} [secondary=false] whether to update the secondary connected element
    */
@@ -11159,7 +10737,7 @@
     }
 
     if (gfx) {
-      attr$2(gfx, ELEMENT_ID, id);
+      attr$1(gfx, ELEMENT_ID, id);
     }
 
     return gfx;
@@ -11184,7 +10762,7 @@
     if (typeof filter === 'string') {
       id = filter;
     } else {
-      id = filter && attr$2(filter, ELEMENT_ID);
+      id = filter && attr$1(filter, ELEMENT_ID);
     }
 
     var container = this._elements[id];
@@ -12467,10 +12045,10 @@
     } else {
       childrenGfx = getChildren(gfx);
       if (!childrenGfx) {
-        childrenGfx = create$2('g');
-        classes$2(childrenGfx).add('djs-children');
+        childrenGfx = create$1('g');
+        classes$1(childrenGfx).add('djs-children');
 
-        append$1(gfx.parentNode, childrenGfx);
+        append(gfx.parentNode, childrenGfx);
       }
     }
 
@@ -12484,7 +12062,7 @@
   GraphicsFactory.prototype._clear = function(gfx) {
     var visual = getVisual(gfx);
 
-    clear$1(visual);
+    clear(visual);
 
     return visual;
   };
@@ -12519,31 +12097,31 @@
   GraphicsFactory.prototype._createContainer = function(
       type, childrenGfx, parentIndex, isFrame
   ) {
-    var outerGfx = create$2('g');
-    classes$2(outerGfx).add('djs-group');
+    var outerGfx = create$1('g');
+    classes$1(outerGfx).add('djs-group');
 
     // insert node at position
     if (typeof parentIndex !== 'undefined') {
       prependTo(outerGfx, childrenGfx, childrenGfx.childNodes[parentIndex]);
     } else {
-      append$1(childrenGfx, outerGfx);
+      append(childrenGfx, outerGfx);
     }
 
-    var gfx = create$2('g');
-    classes$2(gfx).add('djs-element');
-    classes$2(gfx).add('djs-' + type);
+    var gfx = create$1('g');
+    classes$1(gfx).add('djs-element');
+    classes$1(gfx).add('djs-' + type);
 
     if (isFrame) {
-      classes$2(gfx).add('djs-frame');
+      classes$1(gfx).add('djs-frame');
     }
 
-    append$1(outerGfx, gfx);
+    append(outerGfx, gfx);
 
     // create visual
-    var visual = create$2('g');
-    classes$2(visual).add('djs-visual');
+    var visual = create$1('g');
+    classes$1(visual).add('djs-visual');
 
-    append$1(gfx, visual);
+    append(gfx, visual);
 
     return gfx;
   };
@@ -12635,9 +12213,9 @@
     }
 
     if (element.hidden) {
-      attr$2(gfx, 'display', 'none');
+      attr$1(gfx, 'display', 'none');
     } else {
-      attr$2(gfx, 'display', 'block');
+      attr$1(gfx, 'display', 'block');
     }
   };
 
@@ -12645,7 +12223,7 @@
     var gfx = this._elementRegistry.getGraphics(element);
 
     // remove
-    remove$3(gfx.parentNode);
+    remove$2(gfx.parentNode);
   };
 
 
@@ -21662,7 +21240,7 @@
     Diagram.prototype.destroy.call(this);
 
     // dom detach
-    remove$2(this._container);
+    remove$1(this._container);
   };
 
   /**