bpmn-js/dist/bpmn-modeler.development.js

/*!
 * bpmn-js - bpmn-modeler v9.4.0
 *
 * Copyright (c) 2014-present, camunda Services GmbH
 *
 * Released under the bpmn.io license
 * http://bpmn.io/license
 *
 * Source Code: https://github.com/bpmn-io/bpmn-js
 *
 * Date: 2022-08-22
 */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BpmnJS = factory());
})(this, (function () { 'use strict';

  function e(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}

  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }

  var hat_1 = createCommonjsModule(function (module) {
  var hat = module.exports = function (bits, base) {
      if (!base) base = 16;
      if (bits === undefined) bits = 128;
      if (bits <= 0) return '0';
      
      var digits = Math.log(Math.pow(2, bits)) / Math.log(base);
      for (var i = 2; digits === Infinity; i *= 2) {
          digits = Math.log(Math.pow(2, bits / i)) / Math.log(base) * i;
      }
      
      var rem = digits - Math.floor(digits);
      
      var res = '';
      
      for (var i = 0; i < Math.floor(digits); i++) {
          var x = Math.floor(Math.random() * base).toString(base);
          res = x + res;
      }
      
      if (rem) {
          var b = Math.pow(base, rem);
          var x = Math.floor(Math.random() * b).toString(base);
          res = x + res;
      }
      
      var parsed = parseInt(res, base);
      if (parsed !== Infinity && parsed >= Math.pow(2, bits)) {
          return hat(bits, base)
      }
      else return res;
  };

  hat.rack = function (bits, base, expandBy) {
      var fn = function (data) {
          var iters = 0;
          do {
              if (iters ++ > 10) {
                  if (expandBy) bits += expandBy;
                  else throw new Error('too many ID collisions, use more bits')
              }
              
              var id = hat(bits, base);
          } while (Object.hasOwnProperty.call(hats, id));
          
          hats[id] = data;
          return id;
      };
      var hats = fn.hats = {};
      
      fn.get = function (id) {
          return fn.hats[id];
      };
      
      fn.set = function (id, value) {
          fn.hats[id] = value;
          return fn;
      };
      
      fn.bits = bits || 128;
      fn.base = base || 16;
      return fn;
  };
  });

  /**
   * Create a new id generator / cache instance.
   *
   * You may optionally provide a seed that is used internally.
   *
   * @param {Seed} seed
   */

  function Ids(seed) {
    if (!(this instanceof Ids)) {
      return new Ids(seed);
    }

    seed = seed || [128, 36, 1];
    this._seed = seed.length ? hat_1.rack(seed[0], seed[1], seed[2]) : seed;
  }
  /**
   * Generate a next id.
   *
   * @param {Object} [element] element to bind the id to
   *
   * @return {String} id
   */

  Ids.prototype.next = function (element) {
    return this._seed(element || true);
  };
  /**
   * Generate a next id with a given prefix.
   *
   * @param {Object} [element] element to bind the id to
   *
   * @return {String} id
   */


  Ids.prototype.nextPrefixed = function (prefix, element) {
    var id;

    do {
      id = prefix + this.next(true);
    } while (this.assigned(id)); // claim {prefix}{random}


    this.claim(id, element); // return

    return id;
  };
  /**
   * Manually claim an existing id.
   *
   * @param {String} id
   * @param {String} [element] element the id is claimed by
   */


  Ids.prototype.claim = function (id, element) {
    this._seed.set(id, element || true);
  };
  /**
   * Returns true if the given id has already been assigned.
   *
   * @param  {String} id
   * @return {Boolean}
   */


  Ids.prototype.assigned = function (id) {
    return this._seed.get(id) || false;
  };
  /**
   * Unclaim an id.
   *
   * @param  {String} id the id to unclaim
   */


  Ids.prototype.unclaim = function (id) {
    delete this._seed.hats[id];
  };
  /**
   * Clear all claimed ids.
   */


  Ids.prototype.clear = function () {
    var hats = this._seed.hats,
        id;

    for (id in hats) {
      this.unclaim(id);
    }
  };

  /**
   * Flatten array, one level deep.
   *
   * @param {Array<?>} arr
   *
   * @return {Array<?>}
   */
  function flatten(arr) {
    return Array.prototype.concat.apply([], arr);
  }

  var nativeToString$1 = Object.prototype.toString;
  var nativeHasOwnProperty$1 = Object.prototype.hasOwnProperty;
  function isUndefined$2(obj) {
    return obj === undefined;
  }
  function isDefined(obj) {
    return obj !== undefined;
  }
  function isNil(obj) {
    return obj == null;
  }
  function isArray$3(obj) {
    return nativeToString$1.call(obj) === '[object Array]';
  }
  function isObject(obj) {
    return nativeToString$1.call(obj) === '[object Object]';
  }
  function isNumber(obj) {
    return nativeToString$1.call(obj) === '[object Number]';
  }
  function isFunction(obj) {
    var tag = nativeToString$1.call(obj);
    return tag === '[object Function]' || tag === '[object AsyncFunction]' || tag === '[object GeneratorFunction]' || tag === '[object AsyncGeneratorFunction]' || tag === '[object Proxy]';
  }
  function isString(obj) {
    return nativeToString$1.call(obj) === '[object String]';
  }
  /**
   * Ensure collection is an array.
   *
   * @param {Object} obj
   */

  function ensureArray(obj) {
    if (isArray$3(obj)) {
      return;
    }

    throw new Error('must supply array');
  }
  /**
   * Return true, if target owns a property with the given key.
   *
   * @param {Object} target
   * @param {String} key
   *
   * @return {Boolean}
   */

  function has$1(target, key) {
    return nativeHasOwnProperty$1.call(target, key);
  }

  /**
   * Find element in collection.
   *
   * @param  {Array|Object} collection
   * @param  {Function|Object} matcher
   *
   * @return {Object}
   */

  function find(collection, matcher) {
    matcher = toMatcher(matcher);
    var match;
    forEach$1(collection, function (val, key) {
      if (matcher(val, key)) {
        match = val;
        return false;
      }
    });
    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$3(collection) ? -1 : undefined;
    forEach$1(collection, function (val, key) {
      if (matcher(val, key)) {
        idx = key;
        return false;
      }
    });
    return idx;
  }
  /**
   * Find element in collection.
   *
   * @param  {Array|Object} collection
   * @param  {Function} matcher
   *
   * @return {Array} result
   */

  function filter(collection, matcher) {
    var result = [];
    forEach$1(collection, function (val, key) {
      if (matcher(val, key)) {
        result.push(val);
      }
    });
    return result;
  }
  /**
   * Iterate over collection; returning something
   * (non-undefined) will stop iteration.
   *
   * @param  {Array|Object} collection
   * @param  {Function} iterator
   *
   * @return {Object} return result that stopped the iteration
   */

  function forEach$1(collection, iterator) {
    var val, result;

    if (isUndefined$2(collection)) {
      return;
    }

    var convertKey = isArray$3(collection) ? toNum$1 : identity$1;

    for (var key in collection) {
      if (has$1(collection, key)) {
        val = collection[key];
        result = iterator(val, convertKey(key));

        if (result === false) {
          return val;
        }
      }
    }
  }
  /**
   * Return collection without element.
   *
   * @param  {Array} arr
   * @param  {Function} matcher
   *
   * @return {Array}
   */

  function without(arr, matcher) {
    if (isUndefined$2(arr)) {
      return [];
    }

    ensureArray(arr);
    matcher = toMatcher(matcher);
    return arr.filter(function (el, idx) {
      return !matcher(el, idx);
    });
  }
  /**
   * Reduce collection, returning a single result.
   *
   * @param  {Object|Array} collection
   * @param  {Function} iterator
   * @param  {Any} result
   *
   * @return {Any} result returned from last iterator
   */

  function reduce(collection, iterator, result) {
    forEach$1(collection, function (value, idx) {
      result = iterator(result, value, idx);
    });
    return result;
  }
  /**
   * Return true if every element in the collection
   * matches the criteria.
   *
   * @param  {Object|Array} collection
   * @param  {Function} matcher
   *
   * @return {Boolean}
   */

  function every(collection, matcher) {
    return !!reduce(collection, function (matches, val, key) {
      return matches && matcher(val, key);
    }, true);
  }
  /**
   * Return true if some elements in the collection
   * match the criteria.
   *
   * @param  {Object|Array} collection
   * @param  {Function} matcher
   *
   * @return {Boolean}
   */

  function some(collection, matcher) {
    return !!find(collection, matcher);
  }
  /**
   * Transform a collection into another collection
   * by piping each member through the given fn.
   *
   * @param  {Object|Array}   collection
   * @param  {Function} fn
   *
   * @return {Array} transformed collection
   */

  function map(collection, fn) {
    var result = [];
    forEach$1(collection, function (val, key) {
      result.push(fn(val, key));
    });
    return result;
  }
  /**
   * Get the collections keys.
   *
   * @param  {Object|Array} collection
   *
   * @return {Array}
   */

  function keys(collection) {
    return collection && Object.keys(collection) || [];
  }
  /**
   * Shorthand for `keys(o).length`.
   *
   * @param  {Object|Array} collection
   *
   * @return {Number}
   */

  function size(collection) {
    return keys(collection).length;
  }
  /**
   * Get the values in the collection.
   *
   * @param  {Object|Array} collection
   *
   * @return {Array}
   */

  function values(collection) {
    return map(collection, function (val) {
      return val;
    });
  }
  /**
   * Group collection members by attribute.
   *
   * @param  {Object|Array} collection
   * @param  {Function} extractor
   *
   * @return {Object} map with { attrValue => [ a, b, c ] }
   */

  function groupBy(collection, extractor) {
    var grouped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
    extractor = toExtractor(extractor);
    forEach$1(collection, function (val) {
      var discriminator = extractor(val) || '_';
      var group = grouped[discriminator];

      if (!group) {
        group = grouped[discriminator] = [];
      }

      group.push(val);
    });
    return grouped;
  }
  function uniqueBy(extractor) {
    extractor = toExtractor(extractor);
    var grouped = {};

    for (var _len = arguments.length, collections = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      collections[_key - 1] = arguments[_key];
    }

    forEach$1(collections, function (c) {
      return groupBy(c, extractor, grouped);
    });
    var result = map(grouped, function (val, key) {
      return val[0];
    });
    return result;
  }
  var unionBy = uniqueBy;
  /**
   * Sort collection by criteria.
   *
   * @param  {Object|Array} collection
   * @param  {String|Function} extractor
   *
   * @return {Array}
   */

  function sortBy(collection, extractor) {
    extractor = toExtractor(extractor);
    var sorted = [];
    forEach$1(collection, function (value, key) {
      var disc = extractor(value, key);
      var entry = {
        d: disc,
        v: value
      };

      for (var idx = 0; idx < sorted.length; idx++) {
        var d = sorted[idx].d;

        if (disc < d) {
          sorted.splice(idx, 0, entry);
          return;
        }
      } // not inserted, append (!)


      sorted.push(entry);
    });
    return map(sorted, function (e) {
      return e.v;
    });
  }
  /**
   * Create an object pattern matcher.
   *
   * @example
   *
   * const matcher = matchPattern({ id: 1 });
   *
   * let element = find(elements, matcher);
   *
   * @param  {Object} pattern
   *
   * @return {Function} matcherFn
   */

  function matchPattern(pattern) {
    return function (el) {
      return every(pattern, function (val, key) {
        return el[key] === val;
      });
    };
  }

  function toExtractor(extractor) {
    return isFunction(extractor) ? extractor : function (e) {
      return e[extractor];
    };
  }

  function toMatcher(matcher) {
    return isFunction(matcher) ? matcher : function (e) {
      return e === matcher;
    };
  }

  function identity$1(arg) {
    return arg;
  }

  function toNum$1(arg) {
    return Number(arg);
  }

  /**
   * Debounce fn, calling it only once if the given time
   * elapsed between calls.
   *
   * Lodash-style the function exposes methods to `#clear`
   * and `#flush` to control internal behavior.
   *
   * @param  {Function} fn
   * @param  {Number} timeout
   *
   * @return {Function} debounced function
   */
  function debounce(fn, timeout) {
    var timer;
    var lastArgs;
    var lastThis;
    var lastNow;

    function fire(force) {
      var now = Date.now();
      var scheduledDiff = force ? 0 : lastNow + timeout - now;

      if (scheduledDiff > 0) {
        return schedule(scheduledDiff);
      }

      fn.apply(lastThis, lastArgs);
      clear();
    }

    function schedule(timeout) {
      timer = setTimeout(fire, timeout);
    }

    function clear() {
      if (timer) {
        clearTimeout(timer);
      }

      timer = lastNow = lastArgs = lastThis = undefined;
    }

    function flush() {
      if (timer) {
        fire(true);
      }

      clear();
    }

    function callback() {
      lastNow = Date.now();

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      lastArgs = args;
      lastThis = this; // ensure an execution is scheduled

      if (!timer) {
        schedule(timeout);
      }
    }

    callback.flush = flush;
    callback.cancel = clear;
    return callback;
  }
  /**
   * Bind function against target <this>.
   *
   * @param  {Function} fn
   * @param  {Object}   target
   *
   * @return {Function} bound function
   */

  function bind(fn, target) {
    return fn.bind(target);
  }

  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends.apply(this, arguments);
  }

  /**
   * Convenience wrapper for `Object.assign`.
   *
   * @param {Object} target
   * @param {...Object} others
   *
   * @return {Object} the target
   */

  function assign(target) {
    for (var _len = arguments.length, others = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      others[_key - 1] = arguments[_key];
    }

    return _extends.apply(void 0, [target].concat(others));
  }
  /**
   * Pick given properties from the target object.
   *
   * @param {Object} target
   * @param {Array} properties
   *
   * @return {Object} target
   */

  function pick(target, properties) {
    var result = {};
    var obj = Object(target);
    forEach$1(properties, function (prop) {
      if (prop in obj) {
        result[prop] = target[prop];
      }
    });
    return result;
  }
  /**
   * Pick all target properties, excluding the given ones.
   *
   * @param {Object} target
   * @param {Array} properties
   *
   * @return {Object} target
   */

  function omit(target, properties) {
    var result = {};
    var obj = Object(target);
    forEach$1(obj, function (prop, key) {
      if (properties.indexOf(key) === -1) {
        result[key] = prop;
      }
    });
    return result;
  }

  /**
   * Flatten array, one level deep.
   *
   * @param {Array<?>} arr
   *
   * @return {Array<?>}
   */

  var nativeToString = Object.prototype.toString;
  var nativeHasOwnProperty = Object.prototype.hasOwnProperty;
  function isUndefined$1(obj) {
    return obj === undefined;
  }
  function isArray$2(obj) {
    return nativeToString.call(obj) === '[object Array]';
  }
  /**
   * Return true, if target owns a property with the given key.
   *
   * @param {Object} target
   * @param {String} key
   *
   * @return {Boolean}
   */

  function has(target, key) {
    return nativeHasOwnProperty.call(target, key);
  }
  /**
   * Iterate over collection; returning something
   * (non-undefined) will stop iteration.
   *
   * @param  {Array|Object} collection
   * @param  {Function} iterator
   *
   * @return {Object} return result that stopped the iteration
   */

  function forEach(collection, iterator) {
    var val, result;

    if (isUndefined$1(collection)) {
      return;
    }

    var convertKey = isArray$2(collection) ? toNum : identity;

    for (var key in collection) {
      if (has(collection, key)) {
        val = collection[key];
        result = iterator(val, convertKey(key));

        if (result === false) {
          return val;
        }
      }
    }
  }

  function identity(arg) {
    return arg;
  }

  function toNum(arg) {
    return Number(arg);
  }

  /**
   * Assigns style attributes in a style-src compliant way.
   *
   * @param {Element} element
   * @param {...Object} styleSources
   *
   * @return {Element} the element
   */
  function assign$1(element) {
    var target = element.style;

    for (var _len = arguments.length, styleSources = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      styleSources[_key - 1] = arguments[_key];
    }

    forEach(styleSources, function (style) {
      if (!style) {
        return;
      }

      forEach(style, function (value, key) {
        target[key] = value;
      });
    });

    return element;
  }

  /**
   * Set attribute `name` to `val`, or get attr `name`.
   *
   * @param {Element} el
   * @param {String} name
   * @param {String} [val]
   * @api public
   */
  function attr$1(el, name, val) {
    // get
    if (arguments.length == 2) {
      return el.getAttribute(name);
    }

    // remove
    if (val === null) {
      return el.removeAttribute(name);
    }

    // set
    el.setAttribute(name, val);

    return el;
  }

  var indexOf$1 = [].indexOf;

  var indexof = function(arr, obj){
    if (indexOf$1) return arr.indexOf(obj);
    for (var i = 0; i < arr.length; ++i) {
      if (arr[i] === obj) return i;
    }
    return -1;
  };

  /**
   * Taken from https://github.com/component/classes
   *
   * Without the component bits.
   */

  /**
   * Whitespace regexp.
   */

  var re$1 = /\s+/;

  /**
   * toString reference.
   */

  var toString$1 = Object.prototype.toString;

  /**
   * Wrap `el` in a `ClassList`.
   *
   * @param {Element} el
   * @return {ClassList}
   * @api public
   */

  function classes$1(el) {
    return new ClassList$1(el);
  }

  /**
   * Initialize a new ClassList for `el`.
   *
   * @param {Element} el
   * @api private
   */

  function ClassList$1(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$1.prototype.add = function (name) {
    // classList
    if (this.list) {
      this.list.add(name);
      return this;
    }

    // fallback
    var arr = this.array();
    var i = indexof(arr, name);
    if (!~i) arr.push(name);
    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$1.prototype.remove = function (name) {
    if ('[object RegExp]' == toString$1.call(name)) {
      return this.removeMatching(name);
    }

    // classList
    if (this.list) {
      this.list.remove(name);
      return this;
    }

    // fallback
    var arr = this.array();
    var i = indexof(arr, name);
    if (~i) arr.splice(i, 1);
    this.el.className = arr.join(' ');
    return this;
  };

  /**
   * Remove all classes matching `re`.
   *
   * @param {RegExp} re
   * @return {ClassList}
   * @api private
   */

  ClassList$1.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$1.prototype.toggle = function (name, force) {
    // classList
    if (this.list) {
      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;
    }

    // fallback
    if ('undefined' !== typeof 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$1.prototype.array = function () {
    var className = this.el.getAttribute('class') || '';
    var str = className.replace(/^\s+|\s+$/g, '');
    var arr = str.split(re$1);
    if ('' === arr[0]) arr.shift();
    return arr;
  };

  /**
   * Check if class `name` is present.
   *
   * @param {String} name
   * @return {ClassList}
   * @api public
   */

  ClassList$1.prototype.has = ClassList$1.prototype.contains = function (name) {
    return this.list ? this.list.contains(name) : !!~indexof(this.array(), name);
  };

  /**
   * Remove all children from the given element.
   */
  function clear$1(el) {

    var c;

    while (el.childNodes.length) {
      c = el.childNodes[0];
      el.removeChild(c);
    }

    return el;
  }

  var proto = typeof Element !== 'undefined' ? Element.prototype : {};
  var vendor = proto.matches
    || proto.matchesSelector
    || proto.webkitMatchesSelector
    || proto.mozMatchesSelector
    || proto.msMatchesSelector
    || proto.oMatchesSelector;

  var matchesSelector = match;

  /**
   * Match `el` to `selector`.
   *
   * @param {Element} el
   * @param {String} selector
   * @return {Boolean}
   * @api public
   */

  function match(el, selector) {
    if (!el || el.nodeType !== 1) return false;
    if (vendor) return vendor.call(el, selector);
    var nodes = el.parentNode.querySelectorAll(selector);
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i] == el) return true;
    }
    return false;
  }

  /**
   * Closest
   *
   * @param {Element} el
   * @param {String} selector
   * @param {Boolean} checkYourSelf (optional)
   */
  function closest (element, selector, checkYourSelf) {
    var currentElem = checkYourSelf ? element : element.parentNode;

    while (currentElem && currentElem.nodeType !== document.DOCUMENT_NODE && currentElem.nodeType !== document.DOCUMENT_FRAGMENT_NODE) {

      if (matchesSelector(currentElem, selector)) {
        return currentElem;
      }

      currentElem = currentElem.parentNode;
    }

    return matchesSelector(currentElem, selector) ? currentElem : null;
  }

  var bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent',
      unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
      prefix$6 = bind$1 !== 'addEventListener' ? 'on' : '';

  /**
   * Bind `el` event `type` to `fn`.
   *
   * @param {Element} el
   * @param {String} type
   * @param {Function} fn
   * @param {Boolean} capture
   * @return {Function}
   * @api public
   */

  var bind_1 = function(el, type, fn, capture){
    el[bind$1](prefix$6 + type, fn, capture || false);
    return fn;
  };

  /**
   * Unbind `el` event `type`'s callback `fn`.
   *
   * @param {Element} el
   * @param {String} type
   * @param {Function} fn
   * @param {Boolean} capture
   * @return {Function}
   * @api public
   */

  var unbind_1 = function(el, type, fn, capture){
    el[unbind](prefix$6 + type, fn, capture || false);
    return fn;
  };

  var componentEvent = {
  	bind: bind_1,
  	unbind: unbind_1
  };

  /**
   * 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$2(el, selector, type, fn, capture) {
    if (forceCaptureEvents.indexOf(type) !== -1) {
      capture = true;
    }

    return componentEvent.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$1(el, type, fn, capture) {
    if (forceCaptureEvents.indexOf(type) !== -1) {
      capture = true;
    }

    return componentEvent.unbind(el, type, fn, capture);
  }

  var delegate = {
    bind: bind$2,
    unbind: unbind$1
  };

  /**
   * 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$1 = {
    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$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$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;
  }

  /**
   * Clear utility
   */
  function index(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 = /\s+/;

  var toString = Object.prototype.toString;

  function defined(o) {
    return typeof o !== 'undefined';
  }

  /**
   * 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) {

    // classList
    if (this.list) {
      this.list.add(name);
      return this;
    }

    // fallback
    var arr = this.array();
    var i = index(arr, name);
    if (!~i) {
      arr.push(name);
    }

    if (defined(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.prototype.remove = function(name) {
    if ('[object RegExp]' === toString.call(name)) {
      return this.removeMatching(name);
    }

    // classList
    if (this.list) {
      this.list.remove(name);
      return this;
    }

    // fallback
    var arr = this.array();
    var i = index(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.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.prototype.toggle = function(name, force) {
    // classList
    if (this.list) {
      if (defined(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(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.prototype.array = function() {
    var className = this.el.getAttribute('class') || '';
    var str = className.replace(/^\s+|\s+$/g, '');
    var arr = str.split(re);
    if ('' === arr[0]) {
      arr.shift();
    }
    return arr;
  };

  /**
   * Check if class `name` is present.
   *
   * @param {String} name
   * @return {ClassList}
   * @api public
   */

  ClassList.prototype.has =
  ClassList.prototype.contains = function(name) {
    return (
      this.list ?
        this.list.contains(name) :
        !! ~index(this.array(), 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;
  }

  function clone$1(element) {
    return element.cloneNode(true);
  }

  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');
  }

  /**
   * 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(name).firstChild;
      element = document.importNode(element, true);
    } else {
      element = document.createElementNS(ns.svg, name);
    }

    if (attrs) {
      attr(element, attrs);
    }

    return element;
  }

  /**
   * Geometry helpers
   */

  // fake node used to instantiate svg geometry elements
  var node = null;

  function getNode() {
    if (node === null) {
      node = create$1('svg');
    }

    return node;
  }

  function extend$1(object, props) {
    var i, k, keys = Object.keys(props);

    for (i = 0; (k = keys[i]); i++) {
      object[k] = props[k];
    }

    return object;
  }

  /**
   * Create matrix via args.
   *
   * @example
   *
   * createMatrix({ a: 1, b: 1 });
   * createMatrix();
   * createMatrix(1, 2, 0, 0, 30, 20);
   *
   * @return {SVGMatrix}
   */
  function createMatrix(a, b, c, d, e, f) {
    var matrix = getNode().createSVGMatrix();

    switch (arguments.length) {
    case 0:
      return matrix;
    case 1:
      return extend$1(matrix, a);
    case 6:
      return extend$1(matrix, {
        a: a,
        b: b,
        c: c,
        d: d,
        e: e,
        f: f
      });
    }
  }

  function createTransform(matrix) {
    if (matrix) {
      return getNode().createSVGTransformFromMatrix(matrix);
    } else {
      return getNode().createSVGTransform();
    }
  }

  /**
   * 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$1(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$1(parsed.childNodes);

    // import + append each node
    for (var i = 0; i < nodes.length; i++) {
      appendTo(nodes[i], element);
    }

  }

  function get$1(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$1(element, svg);
      } catch (e) {
        throw new Error('error parsing SVG: ' + e.message);
      }

      return element;
    } else {
      return get$1(element);
    }
  }


  function slice$1(arr) {
    return Array.prototype.slice.call(arr);
  }

  /**
   * transform accessor utility
   */

  function wrapMatrix(transformList, transform) {
    if (transform instanceof SVGMatrix) {
      return transformList.createSVGTransformFromMatrix(transform);
    }

    return transform;
  }


  function setTransforms(transformList, transforms) {
    var i, t;

    transformList.clear();

    for (i = 0; (t = transforms[i]); i++) {
      transformList.appendItem(wrapMatrix(transformList, t));
    }
  }

  /**
   * Get or set the transforms on the given node.
   *
   * @param {SVGElement} node
   * @param  {SVGTransform|SVGMatrix|Array<SVGTransform|SVGMatrix>} [transforms]
   *
   * @return {SVGTransform} the consolidated transform
   */
  function transform$1(node, transforms) {
    var transformList = node.transform.baseVal;

    if (transforms) {

      if (!Array.isArray(transforms)) {
        transforms = [ transforms ];
      }

      setTransforms(transformList, transforms);
    }

    return transformList.consolidate();
  }

  var CLASS_PATTERN = /^class /;


  /**
   * @param {function} fn
   *
   * @return {boolean}
   */
  function isClass(fn) {
    return CLASS_PATTERN.test(fn.toString());
  }

  /**
   * @param {any} obj
   *
   * @return {boolean}
   */
  function isArray$1(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
  }

  /**
   * @param {any} obj
   * @param {string} prop
   *
   * @return {boolean}
   */
  function hasOwnProp(obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
  }

  /**
   * @typedef {import('./index').InjectAnnotated } InjectAnnotated
   */

  /**
   * @template T
   *
   * @params {[...string[], T] | ...string[], T} args
   *
   * @return {T & InjectAnnotated}
   */
  function annotate() {
    var args = Array.prototype.slice.call(arguments);

    if (args.length === 1 && isArray$1(args[0])) {
      args = args[0];
    }

    var fn = args.pop();

    fn.$inject = args;

    return fn;
  }


  // Current limitations:
  // - can't put into "function arg" comments
  // function /* (no parenthesis like this) */ (){}
  // function abc( /* xx (no parenthesis like this) */ a, b) {}
  //
  // Just put the comment before function or inside:
  // /* (((this is fine))) */ function(a, b) {}
  // function abc(a) { /* (((this is fine))) */}
  //
  // - can't reliably auto-annotate constructor; we'll match the
  // first constructor(...) pattern found which may be the one
  // of a nested class, too.

  var CONSTRUCTOR_ARGS = /constructor\s*[^(]*\(\s*([^)]*)\)/m;
  var FN_ARGS = /^(?:async\s+)?(?:function\s*[^(]*)?(?:\(\s*([^)]*)\)|(\w+))/m;
  var FN_ARG = /\/\*([^*]*)\*\//m;

  /**
   * @param {unknown} fn
   *
   * @return {string[]}
   */
  function parseAnnotations(fn) {

    if (typeof fn !== 'function') {
      throw new Error('Cannot annotate "' + fn + '". Expected a function!');
    }

    var match = fn.toString().match(isClass(fn) ? CONSTRUCTOR_ARGS : FN_ARGS);

    // may parse class without constructor
    if (!match) {
      return [];
    }

    var args = match[1] || match[2];

    return args && args.split(',').map(function(arg) {
      var argMatch = arg.match(FN_ARG);
      return (argMatch && argMatch[1] || arg).trim();
    }) || [];
  }

  /**
   * @typedef { import('./index').ModuleDeclaration } ModuleDeclaration
   * @typedef { import('./index').ModuleDefinition } ModuleDefinition
   * @typedef { import('./index').InjectorContext } InjectorContext
   */

  /**
   * Create a new injector with the given modules.
   *
   * @param {ModuleDefinition[]} modules
   * @param {InjectorContext} [parent]
   */
  function Injector(modules, parent) {
    parent = parent || {
      get: function(name, strict) {
        currentlyResolving.push(name);

        if (strict === false) {
          return null;
        } else {
          throw error('No provider for "' + name + '"!');
        }
      }
    };

    var currentlyResolving = [];
    var providers = this._providers = Object.create(parent._providers || null);
    var instances = this._instances = Object.create(null);

    var self = instances.injector = this;

    var error = function(msg) {
      var stack = currentlyResolving.join(' -> ');
      currentlyResolving.length = 0;
      return new Error(stack ? msg + ' (Resolving: ' + stack + ')' : msg);
    };

    /**
     * Return a named service.
     *
     * @param {string} name
     * @param {boolean} [strict=true] if false, resolve missing services to null
     *
     * @return {any}
     */
    function get(name, strict) {
      if (!providers[name] && name.indexOf('.') !== -1) {
        var parts = name.split('.');
        var pivot = get(parts.shift());

        while (parts.length) {
          pivot = pivot[parts.shift()];
        }

        return pivot;
      }

      if (hasOwnProp(instances, name)) {
        return instances[name];
      }

      if (hasOwnProp(providers, name)) {
        if (currentlyResolving.indexOf(name) !== -1) {
          currentlyResolving.push(name);
          throw error('Cannot resolve circular dependency!');
        }

        currentlyResolving.push(name);
        instances[name] = providers[name][0](providers[name][1]);
        currentlyResolving.pop();

        return instances[name];
      }

      return parent.get(name, strict);
    }

    function fnDef(fn, locals) {

      if (typeof locals === 'undefined') {
        locals = {};
      }

      if (typeof fn !== 'function') {
        if (isArray$1(fn)) {
          fn = annotate(fn.slice());
        } else {
          throw new Error('Cannot invoke "' + fn + '". Expected a function!');
        }
      }

      var inject = fn.$inject || parseAnnotations(fn);
      var dependencies = inject.map(function(dep) {
        if (hasOwnProp(locals, dep)) {
          return locals[dep];
        } else {
          return get(dep);
        }
      });

      return {
        fn: fn,
        dependencies: dependencies
      };
    }

    function instantiate(Type) {
      var def = fnDef(Type);

      var fn = def.fn,
          dependencies = def.dependencies;

      // instantiate var args constructor
      var Constructor = Function.prototype.bind.apply(fn, [ null ].concat(dependencies));

      return new Constructor();
    }

    function invoke(func, context, locals) {
      var def = fnDef(func, locals);

      var fn = def.fn,
          dependencies = def.dependencies;

      return fn.apply(context, dependencies);
    }

    /**
     * @param {Injector} childInjector
     *
     * @return {Function}
     */
    function createPrivateInjectorFactory(childInjector) {
      return annotate(function(key) {
        return childInjector.get(key);
      });
    }

    /**
     * @param {ModuleDefinition[]} modules
     * @param {string[]} [forceNewInstances]
     *
     * @return {Injector}
     */
    function createChild(modules, forceNewInstances) {
      if (forceNewInstances && forceNewInstances.length) {
        var fromParentModule = Object.create(null);
        var matchedScopes = Object.create(null);

        var privateInjectorsCache = [];
        var privateChildInjectors = [];
        var privateChildFactories = [];

        var provider;
        var cacheIdx;
        var privateChildInjector;
        var privateChildInjectorFactory;
        for (var name in providers) {
          provider = providers[name];

          if (forceNewInstances.indexOf(name) !== -1) {
            if (provider[2] === 'private') {
              cacheIdx = privateInjectorsCache.indexOf(provider[3]);
              if (cacheIdx === -1) {
                privateChildInjector = provider[3].createChild([], forceNewInstances);
                privateChildInjectorFactory = createPrivateInjectorFactory(privateChildInjector);
                privateInjectorsCache.push(provider[3]);
                privateChildInjectors.push(privateChildInjector);
                privateChildFactories.push(privateChildInjectorFactory);
                fromParentModule[name] = [ privateChildInjectorFactory, name, 'private', privateChildInjector ];
              } else {
                fromParentModule[name] = [ privateChildFactories[cacheIdx], name, 'private', privateChildInjectors[cacheIdx] ];
              }
            } else {
              fromParentModule[name] = [ provider[2], provider[1] ];
            }
            matchedScopes[name] = true;
          }

          if ((provider[2] === 'factory' || provider[2] === 'type') && provider[1].$scope) {
            /* jshint -W083 */
            forceNewInstances.forEach(function(scope) {
              if (provider[1].$scope.indexOf(scope) !== -1) {
                fromParentModule[name] = [ provider[2], provider[1] ];
                matchedScopes[scope] = true;
              }
            });
          }
        }

        forceNewInstances.forEach(function(scope) {
          if (!matchedScopes[scope]) {
            throw new Error('No provider for "' + scope + '". Cannot use provider from the parent!');
          }
        });

        modules.unshift(fromParentModule);
      }

      return new Injector(modules, self);
    }

    var factoryMap = {
      factory: invoke,
      type: instantiate,
      value: function(value) {
        return value;
      }
    };

    /**
     * @param {ModuleDefinition} moduleDefinition
     * @param {Injector} injector
     */
    function createInitializer(moduleDefinition, injector) {

      var initializers = moduleDefinition.__init__ || [];

      return function() {
        initializers.forEach(function(initializer) {

          // eagerly resolve component (fn or string)
          if (typeof initializer === 'string') {
            injector.get(initializer);
          } else {
            injector.invoke(initializer);
          }
        });
      };
    }

    /**
     * @param {ModuleDefinition} moduleDefinition
     */
    function loadModule(moduleDefinition) {

      var moduleExports = moduleDefinition.__exports__;

      // private module
      if (moduleExports) {
        var nestedModules = moduleDefinition.__modules__;

        var clonedModule = Object.keys(moduleDefinition).reduce(function(clonedModule, key) {

          if (key !== '__exports__' && key !== '__modules__' && key !== '__init__' && key !== '__depends__') {
            clonedModule[key] = moduleDefinition[key];
          }

          return clonedModule;
        }, Object.create(null));

        var childModules = (nestedModules || []).concat(clonedModule);

        var privateInjector = createChild(childModules);
        var getFromPrivateInjector = annotate(function(key) {
          return privateInjector.get(key);
        });

        moduleExports.forEach(function(key) {
          providers[key] = [ getFromPrivateInjector, key, 'private', privateInjector ];
        });

        // ensure child injector initializes
        var initializers = (moduleDefinition.__init__ || []).slice();

        initializers.unshift(function() {
          privateInjector.init();
        });

        moduleDefinition = Object.assign({}, moduleDefinition, {
          __init__: initializers
        });

        return createInitializer(moduleDefinition, privateInjector);
      }

      // normal module
      Object.keys(moduleDefinition).forEach(function(key) {

        if (key === '__init__' || key === '__depends__') {
          return;
        }

        if (moduleDefinition[key][2] === 'private') {
          providers[key] = moduleDefinition[key];
          return;
        }

        var type = moduleDefinition[key][0];
        var value = moduleDefinition[key][1];

        providers[key] = [ factoryMap[type], arrayUnwrap(type, value), type ];
      });

      return createInitializer(moduleDefinition, self);
    }

    /**
     * @param {ModuleDefinition[]} moduleDefinitions
     * @param {ModuleDefinition} moduleDefinition
     *
     * @return {ModuleDefinition[]}
     */
    function resolveDependencies(moduleDefinitions, moduleDefinition) {

      if (moduleDefinitions.indexOf(moduleDefinition) !== -1) {
        return moduleDefinitions;
      }

      moduleDefinitions = (moduleDefinition.__depends__ || []).reduce(resolveDependencies, moduleDefinitions);

      if (moduleDefinitions.indexOf(moduleDefinition) !== -1) {
        return moduleDefinitions;
      }

      return moduleDefinitions.concat(moduleDefinition);
    }

    /**
     * @param {ModuleDefinition[]} moduleDefinitions
     *
     * @return { () => void } initializerFn
     */
    function bootstrap(moduleDefinitions) {

      var initializers = moduleDefinitions
        .reduce(resolveDependencies, [])
        .map(loadModule);

      var initialized = false;

      return function() {

        if (initialized) {
          return;
        }

        initialized = true;

        initializers.forEach(function(initializer) {
          return initializer();
        });
      };
    }

    // public API
    this.get = get;
    this.invoke = invoke;
    this.instantiate = instantiate;
    this.createChild = createChild;

    // setup
    this.init = bootstrap(modules);
  }


  // helpers ///////////////

  function arrayUnwrap(type, value) {
    if (type !== 'value' && isArray$1(value)) {
      value = annotate(value.slice());
    }

    return value;
  }

  var DEFAULT_RENDER_PRIORITY$1 = 1000;

  /**
   * The base implementation of shape and connection renderers.
   *
   * @param {EventBus} eventBus
   * @param {number} [renderPriority=1000]
   */
  function BaseRenderer(eventBus, renderPriority) {
    var self = this;

    renderPriority = renderPriority || DEFAULT_RENDER_PRIORITY$1;

    eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
      var type = evt.type,
          element = context.element,
          visuals = context.gfx,
          attrs = context.attrs;

      if (self.canRender(element)) {
        if (type === 'render.shape') {
          return self.drawShape(visuals, element, attrs);
        } else {
          return self.drawConnection(visuals, element, attrs);
        }
      }
    });

    eventBus.on([ 'render.getShapePath', 'render.getConnectionPath' ], renderPriority, function(evt, element) {
      if (self.canRender(element)) {
        if (evt.type === 'render.getShapePath') {
          return self.getShapePath(element);
        } else {
          return self.getConnectionPath(element);
        }
      }
    });
  }

  /**
   * Should check whether *this* renderer can render
   * the element/connection.
   *
   * @param {element} element
   *
   * @returns {boolean}
   */
  BaseRenderer.prototype.canRender = function() {};

  /**
   * Provides the shape's snap svg element to be drawn on the `canvas`.
   *
   * @param {djs.Graphics} visuals
   * @param {Shape} shape
   *
   * @returns {Snap.svg} [returns a Snap.svg paper element ]
   */
  BaseRenderer.prototype.drawShape = function() {};

  /**
   * Provides the shape's snap svg element to be drawn on the `canvas`.
   *
   * @param {djs.Graphics} visuals
   * @param {Connection} connection
   *
   * @returns {Snap.svg} [returns a Snap.svg paper element ]
   */
  BaseRenderer.prototype.drawConnection = function() {};

  /**
   * Gets the SVG path of a shape that represents it's visual bounds.
   *
   * @param {Shape} shape
   *
   * @return {string} svg path
   */
  BaseRenderer.prototype.getShapePath = function() {};

  /**
   * Gets the SVG path of a connection that represents it's visual bounds.
   *
   * @param {Connection} connection
   *
   * @return {string} svg path
   */
  BaseRenderer.prototype.getConnectionPath = function() {};

  function componentsToPath(elements) {
    return elements.join(',').replace(/,?([A-z]),?/g, '$1');
  }

  function toSVGPoints(points) {
    var result = '';

    for (var i = 0, p; (p = points[i]); i++) {
      result += p.x + ',' + p.y + ' ';
    }

    return result;
  }

  function createLine(points, attrs) {

    var line = create$1('polyline');
    attr(line, { points: toSVGPoints(points) });

    if (attrs) {
      attr(line, attrs);
    }

    return line;
  }

  function updateLine(gfx, points) {
    attr(gfx, { points: toSVGPoints(points) });

    return gfx;
  }

  /**
   * @typedef { {x:number, y: number, width: number, height: number} } Bounds
   */

  /**
   * Get parent elements.
   *
   * @param {Array<djs.model.base>} elements
   *
   * @returns {Array<djs.model.Base>}
   */
  function getParents$1(elements) {

    // find elements that are not children of any other elements
    return filter(elements, function(element) {
      return !find(elements, function(e) {
        return e !== element && getParent$1(element, e);
      });
    });
  }


  function getParent$1(element, parent) {
    if (!parent) {
      return;
    }

    if (element === parent) {
      return parent;
    }

    if (!element.parent) {
      return;
    }

    return getParent$1(element.parent, parent);
  }


  /**
   * Adds an element to a collection and returns true if the
   * element was added.
   *
   * @param {Array<Object>} elements
   * @param {Object} e
   * @param {boolean} unique
   */
  function add$1(elements, e, unique) {
    var canAdd = !unique || elements.indexOf(e) === -1;

    if (canAdd) {
      elements.push(e);
    }

    return canAdd;
  }


  /**
   * Iterate over each element in a collection, calling the iterator function `fn`
   * with (element, index, recursionDepth).
   *
   * Recurse into all elements that are returned by `fn`.
   *
   * @param  {Object|Array<Object>} elements
   * @param  {Function} fn iterator function called with (element, index, recursionDepth)
   * @param  {number} [depth] maximum recursion depth
   */
  function eachElement(elements, fn, depth) {

    depth = depth || 0;

    if (!isArray$3(elements)) {
      elements = [ elements ];
    }

    forEach$1(elements, function(s, i) {
      var filter = fn(s, i, depth);

      if (isArray$3(filter) && filter.length) {
        eachElement(filter, fn, depth + 1);
      }
    });
  }


  /**
   * Collects self + child elements up to a given depth from a list of elements.
   *
   * @param  {djs.model.Base|Array<djs.model.Base>} elements the elements to select the children from
   * @param  {boolean} unique whether to return a unique result set (no duplicates)
   * @param  {number} maxDepth the depth to search through or -1 for infinite
   *
   * @return {Array<djs.model.Base>} found elements
   */
  function selfAndChildren(elements, unique, maxDepth) {
    var result = [],
        processedChildren = [];

    eachElement(elements, function(element, i, depth) {
      add$1(result, element, unique);

      var children = element.children;

      // max traversal depth not reached yet
      if (maxDepth === -1 || depth < maxDepth) {

        // children exist && children not yet processed
        if (children && add$1(processedChildren, children, unique)) {
          return children;
        }
      }
    });

    return result;
  }


  /**
   * Return self + ALL children for a number of elements
   *
   * @param  {Array<djs.model.Base>} elements to query
   * @param  {boolean} allowDuplicates to allow duplicates in the result set
   *
   * @return {Array<djs.model.Base>} the collected elements
   */
  function selfAndAllChildren(elements, allowDuplicates) {
    return selfAndChildren(elements, !allowDuplicates, -1);
  }


  /**
   * Gets the the closure for all selected elements,
   * their enclosed children and connections.
   *
   * @param {Array<djs.model.Base>} elements
   * @param {boolean} [isTopLevel=true]
   * @param {Object} [existingClosure]
   *
   * @return {Object} newClosure
   */
  function getClosure(elements, isTopLevel, closure) {

    if (isUndefined$2(isTopLevel)) {
      isTopLevel = true;
    }

    if (isObject(isTopLevel)) {
      closure = isTopLevel;
      isTopLevel = true;
    }


    closure = closure || {};

    var allShapes = copyObject(closure.allShapes),
        allConnections = copyObject(closure.allConnections),
        enclosedElements = copyObject(closure.enclosedElements),
        enclosedConnections = copyObject(closure.enclosedConnections);

    var topLevel = copyObject(
      closure.topLevel,
      isTopLevel && groupBy(elements, function(e) { return e.id; })
    );


    function handleConnection(c) {
      if (topLevel[c.source.id] && topLevel[c.target.id]) {
        topLevel[c.id] = [ c ];
      }

      // not enclosed as a child, but maybe logically
      // (connecting two moved elements?)
      if (allShapes[c.source.id] && allShapes[c.target.id]) {
        enclosedConnections[c.id] = enclosedElements[c.id] = c;
      }

      allConnections[c.id] = c;
    }

    function handleElement(element) {

      enclosedElements[element.id] = element;

      if (element.waypoints) {

        // remember connection
        enclosedConnections[element.id] = allConnections[element.id] = element;
      } else {

        // remember shape
        allShapes[element.id] = element;

        // remember all connections
        forEach$1(element.incoming, handleConnection);

        forEach$1(element.outgoing, handleConnection);

        // recurse into children
        return element.children;
      }
    }

    eachElement(elements, handleElement);

    return {
      allShapes: allShapes,
      allConnections: allConnections,
      topLevel: topLevel,
      enclosedConnections: enclosedConnections,
      enclosedElements: enclosedElements
    };
  }

  /**
   * Returns the surrounding bbox for all elements in
   * the array or the element primitive.
   *
   * @param {Array<djs.model.Shape>|djs.model.Shape} elements
   * @param {boolean} [stopRecursion=false]
   *
   * @return {Bounds}
   */
  function getBBox(elements, stopRecursion) {

    stopRecursion = !!stopRecursion;
    if (!isArray$3(elements)) {
      elements = [ elements ];
    }

    var minX,
        minY,
        maxX,
        maxY;

    forEach$1(elements, function(element) {

      // If element is a connection the bbox must be computed first
      var bbox = element;
      if (element.waypoints && !stopRecursion) {
        bbox = getBBox(element.waypoints, true);
      }

      var x = bbox.x,
          y = bbox.y,
          height = bbox.height || 0,
          width = bbox.width || 0;

      if (x < minX || minX === undefined) {
        minX = x;
      }
      if (y < minY || minY === undefined) {
        minY = y;
      }

      if ((x + width) > maxX || maxX === undefined) {
        maxX = x + width;
      }
      if ((y + height) > maxY || maxY === undefined) {
        maxY = y + height;
      }
    });

    return {
      x: minX,
      y: minY,
      height: maxY - minY,
      width: maxX - minX
    };
  }


  /**
   * Returns all elements that are enclosed from the bounding box.
   *
   *   * If bbox.(width|height) is not specified the method returns
   *     all elements with element.x/y > bbox.x/y
   *   * If only bbox.x or bbox.y is specified, method return all elements with
   *     e.x > bbox.x or e.y > bbox.y
   *
   * @param {Array<djs.model.Shape>} elements List of Elements to search through
   * @param {djs.model.Shape} bbox the enclosing bbox.
   *
   * @return {Array<djs.model.Shape>} enclosed elements
   */
  function getEnclosedElements(elements, bbox) {

    var filteredElements = {};

    forEach$1(elements, function(element) {

      var e = element;

      if (e.waypoints) {
        e = getBBox(e);
      }

      if (!isNumber(bbox.y) && (e.x > bbox.x)) {
        filteredElements[element.id] = element;
      }
      if (!isNumber(bbox.x) && (e.y > bbox.y)) {
        filteredElements[element.id] = element;
      }
      if (e.x > bbox.x && e.y > bbox.y) {
        if (isNumber(bbox.width) && isNumber(bbox.height) &&
            e.width + e.x < bbox.width + bbox.x &&
            e.height + e.y < bbox.height + bbox.y) {

          filteredElements[element.id] = element;
        } else if (!isNumber(bbox.width) || !isNumber(bbox.height)) {
          filteredElements[element.id] = element;
        }
      }
    });

    return filteredElements;
  }


  function getType(element) {

    if ('waypoints' in element) {
      return 'connection';
    }

    if ('x' in element) {
      return 'shape';
    }

    return 'root';
  }

  function isFrameElement$1(element) {

    return !!(element && element.isFrame);
  }

  // helpers ///////////////////////////////

  function copyObject(src1, src2) {
    return assign({}, src1 || {}, src2 || {});
  }

  // apply default renderer with lowest possible priority
  // so that it only kicks in if noone else could render
  var DEFAULT_RENDER_PRIORITY = 1;

  /**
   * The default renderer used for shapes and connections.
   *
   * @param {EventBus} eventBus
   * @param {Styles} styles
   */
  function DefaultRenderer(eventBus, styles) {

    //
    BaseRenderer.call(this, eventBus, DEFAULT_RENDER_PRIORITY);

    this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: 'fuchsia' });
    this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: 'fuchsia', strokeWidth: 2 });
    this.FRAME_STYLE = styles.style([ 'no-fill' ], { stroke: 'fuchsia', strokeDasharray: 4, strokeWidth: 2 });
  }

  e(DefaultRenderer, BaseRenderer);


  DefaultRenderer.prototype.canRender = function() {
    return true;
  };

  DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
    var rect = create$1('rect');

    attr(rect, {
      x: 0,
      y: 0,
      width: element.width || 0,
      height: element.height || 0
    });

    if (isFrameElement$1(element)) {
      attr(rect, assign({}, this.FRAME_STYLE, attrs || {}));
    } else {
      attr(rect, assign({}, this.SHAPE_STYLE, attrs || {}));
    }

    append(visuals, rect);

    return rect;
  };

  DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {

    var line = createLine(connection.waypoints, assign({}, this.CONNECTION_STYLE, attrs || {}));
    append(visuals, line);

    return line;
  };

  DefaultRenderer.prototype.getShapePath = function getShapePath(shape) {

    var x = shape.x,
        y = shape.y,
        width = shape.width,
        height = shape.height;

    var shapePath = [
      [ 'M', x, y ],
      [ 'l', width, 0 ],
      [ 'l', 0, height ],
      [ 'l', -width, 0 ],
      [ 'z' ]
    ];

    return componentsToPath(shapePath);
  };

  DefaultRenderer.prototype.getConnectionPath = function getConnectionPath(connection) {
    var waypoints = connection.waypoints;

    var idx, point, connectionPath = [];

    for (idx = 0; (point = waypoints[idx]); idx++) {

      // take invisible docking into account
      // when creating the path
      point = point.original || point;

      connectionPath.push([ idx === 0 ? 'M' : 'L', point.x, point.y ]);
    }

    return componentsToPath(connectionPath);
  };


  DefaultRenderer.$inject = [ 'eventBus', 'styles' ];

  /**
   * A component that manages shape styles
   */
  function Styles() {

    var defaultTraits = {

      'no-fill': {
        fill: 'none'
      },
      'no-border': {
        strokeOpacity: 0.0
      },
      'no-events': {
        pointerEvents: 'none'
      }
    };

    var self = this;

    /**
     * Builds a style definition from a className, a list of traits and an object of additional attributes.
     *
     * @param  {string} className
     * @param  {Array<string>} traits
     * @param  {Object} additionalAttrs
     *
     * @return {Object} the style defintion
     */
    this.cls = function(className, traits, additionalAttrs) {
      var attrs = this.style(traits, additionalAttrs);

      return assign(attrs, { 'class': className });
    };

    /**
     * Builds a style definition from a list of traits and an object of additional attributes.
     *
     * @param  {Array<string>} traits
     * @param  {Object} additionalAttrs
     *
     * @return {Object} the style defintion
     */
    this.style = function(traits, additionalAttrs) {

      if (!isArray$3(traits) && !additionalAttrs) {
        additionalAttrs = traits;
        traits = [];
      }

      var attrs = reduce(traits, function(attrs, t) {
        return assign(attrs, defaultTraits[t] || {});
      }, {});

      return additionalAttrs ? assign(attrs, additionalAttrs) : attrs;
    };

    this.computeStyle = function(custom, traits, defaultStyles) {
      if (!isArray$3(traits)) {
        defaultStyles = traits;
        traits = [];
      }

      return self.style(traits || [], assign({}, defaultStyles, custom || {}));
    };
  }

  var DrawModule$1 = {
    __init__: [ 'defaultRenderer' ],
    defaultRenderer: [ 'type', DefaultRenderer ],
    styles: [ 'type', Styles ]
  };

  /**
   * Failsafe remove an element from a collection
   *
   * @param  {Array<Object>} [collection]
   * @param  {Object} [element]
   *
   * @return {number} the previous index of the element
   */
  function remove(collection, element) {

    if (!collection || !element) {
      return -1;
    }

    var idx = collection.indexOf(element);

    if (idx !== -1) {
      collection.splice(idx, 1);
    }

    return idx;
  }

  /**
   * Fail save add an element to the given connection, ensuring
   * it does not yet exist.
   *
   * @param {Array<Object>} collection
   * @param {Object} element
   * @param {number} idx
   */
  function add(collection, element, idx) {

    if (!collection || !element) {
      return;
    }

    if (typeof idx !== 'number') {
      idx = -1;
    }

    var currentIdx = collection.indexOf(element);

    if (currentIdx !== -1) {

      if (currentIdx === idx) {

        // nothing to do, position has not changed
        return;
      } else {

        if (idx !== -1) {

          // remove from current position
          collection.splice(currentIdx, 1);
        } else {

          // already exists in collection
          return;
        }
      }
    }

    if (idx !== -1) {

      // insert at specified position
      collection.splice(idx, 0, element);
    } else {

      // push to end
      collection.push(element);
    }
  }


  /**
   * Fail save get the index of an element in a collection.
   *
   * @param {Array<Object>} collection
   * @param {Object} element
   *
   * @return {number} the index or -1 if collection or element do
   *                  not exist or the element is not contained.
   */
  function indexOf(collection, element) {

    if (!collection || !element) {
      return -1;
    }

    return collection.indexOf(element);
  }

  /**
   * Computes the distance between two points
   *
   * @param  {Point}  p
   * @param  {Point}  q
   *
   * @return {number}  distance
   */
  function pointDistance(a, b) {
    if (!a || !b) {
      return -1;
    }

    return Math.sqrt(
      Math.pow(a.x - b.x, 2) +
      Math.pow(a.y - b.y, 2)
    );
  }


  /**
   * Returns true if the point r is on the line between p and q
   *
   * @param  {Point}  p
   * @param  {Point}  q
   * @param  {Point}  r
   * @param  {number} [accuracy=5] accuracy for points on line check (lower is better)
   *
   * @return {boolean}
   */
  function pointsOnLine(p, q, r, accuracy) {

    if (typeof accuracy === 'undefined') {
      accuracy = 5;
    }

    if (!p || !q || !r) {
      return false;
    }

    var val = (q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x),
        dist = pointDistance(p, q);

    // @see http://stackoverflow.com/a/907491/412190
    return Math.abs(val / dist) <= accuracy;
  }


  var ALIGNED_THRESHOLD = 2;

  /**
   * Check whether two points are horizontally or vertically aligned.
   *
   * @param {Array<Point>|Point}
   * @param {Point}
   *
   * @return {string|boolean}
   */
  function pointsAligned(a, b) {
    var points;

    if (isArray$3(a)) {
      points = a;
    } else {
      points = [ a, b ];
    }

    if (pointsAlignedHorizontally(points)) {
      return 'h';
    }

    if (pointsAlignedVertically(points)) {
      return 'v';
    }

    return false;
  }

  function pointsAlignedHorizontally(a, b) {
    var points;

    if (isArray$3(a)) {
      points = a;
    } else {
      points = [ a, b ];
    }

    var firstPoint = points.slice().shift();

    return every(points, function(point) {
      return Math.abs(firstPoint.y - point.y) <= ALIGNED_THRESHOLD;
    });
  }

  function pointsAlignedVertically(a, b) {
    var points;

    if (isArray$3(a)) {
      points = a;
    } else {
      points = [ a, b ];
    }

    var firstPoint = points.slice().shift();

    return every(points, function(point) {
      return Math.abs(firstPoint.x - point.x) <= ALIGNED_THRESHOLD;
    });
  }



  /**
   * Returns true if the point p is inside the rectangle rect
   *
   * @param  {Point}  p
   * @param  {Rect} rect
   * @param  {number} tolerance
   *
   * @return {boolean}
   */
  function pointInRect(p, rect, tolerance) {
    tolerance = tolerance || 0;

    return p.x > rect.x - tolerance &&
           p.y > rect.y - tolerance &&
           p.x < rect.x + rect.width + tolerance &&
           p.y < rect.y + rect.height + tolerance;
  }

  /**
   * Returns a point in the middle of points p and q
   *
   * @param  {Point}  p
   * @param  {Point}  q
   *
   * @return {Point} middle point
   */
  function getMidPoint(p, q) {
    return {
      x: Math.round(p.x + ((q.x - p.x) / 2.0)),
      y: Math.round(p.y + ((q.y - p.y) / 2.0))
    };
  }

  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

  function getDefaultExportFromCjs (x) {
  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
  }

  /**
   * This file contains source code adapted from Snap.svg (licensed Apache-2.0).
   *
   * @see https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js
   */

  /* eslint no-fallthrough: "off" */

  var p2s = /,?([a-z]),?/gi,
      toFloat = parseFloat,
      math = Math,
      PI = math.PI,
      mmin = math.min,
      mmax = math.max,
      pow = math.pow,
      abs$7 = math.abs,
      pathCommand = /([a-z])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?[\s]*,?[\s]*)+)/ig,
      pathValues = /(-?\d*\.?\d*(?:e[-+]?\d+)?)[\s]*,?[\s]*/ig;

  var isArray = Array.isArray || function(o) { return o instanceof Array; };

  function hasProperty(obj, property) {
    return Object.prototype.hasOwnProperty.call(obj, property);
  }

  function clone(obj) {

    if (typeof obj == 'function' || Object(obj) !== obj) {
      return obj;
    }

    var res = new obj.constructor;

    for (var key in obj) {
      if (hasProperty(obj, key)) {
        res[key] = clone(obj[key]);
      }
    }

    return res;
  }

  function repush(array, item) {
    for (var i = 0, ii = array.length; i < ii; i++) if (array[i] === item) {
      return array.push(array.splice(i, 1)[0]);
    }
  }

  function cacher(f) {

    function newf() {

      var arg = Array.prototype.slice.call(arguments, 0),
          args = arg.join('\u2400'),
          cache = newf.cache = newf.cache || {},
          count = newf.count = newf.count || [];

      if (hasProperty(cache, args)) {
        repush(count, args);
        return cache[args];
      }

      count.length >= 1e3 && delete cache[count.shift()];
      count.push(args);
      cache[args] = f.apply(0, arg);

      return cache[args];
    }
    return newf;
  }

  function parsePathString(pathString) {

    if (!pathString) {
      return null;
    }

    var pth = paths(pathString);

    if (pth.arr) {
      return clone(pth.arr);
    }

    var paramCounts = { a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0 },
        data = [];

    if (isArray(pathString) && isArray(pathString[0])) { // rough assumption
      data = clone(pathString);
    }

    if (!data.length) {

      String(pathString).replace(pathCommand, function(a, b, c) {
        var params = [],
            name = b.toLowerCase();

        c.replace(pathValues, function(a, b) {
          b && params.push(+b);
        });

        if (name == 'm' && params.length > 2) {
          data.push([b].concat(params.splice(0, 2)));
          name = 'l';
          b = b == 'm' ? 'l' : 'L';
        }

        while (params.length >= paramCounts[name]) {
          data.push([b].concat(params.splice(0, paramCounts[name])));
          if (!paramCounts[name]) {
            break;
          }
        }
      });
    }

    data.toString = paths.toString;
    pth.arr = clone(data);

    return data;
  }

  function paths(ps) {
    var p = paths.ps = paths.ps || {};

    if (p[ps]) {
      p[ps].sleep = 100;
    } else {
      p[ps] = {
        sleep: 100
      };
    }

    setTimeout(function() {
      for (var key in p) {
        if (hasProperty(p, key) && key != ps) {
          p[key].sleep--;
          !p[key].sleep && delete p[key];
        }
      }
    });

    return p[ps];
  }

  function rectBBox(x, y, width, height) {

    if (arguments.length === 1) {
      y = x.y;
      width = x.width;
      height = x.height;
      x = x.x;
    }

    return {
      x: x,
      y: y,
      width: width,
      height: height,
      x2: x + width,
      y2: y + height
    };
  }

  function pathToString() {
    return this.join(',').replace(p2s, '$1');
  }

  function pathClone(pathArray) {
    var res = clone(pathArray);
    res.toString = pathToString;
    return res;
  }

  function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
    var t1 = 1 - t,
        t13 = pow(t1, 3),
        t12 = pow(t1, 2),
        t2 = t * t,
        t3 = t2 * t,
        x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x,
        y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y;

    return {
      x: fixError(x),
      y: fixError(y)
    };
  }

  function bezierBBox(points) {

    var bbox = curveBBox.apply(null, points);

    return rectBBox(
      bbox.x0,
      bbox.y0,
      bbox.x1 - bbox.x0,
      bbox.y1 - bbox.y0
    );
  }

  function isPointInsideBBox$2(bbox, x, y) {
    return x >= bbox.x &&
      x <= bbox.x + bbox.width &&
      y >= bbox.y &&
      y <= bbox.y + bbox.height;
  }

  function isBBoxIntersect(bbox1, bbox2) {
    bbox1 = rectBBox(bbox1);
    bbox2 = rectBBox(bbox2);
    return isPointInsideBBox$2(bbox2, bbox1.x, bbox1.y)
      || isPointInsideBBox$2(bbox2, bbox1.x2, bbox1.y)
      || isPointInsideBBox$2(bbox2, bbox1.x, bbox1.y2)
      || isPointInsideBBox$2(bbox2, bbox1.x2, bbox1.y2)
      || isPointInsideBBox$2(bbox1, bbox2.x, bbox2.y)
      || isPointInsideBBox$2(bbox1, bbox2.x2, bbox2.y)
      || isPointInsideBBox$2(bbox1, bbox2.x, bbox2.y2)
      || isPointInsideBBox$2(bbox1, bbox2.x2, bbox2.y2)
      || (bbox1.x < bbox2.x2 && bbox1.x > bbox2.x
          || bbox2.x < bbox1.x2 && bbox2.x > bbox1.x)
      && (bbox1.y < bbox2.y2 && bbox1.y > bbox2.y
          || bbox2.y < bbox1.y2 && bbox2.y > bbox1.y);
  }

  function base3(t, p1, p2, p3, p4) {
    var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
        t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
    return t * t2 - 3 * p1 + 3 * p2;
  }

  function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {

    if (z == null) {
      z = 1;
    }

    z = z > 1 ? 1 : z < 0 ? 0 : z;

    var z2 = z / 2,
        n = 12,
        Tvalues = [-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816],
        Cvalues = [0.2491,0.2491,0.2335,0.2335,0.2032,0.2032,0.1601,0.1601,0.1069,0.1069,0.0472,0.0472],
        sum = 0;

    for (var i = 0; i < n; i++) {
      var ct = z2 * Tvalues[i] + z2,
          xbase = base3(ct, x1, x2, x3, x4),
          ybase = base3(ct, y1, y2, y3, y4),
          comb = xbase * xbase + ybase * ybase;

      sum += Cvalues[i] * math.sqrt(comb);
    }

    return z2 * sum;
  }


  function intersectLines(x1, y1, x2, y2, x3, y3, x4, y4) {

    if (
      mmax(x1, x2) < mmin(x3, x4) ||
        mmin(x1, x2) > mmax(x3, x4) ||
        mmax(y1, y2) < mmin(y3, y4) ||
        mmin(y1, y2) > mmax(y3, y4)
    ) {
      return;
    }

    var nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4),
        ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4),
        denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);

    if (!denominator) {
      return;
    }

    var px = fixError(nx / denominator),
        py = fixError(ny / denominator),
        px2 = +px.toFixed(2),
        py2 = +py.toFixed(2);

    if (
      px2 < +mmin(x1, x2).toFixed(2) ||
        px2 > +mmax(x1, x2).toFixed(2) ||
        px2 < +mmin(x3, x4).toFixed(2) ||
        px2 > +mmax(x3, x4).toFixed(2) ||
        py2 < +mmin(y1, y2).toFixed(2) ||
        py2 > +mmax(y1, y2).toFixed(2) ||
        py2 < +mmin(y3, y4).toFixed(2) ||
        py2 > +mmax(y3, y4).toFixed(2)
    ) {
      return;
    }

    return { x: px, y: py };
  }

  function fixError(number) {
    return Math.round(number * 100000000000) / 100000000000;
  }

  function findBezierIntersections(bez1, bez2, justCount) {
    var bbox1 = bezierBBox(bez1),
        bbox2 = bezierBBox(bez2);

    if (!isBBoxIntersect(bbox1, bbox2)) {
      return justCount ? 0 : [];
    }

    // As an optimization, lines will have only 1 segment

    var l1 = bezlen.apply(0, bez1),
        l2 = bezlen.apply(0, bez2),
        n1 = isLine(bez1) ? 1 : ~~(l1 / 5) || 1,
        n2 = isLine(bez2) ? 1 : ~~(l2 / 5) || 1,
        dots1 = [],
        dots2 = [],
        xy = {},
        res = justCount ? 0 : [];

    for (var i = 0; i < n1 + 1; i++) {
      var p = findDotsAtSegment.apply(0, bez1.concat(i / n1));
      dots1.push({ x: p.x, y: p.y, t: i / n1 });
    }

    for (i = 0; i < n2 + 1; i++) {
      p = findDotsAtSegment.apply(0, bez2.concat(i / n2));
      dots2.push({ x: p.x, y: p.y, t: i / n2 });
    }

    for (i = 0; i < n1; i++) {

      for (var j = 0; j < n2; j++) {
        var di = dots1[i],
            di1 = dots1[i + 1],
            dj = dots2[j],
            dj1 = dots2[j + 1],
            ci = abs$7(di1.x - di.x) < .01 ? 'y' : 'x',
            cj = abs$7(dj1.x - dj.x) < .01 ? 'y' : 'x',
            is = intersectLines(di.x, di.y, di1.x, di1.y, dj.x, dj.y, dj1.x, dj1.y),
            key;

        if (is) {
          key = is.x.toFixed(9) + '#' + is.y.toFixed(9);

          if (xy[key]) {
            continue;
          }

          xy[key] = true;

          var t1 = di.t + abs$7((is[ci] - di[ci]) / (di1[ci] - di[ci])) * (di1.t - di.t),
              t2 = dj.t + abs$7((is[cj] - dj[cj]) / (dj1[cj] - dj[cj])) * (dj1.t - dj.t);

          if (t1 >= 0 && t1 <= 1 && t2 >= 0 && t2 <= 1) {

            if (justCount) {
              res++;
            } else {
              res.push({
                x: is.x,
                y: is.y,
                t1: t1,
                t2: t2
              });
            }
          }
        }
      }
    }

    return res;
  }


  /**
   * Find or counts the intersections between two SVG paths.
   *
   * Returns a number in counting mode and a list of intersections otherwise.
   *
   * A single intersection entry contains the intersection coordinates (x, y)
   * as well as additional information regarding the intersecting segments
   * on each path (segment1, segment2) and the relative location of the
   * intersection on these segments (t1, t2).
   *
   * The path may be an SVG path string or a list of path components
   * such as `[ [ 'M', 0, 10 ], [ 'L', 20, 0 ] ]`.
   *
   * @example
   *
   * var intersections = findPathIntersections(
   *   'M0,0L100,100',
   *   [ [ 'M', 0, 100 ], [ 'L', 100, 0 ] ]
   * );
   *
   * // intersections = [
   * //   { x: 50, y: 50, segment1: 1, segment2: 1, t1: 0.5, t2: 0.5 }
   * // ]
   *
   * @param {String|Array<PathDef>} path1
   * @param {String|Array<PathDef>} path2
   * @param {Boolean} [justCount=false]
   *
   * @return {Array<Intersection>|Number}
   */
  function findPathIntersections(path1, path2, justCount) {
    path1 = pathToCurve(path1);
    path2 = pathToCurve(path2);

    var x1, y1, x2, y2, x1m, y1m, x2m, y2m, bez1, bez2,
        res = justCount ? 0 : [];

    for (var i = 0, ii = path1.length; i < ii; i++) {
      var pi = path1[i];

      if (pi[0] == 'M') {
        x1 = x1m = pi[1];
        y1 = y1m = pi[2];
      } else {

        if (pi[0] == 'C') {
          bez1 = [x1, y1].concat(pi.slice(1));
          x1 = bez1[6];
          y1 = bez1[7];
        } else {
          bez1 = [x1, y1, x1, y1, x1m, y1m, x1m, y1m];
          x1 = x1m;
          y1 = y1m;
        }

        for (var j = 0, jj = path2.length; j < jj; j++) {
          var pj = path2[j];

          if (pj[0] == 'M') {
            x2 = x2m = pj[1];
            y2 = y2m = pj[2];
          } else {

            if (pj[0] == 'C') {
              bez2 = [x2, y2].concat(pj.slice(1));
              x2 = bez2[6];
              y2 = bez2[7];
            } else {
              bez2 = [x2, y2, x2, y2, x2m, y2m, x2m, y2m];
              x2 = x2m;
              y2 = y2m;
            }

            var intr = findBezierIntersections(bez1, bez2, justCount);

            if (justCount) {
              res += intr;
            } else {

              for (var k = 0, kk = intr.length; k < kk; k++) {
                intr[k].segment1 = i;
                intr[k].segment2 = j;
                intr[k].bez1 = bez1;
                intr[k].bez2 = bez2;
              }

              res = res.concat(intr);
            }
          }
        }
      }
    }

    return res;
  }


  function pathToAbsolute(pathArray) {
    var pth = paths(pathArray);

    if (pth.abs) {
      return pathClone(pth.abs);
    }

    if (!isArray(pathArray) || !isArray(pathArray && pathArray[0])) { // rough assumption
      pathArray = parsePathString(pathArray);
    }

    if (!pathArray || !pathArray.length) {
      return [['M', 0, 0]];
    }

    var res = [],
        x = 0,
        y = 0,
        mx = 0,
        my = 0,
        start = 0,
        pa0;

    if (pathArray[0][0] == 'M') {
      x = +pathArray[0][1];
      y = +pathArray[0][2];
      mx = x;
      my = y;
      start++;
      res[0] = ['M', x, y];
    }

    for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
      res.push(r = []);
      pa = pathArray[i];
      pa0 = pa[0];

      if (pa0 != pa0.toUpperCase()) {
        r[0] = pa0.toUpperCase();

        switch (r[0]) {
        case 'A':
          r[1] = pa[1];
          r[2] = pa[2];
          r[3] = pa[3];
          r[4] = pa[4];
          r[5] = pa[5];
          r[6] = +pa[6] + x;
          r[7] = +pa[7] + y;
          break;
        case 'V':
          r[1] = +pa[1] + y;
          break;
        case 'H':
          r[1] = +pa[1] + x;
          break;
        case 'M':
          mx = +pa[1] + x;
          my = +pa[2] + y;
        default:
          for (var j = 1, jj = pa.length; j < jj; j++) {
            r[j] = +pa[j] + ((j % 2) ? x : y);
          }
        }
      } else {
        for (var k = 0, kk = pa.length; k < kk; k++) {
          r[k] = pa[k];
        }
      }
      pa0 = pa0.toUpperCase();

      switch (r[0]) {
      case 'Z':
        x = +mx;
        y = +my;
        break;
      case 'H':
        x = r[1];
        break;
      case 'V':
        y = r[1];
        break;
      case 'M':
        mx = r[r.length - 2];
        my = r[r.length - 1];
      default:
        x = r[r.length - 2];
        y = r[r.length - 1];
      }
    }

    res.toString = pathToString;
    pth.abs = pathClone(res);

    return res;
  }

  function isLine(bez) {
    return (
      bez[0] === bez[2] &&
      bez[1] === bez[3] &&
      bez[4] === bez[6] &&
      bez[5] === bez[7]
    );
  }

  function lineToCurve(x1, y1, x2, y2) {
    return [
      x1, y1, x2,
      y2, x2, y2
    ];
  }

  function qubicToCurve(x1, y1, ax, ay, x2, y2) {
    var _13 = 1 / 3,
        _23 = 2 / 3;

    return [
      _13 * x1 + _23 * ax,
      _13 * y1 + _23 * ay,
      _13 * x2 + _23 * ax,
      _13 * y2 + _23 * ay,
      x2,
      y2
    ];
  }

  function arcToCurve(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {

    // for more information of where this math came from visit:
    // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
    var _120 = PI * 120 / 180,
        rad = PI / 180 * (+angle || 0),
        res = [],
        xy,
        rotate = cacher(function(x, y, rad) {
          var X = x * math.cos(rad) - y * math.sin(rad),
              Y = x * math.sin(rad) + y * math.cos(rad);

          return { x: X, y: Y };
        });

    if (!recursive) {
      xy = rotate(x1, y1, -rad);
      x1 = xy.x;
      y1 = xy.y;
      xy = rotate(x2, y2, -rad);
      x2 = xy.x;
      y2 = xy.y;

      var x = (x1 - x2) / 2,
          y = (y1 - y2) / 2;

      var h = (x * x) / (rx * rx) + (y * y) / (ry * ry);

      if (h > 1) {
        h = math.sqrt(h);
        rx = h * rx;
        ry = h * ry;
      }

      var rx2 = rx * rx,
          ry2 = ry * ry,
          k = (large_arc_flag == sweep_flag ? -1 : 1) *
              math.sqrt(abs$7((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))),
          cx = k * rx * y / ry + (x1 + x2) / 2,
          cy = k * -ry * x / rx + (y1 + y2) / 2,
          f1 = math.asin(((y1 - cy) / ry).toFixed(9)),
          f2 = math.asin(((y2 - cy) / ry).toFixed(9));

      f1 = x1 < cx ? PI - f1 : f1;
      f2 = x2 < cx ? PI - f2 : f2;
      f1 < 0 && (f1 = PI * 2 + f1);
      f2 < 0 && (f2 = PI * 2 + f2);

      if (sweep_flag && f1 > f2) {
        f1 = f1 - PI * 2;
      }
      if (!sweep_flag && f2 > f1) {
        f2 = f2 - PI * 2;
      }
    } else {
      f1 = recursive[0];
      f2 = recursive[1];
      cx = recursive[2];
      cy = recursive[3];
    }

    var df = f2 - f1;

    if (abs$7(df) > _120) {
      var f2old = f2,
          x2old = x2,
          y2old = y2;

      f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
      x2 = cx + rx * math.cos(f2);
      y2 = cy + ry * math.sin(f2);
      res = arcToCurve(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
    }

    df = f2 - f1;

    var c1 = math.cos(f1),
        s1 = math.sin(f1),
        c2 = math.cos(f2),
        s2 = math.sin(f2),
        t = math.tan(df / 4),
        hx = 4 / 3 * rx * t,
        hy = 4 / 3 * ry * t,
        m1 = [x1, y1],
        m2 = [x1 + hx * s1, y1 - hy * c1],
        m3 = [x2 + hx * s2, y2 - hy * c2],
        m4 = [x2, y2];

    m2[0] = 2 * m1[0] - m2[0];
    m2[1] = 2 * m1[1] - m2[1];

    if (recursive) {
      return [m2, m3, m4].concat(res);
    } else {
      res = [m2, m3, m4].concat(res).join().split(',');
      var newres = [];

      for (var i = 0, ii = res.length; i < ii; i++) {
        newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
      }

      return newres;
    }
  }

  // Returns bounding box of cubic bezier curve.
  // Source: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
  // Original version: NISHIO Hirokazu
  // Modifications: https://github.com/timo22345
  function curveBBox(x0, y0, x1, y1, x2, y2, x3, y3) {
    var tvalues = [],
        bounds = [[], []],
        a, b, c, t, t1, t2, b2ac, sqrtb2ac;

    for (var i = 0; i < 2; ++i) {

      if (i == 0) {
        b = 6 * x0 - 12 * x1 + 6 * x2;
        a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;
        c = 3 * x1 - 3 * x0;
      } else {
        b = 6 * y0 - 12 * y1 + 6 * y2;
        a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;
        c = 3 * y1 - 3 * y0;
      }

      if (abs$7(a) < 1e-12) {

        if (abs$7(b) < 1e-12) {
          continue;
        }

        t = -c / b;

        if (0 < t && t < 1) {
          tvalues.push(t);
        }

        continue;
      }

      b2ac = b * b - 4 * c * a;
      sqrtb2ac = math.sqrt(b2ac);

      if (b2ac < 0) {
        continue;
      }

      t1 = (-b + sqrtb2ac) / (2 * a);

      if (0 < t1 && t1 < 1) {
        tvalues.push(t1);
      }

      t2 = (-b - sqrtb2ac) / (2 * a);

      if (0 < t2 && t2 < 1) {
        tvalues.push(t2);
      }
    }

    var j = tvalues.length,
        jlen = j,
        mt;

    while (j--) {
      t = tvalues[j];
      mt = 1 - t;
      bounds[0][j] = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);
      bounds[1][j] = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);
    }

    bounds[0][jlen] = x0;
    bounds[1][jlen] = y0;
    bounds[0][jlen + 1] = x3;
    bounds[1][jlen + 1] = y3;
    bounds[0].length = bounds[1].length = jlen + 2;

    return {
      x0: mmin.apply(0, bounds[0]),
      y0: mmin.apply(0, bounds[1]),
      x1: mmax.apply(0, bounds[0]),
      y1: mmax.apply(0, bounds[1])
    };
  }

  function pathToCurve(path) {

    var pth = paths(path);

    // return cached curve, if existing
    if (pth.curve) {
      return pathClone(pth.curve);
    }

    var curvedPath = pathToAbsolute(path),
        attrs = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null },
        processPath = function(path, d, pathCommand) {
          var nx, ny;

          if (!path) {
            return ['C', d.x, d.y, d.x, d.y, d.x, d.y];
          }

          !(path[0] in { T: 1, Q: 1 }) && (d.qx = d.qy = null);

          switch (path[0]) {
          case 'M':
            d.X = path[1];
            d.Y = path[2];
            break;
          case 'A':
            path = ['C'].concat(arcToCurve.apply(0, [d.x, d.y].concat(path.slice(1))));
            break;
          case 'S':
            if (pathCommand == 'C' || pathCommand == 'S') {

              // In 'S' case we have to take into account, if the previous command is C/S.
              nx = d.x * 2 - d.bx;

              // And reflect the previous
              ny = d.y * 2 - d.by;

              // command's control point relative to the current point.
            }
            else {

              // or some else or nothing
              nx = d.x;
              ny = d.y;
            }
            path = ['C', nx, ny].concat(path.slice(1));
            break;
          case 'T':
            if (pathCommand == 'Q' || pathCommand == 'T') {

              // In 'T' case we have to take into account, if the previous command is Q/T.
              d.qx = d.x * 2 - d.qx;

              // And make a reflection similar
              d.qy = d.y * 2 - d.qy;

              // to case 'S'.
            }
            else {

              // or something else or nothing
              d.qx = d.x;
              d.qy = d.y;
            }
            path = ['C'].concat(qubicToCurve(d.x, d.y, d.qx, d.qy, path[1], path[2]));
            break;
          case 'Q':
            d.qx = path[1];
            d.qy = path[2];
            path = ['C'].concat(qubicToCurve(d.x, d.y, path[1], path[2], path[3], path[4]));
            break;
          case 'L':
            path = ['C'].concat(lineToCurve(d.x, d.y, path[1], path[2]));
            break;
          case 'H':
            path = ['C'].concat(lineToCurve(d.x, d.y, path[1], d.y));
            break;
          case 'V':
            path = ['C'].concat(lineToCurve(d.x, d.y, d.x, path[1]));
            break;
          case 'Z':
            path = ['C'].concat(lineToCurve(d.x, d.y, d.X, d.Y));
            break;
          }

          return path;
        },

        fixArc = function(pp, i) {

          if (pp[i].length > 7) {
            pp[i].shift();
            var pi = pp[i];

            while (pi.length) {
              pathCommands[i] = 'A'; // if created multiple C:s, their original seg is saved
              pp.splice(i++, 0, ['C'].concat(pi.splice(0, 6)));
            }

            pp.splice(i, 1);
            ii = curvedPath.length;
          }
        },

        pathCommands = [], // path commands of original path p
        pfirst = '', // temporary holder for original path command
        pathCommand = ''; // holder for previous path command of original path

    for (var i = 0, ii = curvedPath.length; i < ii; i++) {
      curvedPath[i] && (pfirst = curvedPath[i][0]); // save current path command

      if (pfirst != 'C') // C is not saved yet, because it may be result of conversion
      {
        pathCommands[i] = pfirst; // Save current path command
        i && (pathCommand = pathCommands[i - 1]); // Get previous path command pathCommand
      }
      curvedPath[i] = processPath(curvedPath[i], attrs, pathCommand); // Previous path command is inputted to processPath

      if (pathCommands[i] != 'A' && pfirst == 'C') pathCommands[i] = 'C'; // A is the only command
      // which may produce multiple C:s
      // so we have to make sure that C is also C in original path

      fixArc(curvedPath, i); // fixArc adds also the right amount of A:s to pathCommands

      var seg = curvedPath[i],
          seglen = seg.length;

      attrs.x = seg[seglen - 2];
      attrs.y = seg[seglen - 1];
      attrs.bx = toFloat(seg[seglen - 4]) || attrs.x;
      attrs.by = toFloat(seg[seglen - 3]) || attrs.y;
    }

    // cache curve
    pth.curve = pathClone(curvedPath);

    return curvedPath;
  }

  var intersect = findPathIntersections;

  function roundBounds(bounds) {
    return {
      x: Math.round(bounds.x),
      y: Math.round(bounds.y),
      width: Math.round(bounds.width),
      height: Math.round(bounds.height)
    };
  }


  function roundPoint(point) {

    return {
      x: Math.round(point.x),
      y: Math.round(point.y)
    };
  }


  /**
   * Convert the given bounds to a { top, left, bottom, right } descriptor.
   *
   * @param {Bounds|Point} bounds
   *
   * @return {Object}
   */
  function asTRBL(bounds) {
    return {
      top: bounds.y,
      right: bounds.x + (bounds.width || 0),
      bottom: bounds.y + (bounds.height || 0),
      left: bounds.x
    };
  }


  /**
   * Convert a { top, left, bottom, right } to an objects bounds.
   *
   * @param {Object} trbl
   *
   * @return {Bounds}
   */
  function asBounds(trbl) {
    return {
      x: trbl.left,
      y: trbl.top,
      width: trbl.right - trbl.left,
      height: trbl.bottom - trbl.top
    };
  }


  /**
   * Get the mid of the given bounds or point.
   *
   * @param {Bounds|Point} bounds
   *
   * @return {Point}
   */
  function getBoundsMid(bounds) {
    return roundPoint({
      x: bounds.x + (bounds.width || 0) / 2,
      y: bounds.y + (bounds.height || 0) / 2
    });
  }


  /**
   * Get the mid of the given Connection.
   *
   * @param {djs.Base.Connection} connection
   *
   * @return {Point}
   */
  function getConnectionMid(connection) {
    var waypoints = connection.waypoints;

    // calculate total length and length of each segment
    var parts = waypoints.reduce(function(parts, point, index) {

      var lastPoint = waypoints[index - 1];

      if (lastPoint) {
        var lastPart = parts[parts.length - 1];

        var startLength = lastPart && lastPart.endLength || 0;
        var length = distance(lastPoint, point);

        parts.push({
          start: lastPoint,
          end: point,
          startLength: startLength,
          endLength: startLength + length,
          length: length
        });
      }

      return parts;
    }, []);

    var totalLength = parts.reduce(function(length, part) {
      return length + part.length;
    }, 0);

    // find which segement contains middle point
    var midLength = totalLength / 2;

    var i = 0;
    var midSegment = parts[i];

    while (midSegment.endLength < midLength) {
      midSegment = parts[++i];
    }

    // calculate relative position on mid segment
    var segmentProgress = (midLength - midSegment.startLength) / midSegment.length;

    var midPoint = {
      x: midSegment.start.x + (midSegment.end.x - midSegment.start.x) * segmentProgress,
      y: midSegment.start.y + (midSegment.end.y - midSegment.start.y) * segmentProgress
    };

    return midPoint;
  }


  /**
   * Get the mid of the given Element.
   *
   * @param {djs.Base.Connection} connection
   *
   * @return {Point}
   */
  function getMid(element) {
    if (isConnection$f(element)) {
      return getConnectionMid(element);
    }

    return getBoundsMid(element);
  }

  // orientation utils //////////////////////

  /**
   * Get orientation of the given rectangle with respect to
   * the reference rectangle.
   *
   * A padding (positive or negative) may be passed to influence
   * horizontal / vertical orientation and intersection.
   *
   * @param {Bounds} rect
   * @param {Bounds} reference
   * @param {Point|number} padding
   *
   * @return {string} the orientation; one of top, top-left, left, ..., bottom, right or intersect.
   */
  function getOrientation(rect, reference, padding) {

    padding = padding || 0;

    // make sure we can use an object, too
    // for individual { x, y } padding
    if (!isObject(padding)) {
      padding = { x: padding, y: padding };
    }


    var rectOrientation = asTRBL(rect),
        referenceOrientation = asTRBL(reference);

    var top = rectOrientation.bottom + padding.y <= referenceOrientation.top,
        right = rectOrientation.left - padding.x >= referenceOrientation.right,
        bottom = rectOrientation.top - padding.y >= referenceOrientation.bottom,
        left = rectOrientation.right + padding.x <= referenceOrientation.left;

    var vertical = top ? 'top' : (bottom ? 'bottom' : null),
        horizontal = left ? 'left' : (right ? 'right' : null);

    if (horizontal && vertical) {
      return vertical + '-' + horizontal;
    } else {
      return horizontal || vertical || 'intersect';
    }
  }


  // intersection utils //////////////////////

  /**
   * Get intersection between an element and a line path.
   *
   * @param {PathDef} elementPath
   * @param {PathDef} linePath
   * @param {boolean} cropStart crop from start or end
   *
   * @return {Point}
   */
  function getElementLineIntersection(elementPath, linePath, cropStart) {

    var intersections = getIntersections(elementPath, linePath);

    // recognize intersections
    // only one -> choose
    // two close together -> choose first
    // two or more distinct -> pull out appropriate one
    // none -> ok (fallback to point itself)
    if (intersections.length === 1) {
      return roundPoint(intersections[0]);
    } else if (intersections.length === 2 && pointDistance(intersections[0], intersections[1]) < 1) {
      return roundPoint(intersections[0]);
    } else if (intersections.length > 1) {

      // sort by intersections based on connection segment +
      // distance from start
      intersections = sortBy(intersections, function(i) {
        var distance = Math.floor(i.t2 * 100) || 1;

        distance = 100 - distance;

        distance = (distance < 10 ? '0' : '') + distance;

        // create a sort string that makes sure we sort
        // line segment ASC + line segment position DESC (for cropStart)
        // line segment ASC + line segment position ASC (for cropEnd)
        return i.segment2 + '#' + distance;
      });

      return roundPoint(intersections[cropStart ? 0 : intersections.length - 1]);
    }

    return null;
  }


  function getIntersections(a, b) {
    return intersect(a, b);
  }


  function filterRedundantWaypoints(waypoints) {

    // alter copy of waypoints, not original
    waypoints = waypoints.slice();

    var idx = 0,
        point,
        previousPoint,
        nextPoint;

    while (waypoints[idx]) {
      point = waypoints[idx];
      previousPoint = waypoints[idx - 1];
      nextPoint = waypoints[idx + 1];

      if (pointDistance(point, nextPoint) === 0 ||
          pointsOnLine(previousPoint, nextPoint, point)) {

        // remove point, if overlapping with {nextPoint}
        // or on line with {previousPoint} -> {point} -> {nextPoint}
        waypoints.splice(idx, 1);
      } else {
        idx++;
      }
    }

    return waypoints;
  }

  // helpers //////////////////////

  function distance(a, b) {
    return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
  }

  function isConnection$f(element) {
    return !!element.waypoints;
  }

  function round$b(number, resolution) {
    return Math.round(number * resolution) / resolution;
  }

  function ensurePx(number) {
    return isNumber(number) ? number + 'px' : number;
  }

  function findRoot(element) {
    while (element.parent) {
      element = element.parent;
    }

    return element;
  }

  /**
   * Creates a HTML container element for a SVG element with
   * the given configuration
   *
   * @param  {Object} options
   * @return {HTMLElement} the container element
   */
  function createContainer(options) {

    options = assign({}, { width: '100%', height: '100%' }, options);

    var container = options.container || document.body;

    // create a <div> around the svg element with the respective size
    // this way we can always get the correct container size
    // (this is impossible for <svg> elements at the moment)
    var parent = document.createElement('div');
    parent.setAttribute('class', 'djs-container');

    assign$1(parent, {
      position: 'relative',
      overflow: 'hidden',
      width: ensurePx(options.width),
      height: ensurePx(options.height)
    });

    container.appendChild(parent);

    return parent;
  }

  function createGroup(parent, cls, childIndex) {
    var group = create$1('g');
    classes(group).add(cls);

    var index = childIndex !== undefined ? childIndex : parent.childNodes.length - 1;

    // must ensure second argument is node or _null_
    // cf. https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
    parent.insertBefore(group, parent.childNodes[index] || null);

    return group;
  }

  var BASE_LAYER = 'base';

  // render plane contents behind utility layers
  var PLANE_LAYER_INDEX = 0;
  var UTILITY_LAYER_INDEX = 1;


  var REQUIRED_MODEL_ATTRS = {
    shape: [ 'x', 'y', 'width', 'height' ],
    connection: [ 'waypoints' ]
  };

  /**
   * The main drawing canvas.
   *
   * @class
   * @constructor
   *
   * @emits Canvas#canvas.init
   *
   * @param {Object} config
   * @param {EventBus} eventBus
   * @param {GraphicsFactory} graphicsFactory
   * @param {ElementRegistry} elementRegistry
   */
  function Canvas(config, eventBus, graphicsFactory, elementRegistry) {

    this._eventBus = eventBus;
    this._elementRegistry = elementRegistry;
    this._graphicsFactory = graphicsFactory;

    this._rootsIdx = 0;

    this._layers = {};
    this._planes = [];
    this._rootElement = null;

    this._init(config || {});
  }

  Canvas.$inject = [
    'config.canvas',
    'eventBus',
    'graphicsFactory',
    'elementRegistry'
  ];

  /**
   * Creates a <svg> element that is wrapped into a <div>.
   * This way we are always able to correctly figure out the size of the svg element
   * by querying the parent node.

   * (It is not possible to get the size of a svg element cross browser @ 2014-04-01)

   * <div class="djs-container" style="width: {desired-width}, height: {desired-height}">
   *   <svg width="100%" height="100%">
   *    ...
   *   </svg>
   * </div>
   */
  Canvas.prototype._init = function(config) {

    var eventBus = this._eventBus;

    // html container
    var container = this._container = createContainer(config);

    var svg = this._svg = create$1('svg');
    attr(svg, { width: '100%', height: '100%' });

    append(container, svg);

    var viewport = this._viewport = createGroup(svg, 'viewport');

    // debounce canvas.viewbox.changed events
    // for smoother diagram interaction
    if (config.deferUpdate !== false) {
      this._viewboxChanged = debounce(bind(this._viewboxChanged, this), 300);
    }

    eventBus.on('diagram.init', function() {

      /**
       * An event indicating that the canvas is ready to be drawn on.
       *
       * @memberOf Canvas
       *
       * @event canvas.init
       *
       * @type {Object}
       * @property {SVGElement} svg the created svg element
       * @property {SVGElement} viewport the direct parent of diagram elements and shapes
       */
      eventBus.fire('canvas.init', {
        svg: svg,
        viewport: viewport
      });

    }, this);

    // reset viewbox on shape changes to
    // recompute the viewbox
    eventBus.on([
      'shape.added',
      'connection.added',
      'shape.removed',
      'connection.removed',
      'elements.changed',
      'root.set'
    ], function() {
      delete this._cachedViewbox;
    }, this);

    eventBus.on('diagram.destroy', 500, this._destroy, this);
    eventBus.on('diagram.clear', 500, this._clear, this);
  };

  Canvas.prototype._destroy = function(emit) {
    this._eventBus.fire('canvas.destroy', {
      svg: this._svg,
      viewport: this._viewport
    });

    var parent = this._container.parentNode;

    if (parent) {
      parent.removeChild(this._container);
    }

    delete this._svg;
    delete this._container;
    delete this._layers;
    delete this._planes;
    delete this._rootElement;
    delete this._viewport;
  };

  Canvas.prototype._clear = function() {

    var self = this;

    var allElements = this._elementRegistry.getAll();

    // remove all elements
    allElements.forEach(function(element) {
      var type = getType(element);

      if (type === 'root') {
        self.removeRootElement(element);
      } else {
        self._removeElement(element, type);
      }
    });

    // remove all planes
    this._planes = [];
    this._rootElement = null;

    // force recomputation of view box
    delete this._cachedViewbox;
  };

  /**
   * Returns the default layer on which
   * all elements are drawn.
   *
   * @returns {SVGElement}
   */
  Canvas.prototype.getDefaultLayer = function() {
    return this.getLayer(BASE_LAYER, PLANE_LAYER_INDEX);
  };

  /**
   * Returns a layer that is used to draw elements
   * or annotations on it.
   *
   * Non-existing layers retrieved through this method
   * will be created. During creation, the optional index
   * may be used to create layers below or above existing layers.
   * A layer with a certain index is always created above all
   * existing layers with the same index.
   *
   * @param {string} name
   * @param {number} index
   *
   * @returns {SVGElement}
   */
  Canvas.prototype.getLayer = function(name, index) {

    if (!name) {
      throw new Error('must specify a name');
    }

    var layer = this._layers[name];

    if (!layer) {
      layer = this._layers[name] = this._createLayer(name, index);
    }

    // throw an error if layer creation / retrival is
    // requested on different index
    if (typeof index !== 'undefined' && layer.index !== index) {
      throw new Error('layer <' + name + '> already created at index <' + index + '>');
    }

    return layer.group;
  };

  /**
   * For a given index, return the number of layers that have a higher index and
   * are visible.
   *
   * This is used to determine the node a layer should be inserted at.
   *
   * @param {Number} index
   * @returns {Number}
   */
  Canvas.prototype._getChildIndex = function(index) {
    return reduce(this._layers, function(childIndex, layer) {
      if (layer.visible && index >= layer.index) {
        childIndex++;
      }

      return childIndex;
    }, 0);
  };

  /**
   * Creates a given layer and returns it.
   *
   * @param {string} name
   * @param {number} [index=0]
   *
   * @return {Object} layer descriptor with { index, group: SVGGroup }
   */
  Canvas.prototype._createLayer = function(name, index) {

    if (typeof index === 'undefined') {
      index = UTILITY_LAYER_INDEX;
    }

    var childIndex = this._getChildIndex(index);

    return {
      group: createGroup(this._viewport, 'layer-' + name, childIndex),
      index: index,
      visible: true
    };
  };


  /**
   * Shows a given layer.
   *
   * @param {String} layer
   * @returns {SVGElement}
   */
  Canvas.prototype.showLayer = function(name) {

    if (!name) {
      throw new Error('must specify a name');
    }

    var layer = this._layers[name];

    if (!layer) {
      throw new Error('layer <' + name + '> does not exist');
    }

    var viewport = this._viewport;
    var group = layer.group;
    var index = layer.index;

    if (layer.visible) {
      return group;
    }

    var childIndex = this._getChildIndex(index);

    viewport.insertBefore(group, viewport.childNodes[childIndex] || null);

    layer.visible = true;

    return group;
  };

  /**
   * Hides a given layer.
   *
   * @param {String} layer
   * @returns {SVGElement}
   */
  Canvas.prototype.hideLayer = function(name) {

    if (!name) {
      throw new Error('must specify a name');
    }

    var layer = this._layers[name];

    if (!layer) {
      throw new Error('layer <' + name + '> does not exist');
    }

    var group = layer.group;

    if (!layer.visible) {
      return group;
    }

    remove$1(group);

    layer.visible = false;

    return group;
  };


  Canvas.prototype._removeLayer = function(name) {

    var layer = this._layers[name];

    if (layer) {
      delete this._layers[name];

      remove$1(layer.group);
    }
  };

  /**
   * Returns the currently active layer. Can be null.
   *
   * @returns {SVGElement|null}
   */
  Canvas.prototype.getActiveLayer = function() {
    var plane = this._findPlaneForRoot(this.getRootElement());

    if (!plane) {
      return null;
    }

    return plane.layer;
  };


  /**
   * Returns the plane which contains the given element.
   *
   * @param {string|djs.model.Base} element
   *
   * @return {djs.model.Base} root for element
   */
  Canvas.prototype.findRoot = function(element) {
    if (typeof element === 'string') {
      element = this._elementRegistry.get(element);
    }

    if (!element) {
      return;
    }

    var plane = this._findPlaneForRoot(
      findRoot(element)
    ) || {};

    return plane.rootElement;
  };

  /**
   * Return a list of all root elements on the diagram.
   *
   * @return {djs.model.Root[]}
   */
  Canvas.prototype.getRootElements = function() {
    return this._planes.map(function(plane) {
      return plane.rootElement;
    });
  };

  Canvas.prototype._findPlaneForRoot = function(rootElement) {
    return find(this._planes, function(plane) {
      return plane.rootElement === rootElement;
    });
  };


  /**
   * Returns the html element that encloses the
   * drawing canvas.
   *
   * @return {DOMNode}
   */
  Canvas.prototype.getContainer = function() {
    return this._container;
  };


  // markers //////////////////////

  Canvas.prototype._updateMarker = function(element, marker, add) {
    var container;

    if (!element.id) {
      element = this._elementRegistry.get(element);
    }

    // we need to access all
    container = this._elementRegistry._elements[element.id];

    if (!container) {
      return;
    }

    forEach$1([ container.gfx, container.secondaryGfx ], function(gfx) {
      if (gfx) {

        // invoke either addClass or removeClass based on mode
        if (add) {
          classes(gfx).add(marker);
        } else {
          classes(gfx).remove(marker);
        }
      }
    });

    /**
     * An event indicating that a marker has been updated for an element
     *
     * @event element.marker.update
     * @type {Object}
     * @property {djs.model.Element} element the shape
     * @property {Object} gfx the graphical representation of the shape
     * @property {string} marker
     * @property {boolean} add true if the marker was added, false if it got removed
     */
    this._eventBus.fire('element.marker.update', { element: element, gfx: container.gfx, marker: marker, add: !!add });
  };


  /**
   * Adds a marker to an element (basically a css class).
   *
   * Fires the element.marker.update event, making it possible to
   * integrate extension into the marker life-cycle, too.
   *
   * @example
   * canvas.addMarker('foo', 'some-marker');
   *
   * var fooGfx = canvas.getGraphics('foo');
   *
   * fooGfx; // <g class="... some-marker"> ... </g>
   *
   * @param {string|djs.model.Base} element
   * @param {string} marker
   */
  Canvas.prototype.addMarker = function(element, marker) {
    this._updateMarker(element, marker, true);
  };


  /**
   * Remove a marker from an element.
   *
   * Fires the element.marker.update event, making it possible to
   * integrate extension into the marker life-cycle, too.
   *
   * @param  {string|djs.model.Base} element
   * @param  {string} marker
   */
  Canvas.prototype.removeMarker = function(element, marker) {
    this._updateMarker(element, marker, false);
  };

  /**
   * Check the existence of a marker on element.
   *
   * @param  {string|djs.model.Base} element
   * @param  {string} marker
   */
  Canvas.prototype.hasMarker = function(element, marker) {
    if (!element.id) {
      element = this._elementRegistry.get(element);
    }

    var gfx = this.getGraphics(element);

    return classes(gfx).has(marker);
  };

  /**
   * Toggles a marker on an element.
   *
   * Fires the element.marker.update event, making it possible to
   * integrate extension into the marker life-cycle, too.
   *
   * @param  {string|djs.model.Base} element
   * @param  {string} marker
   */
  Canvas.prototype.toggleMarker = function(element, marker) {
    if (this.hasMarker(element, marker)) {
      this.removeMarker(element, marker);
    } else {
      this.addMarker(element, marker);
    }
  };

  /**
   * Returns the current root element.
   *
   * Supports two different modes for handling root elements:
   *
   * 1. if no root element has been added before, an implicit root will be added
   * and returned. This is used in applications that don't require explicit
   * root elements.
   *
   * 2. when root elements have been added before calling `getRootElement`,
   * root elements can be null. This is used for applications that want to manage
   * root elements themselves.
   *
   * @returns {Object|djs.model.Root|null} rootElement.
   */
  Canvas.prototype.getRootElement = function() {
    var rootElement = this._rootElement;

    // can return null if root elements are present but none was set yet
    if (rootElement || this._planes.length) {
      return rootElement;
    }

    return this.setRootElement(this.addRootElement(null));
  };

  /**
   * Adds a given root element and returns it.
   *
   * @param {Object|djs.model.Root} rootElement
   *
   * @return {Object|djs.model.Root} rootElement
   */

  Canvas.prototype.addRootElement = function(rootElement) {
    var idx = this._rootsIdx++;

    if (!rootElement) {
      rootElement = {
        id: '__implicitroot_' + idx,
        children: [],
        isImplicit: true
      };
    }

    var layerName = rootElement.layer = 'root-' + idx;

    this._ensureValid('root', rootElement);

    var layer = this.getLayer(layerName, PLANE_LAYER_INDEX);

    this.hideLayer(layerName);

    this._addRoot(rootElement, layer);

    this._planes.push({
      rootElement: rootElement,
      layer: layer
    });

    return rootElement;
  };

  /**
   * Removes a given rootElement and returns it.
   *
   * @param {djs.model.Root|String} rootElement
   *
   * @return {Object|djs.model.Root} rootElement
   */
  Canvas.prototype.removeRootElement = function(rootElement) {

    if (typeof rootElement === 'string') {
      rootElement = this._elementRegistry.get(rootElement);
    }

    var plane = this._findPlaneForRoot(rootElement);

    if (!plane) {
      return;
    }

    // hook up life-cycle events
    this._removeRoot(rootElement);

    // clean up layer
    this._removeLayer(rootElement.layer);

    // clean up plane
    this._planes = this._planes.filter(function(plane) {
      return plane.rootElement !== rootElement;
    });

    // clean up active root
    if (this._rootElement === rootElement) {
      this._rootElement = null;
    }

    return rootElement;
  };


  // root element handling //////////////////////

  /**
   * Sets a given element as the new root element for the canvas
   * and returns the new root element.
   *
   * @param {Object|djs.model.Root} rootElement
   *
   * @return {Object|djs.model.Root} new root element
   */
  Canvas.prototype.setRootElement = function(rootElement, override) {

    if (isDefined(override)) {
      throw new Error('override not supported');
    }

    if (rootElement === this._rootElement) {
      return;
    }

    var plane;

    if (!rootElement) {
      throw new Error('rootElement required');
    }

    plane = this._findPlaneForRoot(rootElement);

    // give set add semantics for backwards compatibility
    if (!plane) {
      rootElement = this.addRootElement(rootElement);
    }

    this._setRoot(rootElement);

    return rootElement;
  };


  Canvas.prototype._removeRoot = function(element) {
    var elementRegistry = this._elementRegistry,
        eventBus = this._eventBus;

    // simulate element remove event sequence
    eventBus.fire('root.remove', { element: element });
    eventBus.fire('root.removed', { element: element });

    elementRegistry.remove(element);
  };


  Canvas.prototype._addRoot = function(element, gfx) {
    var elementRegistry = this._elementRegistry,
        eventBus = this._eventBus;

    // resemble element add event sequence
    eventBus.fire('root.add', { element: element });

    elementRegistry.add(element, gfx);

    eventBus.fire('root.added', { element: element, gfx: gfx });
  };


  Canvas.prototype._setRoot = function(rootElement, layer) {

    var currentRoot = this._rootElement;

    if (currentRoot) {

      // un-associate previous root element <svg>
      this._elementRegistry.updateGraphics(currentRoot, null, true);

      // hide previous layer
      this.hideLayer(currentRoot.layer);
    }

    if (rootElement) {

      if (!layer) {
        layer = this._findPlaneForRoot(rootElement).layer;
      }

      // associate element with <svg>
      this._elementRegistry.updateGraphics(rootElement, this._svg, true);

      // show root layer
      this.showLayer(rootElement.layer);
    }

    this._rootElement = rootElement;

    this._eventBus.fire('root.set', { element: rootElement });
  };

  // add functionality //////////////////////

  Canvas.prototype._ensureValid = function(type, element) {
    if (!element.id) {
      throw new Error('element must have an id');
    }

    if (this._elementRegistry.get(element.id)) {
      throw new Error('element <' + element.id + '> already exists');
    }

    var requiredAttrs = REQUIRED_MODEL_ATTRS[type];

    var valid = every(requiredAttrs, function(attr) {
      return typeof element[attr] !== 'undefined';
    });

    if (!valid) {
      throw new Error(
        'must supply { ' + requiredAttrs.join(', ') + ' } with ' + type);
    }
  };

  Canvas.prototype._setParent = function(element, parent, parentIndex) {
    add(parent.children, element, parentIndex);
    element.parent = parent;
  };

  /**
   * Adds an element to the canvas.
   *
   * This wires the parent <-> child relationship between the element and
   * a explicitly specified parent or an implicit root element.
   *
   * During add it emits the events
   *
   *  * <{type}.add> (element, parent)
   *  * <{type}.added> (element, gfx)
   *
   * Extensions may hook into these events to perform their magic.
   *
   * @param {string} type
   * @param {Object|djs.model.Base} element
   * @param {Object|djs.model.Base} [parent]
   * @param {number} [parentIndex]
   *
   * @return {Object|djs.model.Base} the added element
   */
  Canvas.prototype._addElement = function(type, element, parent, parentIndex) {

    parent = parent || this.getRootElement();

    var eventBus = this._eventBus,
        graphicsFactory = this._graphicsFactory;

    this._ensureValid(type, element);

    eventBus.fire(type + '.add', { element: element, parent: parent });

    this._setParent(element, parent, parentIndex);

    // create graphics
    var gfx = graphicsFactory.create(type, element, parentIndex);

    this._elementRegistry.add(element, gfx);

    // update its visual
    graphicsFactory.update(type, element, gfx);

    eventBus.fire(type + '.added', { element: element, gfx: gfx });

    return element;
  };

  /**
   * Adds a shape to the canvas
   *
   * @param {Object|djs.model.Shape} shape to add to the diagram
   * @param {djs.model.Base} [parent]
   * @param {number} [parentIndex]
   *
   * @return {djs.model.Shape} the added shape
   */
  Canvas.prototype.addShape = function(shape, parent, parentIndex) {
    return this._addElement('shape', shape, parent, parentIndex);
  };

  /**
   * Adds a connection to the canvas
   *
   * @param {Object|djs.model.Connection} connection to add to the diagram
   * @param {djs.model.Base} [parent]
   * @param {number} [parentIndex]
   *
   * @return {djs.model.Connection} the added connection
   */
  Canvas.prototype.addConnection = function(connection, parent, parentIndex) {
    return this._addElement('connection', connection, parent, parentIndex);
  };


  /**
   * Internal remove element
   */
  Canvas.prototype._removeElement = function(element, type) {

    var elementRegistry = this._elementRegistry,
        graphicsFactory = this._graphicsFactory,
        eventBus = this._eventBus;

    element = elementRegistry.get(element.id || element);

    if (!element) {

      // element was removed already
      return;
    }

    eventBus.fire(type + '.remove', { element: element });

    graphicsFactory.remove(element);

    // unset parent <-> child relationship
    remove(element.parent && element.parent.children, element);
    element.parent = null;

    eventBus.fire(type + '.removed', { element: element });

    elementRegistry.remove(element);

    return element;
  };


  /**
   * Removes a shape from the canvas
   *
   * @param {string|djs.model.Shape} shape or shape id to be removed
   *
   * @return {djs.model.Shape} the removed shape
   */
  Canvas.prototype.removeShape = function(shape) {

    /**
     * An event indicating that a shape is about to be removed from the canvas.
     *
     * @memberOf Canvas
     *
     * @event shape.remove
     * @type {Object}
     * @property {djs.model.Shape} element the shape descriptor
     * @property {Object} gfx the graphical representation of the shape
     */

    /**
     * An event indicating that a shape has been removed from the canvas.
     *
     * @memberOf Canvas
     *
     * @event shape.removed
     * @type {Object}
     * @property {djs.model.Shape} element the shape descriptor
     * @property {Object} gfx the graphical representation of the shape
     */
    return this._removeElement(shape, 'shape');
  };


  /**
   * Removes a connection from the canvas
   *
   * @param {string|djs.model.Connection} connection or connection id to be removed
   *
   * @return {djs.model.Connection} the removed connection
   */
  Canvas.prototype.removeConnection = function(connection) {

    /**
     * An event indicating that a connection is about to be removed from the canvas.
     *
     * @memberOf Canvas
     *
     * @event connection.remove
     * @type {Object}
     * @property {djs.model.Connection} element the connection descriptor
     * @property {Object} gfx the graphical representation of the connection
     */

    /**
     * An event indicating that a connection has been removed from the canvas.
     *
     * @memberOf Canvas
     *
     * @event connection.removed
     * @type {Object}
     * @property {djs.model.Connection} element the connection descriptor
     * @property {Object} gfx the graphical representation of the connection
     */
    return this._removeElement(connection, 'connection');
  };


  /**
   * Return the graphical object underlaying a certain diagram element
   *
   * @param {string|djs.model.Base} element descriptor of the element
   * @param {boolean} [secondary=false] whether to return the secondary connected element
   *
   * @return {SVGElement}
   */
  Canvas.prototype.getGraphics = function(element, secondary) {
    return this._elementRegistry.getGraphics(element, secondary);
  };


  /**
   * Perform a viewbox update via a given change function.
   *
   * @param {Function} changeFn
   */
  Canvas.prototype._changeViewbox = function(changeFn) {

    // notify others of the upcoming viewbox change
    this._eventBus.fire('canvas.viewbox.changing');

    // perform actual change
    changeFn.apply(this);

    // reset the cached viewbox so that
    // a new get operation on viewbox or zoom
    // triggers a viewbox re-computation
    this._cachedViewbox = null;

    // notify others of the change; this step
    // may or may not be debounced
    this._viewboxChanged();
  };

  Canvas.prototype._viewboxChanged = function() {
    this._eventBus.fire('canvas.viewbox.changed', { viewbox: this.viewbox() });
  };


  /**
   * Gets or sets the view box of the canvas, i.e. the
   * area that is currently displayed.
   *
   * The getter may return a cached viewbox (if it is currently
   * changing). To force a recomputation, pass `false` as the first argument.
   *
   * @example
   *
   * canvas.viewbox({ x: 100, y: 100, width: 500, height: 500 })
   *
   * // sets the visible area of the diagram to (100|100) -> (600|100)
   * // and and scales it according to the diagram width
   *
   * var viewbox = canvas.viewbox(); // pass `false` to force recomputing the box.
   *
   * console.log(viewbox);
   * // {
   * //   inner: Dimensions,
   * //   outer: Dimensions,
   * //   scale,
   * //   x, y,
   * //   width, height
   * // }
   *
   * // if the current diagram is zoomed and scrolled, you may reset it to the
   * // default zoom via this method, too:
   *
   * var zoomedAndScrolledViewbox = canvas.viewbox();
   *
   * canvas.viewbox({
   *   x: 0,
   *   y: 0,
   *   width: zoomedAndScrolledViewbox.outer.width,
   *   height: zoomedAndScrolledViewbox.outer.height
   * });
   *
   * @param  {Object} [box] the new view box to set
   * @param  {number} box.x the top left X coordinate of the canvas visible in view box
   * @param  {number} box.y the top left Y coordinate of the canvas visible in view box
   * @param  {number} box.width the visible width
   * @param  {number} box.height
   *
   * @return {Object} the current view box
   */
  Canvas.prototype.viewbox = function(box) {

    if (box === undefined && this._cachedViewbox) {
      return this._cachedViewbox;
    }

    var viewport = this._viewport,
        innerBox,
        outerBox = this.getSize(),
        matrix,
        activeLayer,
        transform,
        scale,
        x, y;

    if (!box) {

      // compute the inner box based on the
      // diagrams active layer. This allows us to exclude
      // external components, such as overlays

      activeLayer = this._rootElement ? this.getActiveLayer() : null;
      innerBox = activeLayer && activeLayer.getBBox() || {};

      transform = transform$1(viewport);
      matrix = transform ? transform.matrix : createMatrix();
      scale = round$b(matrix.a, 1000);

      x = round$b(-matrix.e || 0, 1000);
      y = round$b(-matrix.f || 0, 1000);

      box = this._cachedViewbox = {
        x: x ? x / scale : 0,
        y: y ? y / scale : 0,
        width: outerBox.width / scale,
        height: outerBox.height / scale,
        scale: scale,
        inner: {
          width: innerBox.width || 0,
          height: innerBox.height || 0,
          x: innerBox.x || 0,
          y: innerBox.y || 0
        },
        outer: outerBox
      };

      return box;
    } else {

      this._changeViewbox(function() {
        scale = Math.min(outerBox.width / box.width, outerBox.height / box.height);

        var matrix = this._svg.createSVGMatrix()
          .scale(scale)
          .translate(-box.x, -box.y);

        transform$1(viewport, matrix);
      });
    }

    return box;
  };


  /**
   * Gets or sets the scroll of the canvas.
   *
   * @param {Object} [delta] the new scroll to apply.
   *
   * @param {number} [delta.dx]
   * @param {number} [delta.dy]
   */
  Canvas.prototype.scroll = function(delta) {

    var node = this._viewport;
    var matrix = node.getCTM();

    if (delta) {
      this._changeViewbox(function() {
        delta = assign({ dx: 0, dy: 0 }, delta || {});

        matrix = this._svg.createSVGMatrix().translate(delta.dx, delta.dy).multiply(matrix);

        setCTM(node, matrix);
      });
    }

    return { x: matrix.e, y: matrix.f };
  };

  /**
   * Scrolls the viewbox to contain the given element.
   * Optionally specify a padding to be applied to the edges.
   *
   * @param {Object|String} [element] the element to scroll to.
   * @param {Object|Number} [padding=100] the padding to be applied. Can also specify top, bottom, left and right.
   *
   */
  Canvas.prototype.scrollToElement = function(element, padding) {
    var defaultPadding = 100;

    if (typeof element === 'string') {
      element = this._elementRegistry.get(element);
    }

    // set to correct rootElement
    var rootElement = this.findRoot(element);

    if (rootElement !== this.getRootElement()) {
      this.setRootElement(rootElement);
    }

    if (!padding) {
      padding = {};
    }
    if (typeof padding === 'number') {
      defaultPadding = padding;
    }

    padding = {
      top: padding.top || defaultPadding,
      right: padding.right || defaultPadding,
      bottom: padding.bottom || defaultPadding,
      left: padding.left || defaultPadding
    };

    var elementBounds = getBBox(element),
        elementTrbl = asTRBL(elementBounds),
        viewboxBounds = this.viewbox(),
        zoom = this.zoom(),
        dx, dy;

    // shrink viewboxBounds with padding
    viewboxBounds.y += padding.top / zoom;
    viewboxBounds.x += padding.left / zoom;
    viewboxBounds.width -= (padding.right + padding.left) / zoom;
    viewboxBounds.height -= (padding.bottom + padding.top) / zoom;

    var viewboxTrbl = asTRBL(viewboxBounds);

    var canFit = elementBounds.width < viewboxBounds.width && elementBounds.height < viewboxBounds.height;

    if (!canFit) {

      // top-left when element can't fit
      dx = elementBounds.x - viewboxBounds.x;
      dy = elementBounds.y - viewboxBounds.y;

    } else {

      var dRight = Math.max(0, elementTrbl.right - viewboxTrbl.right),
          dLeft = Math.min(0, elementTrbl.left - viewboxTrbl.left),
          dBottom = Math.max(0, elementTrbl.bottom - viewboxTrbl.bottom),
          dTop = Math.min(0, elementTrbl.top - viewboxTrbl.top);

      dx = dRight || dLeft;
      dy = dBottom || dTop;

    }

    this.scroll({ dx: -dx * zoom, dy: -dy * zoom });
  };

  /**
   * Gets or sets the current zoom of the canvas, optionally zooming
   * to the specified position.
   *
   * The getter may return a cached zoom level. Call it with `false` as
   * the first argument to force recomputation of the current level.
   *
   * @param {string|number} [newScale] the new zoom level, either a number, i.e. 0.9,
   *                                   or `fit-viewport` to adjust the size to fit the current viewport
   * @param {string|Point} [center] the reference point { x: .., y: ..} to zoom to, 'auto' to zoom into mid or null
   *
   * @return {number} the current scale
   */
  Canvas.prototype.zoom = function(newScale, center) {

    if (!newScale) {
      return this.viewbox(newScale).scale;
    }

    if (newScale === 'fit-viewport') {
      return this._fitViewport(center);
    }

    var outer,
        matrix;

    this._changeViewbox(function() {

      if (typeof center !== 'object') {
        outer = this.viewbox().outer;

        center = {
          x: outer.width / 2,
          y: outer.height / 2
        };
      }

      matrix = this._setZoom(newScale, center);
    });

    return round$b(matrix.a, 1000);
  };

  function setCTM(node, m) {
    var mstr = 'matrix(' + m.a + ',' + m.b + ',' + m.c + ',' + m.d + ',' + m.e + ',' + m.f + ')';
    node.setAttribute('transform', mstr);
  }

  Canvas.prototype._fitViewport = function(center) {

    var vbox = this.viewbox(),
        outer = vbox.outer,
        inner = vbox.inner,
        newScale,
        newViewbox;

    // display the complete diagram without zooming in.
    // instead of relying on internal zoom, we perform a
    // hard reset on the canvas viewbox to realize this
    //
    // if diagram does not need to be zoomed in, we focus it around
    // the diagram origin instead

    if (inner.x >= 0 &&
        inner.y >= 0 &&
        inner.x + inner.width <= outer.width &&
        inner.y + inner.height <= outer.height &&
        !center) {

      newViewbox = {
        x: 0,
        y: 0,
        width: Math.max(inner.width + inner.x, outer.width),
        height: Math.max(inner.height + inner.y, outer.height)
      };
    } else {

      newScale = Math.min(1, outer.width / inner.width, outer.height / inner.height);
      newViewbox = {
        x: inner.x + (center ? inner.width / 2 - outer.width / newScale / 2 : 0),
        y: inner.y + (center ? inner.height / 2 - outer.height / newScale / 2 : 0),
        width: outer.width / newScale,
        height: outer.height / newScale
      };
    }

    this.viewbox(newViewbox);

    return this.viewbox(false).scale;
  };


  Canvas.prototype._setZoom = function(scale, center) {

    var svg = this._svg,
        viewport = this._viewport;

    var matrix = svg.createSVGMatrix();
    var point = svg.createSVGPoint();

    var centerPoint,
        originalPoint,
        currentMatrix,
        scaleMatrix,
        newMatrix;

    currentMatrix = viewport.getCTM();

    var currentScale = currentMatrix.a;

    if (center) {
      centerPoint = assign(point, center);

      // revert applied viewport transformations
      originalPoint = centerPoint.matrixTransform(currentMatrix.inverse());

      // create scale matrix
      scaleMatrix = matrix
        .translate(originalPoint.x, originalPoint.y)
        .scale(1 / currentScale * scale)
        .translate(-originalPoint.x, -originalPoint.y);

      newMatrix = currentMatrix.multiply(scaleMatrix);
    } else {
      newMatrix = matrix.scale(scale);
    }

    setCTM(this._viewport, newMatrix);

    return newMatrix;
  };


  /**
   * Returns the size of the canvas
   *
   * @return {Dimensions}
   */
  Canvas.prototype.getSize = function() {
    return {
      width: this._container.clientWidth,
      height: this._container.clientHeight
    };
  };


  /**
   * Return the absolute bounding box for the given element
   *
   * The absolute bounding box may be used to display overlays in the
   * callers (browser) coordinate system rather than the zoomed in/out
   * canvas coordinates.
   *
   * @param  {ElementDescriptor} element
   * @return {Bounds} the absolute bounding box
   */
  Canvas.prototype.getAbsoluteBBox = function(element) {
    var vbox = this.viewbox();
    var bbox;

    // connection
    // use svg bbox
    if (element.waypoints) {
      var gfx = this.getGraphics(element);

      bbox = gfx.getBBox();
    }

    // shapes
    // use data
    else {
      bbox = element;
    }

    var x = bbox.x * vbox.scale - vbox.x * vbox.scale;
    var y = bbox.y * vbox.scale - vbox.y * vbox.scale;

    var width = bbox.width * vbox.scale;
    var height = bbox.height * vbox.scale;

    return {
      x: x,
      y: y,
      width: width,
      height: height
    };
  };

  /**
   * Fires an event in order other modules can react to the
   * canvas resizing
   */
  Canvas.prototype.resized = function() {

    // force recomputation of view box
    delete this._cachedViewbox;

    this._eventBus.fire('canvas.resized');
  };

  var ELEMENT_ID = 'data-element-id';


  /**
   * @class
   *
   * A registry that keeps track of all shapes in the diagram.
   */
  function ElementRegistry(eventBus) {
    this._elements = {};

    this._eventBus = eventBus;
  }

  ElementRegistry.$inject = [ 'eventBus' ];

  /**
   * Register a pair of (element, gfx, (secondaryGfx)).
   *
   * @param {djs.model.Base} element
   * @param {SVGElement} gfx
   * @param {SVGElement} [secondaryGfx] optional other element to register, too
   */
  ElementRegistry.prototype.add = function(element, gfx, secondaryGfx) {

    var id = element.id;

    this._validateId(id);

    // associate dom node with element
    attr(gfx, ELEMENT_ID, id);

    if (secondaryGfx) {
      attr(secondaryGfx, ELEMENT_ID, id);
    }

    this._elements[id] = { element: element, gfx: gfx, secondaryGfx: secondaryGfx };
  };

  /**
   * Removes an element from the registry.
   *
   * @param {djs.model.Base} element
   */
  ElementRegistry.prototype.remove = function(element) {
    var elements = this._elements,
        id = element.id || element,
        container = id && elements[id];

    if (container) {

      // unset element id on gfx
      attr(container.gfx, ELEMENT_ID, '');

      if (container.secondaryGfx) {
        attr(container.secondaryGfx, ELEMENT_ID, '');
      }

      delete elements[id];
    }
  };

  /**
   * Update the id of an element
   *
   * @param {djs.model.Base} element
   * @param {string} newId
   */
  ElementRegistry.prototype.updateId = function(element, newId) {

    this._validateId(newId);

    if (typeof element === 'string') {
      element = this.get(element);
    }

    this._eventBus.fire('element.updateId', {
      element: element,
      newId: newId
    });

    var gfx = this.getGraphics(element),
        secondaryGfx = this.getGraphics(element, true);

    this.remove(element);

    element.id = newId;

    this.add(element, gfx, secondaryGfx);
  };

  /**
   * Update the graphics of an element
   *
   * @param {djs.model.Base} element
   * @param {SVGElement} gfx
   * @param {boolean} [secondary=false] whether to update the secondary connected element
   */
  ElementRegistry.prototype.updateGraphics = function(filter, gfx, secondary) {
    var id = filter.id || filter;

    var container = this._elements[id];

    if (secondary) {
      container.secondaryGfx = gfx;
    } else {
      container.gfx = gfx;
    }

    if (gfx) {
      attr(gfx, ELEMENT_ID, id);
    }

    return gfx;
  };

  /**
   * Return the model element for a given id or graphics.
   *
   * @example
   *
   * elementRegistry.get('SomeElementId_1');
   * elementRegistry.get(gfx);
   *
   *
   * @param {string|SVGElement} filter for selecting the element
   *
   * @return {djs.model.Base}
   */
  ElementRegistry.prototype.get = function(filter) {
    var id;

    if (typeof filter === 'string') {
      id = filter;
    } else {
      id = filter && attr(filter, ELEMENT_ID);
    }

    var container = this._elements[id];
    return container && container.element;
  };

  /**
   * Return all elements that match a given filter function.
   *
   * @param {Function} fn
   *
   * @return {Array<djs.model.Base>}
   */
  ElementRegistry.prototype.filter = function(fn) {

    var filtered = [];

    this.forEach(function(element, gfx) {
      if (fn(element, gfx)) {
        filtered.push(element);
      }
    });

    return filtered;
  };

  /**
   * Return the first element that satisfies the provided testing function.
   *
   * @param {Function} fn
   *
   * @return {djs.model.Base}
   */
  ElementRegistry.prototype.find = function(fn) {
    var map = this._elements,
        keys = Object.keys(map);

    for (var i = 0; i < keys.length; i++) {
      var id = keys[i],
          container = map[id],
          element = container.element,
          gfx = container.gfx;

      if (fn(element, gfx)) {
        return element;
      }
    }
  };

  /**
   * Return all rendered model elements.
   *
   * @return {Array<djs.model.Base>}
   */
  ElementRegistry.prototype.getAll = function() {
    return this.filter(function(e) { return e; });
  };

  /**
   * Iterate over all diagram elements.
   *
   * @param {Function} fn
   */
  ElementRegistry.prototype.forEach = function(fn) {

    var map = this._elements;

    Object.keys(map).forEach(function(id) {
      var container = map[id],
          element = container.element,
          gfx = container.gfx;

      return fn(element, gfx);
    });
  };

  /**
   * Return the graphical representation of an element or its id.
   *
   * @example
   * elementRegistry.getGraphics('SomeElementId_1');
   * elementRegistry.getGraphics(rootElement); // <g ...>
   *
   * elementRegistry.getGraphics(rootElement, true); // <svg ...>
   *
   *
   * @param {string|djs.model.Base} filter
   * @param {boolean} [secondary=false] whether to return the secondary connected element
   *
   * @return {SVGElement}
   */
  ElementRegistry.prototype.getGraphics = function(filter, secondary) {
    var id = filter.id || filter;

    var container = this._elements[id];
    return container && (secondary ? container.secondaryGfx : container.gfx);
  };

  /**
   * Validate the suitability of the given id and signals a problem
   * with an exception.
   *
   * @param {string} id
   *
   * @throws {Error} if id is empty or already assigned
   */
  ElementRegistry.prototype._validateId = function(id) {
    if (!id) {
      throw new Error('element must have an id');
    }

    if (this._elements[id]) {
      throw new Error('element with id ' + id + ' already added');
    }
  };

  var objectRefs = {exports: {}};

  var collection = {};

  /**
   * An empty collection stub. Use {@link RefsCollection.extend} to extend a
   * collection with ref semantics.
   *
   * @class RefsCollection
   */

  /**
   * Extends a collection with {@link Refs} aware methods
   *
   * @memberof RefsCollection
   * @static
   *
   * @param  {Array<Object>} collection
   * @param  {Refs} refs instance
   * @param  {Object} property represented by the collection
   * @param  {Object} target object the collection is attached to
   *
   * @return {RefsCollection<Object>} the extended array
   */
  function extend(collection, refs, property, target) {

    var inverseProperty = property.inverse;

    /**
     * Removes the given element from the array and returns it.
     *
     * @method RefsCollection#remove
     *
     * @param {Object} element the element to remove
     */
    Object.defineProperty(collection, 'remove', {
      value: function(element) {
        var idx = this.indexOf(element);
        if (idx !== -1) {
          this.splice(idx, 1);

          // unset inverse
          refs.unset(element, inverseProperty, target);
        }

        return element;
      }
    });

    /**
     * Returns true if the collection contains the given element
     *
     * @method RefsCollection#contains
     *
     * @param {Object} element the element to check for
     */
    Object.defineProperty(collection, 'contains', {
      value: function(element) {
        return this.indexOf(element) !== -1;
      }
    });

    /**
     * Adds an element to the array, unless it exists already (set semantics).
     *
     * @method RefsCollection#add
     *
     * @param {Object} element the element to add
     * @param {Number} optional index to add element to
     *                 (possibly moving other elements around)
     */
    Object.defineProperty(collection, 'add', {
      value: function(element, idx) {

        var currentIdx = this.indexOf(element);

        if (typeof idx === 'undefined') {

          if (currentIdx !== -1) {
            // element already in collection (!)
            return;
          }

          // add to end of array, as no idx is specified
          idx = this.length;
        }

        // handle already in collection
        if (currentIdx !== -1) {

          // remove element from currentIdx
          this.splice(currentIdx, 1);
        }

        // add element at idx
        this.splice(idx, 0, element);

        if (currentIdx === -1) {
          // set inverse, unless element was
          // in collection already
          refs.set(element, inverseProperty, target);
        }
      }
    });

    // a simple marker, identifying this element
    // as being a refs collection
    Object.defineProperty(collection, '__refs_collection', {
      value: true
    });

    return collection;
  }


  function isExtended(collection) {
    return collection.__refs_collection === true;
  }

  collection.extend = extend;

  collection.isExtended = isExtended;

  var Collection = collection;

  function hasOwnProperty$1(e, property) {
    return Object.prototype.hasOwnProperty.call(e, property.name || property);
  }

  function defineCollectionProperty(ref, property, target) {

    var collection = Collection.extend(target[property.name] || [], ref, property, target);

    Object.defineProperty(target, property.name, {
      enumerable: property.enumerable,
      value: collection
    });

    if (collection.length) {

      collection.forEach(function(o) {
        ref.set(o, property.inverse, target);
      });
    }
  }


  function defineProperty$1(ref, property, target) {

    var inverseProperty = property.inverse;

    var _value = target[property.name];

    Object.defineProperty(target, property.name, {
      configurable: property.configurable,
      enumerable: property.enumerable,

      get: function() {
        return _value;
      },

      set: function(value) {

        // return if we already performed all changes
        if (value === _value) {
          return;
        }

        var old = _value;

        // temporary set null
        _value = null;

        if (old) {
          ref.unset(old, inverseProperty, target);
        }

        // set new value
        _value = value;

        // set inverse value
        ref.set(_value, inverseProperty, target);
      }
    });

  }

  /**
   * Creates a new references object defining two inversly related
   * attribute descriptors a and b.
   *
   * <p>
   *   When bound to an object using {@link Refs#bind} the references
   *   get activated and ensure that add and remove operations are applied
   *   reversely, too.
   * </p>
   *
   * <p>
   *   For attributes represented as collections {@link Refs} provides the
   *   {@link RefsCollection#add}, {@link RefsCollection#remove} and {@link RefsCollection#contains} extensions
   *   that must be used to properly hook into the inverse change mechanism.
   * </p>
   *
   * @class Refs
   *
   * @classdesc A bi-directional reference between two attributes.
   *
   * @param {Refs.AttributeDescriptor} a property descriptor
   * @param {Refs.AttributeDescriptor} b property descriptor
   *
   * @example
   *
   * var refs = Refs({ name: 'wheels', collection: true, enumerable: true }, { name: 'car' });
   *
   * var car = { name: 'toyota' };
   * var wheels = [{ pos: 'front-left' }, { pos: 'front-right' }];
   *
   * refs.bind(car, 'wheels');
   *
   * car.wheels // []
   * car.wheels.add(wheels[0]);
   * car.wheels.add(wheels[1]);
   *
   * car.wheels // [{ pos: 'front-left' }, { pos: 'front-right' }]
   *
   * wheels[0].car // { name: 'toyota' };
   * car.wheels.remove(wheels[0]);
   *
   * wheels[0].car // undefined
   */
  function Refs$1(a, b) {

    if (!(this instanceof Refs$1)) {
      return new Refs$1(a, b);
    }

    // link
    a.inverse = b;
    b.inverse = a;

    this.props = {};
    this.props[a.name] = a;
    this.props[b.name] = b;
  }

  /**
   * Binds one side of a bi-directional reference to a
   * target object.
   *
   * @memberOf Refs
   *
   * @param  {Object} target
   * @param  {String} property
   */
  Refs$1.prototype.bind = function(target, property) {
    if (typeof property === 'string') {
      if (!this.props[property]) {
        throw new Error('no property <' + property + '> in ref');
      }
      property = this.props[property];
    }

    if (property.collection) {
      defineCollectionProperty(this, property, target);
    } else {
      defineProperty$1(this, property, target);
    }
  };

  Refs$1.prototype.ensureRefsCollection = function(target, property) {

    var collection = target[property.name];

    if (!Collection.isExtended(collection)) {
      defineCollectionProperty(this, property, target);
    }

    return collection;
  };

  Refs$1.prototype.ensureBound = function(target, property) {
    if (!hasOwnProperty$1(target, property)) {
      this.bind(target, property);
    }
  };

  Refs$1.prototype.unset = function(target, property, value) {

    if (target) {
      this.ensureBound(target, property);

      if (property.collection) {
        this.ensureRefsCollection(target, property).remove(value);
      } else {
        target[property.name] = undefined;
      }
    }
  };

  Refs$1.prototype.set = function(target, property, value) {

    if (target) {
      this.ensureBound(target, property);

      if (property.collection) {
        this.ensureRefsCollection(target, property).add(value);
      } else {
        target[property.name] = value;
      }
    }
  };

  var refs = Refs$1;

  (function (module) {
  	module.exports = refs;

  	module.exports.Collection = collection;
  } (objectRefs));

  var Refs = /*@__PURE__*/getDefaultExportFromCjs(objectRefs.exports);

  var parentRefs = new Refs({ name: 'children', enumerable: true, collection: true }, { name: 'parent' }),
      labelRefs = new Refs({ name: 'labels', enumerable: true, collection: true }, { name: 'labelTarget' }),
      attacherRefs = new Refs({ name: 'attachers', collection: true }, { name: 'host' }),
      outgoingRefs = new Refs({ name: 'outgoing', collection: true }, { name: 'source' }),
      incomingRefs = new Refs({ name: 'incoming', collection: true }, { name: 'target' });

  /**
   * @namespace djs.model
   */

  /**
   * @memberOf djs.model
   */

  /**
   * The basic graphical representation
   *
   * @class
   *
   * @abstract
   */
  function Base$1() {

    /**
     * The object that backs up the shape
     *
     * @name Base#businessObject
     * @type Object
     */
    Object.defineProperty(this, 'businessObject', {
      writable: true
    });


    /**
     * Single label support, will mapped to multi label array
     *
     * @name Base#label
     * @type Object
     */
    Object.defineProperty(this, 'label', {
      get: function() {
        return this.labels[0];
      },
      set: function(newLabel) {

        var label = this.label,
            labels = this.labels;

        if (!newLabel && label) {
          labels.remove(label);
        } else {
          labels.add(newLabel, 0);
        }
      }
    });

    /**
     * The parent shape
     *
     * @name Base#parent
     * @type Shape
     */
    parentRefs.bind(this, 'parent');

    /**
     * The list of labels
     *
     * @name Base#labels
     * @type Label
     */
    labelRefs.bind(this, 'labels');

    /**
     * The list of outgoing connections
     *
     * @name Base#outgoing
     * @type Array<Connection>
     */
    outgoingRefs.bind(this, 'outgoing');

    /**
     * The list of incoming connections
     *
     * @name Base#incoming
     * @type Array<Connection>
     */
    incomingRefs.bind(this, 'incoming');
  }


  /**
   * A graphical object
   *
   * @class
   * @constructor
   *
   * @extends Base
   */
  function Shape() {
    Base$1.call(this);

    /**
     * Indicates frame shapes
     *
     * @name Shape#isFrame
     * @type boolean
     */

    /**
     * The list of children
     *
     * @name Shape#children
     * @type Array<Base>
     */
    parentRefs.bind(this, 'children');

    /**
     * @name Shape#host
     * @type Shape
     */
    attacherRefs.bind(this, 'host');

    /**
     * @name Shape#attachers
     * @type Shape
     */
    attacherRefs.bind(this, 'attachers');
  }

  e(Shape, Base$1);


  /**
   * A root graphical object
   *
   * @class
   * @constructor
   *
   * @extends Shape
   */
  function Root() {
    Shape.call(this);
  }

  e(Root, Shape);


  /**
   * A label for an element
   *
   * @class
   * @constructor
   *
   * @extends Shape
   */
  function Label() {
    Shape.call(this);

    /**
     * The labeled element
     *
     * @name Label#labelTarget
     * @type Base
     */
    labelRefs.bind(this, 'labelTarget');
  }

  e(Label, Shape);


  /**
   * A connection between two elements
   *
   * @class
   * @constructor
   *
   * @extends Base
   */
  function Connection() {
    Base$1.call(this);

    /**
     * The element this connection originates from
     *
     * @name Connection#source
     * @type Base
     */
    outgoingRefs.bind(this, 'source');

    /**
     * The element this connection points to
     *
     * @name Connection#target
     * @type Base
     */
    incomingRefs.bind(this, 'target');
  }

  e(Connection, Base$1);


  var types$6 = {
    connection: Connection,
    shape: Shape,
    label: Label,
    root: Root
  };

  /**
   * Creates a new model element of the specified type
   *
   * @method create
   *
   * @example
   *
   * var shape1 = Model.create('shape', { x: 10, y: 10, width: 100, height: 100 });
   * var shape2 = Model.create('shape', { x: 210, y: 210, width: 100, height: 100 });
   *
   * var connection = Model.create('connection', { waypoints: [ { x: 110, y: 55 }, {x: 210, y: 55 } ] });
   *
   * @param  {string} type lower-cased model name
   * @param  {Object} attrs attributes to initialize the new model instance with
   *
   * @return {Base} the new model instance
   */
  function create(type, attrs) {
    var Type = types$6[type];
    if (!Type) {
      throw new Error('unknown type: <' + type + '>');
    }
    return assign(new Type(), attrs);
  }

  /**
   * A factory for diagram-js shapes
   */
  function ElementFactory$1() {
    this._uid = 12;
  }


  ElementFactory$1.prototype.createRoot = function(attrs) {
    return this.create('root', attrs);
  };

  ElementFactory$1.prototype.createLabel = function(attrs) {
    return this.create('label', attrs);
  };

  ElementFactory$1.prototype.createShape = function(attrs) {
    return this.create('shape', attrs);
  };

  ElementFactory$1.prototype.createConnection = function(attrs) {
    return this.create('connection', attrs);
  };

  /**
   * Create a model element with the given type and
   * a number of pre-set attributes.
   *
   * @param  {string} type
   * @param  {Object} attrs
   * @return {djs.model.Base} the newly created model instance
   */
  ElementFactory$1.prototype.create = function(type, attrs) {

    attrs = assign({}, attrs || {});

    if (!attrs.id) {
      attrs.id = type + '_' + (this._uid++);
    }

    return create(type, attrs);
  };

  var FN_REF = '__fn';

  var DEFAULT_PRIORITY$5 = 1000;

  var slice = Array.prototype.slice;

  /**
   * A general purpose event bus.
   *
   * This component is used to communicate across a diagram instance.
   * Other parts of a diagram can use it to listen to and broadcast events.
   *
   *
   * ## Registering for Events
   *
   * The event bus provides the {@link EventBus#on} and {@link EventBus#once}
   * methods to register for events. {@link EventBus#off} can be used to
   * remove event registrations. Listeners receive an instance of {@link Event}
   * as the first argument. It allows them to hook into the event execution.
   *
   * ```javascript
   *
   * // listen for event
   * eventBus.on('foo', function(event) {
   *
   *   // access event type
   *   event.type; // 'foo'
   *
   *   // stop propagation to other listeners
   *   event.stopPropagation();
   *
   *   // prevent event default
   *   event.preventDefault();
   * });
   *
   * // listen for event with custom payload
   * eventBus.on('bar', function(event, payload) {
   *   console.log(payload);
   * });
   *
   * // listen for event returning value
   * eventBus.on('foobar', function(event) {
   *
   *   // stop event propagation + prevent default
   *   return false;
   *
   *   // stop event propagation + return custom result
   *   return {
   *     complex: 'listening result'
   *   };
   * });
   *
   *
   * // listen with custom priority (default=1000, higher is better)
   * eventBus.on('priorityfoo', 1500, function(event) {
   *   console.log('invoked first!');
   * });
   *
   *
   * // listen for event and pass the context (`this`)
   * eventBus.on('foobar', function(event) {
   *   this.foo();
   * }, this);
   * ```
   *
   *
   * ## Emitting Events
   *
   * Events can be emitted via the event bus using {@link EventBus#fire}.
   *
   * ```javascript
   *
   * // false indicates that the default action
   * // was prevented by listeners
   * if (eventBus.fire('foo') === false) {
   *   console.log('default has been prevented!');
   * };
   *
   *
   * // custom args + return value listener
   * eventBus.on('sum', function(event, a, b) {
   *   return a + b;
   * });
   *
   * // you can pass custom arguments + retrieve result values.
   * var sum = eventBus.fire('sum', 1, 2);
   * console.log(sum); // 3
   * ```
   */
  function EventBus() {
    this._listeners = {};

    // cleanup on destroy on lowest priority to allow
    // message passing until the bitter end
    this.on('diagram.destroy', 1, this._destroy, this);
  }


  /**
   * Register an event listener for events with the given name.
   *
   * The callback will be invoked with `event, ...additionalArguments`
   * that have been passed to {@link EventBus#fire}.
   *
   * Returning false from a listener will prevent the events default action
   * (if any is specified). To stop an event from being processed further in
   * other listeners execute {@link Event#stopPropagation}.
   *
   * Returning anything but `undefined` from a listener will stop the listener propagation.
   *
   * @param {string|Array<string>} events
   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
   * @param {Function} callback
   * @param {Object} [that] Pass context (`this`) to the callback
   */
  EventBus.prototype.on = function(events, priority, callback, that) {

    events = isArray$3(events) ? events : [ events ];

    if (isFunction(priority)) {
      that = callback;
      callback = priority;
      priority = DEFAULT_PRIORITY$5;
    }

    if (!isNumber(priority)) {
      throw new Error('priority must be a number');
    }

    var actualCallback = callback;

    if (that) {
      actualCallback = bind(callback, that);

      // make sure we remember and are able to remove
      // bound callbacks via {@link #off} using the original
      // callback
      actualCallback[FN_REF] = callback[FN_REF] || callback;
    }

    var self = this;

    events.forEach(function(e) {
      self._addListener(e, {
        priority: priority,
        callback: actualCallback,
        next: null
      });
    });
  };


  /**
   * Register an event listener that is executed only once.
   *
   * @param {string} event the event name to register for
   * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
   * @param {Function} callback the callback to execute
   * @param {Object} [that] Pass context (`this`) to the callback
   */
  EventBus.prototype.once = function(event, priority, callback, that) {
    var self = this;

    if (isFunction(priority)) {
      that = callback;
      callback = priority;
      priority = DEFAULT_PRIORITY$5;
    }

    if (!isNumber(priority)) {
      throw new Error('priority must be a number');
    }

    function wrappedCallback() {
      wrappedCallback.__isTomb = true;

      var result = callback.apply(that, arguments);

      self.off(event, wrappedCallback);

      return result;
    }

    // make sure we remember and are able to remove
    // bound callbacks via {@link #off} using the original
    // callback
    wrappedCallback[FN_REF] = callback;

    this.on(event, priority, wrappedCallback);
  };


  /**
   * Removes event listeners by event and callback.
   *
   * If no callback is given, all listeners for a given event name are being removed.
   *
   * @param {string|Array<string>} events
   * @param {Function} [callback]
   */
  EventBus.prototype.off = function(events, callback) {

    events = isArray$3(events) ? events : [ events ];

    var self = this;

    events.forEach(function(event) {
      self._removeListener(event, callback);
    });

  };


  /**
   * Create an EventBus event.
   *
   * @param {Object} data
   *
   * @return {Object} event, recognized by the eventBus
   */
  EventBus.prototype.createEvent = function(data) {
    var event = new InternalEvent();

    event.init(data);

    return event;
  };


  /**
   * Fires a named event.
   *
   * @example
   *
   * // fire event by name
   * events.fire('foo');
   *
   * // fire event object with nested type
   * var event = { type: 'foo' };
   * events.fire(event);
   *
   * // fire event with explicit type
   * var event = { x: 10, y: 20 };
   * events.fire('element.moved', event);
   *
   * // pass additional arguments to the event
   * events.on('foo', function(event, bar) {
   *   alert(bar);
   * });
   *
   * events.fire({ type: 'foo' }, 'I am bar!');
   *
   * @param {string} [name] the optional event name
   * @param {Object} [event] the event object
   * @param {...Object} additional arguments to be passed to the callback functions
   *
   * @return {boolean} the events return value, if specified or false if the
   *                   default action was prevented by listeners
   */
  EventBus.prototype.fire = function(type, data) {
    var event,
        firstListener,
        returnValue,
        args;

    args = slice.call(arguments);

    if (typeof type === 'object') {
      data = type;
      type = data.type;
    }

    if (!type) {
      throw new Error('no event type specified');
    }

    firstListener = this._listeners[type];

    if (!firstListener) {
      return;
    }

    // we make sure we fire instances of our home made
    // events here. We wrap them only once, though
    if (data instanceof InternalEvent) {

      // we are fine, we alread have an event
      event = data;
    } else {
      event = this.createEvent(data);
    }

    // ensure we pass the event as the first parameter
    args[0] = event;

    // original event type (in case we delegate)
    var originalType = event.type;

    // update event type before delegation
    if (type !== originalType) {
      event.type = type;
    }

    try {
      returnValue = this._invokeListeners(event, args, firstListener);
    } finally {

      // reset event type after delegation
      if (type !== originalType) {
        event.type = originalType;
      }
    }

    // set the return value to false if the event default
    // got prevented and no other return value exists
    if (returnValue === undefined && event.defaultPrevented) {
      returnValue = false;
    }

    return returnValue;
  };


  EventBus.prototype.handleError = function(error) {
    return this.fire('error', { error: error }) === false;
  };


  EventBus.prototype._destroy = function() {
    this._listeners = {};
  };

  EventBus.prototype._invokeListeners = function(event, args, listener) {

    var returnValue;

    while (listener) {

      // handle stopped propagation
      if (event.cancelBubble) {
        break;
      }

      returnValue = this._invokeListener(event, args, listener);

      listener = listener.next;
    }

    return returnValue;
  };

  EventBus.prototype._invokeListener = function(event, args, listener) {

    var returnValue;

    if (listener.callback.__isTomb) {
      return returnValue;
    }

    try {

      // returning false prevents the default action
      returnValue = invokeFunction(listener.callback, args);

      // stop propagation on return value
      if (returnValue !== undefined) {
        event.returnValue = returnValue;
        event.stopPropagation();
      }

      // prevent default on return false
      if (returnValue === false) {
        event.preventDefault();
      }
    } catch (error) {
      if (!this.handleError(error)) {
        console.error('unhandled error in event listener', error);

        throw error;
      }
    }

    return returnValue;
  };

  /*
   * Add new listener with a certain priority to the list
   * of listeners (for the given event).
   *
   * The semantics of listener registration / listener execution are
   * first register, first serve: New listeners will always be inserted
   * after existing listeners with the same priority.
   *
   * Example: Inserting two listeners with priority 1000 and 1300
   *
   *    * before: [ 1500, 1500, 1000, 1000 ]
   *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
   *
   * @param {string} event
   * @param {Object} listener { priority, callback }
   */
  EventBus.prototype._addListener = function(event, newListener) {

    var listener = this._getListeners(event),
        previousListener;

    // no prior listeners
    if (!listener) {
      this._setListeners(event, newListener);

      return;
    }

    // ensure we order listeners by priority from
    // 0 (high) to n > 0 (low)
    while (listener) {

      if (listener.priority < newListener.priority) {

        newListener.next = listener;

        if (previousListener) {
          previousListener.next = newListener;
        } else {
          this._setListeners(event, newListener);
        }

        return;
      }

      previousListener = listener;
      listener = listener.next;
    }

    // add new listener to back
    previousListener.next = newListener;
  };


  EventBus.prototype._getListeners = function(name) {
    return this._listeners[name];
  };

  EventBus.prototype._setListeners = function(name, listener) {
    this._listeners[name] = listener;
  };

  EventBus.prototype._removeListener = function(event, callback) {

    var listener = this._getListeners(event),
        nextListener,
        previousListener,
        listenerCallback;

    if (!callback) {

      // clear listeners
      this._setListeners(event, null);

      return;
    }

    while (listener) {

      nextListener = listener.next;

      listenerCallback = listener.callback;

      if (listenerCallback === callback || listenerCallback[FN_REF] === callback) {
        if (previousListener) {
          previousListener.next = nextListener;
        } else {

          // new first listener
          this._setListeners(event, nextListener);
        }
      }

      previousListener = listener;
      listener = nextListener;
    }
  };

  /**
   * A event that is emitted via the event bus.
   */
  function InternalEvent() { }

  InternalEvent.prototype.stopPropagation = function() {
    this.cancelBubble = true;
  };

  InternalEvent.prototype.preventDefault = function() {
    this.defaultPrevented = true;
  };

  InternalEvent.prototype.init = function(data) {
    assign(this, data || {});
  };


  /**
   * Invoke function. Be fast...
   *
   * @param {Function} fn
   * @param {Array<Object>} args
   *
   * @return {Any}
   */
  function invokeFunction(fn, args) {
    return fn.apply(null, args);
  }

  /**
   * SVGs for elements are generated by the {@link GraphicsFactory}.
   *
   * This utility gives quick access to the important semantic
   * parts of an element.
   */

  /**
   * Returns the visual part of a diagram element
   *
   * @param {Snap<SVGElement>} gfx
   *
   * @return {Snap<SVGElement>}
   */
  function getVisual(gfx) {
    return gfx.childNodes[0];
  }

  /**
   * Returns the children for a given diagram element.
   *
   * @param {Snap<SVGElement>} gfx
   * @return {Snap<SVGElement>}
   */
  function getChildren$1(gfx) {
    return gfx.parentNode.childNodes[1];
  }

  /**
   * @param {<SVGElement>} element
   * @param {number} x
   * @param {number} y
   * @param {number} angle
   * @param {number} amount
   */
  function transform(gfx, x, y, angle, amount) {
    var translate = createTransform();
    translate.setTranslate(x, y);

    var rotate = createTransform();
    rotate.setRotate(angle || 0, 0, 0);

    var scale = createTransform();
    scale.setScale(amount || 1, amount || 1);

    transform$1(gfx, [ translate, rotate, scale ]);
  }


  /**
   * @param {SVGElement} element
   * @param {number} x
   * @param {number} y
   */
  function translate$2(gfx, x, y) {
    var translate = createTransform();
    translate.setTranslate(x, y);

    transform$1(gfx, translate);
  }


  /**
   * @param {SVGElement} element
   * @param {number} angle
   */
  function rotate(gfx, angle) {
    var rotate = createTransform();
    rotate.setRotate(angle, 0, 0);

    transform$1(gfx, rotate);
  }

  /**
   * A factory that creates graphical elements
   *
   * @param {EventBus} eventBus
   * @param {ElementRegistry} elementRegistry
   */
  function GraphicsFactory(eventBus, elementRegistry) {
    this._eventBus = eventBus;
    this._elementRegistry = elementRegistry;
  }

  GraphicsFactory.$inject = [ 'eventBus' , 'elementRegistry' ];


  GraphicsFactory.prototype._getChildrenContainer = function(element) {

    var gfx = this._elementRegistry.getGraphics(element);

    var childrenGfx;

    // root element
    if (!element.parent) {
      childrenGfx = gfx;
    } else {
      childrenGfx = getChildren$1(gfx);
      if (!childrenGfx) {
        childrenGfx = create$1('g');
        classes(childrenGfx).add('djs-children');

        append(gfx.parentNode, childrenGfx);
      }
    }

    return childrenGfx;
  };

  /**
   * Clears the graphical representation of the element and returns the
   * cleared visual (the <g class="djs-visual" /> element).
   */
  GraphicsFactory.prototype._clear = function(gfx) {
    var visual = getVisual(gfx);

    clear$1(visual);

    return visual;
  };

  /**
   * Creates a gfx container for shapes and connections
   *
   * The layout is as follows:
   *
   * <g class="djs-group">
   *
   *   <!-- the gfx -->
   *   <g class="djs-element djs-(shape|connection|frame)">
   *     <g class="djs-visual">
   *       <!-- the renderer draws in here -->
   *     </g>
   *
   *     <!-- extensions (overlays, click box, ...) goes here
   *   </g>
   *
   *   <!-- the gfx child nodes -->
   *   <g class="djs-children"></g>
   * </g>
   *
   * @param {string} type the type of the element, i.e. shape | connection
   * @param {SVGElement} [childrenGfx]
   * @param {number} [parentIndex] position to create container in parent
   * @param {boolean} [isFrame] is frame element
   *
   * @return {SVGElement}
   */
  GraphicsFactory.prototype._createContainer = function(
      type, childrenGfx, parentIndex, isFrame
  ) {
    var outerGfx = create$1('g');
    classes(outerGfx).add('djs-group');

    // insert node at position
    if (typeof parentIndex !== 'undefined') {
      prependTo(outerGfx, childrenGfx, childrenGfx.childNodes[parentIndex]);
    } else {
      append(childrenGfx, outerGfx);
    }

    var gfx = create$1('g');
    classes(gfx).add('djs-element');
    classes(gfx).add('djs-' + type);

    if (isFrame) {
      classes(gfx).add('djs-frame');
    }

    append(outerGfx, gfx);

    // create visual
    var visual = create$1('g');
    classes(visual).add('djs-visual');

    append(gfx, visual);

    return gfx;
  };

  GraphicsFactory.prototype.create = function(type, element, parentIndex) {
    var childrenGfx = this._getChildrenContainer(element.parent);
    return this._createContainer(type, childrenGfx, parentIndex, isFrameElement$1(element));
  };

  GraphicsFactory.prototype.updateContainments = function(elements) {

    var self = this,
        elementRegistry = this._elementRegistry,
        parents;

    parents = reduce(elements, function(map, e) {

      if (e.parent) {
        map[e.parent.id] = e.parent;
      }

      return map;
    }, {});

    // update all parents of changed and reorganized their children
    // in the correct order (as indicated in our model)
    forEach$1(parents, function(parent) {

      var children = parent.children;

      if (!children) {
        return;
      }

      var childrenGfx = self._getChildrenContainer(parent);

      forEach$1(children.slice().reverse(), function(child) {
        var childGfx = elementRegistry.getGraphics(child);

        prependTo(childGfx.parentNode, childrenGfx);
      });
    });
  };

  GraphicsFactory.prototype.drawShape = function(visual, element) {
    var eventBus = this._eventBus;

    return eventBus.fire('render.shape', { gfx: visual, element: element });
  };

  GraphicsFactory.prototype.getShapePath = function(element) {
    var eventBus = this._eventBus;

    return eventBus.fire('render.getShapePath', element);
  };

  GraphicsFactory.prototype.drawConnection = function(visual, element) {
    var eventBus = this._eventBus;

    return eventBus.fire('render.connection', { gfx: visual, element: element });
  };

  GraphicsFactory.prototype.getConnectionPath = function(waypoints) {
    var eventBus = this._eventBus;

    return eventBus.fire('render.getConnectionPath', waypoints);
  };

  GraphicsFactory.prototype.update = function(type, element, gfx) {

    // do NOT update root element
    if (!element.parent) {
      return;
    }

    var visual = this._clear(gfx);

    // redraw
    if (type === 'shape') {
      this.drawShape(visual, element);

      // update positioning
      translate$2(gfx, element.x, element.y);
    } else
    if (type === 'connection') {
      this.drawConnection(visual, element);
    } else {
      throw new Error('unknown type: ' + type);
    }

    if (element.hidden) {
      attr(gfx, 'display', 'none');
    } else {
      attr(gfx, 'display', 'block');
    }
  };

  GraphicsFactory.prototype.remove = function(element) {
    var gfx = this._elementRegistry.getGraphics(element);

    // remove
    remove$1(gfx.parentNode);
  };


  // helpers //////////

  function prependTo(newNode, parentNode, siblingNode) {
    var node = siblingNode || parentNode.firstChild;

    // do not prepend node to itself to prevent IE from crashing
    // https://github.com/bpmn-io/bpmn-js/issues/746
    if (newNode === node) {
      return;
    }

    parentNode.insertBefore(newNode, node);
  }

  var CoreModule$1 = {
    __depends__: [ DrawModule$1 ],
    __init__: [ 'canvas' ],
    canvas: [ 'type', Canvas ],
    elementRegistry: [ 'type', ElementRegistry ],
    elementFactory: [ 'type', ElementFactory$1 ],
    eventBus: [ 'type', EventBus ],
    graphicsFactory: [ 'type', GraphicsFactory ]
  };

  /**
   * @typedef { import('didi').ModuleDeclaration } Module
   */

  /**
   * Bootstrap an injector from a list of modules, instantiating a number of default components
   *
   * @param {Array<Module>} modules
   *
   * @return {Injector} a injector to use to access the components
   */
  function bootstrap(modules) {
    var injector = new Injector(modules);

    injector.init();

    return injector;
  }

  /**
   * Creates an injector from passed options.
   *
   * @param {Object} options
   * @return {Injector}
   */
  function createInjector(options) {

    options = options || {};

    var configModule = {
      'config': [ 'value', options ]
    };

    var modules = [ configModule, CoreModule$1 ].concat(options.modules || []);

    return bootstrap(modules);
  }


  /**
   * The main diagram-js entry point that bootstraps the diagram with the given
   * configuration.
   *
   * To register extensions with the diagram, pass them as Array<Module> to the constructor.
   *
   * @class djs.Diagram
   * @memberOf djs
   * @constructor
   *
   * @example
   *
   * <caption>Creating a plug-in that logs whenever a shape is added to the canvas.</caption>
   *
   * // plug-in implemenentation
   * function MyLoggingPlugin(eventBus) {
   *   eventBus.on('shape.added', function(event) {
   *     console.log('shape ', event.shape, ' was added to the diagram');
   *   });
   * }
   *
   * // export as module
   * export default {
   *   __init__: [ 'myLoggingPlugin' ],
   *     myLoggingPlugin: [ 'type', MyLoggingPlugin ]
   * };
   *
   *
   * // instantiate the diagram with the new plug-in
   *
   * import MyLoggingModule from 'path-to-my-logging-plugin';
   *
   * var diagram = new Diagram({
   *   modules: [
   *     MyLoggingModule
   *   ]
   * });
   *
   * diagram.invoke([ 'canvas', function(canvas) {
   *   // add shape to drawing canvas
   *   canvas.addShape({ x: 10, y: 10 });
   * });
   *
   * // 'shape ... was added to the diagram' logged to console
   *
   * @param {Object} options
   * @param {Array<Module>} [options.modules] external modules to instantiate with the diagram
   * @param {Injector} [injector] an (optional) injector to bootstrap the diagram with
   */
  function Diagram(options, injector) {

    // create injector unless explicitly specified
    this.injector = injector = injector || createInjector(options);

    // API

    /**
     * Resolves a diagram service
     *
     * @method Diagram#get
     *
     * @param {string} name the name of the diagram service to be retrieved
     * @param {boolean} [strict=true] if false, resolve missing services to null
     */
    this.get = injector.get;

    /**
     * Executes a function into which diagram services are injected
     *
     * @method Diagram#invoke
     *
     * @param {Function|Object[]} fn the function to resolve
     * @param {Object} locals a number of locals to use to resolve certain dependencies
     */
    this.invoke = injector.invoke;

    // init

    // indicate via event


    /**
     * An event indicating that all plug-ins are loaded.
     *
     * Use this event to fire other events to interested plug-ins
     *
     * @memberOf Diagram
     *
     * @event diagram.init
     *
     * @example
     *
     * eventBus.on('diagram.init', function() {
     *   eventBus.fire('my-custom-event', { foo: 'BAR' });
     * });
     *
     * @type {Object}
     */
    this.get('eventBus').fire('diagram.init');
  }


  /**
   * Destroys the diagram
   *
   * @method  Diagram#destroy
   */
  Diagram.prototype.destroy = function() {
    this.get('eventBus').fire('diagram.destroy');
  };

  /**
   * Clear the diagram, removing all contents.
   */
  Diagram.prototype.clear = function() {
    this.get('eventBus').fire('diagram.clear');
  };

  /**
   * Moddle base element.
   */
  function Base() { }

  Base.prototype.get = function(name) {
    return this.$model.properties.get(this, name);
  };

  Base.prototype.set = function(name, value) {
    this.$model.properties.set(this, name, value);
  };

  /**
   * A model element factory.
   *
   * @param {Moddle} model
   * @param {Properties} properties
   */
  function Factory(model, properties) {
    this.model = model;
    this.properties = properties;
  }


  Factory.prototype.createType = function(descriptor) {

    var model = this.model;

    var props = this.properties,
        prototype = Object.create(Base.prototype);

    // initialize default values
    forEach$1(descriptor.properties, function(p) {
      if (!p.isMany && p.default !== undefined) {
        prototype[p.name] = p.default;
      }
    });

    props.defineModel(prototype, model);
    props.defineDescriptor(prototype, descriptor);

    var name = descriptor.ns.name;

    /**
     * The new type constructor
     */
    function ModdleElement(attrs) {
      props.define(this, '$type', { value: name, enumerable: true });
      props.define(this, '$attrs', { value: {} });
      props.define(this, '$parent', { writable: true });

      forEach$1(attrs, bind(function(val, key) {
        this.set(key, val);
      }, this));
    }

    ModdleElement.prototype = prototype;

    ModdleElement.hasType = prototype.$instanceOf = this.model.hasType;

    // static links
    props.defineModel(ModdleElement, model);
    props.defineDescriptor(ModdleElement, descriptor);

    return ModdleElement;
  };

  /**
   * Built-in moddle types
   */
  var BUILTINS = {
    String: true,
    Boolean: true,
    Integer: true,
    Real: true,
    Element: true
  };

  /**
   * Converters for built in types from string representations
   */
  var TYPE_CONVERTERS = {
    String: function(s) { return s; },
    Boolean: function(s) { return s === 'true'; },
    Integer: function(s) { return parseInt(s, 10); },
    Real: function(s) { return parseFloat(s); }
  };

  /**
   * Convert a type to its real representation
   */
  function coerceType(type, value) {

    var converter = TYPE_CONVERTERS[type];

    if (converter) {
      return converter(value);
    } else {
      return value;
    }
  }

  /**
   * Return whether the given type is built-in
   */
  function isBuiltIn(type) {
    return !!BUILTINS[type];
  }

  /**
   * Return whether the given type is simple
   */
  function isSimple(type) {
    return !!TYPE_CONVERTERS[type];
  }

  /**
   * Parses a namespaced attribute name of the form (ns:)localName to an object,
   * given a default prefix to assume in case no explicit namespace is given.
   *
   * @param {String} name
   * @param {String} [defaultPrefix] the default prefix to take, if none is present.
   *
   * @return {Object} the parsed name
   */
  function parseName(name, defaultPrefix) {
    var parts = name.split(/:/),
        localName, prefix;

    // no prefix (i.e. only local name)
    if (parts.length === 1) {
      localName = name;
      prefix = defaultPrefix;
    } else
    // prefix + local name
    if (parts.length === 2) {
      localName = parts[1];
      prefix = parts[0];
    } else {
      throw new Error('expected <prefix:localName> or <localName>, got ' + name);
    }

    name = (prefix ? prefix + ':' : '') + localName;

    return {
      name: name,
      prefix: prefix,
      localName: localName
    };
  }

  /**
   * A utility to build element descriptors.
   */
  function DescriptorBuilder(nameNs) {
    this.ns = nameNs;
    this.name = nameNs.name;
    this.allTypes = [];
    this.allTypesByName = {};
    this.properties = [];
    this.propertiesByName = {};
  }


  DescriptorBuilder.prototype.build = function() {
    return pick(this, [
      'ns',
      'name',
      'allTypes',
      'allTypesByName',
      'properties',
      'propertiesByName',
      'bodyProperty',
      'idProperty'
    ]);
  };

  /**
   * Add property at given index.
   *
   * @param {Object} p
   * @param {Number} [idx]
   * @param {Boolean} [validate=true]
   */
  DescriptorBuilder.prototype.addProperty = function(p, idx, validate) {

    if (typeof idx === 'boolean') {
      validate = idx;
      idx = undefined;
    }

    this.addNamedProperty(p, validate !== false);

    var properties = this.properties;

    if (idx !== undefined) {
      properties.splice(idx, 0, p);
    } else {
      properties.push(p);
    }
  };


  DescriptorBuilder.prototype.replaceProperty = function(oldProperty, newProperty, replace) {
    var oldNameNs = oldProperty.ns;

    var props = this.properties,
        propertiesByName = this.propertiesByName,
        rename = oldProperty.name !== newProperty.name;

    if (oldProperty.isId) {
      if (!newProperty.isId) {
        throw new Error(
          'property <' + newProperty.ns.name + '> must be id property ' +
          'to refine <' + oldProperty.ns.name + '>');
      }

      this.setIdProperty(newProperty, false);
    }

    if (oldProperty.isBody) {

      if (!newProperty.isBody) {
        throw new Error(
          'property <' + newProperty.ns.name + '> must be body property ' +
          'to refine <' + oldProperty.ns.name + '>');
      }

      // TODO: Check compatibility
      this.setBodyProperty(newProperty, false);
    }

    // validate existence and get location of old property
    var idx = props.indexOf(oldProperty);
    if (idx === -1) {
      throw new Error('property <' + oldNameNs.name + '> not found in property list');
    }

    // remove old property
    props.splice(idx, 1);

    // replacing the named property is intentional
    //
    //  * validate only if this is a "rename" operation
    //  * add at specific index unless we "replace"
    //
    this.addProperty(newProperty, replace ? undefined : idx, rename);

    // make new property available under old name
    propertiesByName[oldNameNs.name] = propertiesByName[oldNameNs.localName] = newProperty;
  };


  DescriptorBuilder.prototype.redefineProperty = function(p, targetPropertyName, replace) {

    var nsPrefix = p.ns.prefix;
    var parts = targetPropertyName.split('#');

    var name = parseName(parts[0], nsPrefix);
    var attrName = parseName(parts[1], name.prefix).name;

    var redefinedProperty = this.propertiesByName[attrName];
    if (!redefinedProperty) {
      throw new Error('refined property <' + attrName + '> not found');
    } else {
      this.replaceProperty(redefinedProperty, p, replace);
    }

    delete p.redefines;
  };

  DescriptorBuilder.prototype.addNamedProperty = function(p, validate) {
    var ns = p.ns,
        propsByName = this.propertiesByName;

    if (validate) {
      this.assertNotDefined(p, ns.name);
      this.assertNotDefined(p, ns.localName);
    }

    propsByName[ns.name] = propsByName[ns.localName] = p;
  };

  DescriptorBuilder.prototype.removeNamedProperty = function(p) {
    var ns = p.ns,
        propsByName = this.propertiesByName;

    delete propsByName[ns.name];
    delete propsByName[ns.localName];
  };

  DescriptorBuilder.prototype.setBodyProperty = function(p, validate) {

    if (validate && this.bodyProperty) {
      throw new Error(
        'body property defined multiple times ' +
        '(<' + this.bodyProperty.ns.name + '>, <' + p.ns.name + '>)');
    }

    this.bodyProperty = p;
  };

  DescriptorBuilder.prototype.setIdProperty = function(p, validate) {

    if (validate && this.idProperty) {
      throw new Error(
        'id property defined multiple times ' +
        '(<' + this.idProperty.ns.name + '>, <' + p.ns.name + '>)');
    }

    this.idProperty = p;
  };

  DescriptorBuilder.prototype.assertNotDefined = function(p, name) {
    var propertyName = p.name,
        definedProperty = this.propertiesByName[propertyName];

    if (definedProperty) {
      throw new Error(
        'property <' + propertyName + '> already defined; ' +
        'override of <' + definedProperty.definedBy.ns.name + '#' + definedProperty.ns.name + '> by ' +
        '<' + p.definedBy.ns.name + '#' + p.ns.name + '> not allowed without redefines');
    }
  };

  DescriptorBuilder.prototype.hasProperty = function(name) {
    return this.propertiesByName[name];
  };

  DescriptorBuilder.prototype.addTrait = function(t, inherited) {

    var typesByName = this.allTypesByName,
        types = this.allTypes;

    var typeName = t.name;

    if (typeName in typesByName) {
      return;
    }

    forEach$1(t.properties, bind(function(p) {

      // clone property to allow extensions
      p = assign({}, p, {
        name: p.ns.localName,
        inherited: inherited
      });

      Object.defineProperty(p, 'definedBy', {
        value: t
      });

      var replaces = p.replaces,
          redefines = p.redefines;

      // add replace/redefine support
      if (replaces || redefines) {
        this.redefineProperty(p, replaces || redefines, replaces);
      } else {
        if (p.isBody) {
          this.setBodyProperty(p);
        }
        if (p.isId) {
          this.setIdProperty(p);
        }
        this.addProperty(p);
      }
    }, this));

    types.push(t);
    typesByName[typeName] = t;
  };

  /**
   * A registry of Moddle packages.
   *
   * @param {Array<Package>} packages
   * @param {Properties} properties
   */
  function Registry(packages, properties) {
    this.packageMap = {};
    this.typeMap = {};

    this.packages = [];

    this.properties = properties;

    forEach$1(packages, bind(this.registerPackage, this));
  }


  Registry.prototype.getPackage = function(uriOrPrefix) {
    return this.packageMap[uriOrPrefix];
  };

  Registry.prototype.getPackages = function() {
    return this.packages;
  };


  Registry.prototype.registerPackage = function(pkg) {

    // copy package
    pkg = assign({}, pkg);

    var pkgMap = this.packageMap;

    ensureAvailable(pkgMap, pkg, 'prefix');
    ensureAvailable(pkgMap, pkg, 'uri');

    // register types
    forEach$1(pkg.types, bind(function(descriptor) {
      this.registerType(descriptor, pkg);
    }, this));

    pkgMap[pkg.uri] = pkgMap[pkg.prefix] = pkg;
    this.packages.push(pkg);
  };


  /**
   * Register a type from a specific package with us
   */
  Registry.prototype.registerType = function(type, pkg) {

    type = assign({}, type, {
      superClass: (type.superClass || []).slice(),
      extends: (type.extends || []).slice(),
      properties: (type.properties || []).slice(),
      meta: assign((type.meta || {}))
    });

    var ns = parseName(type.name, pkg.prefix),
        name = ns.name,
        propertiesByName = {};

    // parse properties
    forEach$1(type.properties, bind(function(p) {

      // namespace property names
      var propertyNs = parseName(p.name, ns.prefix),
          propertyName = propertyNs.name;

      // namespace property types
      if (!isBuiltIn(p.type)) {
        p.type = parseName(p.type, propertyNs.prefix).name;
      }

      assign(p, {
        ns: propertyNs,
        name: propertyName
      });

      propertiesByName[propertyName] = p;
    }, this));

    // update ns + name
    assign(type, {
      ns: ns,
      name: name,
      propertiesByName: propertiesByName
    });

    forEach$1(type.extends, bind(function(extendsName) {
      var extended = this.typeMap[extendsName];

      extended.traits = extended.traits || [];
      extended.traits.push(name);
    }, this));

    // link to package
    this.definePackage(type, pkg);

    // register
    this.typeMap[name] = type;
  };


  /**
   * Traverse the type hierarchy from bottom to top,
   * calling iterator with (type, inherited) for all elements in
   * the inheritance chain.
   *
   * @param {Object} nsName
   * @param {Function} iterator
   * @param {Boolean} [trait=false]
   */
  Registry.prototype.mapTypes = function(nsName, iterator, trait) {

    var type = isBuiltIn(nsName.name) ? { name: nsName.name } : this.typeMap[nsName.name];

    var self = this;

    /**
     * Traverse the selected trait.
     *
     * @param {String} cls
     */
    function traverseTrait(cls) {
      return traverseSuper(cls, true);
    }

    /**
     * Traverse the selected super type or trait
     *
     * @param {String} cls
     * @param {Boolean} [trait=false]
     */
    function traverseSuper(cls, trait) {
      var parentNs = parseName(cls, isBuiltIn(cls) ? '' : nsName.prefix);
      self.mapTypes(parentNs, iterator, trait);
    }

    if (!type) {
      throw new Error('unknown type <' + nsName.name + '>');
    }

    forEach$1(type.superClass, trait ? traverseTrait : traverseSuper);

    // call iterator with (type, inherited=!trait)
    iterator(type, !trait);

    forEach$1(type.traits, traverseTrait);
  };


  /**
   * Returns the effective descriptor for a type.
   *
   * @param  {String} type the namespaced name (ns:localName) of the type
   *
   * @return {Descriptor} the resulting effective descriptor
   */
  Registry.prototype.getEffectiveDescriptor = function(name) {

    var nsName = parseName(name);

    var builder = new DescriptorBuilder(nsName);

    this.mapTypes(nsName, function(type, inherited) {
      builder.addTrait(type, inherited);
    });

    var descriptor = builder.build();

    // define package link
    this.definePackage(descriptor, descriptor.allTypes[descriptor.allTypes.length - 1].$pkg);

    return descriptor;
  };


  Registry.prototype.definePackage = function(target, pkg) {
    this.properties.define(target, '$pkg', { value: pkg });
  };



  ///////// helpers ////////////////////////////

  function ensureAvailable(packageMap, pkg, identifierKey) {

    var value = pkg[identifierKey];

    if (value in packageMap) {
      throw new Error('package with ' + identifierKey + ' <' + value + '> already defined');
    }
  }

  /**
   * A utility that gets and sets properties of model elements.
   *
   * @param {Model} model
   */
  function Properties(model) {
    this.model = model;
  }


  /**
   * Sets a named property on the target element.
   * If the value is undefined, the property gets deleted.
   *
   * @param {Object} target
   * @param {String} name
   * @param {Object} value
   */
  Properties.prototype.set = function(target, name, value) {

    var property = this.model.getPropertyDescriptor(target, name);

    var propertyName = property && property.name;

    if (isUndefined(value)) {
      // unset the property, if the specified value is undefined;
      // delete from $attrs (for extensions) or the target itself
      if (property) {
        delete target[propertyName];
      } else {
        delete target.$attrs[name];
      }
    } else {
      // set the property, defining well defined properties on the fly
      // or simply updating them in target.$attrs (for extensions)
      if (property) {
        if (propertyName in target) {
          target[propertyName] = value;
        } else {
          defineProperty(target, property, value);
        }
      } else {
        target.$attrs[name] = value;
      }
    }
  };

  /**
   * Returns the named property of the given element
   *
   * @param  {Object} target
   * @param  {String} name
   *
   * @return {Object}
   */
  Properties.prototype.get = function(target, name) {

    var property = this.model.getPropertyDescriptor(target, name);

    if (!property) {
      return target.$attrs[name];
    }

    var propertyName = property.name;

    // check if access to collection property and lazily initialize it
    if (!target[propertyName] && property.isMany) {
      defineProperty(target, property, []);
    }

    return target[propertyName];
  };


  /**
   * Define a property on the target element
   *
   * @param  {Object} target
   * @param  {String} name
   * @param  {Object} options
   */
  Properties.prototype.define = function(target, name, options) {

    if (!options.writable) {

      var value = options.value;

      // use getters for read-only variables to support ES6 proxies
      // cf. https://github.com/bpmn-io/internal-docs/issues/386
      options = assign({}, options, {
        get: function() { return value; }
      });

      delete options.value;
    }

    Object.defineProperty(target, name, options);
  };


  /**
   * Define the descriptor for an element
   */
  Properties.prototype.defineDescriptor = function(target, descriptor) {
    this.define(target, '$descriptor', { value: descriptor });
  };

  /**
   * Define the model for an element
   */
  Properties.prototype.defineModel = function(target, model) {
    this.define(target, '$model', { value: model });
  };


  function isUndefined(val) {
    return typeof val === 'undefined';
  }

  function defineProperty(target, property, value) {
    Object.defineProperty(target, property.name, {
      enumerable: !property.isReference,
      writable: true,
      value: value,
      configurable: true
    });
  }

  //// Moddle implementation /////////////////////////////////////////////////

  /**
   * @class Moddle
   *
   * A model that can be used to create elements of a specific type.
   *
   * @example
   *
   * var Moddle = require('moddle');
   *
   * var pkg = {
   *   name: 'mypackage',
   *   prefix: 'my',
   *   types: [
   *     { name: 'Root' }
   *   ]
   * };
   *
   * var moddle = new Moddle([pkg]);
   *
   * @param {Array<Package>} packages the packages to contain
   */
  function Moddle(packages) {

    this.properties = new Properties(this);

    this.factory = new Factory(this, this.properties);
    this.registry = new Registry(packages, this.properties);

    this.typeCache = {};
  }


  /**
   * Create an instance of the specified type.
   *
   * @method Moddle#create
   *
   * @example
   *
   * var foo = moddle.create('my:Foo');
   * var bar = moddle.create('my:Bar', { id: 'BAR_1' });
   *
   * @param  {String|Object} descriptor the type descriptor or name know to the model
   * @param  {Object} attrs   a number of attributes to initialize the model instance with
   * @return {Object}         model instance
   */
  Moddle.prototype.create = function(descriptor, attrs) {
    var Type = this.getType(descriptor);

    if (!Type) {
      throw new Error('unknown type <' + descriptor + '>');
    }

    return new Type(attrs);
  };


  /**
   * Returns the type representing a given descriptor
   *
   * @method Moddle#getType
   *
   * @example
   *
   * var Foo = moddle.getType('my:Foo');
   * var foo = new Foo({ 'id' : 'FOO_1' });
   *
   * @param  {String|Object} descriptor the type descriptor or name know to the model
   * @return {Object}         the type representing the descriptor
   */
  Moddle.prototype.getType = function(descriptor) {

    var cache = this.typeCache;

    var name = isString(descriptor) ? descriptor : descriptor.ns.name;

    var type = cache[name];

    if (!type) {
      descriptor = this.registry.getEffectiveDescriptor(name);
      type = cache[name] = this.factory.createType(descriptor);
    }

    return type;
  };


  /**
   * Creates an any-element type to be used within model instances.
   *
   * This can be used to create custom elements that lie outside the meta-model.
   * The created element contains all the meta-data required to serialize it
   * as part of meta-model elements.
   *
   * @method Moddle#createAny
   *
   * @example
   *
   * var foo = moddle.createAny('vendor:Foo', 'http://vendor', {
   *   value: 'bar'
   * });
   *
   * var container = moddle.create('my:Container', 'http://my', {
   *   any: [ foo ]
   * });
   *
   * // go ahead and serialize the stuff
   *
   *
   * @param  {String} name  the name of the element
   * @param  {String} nsUri the namespace uri of the element
   * @param  {Object} [properties] a map of properties to initialize the instance with
   * @return {Object} the any type instance
   */
  Moddle.prototype.createAny = function(name, nsUri, properties) {

    var nameNs = parseName(name);

    var element = {
      $type: name,
      $instanceOf: function(type) {
        return type === this.$type;
      }
    };

    var descriptor = {
      name: name,
      isGeneric: true,
      ns: {
        prefix: nameNs.prefix,
        localName: nameNs.localName,
        uri: nsUri
      }
    };

    this.properties.defineDescriptor(element, descriptor);
    this.properties.defineModel(element, this);
    this.properties.define(element, '$parent', { enumerable: false, writable: true });
    this.properties.define(element, '$instanceOf', { enumerable: false, writable: true });

    forEach$1(properties, function(a, key) {
      if (isObject(a) && a.value !== undefined) {
        element[a.name] = a.value;
      } else {
        element[key] = a;
      }
    });

    return element;
  };

  /**
   * Returns a registered package by uri or prefix
   *
   * @return {Object} the package
   */
  Moddle.prototype.getPackage = function(uriOrPrefix) {
    return this.registry.getPackage(uriOrPrefix);
  };

  /**
   * Returns a snapshot of all known packages
   *
   * @return {Object} the package
   */
  Moddle.prototype.getPackages = function() {
    return this.registry.getPackages();
  };

  /**
   * Returns the descriptor for an element
   */
  Moddle.prototype.getElementDescriptor = function(element) {
    return element.$descriptor;
  };

  /**
   * Returns true if the given descriptor or instance
   * represents the given type.
   *
   * May be applied to this, if element is omitted.
   */
  Moddle.prototype.hasType = function(element, type) {
    if (type === undefined) {
      type = element;
      element = this;
    }

    var descriptor = element.$model.getElementDescriptor(element);

    return (type in descriptor.allTypesByName);
  };

  /**
   * Returns the descriptor of an elements named property
   */
  Moddle.prototype.getPropertyDescriptor = function(element, property) {
    return this.getElementDescriptor(element).propertiesByName[property];
  };

  /**
   * Returns a mapped type's descriptor
   */
  Moddle.prototype.getTypeDescriptor = function(type) {
    return this.registry.typeMap[type];
  };

  var fromCharCode = String.fromCharCode;

  var hasOwnProperty = Object.prototype.hasOwnProperty;

  var ENTITY_PATTERN = /&#(\d+);|&#x([0-9a-f]+);|&(\w+);/ig;

  var ENTITY_MAPPING = {
    'amp': '&',
    'apos': '\'',
    'gt': '>',
    'lt': '<',
    'quot': '"'
  };

  // map UPPERCASE variants of supported special chars
  Object.keys(ENTITY_MAPPING).forEach(function(k) {
    ENTITY_MAPPING[k.toUpperCase()] = ENTITY_MAPPING[k];
  });


  function replaceEntities(_, d, x, z) {

    // reserved names, i.e. &nbsp;
    if (z) {
      if (hasOwnProperty.call(ENTITY_MAPPING, z)) {
        return ENTITY_MAPPING[z];
      } else {

        // fall back to original value
        return '&' + z + ';';
      }
    }

    // decimal encoded char
    if (d) {
      return fromCharCode(d);
    }

    // hex encoded char
    return fromCharCode(parseInt(x, 16));
  }


  /**
   * A basic entity decoder that can decode a minimal
   * sub-set of reserved names (&amp;) as well as
   * hex (&#xaaf;) and decimal (&#1231;) encoded characters.
   *
   * @param {string} str
   *
   * @return {string} decoded string
   */
  function decodeEntities(s) {
    if (s.length > 3 && s.indexOf('&') !== -1) {
      return s.replace(ENTITY_PATTERN, replaceEntities);
    }

    return s;
  }

  var XSI_URI = 'http://www.w3.org/2001/XMLSchema-instance';
  var XSI_PREFIX = 'xsi';
  var XSI_TYPE$1 = 'xsi:type';

  var NON_WHITESPACE_OUTSIDE_ROOT_NODE = 'non-whitespace outside of root node';

  function error$2(msg) {
    return new Error(msg);
  }

  function missingNamespaceForPrefix(prefix) {
    return 'missing namespace for prefix <' + prefix + '>';
  }

  function getter(getFn) {
    return {
      'get': getFn,
      'enumerable': true
    };
  }

  function cloneNsMatrix(nsMatrix) {
    var clone = {}, key;
    for (key in nsMatrix) {
      clone[key] = nsMatrix[key];
    }
    return clone;
  }

  function uriPrefix(prefix) {
    return prefix + '$uri';
  }

  function buildNsMatrix(nsUriToPrefix) {
    var nsMatrix = {},
        uri,
        prefix;

    for (uri in nsUriToPrefix) {
      prefix = nsUriToPrefix[uri];
      nsMatrix[prefix] = prefix;
      nsMatrix[uriPrefix(prefix)] = uri;
    }

    return nsMatrix;
  }

  function noopGetContext() {
    return { 'line': 0, 'column': 0 };
  }

  function throwFunc(err) {
    throw err;
  }

  /**
   * Creates a new parser with the given options.
   *
   * @constructor
   *
   * @param  {!Object<string, ?>=} options
   */
  function Parser(options) {

    if (!this) {
      return new Parser(options);
    }

    var proxy = options && options['proxy'];

    var onText,
        onOpenTag,
        onCloseTag,
        onCDATA,
        onError = throwFunc,
        onWarning,
        onComment,
        onQuestion,
        onAttention;

    var getContext = noopGetContext;

    /**
     * Do we need to parse the current elements attributes for namespaces?
     *
     * @type {boolean}
     */
    var maybeNS = false;

    /**
     * Do we process namespaces at all?
     *
     * @type {boolean}
     */
    var isNamespace = false;

    /**
     * The caught error returned on parse end
     *
     * @type {Error}
     */
    var returnError = null;

    /**
     * Should we stop parsing?
     *
     * @type {boolean}
     */
    var parseStop = false;

    /**
     * A map of { uri: prefix } used by the parser.
     *
     * This map will ensure we can normalize prefixes during processing;
     * for each uri, only one prefix will be exposed to the handlers.
     *
     * @type {!Object<string, string>}}
     */
    var nsUriToPrefix;

    /**
     * Handle parse error.
     *
     * @param  {string|Error} err
     */
    function handleError(err) {
      if (!(err instanceof Error)) {
        err = error$2(err);
      }

      returnError = err;

      onError(err, getContext);
    }

    /**
     * Handle parse error.
     *
     * @param  {string|Error} err
     */
    function handleWarning(err) {

      if (!onWarning) {
        return;
      }

      if (!(err instanceof Error)) {
        err = error$2(err);
      }

      onWarning(err, getContext);
    }

    /**
     * Register parse listener.
     *
     * @param  {string}   name
     * @param  {Function} cb
     *
     * @return {Parser}
     */
    this['on'] = function(name, cb) {

      if (typeof cb !== 'function') {
        throw error$2('required args <name, cb>');
      }

      switch (name) {
      case 'openTag': onOpenTag = cb; break;
      case 'text': onText = cb; break;
      case 'closeTag': onCloseTag = cb; break;
      case 'error': onError = cb; break;
      case 'warn': onWarning = cb; break;
      case 'cdata': onCDATA = cb; break;
      case 'attention': onAttention = cb; break; // <!XXXXX zzzz="eeee">
      case 'question': onQuestion = cb; break; // <? ....  ?>
      case 'comment': onComment = cb; break;
      default:
        throw error$2('unsupported event: ' + name);
      }

      return this;
    };

    /**
     * Set the namespace to prefix mapping.
     *
     * @example
     *
     * parser.ns({
     *   'http://foo': 'foo',
     *   'http://bar': 'bar'
     * });
     *
     * @param  {!Object<string, string>} nsMap
     *
     * @return {Parser}
     */
    this['ns'] = function(nsMap) {

      if (typeof nsMap === 'undefined') {
        nsMap = {};
      }

      if (typeof nsMap !== 'object') {
        throw error$2('required args <nsMap={}>');
      }

      var _nsUriToPrefix = {}, k;

      for (k in nsMap) {
        _nsUriToPrefix[k] = nsMap[k];
      }

      // FORCE default mapping for schema instance
      _nsUriToPrefix[XSI_URI] = XSI_PREFIX;

      isNamespace = true;
      nsUriToPrefix = _nsUriToPrefix;

      return this;
    };

    /**
     * Parse xml string.
     *
     * @param  {string} xml
     *
     * @return {Error} returnError, if not thrown
     */
    this['parse'] = function(xml) {
      if (typeof xml !== 'string') {
        throw error$2('required args <xml=string>');
      }

      returnError = null;

      parse(xml);

      getContext = noopGetContext;
      parseStop = false;

      return returnError;
    };

    /**
     * Stop parsing.
     */
    this['stop'] = function() {
      parseStop = true;
    };

    /**
     * Parse string, invoking configured listeners on element.
     *
     * @param  {string} xml
     */
    function parse(xml) {
      var nsMatrixStack = isNamespace ? [] : null,
          nsMatrix = isNamespace ? buildNsMatrix(nsUriToPrefix) : null,
          _nsMatrix,
          nodeStack = [],
          anonymousNsCount = 0,
          tagStart = false,
          tagEnd = false,
          i = 0, j = 0,
          x, y, q, w, v,
          xmlns,
          elementName,
          _elementName,
          elementProxy
          ;

      var attrsString = '',
          attrsStart = 0,
          cachedAttrs // false = parsed with errors, null = needs parsing
          ;

      /**
       * Parse attributes on demand and returns the parsed attributes.
       *
       * Return semantics: (1) `false` on attribute parse error,
       * (2) object hash on extracted attrs.
       *
       * @return {boolean|Object}
       */
      function getAttrs() {
        if (cachedAttrs !== null) {
          return cachedAttrs;
        }

        var nsUri,
            nsUriPrefix,
            nsName,
            defaultAlias = isNamespace && nsMatrix['xmlns'],
            attrList = isNamespace && maybeNS ? [] : null,
            i = attrsStart,
            s = attrsString,
            l = s.length,
            hasNewMatrix,
            newalias,
            value,
            alias,
            name,
            attrs = {},
            seenAttrs = {},
            skipAttr,
            w,
            j;

        parseAttr:
        for (; i < l; i++) {
          skipAttr = false;
          w = s.charCodeAt(i);

          if (w === 32 || (w < 14 && w > 8)) { // WHITESPACE={ \f\n\r\t\v}
            continue;
          }

          // wait for non whitespace character
          if (w < 65 || w > 122 || (w > 90 && w < 97)) {
            if (w !== 95 && w !== 58) { // char 95"_" 58":"
              handleWarning('illegal first char attribute name');
              skipAttr = true;
            }
          }

          // parse attribute name
          for (j = i + 1; j < l; j++) {
            w = s.charCodeAt(j);

            if (
              w > 96 && w < 123 ||
              w > 64 && w < 91 ||
              w > 47 && w < 59 ||
              w === 46 || // '.'
              w === 45 || // '-'
              w === 95 // '_'
            ) {
              continue;
            }

            // unexpected whitespace
            if (w === 32 || (w < 14 && w > 8)) { // WHITESPACE
              handleWarning('missing attribute value');
              i = j;

              continue parseAttr;
            }

            // expected "="
            if (w === 61) { // "=" == 61
              break;
            }

            handleWarning('illegal attribute name char');
            skipAttr = true;
          }

          name = s.substring(i, j);

          if (name === 'xmlns:xmlns') {
            handleWarning('illegal declaration of xmlns');
            skipAttr = true;
          }

          w = s.charCodeAt(j + 1);

          if (w === 34) { // '"'
            j = s.indexOf('"', i = j + 2);

            if (j === -1) {
              j = s.indexOf('\'', i);

              if (j !== -1) {
                handleWarning('attribute value quote missmatch');
                skipAttr = true;
              }
            }

          } else if (w === 39) { // "'"
            j = s.indexOf('\'', i = j + 2);

            if (j === -1) {
              j = s.indexOf('"', i);

              if (j !== -1) {
                handleWarning('attribute value quote missmatch');
                skipAttr = true;
              }
            }

          } else {
            handleWarning('missing attribute value quotes');
            skipAttr = true;

            // skip to next space
            for (j = j + 1; j < l; j++) {
              w = s.charCodeAt(j + 1);

              if (w === 32 || (w < 14 && w > 8)) { // WHITESPACE
                break;
              }
            }

          }

          if (j === -1) {
            handleWarning('missing closing quotes');

            j = l;
            skipAttr = true;
          }

          if (!skipAttr) {
            value = s.substring(i, j);
          }

          i = j;

          // ensure SPACE follows attribute
          // skip illegal content otherwise
          // example a="b"c
          for (; j + 1 < l; j++) {
            w = s.charCodeAt(j + 1);

            if (w === 32 || (w < 14 && w > 8)) { // WHITESPACE
              break;
            }

            // FIRST ILLEGAL CHAR
            if (i === j) {
              handleWarning('illegal character after attribute end');
              skipAttr = true;
            }
          }

          // advance cursor to next attribute
          i = j + 1;

          if (skipAttr) {
            continue parseAttr;
          }

          // check attribute re-declaration
          if (name in seenAttrs) {
            handleWarning('attribute <' + name + '> already defined');
            continue;
          }

          seenAttrs[name] = true;

          if (!isNamespace) {
            attrs[name] = value;
            continue;
          }

          // try to extract namespace information
          if (maybeNS) {
            newalias = (
              name === 'xmlns'
                ? 'xmlns'
                : (name.charCodeAt(0) === 120 && name.substr(0, 6) === 'xmlns:')
                  ? name.substr(6)
                  : null
            );

            // handle xmlns(:alias) assignment
            if (newalias !== null) {
              nsUri = decodeEntities(value);
              nsUriPrefix = uriPrefix(newalias);

              alias = nsUriToPrefix[nsUri];

              if (!alias) {

                // no prefix defined or prefix collision
                if (
                  (newalias === 'xmlns') ||
                  (nsUriPrefix in nsMatrix && nsMatrix[nsUriPrefix] !== nsUri)
                ) {

                  // alocate free ns prefix
                  do {
                    alias = 'ns' + (anonymousNsCount++);
                  } while (typeof nsMatrix[alias] !== 'undefined');
                } else {
                  alias = newalias;
                }

                nsUriToPrefix[nsUri] = alias;
              }

              if (nsMatrix[newalias] !== alias) {
                if (!hasNewMatrix) {
                  nsMatrix = cloneNsMatrix(nsMatrix);
                  hasNewMatrix = true;
                }

                nsMatrix[newalias] = alias;
                if (newalias === 'xmlns') {
                  nsMatrix[uriPrefix(alias)] = nsUri;
                  defaultAlias = alias;
                }

                nsMatrix[nsUriPrefix] = nsUri;
              }

              // expose xmlns(:asd)="..." in attributes
              attrs[name] = value;
              continue;
            }

            // collect attributes until all namespace
            // declarations are processed
            attrList.push(name, value);
            continue;

          } /** end if (maybeNs) */

          // handle attributes on element without
          // namespace declarations
          w = name.indexOf(':');
          if (w === -1) {
            attrs[name] = value;
            continue;
          }

          // normalize ns attribute name
          if (!(nsName = nsMatrix[name.substring(0, w)])) {
            handleWarning(missingNamespaceForPrefix(name.substring(0, w)));
            continue;
          }

          name = defaultAlias === nsName
            ? name.substr(w + 1)
            : nsName + name.substr(w);

          // end: normalize ns attribute name

          // normalize xsi:type ns attribute value
          if (name === XSI_TYPE$1) {
            w = value.indexOf(':');

            if (w !== -1) {
              nsName = value.substring(0, w);

              // handle default prefixes, i.e. xs:String gracefully
              nsName = nsMatrix[nsName] || nsName;
              value = nsName + value.substring(w);
            } else {
              value = defaultAlias + ':' + value;
            }
          }

          // end: normalize xsi:type ns attribute value

          attrs[name] = value;
        }


        // handle deferred, possibly namespaced attributes
        if (maybeNS) {

          // normalize captured attributes
          for (i = 0, l = attrList.length; i < l; i++) {

            name = attrList[i++];
            value = attrList[i];

            w = name.indexOf(':');

            if (w !== -1) {

              // normalize ns attribute name
              if (!(nsName = nsMatrix[name.substring(0, w)])) {
                handleWarning(missingNamespaceForPrefix(name.substring(0, w)));
                continue;
              }

              name = defaultAlias === nsName
                ? name.substr(w + 1)
                : nsName + name.substr(w);

              // end: normalize ns attribute name

              // normalize xsi:type ns attribute value
              if (name === XSI_TYPE$1) {
                w = value.indexOf(':');

                if (w !== -1) {
                  nsName = value.substring(0, w);

                  // handle default prefixes, i.e. xs:String gracefully
                  nsName = nsMatrix[nsName] || nsName;
                  value = nsName + value.substring(w);
                } else {
                  value = defaultAlias + ':' + value;
                }
              }

              // end: normalize xsi:type ns attribute value
            }

            attrs[name] = value;
          }

          // end: normalize captured attributes
        }

        return cachedAttrs = attrs;
      }

      /**
       * Extract the parse context { line, column, part }
       * from the current parser position.
       *
       * @return {Object} parse context
       */
      function getParseContext() {
        var splitsRe = /(\r\n|\r|\n)/g;

        var line = 0;
        var column = 0;
        var startOfLine = 0;
        var endOfLine = j;
        var match;
        var data;

        while (i >= startOfLine) {

          match = splitsRe.exec(xml);

          if (!match) {
            break;
          }

          // end of line = (break idx + break chars)
          endOfLine = match[0].length + match.index;

          if (endOfLine > i) {
            break;
          }

          // advance to next line
          line += 1;

          startOfLine = endOfLine;
        }

        // EOF errors
        if (i == -1) {
          column = endOfLine;
          data = xml.substring(j);
        } else

        // start errors
        if (j === 0) {
          data = xml.substring(j, i);
        }

        // other errors
        else {
          column = i - startOfLine;
          data = (j == -1 ? xml.substring(i) : xml.substring(i, j + 1));
        }

        return {
          'data': data,
          'line': line,
          'column': column
        };
      }

      getContext = getParseContext;


      if (proxy) {
        elementProxy = Object.create({}, {
          'name': getter(function() {
            return elementName;
          }),
          'originalName': getter(function() {
            return _elementName;
          }),
          'attrs': getter(getAttrs),
          'ns': getter(function() {
            return nsMatrix;
          })
        });
      }

      // actual parse logic
      while (j !== -1) {

        if (xml.charCodeAt(j) === 60) { // "<"
          i = j;
        } else {
          i = xml.indexOf('<', j);
        }

        // parse end
        if (i === -1) {
          if (nodeStack.length) {
            return handleError('unexpected end of file');
          }

          if (j === 0) {
            return handleError('missing start tag');
          }

          if (j < xml.length) {
            if (xml.substring(j).trim()) {
              handleWarning(NON_WHITESPACE_OUTSIDE_ROOT_NODE);
            }
          }

          return;
        }

        // parse text
        if (j !== i) {

          if (nodeStack.length) {
            if (onText) {
              onText(xml.substring(j, i), decodeEntities, getContext);

              if (parseStop) {
                return;
              }
            }
          } else {
            if (xml.substring(j, i).trim()) {
              handleWarning(NON_WHITESPACE_OUTSIDE_ROOT_NODE);

              if (parseStop) {
                return;
              }
            }
          }
        }

        w = xml.charCodeAt(i+1);

        // parse comments + CDATA
        if (w === 33) { // "!"
          q = xml.charCodeAt(i+2);

          // CDATA section
          if (q === 91 && xml.substr(i + 3, 6) === 'CDATA[') { // 91 == "["
            j = xml.indexOf(']]>', i);
            if (j === -1) {
              return handleError('unclosed cdata');
            }

            if (onCDATA) {
              onCDATA(xml.substring(i + 9, j), getContext);
              if (parseStop) {
                return;
              }
            }

            j += 3;
            continue;
          }

          // comment
          if (q === 45 && xml.charCodeAt(i + 3) === 45) { // 45 == "-"
            j = xml.indexOf('-->', i);
            if (j === -1) {
              return handleError('unclosed comment');
            }


            if (onComment) {
              onComment(xml.substring(i + 4, j), decodeEntities, getContext);
              if (parseStop) {
                return;
              }
            }

            j += 3;
            continue;
          }
        }

        // parse question <? ... ?>
        if (w === 63) { // "?"
          j = xml.indexOf('?>', i);
          if (j === -1) {
            return handleError('unclosed question');
          }

          if (onQuestion) {
            onQuestion(xml.substring(i, j + 2), getContext);
            if (parseStop) {
              return;
            }
          }

          j += 2;
          continue;
        }

        // find matching closing tag for attention or standard tags
        // for that we must skip through attribute values
        // (enclosed in single or double quotes)
        for (x = i + 1; ; x++) {
          v = xml.charCodeAt(x);
          if (isNaN(v)) {
            j = -1;
            return handleError('unclosed tag');
          }

          // [10] AttValue ::= '"' ([^<&"] | Reference)* '"' | "'" ([^<&'] | Reference)* "'"
          // skips the quoted string
          // (double quotes) does not appear in a literal enclosed by (double quotes)
          // (single quote) does not appear in a literal enclosed by (single quote)
          if (v === 34) { //  '"'
            q = xml.indexOf('"', x + 1);
            x = q !== -1 ? q : x;
          } else if (v === 39) { // "'"
            q = xml.indexOf("'", x + 1);
            x = q !== -1 ? q : x;
          } else if (v === 62) { // '>'
            j = x;
            break;
          }
        }


        // parse attention <! ...>
        // previously comment and CDATA have already been parsed
        if (w === 33) { // "!"

          if (onAttention) {
            onAttention(xml.substring(i, j + 1), decodeEntities, getContext);
            if (parseStop) {
              return;
            }
          }

          j += 1;
          continue;
        }

        // don't process attributes;
        // there are none
        cachedAttrs = {};

        // if (xml.charCodeAt(i+1) === 47) { // </...
        if (w === 47) { // </...
          tagStart = false;
          tagEnd = true;

          if (!nodeStack.length) {
            return handleError('missing open tag');
          }

          // verify open <-> close tag match
          x = elementName = nodeStack.pop();
          q = i + 2 + x.length;

          if (xml.substring(i + 2, q) !== x) {
            return handleError('closing tag mismatch');
          }

          // verify chars in close tag
          for (; q < j; q++) {
            w = xml.charCodeAt(q);

            if (w === 32 || (w > 8 && w < 14)) { // \f\n\r\t\v space
              continue;
            }

            return handleError('close tag');
          }

        } else {
          if (xml.charCodeAt(j - 1) === 47) { // .../>
            x = elementName = xml.substring(i + 1, j - 1);

            tagStart = true;
            tagEnd = true;

          } else {
            x = elementName = xml.substring(i + 1, j);

            tagStart = true;
            tagEnd = false;
          }

          if (!(w > 96 && w < 123 || w > 64 && w < 91 || w === 95 || w === 58)) { // char 95"_" 58":"
            return handleError('illegal first char nodeName');
          }

          for (q = 1, y = x.length; q < y; q++) {
            w = x.charCodeAt(q);

            if (w > 96 && w < 123 || w > 64 && w < 91 || w > 47 && w < 59 || w === 45 || w === 95 || w == 46) {
              continue;
            }

            if (w === 32 || (w < 14 && w > 8)) { // \f\n\r\t\v space
              elementName = x.substring(0, q);

              // maybe there are attributes
              cachedAttrs = null;
              break;
            }

            return handleError('invalid nodeName');
          }

          if (!tagEnd) {
            nodeStack.push(elementName);
          }
        }

        if (isNamespace) {

          _nsMatrix = nsMatrix;

          if (tagStart) {

            // remember old namespace
            // unless we're self-closing
            if (!tagEnd) {
              nsMatrixStack.push(_nsMatrix);
            }

            if (cachedAttrs === null) {

              // quick check, whether there may be namespace
              // declarations on the node; if that is the case
              // we need to eagerly parse the node attributes
              if ((maybeNS = x.indexOf('xmlns', q) !== -1)) {
                attrsStart = q;
                attrsString = x;

                getAttrs();

                maybeNS = false;
              }
            }
          }

          _elementName = elementName;

          w = elementName.indexOf(':');
          if (w !== -1) {
            xmlns = nsMatrix[elementName.substring(0, w)];

            // prefix given; namespace must exist
            if (!xmlns) {
              return handleError('missing namespace on <' + _elementName + '>');
            }

            elementName = elementName.substr(w + 1);
          } else {
            xmlns = nsMatrix['xmlns'];

            // if no default namespace is defined,
            // we'll import the element as anonymous.
            //
            // it is up to users to correct that to the document defined
            // targetNamespace, or whatever their undersanding of the
            // XML spec mandates.
          }

          // adjust namespace prefixs as configured
          if (xmlns) {
            elementName = xmlns + ':' + elementName;
          }

        }

        if (tagStart) {
          attrsStart = q;
          attrsString = x;

          if (onOpenTag) {
            if (proxy) {
              onOpenTag(elementProxy, decodeEntities, tagEnd, getContext);
            } else {
              onOpenTag(elementName, getAttrs, decodeEntities, tagEnd, getContext);
            }

            if (parseStop) {
              return;
            }
          }

        }

        if (tagEnd) {

          if (onCloseTag) {
            onCloseTag(proxy ? elementProxy : elementName, decodeEntities, tagStart, getContext);

            if (parseStop) {
              return;
            }
          }

          // restore old namespace
          if (isNamespace) {
            if (!tagStart) {
              nsMatrix = nsMatrixStack.pop();
            } else {
              nsMatrix = _nsMatrix;
            }
          }
        }

        j += 1;
      }
    } /** end parse */

  }

  function hasLowerCaseAlias(pkg) {
    return pkg.xml && pkg.xml.tagAlias === 'lowerCase';
  }

  var DEFAULT_NS_MAP = {
    'xsi': 'http://www.w3.org/2001/XMLSchema-instance',
    'xml': 'http://www.w3.org/XML/1998/namespace'
  };

  var XSI_TYPE = 'xsi:type';

  function serializeFormat(element) {
    return element.xml && element.xml.serialize;
  }

  function serializeAsType(element) {
    return serializeFormat(element) === XSI_TYPE;
  }

  function serializeAsProperty(element) {
    return serializeFormat(element) === 'property';
  }

  function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }

  function aliasToName(aliasNs, pkg) {

    if (!hasLowerCaseAlias(pkg)) {
      return aliasNs.name;
    }

    return aliasNs.prefix + ':' + capitalize(aliasNs.localName);
  }

  function prefixedToName(nameNs, pkg) {

    var name = nameNs.name,
        localName = nameNs.localName;

    var typePrefix = pkg.xml && pkg.xml.typePrefix;

    if (typePrefix && localName.indexOf(typePrefix) === 0) {
      return nameNs.prefix + ':' + localName.slice(typePrefix.length);
    } else {
      return name;
    }
  }

  function normalizeXsiTypeName(name, model) {

    var nameNs = parseName(name);
    var pkg = model.getPackage(nameNs.prefix);

    return prefixedToName(nameNs, pkg);
  }

  function error$1(message) {
    return new Error(message);
  }

  /**
   * Get the moddle descriptor for a given instance or type.
   *
   * @param  {ModdleElement|Function} element
   *
   * @return {Object} the moddle descriptor
   */
  function getModdleDescriptor(element) {
    return element.$descriptor;
  }


  /**
   * A parse context.
   *
   * @class
   *
   * @param {Object} options
   * @param {ElementHandler} options.rootHandler the root handler for parsing a document
   * @param {boolean} [options.lax=false] whether or not to ignore invalid elements
   */
  function Context(options) {

    /**
     * @property {ElementHandler} rootHandler
     */

    /**
     * @property {Boolean} lax
     */

    assign(this, options);

    this.elementsById = {};
    this.references = [];
    this.warnings = [];

    /**
     * Add an unresolved reference.
     *
     * @param {Object} reference
     */
    this.addReference = function(reference) {
      this.references.push(reference);
    };

    /**
     * Add a processed element.
     *
     * @param {ModdleElement} element
     */
    this.addElement = function(element) {

      if (!element) {
        throw error$1('expected element');
      }

      var elementsById = this.elementsById;

      var descriptor = getModdleDescriptor(element);

      var idProperty = descriptor.idProperty,
          id;

      if (idProperty) {
        id = element.get(idProperty.name);

        if (id) {

          // for QName validation as per http://www.w3.org/TR/REC-xml/#NT-NameChar
          if (!/^([a-z][\w-.]*:)?[a-z_][\w-.]*$/i.test(id)) {
            throw new Error('illegal ID <' + id + '>');
          }

          if (elementsById[id]) {
            throw error$1('duplicate ID <' + id + '>');
          }

          elementsById[id] = element;
        }
      }
    };

    /**
     * Add an import warning.
     *
     * @param {Object} warning
     * @param {String} warning.message
     * @param {Error} [warning.error]
     */
    this.addWarning = function(warning) {
      this.warnings.push(warning);
    };
  }

  function BaseHandler() {}

  BaseHandler.prototype.handleEnd = function() {};
  BaseHandler.prototype.handleText = function() {};
  BaseHandler.prototype.handleNode = function() {};


  /**
   * A simple pass through handler that does nothing except for
   * ignoring all input it receives.
   *
   * This is used to ignore unknown elements and
   * attributes.
   */
  function NoopHandler() { }

  NoopHandler.prototype = Object.create(BaseHandler.prototype);

  NoopHandler.prototype.handleNode = function() {
    return this;
  };

  function BodyHandler() {}

  BodyHandler.prototype = Object.create(BaseHandler.prototype);

  BodyHandler.prototype.handleText = function(text) {
    this.body = (this.body || '') + text;
  };

  function ReferenceHandler(property, context) {
    this.property = property;
    this.context = context;
  }

  ReferenceHandler.prototype = Object.create(BodyHandler.prototype);

  ReferenceHandler.prototype.handleNode = function(node) {

    if (this.element) {
      throw error$1('expected no sub nodes');
    } else {
      this.element = this.createReference(node);
    }

    return this;
  };

  ReferenceHandler.prototype.handleEnd = function() {
    this.element.id = this.body;
  };

  ReferenceHandler.prototype.createReference = function(node) {
    return {
      property: this.property.ns.name,
      id: ''
    };
  };

  function ValueHandler(propertyDesc, element) {
    this.element = element;
    this.propertyDesc = propertyDesc;
  }

  ValueHandler.prototype = Object.create(BodyHandler.prototype);

  ValueHandler.prototype.handleEnd = function() {

    var value = this.body || '',
        element = this.element,
        propertyDesc = this.propertyDesc;

    value = coerceType(propertyDesc.type, value);

    if (propertyDesc.isMany) {
      element.get(propertyDesc.name).push(value);
    } else {
      element.set(propertyDesc.name, value);
    }
  };


  function BaseElementHandler() {}

  BaseElementHandler.prototype = Object.create(BodyHandler.prototype);

  BaseElementHandler.prototype.handleNode = function(node) {
    var parser = this,
        element = this.element;

    if (!element) {
      element = this.element = this.createElement(node);

      this.context.addElement(element);
    } else {
      parser = this.handleChild(node);
    }

    return parser;
  };

  /**
   * @class Reader.ElementHandler
   *
   */
  function ElementHandler(model, typeName, context) {
    this.model = model;
    this.type = model.getType(typeName);
    this.context = context;
  }

  ElementHandler.prototype = Object.create(BaseElementHandler.prototype);

  ElementHandler.prototype.addReference = function(reference) {
    this.context.addReference(reference);
  };

  ElementHandler.prototype.handleText = function(text) {

    var element = this.element,
        descriptor = getModdleDescriptor(element),
        bodyProperty = descriptor.bodyProperty;

    if (!bodyProperty) {
      throw error$1('unexpected body text <' + text + '>');
    }

    BodyHandler.prototype.handleText.call(this, text);
  };

  ElementHandler.prototype.handleEnd = function() {

    var value = this.body,
        element = this.element,
        descriptor = getModdleDescriptor(element),
        bodyProperty = descriptor.bodyProperty;

    if (bodyProperty && value !== undefined) {
      value = coerceType(bodyProperty.type, value);
      element.set(bodyProperty.name, value);
    }
  };

  /**
   * Create an instance of the model from the given node.
   *
   * @param  {Element} node the xml node
   */
  ElementHandler.prototype.createElement = function(node) {
    var attributes = node.attributes,
        Type = this.type,
        descriptor = getModdleDescriptor(Type),
        context = this.context,
        instance = new Type({}),
        model = this.model,
        propNameNs;

    forEach$1(attributes, function(value, name) {

      var prop = descriptor.propertiesByName[name],
          values;

      if (prop && prop.isReference) {

        if (!prop.isMany) {
          context.addReference({
            element: instance,
            property: prop.ns.name,
            id: value
          });
        } else {

          // IDREFS: parse references as whitespace-separated list
          values = value.split(' ');

          forEach$1(values, function(v) {
            context.addReference({
              element: instance,
              property: prop.ns.name,
              id: v
            });
          });
        }

      } else {
        if (prop) {
          value = coerceType(prop.type, value);
        } else
        if (name !== 'xmlns') {
          propNameNs = parseName(name, descriptor.ns.prefix);

          // check whether attribute is defined in a well-known namespace
          // if that is the case we emit a warning to indicate potential misuse
          if (model.getPackage(propNameNs.prefix)) {

            context.addWarning({
              message: 'unknown attribute <' + name + '>',
              element: instance,
              property: name,
              value: value
            });
          }
        }

        instance.set(name, value);
      }
    });

    return instance;
  };

  ElementHandler.prototype.getPropertyForNode = function(node) {

    var name = node.name;
    var nameNs = parseName(name);

    var type = this.type,
        model = this.model,
        descriptor = getModdleDescriptor(type);

    var propertyName = nameNs.name,
        property = descriptor.propertiesByName[propertyName],
        elementTypeName,
        elementType;

    // search for properties by name first

    if (property && !property.isAttr) {

      if (serializeAsType(property)) {
        elementTypeName = node.attributes[XSI_TYPE];

        // xsi type is optional, if it does not exists the
        // default type is assumed
        if (elementTypeName) {

          // take possible type prefixes from XML
          // into account, i.e.: xsi:type="t{ActualType}"
          elementTypeName = normalizeXsiTypeName(elementTypeName, model);

          elementType = model.getType(elementTypeName);

          return assign({}, property, {
            effectiveType: getModdleDescriptor(elementType).name
          });
        }
      }

      // search for properties by name first
      return property;
    }

    var pkg = model.getPackage(nameNs.prefix);

    if (pkg) {
      elementTypeName = aliasToName(nameNs, pkg);
      elementType = model.getType(elementTypeName);

      // search for collection members later
      property = find(descriptor.properties, function(p) {
        return !p.isVirtual && !p.isReference && !p.isAttribute && elementType.hasType(p.type);
      });

      if (property) {
        return assign({}, property, {
          effectiveType: getModdleDescriptor(elementType).name
        });
      }
    } else {

      // parse unknown element (maybe extension)
      property = find(descriptor.properties, function(p) {
        return !p.isReference && !p.isAttribute && p.type === 'Element';
      });

      if (property) {
        return property;
      }
    }

    throw error$1('unrecognized element <' + nameNs.name + '>');
  };

  ElementHandler.prototype.toString = function() {
    return 'ElementDescriptor[' + getModdleDescriptor(this.type).name + ']';
  };

  ElementHandler.prototype.valueHandler = function(propertyDesc, element) {
    return new ValueHandler(propertyDesc, element);
  };

  ElementHandler.prototype.referenceHandler = function(propertyDesc) {
    return new ReferenceHandler(propertyDesc, this.context);
  };

  ElementHandler.prototype.handler = function(type) {
    if (type === 'Element') {
      return new GenericElementHandler(this.model, type, this.context);
    } else {
      return new ElementHandler(this.model, type, this.context);
    }
  };

  /**
   * Handle the child element parsing
   *
   * @param  {Element} node the xml node
   */
  ElementHandler.prototype.handleChild = function(node) {
    var propertyDesc, type, element, childHandler;

    propertyDesc = this.getPropertyForNode(node);
    element = this.element;

    type = propertyDesc.effectiveType || propertyDesc.type;

    if (isSimple(type)) {
      return this.valueHandler(propertyDesc, element);
    }

    if (propertyDesc.isReference) {
      childHandler = this.referenceHandler(propertyDesc).handleNode(node);
    } else {
      childHandler = this.handler(type).handleNode(node);
    }

    var newElement = childHandler.element;

    // child handles may decide to skip elements
    // by not returning anything
    if (newElement !== undefined) {

      if (propertyDesc.isMany) {
        element.get(propertyDesc.name).push(newElement);
      } else {
        element.set(propertyDesc.name, newElement);
      }

      if (propertyDesc.isReference) {
        assign(newElement, {
          element: element
        });

        this.context.addReference(newElement);
      } else {

        // establish child -> parent relationship
        newElement.$parent = element;
      }
    }

    return childHandler;
  };

  /**
   * An element handler that performs special validation
   * to ensure the node it gets initialized with matches
   * the handlers type (namespace wise).
   *
   * @param {Moddle} model
   * @param {String} typeName
   * @param {Context} context
   */
  function RootElementHandler(model, typeName, context) {
    ElementHandler.call(this, model, typeName, context);
  }

  RootElementHandler.prototype = Object.create(ElementHandler.prototype);

  RootElementHandler.prototype.createElement = function(node) {

    var name = node.name,
        nameNs = parseName(name),
        model = this.model,
        type = this.type,
        pkg = model.getPackage(nameNs.prefix),
        typeName = pkg && aliasToName(nameNs, pkg) || name;

    // verify the correct namespace if we parse
    // the first element in the handler tree
    //
    // this ensures we don't mistakenly import wrong namespace elements
    if (!type.hasType(typeName)) {
      throw error$1('unexpected element <' + node.originalName + '>');
    }

    return ElementHandler.prototype.createElement.call(this, node);
  };


  function GenericElementHandler(model, typeName, context) {
    this.model = model;
    this.context = context;
  }

  GenericElementHandler.prototype = Object.create(BaseElementHandler.prototype);

  GenericElementHandler.prototype.createElement = function(node) {

    var name = node.name,
        ns = parseName(name),
        prefix = ns.prefix,
        uri = node.ns[prefix + '$uri'],
        attributes = node.attributes;

    return this.model.createAny(name, uri, attributes);
  };

  GenericElementHandler.prototype.handleChild = function(node) {

    var handler = new GenericElementHandler(this.model, 'Element', this.context).handleNode(node),
        element = this.element;

    var newElement = handler.element,
        children;

    if (newElement !== undefined) {
      children = element.$children = element.$children || [];
      children.push(newElement);

      // establish child -> parent relationship
      newElement.$parent = element;
    }

    return handler;
  };

  GenericElementHandler.prototype.handleEnd = function() {
    if (this.body) {
      this.element.$body = this.body;
    }
  };

  /**
   * A reader for a meta-model
   *
   * @param {Object} options
   * @param {Model} options.model used to read xml files
   * @param {Boolean} options.lax whether to make parse errors warnings
   */
  function Reader(options) {

    if (options instanceof Moddle) {
      options = {
        model: options
      };
    }

    assign(this, { lax: false }, options);
  }

  /**
   * The fromXML result.
   *
   * @typedef {Object} ParseResult
   *
   * @property {ModdleElement} rootElement
   * @property {Array<Object>} references
   * @property {Array<Error>} warnings
   * @property {Object} elementsById - a mapping containing each ID -> ModdleElement
   */

  /**
   * The fromXML result.
   *
   * @typedef {Error} ParseError
   *
   * @property {Array<Error>} warnings
   */

  /**
   * Parse the given XML into a moddle document tree.
   *
   * @param {String} xml
   * @param {ElementHandler|Object} options or rootHandler
   *
   * @returns {Promise<ParseResult, ParseError>}
   */
  Reader.prototype.fromXML = function(xml, options, done) {

    var rootHandler = options.rootHandler;

    if (options instanceof ElementHandler) {

      // root handler passed via (xml, { rootHandler: ElementHandler }, ...)
      rootHandler = options;
      options = {};
    } else {
      if (typeof options === 'string') {

        // rootHandler passed via (xml, 'someString', ...)
        rootHandler = this.handler(options);
        options = {};
      } else if (typeof rootHandler === 'string') {

        // rootHandler passed via (xml, { rootHandler: 'someString' }, ...)
        rootHandler = this.handler(rootHandler);
      }
    }

    var model = this.model,
        lax = this.lax;

    var context = new Context(assign({}, options, { rootHandler: rootHandler })),
        parser = new Parser({ proxy: true }),
        stack = createStack();

    rootHandler.context = context;

    // push root handler
    stack.push(rootHandler);


    /**
     * Handle error.
     *
     * @param  {Error} err
     * @param  {Function} getContext
     * @param  {boolean} lax
     *
     * @return {boolean} true if handled
     */
    function handleError(err, getContext, lax) {

      var ctx = getContext();

      var line = ctx.line,
          column = ctx.column,
          data = ctx.data;

      // we receive the full context data here,
      // for elements trim down the information
      // to the tag name, only
      if (data.charAt(0) === '<' && data.indexOf(' ') !== -1) {
        data = data.slice(0, data.indexOf(' ')) + '>';
      }

      var message =
        'unparsable content ' + (data ? data + ' ' : '') + 'detected\n\t' +
          'line: ' + line + '\n\t' +
          'column: ' + column + '\n\t' +
          'nested error: ' + err.message;

      if (lax) {
        context.addWarning({
          message: message,
          error: err
        });

        return true;
      } else {
        throw error$1(message);
      }
    }

    function handleWarning(err, getContext) {

      // just like handling errors in <lax=true> mode
      return handleError(err, getContext, true);
    }

    /**
     * Resolve collected references on parse end.
     */
    function resolveReferences() {

      var elementsById = context.elementsById;
      var references = context.references;

      var i, r;

      for (i = 0; (r = references[i]); i++) {
        var element = r.element;
        var reference = elementsById[r.id];
        var property = getModdleDescriptor(element).propertiesByName[r.property];

        if (!reference) {
          context.addWarning({
            message: 'unresolved reference <' + r.id + '>',
            element: r.element,
            property: r.property,
            value: r.id
          });
        }

        if (property.isMany) {
          var collection = element.get(property.name),
              idx = collection.indexOf(r);

          // we replace an existing place holder (idx != -1) or
          // append to the collection instead
          if (idx === -1) {
            idx = collection.length;
          }

          if (!reference) {

            // remove unresolvable reference
            collection.splice(idx, 1);
          } else {

            // add or update reference in collection
            collection[idx] = reference;
          }
        } else {
          element.set(property.name, reference);
        }
      }
    }

    function handleClose() {
      stack.pop().handleEnd();
    }

    var PREAMBLE_START_PATTERN = /^<\?xml /i;

    var ENCODING_PATTERN = / encoding="([^"]+)"/i;

    var UTF_8_PATTERN = /^utf-8$/i;

    function handleQuestion(question) {

      if (!PREAMBLE_START_PATTERN.test(question)) {
        return;
      }

      var match = ENCODING_PATTERN.exec(question);
      var encoding = match && match[1];

      if (!encoding || UTF_8_PATTERN.test(encoding)) {
        return;
      }

      context.addWarning({
        message:
          'unsupported document encoding <' + encoding + '>, ' +
          'falling back to UTF-8'
      });
    }

    function handleOpen(node, getContext) {
      var handler = stack.peek();

      try {
        stack.push(handler.handleNode(node));
      } catch (err) {

        if (handleError(err, getContext, lax)) {
          stack.push(new NoopHandler());
        }
      }
    }

    function handleCData(text, getContext) {

      try {
        stack.peek().handleText(text);
      } catch (err) {
        handleWarning(err, getContext);
      }
    }

    function handleText(text, getContext) {

      // strip whitespace only nodes, i.e. before
      // <!CDATA[ ... ]> sections and in between tags

      if (!text.trim()) {
        return;
      }

      handleCData(text, getContext);
    }

    var uriMap = model.getPackages().reduce(function(uriMap, p) {
      uriMap[p.uri] = p.prefix;

      return uriMap;
    }, {
      'http://www.w3.org/XML/1998/namespace': 'xml' // add default xml ns
    });
    parser
      .ns(uriMap)
      .on('openTag', function(obj, decodeStr, selfClosing, getContext) {

        // gracefully handle unparsable attributes (attrs=false)
        var attrs = obj.attrs || {};

        var decodedAttrs = Object.keys(attrs).reduce(function(d, key) {
          var value = decodeStr(attrs[key]);

          d[key] = value;

          return d;
        }, {});

        var node = {
          name: obj.name,
          originalName: obj.originalName,
          attributes: decodedAttrs,
          ns: obj.ns
        };

        handleOpen(node, getContext);
      })
      .on('question', handleQuestion)
      .on('closeTag', handleClose)
      .on('cdata', handleCData)
      .on('text', function(text, decodeEntities, getContext) {
        handleText(decodeEntities(text), getContext);
      })
      .on('error', handleError)
      .on('warn', handleWarning);

    // async XML parsing to make sure the execution environment
    // (node or brower) is kept responsive and that certain optimization
    // strategies can kick in.
    return new Promise(function(resolve, reject) {

      var err;

      try {
        parser.parse(xml);

        resolveReferences();
      } catch (e) {
        err = e;
      }

      var rootElement = rootHandler.element;

      if (!err && !rootElement) {
        err = error$1('failed to parse document as <' + rootHandler.type.$descriptor.name + '>');
      }

      var warnings = context.warnings;
      var references = context.references;
      var elementsById = context.elementsById;

      if (err) {
        err.warnings = warnings;

        return reject(err);
      } else {
        return resolve({
          rootElement: rootElement,
          elementsById: elementsById,
          references: references,
          warnings: warnings
        });
      }
    });
  };

  Reader.prototype.handler = function(name) {
    return new RootElementHandler(this.model, name);
  };


  // helpers //////////////////////////

  function createStack() {
    var stack = [];

    Object.defineProperty(stack, 'peek', {
      value: function() {
        return this[this.length - 1];
      }
    });

    return stack;
  }

  var XML_PREAMBLE = '<?xml version="1.0" encoding="UTF-8"?>\n';

  var ESCAPE_ATTR_CHARS = /<|>|'|"|&|\n\r|\n/g;
  var ESCAPE_CHARS = /<|>|&/g;


  function Namespaces(parent) {

    var prefixMap = {};
    var uriMap = {};
    var used = {};

    var wellknown = [];
    var custom = [];

    // API

    this.byUri = function(uri) {
      return uriMap[uri] || (
        parent && parent.byUri(uri)
      );
    };

    this.add = function(ns, isWellknown) {

      uriMap[ns.uri] = ns;

      if (isWellknown) {
        wellknown.push(ns);
      } else {
        custom.push(ns);
      }

      this.mapPrefix(ns.prefix, ns.uri);
    };

    this.uriByPrefix = function(prefix) {
      return prefixMap[prefix || 'xmlns'];
    };

    this.mapPrefix = function(prefix, uri) {
      prefixMap[prefix || 'xmlns'] = uri;
    };

    this.getNSKey = function(ns) {
      return (ns.prefix !== undefined) ? (ns.uri + '|' + ns.prefix) : ns.uri;
    };

    this.logUsed = function(ns) {

      var uri = ns.uri;
      var nsKey = this.getNSKey(ns);

      used[nsKey] = this.byUri(uri);

      // Inform parent recursively about the usage of this NS
      if (parent) {
        parent.logUsed(ns);
      }
    };

    this.getUsed = function(ns) {

      function isUsed(ns) {
        var nsKey = self.getNSKey(ns);

        return used[nsKey];
      }

      var self = this;

      var allNs = [].concat(wellknown, custom);

      return allNs.filter(isUsed);
    };

  }

  function lower(string) {
    return string.charAt(0).toLowerCase() + string.slice(1);
  }

  function nameToAlias(name, pkg) {
    if (hasLowerCaseAlias(pkg)) {
      return lower(name);
    } else {
      return name;
    }
  }

  function inherits(ctor, superCtor) {
    ctor.super_ = superCtor;
    ctor.prototype = Object.create(superCtor.prototype, {
      constructor: {
        value: ctor,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
  }

  function nsName(ns) {
    if (isString(ns)) {
      return ns;
    } else {
      return (ns.prefix ? ns.prefix + ':' : '') + ns.localName;
    }
  }

  function getNsAttrs(namespaces) {

    return namespaces.getUsed().filter(function(ns) {

      // do not serialize built in <xml> namespace
      return ns.prefix !== 'xml';
    }).map(function(ns) {
      var name = 'xmlns' + (ns.prefix ? ':' + ns.prefix : '');
      return { name: name, value: ns.uri };
    });

  }

  function getElementNs(ns, descriptor) {
    if (descriptor.isGeneric) {
      return assign({ localName: descriptor.ns.localName }, ns);
    } else {
      return assign({ localName: nameToAlias(descriptor.ns.localName, descriptor.$pkg) }, ns);
    }
  }

  function getPropertyNs(ns, descriptor) {
    return assign({ localName: descriptor.ns.localName }, ns);
  }

  function getSerializableProperties(element) {
    var descriptor = element.$descriptor;

    return filter(descriptor.properties, function(p) {
      var name = p.name;

      if (p.isVirtual) {
        return false;
      }

      // do not serialize defaults
      if (!has$1(element, name)) {
        return false;
      }

      var value = element[name];

      // do not serialize default equals
      if (value === p.default) {
        return false;
      }

      // do not serialize null properties
      if (value === null) {
        return false;
      }

      return p.isMany ? value.length : true;
    });
  }

  var ESCAPE_ATTR_MAP = {
    '\n': '#10',
    '\n\r': '#10',
    '"': '#34',
    '\'': '#39',
    '<': '#60',
    '>': '#62',
    '&': '#38'
  };

  var ESCAPE_MAP = {
    '<': 'lt',
    '>': 'gt',
    '&': 'amp'
  };

  function escape(str, charPattern, replaceMap) {

    // ensure we are handling strings here
    str = isString(str) ? str : '' + str;

    return str.replace(charPattern, function(s) {
      return '&' + replaceMap[s] + ';';
    });
  }

  /**
   * Escape a string attribute to not contain any bad values (line breaks, '"', ...)
   *
   * @param {String} str the string to escape
   * @return {String} the escaped string
   */
  function escapeAttr(str) {
    return escape(str, ESCAPE_ATTR_CHARS, ESCAPE_ATTR_MAP);
  }

  function escapeBody(str) {
    return escape(str, ESCAPE_CHARS, ESCAPE_MAP);
  }

  function filterAttributes(props) {
    return filter(props, function(p) { return p.isAttr; });
  }

  function filterContained(props) {
    return filter(props, function(p) { return !p.isAttr; });
  }


  function ReferenceSerializer(tagName) {
    this.tagName = tagName;
  }

  ReferenceSerializer.prototype.build = function(element) {
    this.element = element;
    return this;
  };

  ReferenceSerializer.prototype.serializeTo = function(writer) {
    writer
      .appendIndent()
      .append('<' + this.tagName + '>' + this.element.id + '</' + this.tagName + '>')
      .appendNewLine();
  };

  function BodySerializer() {}

  BodySerializer.prototype.serializeValue =
  BodySerializer.prototype.serializeTo = function(writer) {
    writer.append(
      this.escape
        ? escapeBody(this.value)
        : this.value
    );
  };

  BodySerializer.prototype.build = function(prop, value) {
    this.value = value;

    if (prop.type === 'String' && value.search(ESCAPE_CHARS) !== -1) {
      this.escape = true;
    }

    return this;
  };

  function ValueSerializer(tagName) {
    this.tagName = tagName;
  }

  inherits(ValueSerializer, BodySerializer);

  ValueSerializer.prototype.serializeTo = function(writer) {

    writer
      .appendIndent()
      .append('<' + this.tagName + '>');

    this.serializeValue(writer);

    writer
      .append('</' + this.tagName + '>')
      .appendNewLine();
  };

  function ElementSerializer(parent, propertyDescriptor) {
    this.body = [];
    this.attrs = [];

    this.parent = parent;
    this.propertyDescriptor = propertyDescriptor;
  }

  ElementSerializer.prototype.build = function(element) {
    this.element = element;

    var elementDescriptor = element.$descriptor,
        propertyDescriptor = this.propertyDescriptor;

    var otherAttrs,
        properties;

    var isGeneric = elementDescriptor.isGeneric;

    if (isGeneric) {
      otherAttrs = this.parseGeneric(element);
    } else {
      otherAttrs = this.parseNsAttributes(element);
    }

    if (propertyDescriptor) {
      this.ns = this.nsPropertyTagName(propertyDescriptor);
    } else {
      this.ns = this.nsTagName(elementDescriptor);
    }

    // compute tag name
    this.tagName = this.addTagName(this.ns);

    if (!isGeneric) {
      properties = getSerializableProperties(element);

      this.parseAttributes(filterAttributes(properties));
      this.parseContainments(filterContained(properties));
    }

    this.parseGenericAttributes(element, otherAttrs);

    return this;
  };

  ElementSerializer.prototype.nsTagName = function(descriptor) {
    var effectiveNs = this.logNamespaceUsed(descriptor.ns);
    return getElementNs(effectiveNs, descriptor);
  };

  ElementSerializer.prototype.nsPropertyTagName = function(descriptor) {
    var effectiveNs = this.logNamespaceUsed(descriptor.ns);
    return getPropertyNs(effectiveNs, descriptor);
  };

  ElementSerializer.prototype.isLocalNs = function(ns) {
    return ns.uri === this.ns.uri;
  };

  /**
   * Get the actual ns attribute name for the given element.
   *
   * @param {Object} element
   * @param {Boolean} [element.inherited=false]
   *
   * @return {Object} nsName
   */
  ElementSerializer.prototype.nsAttributeName = function(element) {

    var ns;

    if (isString(element)) {
      ns = parseName(element);
    } else {
      ns = element.ns;
    }

    // return just local name for inherited attributes
    if (element.inherited) {
      return { localName: ns.localName };
    }

    // parse + log effective ns
    var effectiveNs = this.logNamespaceUsed(ns);

    // LOG ACTUAL namespace use
    this.getNamespaces().logUsed(effectiveNs);

    // strip prefix if same namespace like parent
    if (this.isLocalNs(effectiveNs)) {
      return { localName: ns.localName };
    } else {
      return assign({ localName: ns.localName }, effectiveNs);
    }
  };

  ElementSerializer.prototype.parseGeneric = function(element) {

    var self = this,
        body = this.body;

    var attributes = [];

    forEach$1(element, function(val, key) {

      var nonNsAttr;

      if (key === '$body') {
        body.push(new BodySerializer().build({ type: 'String' }, val));
      } else
      if (key === '$children') {
        forEach$1(val, function(child) {
          body.push(new ElementSerializer(self).build(child));
        });
      } else
      if (key.indexOf('$') !== 0) {
        nonNsAttr = self.parseNsAttribute(element, key, val);

        if (nonNsAttr) {
          attributes.push({ name: key, value: val });
        }
      }
    });

    return attributes;
  };

  ElementSerializer.prototype.parseNsAttribute = function(element, name, value) {
    var model = element.$model;

    var nameNs = parseName(name);

    var ns;

    // parse xmlns:foo="http://foo.bar"
    if (nameNs.prefix === 'xmlns') {
      ns = { prefix: nameNs.localName, uri: value };
    }

    // parse xmlns="http://foo.bar"
    if (!nameNs.prefix && nameNs.localName === 'xmlns') {
      ns = { uri: value };
    }

    if (!ns) {
      return {
        name: name,
        value: value
      };
    }

    if (model && model.getPackage(value)) {

      // register well known namespace
      this.logNamespace(ns, true, true);
    } else {

      // log custom namespace directly as used
      var actualNs = this.logNamespaceUsed(ns, true);

      this.getNamespaces().logUsed(actualNs);
    }
  };


  /**
   * Parse namespaces and return a list of left over generic attributes
   *
   * @param  {Object} element
   * @return {Array<Object>}
   */
  ElementSerializer.prototype.parseNsAttributes = function(element, attrs) {
    var self = this;

    var genericAttrs = element.$attrs;

    var attributes = [];

    // parse namespace attributes first
    // and log them. push non namespace attributes to a list
    // and process them later
    forEach$1(genericAttrs, function(value, name) {

      var nonNsAttr = self.parseNsAttribute(element, name, value);

      if (nonNsAttr) {
        attributes.push(nonNsAttr);
      }
    });

    return attributes;
  };

  ElementSerializer.prototype.parseGenericAttributes = function(element, attributes) {

    var self = this;

    forEach$1(attributes, function(attr) {

      // do not serialize xsi:type attribute
      // it is set manually based on the actual implementation type
      if (attr.name === XSI_TYPE) {
        return;
      }

      try {
        self.addAttribute(self.nsAttributeName(attr.name), attr.value);
      } catch (e) {
        console.warn(
          'missing namespace information for ',
          attr.name, '=', attr.value, 'on', element,
          e);
      }
    });
  };

  ElementSerializer.prototype.parseContainments = function(properties) {

    var self = this,
        body = this.body,
        element = this.element;

    forEach$1(properties, function(p) {
      var value = element.get(p.name),
          isReference = p.isReference,
          isMany = p.isMany;

      if (!isMany) {
        value = [ value ];
      }

      if (p.isBody) {
        body.push(new BodySerializer().build(p, value[0]));
      } else
      if (isSimple(p.type)) {
        forEach$1(value, function(v) {
          body.push(new ValueSerializer(self.addTagName(self.nsPropertyTagName(p))).build(p, v));
        });
      } else
      if (isReference) {
        forEach$1(value, function(v) {
          body.push(new ReferenceSerializer(self.addTagName(self.nsPropertyTagName(p))).build(v));
        });
      } else {

        // allow serialization via type
        // rather than element name
        var asType = serializeAsType(p),
            asProperty = serializeAsProperty(p);

        forEach$1(value, function(v) {
          var serializer;

          if (asType) {
            serializer = new TypeSerializer(self, p);
          } else
          if (asProperty) {
            serializer = new ElementSerializer(self, p);
          } else {
            serializer = new ElementSerializer(self);
          }

          body.push(serializer.build(v));
        });
      }
    });
  };

  ElementSerializer.prototype.getNamespaces = function(local) {

    var namespaces = this.namespaces,
        parent = this.parent,
        parentNamespaces;

    if (!namespaces) {
      parentNamespaces = parent && parent.getNamespaces();

      if (local || !parentNamespaces) {
        this.namespaces = namespaces = new Namespaces(parentNamespaces);
      } else {
        namespaces = parentNamespaces;
      }
    }

    return namespaces;
  };

  ElementSerializer.prototype.logNamespace = function(ns, wellknown, local) {
    var namespaces = this.getNamespaces(local);

    var nsUri = ns.uri,
        nsPrefix = ns.prefix;

    var existing = namespaces.byUri(nsUri);

    if (!existing || local) {
      namespaces.add(ns, wellknown);
    }

    namespaces.mapPrefix(nsPrefix, nsUri);

    return ns;
  };

  ElementSerializer.prototype.logNamespaceUsed = function(ns, local) {
    var element = this.element,
        model = element.$model,
        namespaces = this.getNamespaces(local);

    // ns may be
    //
    //   * prefix only
    //   * prefix:uri
    //   * localName only

    var prefix = ns.prefix,
        uri = ns.uri,
        newPrefix, idx,
        wellknownUri;

    // handle anonymous namespaces (elementForm=unqualified), cf. #23
    if (!prefix && !uri) {
      return { localName: ns.localName };
    }

    wellknownUri = DEFAULT_NS_MAP[prefix] || model && (model.getPackage(prefix) || {}).uri;

    uri = uri || wellknownUri || namespaces.uriByPrefix(prefix);

    if (!uri) {
      throw new Error('no namespace uri given for prefix <' + prefix + '>');
    }

    ns = namespaces.byUri(uri);

    if (!ns) {
      newPrefix = prefix;
      idx = 1;

      // find a prefix that is not mapped yet
      while (namespaces.uriByPrefix(newPrefix)) {
        newPrefix = prefix + '_' + idx++;
      }

      ns = this.logNamespace({ prefix: newPrefix, uri: uri }, wellknownUri === uri);
    }

    if (prefix) {
      namespaces.mapPrefix(prefix, uri);
    }

    return ns;
  };

  ElementSerializer.prototype.parseAttributes = function(properties) {
    var self = this,
        element = this.element;

    forEach$1(properties, function(p) {

      var value = element.get(p.name);

      if (p.isReference) {

        if (!p.isMany) {
          value = value.id;
        }
        else {
          var values = [];
          forEach$1(value, function(v) {
            values.push(v.id);
          });

          // IDREFS is a whitespace-separated list of references.
          value = values.join(' ');
        }

      }

      self.addAttribute(self.nsAttributeName(p), value);
    });
  };

  ElementSerializer.prototype.addTagName = function(nsTagName) {
    var actualNs = this.logNamespaceUsed(nsTagName);

    this.getNamespaces().logUsed(actualNs);

    return nsName(nsTagName);
  };

  ElementSerializer.prototype.addAttribute = function(name, value) {
    var attrs = this.attrs;

    if (isString(value)) {
      value = escapeAttr(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) {
    var attrs = this.attrs,
        namespaces = this.namespaces;

    if (namespaces) {
      attrs = getNsAttrs(namespaces).concat(attrs);
    }

    forEach$1(attrs, function(a) {
      writer
        .append(' ')
        .append(nsName(a.name)).append('="').append(a.value).append('"');
    });
  };

  ElementSerializer.prototype.serializeTo = function(writer) {
    var firstBody = this.body[0],
        indent = firstBody && firstBody.constructor !== BodySerializer;

    writer
      .appendIndent()
      .append('<' + this.tagName);

    this.serializeAttributes(writer);

    writer.append(firstBody ? '>' : ' />');

    if (firstBody) {

      if (indent) {
        writer
          .appendNewLine()
          .indent();
      }

      forEach$1(this.body, function(b) {
        b.serializeTo(writer);
      });

      if (indent) {
        writer
          .unindent()
          .appendIndent();
      }

      writer.append('</' + this.tagName + '>');
    }

    writer.appendNewLine();
  };

  /**
   * A serializer for types that handles serialization of data types
   */
  function TypeSerializer(parent, propertyDescriptor) {
    ElementSerializer.call(this, parent, propertyDescriptor);
  }

  inherits(TypeSerializer, ElementSerializer);

  TypeSerializer.prototype.parseNsAttributes = function(element) {

    // extracted attributes
    var attributes = ElementSerializer.prototype.parseNsAttributes.call(this, element);

    var descriptor = element.$descriptor;

    // only serialize xsi:type if necessary
    if (descriptor.name === this.propertyDescriptor.type) {
      return attributes;
    }

    var typeNs = this.typeNs = this.nsTagName(descriptor);
    this.getNamespaces().logUsed(this.typeNs);

    // add xsi:type attribute to represent the elements
    // actual type

    var pkg = element.$model.getPackage(typeNs.uri),
        typePrefix = (pkg.xml && pkg.xml.typePrefix) || '';

    this.addAttribute(
      this.nsAttributeName(XSI_TYPE),
      (typeNs.prefix ? typeNs.prefix + ':' : '') + typePrefix + descriptor.ns.localName
    );

    return attributes;
  };

  TypeSerializer.prototype.isLocalNs = function(ns) {
    return ns.uri === (this.typeNs || this.ns).uri;
  };

  function SavingWriter() {
    this.value = '';

    this.write = function(str) {
      this.value += str;
    };
  }

  function FormatingWriter(out, format) {

    var indent = [''];

    this.append = function(str) {
      out.write(str);

      return this;
    };

    this.appendNewLine = function() {
      if (format) {
        out.write('\n');
      }

      return this;
    };

    this.appendIndent = function() {
      if (format) {
        out.write(indent.join('  '));
      }

      return this;
    };

    this.indent = function() {
      indent.push('');
      return this;
    };

    this.unindent = function() {
      indent.pop();
      return this;
    };
  }

  /**
   * A writer for meta-model backed document trees
   *
   * @param {Object} options output options to pass into the writer
   */
  function Writer(options) {

    options = assign({ format: false, preamble: true }, options || {});

    function toXML(tree, writer) {
      var internalWriter = writer || new SavingWriter();
      var formatingWriter = new FormatingWriter(internalWriter, options.format);

      if (options.preamble) {
        formatingWriter.append(XML_PREAMBLE);
      }

      new ElementSerializer().build(tree).serializeTo(formatingWriter);

      if (!writer) {
        return internalWriter.value;
      }
    }

    return {
      toXML: toXML
    };
  }

  /**
   * A sub class of {@link Moddle} with support for import and export of BPMN 2.0 xml files.
   *
   * @class BpmnModdle
   * @extends Moddle
   *
   * @param {Object|Array} packages to use for instantiating the model
   * @param {Object} [options] additional options to pass over
   */
  function BpmnModdle(packages, options) {
    Moddle.call(this, packages, options);
  }

  BpmnModdle.prototype = Object.create(Moddle.prototype);

  /**
   * The fromXML result.
   *
   * @typedef {Object} ParseResult
   *
   * @property {ModdleElement} rootElement
   * @property {Array<Object>} references
   * @property {Array<Error>} warnings
   * @property {Object} elementsById - a mapping containing each ID -> ModdleElement
   */

  /**
   * The fromXML error.
   *
   * @typedef {Error} ParseError
   *
   * @property {Array<Error>} warnings
   */

  /**
   * Instantiates a BPMN model tree from a given xml string.
   *
   * @param {String}   xmlStr
   * @param {String}   [typeName='bpmn:Definitions'] name of the root element
   * @param {Object}   [options]  options to pass to the underlying reader
   *
   * @returns {Promise<ParseResult, ParseError>}
   */
  BpmnModdle.prototype.fromXML = function(xmlStr, typeName, options) {

    if (!isString(typeName)) {
      options = typeName;
      typeName = 'bpmn:Definitions';
    }

    var reader = new Reader(assign({ model: this, lax: true }, options));
    var rootHandler = reader.handler(typeName);

    return reader.fromXML(xmlStr, rootHandler);
  };


  /**
   * The toXML result.
   *
   * @typedef {Object} SerializationResult
   *
   * @property {String} xml
   */

  /**
   * Serializes a BPMN 2.0 object tree to XML.
   *
   * @param {String}   element    the root element, typically an instance of `bpmn:Definitions`
   * @param {Object}   [options]  to pass to the underlying writer
   *
   * @returns {Promise<SerializationResult, Error>}
   */
  BpmnModdle.prototype.toXML = function(element, options) {

    var writer = new Writer(options);

    return new Promise(function(resolve, reject) {
      try {
        var result = writer.toXML(element);

        return resolve({
          xml: result
        });
      } catch (err) {
        return reject(err);
      }
    });
  };

  var name$5 = "BPMN20";
  var uri$5 = "http://www.omg.org/spec/BPMN/20100524/MODEL";
  var prefix$5 = "bpmn";
  var associations$5 = [
  ];
  var types$5 = [
  	{
  		name: "Interface",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "operations",
  				type: "Operation",
  				isMany: true
  			},
  			{
  				name: "implementationRef",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Operation",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "inMessageRef",
  				type: "Message",
  				isReference: true
  			},
  			{
  				name: "outMessageRef",
  				type: "Message",
  				isReference: true
  			},
  			{
  				name: "errorRef",
  				type: "Error",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "implementationRef",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "EndPoint",
  		superClass: [
  			"RootElement"
  		]
  	},
  	{
  		name: "Auditing",
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "GlobalTask",
  		superClass: [
  			"CallableElement"
  		],
  		properties: [
  			{
  				name: "resources",
  				type: "ResourceRole",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "Monitoring",
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "Performer",
  		superClass: [
  			"ResourceRole"
  		]
  	},
  	{
  		name: "Process",
  		superClass: [
  			"FlowElementsContainer",
  			"CallableElement"
  		],
  		properties: [
  			{
  				name: "processType",
  				type: "ProcessType",
  				isAttr: true
  			},
  			{
  				name: "isClosed",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "auditing",
  				type: "Auditing"
  			},
  			{
  				name: "monitoring",
  				type: "Monitoring"
  			},
  			{
  				name: "properties",
  				type: "Property",
  				isMany: true
  			},
  			{
  				name: "laneSets",
  				isMany: true,
  				replaces: "FlowElementsContainer#laneSets",
  				type: "LaneSet"
  			},
  			{
  				name: "flowElements",
  				isMany: true,
  				replaces: "FlowElementsContainer#flowElements",
  				type: "FlowElement"
  			},
  			{
  				name: "artifacts",
  				type: "Artifact",
  				isMany: true
  			},
  			{
  				name: "resources",
  				type: "ResourceRole",
  				isMany: true
  			},
  			{
  				name: "correlationSubscriptions",
  				type: "CorrelationSubscription",
  				isMany: true
  			},
  			{
  				name: "supports",
  				type: "Process",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "definitionalCollaborationRef",
  				type: "Collaboration",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "isExecutable",
  				isAttr: true,
  				type: "Boolean"
  			}
  		]
  	},
  	{
  		name: "LaneSet",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "lanes",
  				type: "Lane",
  				isMany: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Lane",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "partitionElementRef",
  				type: "BaseElement",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "partitionElement",
  				type: "BaseElement"
  			},
  			{
  				name: "flowNodeRef",
  				type: "FlowNode",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "childLaneSet",
  				type: "LaneSet",
  				xml: {
  					serialize: "xsi:type"
  				}
  			}
  		]
  	},
  	{
  		name: "GlobalManualTask",
  		superClass: [
  			"GlobalTask"
  		]
  	},
  	{
  		name: "ManualTask",
  		superClass: [
  			"Task"
  		]
  	},
  	{
  		name: "UserTask",
  		superClass: [
  			"Task"
  		],
  		properties: [
  			{
  				name: "renderings",
  				type: "Rendering",
  				isMany: true
  			},
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Rendering",
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "HumanPerformer",
  		superClass: [
  			"Performer"
  		]
  	},
  	{
  		name: "PotentialOwner",
  		superClass: [
  			"HumanPerformer"
  		]
  	},
  	{
  		name: "GlobalUserTask",
  		superClass: [
  			"GlobalTask"
  		],
  		properties: [
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "renderings",
  				type: "Rendering",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "Gateway",
  		isAbstract: true,
  		superClass: [
  			"FlowNode"
  		],
  		properties: [
  			{
  				name: "gatewayDirection",
  				type: "GatewayDirection",
  				"default": "Unspecified",
  				isAttr: true
  			}
  		]
  	},
  	{
  		name: "EventBasedGateway",
  		superClass: [
  			"Gateway"
  		],
  		properties: [
  			{
  				name: "instantiate",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "eventGatewayType",
  				type: "EventBasedGatewayType",
  				isAttr: true,
  				"default": "Exclusive"
  			}
  		]
  	},
  	{
  		name: "ComplexGateway",
  		superClass: [
  			"Gateway"
  		],
  		properties: [
  			{
  				name: "activationCondition",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "default",
  				type: "SequenceFlow",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ExclusiveGateway",
  		superClass: [
  			"Gateway"
  		],
  		properties: [
  			{
  				name: "default",
  				type: "SequenceFlow",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "InclusiveGateway",
  		superClass: [
  			"Gateway"
  		],
  		properties: [
  			{
  				name: "default",
  				type: "SequenceFlow",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ParallelGateway",
  		superClass: [
  			"Gateway"
  		]
  	},
  	{
  		name: "RootElement",
  		isAbstract: true,
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "Relationship",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "type",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "direction",
  				type: "RelationshipDirection",
  				isAttr: true
  			},
  			{
  				name: "source",
  				isMany: true,
  				isReference: true,
  				type: "Element"
  			},
  			{
  				name: "target",
  				isMany: true,
  				isReference: true,
  				type: "Element"
  			}
  		]
  	},
  	{
  		name: "BaseElement",
  		isAbstract: true,
  		properties: [
  			{
  				name: "id",
  				isAttr: true,
  				type: "String",
  				isId: true
  			},
  			{
  				name: "documentation",
  				type: "Documentation",
  				isMany: true
  			},
  			{
  				name: "extensionDefinitions",
  				type: "ExtensionDefinition",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "extensionElements",
  				type: "ExtensionElements"
  			}
  		]
  	},
  	{
  		name: "Extension",
  		properties: [
  			{
  				name: "mustUnderstand",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "definition",
  				type: "ExtensionDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ExtensionDefinition",
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "extensionAttributeDefinitions",
  				type: "ExtensionAttributeDefinition",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "ExtensionAttributeDefinition",
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "type",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "isReference",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "extensionDefinition",
  				type: "ExtensionDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ExtensionElements",
  		properties: [
  			{
  				name: "valueRef",
  				isAttr: true,
  				isReference: true,
  				type: "Element"
  			},
  			{
  				name: "values",
  				type: "Element",
  				isMany: true
  			},
  			{
  				name: "extensionAttributeDefinition",
  				type: "ExtensionAttributeDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Documentation",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "text",
  				type: "String",
  				isBody: true
  			},
  			{
  				name: "textFormat",
  				"default": "text/plain",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Event",
  		isAbstract: true,
  		superClass: [
  			"FlowNode",
  			"InteractionNode"
  		],
  		properties: [
  			{
  				name: "properties",
  				type: "Property",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "IntermediateCatchEvent",
  		superClass: [
  			"CatchEvent"
  		]
  	},
  	{
  		name: "IntermediateThrowEvent",
  		superClass: [
  			"ThrowEvent"
  		]
  	},
  	{
  		name: "EndEvent",
  		superClass: [
  			"ThrowEvent"
  		]
  	},
  	{
  		name: "StartEvent",
  		superClass: [
  			"CatchEvent"
  		],
  		properties: [
  			{
  				name: "isInterrupting",
  				"default": true,
  				isAttr: true,
  				type: "Boolean"
  			}
  		]
  	},
  	{
  		name: "ThrowEvent",
  		isAbstract: true,
  		superClass: [
  			"Event"
  		],
  		properties: [
  			{
  				name: "dataInputs",
  				type: "DataInput",
  				isMany: true
  			},
  			{
  				name: "dataInputAssociations",
  				type: "DataInputAssociation",
  				isMany: true
  			},
  			{
  				name: "inputSet",
  				type: "InputSet"
  			},
  			{
  				name: "eventDefinitions",
  				type: "EventDefinition",
  				isMany: true
  			},
  			{
  				name: "eventDefinitionRef",
  				type: "EventDefinition",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "CatchEvent",
  		isAbstract: true,
  		superClass: [
  			"Event"
  		],
  		properties: [
  			{
  				name: "parallelMultiple",
  				isAttr: true,
  				type: "Boolean",
  				"default": false
  			},
  			{
  				name: "dataOutputs",
  				type: "DataOutput",
  				isMany: true
  			},
  			{
  				name: "dataOutputAssociations",
  				type: "DataOutputAssociation",
  				isMany: true
  			},
  			{
  				name: "outputSet",
  				type: "OutputSet"
  			},
  			{
  				name: "eventDefinitions",
  				type: "EventDefinition",
  				isMany: true
  			},
  			{
  				name: "eventDefinitionRef",
  				type: "EventDefinition",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "BoundaryEvent",
  		superClass: [
  			"CatchEvent"
  		],
  		properties: [
  			{
  				name: "cancelActivity",
  				"default": true,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "attachedToRef",
  				type: "Activity",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "EventDefinition",
  		isAbstract: true,
  		superClass: [
  			"RootElement"
  		]
  	},
  	{
  		name: "CancelEventDefinition",
  		superClass: [
  			"EventDefinition"
  		]
  	},
  	{
  		name: "ErrorEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "errorRef",
  				type: "Error",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "TerminateEventDefinition",
  		superClass: [
  			"EventDefinition"
  		]
  	},
  	{
  		name: "EscalationEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "escalationRef",
  				type: "Escalation",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Escalation",
  		properties: [
  			{
  				name: "structureRef",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "escalationCode",
  				isAttr: true,
  				type: "String"
  			}
  		],
  		superClass: [
  			"RootElement"
  		]
  	},
  	{
  		name: "CompensateEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "waitForCompletion",
  				isAttr: true,
  				type: "Boolean",
  				"default": true
  			},
  			{
  				name: "activityRef",
  				type: "Activity",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "TimerEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "timeDate",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "timeCycle",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "timeDuration",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			}
  		]
  	},
  	{
  		name: "LinkEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "target",
  				type: "LinkEventDefinition",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "source",
  				type: "LinkEventDefinition",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "MessageEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "messageRef",
  				type: "Message",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "operationRef",
  				type: "Operation",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ConditionalEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "condition",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			}
  		]
  	},
  	{
  		name: "SignalEventDefinition",
  		superClass: [
  			"EventDefinition"
  		],
  		properties: [
  			{
  				name: "signalRef",
  				type: "Signal",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Signal",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "structureRef",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ImplicitThrowEvent",
  		superClass: [
  			"ThrowEvent"
  		]
  	},
  	{
  		name: "DataState",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ItemAwareElement",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "itemSubjectRef",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "dataState",
  				type: "DataState"
  			}
  		]
  	},
  	{
  		name: "DataAssociation",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "sourceRef",
  				type: "ItemAwareElement",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "targetRef",
  				type: "ItemAwareElement",
  				isReference: true
  			},
  			{
  				name: "transformation",
  				type: "FormalExpression",
  				xml: {
  					serialize: "property"
  				}
  			},
  			{
  				name: "assignment",
  				type: "Assignment",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "DataInput",
  		superClass: [
  			"ItemAwareElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "isCollection",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "inputSetRef",
  				type: "InputSet",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "inputSetWithOptional",
  				type: "InputSet",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "inputSetWithWhileExecuting",
  				type: "InputSet",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "DataOutput",
  		superClass: [
  			"ItemAwareElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "isCollection",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "outputSetRef",
  				type: "OutputSet",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "outputSetWithOptional",
  				type: "OutputSet",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "outputSetWithWhileExecuting",
  				type: "OutputSet",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "InputSet",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "dataInputRefs",
  				type: "DataInput",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "optionalInputRefs",
  				type: "DataInput",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "whileExecutingInputRefs",
  				type: "DataInput",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "outputSetRefs",
  				type: "OutputSet",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "OutputSet",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "dataOutputRefs",
  				type: "DataOutput",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "inputSetRefs",
  				type: "InputSet",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "optionalOutputRefs",
  				type: "DataOutput",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "whileExecutingOutputRefs",
  				type: "DataOutput",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Property",
  		superClass: [
  			"ItemAwareElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "DataInputAssociation",
  		superClass: [
  			"DataAssociation"
  		]
  	},
  	{
  		name: "DataOutputAssociation",
  		superClass: [
  			"DataAssociation"
  		]
  	},
  	{
  		name: "InputOutputSpecification",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "dataInputs",
  				type: "DataInput",
  				isMany: true
  			},
  			{
  				name: "dataOutputs",
  				type: "DataOutput",
  				isMany: true
  			},
  			{
  				name: "inputSets",
  				type: "InputSet",
  				isMany: true
  			},
  			{
  				name: "outputSets",
  				type: "OutputSet",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "DataObject",
  		superClass: [
  			"FlowElement",
  			"ItemAwareElement"
  		],
  		properties: [
  			{
  				name: "isCollection",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			}
  		]
  	},
  	{
  		name: "InputOutputBinding",
  		properties: [
  			{
  				name: "inputDataRef",
  				type: "InputSet",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "outputDataRef",
  				type: "OutputSet",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "operationRef",
  				type: "Operation",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Assignment",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "from",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "to",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			}
  		]
  	},
  	{
  		name: "DataStore",
  		superClass: [
  			"RootElement",
  			"ItemAwareElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "capacity",
  				isAttr: true,
  				type: "Integer"
  			},
  			{
  				name: "isUnlimited",
  				"default": true,
  				isAttr: true,
  				type: "Boolean"
  			}
  		]
  	},
  	{
  		name: "DataStoreReference",
  		superClass: [
  			"ItemAwareElement",
  			"FlowElement"
  		],
  		properties: [
  			{
  				name: "dataStoreRef",
  				type: "DataStore",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "DataObjectReference",
  		superClass: [
  			"ItemAwareElement",
  			"FlowElement"
  		],
  		properties: [
  			{
  				name: "dataObjectRef",
  				type: "DataObject",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ConversationLink",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "sourceRef",
  				type: "InteractionNode",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "targetRef",
  				type: "InteractionNode",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ConversationAssociation",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "innerConversationNodeRef",
  				type: "ConversationNode",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "outerConversationNodeRef",
  				type: "ConversationNode",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "CallConversation",
  		superClass: [
  			"ConversationNode"
  		],
  		properties: [
  			{
  				name: "calledCollaborationRef",
  				type: "Collaboration",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "participantAssociations",
  				type: "ParticipantAssociation",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "Conversation",
  		superClass: [
  			"ConversationNode"
  		]
  	},
  	{
  		name: "SubConversation",
  		superClass: [
  			"ConversationNode"
  		],
  		properties: [
  			{
  				name: "conversationNodes",
  				type: "ConversationNode",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "ConversationNode",
  		isAbstract: true,
  		superClass: [
  			"InteractionNode",
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "participantRef",
  				type: "Participant",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "messageFlowRefs",
  				type: "MessageFlow",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "correlationKeys",
  				type: "CorrelationKey",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "GlobalConversation",
  		superClass: [
  			"Collaboration"
  		]
  	},
  	{
  		name: "PartnerEntity",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "participantRef",
  				type: "Participant",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "PartnerRole",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "participantRef",
  				type: "Participant",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "CorrelationProperty",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "correlationPropertyRetrievalExpression",
  				type: "CorrelationPropertyRetrievalExpression",
  				isMany: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "type",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Error",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "structureRef",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "errorCode",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "CorrelationKey",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "correlationPropertyRef",
  				type: "CorrelationProperty",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Expression",
  		superClass: [
  			"BaseElement"
  		],
  		isAbstract: false,
  		properties: [
  			{
  				name: "body",
  				isBody: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "FormalExpression",
  		superClass: [
  			"Expression"
  		],
  		properties: [
  			{
  				name: "language",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "evaluatesToTypeRef",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Message",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "itemRef",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ItemDefinition",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "itemKind",
  				type: "ItemKind",
  				isAttr: true
  			},
  			{
  				name: "structureRef",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "isCollection",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "import",
  				type: "Import",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "FlowElement",
  		isAbstract: true,
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "auditing",
  				type: "Auditing"
  			},
  			{
  				name: "monitoring",
  				type: "Monitoring"
  			},
  			{
  				name: "categoryValueRef",
  				type: "CategoryValue",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "SequenceFlow",
  		superClass: [
  			"FlowElement"
  		],
  		properties: [
  			{
  				name: "isImmediate",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "conditionExpression",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "sourceRef",
  				type: "FlowNode",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "targetRef",
  				type: "FlowNode",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "FlowElementsContainer",
  		isAbstract: true,
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "laneSets",
  				type: "LaneSet",
  				isMany: true
  			},
  			{
  				name: "flowElements",
  				type: "FlowElement",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "CallableElement",
  		isAbstract: true,
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "ioSpecification",
  				type: "InputOutputSpecification",
  				xml: {
  					serialize: "property"
  				}
  			},
  			{
  				name: "supportedInterfaceRef",
  				type: "Interface",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "ioBinding",
  				type: "InputOutputBinding",
  				isMany: true,
  				xml: {
  					serialize: "property"
  				}
  			}
  		]
  	},
  	{
  		name: "FlowNode",
  		isAbstract: true,
  		superClass: [
  			"FlowElement"
  		],
  		properties: [
  			{
  				name: "incoming",
  				type: "SequenceFlow",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "outgoing",
  				type: "SequenceFlow",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "lanes",
  				type: "Lane",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "CorrelationPropertyRetrievalExpression",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "messagePath",
  				type: "FormalExpression"
  			},
  			{
  				name: "messageRef",
  				type: "Message",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "CorrelationPropertyBinding",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "dataPath",
  				type: "FormalExpression"
  			},
  			{
  				name: "correlationPropertyRef",
  				type: "CorrelationProperty",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Resource",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "resourceParameters",
  				type: "ResourceParameter",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "ResourceParameter",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "isRequired",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "type",
  				type: "ItemDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "CorrelationSubscription",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "correlationKeyRef",
  				type: "CorrelationKey",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "correlationPropertyBinding",
  				type: "CorrelationPropertyBinding",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "MessageFlow",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "sourceRef",
  				type: "InteractionNode",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "targetRef",
  				type: "InteractionNode",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "messageRef",
  				type: "Message",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "MessageFlowAssociation",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "innerMessageFlowRef",
  				type: "MessageFlow",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "outerMessageFlowRef",
  				type: "MessageFlow",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "InteractionNode",
  		isAbstract: true,
  		properties: [
  			{
  				name: "incomingConversationLinks",
  				type: "ConversationLink",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "outgoingConversationLinks",
  				type: "ConversationLink",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Participant",
  		superClass: [
  			"InteractionNode",
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "interfaceRef",
  				type: "Interface",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "participantMultiplicity",
  				type: "ParticipantMultiplicity"
  			},
  			{
  				name: "endPointRefs",
  				type: "EndPoint",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "processRef",
  				type: "Process",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ParticipantAssociation",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "innerParticipantRef",
  				type: "Participant",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "outerParticipantRef",
  				type: "Participant",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ParticipantMultiplicity",
  		properties: [
  			{
  				name: "minimum",
  				"default": 0,
  				isAttr: true,
  				type: "Integer"
  			},
  			{
  				name: "maximum",
  				"default": 1,
  				isAttr: true,
  				type: "Integer"
  			}
  		],
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "Collaboration",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "isClosed",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "participants",
  				type: "Participant",
  				isMany: true
  			},
  			{
  				name: "messageFlows",
  				type: "MessageFlow",
  				isMany: true
  			},
  			{
  				name: "artifacts",
  				type: "Artifact",
  				isMany: true
  			},
  			{
  				name: "conversations",
  				type: "ConversationNode",
  				isMany: true
  			},
  			{
  				name: "conversationAssociations",
  				type: "ConversationAssociation"
  			},
  			{
  				name: "participantAssociations",
  				type: "ParticipantAssociation",
  				isMany: true
  			},
  			{
  				name: "messageFlowAssociations",
  				type: "MessageFlowAssociation",
  				isMany: true
  			},
  			{
  				name: "correlationKeys",
  				type: "CorrelationKey",
  				isMany: true
  			},
  			{
  				name: "choreographyRef",
  				type: "Choreography",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "conversationLinks",
  				type: "ConversationLink",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "ChoreographyActivity",
  		isAbstract: true,
  		superClass: [
  			"FlowNode"
  		],
  		properties: [
  			{
  				name: "participantRef",
  				type: "Participant",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "initiatingParticipantRef",
  				type: "Participant",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "correlationKeys",
  				type: "CorrelationKey",
  				isMany: true
  			},
  			{
  				name: "loopType",
  				type: "ChoreographyLoopType",
  				"default": "None",
  				isAttr: true
  			}
  		]
  	},
  	{
  		name: "CallChoreography",
  		superClass: [
  			"ChoreographyActivity"
  		],
  		properties: [
  			{
  				name: "calledChoreographyRef",
  				type: "Choreography",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "participantAssociations",
  				type: "ParticipantAssociation",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "SubChoreography",
  		superClass: [
  			"ChoreographyActivity",
  			"FlowElementsContainer"
  		],
  		properties: [
  			{
  				name: "artifacts",
  				type: "Artifact",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "ChoreographyTask",
  		superClass: [
  			"ChoreographyActivity"
  		],
  		properties: [
  			{
  				name: "messageFlowRef",
  				type: "MessageFlow",
  				isMany: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Choreography",
  		superClass: [
  			"Collaboration",
  			"FlowElementsContainer"
  		]
  	},
  	{
  		name: "GlobalChoreographyTask",
  		superClass: [
  			"Choreography"
  		],
  		properties: [
  			{
  				name: "initiatingParticipantRef",
  				type: "Participant",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "TextAnnotation",
  		superClass: [
  			"Artifact"
  		],
  		properties: [
  			{
  				name: "text",
  				type: "String"
  			},
  			{
  				name: "textFormat",
  				"default": "text/plain",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Group",
  		superClass: [
  			"Artifact"
  		],
  		properties: [
  			{
  				name: "categoryValueRef",
  				type: "CategoryValue",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Association",
  		superClass: [
  			"Artifact"
  		],
  		properties: [
  			{
  				name: "associationDirection",
  				type: "AssociationDirection",
  				isAttr: true
  			},
  			{
  				name: "sourceRef",
  				type: "BaseElement",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "targetRef",
  				type: "BaseElement",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "Category",
  		superClass: [
  			"RootElement"
  		],
  		properties: [
  			{
  				name: "categoryValue",
  				type: "CategoryValue",
  				isMany: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Artifact",
  		isAbstract: true,
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "CategoryValue",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "categorizedFlowElements",
  				type: "FlowElement",
  				isMany: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "value",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Activity",
  		isAbstract: true,
  		superClass: [
  			"FlowNode"
  		],
  		properties: [
  			{
  				name: "isForCompensation",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "default",
  				type: "SequenceFlow",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "ioSpecification",
  				type: "InputOutputSpecification",
  				xml: {
  					serialize: "property"
  				}
  			},
  			{
  				name: "boundaryEventRefs",
  				type: "BoundaryEvent",
  				isMany: true,
  				isReference: true
  			},
  			{
  				name: "properties",
  				type: "Property",
  				isMany: true
  			},
  			{
  				name: "dataInputAssociations",
  				type: "DataInputAssociation",
  				isMany: true
  			},
  			{
  				name: "dataOutputAssociations",
  				type: "DataOutputAssociation",
  				isMany: true
  			},
  			{
  				name: "startQuantity",
  				"default": 1,
  				isAttr: true,
  				type: "Integer"
  			},
  			{
  				name: "resources",
  				type: "ResourceRole",
  				isMany: true
  			},
  			{
  				name: "completionQuantity",
  				"default": 1,
  				isAttr: true,
  				type: "Integer"
  			},
  			{
  				name: "loopCharacteristics",
  				type: "LoopCharacteristics"
  			}
  		]
  	},
  	{
  		name: "ServiceTask",
  		superClass: [
  			"Task"
  		],
  		properties: [
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "operationRef",
  				type: "Operation",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "SubProcess",
  		superClass: [
  			"Activity",
  			"FlowElementsContainer",
  			"InteractionNode"
  		],
  		properties: [
  			{
  				name: "triggeredByEvent",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "artifacts",
  				type: "Artifact",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "LoopCharacteristics",
  		isAbstract: true,
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "MultiInstanceLoopCharacteristics",
  		superClass: [
  			"LoopCharacteristics"
  		],
  		properties: [
  			{
  				name: "isSequential",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "behavior",
  				type: "MultiInstanceBehavior",
  				"default": "All",
  				isAttr: true
  			},
  			{
  				name: "loopCardinality",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "loopDataInputRef",
  				type: "ItemAwareElement",
  				isReference: true
  			},
  			{
  				name: "loopDataOutputRef",
  				type: "ItemAwareElement",
  				isReference: true
  			},
  			{
  				name: "inputDataItem",
  				type: "DataInput",
  				xml: {
  					serialize: "property"
  				}
  			},
  			{
  				name: "outputDataItem",
  				type: "DataOutput",
  				xml: {
  					serialize: "property"
  				}
  			},
  			{
  				name: "complexBehaviorDefinition",
  				type: "ComplexBehaviorDefinition",
  				isMany: true
  			},
  			{
  				name: "completionCondition",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "oneBehaviorEventRef",
  				type: "EventDefinition",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "noneBehaviorEventRef",
  				type: "EventDefinition",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "StandardLoopCharacteristics",
  		superClass: [
  			"LoopCharacteristics"
  		],
  		properties: [
  			{
  				name: "testBefore",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "loopCondition",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "loopMaximum",
  				type: "Integer",
  				isAttr: true
  			}
  		]
  	},
  	{
  		name: "CallActivity",
  		superClass: [
  			"Activity",
  			"InteractionNode"
  		],
  		properties: [
  			{
  				name: "calledElement",
  				type: "String",
  				isAttr: true
  			}
  		]
  	},
  	{
  		name: "Task",
  		superClass: [
  			"Activity",
  			"InteractionNode"
  		]
  	},
  	{
  		name: "SendTask",
  		superClass: [
  			"Task"
  		],
  		properties: [
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "operationRef",
  				type: "Operation",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "messageRef",
  				type: "Message",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ReceiveTask",
  		superClass: [
  			"Task"
  		],
  		properties: [
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "instantiate",
  				"default": false,
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "operationRef",
  				type: "Operation",
  				isAttr: true,
  				isReference: true
  			},
  			{
  				name: "messageRef",
  				type: "Message",
  				isAttr: true,
  				isReference: true
  			}
  		]
  	},
  	{
  		name: "ScriptTask",
  		superClass: [
  			"Task"
  		],
  		properties: [
  			{
  				name: "scriptFormat",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "script",
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "BusinessRuleTask",
  		superClass: [
  			"Task"
  		],
  		properties: [
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "AdHocSubProcess",
  		superClass: [
  			"SubProcess"
  		],
  		properties: [
  			{
  				name: "completionCondition",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "ordering",
  				type: "AdHocOrdering",
  				isAttr: true
  			},
  			{
  				name: "cancelRemainingInstances",
  				"default": true,
  				isAttr: true,
  				type: "Boolean"
  			}
  		]
  	},
  	{
  		name: "Transaction",
  		superClass: [
  			"SubProcess"
  		],
  		properties: [
  			{
  				name: "protocol",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "method",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "GlobalScriptTask",
  		superClass: [
  			"GlobalTask"
  		],
  		properties: [
  			{
  				name: "scriptLanguage",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "script",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "GlobalBusinessRuleTask",
  		superClass: [
  			"GlobalTask"
  		],
  		properties: [
  			{
  				name: "implementation",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ComplexBehaviorDefinition",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "condition",
  				type: "FormalExpression"
  			},
  			{
  				name: "event",
  				type: "ImplicitThrowEvent"
  			}
  		]
  	},
  	{
  		name: "ResourceRole",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "resourceRef",
  				type: "Resource",
  				isReference: true
  			},
  			{
  				name: "resourceParameterBindings",
  				type: "ResourceParameterBinding",
  				isMany: true
  			},
  			{
  				name: "resourceAssignmentExpression",
  				type: "ResourceAssignmentExpression"
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ResourceParameterBinding",
  		properties: [
  			{
  				name: "expression",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			},
  			{
  				name: "parameterRef",
  				type: "ResourceParameter",
  				isAttr: true,
  				isReference: true
  			}
  		],
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "ResourceAssignmentExpression",
  		properties: [
  			{
  				name: "expression",
  				type: "Expression",
  				xml: {
  					serialize: "xsi:type"
  				}
  			}
  		],
  		superClass: [
  			"BaseElement"
  		]
  	},
  	{
  		name: "Import",
  		properties: [
  			{
  				name: "importType",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "location",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "namespace",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Definitions",
  		superClass: [
  			"BaseElement"
  		],
  		properties: [
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "targetNamespace",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "expressionLanguage",
  				"default": "http://www.w3.org/1999/XPath",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "typeLanguage",
  				"default": "http://www.w3.org/2001/XMLSchema",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "imports",
  				type: "Import",
  				isMany: true
  			},
  			{
  				name: "extensions",
  				type: "Extension",
  				isMany: true
  			},
  			{
  				name: "rootElements",
  				type: "RootElement",
  				isMany: true
  			},
  			{
  				name: "diagrams",
  				isMany: true,
  				type: "bpmndi:BPMNDiagram"
  			},
  			{
  				name: "exporter",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "relationships",
  				type: "Relationship",
  				isMany: true
  			},
  			{
  				name: "exporterVersion",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	}
  ];
  var enumerations$3 = [
  	{
  		name: "ProcessType",
  		literalValues: [
  			{
  				name: "None"
  			},
  			{
  				name: "Public"
  			},
  			{
  				name: "Private"
  			}
  		]
  	},
  	{
  		name: "GatewayDirection",
  		literalValues: [
  			{
  				name: "Unspecified"
  			},
  			{
  				name: "Converging"
  			},
  			{
  				name: "Diverging"
  			},
  			{
  				name: "Mixed"
  			}
  		]
  	},
  	{
  		name: "EventBasedGatewayType",
  		literalValues: [
  			{
  				name: "Parallel"
  			},
  			{
  				name: "Exclusive"
  			}
  		]
  	},
  	{
  		name: "RelationshipDirection",
  		literalValues: [
  			{
  				name: "None"
  			},
  			{
  				name: "Forward"
  			},
  			{
  				name: "Backward"
  			},
  			{
  				name: "Both"
  			}
  		]
  	},
  	{
  		name: "ItemKind",
  		literalValues: [
  			{
  				name: "Physical"
  			},
  			{
  				name: "Information"
  			}
  		]
  	},
  	{
  		name: "ChoreographyLoopType",
  		literalValues: [
  			{
  				name: "None"
  			},
  			{
  				name: "Standard"
  			},
  			{
  				name: "MultiInstanceSequential"
  			},
  			{
  				name: "MultiInstanceParallel"
  			}
  		]
  	},
  	{
  		name: "AssociationDirection",
  		literalValues: [
  			{
  				name: "None"
  			},
  			{
  				name: "One"
  			},
  			{
  				name: "Both"
  			}
  		]
  	},
  	{
  		name: "MultiInstanceBehavior",
  		literalValues: [
  			{
  				name: "None"
  			},
  			{
  				name: "One"
  			},
  			{
  				name: "All"
  			},
  			{
  				name: "Complex"
  			}
  		]
  	},
  	{
  		name: "AdHocOrdering",
  		literalValues: [
  			{
  				name: "Parallel"
  			},
  			{
  				name: "Sequential"
  			}
  		]
  	}
  ];
  var xml$1 = {
  	tagAlias: "lowerCase",
  	typePrefix: "t"
  };
  var BpmnPackage = {
  	name: name$5,
  	uri: uri$5,
  	prefix: prefix$5,
  	associations: associations$5,
  	types: types$5,
  	enumerations: enumerations$3,
  	xml: xml$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: [
  			{
  				name: "plane",
  				type: "BPMNPlane",
  				redefines: "di:Diagram#rootElement"
  			},
  			{
  				name: "labelStyle",
  				type: "BPMNLabelStyle",
  				isMany: true
  			}
  		],
  		superClass: [
  			"di:Diagram"
  		]
  	},
  	{
  		name: "BPMNPlane",
  		properties: [
  			{
  				name: "bpmnElement",
  				isAttr: true,
  				isReference: true,
  				type: "bpmn:BaseElement",
  				redefines: "di:DiagramElement#modelElement"
  			}
  		],
  		superClass: [
  			"di:Plane"
  		]
  	},
  	{
  		name: "BPMNShape",
  		properties: [
  			{
  				name: "bpmnElement",
  				isAttr: true,
  				isReference: true,
  				type: "bpmn:BaseElement",
  				redefines: "di:DiagramElement#modelElement"
  			},
  			{
  				name: "isHorizontal",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "isExpanded",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "isMarkerVisible",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "label",
  				type: "BPMNLabel"
  			},
  			{
  				name: "isMessageVisible",
  				isAttr: true,
  				type: "Boolean"
  			},
  			{
  				name: "participantBandKind",
  				type: "ParticipantBandKind",
  				isAttr: true
  			},
  			{
  				name: "choreographyActivityShape",
  				type: "BPMNShape",
  				isAttr: true,
  				isReference: true
  			}
  		],
  		superClass: [
  			"di:LabeledShape"
  		]
  	},
  	{
  		name: "BPMNEdge",
  		properties: [
  			{
  				name: "label",
  				type: "BPMNLabel"
  			},
  			{
  				name: "bpmnElement",
  				isAttr: true,
  				isReference: true,
  				type: "bpmn:BaseElement",
  				redefines: "di:DiagramElement#modelElement"
  			},
  			{
  				name: "sourceElement",
  				isAttr: true,
  				isReference: true,
  				type: "di:DiagramElement",
  				redefines: "di:Edge#source"
  			},
  			{
  				name: "targetElement",
  				isAttr: true,
  				isReference: true,
  				type: "di:DiagramElement",
  				redefines: "di:Edge#target"
  			},
  			{
  				name: "messageVisibleKind",
  				type: "MessageVisibleKind",
  				isAttr: true,
  				"default": "initiating"
  			}
  		],
  		superClass: [
  			"di:LabeledEdge"
  		]
  	},
  	{
  		name: "BPMNLabel",
  		properties: [
  			{
  				name: "labelStyle",
  				type: "BPMNLabelStyle",
  				isAttr: true,
  				isReference: true,
  				redefines: "di:DiagramElement#style"
  			}
  		],
  		superClass: [
  			"di:Label"
  		]
  	},
  	{
  		name: "BPMNLabelStyle",
  		properties: [
  			{
  				name: "font",
  				type: "dc:Font"
  			}
  		],
  		superClass: [
  			"di:Style"
  		]
  	}
  ];
  var enumerations$2 = [
  	{
  		name: "ParticipantBandKind",
  		literalValues: [
  			{
  				name: "top_initiating"
  			},
  			{
  				name: "middle_initiating"
  			},
  			{
  				name: "bottom_initiating"
  			},
  			{
  				name: "top_non_initiating"
  			},
  			{
  				name: "middle_non_initiating"
  			},
  			{
  				name: "bottom_non_initiating"
  			}
  		]
  	},
  	{
  		name: "MessageVisibleKind",
  		literalValues: [
  			{
  				name: "initiating"
  			},
  			{
  				name: "non_initiating"
  			}
  		]
  	}
  ];
  var associations$4 = [
  ];
  var BpmnDiPackage = {
  	name: name$4,
  	uri: uri$4,
  	prefix: prefix$4,
  	types: types$4,
  	enumerations: enumerations$2,
  	associations: associations$4
  };

  var name$3 = "DC";
  var uri$3 = "http://www.omg.org/spec/DD/20100524/DC";
  var prefix$3 = "dc";
  var types$3 = [
  	{
  		name: "Boolean"
  	},
  	{
  		name: "Integer"
  	},
  	{
  		name: "Real"
  	},
  	{
  		name: "String"
  	},
  	{
  		name: "Font",
  		properties: [
  			{
  				name: "name",
  				type: "String",
  				isAttr: true
  			},
  			{
  				name: "size",
  				type: "Real",
  				isAttr: true
  			},
  			{
  				name: "isBold",
  				type: "Boolean",
  				isAttr: true
  			},
  			{
  				name: "isItalic",
  				type: "Boolean",
  				isAttr: true
  			},
  			{
  				name: "isUnderline",
  				type: "Boolean",
  				isAttr: true
  			},
  			{
  				name: "isStrikeThrough",
  				type: "Boolean",
  				isAttr: true
  			}
  		]
  	},
  	{
  		name: "Point",
  		properties: [
  			{
  				name: "x",
  				type: "Real",
  				"default": "0",
  				isAttr: true
  			},
  			{
  				name: "y",
  				type: "Real",
  				"default": "0",
  				isAttr: true
  			}
  		]
  	},
  	{
  		name: "Bounds",
  		properties: [
  			{
  				name: "x",
  				type: "Real",
  				"default": "0",
  				isAttr: true
  			},
  			{
  				name: "y",
  				type: "Real",
  				"default": "0",
  				isAttr: true
  			},
  			{
  				name: "width",
  				type: "Real",
  				isAttr: true
  			},
  			{
  				name: "height",
  				type: "Real",
  				isAttr: true
  			}
  		]
  	}
  ];
  var associations$3 = [
  ];
  var DcPackage = {
  	name: name$3,
  	uri: uri$3,
  	prefix: prefix$3,
  	types: types$3,
  	associations: associations$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,
  		properties: [
  			{
  				name: "id",
  				isAttr: true,
  				isId: true,
  				type: "String"
  			},
  			{
  				name: "extension",
  				type: "Extension"
  			},
  			{
  				name: "owningDiagram",
  				type: "Diagram",
  				isReadOnly: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "owningElement",
  				type: "DiagramElement",
  				isReadOnly: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "modelElement",
  				isReadOnly: true,
  				isVirtual: true,
  				isReference: true,
  				type: "Element"
  			},
  			{
  				name: "style",
  				type: "Style",
  				isReadOnly: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "ownedElement",
  				type: "DiagramElement",
  				isReadOnly: true,
  				isMany: true,
  				isVirtual: true
  			}
  		]
  	},
  	{
  		name: "Node",
  		isAbstract: true,
  		superClass: [
  			"DiagramElement"
  		]
  	},
  	{
  		name: "Edge",
  		isAbstract: true,
  		superClass: [
  			"DiagramElement"
  		],
  		properties: [
  			{
  				name: "source",
  				type: "DiagramElement",
  				isReadOnly: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "target",
  				type: "DiagramElement",
  				isReadOnly: true,
  				isVirtual: true,
  				isReference: true
  			},
  			{
  				name: "waypoint",
  				isUnique: false,
  				isMany: true,
  				type: "dc:Point",
  				xml: {
  					serialize: "xsi:type"
  				}
  			}
  		]
  	},
  	{
  		name: "Diagram",
  		isAbstract: true,
  		properties: [
  			{
  				name: "id",
  				isAttr: true,
  				isId: true,
  				type: "String"
  			},
  			{
  				name: "rootElement",
  				type: "DiagramElement",
  				isReadOnly: true,
  				isVirtual: true
  			},
  			{
  				name: "name",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "documentation",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "resolution",
  				isAttr: true,
  				type: "Real"
  			},
  			{
  				name: "ownedStyle",
  				type: "Style",
  				isReadOnly: true,
  				isMany: true,
  				isVirtual: true
  			}
  		]
  	},
  	{
  		name: "Shape",
  		isAbstract: true,
  		superClass: [
  			"Node"
  		],
  		properties: [
  			{
  				name: "bounds",
  				type: "dc:Bounds"
  			}
  		]
  	},
  	{
  		name: "Plane",
  		isAbstract: true,
  		superClass: [
  			"Node"
  		],
  		properties: [
  			{
  				name: "planeElement",
  				type: "DiagramElement",
  				subsettedProperty: "DiagramElement-ownedElement",
  				isMany: true
  			}
  		]
  	},
  	{
  		name: "LabeledEdge",
  		isAbstract: true,
  		superClass: [
  			"Edge"
  		],
  		properties: [
  			{
  				name: "ownedLabel",
  				type: "Label",
  				isReadOnly: true,
  				subsettedProperty: "DiagramElement-ownedElement",
  				isMany: true,
  				isVirtual: true
  			}
  		]
  	},
  	{
  		name: "LabeledShape",
  		isAbstract: true,
  		superClass: [
  			"Shape"
  		],
  		properties: [
  			{
  				name: "ownedLabel",
  				type: "Label",
  				isReadOnly: true,
  				subsettedProperty: "DiagramElement-ownedElement",
  				isMany: true,
  				isVirtual: true
  			}
  		]
  	},
  	{
  		name: "Label",
  		isAbstract: true,
  		superClass: [
  			"Node"
  		],
  		properties: [
  			{
  				name: "bounds",
  				type: "dc:Bounds"
  			}
  		]
  	},
  	{
  		name: "Style",
  		isAbstract: true,
  		properties: [
  			{
  				name: "id",
  				isAttr: true,
  				isId: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "Extension",
  		properties: [
  			{
  				name: "values",
  				isMany: true,
  				type: "Element"
  			}
  		]
  	}
  ];
  var associations$2 = [
  ];
  var xml = {
  	tagAlias: "lowerCase"
  };
  var DiPackage = {
  	name: name$2,
  	uri: uri$2,
  	prefix: prefix$2,
  	types: types$2,
  	associations: associations$2,
  	xml: xml
  };

  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": [
  			"bpmndi:BPMNShape"
  		],
  		properties: [
  			{
  				name: "stroke",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "fill",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ColoredEdge",
  		"extends": [
  			"bpmndi:BPMNEdge"
  		],
  		properties: [
  			{
  				name: "stroke",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "fill",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	}
  ];
  var enumerations$1 = [
  ];
  var associations$1 = [
  ];
  var BiocPackage = {
  	name: name$1,
  	uri: uri$1,
  	prefix: prefix$1,
  	types: types$1,
  	enumerations: enumerations$1,
  	associations: associations$1
  };

  var name = "BPMN in Color";
  var uri = "http://www.omg.org/spec/BPMN/non-normative/color/1.0";
  var prefix = "color";
  var types = [
  	{
  		name: "ColoredLabel",
  		"extends": [
  			"bpmndi:BPMNLabel"
  		],
  		properties: [
  			{
  				name: "color",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ColoredShape",
  		"extends": [
  			"bpmndi:BPMNShape"
  		],
  		properties: [
  			{
  				name: "background-color",
  				isAttr: true,
  				type: "String"
  			},
  			{
  				name: "border-color",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	},
  	{
  		name: "ColoredEdge",
  		"extends": [
  			"bpmndi:BPMNEdge"
  		],
  		properties: [
  			{
  				name: "border-color",
  				isAttr: true,
  				type: "String"
  			}
  		]
  	}
  ];
  var enumerations = [
  ];
  var associations = [
  ];
  var BpmnInColorPackage = {
  	name: name,
  	uri: uri,
  	prefix: prefix,
  	types: types,
  	enumerations: enumerations,
  	associations: associations
  };

  var packages = {
    bpmn: BpmnPackage,
    bpmndi: BpmnDiPackage,
    dc: DcPackage,
    di: DiPackage,
    bioc: BiocPackage,
    color: BpmnInColorPackage
  };

  function simple(additionalPackages, options) {
    var pks = assign({}, packages, additionalPackages);

    return new BpmnModdle(pks, options);
  }

  function elementToString(e) {
    if (!e) {
      return '<null>';
    }

    return '<' + e.$type + (e.id ? ' id="' + e.id : '') + '" />';
  }

  // TODO(nikku): remove with future bpmn-js version

  /**
   * Wraps APIs to check:
   *
   * 1) If a callback is passed -> Warn users about callback deprecation.
   * 2) If Promise class is implemented in current environment.
   *
   * @private
   */
  function wrapForCompatibility(api) {

    return function() {

      if (!window.Promise) {
        throw new Error('Promises is not supported in this environment. Please polyfill Promise.');
      }

      var argLen = arguments.length;
      if (argLen >= 1 && isFunction(arguments[argLen - 1])) {

        var callback = arguments[argLen - 1];

        console.warn(new Error(
          'Passing callbacks to ' + api.name + ' is deprecated and will be removed in a future major release. ' +
          'Please switch to promises: https://bpmn.io/l/moving-to-promises.html'
        ));

        var argsWithoutCallback = Array.prototype.slice.call(arguments, 0, -1);

        api.apply(this, argsWithoutCallback).then(function(result) {

          var firstKey = Object.keys(result)[0];

          // The APIs we are wrapping all resolve a single item depending on the API.
          // For instance, importXML resolves { warnings } and saveXML returns { xml }.
          // That's why we can call the callback with the first item of result.
          return callback(null, result[firstKey]);

          // Passing a second paramter instead of catch because we don't want to
          // catch errors thrown by callback().
        }, function(err) {

          return callback(err, err.warnings);
        });
      } else {

        return api.apply(this, arguments);
      }
    };
  }


  // TODO(nikku): remove with future bpmn-js version

  var DI_ERROR_MESSAGE = 'Tried to access di from the businessObject. The di is available through the diagram element only. For more information, see https://github.com/bpmn-io/bpmn-js/issues/1472';

  function ensureCompatDiRef(businessObject) {

    // bpmnElement can have multiple independent DIs
    if (!has$1(businessObject, 'di')) {
      Object.defineProperty(businessObject, 'di', {
        enumerable: false,
        get: function() {
          throw new Error(DI_ERROR_MESSAGE);
        }
      });
    }
  }

  /**
   * Returns true if an element has the given meta-model type
   *
   * @param  {ModdleElement}  element
   * @param  {string}         type
   *
   * @return {boolean}
   */
  function is$2(element, type) {
    return element.$instanceOf(type);
  }


  /**
   * Find a suitable display candidate for definitions where the DI does not
   * correctly specify one.
   */
  function findDisplayCandidate(definitions) {
    return find(definitions.rootElements, function(e) {
      return is$2(e, 'bpmn:Process') || is$2(e, 'bpmn:Collaboration');
    });
  }


  function BpmnTreeWalker(handler, translate) {

    // list of containers already walked
    var handledElements = {};

    // list of elements to handle deferred to ensure
    // prerequisites are drawn
    var deferred = [];

    var diMap = {};

    // Helpers //////////////////////

    function contextual(fn, ctx) {
      return function(e) {
        fn(e, ctx);
      };
    }

    function handled(element) {
      handledElements[element.id] = element;
    }

    function isHandled(element) {
      return handledElements[element.id];
    }

    function visit(element, ctx) {

      var gfx = element.gfx;

      // avoid multiple rendering of elements
      if (gfx) {
        throw new Error(
          translate('already rendered {element}', { element: elementToString(element) })
        );
      }

      // call handler
      return handler.element(element, diMap[element.id], ctx);
    }

    function visitRoot(element, diagram) {
      return handler.root(element, diMap[element.id], diagram);
    }

    function visitIfDi(element, ctx) {

      try {
        var gfx = diMap[element.id] && visit(element, ctx);

        handled(element);

        return gfx;
      } catch (e) {
        logError(e.message, { element: element, error: e });

        console.error(translate('failed to import {element}', { element: elementToString(element) }));
        console.error(e);
      }
    }

    function logError(message, context) {
      handler.error(message, context);
    }

    // DI handling //////////////////////

    function registerDi(di) {
      var bpmnElement = di.bpmnElement;

      if (bpmnElement) {
        if (diMap[bpmnElement.id]) {
          logError(
            translate('multiple DI elements defined for {element}', {
              element: elementToString(bpmnElement)
            }),
            { element: bpmnElement }
          );
        } else {
          diMap[bpmnElement.id] = di;

          ensureCompatDiRef(bpmnElement);
        }
      } else {
        logError(
          translate('no bpmnElement referenced in {element}', {
            element: elementToString(di)
          }),
          { element: di }
        );
      }
    }

    function handleDiagram(diagram) {
      handlePlane(diagram.plane);
    }

    function handlePlane(plane) {
      registerDi(plane);

      forEach$1(plane.planeElement, handlePlaneElement);
    }

    function handlePlaneElement(planeElement) {
      registerDi(planeElement);
    }


    // Semantic handling //////////////////////

    /**
     * Handle definitions and return the rendered diagram (if any)
     *
     * @param {ModdleElement} definitions to walk and import
     * @param {ModdleElement} [diagram] specific diagram to import and display
     *
     * @throws {Error} if no diagram to display could be found
     */
    function handleDefinitions(definitions, diagram) {

      // make sure we walk the correct bpmnElement

      var diagrams = definitions.diagrams;

      if (diagram && diagrams.indexOf(diagram) === -1) {
        throw new Error(translate('diagram not part of bpmn:Definitions'));
      }

      if (!diagram && diagrams && diagrams.length) {
        diagram = diagrams[0];
      }

      // no diagram -> nothing to import
      if (!diagram) {
        throw new Error(translate('no diagram to display'));
      }

      // load DI from selected diagram only
      diMap = {};
      handleDiagram(diagram);


      var plane = diagram.plane;

      if (!plane) {
        throw new Error(translate(
          'no plane for {element}',
          { element: elementToString(diagram) }
        ));
      }

      var rootElement = plane.bpmnElement;

      // ensure we default to a suitable display candidate (process or collaboration),
      // even if non is specified in DI
      if (!rootElement) {
        rootElement = findDisplayCandidate(definitions);

        if (!rootElement) {
          throw new Error(translate('no process or collaboration to display'));
        } else {

          logError(
            translate('correcting missing bpmnElement on {plane} to {rootElement}', {
              plane: elementToString(plane),
              rootElement: elementToString(rootElement)
            })
          );

          // correct DI on the fly
          plane.bpmnElement = rootElement;
          registerDi(plane);
        }
      }


      var ctx = visitRoot(rootElement, plane);

      if (is$2(rootElement, 'bpmn:Process') || is$2(rootElement, 'bpmn:SubProcess')) {
        handleProcess(rootElement, ctx);
      } else if (is$2(rootElement, 'bpmn:Collaboration')) {
        handleCollaboration(rootElement, ctx);

        // force drawing of everything not yet drawn that is part of the target DI
        handleUnhandledProcesses(definitions.rootElements, ctx);
      } else {
        throw new Error(
          translate('unsupported bpmnElement for {plane}: {rootElement}', {
            plane: elementToString(plane),
            rootElement: elementToString(rootElement)
          })
        );
      }

      // handle all deferred elements
      handleDeferred();
    }

    function handleDeferred() {

      var fn;

      // drain deferred until empty
      while (deferred.length) {
        fn = deferred.shift();

        fn();
      }
    }

    function handleProcess(process, context) {
      handleFlowElementsContainer(process, context);
      handleIoSpecification(process.ioSpecification, context);

      handleArtifacts(process.artifacts, context);

      // log process handled
      handled(process);
    }

    function handleUnhandledProcesses(rootElements, ctx) {

      // walk through all processes that have not yet been drawn and draw them
      // if they contain lanes with DI information.
      // we do this to pass the free-floating lane test cases in the MIWG test suite
      var processes = filter(rootElements, function(e) {
        return !isHandled(e) && is$2(e, 'bpmn:Process') && e.laneSets;
      });

      processes.forEach(contextual(handleProcess, ctx));
    }

    function handleMessageFlow(messageFlow, context) {
      visitIfDi(messageFlow, context);
    }

    function handleMessageFlows(messageFlows, context) {
      forEach$1(messageFlows, contextual(handleMessageFlow, context));
    }

    function handleDataAssociation(association, context) {
      visitIfDi(association, context);
    }

    function handleDataInput(dataInput, context) {
      visitIfDi(dataInput, context);
    }

    function handleDataOutput(dataOutput, context) {
      visitIfDi(dataOutput, context);
    }

    function handleArtifact(artifact, context) {

      // bpmn:TextAnnotation
      // bpmn:Group
      // bpmn:Association

      visitIfDi(artifact, context);
    }

    function handleArtifacts(artifacts, context) {

      forEach$1(artifacts, function(e) {
        if (is$2(e, 'bpmn:Association')) {
          deferred.push(function() {
            handleArtifact(e, context);
          });
        } else {
          handleArtifact(e, context);
        }
      });
    }

    function handleIoSpecification(ioSpecification, context) {

      if (!ioSpecification) {
        return;
      }

      forEach$1(ioSpecification.dataInputs, contextual(handleDataInput, context));
      forEach$1(ioSpecification.dataOutputs, contextual(handleDataOutput, context));
    }

    function handleSubProcess(subProcess, context) {
      handleFlowElementsContainer(subProcess, context);
      handleArtifacts(subProcess.artifacts, context);
    }

    function handleFlowNode(flowNode, context) {
      var childCtx = visitIfDi(flowNode, context);

      if (is$2(flowNode, 'bpmn:SubProcess')) {
        handleSubProcess(flowNode, childCtx || context);
      }

      if (is$2(flowNode, 'bpmn:Activity')) {
        handleIoSpecification(flowNode.ioSpecification, context);
      }

      // defer handling of associations
      // affected types:
      //
      //   * bpmn:Activity
      //   * bpmn:ThrowEvent
      //   * bpmn:CatchEvent
      //
      deferred.push(function() {
        forEach$1(flowNode.dataInputAssociations, contextual(handleDataAssociation, context));
        forEach$1(flowNode.dataOutputAssociations, contextual(handleDataAssociation, context));
      });
    }

    function handleSequenceFlow(sequenceFlow, context) {
      visitIfDi(sequenceFlow, context);
    }

    function handleDataElement(dataObject, context) {
      visitIfDi(dataObject, context);
    }

    function handleLane(lane, context) {

      deferred.push(function() {

        var newContext = visitIfDi(lane, context);

        if (lane.childLaneSet) {
          handleLaneSet(lane.childLaneSet, newContext || context);
        }

        wireFlowNodeRefs(lane);
      });
    }

    function handleLaneSet(laneSet, context) {
      forEach$1(laneSet.lanes, contextual(handleLane, context));
    }

    function handleLaneSets(laneSets, context) {
      forEach$1(laneSets, contextual(handleLaneSet, context));
    }

    function handleFlowElementsContainer(container, context) {
      handleFlowElements(container.flowElements, context);

      if (container.laneSets) {
        handleLaneSets(container.laneSets, context);
      }
    }

    function handleFlowElements(flowElements, context) {
      forEach$1(flowElements, function(e) {
        if (is$2(e, 'bpmn:SequenceFlow')) {
          deferred.push(function() {
            handleSequenceFlow(e, context);
          });
        } else if (is$2(e, 'bpmn:BoundaryEvent')) {
          deferred.unshift(function() {
            handleFlowNode(e, context);
          });
        } else if (is$2(e, 'bpmn:FlowNode')) {
          handleFlowNode(e, context);
        } else if (is$2(e, 'bpmn:DataObject')) ; else if (is$2(e, 'bpmn:DataStoreReference')) {
          handleDataElement(e, context);
        } else if (is$2(e, 'bpmn:DataObjectReference')) {
          handleDataElement(e, context);
        } else {
          logError(
            translate('unrecognized flowElement {element} in context {context}', {
              element: elementToString(e),
              context: (context ? elementToString(context.businessObject) : 'null')
            }),
            { element: e, context: context }
          );
        }
      });
    }

    function handleParticipant(participant, context) {
      var newCtx = visitIfDi(participant, context);

      var process = participant.processRef;
      if (process) {
        handleProcess(process, newCtx || context);
      }
    }

    function handleCollaboration(collaboration, context) {

      forEach$1(collaboration.participants, contextual(handleParticipant, context));

      handleArtifacts(collaboration.artifacts, context);

      // handle message flows latest in the process
      deferred.push(function() {
        handleMessageFlows(collaboration.messageFlows, context);
      });
    }


    function wireFlowNodeRefs(lane) {

      // wire the virtual flowNodeRefs <-> relationship
      forEach$1(lane.flowNodeRef, function(flowNode) {
        var lanes = flowNode.get('lanes');

        if (lanes) {
          lanes.push(lane);
        }
      });
    }

    // API //////////////////////

    return {
      handleDeferred: handleDeferred,
      handleDefinitions: handleDefinitions,
      handleSubProcess: handleSubProcess,
      registerDi: registerDi
    };
  }

  /**
   * Is an element of the given BPMN type?
   *
   * @param  {djs.model.Base|ModdleElement} element
   * @param  {string} type
   *
   * @return {boolean}
   */
  function is$1(element, type) {
    var bo = getBusinessObject(element);

    return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
  }


  /**
   * Return true if element has any of the given types.
   *
   * @param {djs.model.Base} element
   * @param {Array<string>} types
   *
   * @return {boolean}
   */
  function isAny(element, types) {
    return some(types, function(t) {
      return is$1(element, t);
    });
  }

  /**
   * Return the business object for a given element.
   *
   * @param  {djs.model.Base|ModdleElement} element
   *
   * @return {ModdleElement}
   */
  function getBusinessObject(element) {
    return (element && element.businessObject) || element;
  }

  /**
   * Return the di object for a given element.
   *
   * @param  {djs.model.Base} element
   *
   * @return {ModdleElement}
   */
  function getDi(element) {
    return element && element.di;
  }

  /**
   * The importBpmnDiagram result.
   *
   * @typedef {Object} ImportBPMNDiagramResult
   *
   * @property {Array<string>} warnings
   */

  /**
  * The importBpmnDiagram error.
  *
  * @typedef {Error} ImportBPMNDiagramError
  *
  * @property {Array<string>} warnings
  */

  /**
   * Import the definitions into a diagram.
   *
   * Errors and warnings are reported through the specified callback.
   *
   * @param  {djs.Diagram} diagram
   * @param  {ModdleElement<Definitions>} definitions
   * @param  {ModdleElement<BPMNDiagram>} [bpmnDiagram] the diagram to be rendered
   * (if not provided, the first one will be rendered)
   *
   * Returns {Promise<ImportBPMNDiagramResult, ImportBPMNDiagramError>}
   */
  function importBpmnDiagram(diagram, definitions, bpmnDiagram) {

    var importer,
        eventBus,
        translate,
        canvas;

    var error,
        warnings = [];

    /**
     * Walk the diagram semantically, importing (=drawing)
     * all elements you encounter.
     *
     * @param {ModdleElement<Definitions>} definitions
     * @param {ModdleElement<BPMNDiagram>} bpmnDiagram
     */
    function render(definitions, bpmnDiagram) {

      var visitor = {

        root: function(element, di) {
          return importer.add(element, di);
        },

        element: function(element, di, parentShape) {
          return importer.add(element, di, parentShape);
        },

        error: function(message, context) {
          warnings.push({ message: message, context: context });
        }
      };

      var walker = new BpmnTreeWalker(visitor, translate);


      bpmnDiagram = bpmnDiagram || (definitions.diagrams && definitions.diagrams[0]);

      var diagramsToImport = getDiagramsToImport(definitions, bpmnDiagram);

      if (!diagramsToImport) {
        throw new Error(translate('no diagram to display'));
      }

      // traverse BPMN 2.0 document model,
      // starting at definitions
      forEach$1(diagramsToImport, function(diagram) {
        walker.handleDefinitions(definitions, diagram);
      });

      var rootId = bpmnDiagram.plane.bpmnElement.id;

      // we do need to account for different ways we create root elements
      // each nested imported <root> do have the `_plane` suffix, while
      // the root <root> is found under the business object ID
      canvas.setRootElement(
        canvas.findRoot(rootId + '_plane') || canvas.findRoot(rootId)
      );
    }

    return new Promise(function(resolve, reject) {
      try {
        importer = diagram.get('bpmnImporter');
        eventBus = diagram.get('eventBus');
        translate = diagram.get('translate');
        canvas = diagram.get('canvas');

        eventBus.fire('import.render.start', { definitions: definitions });

        render(definitions, bpmnDiagram);

        eventBus.fire('import.render.complete', {
          error: error,
          warnings: warnings
        });

        return resolve({ warnings: warnings });
      } catch (e) {

        e.warnings = warnings;
        return reject(e);
      }
    });
  }

  /**
   * Returns all diagrams in the same hierarchy as the requested diagram.
   * Includes all parent and sub process diagrams.
   *
   * @param {Array} definitions
   * @param {Object} bpmnDiagram
   *
   * @returns {Array<Object>}
   */
  function getDiagramsToImport(definitions, bpmnDiagram) {
    if (!bpmnDiagram) {
      return;
    }

    var bpmnElement = bpmnDiagram.plane.bpmnElement,
        rootElement = bpmnElement;

    if (!is$1(bpmnElement, 'bpmn:Process') && !is$1(bpmnElement, 'bpmn:Collaboration')) {
      rootElement = findRootProcess(bpmnElement);
    }

    // in case the process is part of a collaboration, the plane references the
    // collaboration, not the process
    var collaboration;

    if (is$1(rootElement, 'bpmn:Collaboration')) {
      collaboration = rootElement;
    } else {
      collaboration = find(definitions.rootElements, function(element) {
        if (!is$1(element, 'bpmn:Collaboration')) {
          return;
        }

        return find(element.participants, function(participant) {
          return participant.processRef === rootElement;
        });
      });
    }

    var rootElements = [ rootElement ];

    // all collaboration processes can contain sub-diagrams
    if (collaboration) {
      rootElements = map(collaboration.participants, function(participant) {
        return participant.processRef;
      });

      rootElements.push(collaboration);
    }

    var allChildren = selfAndAllFlowElements(rootElements);

    // if we have multiple diagrams referencing the same element, we
    // use the first in the file
    var diagramsToImport = [ bpmnDiagram ];
    var handledElements = [ bpmnElement ];

    forEach$1(definitions.diagrams, function(diagram) {
      var businessObject = diagram.plane.bpmnElement;

      if (
        allChildren.indexOf(businessObject) !== -1 &&
        handledElements.indexOf(businessObject) === -1
      ) {
        diagramsToImport.push(diagram);
        handledElements.push(businessObject);
      }
    });


    return diagramsToImport;
  }

  function selfAndAllFlowElements(elements) {
    var result = [];

    forEach$1(elements, function(element) {
      if (!element) {
        return;
      }

      result.push(element);

      result = result.concat(selfAndAllFlowElements(element.flowElements));
    });

    return result;
  }

  function findRootProcess(element) {
    var parent = element;

    while (parent) {
      if (is$1(parent, 'bpmn:Process')) {
        return parent;
      }

      parent = parent.$parent;
    }
  }

  /**
   * This file must not be changed or exchanged.
   *
   * @see http://bpmn.io/license for more information.
   */


  // inlined ../../resources/logo.svg
  var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';

  var BPMNIO_IMG = BPMNIO_LOGO_SVG;

  var LOGO_STYLES = {
    verticalAlign: 'middle'
  };

  var LINK_STYLES = {
    'color': '#404040'
  };

  var LIGHTBOX_STYLES = {
    'zIndex': '1001',
    'position': 'fixed',
    'top': '0',
    'left': '0',
    'right': '0',
    'bottom': '0'
  };

  var BACKDROP_STYLES = {
    'width': '100%',
    'height': '100%',
    'background': 'rgba(40,40,40,0.2)'
  };

  var NOTICE_STYLES = {
    'position': 'absolute',
    'left': '50%',
    'top': '40%',
    'transform': 'translate(-50%)',
    'width': '260px',
    'padding': '10px',
    'background': 'white',
    'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
    'fontFamily': 'Helvetica, Arial, sans-serif',
    'fontSize': '14px',
    'display': 'flex',
    'lineHeight': '1.3'
  };

  var LIGHTBOX_MARKUP =
    '<div class="bjs-powered-by-lightbox">' +
      '<div class="backdrop"></div>' +
      '<div class="notice">' +
        '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
          BPMNIO_IMG +
        '</a>' +
        '<span>' +
          'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
          'powered by <a href="https://bpmn.io" target="_blank" rel="noopener">bpmn.io</a>.' +
        '</span>' +
      '</div>' +
    '</div>';


  var lightbox;

  function createLightbox() {
    lightbox = domify(LIGHTBOX_MARKUP);

    assign$1(lightbox, LIGHTBOX_STYLES);
    assign$1(query('svg', lightbox), LOGO_STYLES);
    assign$1(query('.backdrop', lightbox), BACKDROP_STYLES);
    assign$1(query('.notice', lightbox), NOTICE_STYLES);
    assign$1(query('.link', lightbox), LINK_STYLES, {
      'margin': '15px 20px 15px 10px',
      'alignSelf': 'center'
    });
  }

  function open() {

    if (!lightbox) {
      createLightbox();

      delegate.bind(lightbox, '.backdrop', 'click', function(event) {
        document.body.removeChild(lightbox);
      });
    }

    document.body.appendChild(lightbox);
  }

  /**
   * The code in the <project-logo></project-logo> area
   * must not be changed.
   *
   * @see http://bpmn.io/license for more information.
   */

  /**
   * A base viewer for BPMN 2.0 diagrams.
   *
   * Have a look at {@link Viewer}, {@link NavigatedViewer} or {@link Modeler} for
   * bundles that include actual features.
   *
   * @param {Object} [options] configuration options to pass to the viewer
   * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
   * @param {string|number} [options.width] the width of the viewer
   * @param {string|number} [options.height] the height of the viewer
   * @param {Object} [options.moddleExtensions] extension packages to provide
   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
   */
  function BaseViewer(options) {

    options = assign({}, DEFAULT_OPTIONS, options);

    this._moddle = this._createModdle(options);

    this._container = this._createContainer(options);

    /* <project-logo> */

    addProjectLogo(this._container);

    /* </project-logo> */

    this._init(this._container, this._moddle, options);
  }

  e(BaseViewer, Diagram);

  /**
  * The importXML result.
  *
  * @typedef {Object} ImportXMLResult
  *
  * @property {Array<string>} warnings
  */

  /**
  * The importXML error.
  *
  * @typedef {Error} ImportXMLError
  *
  * @property {Array<string>} warnings
  */

  /**
   * Parse and render a BPMN 2.0 diagram.
   *
   * Once finished the viewer reports back the result to the
   * provided callback function with (err, warnings).
   *
   * ## Life-Cycle Events
   *
   * During import the viewer will fire life-cycle events:
   *
   *   * import.parse.start (about to read model from xml)
   *   * import.parse.complete (model read; may have worked or not)
   *   * import.render.start (graphical import start)
   *   * import.render.complete (graphical import finished)
   *   * import.done (everything done)
   *
   * You can use these events to hook into the life-cycle.
   *
   * @param {string} xml the BPMN 2.0 xml
   * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
   *
   * Returns {Promise<ImportXMLResult, ImportXMLError>}
   */
  BaseViewer.prototype.importXML = wrapForCompatibility(function importXML(xml, bpmnDiagram) {

    var self = this;

    function ParseCompleteEvent(data) {

      var event = self.get('eventBus').createEvent(data);

      // TODO(nikku): remove with future bpmn-js version
      Object.defineProperty(event, 'context', {
        enumerable: true,
        get: function() {

          console.warn(new Error(
            'import.parse.complete <context> is deprecated ' +
            'and will be removed in future library versions'
          ));

          return {
            warnings: data.warnings,
            references: data.references,
            elementsById: data.elementsById
          };
        }
      });

      return event;
    }

    return new Promise(function(resolve, reject) {

      // hook in pre-parse listeners +
      // allow xml manipulation
      xml = self._emit('import.parse.start', { xml: xml }) || xml;

      self._moddle.fromXML(xml, 'bpmn:Definitions').then(function(result) {
        var definitions = result.rootElement;
        var references = result.references;
        var parseWarnings = result.warnings;
        var elementsById = result.elementsById;

        // hook in post parse listeners +
        // allow definitions manipulation
        definitions = self._emit('import.parse.complete', ParseCompleteEvent({
          error: null,
          definitions: definitions,
          elementsById: elementsById,
          references: references,
          warnings: parseWarnings
        })) || definitions;

        self.importDefinitions(definitions, bpmnDiagram).then(function(result) {
          var allWarnings = [].concat(parseWarnings, result.warnings || []);

          self._emit('import.done', { error: null, warnings: allWarnings });

          return resolve({ warnings: allWarnings });
        }).catch(function(err) {
          var allWarnings = [].concat(parseWarnings, err.warnings || []);

          self._emit('import.done', { error: err, warnings: allWarnings });

          return reject(addWarningsToError(err, allWarnings));
        });
      }).catch(function(err) {

        self._emit('import.parse.complete', {
          error: err
        });

        err = checkValidationError(err);

        self._emit('import.done', { error: err, warnings: err.warnings });

        return reject(err);
      });
    });
  });

  /**
  * The importDefinitions result.
  *
  * @typedef {Object} ImportDefinitionsResult
  *
  * @property {Array<string>} warnings
  */

  /**
  * The importDefinitions error.
  *
  * @typedef {Error} ImportDefinitionsError
  *
  * @property {Array<string>} warnings
  */

  /**
   * Import parsed definitions and render a BPMN 2.0 diagram.
   *
   * Once finished the viewer reports back the result to the
   * provided callback function with (err, warnings).
   *
   * ## Life-Cycle Events
   *
   * During import the viewer will fire life-cycle events:
   *
   *   * import.render.start (graphical import start)
   *   * import.render.complete (graphical import finished)
   *
   * You can use these events to hook into the life-cycle.
   *
   * @param {ModdleElement<Definitions>} definitions parsed BPMN 2.0 definitions
   * @param {ModdleElement<BPMNDiagram>|string} [bpmnDiagram] BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
   *
   * Returns {Promise<ImportDefinitionsResult, ImportDefinitionsError>}
   */
  BaseViewer.prototype.importDefinitions = wrapForCompatibility(function importDefinitions(definitions, bpmnDiagram) {

    var self = this;

    return new Promise(function(resolve, reject) {

      self._setDefinitions(definitions);

      self.open(bpmnDiagram).then(function(result) {

        var warnings = result.warnings;

        return resolve({ warnings: warnings });
      }).catch(function(err) {

        return reject(err);
      });
    });
  });

  /**
   * The open result.
   *
   * @typedef {Object} OpenResult
   *
   * @property {Array<string>} warnings
   */

  /**
  * The open error.
  *
  * @typedef {Error} OpenError
  *
  * @property {Array<string>} warnings
  */

  /**
   * Open diagram of previously imported XML.
   *
   * Once finished the viewer reports back the result to the
   * provided callback function with (err, warnings).
   *
   * ## Life-Cycle Events
   *
   * During switch the viewer will fire life-cycle events:
   *
   *   * import.render.start (graphical import start)
   *   * import.render.complete (graphical import finished)
   *
   * You can use these events to hook into the life-cycle.
   *
   * @param {string|ModdleElement<BPMNDiagram>} [bpmnDiagramOrId] id or the diagram to open
   *
   * Returns {Promise<OpenResult, OpenError>}
   */
  BaseViewer.prototype.open = wrapForCompatibility(function open(bpmnDiagramOrId) {

    var definitions = this._definitions;
    var bpmnDiagram = bpmnDiagramOrId;

    var self = this;

    return new Promise(function(resolve, reject) {
      if (!definitions) {
        var err1 = new Error('no XML imported');

        return reject(addWarningsToError(err1, []));
      }

      if (typeof bpmnDiagramOrId === 'string') {
        bpmnDiagram = findBPMNDiagram(definitions, bpmnDiagramOrId);

        if (!bpmnDiagram) {
          var err2 = new Error('BPMNDiagram <' + bpmnDiagramOrId + '> not found');

          return reject(addWarningsToError(err2, []));
        }
      }

      // clear existing rendered diagram
      // catch synchronous exceptions during #clear()
      try {
        self.clear();
      } catch (error) {

        return reject(addWarningsToError(error, []));
      }

      // perform graphical import
      importBpmnDiagram(self, definitions, bpmnDiagram).then(function(result) {

        var warnings = result.warnings;

        return resolve({ warnings: warnings });
      }).catch(function(err) {

        return reject(err);
      });
    });
  });

  /**
   * The saveXML result.
   *
   * @typedef {Object} SaveXMLResult
   *
   * @property {string} xml
   */

  /**
   * Export the currently displayed BPMN 2.0 diagram as
   * a BPMN 2.0 XML document.
   *
   * ## Life-Cycle Events
   *
   * During XML saving the viewer will fire life-cycle events:
   *
   *   * saveXML.start (before serialization)
   *   * saveXML.serialized (after xml generation)
   *   * saveXML.done (everything done)
   *
   * You can use these events to hook into the life-cycle.
   *
   * @param {Object} [options] export options
   * @param {boolean} [options.format=false] output formatted XML
   * @param {boolean} [options.preamble=true] output preamble
   *
   * Returns {Promise<SaveXMLResult, Error>}
   */
  BaseViewer.prototype.saveXML = wrapForCompatibility(function saveXML(options) {

    options = options || {};

    var self = this;

    var definitions = this._definitions;

    return new Promise(function(resolve) {

      if (!definitions) {
        return resolve({
          error: new Error('no definitions loaded')
        });
      }

      // allow to fiddle around with definitions
      definitions = self._emit('saveXML.start', {
        definitions: definitions
      }) || definitions;

      self._moddle.toXML(definitions, options).then(function(result) {

        var xml = result.xml;

        xml = self._emit('saveXML.serialized', {
          xml: xml
        }) || xml;

        return resolve({
          xml: xml
        });
      });
    }).catch(function(error) {
      return { error: error };
    }).then(function(result) {

      self._emit('saveXML.done', result);

      var error = result.error;

      if (error) {
        return Promise.reject(error);
      }

      return result;
    });
  });

  /**
   * The saveSVG result.
   *
   * @typedef {Object} SaveSVGResult
   *
   * @property {string} svg
   */

  /**
   * Export the currently displayed BPMN 2.0 diagram as
   * an SVG image.
   *
   * ## Life-Cycle Events
   *
   * During SVG saving the viewer will fire life-cycle events:
   *
   *   * saveSVG.start (before serialization)
   *   * saveSVG.done (everything done)
   *
   * You can use these events to hook into the life-cycle.
   *
   * @param {Object} [options]
   *
   * Returns {Promise<SaveSVGResult, Error>}
   */
  BaseViewer.prototype.saveSVG = wrapForCompatibility(function saveSVG(options) {

    var self = this;

    return new Promise(function(resolve, reject) {

      self._emit('saveSVG.start');

      var svg, err;

      try {
        var canvas = self.get('canvas');

        var contentNode = canvas.getActiveLayer(),
            defsNode = query('defs', canvas._svg);

        var contents = innerSVG(contentNode),
            defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';

        var bbox = contentNode.getBBox();

        svg =
          '<?xml version="1.0" encoding="utf-8"?>\n' +
          '<!-- created with bpmn-js / http://bpmn.io -->\n' +
          '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
               'width="' + bbox.width + '" height="' + bbox.height + '" ' +
               'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
            defs + contents +
          '</svg>';
      } catch (e) {
        err = e;
      }

      self._emit('saveSVG.done', {
        error: err,
        svg: svg
      });

      if (!err) {
        return resolve({ svg: svg });
      }

      return reject(err);
    });
  });

  /**
   * Get a named diagram service.
   *
   * @example
   *
   * var elementRegistry = viewer.get('elementRegistry');
   * var startEventShape = elementRegistry.get('StartEvent_1');
   *
   * @param {string} name
   *
   * @return {Object} diagram service instance
   *
   * @method BaseViewer#get
   */

  /**
   * Invoke a function in the context of this viewer.
   *
   * @example
   *
   * viewer.invoke(function(elementRegistry) {
   *   var startEventShape = elementRegistry.get('StartEvent_1');
   * });
   *
   * @param {Function} fn to be invoked
   *
   * @return {Object} the functions return value
   *
   * @method BaseViewer#invoke
   */


  BaseViewer.prototype._setDefinitions = function(definitions) {
    this._definitions = definitions;
  };

  BaseViewer.prototype.getModules = function() {
    return this._modules;
  };

  /**
   * Remove all drawn elements from the viewer.
   *
   * After calling this method the viewer can still
   * be reused for opening another diagram.
   *
   * @method BaseViewer#clear
   */
  BaseViewer.prototype.clear = function() {
    if (!this.getDefinitions()) {

      // no diagram to clear
      return;
    }

    // remove drawn elements
    Diagram.prototype.clear.call(this);
  };

  /**
   * Destroy the viewer instance and remove all its
   * remainders from the document tree.
   */
  BaseViewer.prototype.destroy = function() {

    // diagram destroy
    Diagram.prototype.destroy.call(this);

    // dom detach
    remove$2(this._container);
  };

  /**
   * Register an event listener
   *
   * Remove a previously added listener via {@link #off(event, callback)}.
   *
   * @param {string} event
   * @param {number} [priority]
   * @param {Function} callback
   * @param {Object} [that]
   */
  BaseViewer.prototype.on = function(event, priority, callback, target) {
    return this.get('eventBus').on(event, priority, callback, target);
  };

  /**
   * De-register an event listener
   *
   * @param {string} event
   * @param {Function} callback
   */
  BaseViewer.prototype.off = function(event, callback) {
    this.get('eventBus').off(event, callback);
  };

  BaseViewer.prototype.attachTo = function(parentNode) {

    if (!parentNode) {
      throw new Error('parentNode required');
    }

    // ensure we detach from the
    // previous, old parent
    this.detach();

    // unwrap jQuery if provided
    if (parentNode.get && parentNode.constructor.prototype.jquery) {
      parentNode = parentNode.get(0);
    }

    if (typeof parentNode === 'string') {
      parentNode = query(parentNode);
    }

    parentNode.appendChild(this._container);

    this._emit('attach', {});

    this.get('canvas').resized();
  };

  BaseViewer.prototype.getDefinitions = function() {
    return this._definitions;
  };

  BaseViewer.prototype.detach = function() {

    var container = this._container,
        parentNode = container.parentNode;

    if (!parentNode) {
      return;
    }

    this._emit('detach', {});

    parentNode.removeChild(container);
  };

  BaseViewer.prototype._init = function(container, moddle, options) {

    var baseModules = options.modules || this.getModules(),
        additionalModules = options.additionalModules || [],
        staticModules = [
          {
            bpmnjs: [ 'value', this ],
            moddle: [ 'value', moddle ]
          }
        ];

    var diagramModules = [].concat(staticModules, baseModules, additionalModules);

    var diagramOptions = assign(omit(options, [ 'additionalModules' ]), {
      canvas: assign({}, options.canvas, { container: container }),
      modules: diagramModules
    });

    // invoke diagram constructor
    Diagram.call(this, diagramOptions);

    if (options && options.container) {
      this.attachTo(options.container);
    }
  };

  /**
   * Emit an event on the underlying {@link EventBus}
   *
   * @param  {string} type
   * @param  {Object} event
   *
   * @return {Object} event processing result (if any)
   */
  BaseViewer.prototype._emit = function(type, event) {
    return this.get('eventBus').fire(type, event);
  };

  BaseViewer.prototype._createContainer = function(options) {

    var container = domify('<div class="bjs-container"></div>');

    assign$1(container, {
      width: ensureUnit(options.width),
      height: ensureUnit(options.height),
      position: options.position
    });

    return container;
  };

  BaseViewer.prototype._createModdle = function(options) {
    var moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);

    return new simple(moddleOptions);
  };

  BaseViewer.prototype._modules = [];

  // helpers ///////////////

  function addWarningsToError(err, warningsAry) {
    err.warnings = warningsAry;
    return err;
  }

  function checkValidationError(err) {

    // check if we can help the user by indicating wrong BPMN 2.0 xml
    // (in case he or the exporting tool did not get that right)

    var pattern = /unparsable content <([^>]+)> detected([\s\S]*)$/;
    var match = pattern.exec(err.message);

    if (match) {
      err.message =
        'unparsable content <' + match[1] + '> detected; ' +
        'this may indicate an invalid BPMN 2.0 diagram file' + match[2];
    }

    return err;
  }

  var DEFAULT_OPTIONS = {
    width: '100%',
    height: '100%',
    position: 'relative'
  };


  /**
   * Ensure the passed argument is a proper unit (defaulting to px)
   */
  function ensureUnit(val) {
    return val + (isNumber(val) ? 'px' : '');
  }


  /**
   * Find BPMNDiagram in definitions by ID
   *
   * @param {ModdleElement<Definitions>} definitions
   * @param {string} diagramId
   *
   * @return {ModdleElement<BPMNDiagram>|null}
   */
  function findBPMNDiagram(definitions, diagramId) {
    if (!diagramId) {
      return null;
    }

    return find(definitions.diagrams, function(element) {
      return element.id === diagramId;
    }) || null;
  }

  /**
   * Adds the project logo to the diagram container as
   * required by the bpmn.io license.
   *
   * @see http://bpmn.io/license
   *
   * @param {Element} container
   */
  function addProjectLogo(container) {
    var img = BPMNIO_IMG;

    var linkMarkup =
      '<a href="http://bpmn.io" ' +
         'target="_blank" ' +
         'class="bjs-powered-by" ' +
         'title="Powered by bpmn.io" ' +
        '>' +
        img +
      '</a>';

    var linkElement = domify(linkMarkup);

    assign$1(query('svg', linkElement), LOGO_STYLES);
    assign$1(linkElement, LINK_STYLES, {
      position: 'absolute',
      bottom: '15px',
      right: '15px',
      zIndex: '100'
    });

    container.appendChild(linkElement);

    componentEvent.bind(linkElement, 'click', function(event) {
      open();

      event.preventDefault();
    });
  }

  /* </project-logo> */

  /**
   * A base modeler for BPMN 2.0 diagrams.
   *
   * Have a look at {@link Modeler} for a bundle that includes actual features.
   *
   * @param {Object} [options] configuration options to pass to the viewer
   * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
   * @param {string|number} [options.width] the width of the viewer
   * @param {string|number} [options.height] the height of the viewer
   * @param {Object} [options.moddleExtensions] extension packages to provide
   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
   */
  function BaseModeler(options) {
    BaseViewer.call(this, options);

    // hook ID collection into the modeler
    this.on('import.parse.complete', function(event) {
      if (!event.error) {
        this._collectIds(event.definitions, event.elementsById);
      }
    }, this);

    this.on('diagram.destroy', function() {
      this.get('moddle').ids.clear();
    }, this);
  }

  e(BaseModeler, BaseViewer);


  /**
   * Create a moddle instance, attaching ids to it.
   *
   * @param {Object} options
   */
  BaseModeler.prototype._createModdle = function(options) {
    var moddle = BaseViewer.prototype._createModdle.call(this, options);

    // attach ids to moddle to be able to track
    // and validated ids in the BPMN 2.0 XML document
    // tree
    moddle.ids = new Ids([ 32, 36, 1 ]);

    return moddle;
  };

  /**
   * Collect ids processed during parsing of the
   * definitions object.
   *
   * @param {ModdleElement} definitions
   * @param {Context} context
   */
  BaseModeler.prototype._collectIds = function(definitions, elementsById) {

    var moddle = definitions.$model,
        ids = moddle.ids,
        id;

    // remove references from previous import
    ids.clear();

    for (id in elementsById) {
      ids.claim(id, elementsById[id]);
    }
  };

  function isExpanded(element, di) {

    if (is$1(element, 'bpmn:CallActivity')) {
      return false;
    }

    if (is$1(element, 'bpmn:SubProcess')) {
      di = di || getDi(element);

      if (di && is$1(di, 'bpmndi:BPMNPlane')) {
        return true;
      }

      return di && !!di.isExpanded;
    }

    if (is$1(element, 'bpmn:Participant')) {
      return !!getBusinessObject(element).processRef;
    }

    return true;
  }

  function isInterrupting(element) {
    return element && getBusinessObject(element).isInterrupting !== false;
  }

  function isEventSubProcess(element) {
    return element && !!getBusinessObject(element).triggeredByEvent;
  }

  function hasEventDefinition$2(element, eventType) {
    var bo = getBusinessObject(element),
        hasEventDefinition = false;

    if (bo.eventDefinitions) {
      forEach$1(bo.eventDefinitions, function(event) {
        if (is$1(event, eventType)) {
          hasEventDefinition = true;
        }
      });
    }

    return hasEventDefinition;
  }

  function hasErrorEventDefinition(element) {
    return hasEventDefinition$2(element, 'bpmn:ErrorEventDefinition');
  }

  function hasEscalationEventDefinition(element) {
    return hasEventDefinition$2(element, 'bpmn:EscalationEventDefinition');
  }

  function hasCompensateEventDefinition(element) {
    return hasEventDefinition$2(element, 'bpmn:CompensateEventDefinition');
  }

  function getLabelAttr(semantic) {
    if (
      is$1(semantic, 'bpmn:FlowElement') ||
      is$1(semantic, 'bpmn:Participant') ||
      is$1(semantic, 'bpmn:Lane') ||
      is$1(semantic, 'bpmn:SequenceFlow') ||
      is$1(semantic, 'bpmn:MessageFlow') ||
      is$1(semantic, 'bpmn:DataInput') ||
      is$1(semantic, 'bpmn:DataOutput')
    ) {
      return 'name';
    }

    if (is$1(semantic, 'bpmn:TextAnnotation')) {
      return 'text';
    }

    if (is$1(semantic, 'bpmn:Group')) {
      return 'categoryValueRef';
    }
  }

  function getCategoryValue(semantic) {
    var categoryValueRef = semantic['categoryValueRef'];

    if (!categoryValueRef) {
      return '';
    }


    return categoryValueRef.value || '';
  }

  function getLabel(element) {
    var semantic = element.businessObject,
        attr = getLabelAttr(semantic);

    if (attr) {

      if (attr === 'categoryValueRef') {

        return getCategoryValue(semantic);
      }

      return semantic[attr] || '';
    }
  }


  function setLabel(element, text, isExternal) {
    var semantic = element.businessObject,
        attr = getLabelAttr(semantic);

    if (attr) {

      if (attr === 'categoryValueRef') {
        semantic['categoryValueRef'].value = text;
      } else {
        semantic[attr] = text;
      }

    }

    return element;
  }

  var black = 'hsl(225, 10%, 15%)';

  // element utils //////////////////////

  /**
   * Checks if eventDefinition of the given element matches with semantic type.
   *
   * @return {boolean} true if element is of the given semantic type
   */
  function isTypedEvent(event, eventDefinitionType, filter) {

    function matches(definition, filter) {
      return every(filter, function(val, key) {

        // we want a == conversion here, to be able to catch
        // undefined == false and friends
        /* jshint -W116 */
        return definition[key] == val;
      });
    }

    return some(event.eventDefinitions, function(definition) {
      return definition.$type === eventDefinitionType && matches(event, filter);
    });
  }

  function isThrowEvent(event) {
    return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');
  }

  function isCollection(element) {
    var dataObject = element.dataObjectRef;

    return element.isCollection || (dataObject && dataObject.isCollection);
  }

  function getSemantic(element) {
    return element.businessObject;
  }


  // color access //////////////////////

  function getFillColor(element, defaultColor) {
    var di = getDi(element);

    return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
  }

  function getStrokeColor$1(element, defaultColor) {
    var di = getDi(element);

    return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
  }

  function getLabelColor(element, defaultColor, defaultStrokeColor) {
    var di = getDi(element),
        label = di.get('label');

    return label && label.get('color:color') || defaultColor ||
      getStrokeColor$1(element, defaultStrokeColor);
  }

  // cropping path customizations //////////////////////

  function getCirclePath(shape) {

    var cx = shape.x + shape.width / 2,
        cy = shape.y + shape.height / 2,
        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' ]
    ];

    return componentsToPath(circlePath);
  }

  function getRoundRectPath(shape, borderRadius) {

    var x = shape.x,
        y = shape.y,
        width = shape.width,
        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' ]
    ];

    return componentsToPath(roundRectPath);
  }

  function getDiamondPath(shape) {

    var width = shape.width,
        height = shape.height,
        x = shape.x,
        y = shape.y,
        halfWidth = width / 2,
        halfHeight = height / 2;

    var diamondPath = [
      [ 'M', x + halfWidth, y ],
      [ 'l', halfWidth, halfHeight ],
      [ 'l', -halfWidth, halfHeight ],
      [ 'l', -halfWidth, -halfHeight ],
      [ 'z' ]
    ];

    return componentsToPath(diamondPath);
  }

  function getRectPath(shape) {
    var x = shape.x,
        y = shape.y,
        width = shape.width,
        height = shape.height;

    var rectPath = [
      [ 'M', x, y ],
      [ 'l', width, 0 ],
      [ 'l', 0, height ],
      [ 'l', -width, 0 ],
      [ 'z' ]
    ];

    return componentsToPath(rectPath);
  }

  var RENDERER_IDS = new Ids();

  var TASK_BORDER_RADIUS = 10;
  var INNER_OUTER_DIST = 3;

  var DEFAULT_FILL_OPACITY = .95,
      HIGH_FILL_OPACITY = .35;

  var ELEMENT_LABEL_DISTANCE$1 = 10;

  function BpmnRenderer(
      config, eventBus, styles, pathMap,
      canvas, textRenderer, priority) {

    BaseRenderer.call(this, eventBus, priority);

    var defaultFillColor = config && config.defaultFillColor,
        defaultStrokeColor = config && config.defaultStrokeColor,
        defaultLabelColor = config && config.defaultLabelColor;

    var rendererId = RENDERER_IDS.next();

    var markers = {};

    var computeStyle = styles.computeStyle;

    function addMarker(id, options) {
      var attrs = assign({
        fill: black,
        strokeWidth: 1,
        strokeLinecap: 'round',
        strokeDasharray: 'none'
      }, options.attrs);

      var ref = options.ref || { x: 0, y: 0 };

      var scale = options.scale || 1;

      // fix for safari / chrome / firefox bug not correctly
      // resetting stroke dash array
      if (attrs.strokeDasharray === 'none') {
        attrs.strokeDasharray = [ 10000, 1 ];
      }

      var marker = create$1('marker');

      attr(options.element, attrs);

      append(marker, options.element);

      attr(marker, {
        id: id,
        viewBox: '0 0 20 20',
        refX: ref.x,
        refY: ref.y,
        markerWidth: 20 * scale,
        markerHeight: 20 * scale,
        orient: 'auto'
      });

      var defs = query('defs', canvas._svg);

      if (!defs) {
        defs = create$1('defs');

        append(canvas._svg, defs);
      }

      append(defs, marker);

      markers[id] = marker;
    }

    function colorEscape(str) {

      // only allow characters and numbers
      return str.replace(/[^0-9a-zA-z]+/g, '_');
    }

    function marker(type, fill, stroke) {
      var id = type + '-' + colorEscape(fill) + '-' + colorEscape(stroke) + '-' + rendererId;

      if (!markers[id]) {
        createMarker(id, type, fill, stroke);
      }

      return 'url(#' + id + ')';
    }

    function createMarker(id, type, fill, stroke) {

      if (type === 'sequenceflow-end') {
        var sequenceflowEnd = create$1('path');
        attr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });

        addMarker(id, {
          element: sequenceflowEnd,
          ref: { x: 11, y: 10 },
          scale: 0.5,
          attrs: {
            fill: stroke,
            stroke: stroke
          }
        });
      }

      if (type === 'messageflow-start') {
        var messageflowStart = create$1('circle');
        attr(messageflowStart, { cx: 6, cy: 6, r: 3.5 });

        addMarker(id, {
          element: messageflowStart,
          attrs: {
            fill: fill,
            stroke: stroke
          },
          ref: { x: 6, y: 6 }
        });
      }

      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' });

        addMarker(id, {
          element: messageflowEnd,
          attrs: {
            fill: fill,
            stroke: stroke,
            strokeLinecap: 'butt'
          },
          ref: { x: 8.5, y: 5 }
        });
      }

      if (type === 'association-start') {
        var associationStart = create$1('path');
        attr(associationStart, { d: 'M 11 5 L 1 10 L 11 15' });

        addMarker(id, {
          element: associationStart,
          attrs: {
            fill: 'none',
            stroke: stroke,
            strokeWidth: 1.5
          },
          ref: { x: 1, y: 10 },
          scale: 0.5
        });
      }

      if (type === 'association-end') {
        var associationEnd = create$1('path');
        attr(associationEnd, { d: 'M 1 5 L 11 10 L 1 15' });

        addMarker(id, {
          element: associationEnd,
          attrs: {
            fill: 'none',
            stroke: stroke,
            strokeWidth: 1.5
          },
          ref: { x: 12, y: 10 },
          scale: 0.5
        });
      }

      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' });

        addMarker(id, {
          element: conditionalflowMarker,
          attrs: {
            fill: fill,
            stroke: stroke
          },
          ref: { x: -1, y: 10 },
          scale: 0.5
        });
      }

      if (type === 'conditional-default-flow-marker') {
        var conditionaldefaultflowMarker = create$1('path');
        attr(conditionaldefaultflowMarker, { d: 'M 6 4 L 10 16' });

        addMarker(id, {
          element: conditionaldefaultflowMarker,
          attrs: {
            stroke: stroke
          },
          ref: { x: 0, y: 10 },
          scale: 0.5
        });
      }
    }

    function drawCircle(parentGfx, width, height, offset, attrs) {

      if (isObject(offset)) {
        attrs = offset;
        offset = 0;
      }

      offset = offset || 0;

      attrs = computeStyle(attrs, {
        stroke: black,
        strokeWidth: 2,
        fill: 'white'
      });

      if (attrs.fill === 'none') {
        delete attrs.fillOpacity;
      }

      var cx = width / 2,
          cy = height / 2;

      var circle = create$1('circle');
      attr(circle, {
        cx: cx,
        cy: cy,
        r: Math.round((width + height) / 4 - offset)
      });
      attr(circle, attrs);

      append(parentGfx, circle);

      return circle;
    }

    function drawRect(parentGfx, width, height, r, offset, attrs) {

      if (isObject(offset)) {
        attrs = offset;
        offset = 0;
      }

      offset = offset || 0;

      attrs = computeStyle(attrs, {
        stroke: black,
        strokeWidth: 2,
        fill: 'white'
      });

      var rect = create$1('rect');
      attr(rect, {
        x: offset,
        y: offset,
        width: width - offset * 2,
        height: height - offset * 2,
        rx: r,
        ry: r
      });
      attr(rect, attrs);

      append(parentGfx, rect);

      return rect;
    }

    function drawDiamond(parentGfx, width, height, attrs) {

      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 pointsString = points.map(function(point) {
        return point.x + ',' + point.y;
      }).join(' ');

      attrs = computeStyle(attrs, {
        stroke: black,
        strokeWidth: 2,
        fill: 'white'
      });

      var polygon = create$1('polygon');
      attr(polygon, {
        points: pointsString
      });
      attr(polygon, attrs);

      append(parentGfx, polygon);

      return polygon;
    }

    function drawLine(parentGfx, waypoints, attrs) {
      attrs = computeStyle(attrs, [ 'no-fill' ], {
        stroke: black,
        strokeWidth: 2,
        fill: 'none'
      });

      var line = createLine(waypoints, attrs);

      append(parentGfx, line);

      return line;
    }

    function drawPath(parentGfx, d, attrs) {

      attrs = computeStyle(attrs, [ 'no-fill' ], {
        strokeWidth: 2,
        stroke: black
      });

      var path = create$1('path');
      attr(path, { d: d });
      attr(path, attrs);

      append(parentGfx, path);

      return path;
    }

    function drawMarker(type, parentGfx, path, attrs) {
      return drawPath(parentGfx, path, assign({ 'data-marker': type }, attrs));
    }

    function renderer(type) {
      return handlers[type];
    }

    function as(type) {
      return function(parentGfx, element) {
        return renderer(type)(parentGfx, element);
      };
    }

    function renderEventContent(element, parentGfx) {

      var event = getSemantic(element);
      var isThrowing = isThrowEvent(event);

      if (event.eventDefinitions && event.eventDefinitions.length > 1) {
        if (event.parallelMultiple) {
          return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
        }
        else {
          return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
        }
      }

      if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
        return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
        return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
        return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
      }

      if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
        return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
        return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
        return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
        return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
        return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
        return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
      }

      if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
        return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
      }

      return null;
    }

    function renderLabel(parentGfx, label, options) {

      options = assign({
        size: {
          width: 100
        }
      }, options);

      var text = textRenderer.createText(label || '', options);

      classes(text).add('djs-label');

      append(parentGfx, text);

      return text;
    }

    function renderEmbeddedLabel(parentGfx, element, align) {
      var semantic = getSemantic(element);

      return renderLabel(parentGfx, semantic.name, {
        box: element,
        align: align,
        padding: 5,
        style: {
          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
        }
      });
    }

    function renderExternalLabel(parentGfx, element) {

      var box = {
        width: 90,
        height: 30,
        x: element.width / 2 + element.x,
        y: element.height / 2 + element.y
      };

      return renderLabel(parentGfx, getLabel(element), {
        box: box,
        fitBox: true,
        style: assign(
          {},
          textRenderer.getExternalStyle(),
          {
            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
          }
        )
      });
    }

    function renderLaneLabel(parentGfx, text, element) {
      var textBox = renderLabel(parentGfx, text, {
        box: {
          height: 30,
          width: element.height
        },
        align: 'center-middle',
        style: {
          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
        }
      });

      var top = -1 * element.height;

      transform(textBox, 0, -top, 270);
    }

    function createPathFromConnection(connection) {
      var waypoints = connection.waypoints;

      var pathData = 'm  ' + waypoints[0].x + ',' + waypoints[0].y;
      for (var i = 1; i < waypoints.length; i++) {
        pathData += 'L' + waypoints[i].x + ',' + waypoints[i].y + ' ';
      }
      return pathData;
    }

    var handlers = this.handlers = {
      'bpmn:Event': function(parentGfx, element, attrs) {

        if (!('fillOpacity' in attrs)) {
          attrs.fillOpacity = DEFAULT_FILL_OPACITY;
        }

        return drawCircle(parentGfx, element.width, element.height, attrs);
      },
      'bpmn:StartEvent': function(parentGfx, element) {
        var attrs = {
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        var semantic = getSemantic(element);

        if (!semantic.isInterrupting) {
          attrs = {
            strokeDasharray: '6',
            strokeLinecap: 'round',
            fill: getFillColor(element, defaultFillColor),
            stroke: getStrokeColor$1(element, defaultStrokeColor)
          };
        }

        var circle = renderer('bpmn:Event')(parentGfx, element, attrs);

        renderEventContent(element, parentGfx);

        return circle;
      },
      'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
          xScaleFactor: 0.9,
          yScaleFactor: 0.9,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.235,
            my: 0.315
          }
        });

        var fill = isThrowing ? getStrokeColor$1(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
        var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor$1(element, defaultStrokeColor);

        var messagePath = drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: stroke
        });

        return messagePath;
      },
      'bpmn:TimerEventDefinition': function(parentGfx, element) {
        var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
          strokeWidth: 2,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
          xScaleFactor: 0.75,
          yScaleFactor: 0.75,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.5,
            my: 0.5
          }
        });

        drawPath(parentGfx, pathData, {
          strokeWidth: 2,
          strokeLinecap: 'square',
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        for (var i = 0;i < 12; i++) {

          var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
            xScaleFactor: 0.75,
            yScaleFactor: 0.75,
            containerWidth: element.width,
            containerHeight: element.height,
            position: {
              mx: 0.5,
              my: 0.5
            }
          });

          var width = element.width / 2;
          var height = element.height / 2;

          drawPath(parentGfx, linePathData, {
            strokeWidth: 1,
            strokeLinecap: 'square',
            transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
            stroke: getStrokeColor$1(element, defaultStrokeColor)
          });
        }

        return circle;
      },
      'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.5,
            my: 0.2
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
        var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.5,
            my: 0.222
          }
        });

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_LINK', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.57,
            my: 0.263
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_ERROR', {
          xScaleFactor: 1.1,
          yScaleFactor: 1.1,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.2,
            my: 0.722
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {
          xScaleFactor: 1.0,
          yScaleFactor: 1.0,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.638,
            my: -0.055
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        var path = drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });

        rotate(path, 45);

        return path;
      },
      'bpmn:CompensateEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.22,
            my: 0.5
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
          xScaleFactor: 0.9,
          yScaleFactor: 0.9,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.5,
            my: 0.2
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill,
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
        var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
          xScaleFactor: 1.1,
          yScaleFactor: 1.1,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.222,
            my: 0.36
          }
        });

        var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: fill
        });
      },
      'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
        var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
          xScaleFactor: 1.2,
          yScaleFactor: 1.2,
          containerWidth: event.width,
          containerHeight: event.height,
          position: {
            mx: 0.458,
            my: 0.194
          }
        });

        return drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: getStrokeColor$1(event, defaultStrokeColor),
          stroke: getStrokeColor$1(event, defaultStrokeColor)
        });
      },
      'bpmn:EndEvent': function(parentGfx, element) {
        var circle = renderer('bpmn:Event')(parentGfx, element, {
          strokeWidth: 4,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        renderEventContent(element, parentGfx);

        return circle;
      },
      'bpmn:TerminateEventDefinition': function(parentGfx, element) {
        var circle = drawCircle(parentGfx, element.width, element.height, 8, {
          strokeWidth: 4,
          fill: getStrokeColor$1(element, defaultStrokeColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return circle;
      },
      'bpmn:IntermediateEvent': function(parentGfx, element) {
        var outer = renderer('bpmn:Event')(parentGfx, element, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        /* inner */
        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
          strokeWidth: 1,
          fill: getFillColor(element, 'none'),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        renderEventContent(element, parentGfx);

        return outer;
      },
      'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
      'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),

      'bpmn:Activity': function(parentGfx, element, attrs) {

        attrs = attrs || {};

        if (!('fillOpacity' in attrs)) {
          attrs.fillOpacity = DEFAULT_FILL_OPACITY;
        }

        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
      },

      'bpmn:Task': function(parentGfx, element) {
        var attrs = {
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);

        renderEmbeddedLabel(parentGfx, element, 'center-middle');
        attachTaskMarkers(parentGfx, element);

        return rect;
      },
      'bpmn:ServiceTask': function(parentGfx, element) {
        var task = renderer('bpmn:Task')(parentGfx, element);

        var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
          abspos: {
            x: 12,
            y: 18
          }
        });

        /* service bg */ drawPath(parentGfx, pathDataBG, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
          abspos: {
            x: 17.2,
            y: 18
          }
        });

        /* service fill */ drawPath(parentGfx, fillPathData, {
          strokeWidth: 0,
          fill: getFillColor(element, defaultFillColor)
        });

        var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
          abspos: {
            x: 17,
            y: 22
          }
        });

        /* service */ drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return task;
      },
      'bpmn:UserTask': function(parentGfx, element) {
        var task = renderer('bpmn:Task')(parentGfx, element);

        var x = 15;
        var y = 12;

        var pathData = pathMap.getScaledPath('TASK_TYPE_USER_1', {
          abspos: {
            x: x,
            y: y
          }
        });

        /* user path */ drawPath(parentGfx, pathData, {
          strokeWidth: 0.5,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
          abspos: {
            x: x,
            y: y
          }
        });

        /* user2 path */ drawPath(parentGfx, pathData2, {
          strokeWidth: 0.5,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
          abspos: {
            x: x,
            y: y
          }
        });

        /* user3 path */ drawPath(parentGfx, pathData3, {
          strokeWidth: 0.5,
          fill: getStrokeColor$1(element, defaultStrokeColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return task;
      },
      'bpmn:ManualTask': function(parentGfx, element) {
        var task = renderer('bpmn:Task')(parentGfx, element);

        var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
          abspos: {
            x: 17,
            y: 15
          }
        });

        /* manual path */ drawPath(parentGfx, pathData, {
          strokeWidth: 0.5, // 0.25,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return task;
      },
      'bpmn:SendTask': function(parentGfx, element) {
        var task = renderer('bpmn:Task')(parentGfx, element);

        var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: 21,
          containerHeight: 14,
          position: {
            mx: 0.285,
            my: 0.357
          }
        });

        /* send path */ drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: getStrokeColor$1(element, defaultStrokeColor),
          stroke: getFillColor(element, defaultFillColor)
        });

        return task;
      },
      'bpmn:ReceiveTask' : function(parentGfx, element) {
        var semantic = getSemantic(element);

        var task = renderer('bpmn:Task')(parentGfx, element);
        var pathData;

        if (semantic.instantiate) {
          drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });

          pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
            abspos: {
              x: 7.77,
              y: 9.52
            }
          });
        } else {

          pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
            xScaleFactor: 0.9,
            yScaleFactor: 0.9,
            containerWidth: 21,
            containerHeight: 14,
            position: {
              mx: 0.3,
              my: 0.4
            }
          });
        }

        /* receive path */ drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return task;
      },
      'bpmn:ScriptTask': function(parentGfx, element) {
        var task = renderer('bpmn:Task')(parentGfx, element);

        var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
          abspos: {
            x: 15,
            y: 20
          }
        });

        /* script path */ drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return task;
      },
      'bpmn:BusinessRuleTask': function(parentGfx, element) {
        var task = renderer('bpmn:Task')(parentGfx, element);

        var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
          abspos: {
            x: 8,
            y: 8
          }
        });

        var businessHeaderPath = drawPath(parentGfx, headerPathData);
        attr(businessHeaderPath, {
          strokeWidth: 1,
          fill: getFillColor(element, '#aaaaaa'),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
          abspos: {
            x: 8,
            y: 8
          }
        });

        var businessPath = drawPath(parentGfx, headerData);
        attr(businessPath, {
          strokeWidth: 1,
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return task;
      },
      'bpmn:SubProcess': function(parentGfx, element, attrs) {
        attrs = assign({
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        }, attrs);

        var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);

        var expanded = isExpanded(element);

        if (isEventSubProcess(element)) {
          attr(rect, {
            strokeDasharray: '1,2'
          });
        }

        renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');

        if (expanded) {
          attachTaskMarkers(parentGfx, element);
        } else {
          attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
        }

        return rect;
      },
      'bpmn:AdHocSubProcess': function(parentGfx, element) {
        return renderer('bpmn:SubProcess')(parentGfx, element);
      },
      'bpmn:Transaction': function(parentGfx, element) {
        var outer = renderer('bpmn:SubProcess')(parentGfx, element);

        var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);

        return outer;
      },
      'bpmn:CallActivity': function(parentGfx, element) {
        return renderer('bpmn:SubProcess')(parentGfx, element, {
          strokeWidth: 5
        });
      },
      'bpmn:Participant': function(parentGfx, element) {

        var attrs = {
          fillOpacity: DEFAULT_FILL_OPACITY,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);

        var expandedPool = isExpanded(element);

        if (expandedPool) {
          drawLine(parentGfx, [
            { x: 30, y: 0 },
            { x: 30, y: element.height }
          ], {
            stroke: getStrokeColor$1(element, defaultStrokeColor)
          });
          var text = getSemantic(element).name;
          renderLaneLabel(parentGfx, text, element);
        } else {

          // Collapsed pool draw text inline
          var text2 = getSemantic(element).name;
          renderLabel(parentGfx, text2, {
            box: element, align: 'center-middle',
            style: {
              fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
            }
          });
        }

        var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);

        if (participantMultiplicity) {
          renderer('ParticipantMultiplicityMarker')(parentGfx, element);
        }

        return lane;
      },
      'bpmn:Lane': function(parentGfx, element, attrs) {
        var rect = drawRect(parentGfx, element.width, element.height, 0, assign({
          fill: getFillColor(element, defaultFillColor),
          fillOpacity: HIGH_FILL_OPACITY,
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        }, attrs));

        var semantic = getSemantic(element);

        if (semantic.$type === 'bpmn:Lane') {
          var text = semantic.name;
          renderLaneLabel(parentGfx, text, element);
        }

        return rect;
      },
      'bpmn:InclusiveGateway': function(parentGfx, element) {
        var diamond = renderer('bpmn:Gateway')(parentGfx, element);

        /* circle path */
        drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
          strokeWidth: 2.5,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return diamond;
      },
      'bpmn:ExclusiveGateway': function(parentGfx, element) {
        var diamond = renderer('bpmn:Gateway')(parentGfx, element);

        var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
          xScaleFactor: 0.4,
          yScaleFactor: 0.4,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.32,
            my: 0.3
          }
        });

        if ((getDi(element).isMarkerVisible)) {
          drawPath(parentGfx, pathData, {
            strokeWidth: 1,
            fill: getStrokeColor$1(element, defaultStrokeColor),
            stroke: getStrokeColor$1(element, defaultStrokeColor)
          });
        }

        return diamond;
      },
      'bpmn:ComplexGateway': function(parentGfx, element) {
        var diamond = renderer('bpmn:Gateway')(parentGfx, element);

        var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
          xScaleFactor: 0.5,
          yScaleFactor:0.5,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.46,
            my: 0.26
          }
        });

        /* complex path */ drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: getStrokeColor$1(element, defaultStrokeColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return diamond;
      },
      'bpmn:ParallelGateway': function(parentGfx, element) {
        var diamond = renderer('bpmn:Gateway')(parentGfx, element);

        var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
          xScaleFactor: 0.6,
          yScaleFactor:0.6,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.46,
            my: 0.2
          }
        });

        /* parallel path */ drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          fill: getStrokeColor$1(element, defaultStrokeColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return diamond;
      },
      'bpmn:EventBasedGateway': function(parentGfx, element) {

        var semantic = getSemantic(element);

        var diamond = renderer('bpmn:Gateway')(parentGfx, element);

        /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
          strokeWidth: 1,
          fill: 'none',
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var type = semantic.eventGatewayType;
        var instantiate = !!semantic.instantiate;

        function drawEvent() {

          var pathData = pathMap.getScaledPath('GATEWAY_EVENT_BASED', {
            xScaleFactor: 0.18,
            yScaleFactor: 0.18,
            containerWidth: element.width,
            containerHeight: element.height,
            position: {
              mx: 0.36,
              my: 0.44
            }
          });

          var attrs = {
            strokeWidth: 2,
            fill: getFillColor(element, 'none'),
            stroke: getStrokeColor$1(element, defaultStrokeColor)
          };

          /* event path */ drawPath(parentGfx, pathData, attrs);
        }

        if (type === 'Parallel') {

          var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
            xScaleFactor: 0.4,
            yScaleFactor:0.4,
            containerWidth: element.width,
            containerHeight: element.height,
            position: {
              mx: 0.474,
              my: 0.296
            }
          });

          var parallelPath = drawPath(parentGfx, pathData);
          attr(parallelPath, {
            strokeWidth: 1,
            fill: 'none'
          });
        } else if (type === 'Exclusive') {

          if (!instantiate) {
            var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
            attr(innerCircle, {
              strokeWidth: 1,
              fill: 'none',
              stroke: getStrokeColor$1(element, defaultStrokeColor)
            });
          }

          drawEvent();
        }


        return diamond;
      },
      'bpmn:Gateway': function(parentGfx, element) {
        var attrs = {
          fill: getFillColor(element, defaultFillColor),
          fillOpacity: DEFAULT_FILL_OPACITY,
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        return drawDiamond(parentGfx, element.width, element.height, attrs);
      },
      'bpmn:SequenceFlow': function(parentGfx, element) {
        var pathData = createPathFromConnection(element);

        var fill = getFillColor(element, defaultFillColor),
            stroke = getStrokeColor$1(element, defaultStrokeColor);

        var attrs = {
          strokeLinejoin: 'round',
          markerEnd: marker('sequenceflow-end', fill, stroke),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        var path = drawPath(parentGfx, pathData, attrs);

        var sequenceFlow = getSemantic(element);

        var source;

        if (element.source) {
          source = element.source.businessObject;

          // conditional flow marker
          if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
            attr(path, {
              markerStart: marker('conditional-flow-marker', fill, stroke)
            });
          }

          // default marker
          if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
              source.default === sequenceFlow) {
            attr(path, {
              markerStart: marker('conditional-default-flow-marker', fill, stroke)
            });
          }
        }

        return path;
      },
      'bpmn:Association': function(parentGfx, element, attrs) {

        var semantic = getSemantic(element);

        var fill = getFillColor(element, defaultFillColor),
            stroke = getStrokeColor$1(element, defaultStrokeColor);

        attrs = assign({
          strokeDasharray: '0.5, 5',
          strokeLinecap: 'round',
          strokeLinejoin: 'round',
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        }, attrs || {});

        if (semantic.associationDirection === 'One' ||
            semantic.associationDirection === 'Both') {
          attrs.markerEnd = marker('association-end', fill, stroke);
        }

        if (semantic.associationDirection === 'Both') {
          attrs.markerStart = marker('association-start', fill, stroke);
        }

        return drawLine(parentGfx, element.waypoints, attrs);
      },
      'bpmn:DataInputAssociation': function(parentGfx, element) {
        var fill = getFillColor(element, defaultFillColor),
            stroke = getStrokeColor$1(element, defaultStrokeColor);

        return renderer('bpmn:Association')(parentGfx, element, {
          markerEnd: marker('association-end', fill, stroke)
        });
      },
      'bpmn:DataOutputAssociation': function(parentGfx, element) {
        var fill = getFillColor(element, defaultFillColor),
            stroke = getStrokeColor$1(element, defaultStrokeColor);

        return renderer('bpmn:Association')(parentGfx, element, {
          markerEnd: marker('association-end', fill, stroke)
        });
      },
      'bpmn:MessageFlow': function(parentGfx, element) {

        var semantic = getSemantic(element),
            di = getDi(element);

        var fill = getFillColor(element, defaultFillColor),
            stroke = getStrokeColor$1(element, defaultStrokeColor);

        var pathData = createPathFromConnection(element);

        var attrs = {
          markerEnd: marker('messageflow-end', fill, stroke),
          markerStart: marker('messageflow-start', fill, stroke),
          strokeDasharray: '10, 12',
          strokeLinecap: 'round',
          strokeLinejoin: 'round',
          strokeWidth: '1.5px',
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        var path = drawPath(parentGfx, pathData, attrs);

        if (semantic.messageRef) {
          var midPoint = path.getPointAtLength(path.getTotalLength() / 2);

          var markerPathData = pathMap.getScaledPath('MESSAGE_FLOW_MARKER', {
            abspos: {
              x: midPoint.x,
              y: midPoint.y
            }
          });

          var messageAttrs = { strokeWidth: 1 };

          if (di.messageVisibleKind === 'initiating') {
            messageAttrs.fill = 'white';
            messageAttrs.stroke = black;
          } else {
            messageAttrs.fill = '#888';
            messageAttrs.stroke = 'white';
          }

          var message = drawPath(parentGfx, markerPathData, messageAttrs);

          var labelText = semantic.messageRef.name;
          var label = renderLabel(parentGfx, labelText, {
            align: 'center-top',
            fitBox: true,
            style: {
              fill: getStrokeColor$1(element, defaultLabelColor)
            }
          });

          var messageBounds = message.getBBox(),
              labelBounds = label.getBBox();

          var translateX = midPoint.x - labelBounds.width / 2,
              translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE$1;

          transform(label, translateX, translateY, 0);

        }

        return path;
      },
      'bpmn:DataObject': function(parentGfx, element) {
        var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.474,
            my: 0.296
          }
        });

        var elementObject = drawPath(parentGfx, pathData, {
          fill: getFillColor(element, defaultFillColor),
          fillOpacity: DEFAULT_FILL_OPACITY,
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var semantic = getSemantic(element);

        if (isCollection(semantic)) {
          renderDataItemCollection(parentGfx, element);
        }

        return elementObject;
      },
      'bpmn:DataObjectReference': as('bpmn:DataObject'),
      'bpmn:DataInput': function(parentGfx, element) {

        var arrowPathData = pathMap.getRawPath('DATA_ARROW');

        // page
        var elementObject = renderer('bpmn:DataObject')(parentGfx, element);

        /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });

        return elementObject;
      },
      'bpmn:DataOutput': function(parentGfx, element) {
        var arrowPathData = pathMap.getRawPath('DATA_ARROW');

        // page
        var elementObject = renderer('bpmn:DataObject')(parentGfx, element);

        /* output arrow path */ drawPath(parentGfx, arrowPathData, {
          strokeWidth: 1,
          fill: black
        });

        return elementObject;
      },
      'bpmn:DataStoreReference': function(parentGfx, element) {
        var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0,
            my: 0.133
          }
        });

        var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
          strokeWidth: 2,
          fill: getFillColor(element, defaultFillColor),
          fillOpacity: DEFAULT_FILL_OPACITY,
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        return elementStore;
      },
      'bpmn:BoundaryEvent': function(parentGfx, element) {

        var semantic = getSemantic(element),
            cancel = semantic.cancelActivity;

        var attrs = {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        };

        if (!cancel) {
          attrs.strokeDasharray = '6';
          attrs.strokeLinecap = 'round';
        }

        // apply fillOpacity
        var outerAttrs = assign({}, attrs, {
          fillOpacity: 1
        });

        // apply no-fill
        var innerAttrs = assign({}, attrs, {
          fill: 'none'
        });

        var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);

        /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);

        renderEventContent(element, parentGfx);

        return outer;
      },
      'bpmn:Group': function(parentGfx, element) {

        var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
          stroke: getStrokeColor$1(element, defaultStrokeColor),
          strokeWidth: 1,
          strokeDasharray: '8,3,1,3',
          fill: 'none',
          pointerEvents: 'none'
        });

        return group;
      },
      'label': function(parentGfx, element) {
        return renderExternalLabel(parentGfx, element);
      },
      'bpmn:TextAnnotation': function(parentGfx, element) {
        var style = {
          'fill': 'none',
          'stroke': 'none'
        };

        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);

        var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.0,
            my: 0.0
          }
        });

        drawPath(parentGfx, textPathData, {
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        var text = getSemantic(element).text || '';
        renderLabel(parentGfx, text, {
          box: element,
          align: 'left-top',
          padding: 5,
          style: {
            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
          }
        });

        return textElement;
      },
      'ParticipantMultiplicityMarker': function(parentGfx, element) {
        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: ((element.width / 2) / element.width),
            my: (element.height - 15) / element.height
          }
        });

        drawMarker('participant-multiplicity', parentGfx, markerPath, {
          strokeWidth: 2,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });
      },
      'SubProcessMarker': function(parentGfx, element) {
        var markerRect = drawRect(parentGfx, 14, 14, 0, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });

        // Process marker is placed in the middle of the box
        // therefore fixed values can be used here
        translate$2(markerRect, element.width / 2 - 7.5, element.height - 20);

        var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
          xScaleFactor: 1.5,
          yScaleFactor: 1.5,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: (element.width / 2 - 7.5) / element.width,
            my: (element.height - 20) / element.height
          }
        });

        drawMarker('sub-process', parentGfx, markerPath, {
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });
      },
      'ParallelMarker': function(parentGfx, element, position) {
        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: ((element.width / 2 + position.parallel) / element.width),
            my: (element.height - 20) / element.height
          }
        });

        drawMarker('parallel', parentGfx, markerPath, {
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });
      },
      'SequentialMarker': function(parentGfx, element, position) {
        var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: ((element.width / 2 + position.seq) / element.width),
            my: (element.height - 19) / element.height
          }
        });

        drawMarker('sequential', parentGfx, markerPath, {
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });
      },
      'CompensationMarker': function(parentGfx, element, position) {
        var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: ((element.width / 2 + position.compensation) / element.width),
            my: (element.height - 13) / element.height
          }
        });

        drawMarker('compensation', parentGfx, markerMath, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });
      },
      'LoopMarker': function(parentGfx, element, position) {
        var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: ((element.width / 2 + position.loop) / element.width),
            my: (element.height - 7) / element.height
          }
        });

        drawMarker('loop', parentGfx, markerPath, {
          strokeWidth: 1,
          fill: getFillColor(element, defaultFillColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor),
          strokeLinecap: 'round',
          strokeMiterlimit: 0.5
        });
      },
      'AdhocMarker': function(parentGfx, element, position) {
        var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: ((element.width / 2 + position.adhoc) / element.width),
            my: (element.height - 15) / element.height
          }
        });

        drawMarker('adhoc', parentGfx, markerPath, {
          strokeWidth: 1,
          fill: getStrokeColor$1(element, defaultStrokeColor),
          stroke: getStrokeColor$1(element, defaultStrokeColor)
        });
      }
    };

    function attachTaskMarkers(parentGfx, element, taskMarkers) {
      var obj = getSemantic(element);

      var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
      var position;

      if (subprocess) {
        position = {
          seq: -21,
          parallel: -22,
          compensation: -42,
          loop: -18,
          adhoc: 10
        };
      } else {
        position = {
          seq: -3,
          parallel: -6,
          compensation: -27,
          loop: 0,
          adhoc: 10
        };
      }

      forEach$1(taskMarkers, function(marker) {
        renderer(marker)(parentGfx, element, position);
      });

      if (obj.isForCompensation) {
        renderer('CompensationMarker')(parentGfx, element, position);
      }

      if (obj.$type === 'bpmn:AdHocSubProcess') {
        renderer('AdhocMarker')(parentGfx, element, position);
      }

      var loopCharacteristics = obj.loopCharacteristics,
          isSequential = loopCharacteristics && loopCharacteristics.isSequential;

      if (loopCharacteristics) {

        if (isSequential === undefined) {
          renderer('LoopMarker')(parentGfx, element, position);
        }

        if (isSequential === false) {
          renderer('ParallelMarker')(parentGfx, element, position);
        }

        if (isSequential === true) {
          renderer('SequentialMarker')(parentGfx, element, position);
        }
      }
    }

    function renderDataItemCollection(parentGfx, element) {

      var yPosition = (element.height - 18) / element.height;

      var pathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
        xScaleFactor: 1,
        yScaleFactor: 1,
        containerWidth: element.width,
        containerHeight: element.height,
        position: {
          mx: 0.33,
          my: yPosition
        }
      });

      /* collection path */ drawPath(parentGfx, pathData, {
        strokeWidth: 2
      });
    }


    // extension API, use at your own risk
    this._drawPath = drawPath;

    this._renderer = renderer;
  }


  e(BpmnRenderer, BaseRenderer);

  BpmnRenderer.$inject = [
    'config.bpmnRenderer',
    'eventBus',
    'styles',
    'pathMap',
    'canvas',
    'textRenderer'
  ];


  BpmnRenderer.prototype.canRender = function(element) {
    return is$1(element, 'bpmn:BaseElement');
  };

  BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
    var type = element.type;
    var h = this._renderer(type);

    /* jshint -W040 */
    return h(parentGfx, element);
  };

  BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
    var type = element.type;
    var h = this._renderer(type);

    /* jshint -W040 */
    return h(parentGfx, element);
  };

  BpmnRenderer.prototype.getShapePath = function(element) {

    if (is$1(element, 'bpmn:Event')) {
      return getCirclePath(element);
    }

    if (is$1(element, 'bpmn:Activity')) {
      return getRoundRectPath(element, TASK_BORDER_RADIUS);
    }

    if (is$1(element, 'bpmn:Gateway')) {
      return getDiamondPath(element);
    }

    return getRectPath(element);
  };

  var DEFAULT_BOX_PADDING = 0;

  var DEFAULT_LABEL_SIZE$1 = {
    width: 150,
    height: 50
  };


  function parseAlign(align) {

    var parts = align.split('-');

    return {
      horizontal: parts[0] || 'center',
      vertical: parts[1] || 'top'
    };
  }

  function parsePadding(padding) {

    if (isObject(padding)) {
      return assign({ top: 0, left: 0, right: 0, bottom: 0 }, padding);
    } else {
      return {
        top: padding,
        left: padding,
        right: padding,
        bottom: padding
      };
    }
  }

  function getTextBBox(text, fakeText) {

    fakeText.textContent = text;

    var textBBox;

    try {
      var bbox,
          emptyLine = text === '';

      // add dummy text, when line is empty to
      // determine correct height
      fakeText.textContent = emptyLine ? 'dummy' : text;

      textBBox = fakeText.getBBox();

      // take text rendering related horizontal
      // padding into account
      bbox = {
        width: textBBox.width + textBBox.x * 2,
        height: textBBox.height
      };

      if (emptyLine) {

        // correct width
        bbox.width = 0;
      }

      return bbox;
    } catch (e) {
      return { width: 0, height: 0 };
    }
  }


  /**
   * Layout the next line and return the layouted element.
   *
   * Alters the lines passed.
   *
   * @param  {Array<string>} lines
   * @return {Object} the line descriptor, an object { width, height, text }
   */
  function layoutNext(lines, maxWidth, fakeText) {

    var originalLine = lines.shift(),
        fitLine = originalLine;

    var textBBox;

    for (;;) {
      textBBox = getTextBBox(fitLine, fakeText);

      textBBox.width = fitLine ? textBBox.width : 0;

      // try to fit
      if (fitLine === ' ' || fitLine === '' || textBBox.width < Math.round(maxWidth) || fitLine.length < 2) {
        return fit(lines, fitLine, originalLine, textBBox);
      }

      fitLine = shortenLine(fitLine, textBBox.width, maxWidth);
    }
  }

  function fit(lines, fitLine, originalLine, textBBox) {
    if (fitLine.length < originalLine.length) {
      var remainder = originalLine.slice(fitLine.length).trim();

      lines.unshift(remainder);
    }

    return {
      width: textBBox.width,
      height: textBBox.height,
      text: fitLine
    };
  }

  var SOFT_BREAK = '\u00AD';


  /**
   * Shortens a line based on spacing and hyphens.
   * Returns the shortened result on success.
   *
   * @param  {string} line
   * @param  {number} maxLength the maximum characters of the string
   * @return {string} the shortened string
   */
  function semanticShorten(line, maxLength) {

    var parts = line.split(/(\s|-|\u00AD)/g),
        part,
        shortenedParts = [],
        length = 0;

    // try to shorten via break chars
    if (parts.length > 1) {

      while ((part = parts.shift())) {
        if (part.length + length < maxLength) {
          shortenedParts.push(part);
          length += part.length;
        } else {

          // remove previous part, too if hyphen does not fit anymore
          if (part === '-' || part === SOFT_BREAK) {
            shortenedParts.pop();
          }

          break;
        }
      }
    }

    var last = shortenedParts[shortenedParts.length - 1];

    // translate trailing soft break to actual hyphen
    if (last && last === SOFT_BREAK) {
      shortenedParts[shortenedParts.length - 1] = '-';
    }

    return shortenedParts.join('');
  }


  function shortenLine(line, width, maxWidth) {
    var length = Math.max(line.length * (maxWidth / width), 1);

    // try to shorten semantically (i.e. based on spaces and hyphens)
    var shortenedLine = semanticShorten(line, length);

    if (!shortenedLine) {

      // force shorten by cutting the long word
      shortenedLine = line.slice(0, Math.max(Math.round(length - 1), 1));
    }

    return shortenedLine;
  }


  function getHelperSvg() {
    var helperSvg = document.getElementById('helper-svg');

    if (!helperSvg) {
      helperSvg = create$1('svg');

      attr(helperSvg, {
        id: 'helper-svg'
      });

      assign$1(helperSvg, {
        visibility: 'hidden',
        position: 'fixed',
        width: 0,
        height: 0
      });

      document.body.appendChild(helperSvg);
    }

    return helperSvg;
  }


  /**
   * Creates a new label utility
   *
   * @param {Object} config
   * @param {Dimensions} config.size
   * @param {number} config.padding
   * @param {Object} config.style
   * @param {string} config.align
   */
  function Text(config) {

    this._config = assign({}, {
      size: DEFAULT_LABEL_SIZE$1,
      padding: DEFAULT_BOX_PADDING,
      style: {},
      align: 'center-top'
    }, config || {});
  }

  /**
   * Returns the layouted text as an SVG element.
   *
   * @param {string} text
   * @param {Object} options
   *
   * @return {SVGElement}
   */
  Text.prototype.createText = function(text, options) {
    return this.layoutText(text, options).element;
  };

  /**
   * Returns a labels layouted dimensions.
   *
   * @param {string} text to layout
   * @param {Object} options
   *
   * @return {Dimensions}
   */
  Text.prototype.getDimensions = function(text, options) {
    return this.layoutText(text, options).dimensions;
  };

  /**
   * Creates and returns a label and its bounding box.
   *
   * @method Text#createText
   *
   * @param {string} text the text to render on the label
   * @param {Object} options
   * @param {string} options.align how to align in the bounding box.
   *                               Any of { 'center-middle', 'center-top' },
   *                               defaults to 'center-top'.
   * @param {string} options.style style to be applied to the text
   * @param {boolean} options.fitBox indicates if box will be recalculated to
   *                                 fit text
   *
   * @return {Object} { element, dimensions }
   */
  Text.prototype.layoutText = function(text, options) {
    var box = assign({}, this._config.size, options.box),
        style = assign({}, this._config.style, options.style),
        align = parseAlign(options.align || this._config.align),
        padding = parsePadding(options.padding !== undefined ? options.padding : this._config.padding),
        fitBox = options.fitBox || false;

    var lineHeight = getLineHeight(style);

    // we split text by lines and normalize
    // {soft break} + {line break} => { line break }
    var lines = text.split(/\u00AD?\r?\n/),
        layouted = [];

    var maxWidth = box.width - padding.left - padding.right;

    // ensure correct rendering by attaching helper text node to invisible SVG
    var helperText = create$1('text');
    attr(helperText, { x: 0, y: 0 });
    attr(helperText, style);

    var helperSvg = getHelperSvg();

    append(helperSvg, helperText);

    while (lines.length) {
      layouted.push(layoutNext(lines, maxWidth, helperText));
    }

    if (align.vertical === 'middle') {
      padding.top = padding.bottom = 0;
    }

    var totalHeight = reduce(layouted, function(sum, line, idx) {
      return sum + (lineHeight || line.height);
    }, 0) + padding.top + padding.bottom;

    var maxLineWidth = reduce(layouted, function(sum, line, idx) {
      return line.width > sum ? line.width : sum;
    }, 0);

    // the y position of the next line
    var y = padding.top;

    if (align.vertical === 'middle') {
      y += (box.height - totalHeight) / 2;
    }

    // magic number initial offset
    y -= (lineHeight || layouted[0].height) / 4;


    var textElement = create$1('text');

    attr(textElement, style);

    // layout each line taking into account that parent
    // shape might resize to fit text size
    forEach$1(layouted, function(line) {

      var x;

      y += (lineHeight || line.height);

      switch (align.horizontal) {
      case 'left':
        x = padding.left;
        break;

      case 'right':
        x = ((fitBox ? maxLineWidth : maxWidth)
          - padding.right - line.width);
        break;

      default:

        // aka center
        x = Math.max((((fitBox ? maxLineWidth : maxWidth)
          - line.width) / 2 + padding.left), 0);
      }

      var tspan = create$1('tspan');
      attr(tspan, { x: x, y: y });

      tspan.textContent = line.text;

      append(textElement, tspan);
    });

    remove$1(helperText);

    var dimensions = {
      width: maxLineWidth,
      height: totalHeight
    };

    return {
      dimensions: dimensions,
      element: textElement
    };
  };


  function getLineHeight(style) {
    if ('fontSize' in style && 'lineHeight' in style) {
      return style.lineHeight * parseInt(style.fontSize, 10);
    }
  }

  var DEFAULT_FONT_SIZE = 12;
  var LINE_HEIGHT_RATIO = 1.2;

  var MIN_TEXT_ANNOTATION_HEIGHT = 30;


  function TextRenderer(config) {

    var defaultStyle = assign({
      fontFamily: 'Arial, sans-serif',
      fontSize: DEFAULT_FONT_SIZE,
      fontWeight: 'normal',
      lineHeight: LINE_HEIGHT_RATIO
    }, config && config.defaultStyle || {});

    var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;

    var externalStyle = assign({}, defaultStyle, {
      fontSize: fontSize
    }, config && config.externalStyle || {});

    var textUtil = new Text({
      style: defaultStyle
    });

    /**
     * Get the new bounds of an externally rendered,
     * layouted label.
     *
     * @param  {Bounds} bounds
     * @param  {string} text
     *
     * @return {Bounds}
     */
    this.getExternalLabelBounds = function(bounds, text) {

      var layoutedDimensions = textUtil.getDimensions(text, {
        box: {
          width: 90,
          height: 30,
          x: bounds.width / 2 + bounds.x,
          y: bounds.height / 2 + bounds.y
        },
        style: externalStyle
      });

      // resize label shape to fit label text
      return {
        x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
        y: Math.round(bounds.y),
        width: Math.ceil(layoutedDimensions.width),
        height: Math.ceil(layoutedDimensions.height)
      };

    };

    /**
     * Get the new bounds of text annotation.
     *
     * @param  {Bounds} bounds
     * @param  {string} text
     *
     * @return {Bounds}
     */
    this.getTextAnnotationBounds = function(bounds, text) {

      var layoutedDimensions = textUtil.getDimensions(text, {
        box: bounds,
        style: defaultStyle,
        align: 'left-top',
        padding: 5
      });

      return {
        x: bounds.x,
        y: bounds.y,
        width: bounds.width,
        height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))
      };
    };

    /**
     * Create a layouted text element.
     *
     * @param {string} text
     * @param {Object} [options]
     *
     * @return {SVGElement} rendered text
     */
    this.createText = function(text, options) {
      return textUtil.createText(text, options || {});
    };

    /**
     * Get default text style.
     */
    this.getDefaultStyle = function() {
      return defaultStyle;
    };

    /**
     * Get the external text style.
     */
    this.getExternalStyle = function() {
      return externalStyle;
    };

  }

  TextRenderer.$inject = [
    'config.textRenderer'
  ];

  /**
   * Map containing SVG paths needed by BpmnRenderer.
   */

  function PathMap() {

    /**
     * Contains a map of path elements
     *
     * <h1>Path definition</h1>
     * A parameterized path is defined like this:
     * <pre>
     * 'GATEWAY_PARALLEL': {
     *   d: 'm {mx},{my} {e.x0},0 0,{e.x1} {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: 17.5,
     *   width:  17.5,
     *   heightElements: [2.5, 7.5],
     *   widthElements: [2.5, 7.5]
     * }
     * </pre>
     * <p>It's important to specify a correct <b>height and width</b> for the path as the scaling
     * is based on the ratio between the specified height and width in this object and the
     * height and width that is set as scale target (Note x,y coordinates will be scaled with
     * individual ratios).</p>
     * <p>The '<b>heightElements</b>' and '<b>widthElements</b>' array must contain the values that will be scaled.
     * The scaling is based on the computed ratios.
     * Coordinates on the y axis should be in the <b>heightElement</b>'s array, they will be scaled using
     * the computed ratio coefficient.
     * In the parameterized path the scaled values can be accessed through the 'e' object in {} brackets.
     *   <ul>
     *    <li>The values for the y axis can be accessed in the path string using {e.y0}, {e.y1}, ....</li>
     *    <li>The values for the x axis can be accessed in the path string using {e.x0}, {e.x1}, ....</li>
     *   </ul>
     *   The numbers x0, x1 respectively y0, y1, ... map to the corresponding array index.
     * </p>
     */
    this.pathMap = {
      'EVENT_MESSAGE': {
        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 ]
      },
      '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 ]
      },
      '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 ]
      },
      'EVENT_CONDITIONAL': {
        d: 'M {e.x0},{e.y0} l {e.x1},0 l 0,{e.y2} l -{e.x1},0 Z ' +
           'M {e.x2},{e.y3} l {e.x0},0 ' +
           'M {e.x2},{e.y4} l {e.x0},0 ' +
           'M {e.x2},{e.y5} l {e.x0},0 ' +
           'M {e.x2},{e.y6} l {e.x0},0 ' +
           'M {e.x2},{e.y7} l {e.x0},0 ' +
           '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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 ]
      },
      'GATEWAY_EXCLUSIVE': {
        d:'m {mx},{my} {e.x0},{e.y0} {e.x1},{e.y0} {e.x2},0 {e.x4},{e.y2} ' +
                      '{e.x4},{e.y1} {e.x2},0 {e.x1},{e.y3} {e.x0},{e.y3} ' +
                      '{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 ]
      },
      '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 ]
      },
      '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 ]
      },
      '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} ' +
          '{e.x2},0  -{e.x0},{e.y1} l {e.x1},{e.y2} {e.x0},-{e.y1} 0,{e.y0} {e.x3},0 0,-{e.y0} {e.x0},{e.y1} ' +
          '{e.x1},-{e.y2} -{e.x0},-{e.y1} {e.x2},0 0,-{e.y3} -{e.x2},0 {e.x0},-{e.y1} -{e.x1},-{e.y2} ' +
          '-{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 ]
      },
      '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 ]
      },
      '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',
        height: 10,
        width: 10,
        heightElements: [],
        widthElements: []
      },
      'DATA_ARROW': {
        d:'m 5,9 9,0 0,-3 5,5 -5,5 0,-3 -9,0 z',
        height: 61,
        width:  51,
        heightElements: [],
        widthElements: []
      },
      'DATA_STORE': {
        d:'m  {mx},{my} ' +
          'l  0,{e.y2} ' +
          'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0 ' +
          'l  0,-{e.y2} ' +
          'c -{e.x0},-{e.y1} -{e.x1},-{e.y1} -{e.x2},0' +
          'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0 ' +
          'm  -{e.x2},{e.y0}' +
          'c  {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0' +
          'm  -{e.x2},{e.y0}' +
          'c  {e.x0},{e.y1} {e.x1},{e.y1}  {e.x2},0',
        height: 61,
        width:  61,
        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 ]
      },
      'MARKER_SUB_PROCESS': {
        d: 'm{mx},{my} m 7,2 l 0,10 m -5,-5 l 10,0',
        height: 10,
        width: 10,
        heightElements: [],
        widthElements: []
      },
      'MARKER_PARALLEL': {
        d: 'm{mx},{my} m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10',
        height: 10,
        width: 10,
        heightElements: [],
        widthElements: []
      },
      'MARKER_SEQUENTIAL': {
        d: 'm{mx},{my} m 0,3 l 10,0 m -10,3 l 10,0 m -10,3 l 10,0',
        height: 10,
        width: 10,
        heightElements: [],
        widthElements: []
      },
      'MARKER_COMPENSATION': {
        d: 'm {mx},{my} 7,-5 0,10 z m 7.1,-0.3 6.9,-4.7 0,10 -6.9,-4.7 z',
        height: 10,
        width: 21,
        heightElements: [],
        widthElements: []
      },
      'MARKER_LOOP': {
        d: 'm {mx},{my} c 3.526979,0 6.386161,-2.829858 6.386161,-6.320661 0,-3.490806 -2.859182,-6.320661 ' +
          '-6.386161,-6.320661 -3.526978,0 -6.38616,2.829855 -6.38616,6.320661 0,1.745402 ' +
          '0.714797,3.325567 1.870463,4.469381 0.577834,0.571908 1.265885,1.034728 2.029916,1.35457 ' +
          'l -0.718163,-3.909793 m 0.718163,3.909793 -3.885211,0.802902',
        height: 13.9,
        width: 13.7,
        heightElements: [],
        widthElements: []
      },
      'MARKER_ADHOC': {
        d: 'm {mx},{my} m 0.84461,2.64411 c 1.05533,-1.23780996 2.64337,-2.07882 4.29653,-1.97997996 2.05163,0.0805 ' +
          '3.85579,1.15803 5.76082,1.79107 1.06385,0.34139996 2.24454,0.1438 3.18759,-0.43767 0.61743,-0.33642 ' +
          '1.2775,-0.64078 1.7542,-1.17511 0,0.56023 0,1.12046 0,1.6807 -0.98706,0.96237996 -2.29792,1.62393996 ' +
          '-3.6918,1.66181996 -1.24459,0.0927 -2.46671,-0.2491 -3.59505,-0.74812 -1.35789,-0.55965 ' +
          '-2.75133,-1.33436996 -4.27027,-1.18121996 -1.37741,0.14601 -2.41842,1.13685996 -3.44288,1.96782996 z',
        height: 4,
        width: 15,
        heightElements: [],
        widthElements: []
      },
      'TASK_TYPE_SEND': {
        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 ]
      },
      'TASK_TYPE_SCRIPT': {
        d: 'm {mx},{my} c 9.966553,-6.27276 -8.000926,-7.91932 2.968968,-14.938 l -8.802728,0 ' +
          'c -10.969894,7.01868 6.997585,8.66524 -2.968967,14.938 z ' +
          'm -7,-12 l 5,0 ' +
          'm -4.5,3 l 4.5,0 ' +
          'm -3,3 l 5,0' +
          'm -4,3 l 5,0',
        height: 15,
        width:  12.6,
        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 ' +
          '-4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 ' +
          '0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 ' +
          'h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 z' +
          'm -8,6 l 0,5.5 m 11,0 l 0,-5'
      },
      'TASK_TYPE_USER_2': {
        d: 'm {mx},{my} m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 ' +
          '-2.66499998,0 -4.822,-1.981 -4.822,-4.4310005 '
      },
      'TASK_TYPE_USER_3': {
        d: 'm {mx},{my} m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 ' +
          '4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 ' +
          '-4.20799998,3.36699999 -4.20699998,4.34799999 z'
      },
      'TASK_TYPE_MANUAL': {
        d: 'm {mx},{my} c 0.234,-0.01 5.604,0.008 8.029,0.004 0.808,0 1.271,-0.172 1.417,-0.752 0.227,-0.898 ' +
          '-0.334,-1.314 -1.338,-1.316 -2.467,-0.01 -7.886,-0.004 -8.108,-0.004 -0.014,-0.079 0.016,-0.533 0,-0.61 ' +
          '0.195,-0.042 8.507,0.006 9.616,0.002 0.877,-0.007 1.35,-0.438 1.353,-1.208 0.003,-0.768 -0.479,-1.09 ' +
          '-1.35,-1.091 -2.968,-0.002 -9.619,-0.013 -9.619,-0.013 v -0.591 c 0,0 5.052,-0.016 7.225,-0.016 ' +
          '0.888,-0.002 1.354,-0.416 1.351,-1.193 -0.006,-0.761 -0.492,-1.196 -1.361,-1.196 -3.473,-0.005 ' +
          '-10.86,-0.003 -11.0829995,-0.003 -0.022,-0.047 -0.045,-0.094 -0.069,-0.139 0.3939995,-0.319 ' +
          '2.0409995,-1.626 2.4149995,-2.017 0.469,-0.4870005 0.519,-1.1650005 0.162,-1.6040005 -0.414,-0.511 ' +
          '-0.973,-0.5 -1.48,-0.236 -1.4609995,0.764 -6.5999995,3.6430005 -7.7329995,4.2710005 -0.9,0.499 ' +
          '-1.516,1.253 -1.882,2.19 -0.37000002,0.95 -0.17,2.01 -0.166,2.979 0.004,0.718 -0.27300002,1.345 ' +
          '-0.055,2.063 0.629,2.087 2.425,3.312 4.859,3.318 4.6179995,0.014 9.2379995,-0.139 13.8569995,-0.158 ' +
          '0.755,-0.004 1.171,-0.301 1.182,-1.033 0.012,-0.754 -0.423,-0.969 -1.183,-0.973 -1.778,-0.01 ' +
          '-5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z'
      },
      'TASK_TYPE_INSTANTIATING_SEND': {
        d: 'm {mx},{my} l 0,8.4 l 12.6,0 l 0,-8.4 z l 6.3,3.6 l 6.3,-3.6'
      },
      'TASK_TYPE_SERVICE': {
        d: 'm {mx},{my} v -1.71335 c 0.352326,-0.0705 0.703932,-0.17838 1.047628,-0.32133 ' +
          '0.344416,-0.14465 0.665822,-0.32133 0.966377,-0.52145 l 1.19431,1.18005 1.567487,-1.57688 ' +
          '-1.195028,-1.18014 c 0.403376,-0.61394 0.683079,-1.29908 0.825447,-2.01824 l 1.622133,-0.01 ' +
          'v -2.2196 l -1.636514,0.01 c -0.07333,-0.35153 -0.178319,-0.70024 -0.323564,-1.04372 ' +
          '-0.145244,-0.34406 -0.321407,-0.6644 -0.522735,-0.96217 l 1.131035,-1.13631 -1.583305,-1.56293 ' +
          '-1.129598,1.13589 c -0.614052,-0.40108 -1.302883,-0.68093 -2.022633,-0.82247 l 0.0093,-1.61852 ' +
          'h -2.241173 l 0.0042,1.63124 c -0.353763,0.0736 -0.705369,0.17977 -1.049785,0.32371 -0.344415,0.14437 ' +
          '-0.665102,0.32092 -0.9635006,0.52046 l -1.1698628,-1.15823 -1.5667691,1.5792 1.1684265,1.15669 ' +
          'c -0.4026573,0.61283 -0.68308,1.29797 -0.8247287,2.01713 l -1.6588041,0.003 v 2.22174 ' +
          'l 1.6724648,-0.006 c 0.073327,0.35077 0.1797598,0.70243 0.3242851,1.04472 0.1452428,0.34448 ' +
          '0.3214064,0.6644 0.5227339,0.96066 l -1.1993431,1.19723 1.5840256,1.56011 1.1964668,-1.19348 ' +
          'c 0.6140517,0.40346 1.3028827,0.68232 2.0233517,0.82331 l 7.19e-4,1.69892 h 2.226848 z ' +
          'm 0.221462,-3.9957 c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +
          '0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +
          '0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'
      },
      'TASK_TYPE_SERVICE_FILL': {
        d: 'm {mx},{my} c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +
          '0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +
          '0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'
      },
      'TASK_TYPE_BUSINESS_RULE_HEADER': {
        d: 'm {mx},{my} 0,4 20,0 0,-4 z'
      },
      'TASK_TYPE_BUSINESS_RULE_MAIN': {
        d: 'm {mx},{my} 0,12 20,0 0,-12 z' +
          'm 0,8 l 20,0 ' +
          'm -13,-4 l 0,8'
      },
      'MESSAGE_FLOW_MARKER': {
        d: 'm {mx},{my} m -10.5 ,-7 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6'
      }
    };

    this.getRawPath = function getRawPath(pathId) {
      return this.pathMap[pathId].d;
    };

    /**
     * Scales the path to the given height and width.
     * <h1>Use case</h1>
     * <p>Use case is to scale the content of elements (event, gateways) based
     * on the element bounding box's size.
     * </p>
     * <h1>Why not transform</h1>
     * <p>Scaling a path with transform() will also scale the stroke and IE does not support
     * the option 'non-scaling-stroke' to prevent this.
     * Also there are use cases where only some parts of a path should be
     * scaled.</p>
     *
     * @param {string} pathId The ID of the path.
     * @param {Object} param <p>
     *   Example param object scales the path to 60% size of the container (data.width, data.height).
     *   <pre>
     *   {
     *     xScaleFactor: 0.6,
     *     yScaleFactor:0.6,
     *     containerWidth: data.width,
     *     containerHeight: data.height,
     *     position: {
     *       mx: 0.46,
     *       my: 0.2,
     *     }
     *   }
     *   </pre>
     *   <ul>
     *    <li>targetpathwidth = xScaleFactor * containerWidth</li>
     *    <li>targetpathheight = yScaleFactor * containerHeight</li>
     *    <li>Position is used to set the starting coordinate of the path. M is computed:
      *    <ul>
      *      <li>position.x * containerWidth</li>
      *      <li>position.y * containerHeight</li>
      *    </ul>
      *    Center of the container <pre> position: {
     *       mx: 0.5,
     *       my: 0.5,
     *     }</pre>
     *     Upper left corner of the container
     *     <pre> position: {
     *       mx: 0.0,
     *       my: 0.0,
     *     }</pre>
     *    </li>
     *   </ul>
     * </p>
     *
     */
    this.getScaledPath = function getScaledPath(pathId, param) {
      var rawPath = this.pathMap[pathId];

      // positioning
      // compute the start point of the path
      var mx, my;

      if (param.abspos) {
        mx = param.abspos.x;
        my = param.abspos.y;
      } else {
        mx = param.containerWidth * param.position.mx;
        my = param.containerHeight * param.position.my;
      }

      var coordinates = {}; // map for the scaled coordinates
      if (param.position) {

        // path
        var heightRatio = (param.containerHeight / rawPath.height) * param.yScaleFactor;
        var widthRatio = (param.containerWidth / rawPath.width) * param.xScaleFactor;


        // Apply height ratio
        for (var heightIndex = 0; heightIndex < rawPath.heightElements.length; heightIndex++) {
          coordinates['y' + heightIndex] = rawPath.heightElements[heightIndex] * heightRatio;
        }

        // Apply width ratio
        for (var widthIndex = 0; widthIndex < rawPath.widthElements.length; widthIndex++) {
          coordinates['x' + widthIndex] = rawPath.widthElements[widthIndex] * widthRatio;
        }
      }

      // Apply value to raw path
      var path = format(
        rawPath.d, {
          mx: mx,
          my: my,
          e: coordinates
        }
      );
      return path;
    };
  }

  // helpers //////////////////////

  // copied and adjusted from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
  var tokenRegex = /\{([^{}]+)\}/g,
      objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties

  function replacer(all, key, obj) {
    var res = obj;
    key.replace(objNotationRegex, function(all, name, quote, quotedName, isFunc) {
      name = name || quotedName;
      if (res) {
        if (name in res) {
          res = res[name];
        }
        typeof res == 'function' && isFunc && (res = res());
      }
    });
    res = (res == null || res == obj ? all : res) + '';

    return res;
  }

  function format(str, obj) {
    return String(str).replace(tokenRegex, function(all, key) {
      return replacer(all, key, obj);
    });
  }

  var DrawModule = {
    __init__: [ 'bpmnRenderer' ],
    bpmnRenderer: [ 'type', BpmnRenderer ],
    textRenderer: [ 'type', TextRenderer ],
    pathMap: [ 'type', PathMap ]
  };

  /**
   * A simple translation stub to be used for multi-language support
   * in diagrams. Can be easily replaced with a more sophisticated
   * solution.
   *
   * @example
   *
   * // use it inside any diagram component by injecting `translate`.
   *
   * function MyService(translate) {
   *   alert(translate('HELLO {you}', { you: 'You!' }));
   * }
   *
   * @param {string} template to interpolate
   * @param {Object} [replacements] a map with substitutes
   *
   * @return {string} the translated string
   */
  function translate$1(template, replacements) {

    replacements = replacements || {};

    return template.replace(/{([^}]+)}/g, function(_, key) {
      return replacements[key] || '{' + key + '}';
    });
  }

  var translate = {
    translate: [ 'value', translate$1 ]
  };

  var DEFAULT_LABEL_SIZE = {
    width: 90,
    height: 20
  };

  var FLOW_LABEL_INDENT = 15;


  /**
   * Returns true if the given semantic has an external label
   *
   * @param {BpmnElement} semantic
   * @return {boolean} true if has label
   */
  function isLabelExternal(semantic) {
    return is$1(semantic, 'bpmn:Event') ||
           is$1(semantic, 'bpmn:Gateway') ||
           is$1(semantic, 'bpmn:DataStoreReference') ||
           is$1(semantic, 'bpmn:DataObjectReference') ||
           is$1(semantic, 'bpmn:DataInput') ||
           is$1(semantic, 'bpmn:DataOutput') ||
           is$1(semantic, 'bpmn:SequenceFlow') ||
           is$1(semantic, 'bpmn:MessageFlow') ||
           is$1(semantic, 'bpmn:Group');
  }

  /**
   * Returns true if the given element has an external label
   *
   * @param {djs.model.shape} element
   * @return {boolean} true if has label
   */
  function hasExternalLabel(element) {
    return isLabel$6(element.label);
  }

  /**
   * Get the position for sequence flow labels
   *
   * @param  {Array<Point>} waypoints
   * @return {Point} the label position
   */
  function getFlowLabelPosition(waypoints) {

    // get the waypoints mid
    var mid = waypoints.length / 2 - 1;

    var first = waypoints[Math.floor(mid)];
    var second = waypoints[Math.ceil(mid + 0.01)];

    // get position
    var position = getWaypointsMid(waypoints);

    // calculate angle
    var angle = Math.atan((second.y - first.y) / (second.x - first.x));

    var x = position.x,
        y = position.y;

    if (Math.abs(angle) < Math.PI / 2) {
      y -= FLOW_LABEL_INDENT;
    } else {
      x += FLOW_LABEL_INDENT;
    }

    return { x: x, y: y };
  }


  /**
   * Get the middle of a number of waypoints
   *
   * @param  {Array<Point>} waypoints
   * @return {Point} the mid point
   */
  function getWaypointsMid(waypoints) {

    var mid = waypoints.length / 2 - 1;

    var first = waypoints[Math.floor(mid)];
    var second = waypoints[Math.ceil(mid + 0.01)];

    return {
      x: first.x + (second.x - first.x) / 2,
      y: first.y + (second.y - first.y) / 2
    };
  }


  function getExternalLabelMid(element) {

    if (element.waypoints) {
      return getFlowLabelPosition(element.waypoints);
    } else if (is$1(element, 'bpmn:Group')) {
      return {
        x: element.x + element.width / 2,
        y: element.y + DEFAULT_LABEL_SIZE.height / 2
      };
    } else {
      return {
        x: element.x + element.width / 2,
        y: element.y + element.height + DEFAULT_LABEL_SIZE.height / 2
      };
    }
  }


  /**
   * Returns the bounds of an elements label, parsed from the elements DI or
   * generated from its bounds.
   *
   * @param {BpmndDi} di
   * @param {djs.model.Base} element
   */
  function getExternalLabelBounds(di, element) {

    var mid,
        size,
        bounds,
        label = di.label;

    if (label && label.bounds) {
      bounds = label.bounds;

      size = {
        width: Math.max(DEFAULT_LABEL_SIZE.width, bounds.width),
        height: bounds.height
      };

      mid = {
        x: bounds.x + bounds.width / 2,
        y: bounds.y + bounds.height / 2
      };
    } else {

      mid = getExternalLabelMid(element);

      size = DEFAULT_LABEL_SIZE;
    }

    return assign({
      x: mid.x - size.width / 2,
      y: mid.y - size.height / 2
    }, size);
  }

  function isLabel$6(element) {
    return element && !!element.labelTarget;
  }

  /**
   * @param {ModdleElement} semantic
   * @param {ModdleElement} di
   * @param {Object} [attrs=null]
   *
   * @return {Object}
   */
  function elementData(semantic, di, attrs) {
    return assign({
      id: semantic.id,
      type: semantic.$type,
      businessObject: semantic,
      di: di
    }, attrs);
  }

  function getWaypoints(di, source, target) {

    var waypoints = di.waypoint;

    if (!waypoints || waypoints.length < 2) {
      return [ getMid(source), getMid(target) ];
    }

    return waypoints.map(function(p) {
      return { x: p.x, y: p.y };
    });
  }

  function notYetDrawn(translate, semantic, refSemantic, property) {
    return new Error(translate('element {element} referenced by {referenced}#{property} not yet drawn', {
      element: elementToString(refSemantic),
      referenced: elementToString(semantic),
      property: property
    }));
  }


  /**
   * An importer that adds bpmn elements to the canvas
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   * @param {ElementFactory} elementFactory
   * @param {ElementRegistry} elementRegistry
   * @param {Function} translate
   * @param {TextRenderer} textRenderer
   */
  function BpmnImporter(
      eventBus, canvas, elementFactory,
      elementRegistry, translate, textRenderer) {

    this._eventBus = eventBus;
    this._canvas = canvas;
    this._elementFactory = elementFactory;
    this._elementRegistry = elementRegistry;
    this._translate = translate;
    this._textRenderer = textRenderer;
  }

  BpmnImporter.$inject = [
    'eventBus',
    'canvas',
    'elementFactory',
    'elementRegistry',
    'translate',
    'textRenderer'
  ];


  /**
   * Add bpmn element (semantic) to the canvas onto the
   * specified parent shape.
   */
  BpmnImporter.prototype.add = function(semantic, di, parentElement) {
    var element,
        translate = this._translate,
        hidden;

    var parentIndex;

    // ROOT ELEMENT
    // handle the special case that we deal with a
    // invisible root element (process, subprocess or collaboration)
    if (is$1(di, 'bpmndi:BPMNPlane')) {

      var attrs = is$1(semantic, 'bpmn:SubProcess')
        ? { id: semantic.id + '_plane' }
        : {};

      // add a virtual element (not being drawn)
      element = this._elementFactory.createRoot(elementData(semantic, di, attrs));

      this._canvas.addRootElement(element);
    }

    // SHAPE
    else if (is$1(di, 'bpmndi:BPMNShape')) {

      var collapsed = !isExpanded(semantic, di),
          isFrame = isFrameElement(semantic);

      hidden = parentElement && (parentElement.hidden || parentElement.collapsed);

      var bounds = di.bounds;

      element = this._elementFactory.createShape(elementData(semantic, di, {
        collapsed: collapsed,
        hidden: hidden,
        x: Math.round(bounds.x),
        y: Math.round(bounds.y),
        width: Math.round(bounds.width),
        height: Math.round(bounds.height),
        isFrame: isFrame
      }));

      if (is$1(semantic, 'bpmn:BoundaryEvent')) {
        this._attachBoundary(semantic, element);
      }

      // insert lanes behind other flow nodes (cf. #727)
      if (is$1(semantic, 'bpmn:Lane')) {
        parentIndex = 0;
      }

      if (is$1(semantic, 'bpmn:DataStoreReference')) {

        // check whether data store is inside our outside of its semantic parent
        if (!isPointInsideBBox$1(parentElement, getMid(bounds))) {
          parentElement = this._canvas.findRoot(parentElement);
        }
      }

      this._canvas.addShape(element, parentElement, parentIndex);
    }

    // CONNECTION
    else if (is$1(di, 'bpmndi:BPMNEdge')) {

      var source = this._getSource(semantic),
          target = this._getTarget(semantic);

      hidden = parentElement && (parentElement.hidden || parentElement.collapsed);

      element = this._elementFactory.createConnection(elementData(semantic, di, {
        hidden: hidden,
        source: source,
        target: target,
        waypoints: getWaypoints(di, source, target)
      }));

      if (is$1(semantic, 'bpmn:DataAssociation')) {

        // render always on top; this ensures DataAssociations
        // are rendered correctly across different "hacks" people
        // love to model such as cross participant / sub process
        // associations
        parentElement = this._canvas.findRoot(parentElement);
      }

      this._canvas.addConnection(element, parentElement, parentIndex);
    } else {
      throw new Error(translate('unknown di {di} for element {semantic}', {
        di: elementToString(di),
        semantic: elementToString(semantic)
      }));
    }

    // (optional) LABEL
    if (isLabelExternal(semantic) && getLabel(element)) {
      this.addLabel(semantic, di, element);
    }


    this._eventBus.fire('bpmnElement.added', { element: element });

    return element;
  };


  /**
   * Attach the boundary element to the given host
   *
   * @param {ModdleElement} boundarySemantic
   * @param {djs.model.Base} boundaryElement
   */
  BpmnImporter.prototype._attachBoundary = function(boundarySemantic, boundaryElement) {
    var translate = this._translate;
    var hostSemantic = boundarySemantic.attachedToRef;

    if (!hostSemantic) {
      throw new Error(translate('missing {semantic}#attachedToRef', {
        semantic: elementToString(boundarySemantic)
      }));
    }

    var host = this._elementRegistry.get(hostSemantic.id),
        attachers = host && host.attachers;

    if (!host) {
      throw notYetDrawn(translate, boundarySemantic, hostSemantic, 'attachedToRef');
    }

    // wire element.host <> host.attachers
    boundaryElement.host = host;

    if (!attachers) {
      host.attachers = attachers = [];
    }

    if (attachers.indexOf(boundaryElement) === -1) {
      attachers.push(boundaryElement);
    }
  };


  /**
   * add label for an element
   */
  BpmnImporter.prototype.addLabel = function(semantic, di, element) {
    var bounds,
        text,
        label;

    bounds = getExternalLabelBounds(di, element);

    text = getLabel(element);

    if (text) {

      // get corrected bounds from actual layouted text
      bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
    }

    label = this._elementFactory.createLabel(elementData(semantic, di, {
      id: semantic.id + '_label',
      labelTarget: element,
      type: 'label',
      hidden: element.hidden || !getLabel(element),
      x: Math.round(bounds.x),
      y: Math.round(bounds.y),
      width: Math.round(bounds.width),
      height: Math.round(bounds.height)
    }));

    return this._canvas.addShape(label, element.parent);
  };

  /**
   * Return the drawn connection end based on the given side.
   *
   * @throws {Error} if the end is not yet drawn
   */
  BpmnImporter.prototype._getEnd = function(semantic, side) {

    var element,
        refSemantic,
        type = semantic.$type,
        translate = this._translate;

    refSemantic = semantic[side + 'Ref'];

    // handle mysterious isMany DataAssociation#sourceRef
    if (side === 'source' && type === 'bpmn:DataInputAssociation') {
      refSemantic = refSemantic && refSemantic[0];
    }

    // fix source / target for DataInputAssociation / DataOutputAssociation
    if (side === 'source' && type === 'bpmn:DataOutputAssociation' ||
        side === 'target' && type === 'bpmn:DataInputAssociation') {

      refSemantic = semantic.$parent;
    }

    element = refSemantic && this._getElement(refSemantic);

    if (element) {
      return element;
    }

    if (refSemantic) {
      throw notYetDrawn(translate, semantic, refSemantic, side + 'Ref');
    } else {
      throw new Error(translate('{semantic}#{side} Ref not specified', {
        semantic: elementToString(semantic),
        side: side
      }));
    }
  };

  BpmnImporter.prototype._getSource = function(semantic) {
    return this._getEnd(semantic, 'source');
  };

  BpmnImporter.prototype._getTarget = function(semantic) {
    return this._getEnd(semantic, 'target');
  };


  BpmnImporter.prototype._getElement = function(semantic) {
    return this._elementRegistry.get(semantic.id);
  };


  // helpers ////////////////////

  function isPointInsideBBox$1(bbox, point) {
    var x = point.x,
        y = point.y;

    return x >= bbox.x &&
      x <= bbox.x + bbox.width &&
      y >= bbox.y &&
      y <= bbox.y + bbox.height;
  }

  function isFrameElement(semantic) {
    return is$1(semantic, 'bpmn:Group');
  }

  var ImportModule = {
    __depends__: [
      translate
    ],
    bpmnImporter: [ 'type', BpmnImporter ]
  };

  var CoreModule = {
    __depends__: [
      DrawModule,
      ImportModule
    ]
  };

  function __stopPropagation(event) {
    if (!event || typeof event.stopPropagation !== 'function') {
      return;
    }

    event.stopPropagation();
  }


  function getOriginal$1(event) {
    return event.originalEvent || event.srcEvent;
  }


  function stopPropagation$1(event, immediate) {
    __stopPropagation(event);
    __stopPropagation(getOriginal$1(event));
  }


  function toPoint(event) {

    if (event.pointers && event.pointers.length) {
      event = event.pointers[0];
    }

    if (event.touches && event.touches.length) {
      event = event.touches[0];
    }

    return event ? {
      x: event.clientX,
      y: event.clientY
    } : null;
  }

  function isMac() {
    return (/mac/i).test(navigator.platform);
  }

  function isButton(event, button) {
    return (getOriginal$1(event) || event).button === button;
  }

  function isPrimaryButton(event) {

    // button === 0 -> left áka primary mouse button
    return isButton(event, 0);
  }

  function isAuxiliaryButton(event) {

    // button === 1 -> auxiliary áka wheel button
    return isButton(event, 1);
  }

  function hasPrimaryModifier(event) {
    var originalEvent = getOriginal$1(event) || event;

    if (!isPrimaryButton(event)) {
      return false;
    }

    // Use cmd as primary modifier key for mac OS
    if (isMac()) {
      return originalEvent.metaKey;
    } else {
      return originalEvent.ctrlKey;
    }
  }


  function hasSecondaryModifier(event) {
    var originalEvent = getOriginal$1(event) || event;

    return isPrimaryButton(event) && originalEvent.shiftKey;
  }

  function allowAll(event) { return true; }

  function allowPrimaryAndAuxiliary(event) {
    return isPrimaryButton(event) || isAuxiliaryButton(event);
  }

  var LOW_PRIORITY$q = 500;


  /**
   * A plugin that provides interaction events for diagram elements.
   *
   * It emits the following events:
   *
   *   * element.click
   *   * element.contextmenu
   *   * element.dblclick
   *   * element.hover
   *   * element.mousedown
   *   * element.mousemove
   *   * element.mouseup
   *   * element.out
   *
   * Each event is a tuple { element, gfx, originalEvent }.
   *
   * Canceling the event via Event#preventDefault()
   * prevents the original DOM operation.
   *
   * @param {EventBus} eventBus
   */
  function InteractionEvents(eventBus, elementRegistry, styles) {

    var self = this;

    /**
     * Fire an interaction event.
     *
     * @param {string} type local event name, e.g. element.click.
     * @param {DOMEvent} event native event
     * @param {djs.model.Base} [element] the diagram element to emit the event on;
     *                                   defaults to the event target
     */
    function fire(type, event, element) {

      if (isIgnored(type, event)) {
        return;
      }

      var target, gfx, returnValue;

      if (!element) {
        target = event.delegateTarget || event.target;

        if (target) {
          gfx = target;
          element = elementRegistry.get(gfx);
        }
      } else {
        gfx = elementRegistry.getGraphics(element);
      }

      if (!gfx || !element) {
        return;
      }

      returnValue = eventBus.fire(type, {
        element: element,
        gfx: gfx,
        originalEvent: event
      });

      if (returnValue === false) {
        event.stopPropagation();
        event.preventDefault();
      }
    }

    // TODO(nikku): document this
    var handlers = {};

    function mouseHandler(localEventName) {
      return handlers[localEventName];
    }

    function isIgnored(localEventName, event) {

      var filter = ignoredFilters[localEventName] || isPrimaryButton;

      // only react on left mouse button interactions
      // except for interaction events that are enabled
      // for secundary mouse button
      return !filter(event);
    }

    var bindings = {
      click: 'element.click',
      contextmenu: 'element.contextmenu',
      dblclick: 'element.dblclick',
      mousedown: 'element.mousedown',
      mousemove: 'element.mousemove',
      mouseover: 'element.hover',
      mouseout: 'element.out',
      mouseup: 'element.mouseup',
    };

    var ignoredFilters = {
      'element.contextmenu': allowAll,
      'element.mousedown': allowPrimaryAndAuxiliary,
      'element.mouseup': allowPrimaryAndAuxiliary,
      'element.click': allowPrimaryAndAuxiliary,
      'element.dblclick': allowPrimaryAndAuxiliary
    };


    // manual event trigger //////////

    /**
     * Trigger an interaction event (based on a native dom event)
     * on the target shape or connection.
     *
     * @param {string} eventName the name of the triggered DOM event
     * @param {MouseEvent} event
     * @param {djs.model.Base} targetElement
     */
    function triggerMouseEvent(eventName, event, targetElement) {

      // i.e. element.mousedown...
      var localEventName = bindings[eventName];

      if (!localEventName) {
        throw new Error('unmapped DOM event name <' + eventName + '>');
      }

      return fire(localEventName, event, targetElement);
    }


    var ELEMENT_SELECTOR = 'svg, .djs-element';

    // event handling ///////

    function registerEvent(node, event, localEvent, ignoredFilter) {

      var handler = handlers[localEvent] = function(event) {
        fire(localEvent, event);
      };

      if (ignoredFilter) {
        ignoredFilters[localEvent] = ignoredFilter;
      }

      handler.$delegate = delegate.bind(node, ELEMENT_SELECTOR, event, handler);
    }

    function unregisterEvent(node, event, localEvent) {

      var handler = mouseHandler(localEvent);

      if (!handler) {
        return;
      }

      delegate.unbind(node, event, handler.$delegate);
    }

    function registerEvents(svg) {
      forEach$1(bindings, function(val, key) {
        registerEvent(svg, key, val);
      });
    }

    function unregisterEvents(svg) {
      forEach$1(bindings, function(val, key) {
        unregisterEvent(svg, key, val);
      });
    }

    eventBus.on('canvas.destroy', function(event) {
      unregisterEvents(event.svg);
    });

    eventBus.on('canvas.init', function(event) {
      registerEvents(event.svg);
    });


    // hit box updating ////////////////

    eventBus.on([ 'shape.added', 'connection.added' ], function(event) {
      var element = event.element,
          gfx = event.gfx;

      eventBus.fire('interactionEvents.createHit', { element: element, gfx: gfx });
    });

    // Update djs-hit on change.
    // A low priortity is necessary, because djs-hit of labels has to be updated
    // after the label bounds have been updated in the renderer.
    eventBus.on([
      'shape.changed',
      'connection.changed'
    ], LOW_PRIORITY$q, function(event) {

      var element = event.element,
          gfx = event.gfx;

      eventBus.fire('interactionEvents.updateHit', { element: element, gfx: gfx });
    });

    eventBus.on('interactionEvents.createHit', LOW_PRIORITY$q, function(event) {
      var element = event.element,
          gfx = event.gfx;

      self.createDefaultHit(element, gfx);
    });

    eventBus.on('interactionEvents.updateHit', function(event) {
      var element = event.element,
          gfx = event.gfx;

      self.updateDefaultHit(element, gfx);
    });


    // hit styles ////////////

    var STROKE_HIT_STYLE = createHitStyle('djs-hit djs-hit-stroke');

    var CLICK_STROKE_HIT_STYLE = createHitStyle('djs-hit djs-hit-click-stroke');

    var ALL_HIT_STYLE = createHitStyle('djs-hit djs-hit-all');

    var NO_MOVE_HIT_STYLE = createHitStyle('djs-hit djs-hit-no-move');

    var HIT_TYPES = {
      'all': ALL_HIT_STYLE,
      'click-stroke': CLICK_STROKE_HIT_STYLE,
      'stroke': STROKE_HIT_STYLE,
      'no-move': NO_MOVE_HIT_STYLE
    };

    function createHitStyle(classNames, attrs) {

      attrs = assign({
        stroke: 'white',
        strokeWidth: 15
      }, attrs || {});

      return styles.cls(classNames, [ 'no-fill', 'no-border' ], attrs);
    }


    // style helpers ///////////////

    function applyStyle(hit, type) {

      var attrs = HIT_TYPES[type];

      if (!attrs) {
        throw new Error('invalid hit type <' + type + '>');
      }

      attr(hit, attrs);

      return hit;
    }

    function appendHit(gfx, hit) {
      append(gfx, hit);
    }


    // API

    /**
     * Remove hints on the given graphics.
     *
     * @param {SVGElement} gfx
     */
    this.removeHits = function(gfx) {
      var hits = all('.djs-hit', gfx);

      forEach$1(hits, remove$1);
    };

    /**
     * Create default hit for the given element.
     *
     * @param {djs.model.Base} element
     * @param {SVGElement} gfx
     *
     * @return {SVGElement} created hit
     */
    this.createDefaultHit = function(element, gfx) {
      var waypoints = element.waypoints,
          isFrame = element.isFrame,
          boxType;

      if (waypoints) {
        return this.createWaypointsHit(gfx, waypoints);
      } else {

        boxType = isFrame ? 'stroke' : 'all';

        return this.createBoxHit(gfx, boxType, {
          width: element.width,
          height: element.height
        });
      }
    };

    /**
     * Create hits for the given waypoints.
     *
     * @param {SVGElement} gfx
     * @param {Array<Point>} waypoints
     *
     * @return {SVGElement}
     */
    this.createWaypointsHit = function(gfx, waypoints) {

      var hit = createLine(waypoints);

      applyStyle(hit, 'stroke');

      appendHit(gfx, hit);

      return hit;
    };

    /**
     * Create hits for a box.
     *
     * @param {SVGElement} gfx
     * @param {string} hitType
     * @param {Object} attrs
     *
     * @return {SVGElement}
     */
    this.createBoxHit = function(gfx, type, attrs) {

      attrs = assign({
        x: 0,
        y: 0
      }, attrs);

      var hit = create$1('rect');

      applyStyle(hit, type);

      attr(hit, attrs);

      appendHit(gfx, hit);

      return hit;
    };

    /**
     * Update default hit of the element.
     *
     * @param  {djs.model.Base} element
     * @param  {SVGElement} gfx
     *
     * @return {SVGElement} updated hit
     */
    this.updateDefaultHit = function(element, gfx) {

      var hit = query('.djs-hit', gfx);

      if (!hit) {
        return;
      }

      if (element.waypoints) {
        updateLine(hit, element.waypoints);
      } else {
        attr(hit, {
          width: element.width,
          height: element.height
        });
      }

      return hit;
    };

    this.fire = fire;

    this.triggerMouseEvent = triggerMouseEvent;

    this.mouseHandler = mouseHandler;

    this.registerEvent = registerEvent;
    this.unregisterEvent = unregisterEvent;
  }


  InteractionEvents.$inject = [
    'eventBus',
    'elementRegistry',
    'styles'
  ];


  /**
   * An event indicating that the mouse hovered over an element
   *
   * @event element.hover
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  /**
   * An event indicating that the mouse has left an element
   *
   * @event element.out
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  /**
   * An event indicating that the mouse has clicked an element
   *
   * @event element.click
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  /**
   * An event indicating that the mouse has double clicked an element
   *
   * @event element.dblclick
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  /**
   * An event indicating that the mouse has gone down on an element.
   *
   * @event element.mousedown
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  /**
   * An event indicating that the mouse has gone up on an element.
   *
   * @event element.mouseup
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  /**
   * An event indicating that the context menu action is triggered
   * via mouse or touch controls.
   *
   * @event element.contextmenu
   *
   * @type {Object}
   * @property {djs.model.Base} element
   * @property {SVGElement} gfx
   * @property {Event} originalEvent
   */

  var InteractionEventsModule$1 = {
    __init__: [ 'interactionEvents' ],
    interactionEvents: [ 'type', InteractionEvents ]
  };

  var LOW_PRIORITY$p = 500;


  /**
   * @class
   *
   * A plugin that adds an outline to shapes and connections that may be activated and styled
   * via CSS classes.
   *
   * @param {EventBus} eventBus
   * @param {Styles} styles
   * @param {ElementRegistry} elementRegistry
   */
  function Outline(eventBus, styles, elementRegistry) {

    this.offset = 6;

    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);

    var self = this;

    function createOutline(gfx, bounds) {
      var outline = create$1('rect');

      attr(outline, assign({
        x: 10,
        y: 10,
        rx: 3,
        width: 100,
        height: 100
      }, OUTLINE_STYLE));

      append(gfx, outline);

      return outline;
    }

    // A low priortity is necessary, because outlines of labels have to be updated
    // after the label bounds have been updated in the renderer.
    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$p, function(event) {
      var element = event.element,
          gfx = event.gfx;

      var outline = query('.djs-outline', gfx);

      if (!outline) {
        outline = createOutline(gfx);
      }

      self.updateShapeOutline(outline, element);
    });

    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
      var element = event.element,
          gfx = event.gfx;

      var outline = query('.djs-outline', gfx);

      if (!outline) {
        outline = createOutline(gfx);
      }

      self.updateConnectionOutline(outline, element);
    });
  }


  /**
   * Updates the outline of a shape respecting the dimension of the
   * element and an outline offset.
   *
   * @param  {SVGElement} outline
   * @param  {djs.model.Base} element
   */
  Outline.prototype.updateShapeOutline = function(outline, element) {

    attr(outline, {
      x: -this.offset,
      y: -this.offset,
      width: element.width + this.offset * 2,
      height: element.height + this.offset * 2
    });

  };


  /**
   * Updates the outline of a connection respecting the bounding box of
   * the connection and an outline offset.
   *
   * @param  {SVGElement} outline
   * @param  {djs.model.Base} element
   */
  Outline.prototype.updateConnectionOutline = function(outline, connection) {

    var bbox = getBBox(connection);

    attr(outline, {
      x: bbox.x - this.offset,
      y: bbox.y - this.offset,
      width: bbox.width + this.offset * 2,
      height: bbox.height + this.offset * 2
    });

  };


  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];

  var OutlineModule = {
    __init__: [ 'outline' ],
    outline: [ 'type', Outline ]
  };

  /**
   * A service that offers the current selection in a diagram.
   * Offers the api to control the selection, too.
   *
   * @class
   *
   * @param {EventBus} eventBus the event bus
   */
  function Selection(eventBus, canvas) {

    this._eventBus = eventBus;
    this._canvas = canvas;

    this._selectedElements = [];

    var self = this;

    eventBus.on([ 'shape.remove', 'connection.remove' ], function(e) {
      var element = e.element;
      self.deselect(element);
    });

    eventBus.on([ 'diagram.clear', 'root.set' ], function(e) {
      self.select(null);
    });
  }

  Selection.$inject = [ 'eventBus', 'canvas' ];


  Selection.prototype.deselect = function(element) {
    var selectedElements = this._selectedElements;

    var idx = selectedElements.indexOf(element);

    if (idx !== -1) {
      var oldSelection = selectedElements.slice();

      selectedElements.splice(idx, 1);

      this._eventBus.fire('selection.changed', { oldSelection: oldSelection, newSelection: selectedElements });
    }
  };


  Selection.prototype.get = function() {
    return this._selectedElements;
  };

  Selection.prototype.isSelected = function(element) {
    return this._selectedElements.indexOf(element) !== -1;
  };


  /**
   * This method selects one or more elements on the diagram.
   *
   * By passing an additional add parameter you can decide whether or not the element(s)
   * should be added to the already existing selection or not.
   *
   * @method Selection#select
   *
   * @param  {Object|Object[]} elements element or array of elements to be selected
   * @param  {boolean} [add] whether the element(s) should be appended to the current selection, defaults to false
   */
  Selection.prototype.select = function(elements, add) {
    var selectedElements = this._selectedElements,
        oldSelection = selectedElements.slice();

    if (!isArray$3(elements)) {
      elements = elements ? [ elements ] : [];
    }

    var canvas = this._canvas;

    var rootElement = canvas.getRootElement();

    elements = elements.filter(function(element) {
      var elementRoot = canvas.findRoot(element);

      return rootElement === elementRoot;
    });

    // selection may be cleared by passing an empty array or null
    // to the method
    if (add) {
      forEach$1(elements, function(element) {
        if (selectedElements.indexOf(element) !== -1) {

          // already selected
          return;
        } else {
          selectedElements.push(element);
        }
      });
    } else {
      this._selectedElements = selectedElements = elements.slice();
    }

    this._eventBus.fire('selection.changed', { oldSelection: oldSelection, newSelection: selectedElements });
  };

  var MARKER_HOVER = 'hover',
      MARKER_SELECTED = 'selected';

  var SELECTION_OUTLINE_PADDING = 6;


  /**
   * A plugin that adds a visible selection UI to shapes and connections
   * by appending the <code>hover</code> and <code>selected</code> classes to them.
   *
   * @class
   *
   * Makes elements selectable, too.
   *
   * @param {Canvas} canvas
   * @param {EventBus} eventBus
   */
  function SelectionVisuals(canvas, eventBus, selection) {
    this._canvas = canvas;

    var self = this;

    this._multiSelectionBox = null;

    function addMarker(e, cls) {
      canvas.addMarker(e, cls);
    }

    function removeMarker(e, cls) {
      canvas.removeMarker(e, cls);
    }

    eventBus.on('element.hover', function(event) {
      addMarker(event.element, MARKER_HOVER);
    });

    eventBus.on('element.out', function(event) {
      removeMarker(event.element, MARKER_HOVER);
    });

    eventBus.on('selection.changed', function(event) {

      function deselect(s) {
        removeMarker(s, MARKER_SELECTED);
      }

      function select(s) {
        addMarker(s, MARKER_SELECTED);
      }

      var oldSelection = event.oldSelection,
          newSelection = event.newSelection;

      forEach$1(oldSelection, function(e) {
        if (newSelection.indexOf(e) === -1) {
          deselect(e);
        }
      });

      forEach$1(newSelection, function(e) {
        if (oldSelection.indexOf(e) === -1) {
          select(e);
        }
      });

      self._updateSelectionOutline(newSelection);
    });


    eventBus.on('element.changed', function(event) {
      if (selection.isSelected(event.element)) {
        self._updateSelectionOutline(selection.get());
      }
    });
  }

  SelectionVisuals.$inject = [
    'canvas',
    'eventBus',
    'selection'
  ];

  SelectionVisuals.prototype._updateSelectionOutline = function(selection) {
    var layer = this._canvas.getLayer('selectionOutline');

    clear(layer);

    var enabled = selection.length > 1;

    var container = this._canvas.getContainer();

    classes(container)[enabled ? 'add' : 'remove']('djs-multi-select');

    if (!enabled) {
      return;
    }

    var bBox = addSelectionOutlinePadding(getBBox(selection));

    var rect = create$1('rect');

    attr(rect, assign({
      rx: 3
    }, bBox));

    classes(rect).add('djs-selection-outline');

    append(layer, rect);
  };

  // helpers //////////

  function addSelectionOutlinePadding(bBox) {
    return {
      x: bBox.x - SELECTION_OUTLINE_PADDING,
      y: bBox.y - SELECTION_OUTLINE_PADDING,
      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
    };
  }

  function SelectionBehavior(eventBus, selection, canvas, elementRegistry) {

    // Select elements on create
    eventBus.on('create.end', 500, function(event) {
      var context = event.context,
          canExecute = context.canExecute,
          elements = context.elements,
          hints = context.hints || {},
          autoSelect = hints.autoSelect;

      if (canExecute) {
        if (autoSelect === false) {

          // Select no elements
          return;
        }

        if (isArray$3(autoSelect)) {
          selection.select(autoSelect);
        } else {

          // Select all elements by default
          selection.select(elements.filter(isShown));
        }
      }
    });

    // Select connection targets on connect
    eventBus.on('connect.end', 500, function(event) {
      var context = event.context,
          connection = context.connection;

      if (connection) {
        selection.select(connection);
      }
    });

    // Select shapes on move
    eventBus.on('shape.move.end', 500, function(event) {
      var previousSelection = event.previousSelection || [];

      var shape = elementRegistry.get(event.context.shape.id);

      // Always select main shape on move
      var isSelected = find(previousSelection, function(selectedShape) {
        return shape.id === selectedShape.id;
      });

      if (!isSelected) {
        selection.select(shape);
      }
    });

    // Select elements on click
    eventBus.on('element.click', function(event) {

      if (!isPrimaryButton(event)) {
        return;
      }

      var element = event.element;

      if (element === canvas.getRootElement()) {
        element = null;
      }

      var isSelected = selection.isSelected(element),
          isMultiSelect = selection.get().length > 1;

      // Add to selection if CTRL or SHIFT pressed
      var add = hasPrimaryModifier(event) || hasSecondaryModifier(event);

      if (isSelected && isMultiSelect) {
        if (add) {

          // Deselect element
          return selection.deselect(element);
        } else {

          // Select element only
          return selection.select(element);
        }
      } else if (!isSelected) {

        // Select element
        selection.select(element, add);
      } else {

        // Deselect element
        selection.deselect(element);
      }
    });
  }

  SelectionBehavior.$inject = [
    'eventBus',
    'selection',
    'canvas',
    'elementRegistry'
  ];


  function isShown(element) {
    return !element.hidden;
  }

  var SelectionModule = {
    __init__: [ 'selectionVisuals', 'selectionBehavior' ],
    __depends__: [
      InteractionEventsModule$1,
      OutlineModule
    ],
    selection: [ 'type', Selection ],
    selectionVisuals: [ 'type', SelectionVisuals ],
    selectionBehavior: [ 'type', SelectionBehavior ]
  };

  /**
   * Util that provides unique IDs.
   *
   * @class djs.util.IdGenerator
   * @constructor
   * @memberOf djs.util
   *
   * The ids can be customized via a given prefix and contain a random value to avoid collisions.
   *
   * @param {string} prefix a prefix to prepend to generated ids (for better readability)
   */
  function IdGenerator(prefix) {

    this._counter = 0;
    this._prefix = (prefix ? prefix + '-' : '') + Math.floor(Math.random() * 1000000000) + '-';
  }

  /**
   * Returns a next unique ID.
   *
   * @method djs.util.IdGenerator#next
   *
   * @returns {string} the id
   */
  IdGenerator.prototype.next = function() {
    return this._prefix + (++this._counter);
  };

  // document wide unique overlay ids
  var ids$1 = new IdGenerator('ov');

  var LOW_PRIORITY$o = 500;


  /**
   * A service that allows users to attach overlays to diagram elements.
   *
   * The overlay service will take care of overlay positioning during updates.
   *
   * @example
   *
   * // add a pink badge on the top left of the shape
   * overlays.add(someShape, {
   *   position: {
   *     top: -5,
   *     left: -5
   *   },
   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
   * });
   *
   * // or add via shape id
   *
   * overlays.add('some-element-id', {
   *   position: {
   *     top: -5,
   *     left: -5
   *   }
   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
   * });
   *
   * // or add with optional type
   *
   * overlays.add(someShape, 'badge', {
   *   position: {
   *     top: -5,
   *     left: -5
   *   }
   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
   * });
   *
   *
   * // remove an overlay
   *
   * var id = overlays.add(...);
   * overlays.remove(id);
   *
   *
   * You may configure overlay defaults during tool by providing a `config` module
   * with `overlays.defaults` as an entry:
   *
   * {
   *   overlays: {
   *     defaults: {
   *       show: {
   *         minZoom: 0.7,
   *         maxZoom: 5.0
   *       },
   *       scale: {
   *         min: 1
   *       }
   *     }
   * }
   *
   * @param {Object} config
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   * @param {ElementRegistry} elementRegistry
   */
  function Overlays(config, eventBus, canvas, elementRegistry) {

    this._eventBus = eventBus;
    this._canvas = canvas;
    this._elementRegistry = elementRegistry;

    this._ids = ids$1;

    this._overlayDefaults = assign({

      // no show constraints
      show: null,

      // always scale
      scale: true
    }, config && config.defaults);

    /**
     * Mapping overlayId -> overlay
     */
    this._overlays = {};

    /**
     * Mapping elementId -> overlay container
     */
    this._overlayContainers = [];

    // root html element for all overlays
    this._overlayRoot = createRoot$1(canvas.getContainer());

    this._init();
  }


  Overlays.$inject = [
    'config.overlays',
    'eventBus',
    'canvas',
    'elementRegistry'
  ];


  /**
   * Returns the overlay with the specified id or a list of overlays
   * for an element with a given type.
   *
   * @example
   *
   * // return the single overlay with the given id
   * overlays.get('some-id');
   *
   * // return all overlays for the shape
   * overlays.get({ element: someShape });
   *
   * // return all overlays on shape with type 'badge'
   * overlays.get({ element: someShape, type: 'badge' });
   *
   * // shape can also be specified as id
   * overlays.get({ element: 'element-id', type: 'badge' });
   *
   *
   * @param {Object} search
   * @param {string} [search.id]
   * @param {string|djs.model.Base} [search.element]
   * @param {string} [search.type]
   *
   * @return {Object|Array<Object>} the overlay(s)
   */
  Overlays.prototype.get = function(search) {

    if (isString(search)) {
      search = { id: search };
    }

    if (isString(search.element)) {
      search.element = this._elementRegistry.get(search.element);
    }

    if (search.element) {
      var container = this._getOverlayContainer(search.element, true);

      // return a list of overlays when searching by element (+type)
      if (container) {
        return search.type ? filter(container.overlays, matchPattern({ type: search.type })) : container.overlays.slice();
      } else {
        return [];
      }
    } else
    if (search.type) {
      return filter(this._overlays, matchPattern({ type: search.type }));
    } else {

      // return single element when searching by id
      return search.id ? this._overlays[search.id] : null;
    }
  };

  /**
   * Adds a HTML overlay to an element.
   *
   * @param {string|djs.model.Base}   element   attach overlay to this shape
   * @param {string}                  [type]    optional type to assign to the overlay
   * @param {Object}                  overlay   the overlay configuration
   *
   * @param {string|DOMElement}       overlay.html                 html element to use as an overlay
   * @param {Object}                  [overlay.show]               show configuration
   * @param {number}                  [overlay.show.minZoom]       minimal zoom level to show the overlay
   * @param {number}                  [overlay.show.maxZoom]       maximum zoom level to show the overlay
   * @param {Object}                  overlay.position             where to attach the overlay
   * @param {number}                  [overlay.position.left]      relative to element bbox left attachment
   * @param {number}                  [overlay.position.top]       relative to element bbox top attachment
   * @param {number}                  [overlay.position.bottom]    relative to element bbox bottom attachment
   * @param {number}                  [overlay.position.right]     relative to element bbox right attachment
   * @param {boolean|Object}          [overlay.scale=true]         false to preserve the same size regardless of
   *                                                               diagram zoom
   * @param {number}                  [overlay.scale.min]
   * @param {number}                  [overlay.scale.max]
   *
   * @return {string}                 id that may be used to reference the overlay for update or removal
   */
  Overlays.prototype.add = function(element, type, overlay) {

    if (isObject(type)) {
      overlay = type;
      type = null;
    }

    if (!element.id) {
      element = this._elementRegistry.get(element);
    }

    if (!overlay.position) {
      throw new Error('must specifiy overlay position');
    }

    if (!overlay.html) {
      throw new Error('must specifiy overlay html');
    }

    if (!element) {
      throw new Error('invalid element specified');
    }

    var id = this._ids.next();

    overlay = assign({}, this._overlayDefaults, overlay, {
      id: id,
      type: type,
      element: element,
      html: overlay.html
    });

    this._addOverlay(overlay);

    return id;
  };


  /**
   * Remove an overlay with the given id or all overlays matching the given filter.
   *
   * @see Overlays#get for filter options.
   *
   * @param {string|object} [filter]
   */
  Overlays.prototype.remove = function(filter) {

    var overlays = this.get(filter) || [];

    if (!isArray$3(overlays)) {
      overlays = [ overlays ];
    }

    var self = this;

    forEach$1(overlays, function(overlay) {

      var container = self._getOverlayContainer(overlay.element, true);

      if (overlay) {
        remove$2(overlay.html);
        remove$2(overlay.htmlContainer);

        delete overlay.htmlContainer;
        delete overlay.element;

        delete self._overlays[overlay.id];
      }

      if (container) {
        var idx = container.overlays.indexOf(overlay);
        if (idx !== -1) {
          container.overlays.splice(idx, 1);
        }
      }
    });

  };


  Overlays.prototype.show = function() {
    setVisible$1(this._overlayRoot);
  };


  Overlays.prototype.hide = function() {
    setVisible$1(this._overlayRoot, false);
  };

  Overlays.prototype.clear = function() {
    this._overlays = {};

    this._overlayContainers = [];

    clear$1(this._overlayRoot);
  };

  Overlays.prototype._updateOverlayContainer = function(container) {
    var element = container.element,
        html = container.html;

    // update container left,top according to the elements x,y coordinates
    // this ensures we can attach child elements relative to this container

    var x = element.x,
        y = element.y;

    if (element.waypoints) {
      var bbox = getBBox(element);
      x = bbox.x;
      y = bbox.y;
    }

    setPosition$1(html, x, y);

    attr$1(container.html, 'data-container-id', element.id);
  };


  Overlays.prototype._updateOverlay = function(overlay) {

    var position = overlay.position,
        htmlContainer = overlay.htmlContainer,
        element = overlay.element;

    // update overlay html relative to shape because
    // it is already positioned on the element

    // update relative
    var left = position.left,
        top = position.top;

    if (position.right !== undefined) {

      var width;

      if (element.waypoints) {
        width = getBBox(element).width;
      } else {
        width = element.width;
      }

      left = position.right * -1 + width;
    }

    if (position.bottom !== undefined) {

      var height;

      if (element.waypoints) {
        height = getBBox(element).height;
      } else {
        height = element.height;
      }

      top = position.bottom * -1 + height;
    }

    setPosition$1(htmlContainer, left || 0, top || 0);
    this._updateOverlayVisibilty(overlay, this._canvas.viewbox());
  };


  Overlays.prototype._createOverlayContainer = function(element) {
    var html = domify('<div class="djs-overlays" />');
    assign$1(html, { position: 'absolute' });

    this._overlayRoot.appendChild(html);

    var container = {
      html: html,
      element: element,
      overlays: []
    };

    this._updateOverlayContainer(container);

    this._overlayContainers.push(container);

    return container;
  };


  Overlays.prototype._updateRoot = function(viewbox) {
    var scale = viewbox.scale || 1;

    var matrix = 'matrix(' +
    [
      scale,
      0,
      0,
      scale,
      -1 * viewbox.x * scale,
      -1 * viewbox.y * scale
    ].join(',') +
    ')';

    setTransform$1(this._overlayRoot, matrix);
  };


  Overlays.prototype._getOverlayContainer = function(element, raw) {
    var container = find(this._overlayContainers, function(c) {
      return c.element === element;
    });


    if (!container && !raw) {
      return this._createOverlayContainer(element);
    }

    return container;
  };


  Overlays.prototype._addOverlay = function(overlay) {

    var id = overlay.id,
        element = overlay.element,
        html = overlay.html,
        htmlContainer,
        overlayContainer;

    // unwrap jquery (for those who need it)
    if (html.get && html.constructor.prototype.jquery) {
      html = html.get(0);
    }

    // create proper html elements from
    // overlay HTML strings
    if (isString(html)) {
      html = domify(html);
    }

    overlayContainer = this._getOverlayContainer(element);

    htmlContainer = domify('<div class="djs-overlay" data-overlay-id="' + id + '">');
    assign$1(htmlContainer, { position: 'absolute' });

    htmlContainer.appendChild(html);

    if (overlay.type) {
      classes$1(htmlContainer).add('djs-overlay-' + overlay.type);
    }

    var elementRoot = this._canvas.findRoot(element);
    var activeRoot = this._canvas.getRootElement();

    setVisible$1(htmlContainer, elementRoot === activeRoot);

    overlay.htmlContainer = htmlContainer;

    overlayContainer.overlays.push(overlay);
    overlayContainer.html.appendChild(htmlContainer);

    this._overlays[id] = overlay;

    this._updateOverlay(overlay);
    this._updateOverlayVisibilty(overlay, this._canvas.viewbox());
  };


  Overlays.prototype._updateOverlayVisibilty = function(overlay, viewbox) {
    var show = overlay.show,
        rootElement = this._canvas.findRoot(overlay.element),
        minZoom = show && show.minZoom,
        maxZoom = show && show.maxZoom,
        htmlContainer = overlay.htmlContainer,
        activeRootElement = this._canvas.getRootElement(),
        visible = true;

    if (rootElement !== activeRootElement) {
      visible = false;
    } else if (show) {
      if (
        (isDefined(minZoom) && minZoom > viewbox.scale) ||
        (isDefined(maxZoom) && maxZoom < viewbox.scale)
      ) {
        visible = false;
      }
    }

    setVisible$1(htmlContainer, visible);

    this._updateOverlayScale(overlay, viewbox);
  };


  Overlays.prototype._updateOverlayScale = function(overlay, viewbox) {
    var shouldScale = overlay.scale,
        minScale,
        maxScale,
        htmlContainer = overlay.htmlContainer;

    var scale, transform = '';

    if (shouldScale !== true) {

      if (shouldScale === false) {
        minScale = 1;
        maxScale = 1;
      } else {
        minScale = shouldScale.min;
        maxScale = shouldScale.max;
      }

      if (isDefined(minScale) && viewbox.scale < minScale) {
        scale = (1 / viewbox.scale || 1) * minScale;
      }

      if (isDefined(maxScale) && viewbox.scale > maxScale) {
        scale = (1 / viewbox.scale || 1) * maxScale;
      }
    }

    if (isDefined(scale)) {
      transform = 'scale(' + scale + ',' + scale + ')';
    }

    setTransform$1(htmlContainer, transform);
  };


  Overlays.prototype._updateOverlaysVisibilty = function(viewbox) {

    var self = this;

    forEach$1(this._overlays, function(overlay) {
      self._updateOverlayVisibilty(overlay, viewbox);
    });
  };


  Overlays.prototype._init = function() {

    var eventBus = this._eventBus;

    var self = this;


    // scroll/zoom integration

    function updateViewbox(viewbox) {
      self._updateRoot(viewbox);
      self._updateOverlaysVisibilty(viewbox);

      self.show();
    }

    eventBus.on('canvas.viewbox.changing', function(event) {
      self.hide();
    });

    eventBus.on('canvas.viewbox.changed', function(event) {
      updateViewbox(event.viewbox);
    });


    // remove integration

    eventBus.on([ 'shape.remove', 'connection.remove' ], function(e) {
      var element = e.element;
      var overlays = self.get({ element: element });

      forEach$1(overlays, function(o) {
        self.remove(o.id);
      });

      var container = self._getOverlayContainer(element);

      if (container) {
        remove$2(container.html);
        var i = self._overlayContainers.indexOf(container);
        if (i !== -1) {
          self._overlayContainers.splice(i, 1);
        }
      }
    });


    // move integration

    eventBus.on('element.changed', LOW_PRIORITY$o, function(e) {
      var element = e.element;

      var container = self._getOverlayContainer(element, true);

      if (container) {
        forEach$1(container.overlays, function(overlay) {
          self._updateOverlay(overlay);
        });

        self._updateOverlayContainer(container);
      }
    });


    // marker integration, simply add them on the overlays as classes, too.

    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);
      }
    });


    eventBus.on('root.set', function() {
      self._updateOverlaysVisibilty(self._canvas.viewbox());
    });

    // clear overlays with diagram

    eventBus.on('diagram.clear', this.clear, this);
  };



  // helpers /////////////////////////////

  function createRoot$1(parentNode) {
    var root = domify(
      '<div class="djs-overlay-container" />'
    );

    assign$1(root, {
      position: 'absolute',
      width: 0,
      height: 0
    });

    parentNode.insertBefore(root, parentNode.firstChild);

    return root;
  }

  function setPosition$1(el, x, y) {
    assign$1(el, { left: x + 'px', top: y + 'px' });
  }

  /**
   * Set element visible
   *
   * @param {DOMElement} el
   * @param {boolean} [visible=true]
   */
  function setVisible$1(el, visible) {
    el.style.display = visible === false ? 'none' : '';
  }

  function setTransform$1(el, transform) {

    el.style['transform-origin'] = 'top left';

    [ '', '-ms-', '-webkit-' ].forEach(function(prefix) {
      el.style[prefix + 'transform'] = transform;
    });
  }

  var OverlaysModule = {
    __init__: [ 'overlays' ],
    overlays: [ 'type', Overlays ]
  };

  /**
   * Adds change support to the diagram, including
   *
   * <ul>
   *   <li>redrawing shapes and connections on change</li>
   * </ul>
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   * @param {ElementRegistry} elementRegistry
   * @param {GraphicsFactory} graphicsFactory
   */
  function ChangeSupport(
      eventBus, canvas, elementRegistry,
      graphicsFactory) {


    // redraw shapes / connections on change

    eventBus.on('element.changed', function(event) {

      var element = event.element;

      // element might have been deleted and replaced by new element with same ID
      // thus check for parent of element except for root element
      if (element.parent || element === canvas.getRootElement()) {
        event.gfx = elementRegistry.getGraphics(element);
      }

      // shape + gfx may have been deleted
      if (!event.gfx) {
        return;
      }

      eventBus.fire(getType(element) + '.changed', event);
    });

    eventBus.on('elements.changed', function(event) {

      var elements = event.elements;

      elements.forEach(function(e) {
        eventBus.fire('element.changed', { element: e });
      });

      graphicsFactory.updateContainments(elements);
    });

    eventBus.on('shape.changed', function(event) {
      graphicsFactory.update('shape', event.element, event.gfx);
    });

    eventBus.on('connection.changed', function(event) {
      graphicsFactory.update('connection', event.element, event.gfx);
    });
  }

  ChangeSupport.$inject = [
    'eventBus',
    'canvas',
    'elementRegistry',
    'graphicsFactory'
  ];

  var ChangeSupportModule = {
    __init__: [ 'changeSupport' ],
    changeSupport: [ 'type', ChangeSupport ]
  };

  var DEFAULT_PRIORITY$4 = 1000;

  /**
   * A utility that can be used to plug-in into the command execution for
   * extension and/or validation.
   *
   * @param {EventBus} eventBus
   *
   * @example
   *
   * import inherits from 'inherits-browser';
   *
   * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
   *
   * function CommandLogger(eventBus) {
   *   CommandInterceptor.call(this, eventBus);
   *
   *   this.preExecute(function(event) {
   *     console.log('command pre-execute', event);
   *   });
   * }
   *
   * inherits(CommandLogger, CommandInterceptor);
   *
   */
  function CommandInterceptor(eventBus) {
    this._eventBus = eventBus;
  }

  CommandInterceptor.$inject = [ 'eventBus' ];

  function unwrapEvent(fn, that) {
    return function(event) {
      return fn.call(that || null, event.context, event.command, event);
    };
  }

  /**
   * Register an interceptor for a command execution
   *
   * @param {string|Array<string>} [events] list of commands to register on
   * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
   * @param {number} [priority] the priority on which to hook into the execution
   * @param {Function} handlerFn interceptor to be invoked with (event)
   * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
   *                          listener instead
   * @param {Object} [that] Pass context (`this`) to the handler function
   */
  CommandInterceptor.prototype.on = function(events, hook, priority, handlerFn, unwrap, that) {

    if (isFunction(hook) || isNumber(hook)) {
      that = unwrap;
      unwrap = handlerFn;
      handlerFn = priority;
      priority = hook;
      hook = null;
    }

    if (isFunction(priority)) {
      that = unwrap;
      unwrap = handlerFn;
      handlerFn = priority;
      priority = DEFAULT_PRIORITY$4;
    }

    if (isObject(unwrap)) {
      that = unwrap;
      unwrap = false;
    }

    if (!isFunction(handlerFn)) {
      throw new Error('handlerFn must be a function');
    }

    if (!isArray$3(events)) {
      events = [ events ];
    }

    var eventBus = this._eventBus;

    forEach$1(events, function(event) {

      // concat commandStack(.event)?(.hook)?
      var fullEvent = [ 'commandStack', event, hook ].filter(function(e) { return e; }).join('.');

      eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
    });
  };


  var hooks = [
    'canExecute',
    'preExecute',
    'preExecuted',
    'execute',
    'executed',
    'postExecute',
    'postExecuted',
    'revert',
    'reverted'
  ];

  /*
   * Install hook shortcuts
   *
   * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
   * which will in term forward to CommandInterceptor#on.
   */
  forEach$1(hooks, function(hook) {

    /**
     * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
     *
     * A named hook for plugging into the command execution
     *
     * @param {string|Array<string>} [events] list of commands to register on
     * @param {number} [priority] the priority on which to hook into the execution
     * @param {Function} handlerFn interceptor to be invoked with (event)
     * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
     *                          listener instead
     * @param {Object} [that] Pass context (`this`) to the handler function
     */
    CommandInterceptor.prototype[hook] = function(events, priority, handlerFn, unwrap, that) {

      if (isFunction(events) || isNumber(events)) {
        that = unwrap;
        unwrap = handlerFn;
        handlerFn = priority;
        priority = events;
        events = null;
      }

      this.on(events, hook, priority, handlerFn, unwrap, that);
    };
  });

  /**
   * A modeling behavior that ensures we set the correct root element
   * as we undo and redo commands.
   *
   * @param {Canvas} canvas
   * @param {didi.Injector} injector
   */
  function RootElementsBehavior(canvas, injector) {

    injector.invoke(CommandInterceptor, this);

    this.executed(function(event) {
      var context = event.context;

      if (context.rootElement) {
        canvas.setRootElement(context.rootElement);
      } else {
        context.rootElement = canvas.getRootElement();
      }
    });

    this.revert(function(event) {
      var context = event.context;

      if (context.rootElement) {
        canvas.setRootElement(context.rootElement);
      }
    });
  }

  e(RootElementsBehavior, CommandInterceptor);

  RootElementsBehavior.$inject = [ 'canvas', 'injector' ];

  var RootElementsModule = {
    __init__: [ 'rootElementsBehavior' ],
    rootElementsBehavior: [ 'type', RootElementsBehavior ]
  };

  var css_escape = {exports: {}};

  /*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */

  (function (module, exports) {
  (function(root, factory) {
  		// https://github.com/umdjs/umd/blob/master/returnExports.js
  		{
  			// For Node.js.
  			module.exports = factory(root);
  		}
  	}(typeof commonjsGlobal != 'undefined' ? commonjsGlobal : commonjsGlobal, function(root) {

  		if (root.CSS && root.CSS.escape) {
  			return root.CSS.escape;
  		}

  		// https://drafts.csswg.org/cssom/#serialize-an-identifier
  		var cssEscape = function(value) {
  			if (arguments.length == 0) {
  				throw new TypeError('`CSS.escape` requires an argument.');
  			}
  			var string = String(value);
  			var length = string.length;
  			var index = -1;
  			var codeUnit;
  			var result = '';
  			var firstCodeUnit = string.charCodeAt(0);
  			while (++index < length) {
  				codeUnit = string.charCodeAt(index);
  				// Note: there’s no need to special-case astral symbols, surrogate
  				// pairs, or lone surrogates.

  				// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
  				// (U+FFFD).
  				if (codeUnit == 0x0000) {
  					result += '\uFFFD';
  					continue;
  				}

  				if (
  					// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
  					// U+007F, […]
  					(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
  					// If the character is the first character and is in the range [0-9]
  					// (U+0030 to U+0039), […]
  					(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
  					// If the character is the second character and is in the range [0-9]
  					// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
  					(
  						index == 1 &&
  						codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
  						firstCodeUnit == 0x002D
  					)
  				) {
  					// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
  					result += '\\' + codeUnit.toString(16) + ' ';
  					continue;
  				}

  				if (
  					// If the character is the first character and is a `-` (U+002D), and
  					// there is no second character, […]
  					index == 0 &&
  					length == 1 &&
  					codeUnit == 0x002D
  				) {
  					result += '\\' + string.charAt(index);
  					continue;
  				}

  				// If the character is not handled by one of the above rules and is
  				// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
  				// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
  				// U+005A), or [a-z] (U+0061 to U+007A), […]
  				if (
  					codeUnit >= 0x0080 ||
  					codeUnit == 0x002D ||
  					codeUnit == 0x005F ||
  					codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
  					codeUnit >= 0x0041 && codeUnit <= 0x005A ||
  					codeUnit >= 0x0061 && codeUnit <= 0x007A
  				) {
  					// the character itself
  					result += string.charAt(index);
  					continue;
  				}

  				// Otherwise, the escaped character.
  				// https://drafts.csswg.org/cssom/#escape-a-character
  				result += '\\' + string.charAt(index);

  			}
  			return result;
  		};

  		if (!root.CSS) {
  			root.CSS = {};
  		}

  		root.CSS.escape = cssEscape;
  		return cssEscape;

  	}));
  } (css_escape));

  var cssEscape = css_escape.exports;

  var HTML_ESCAPE_MAP = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    '\'': '&#39;'
  };

  function escapeHTML(str) {
    str = '' + str;

    return str && str.replace(/[&<>"']/g, function(match) {
      return HTML_ESCAPE_MAP[match];
    });
  }

  var planeSuffix = '_plane';

  /**
   * Get primary shape ID for a plane.
   *
   * @param  {djs.model.Base|ModdleElement} element
   *
   * @returns {String}
   */
  function getShapeIdFromPlane(element) {
    var id = element.id;

    return removePlaneSuffix(id);
  }

  /**
   * Get plane ID for a primary shape.
   *
   * @param  {djs.model.Base|ModdleElement} element
   *
   * @returns {String}
   */
  function getPlaneIdFromShape(element) {
    var id = element.id;

    if (is$1(element, 'bpmn:SubProcess')) {
      return addPlaneSuffix(id);
    }

    return id;
  }

  /**
   * Get plane ID for primary shape ID.
   *
   * @param {String} id
   *
   * @returns {String}
   */
  function toPlaneId(id) {
    return addPlaneSuffix(id);
  }

  /**
   * Check wether element is plane.
   *
   * @param  {djs.model.Base|ModdleElement} element
   *
   * @returns {Boolean}
   */
  function isPlane(element) {
    var di = getDi(element);

    return is$1(di, 'bpmndi:BPMNPlane');
  }

  function addPlaneSuffix(id) {
    return id + planeSuffix;
  }

  function removePlaneSuffix(id) {
    return id.replace(new RegExp(planeSuffix + '$'), '');
  }

  var OPEN_CLASS = 'bjs-breadcrumbs-shown';


  /**
   * Adds overlays that allow switching planes on collapsed subprocesses.
   *
   * @param {eventBus} eventBus
   * @param {elementRegistry} elementRegistry
   * @param {overlays} overlays
   * @param {canvas} canvas
   */
  function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
    var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
    var container = canvas.getContainer();
    var containerClasses = classes$1(container);
    container.appendChild(breadcrumbs);

    var boParents = [];

    // update breadcrumbs if name or ID of the primary shape changes
    eventBus.on('element.changed', function(e) {
      var shape = e.element,
          bo = getBusinessObject(shape);

      var isPresent = find(boParents, function(el) {
        return el === bo;
      });

      if (!isPresent) {
        return;
      }

      updateBreadcrumbs();
    });

    /**
     * Updates the displayed breadcrumbs. If no element is provided, only the
     * labels are updated.
     *
     * @param {djs.model.Base} [element]
     */
    function updateBreadcrumbs(element) {
      if (element) {
        boParents = getBoParentChain(element);
      }

      var path = boParents.map(function(parent) {
        var title = escapeHTML(parent.name || parent.id);
        var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');

        var parentPlane = canvas.findRoot(getPlaneIdFromShape(parent)) || canvas.findRoot(parent.id);

        // when the root is a collaboration, the process does not have a corresponding
        // element in the elementRegisty. Instead, we search for the corresponding participant
        if (!parentPlane && is$1(parent, 'bpmn:Process')) {
          var participant = elementRegistry.find(function(element) {
            var bo = getBusinessObject(element);
            return bo && bo.processRef && bo.processRef === parent;
          });

          parentPlane = canvas.findRoot(participant.id);
        }

        link.addEventListener('click', function() {
          canvas.setRootElement(parentPlane);
        });

        return link;
      });

      breadcrumbs.innerHTML = '';

      // show breadcrumbs and expose state to .djs-container
      var visible = path.length > 1;
      containerClasses.toggle(OPEN_CLASS, visible);

      path.forEach(function(el) {
        breadcrumbs.appendChild(el);
      });
    }

    eventBus.on('root.set', function(event) {
      updateBreadcrumbs(event.element);
    });

  }

  DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];


  // helpers //////////

  /**
   * Returns the parents for the element using the business object chain,
   * starting with the root element.
   *
   * @param {djs.model.Shape} child
   *
   * @returns {Array<djs.model.Shape>} parents
   */
  function getBoParentChain(child) {
    var bo = getBusinessObject(child);

    var parents = [];

    for (var element = bo; element; element = element.$parent) {
      if (is$1(element, 'bpmn:SubProcess') || is$1(element, 'bpmn:Process')) {
        parents.push(element);
      }
    }

    return parents.reverse();
  }

  /**
   * Move collapsed subprocesses into view when drilling down.
   *
   * Zoom and scroll are saved in a session.
   *
   * @param {eventBus} eventBus
   * @param {canvas} canvas
   */
  function DrilldownCentering(eventBus, canvas) {

    var currentRoot = null;
    var positionMap = new Map();

    eventBus.on('root.set', function(event) {
      var newRoot = event.element;
      var currentViewbox = canvas.viewbox();
      var storedViewbox = positionMap.get(newRoot);

      positionMap.set(currentRoot, {
        x: currentViewbox.x,
        y: currentViewbox.y,
        zoom: currentViewbox.scale
      });

      currentRoot = newRoot;

      // current root was replaced with a collaboration, we don't update the viewbox
      if (is$1(newRoot, 'bpmn:Collaboration') && !storedViewbox) {
        return;
      }

      storedViewbox = storedViewbox || { x: 0, y: 0, zoom: 1 };

      var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
          dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;

      if (dx !== 0 || dy !== 0) {
        canvas.scroll({
          dx: dx,
          dy: dy
        });
      }

      if (storedViewbox.zoom !== currentViewbox.scale) {
        canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
      }
    });

    eventBus.on('diagram.clear', function() {
      positionMap.clear();
      currentRoot = null;
    });

  }

  DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];


  /**
   * ES5 Map implementation. Works.
   */
  function Map() {

    this._entries = [];

    this.set = function(key, value) {

      var found = false;

      for (var k in this._entries) {
        if (this._entries[k][0] === key) {
          this._entries[k][1] = value;

          found = true;

          break;
        }
      }

      if (!found) {
        this._entries.push([ key, value ]);
      }
    };

    this.get = function(key) {

      for (var k in this._entries) {
        if (this._entries[k][0] === key) {
          return this._entries[k][1];
        }
      }

      return null;
    };

    this.clear = function() {
      this._entries.length = 0;
    };

    this.remove = function(key) {

      var idx = -1;

      for (var k in this._entries) {
        if (this._entries[k][0] === key) {
          idx = k;

          break;
        }
      }

      if (idx !== -1) {
        this._entries.splice(idx, 1);
      }
    };
  }

  var DEFAULT_POSITION$1 = {
    x: 180,
    y: 160
  };

  /**
   * Hook into `import.render.start` and create new planes for diagrams with
   * collapsed subprocesses and all dis on the same plane.
   *
   * @param {eventBus} eventBus
   * @param {moddle} moddle
   */
  function SubprocessCompatibility(eventBus, moddle) {
    this._eventBus = eventBus;
    this._moddle = moddle;

    var self = this;

    eventBus.on('import.render.start', 1500, function(e, context) {
      self.handleImport(context.definitions);
    });
  }

  SubprocessCompatibility.prototype.handleImport = function(definitions) {
    if (!definitions.diagrams) {
      return;
    }

    var self = this;
    this._definitions = definitions;
    this._processToDiagramMap = {};

    definitions.diagrams.forEach(function(diagram) {
      if (!diagram.plane || !diagram.plane.bpmnElement) {
        return;
      }

      self._processToDiagramMap[diagram.plane.bpmnElement.id] = diagram;
    });

    var newDiagrams = [];
    definitions.diagrams.forEach(function(diagram) {
      var createdDiagrams = self.createNewDiagrams(diagram.plane);
      Array.prototype.push.apply(newDiagrams, createdDiagrams);
    });

    newDiagrams.forEach(function(diagram) {
      self.movePlaneElementsToOrigin(diagram.plane);
    });
  };


  /**
   * Moves all DI elements from collapsed subprocesses to a new plane.
   *
   * @param {Object} plane
   * @return {Array} new diagrams created for the collapsed subprocesses
   */
  SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
    var self = this;

    var collapsedElements = [];
    var elementsToMove = [];

    plane.get('planeElement').forEach(function(diElement) {
      var bo = diElement.bpmnElement;

      if (!bo) {
        return;
      }

      var parent = bo.$parent;

      if (is$1(bo, 'bpmn:SubProcess') && !diElement.isExpanded) {
        collapsedElements.push(bo);
      }

      if (shouldMoveToPlane(bo, plane)) {

        // don't change the array while we iterate over it
        elementsToMove.push({ diElement: diElement, parent: parent });
      }
    });

    var newDiagrams = [];

    // create new planes for all collapsed subprocesses, even when they are empty
    collapsedElements.forEach(function(element) {
      if (!self._processToDiagramMap[element.id]) {
        var diagram = self.createDiagram(element);
        self._processToDiagramMap[element.id] = diagram;
        newDiagrams.push(diagram);
      }
    });

    elementsToMove.forEach(function(element) {
      var diElement = element.diElement;
      var parent = element.parent;

      // parent is expanded, get nearest collapsed parent
      while (parent && collapsedElements.indexOf(parent) === -1) {
        parent = parent.$parent;
      }

      // false positive, all parents are expanded
      if (!parent) {
        return;
      }

      var diagram = self._processToDiagramMap[parent.id];
      self.moveToDiPlane(diElement, diagram.plane);
    });

    return newDiagrams;
  };

  SubprocessCompatibility.prototype.movePlaneElementsToOrigin = function(plane) {
    var elements = plane.get('planeElement');

    // get bounding box of all elements
    var planeBounds = getPlaneBounds(plane);

    var offset = {
      x: planeBounds.x - DEFAULT_POSITION$1.x,
      y: planeBounds.y - DEFAULT_POSITION$1.y
    };

    elements.forEach(function(diElement) {
      if (diElement.waypoint) {
        diElement.waypoint.forEach(function(waypoint) {
          waypoint.x = waypoint.x - offset.x;
          waypoint.y = waypoint.y - offset.y;
        });
      } else if (diElement.bounds) {
        diElement.bounds.x = diElement.bounds.x - offset.x;
        diElement.bounds.y = diElement.bounds.y - offset.y;
      }
    });
  };


  SubprocessCompatibility.prototype.moveToDiPlane = function(diElement, newPlane) {
    var containingDiagram = findRootDiagram(diElement);

    // remove DI from old Plane and add it to the new one
    var parentPlaneElement = containingDiagram.plane.get('planeElement');
    parentPlaneElement.splice(parentPlaneElement.indexOf(diElement), 1);
    newPlane.get('planeElement').push(diElement);
  };


  SubprocessCompatibility.prototype.createDiagram = function(bo) {
    var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
    var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
      plane: plane
    });
    plane.$parent = diagram;
    plane.bpmnElement = bo;
    diagram.$parent = this._definitions;
    this._definitions.diagrams.push(diagram);
    return diagram;
  };

  SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];


  // helpers //////////////////////////

  function findRootDiagram(element) {
    if (is$1(element, 'bpmndi:BPMNDiagram')) {
      return element;
    } else {
      return findRootDiagram(element.$parent);
    }
  }

  function getPlaneBounds(plane) {
    var planeTrbl = {
      top: Infinity,
      right: -Infinity,
      bottom: -Infinity,
      left: Infinity
    };

    plane.planeElement.forEach(function(element) {
      if (!element.bounds) {
        return;
      }

      var trbl = asTRBL(element.bounds);

      planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
      planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
    });

    return asBounds(planeTrbl);
  }

  function shouldMoveToPlane(bo, plane) {
    var parent = bo.$parent;

    // don't move elements that are already on the plane
    if (!is$1(parent, 'bpmn:SubProcess') || parent === plane.bpmnElement) {
      return false;
    }

    // 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' ])) {
      return false;
    }

    return true;
  }

  var LOW_PRIORITY$n = 250;
  var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';

  var EMPTY_MARKER = 'bjs-drilldown-empty';

  function DrilldownOverlayBehavior(
      canvas, eventBus, elementRegistry, overlays
  ) {
    CommandInterceptor.call(this, eventBus);

    this._canvas = canvas;
    this._eventBus = eventBus;
    this._elementRegistry = elementRegistry;
    this._overlays = overlays;

    var self = this;

    this.executed('shape.toggleCollapse', LOW_PRIORITY$n, function(context) {
      var shape = context.shape;

      // Add overlay to the collapsed shape
      if (self.canDrillDown(shape)) {
        self.addOverlay(shape);
      } else {
        self.removeOverlay(shape);
      }
    }, true);


    this.reverted('shape.toggleCollapse', LOW_PRIORITY$n, function(context) {
      var shape = context.shape;

      // Add overlay to the collapsed shape
      if (self.canDrillDown(shape)) {
        self.addOverlay(shape);
      } else {
        self.removeOverlay(shape);
      }
    }, true);


    this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$n,
      function(context) {
        var oldParent = context.oldParent,
            newParent = context.newParent || context.parent,
            shape = context.shape;

        // Add overlay to the collapsed shape
        if (self.canDrillDown(shape)) {
          self.addOverlay(shape);
        }

        self.updateDrilldownOverlay(oldParent);
        self.updateDrilldownOverlay(newParent);
        self.updateDrilldownOverlay(shape);
      }, true);


    this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY$n,
      function(context) {
        var oldParent = context.oldParent,
            newParent = context.newParent || context.parent,
            shape = context.shape;

        // Add overlay to the collapsed shape
        if (self.canDrillDown(shape)) {
          self.addOverlay(shape);
        }

        self.updateDrilldownOverlay(oldParent);
        self.updateDrilldownOverlay(newParent);
        self.updateDrilldownOverlay(shape);
      }, true);


    eventBus.on('import.render.complete', function() {
      elementRegistry.filter(function(e) {
        return self.canDrillDown(e);
      }).map(function(el) {
        self.addOverlay(el);
      });
    });

  }

  e(DrilldownOverlayBehavior, CommandInterceptor);

  DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
    var canvas = this._canvas;

    if (!shape) {
      return;
    }

    var root = canvas.findRoot(shape);
    if (root) {
      this.updateOverlayVisibility(root);
    }
  };


  DrilldownOverlayBehavior.prototype.canDrillDown = function(element) {
    var canvas = this._canvas;
    return is$1(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));
  };

  /**
   * Updates visibility of the drilldown overlay. If the plane has no elements,
   * the drilldown will be only shown when the element is selected.
   *
   * @param {djs.model.Shape|djs.model.Root} element collapsed shape or root element
   */
  DrilldownOverlayBehavior.prototype.updateOverlayVisibility = function(element) {
    var overlays = this._overlays;

    var bo = element.businessObject;

    var overlay = overlays.get({ element: bo.id, type: 'drilldown' })[0];

    if (!overlay) {
      return;
    }

    var hasContent = bo && bo.flowElements && bo.flowElements.length;
    classes$1(overlay.html).toggle(EMPTY_MARKER, !hasContent);
  };

  /**
   * Attaches a drilldown button to the given element. We assume that the plane has
   * the same id as the element.
   *
   * @param {djs.model.Shape} element collapsed shape
   */
  DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
    var canvas = this._canvas;
    var overlays = this._overlays;

    var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
    if (existingOverlays.length) {
      this.removeOverlay(element);
    }

    var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');

    button.addEventListener('click', function() {
      canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
    });

    overlays.add(element, 'drilldown', {
      position: {
        bottom: -7,
        right: -8
      },
      html: button
    });

    this.updateOverlayVisibility(element);
  };

  DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
    var overlays = this._overlays;

    overlays.remove({
      element: element,
      type: 'drilldown'
    });
  };

  DrilldownOverlayBehavior.$inject = [
    'canvas',
    'eventBus',
    'elementRegistry',
    'overlays'
  ];

  var DrilldownModdule = {
    __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],
    __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility' ],
    drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],
    drilldownCentering: [ 'type', DrilldownCentering ],
    drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],
    subprocessCompatibility: [ 'type', SubprocessCompatibility ]
  };

  /**
   * A viewer for BPMN 2.0 diagrams.
   *
   * Have a look at {@link NavigatedViewer} or {@link Modeler} for bundles that include
   * additional features.
   *
   *
   * ## Extending the Viewer
   *
   * In order to extend the viewer pass extension modules to bootstrap via the
   * `additionalModules` option. An extension module is an object that exposes
   * named services.
   *
   * The following example depicts the integration of a simple
   * logging component that integrates with interaction events:
   *
   *
   * ```javascript
   *
   * // logging component
   * function InteractionLogger(eventBus) {
   *   eventBus.on('element.hover', function(event) {
   *     console.log()
   *   })
   * }
   *
   * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
   *
   * // extension module
   * var extensionModule = {
   *   __init__: [ 'interactionLogger' ],
   *   interactionLogger: [ 'type', InteractionLogger ]
   * };
   *
   * // extend the viewer
   * var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });
   * bpmnViewer.importXML(...);
   * ```
   *
   * @param {Object} [options] configuration options to pass to the viewer
   * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
   * @param {string|number} [options.width] the width of the viewer
   * @param {string|number} [options.height] the height of the viewer
   * @param {Object} [options.moddleExtensions] extension packages to provide
   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
   */
  function Viewer(options) {
    BaseViewer.call(this, options);
  }

  e(Viewer, BaseViewer);

  // modules the viewer is composed of
  Viewer.prototype._modules = [
    CoreModule,
    translate,
    SelectionModule,
    OverlaysModule,
    DrilldownModdule
  ];

  // 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
   */
  function hasModifier(event) {
    return (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey);
  }

  /**
   * @param {KeyboardEvent} event
   */
  function isCmd(event) {

    // ensure we don't react to AltGr
    // (mapped to CTRL + ALT)
    if (event.altKey) {
      return false;
    }

    return event.ctrlKey || event.metaKey;
  }

  /**
   * Checks if key pressed is one of provided keys.
   *
   * @param {string|Array<string>} keys
   * @param {KeyboardEvent} event
   */
  function isKey(keys, event) {
    keys = isArray$3(keys) ? keys : [ keys ];

    return keys.indexOf(event.key) !== -1 || keys.indexOf(event.keyCode) !== -1;
  }

  /**
   * @param {KeyboardEvent} event
   */
  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',
      KEYUP_EVENT = 'keyboard.keyup';

  var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';

  var DEFAULT_PRIORITY$3 = 1000;

  /**
   * A keyboard abstraction that may be activated and
   * deactivated by users at will, consuming key events
   * and triggering diagram actions.
   *
   * For keys pressed down, keyboard fires `keyboard.keydown` event.
   * The event context contains one field which is `KeyboardEvent` event.
   *
   * The implementation fires the following key events that allow
   * other components to hook into key handling:
   *
   *  - keyboard.bind
   *  - keyboard.unbind
   *  - keyboard.init
   *  - keyboard.destroy
   *
   * All events contain one field which is node.
   *
   * A default binding for the keyboard may be specified via the
   * `keyboard.bindTo` configuration option.
   *
   * @param {Config} config
   * @param {EventBus} eventBus
   */
  function Keyboard(config, eventBus) {
    var self = this;

    this._config = config || {};
    this._eventBus = eventBus;

    this._keydownHandler = this._keydownHandler.bind(this);
    this._keyupHandler = this._keyupHandler.bind(this);

    // properly clean dom registrations
    eventBus.on('diagram.destroy', function() {
      self._fire('destroy');

      self.unbind();
    });

    eventBus.on('diagram.init', function() {
      self._fire('init');
    });

    eventBus.on('attach', function() {
      if (config && config.bindTo) {
        self.bind(config.bindTo);
      }
    });

    eventBus.on('detach', function() {
      self.unbind();
    });
  }

  Keyboard.$inject = [
    'config.keyboard',
    'eventBus'
  ];

  Keyboard.prototype._keydownHandler = function(event) {
    this._keyHandler(event, KEYDOWN_EVENT);
  };

  Keyboard.prototype._keyupHandler = function(event) {
    this._keyHandler(event, KEYUP_EVENT);
  };

  Keyboard.prototype._keyHandler = function(event, type) {
    var eventBusResult;

    if (this._isEventIgnored(event)) {
      return;
    }

    var context = {
      keyEvent: event
    };

    eventBusResult = this._eventBus.fire(type || KEYDOWN_EVENT, context);

    if (eventBusResult) {
      event.preventDefault();
    }
  };

  Keyboard.prototype._isEventIgnored = function(event) {
    return isInput(event.target) && this._isModifiedKeyIgnored(event);
  };

  Keyboard.prototype._isModifiedKeyIgnored = function(event) {
    if (!isCmd(event)) {
      return true;
    }

    var allowedModifiers = this._getAllowedModifiers(event.target);
    return allowedModifiers.indexOf(event.key) === -1;
  };

  Keyboard.prototype._getAllowedModifiers = function(element) {
    var modifierContainer = closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);

    if (!modifierContainer || (this._node && !this._node.contains(modifierContainer))) {
      return [];
    }

    return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
  };

  Keyboard.prototype.bind = function(node) {

    // make sure that the keyboard is only bound once to the DOM
    this.unbind();

    this._node = node;

    // bind key events
    componentEvent.bind(node, 'keydown', this._keydownHandler, true);
    componentEvent.bind(node, 'keyup', this._keyupHandler, true);

    this._fire('bind');
  };

  Keyboard.prototype.getBinding = function() {
    return this._node;
  };

  Keyboard.prototype.unbind = function() {
    var node = this._node;

    if (node) {
      this._fire('unbind');

      // unbind key events
      componentEvent.unbind(node, 'keydown', this._keydownHandler, true);
      componentEvent.unbind(node, 'keyup', this._keyupHandler, true);
    }

    this._node = null;
  };

  Keyboard.prototype._fire = function(event) {
    this._eventBus.fire('keyboard.' + event, { node: this._node });
  };

  /**
   * Add a listener function that is notified with `KeyboardEvent` whenever
   * the keyboard is bound and the user presses a key. If no priority is
   * provided, the default value of 1000 is used.
   *
   * @param {number} [priority]
   * @param {Function} listener
   * @param {string} type
   */
  Keyboard.prototype.addListener = function(priority, listener, type) {
    if (isFunction(priority)) {
      type = listener;
      listener = priority;
      priority = DEFAULT_PRIORITY$3;
    }

    this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
  };

  Keyboard.prototype.removeListener = function(listener, type) {
    this._eventBus.off(type || KEYDOWN_EVENT, listener);
  };

  Keyboard.prototype.hasModifier = hasModifier;
  Keyboard.prototype.isCmd = isCmd;
  Keyboard.prototype.isShift = isShift;
  Keyboard.prototype.isKey = isKey;



  // helpers ///////

  function isInput(target) {
    return target && (matchesSelector(target, 'input, textarea') || target.contentEditable === 'true');
  }

  var LOW_PRIORITY$m = 500;


  /**
   * Adds default keyboard bindings.
   *
   * This does not pull in any features will bind only actions that
   * have previously been registered against the editorActions component.
   *
   * @param {EventBus} eventBus
   * @param {Keyboard} keyboard
   */
  function KeyboardBindings(eventBus, keyboard) {

    var self = this;

    eventBus.on('editorActions.init', LOW_PRIORITY$m, function(event) {

      var editorActions = event.editorActions;

      self.registerBindings(keyboard, editorActions);
    });
  }

  KeyboardBindings.$inject = [
    'eventBus',
    'keyboard'
  ];


  /**
   * Register available keyboard bindings.
   *
   * @param {Keyboard} keyboard
   * @param {EditorActions} editorActions
   */
  KeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {

    /**
     * Add keyboard binding if respective editor action
     * is registered.
     *
     * @param {string} action name
     * @param {Function} fn that implements the key binding
     */
    function addListener(action, fn) {

      if (editorActions.isRegistered(action)) {
        keyboard.addListener(fn);
      }
    }


    // undo
    // (CTRL|CMD) + Z
    addListener('undo', function(context) {

      var event = context.keyEvent;

      if (isUndo(event)) {
        editorActions.trigger('undo');

        return true;
      }
    });

    // redo
    // CTRL + Y
    // CMD + SHIFT + Z
    addListener('redo', function(context) {

      var event = context.keyEvent;

      if (isRedo(event)) {
        editorActions.trigger('redo');

        return true;
      }
    });

    // copy
    // CTRL/CMD + C
    addListener('copy', function(context) {

      var event = context.keyEvent;

      if (isCopy(event)) {
        editorActions.trigger('copy');

        return true;
      }
    });

    // paste
    // CTRL/CMD + V
    addListener('paste', function(context) {

      var event = context.keyEvent;

      if (isPaste(event)) {
        editorActions.trigger('paste');

        return true;
      }
    });

    // zoom in one step
    // CTRL/CMD + +
    addListener('stepZoom', function(context) {

      var event = context.keyEvent;

      // quirk: it has to be triggered by `=` as well to work on international keyboard layout
      // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
      if (isKey([ '+', 'Add', '=' ], event) && isCmd(event)) {
        editorActions.trigger('stepZoom', { value: 1 });

        return true;
      }
    });

    // zoom out one step
    // CTRL + -
    addListener('stepZoom', function(context) {

      var event = context.keyEvent;

      if (isKey([ '-', 'Subtract' ], event) && isCmd(event)) {
        editorActions.trigger('stepZoom', { value: -1 });

        return true;
      }
    });

    // zoom to the default level
    // CTRL + 0
    addListener('zoom', function(context) {

      var event = context.keyEvent;

      if (isKey('0', event) && isCmd(event)) {
        editorActions.trigger('zoom', { value: 1 });

        return true;
      }
    });

    // delete selected element
    // DEL
    addListener('removeSelection', function(context) {

      var event = context.keyEvent;

      if (isKey([ 'Backspace', 'Delete', 'Del' ], event)) {
        editorActions.trigger('removeSelection');

        return true;
      }
    });
  };

  var KeyboardModule$1 = {
    __init__: [ 'keyboard', 'keyboardBindings' ],
    keyboard: [ 'type', Keyboard ],
    keyboardBindings: [ 'type', KeyboardBindings ]
  };

  var DEFAULT_CONFIG$1 = {
    moveSpeed: 50,
    moveSpeedAccelerated: 200
  };


  /**
   * A feature that allows users to move the canvas using the keyboard.
   *
   * @param {Object} config
   * @param {number} [config.moveSpeed=50]
   * @param {number} [config.moveSpeedAccelerated=200]
   * @param {Keyboard} keyboard
   * @param {Canvas} canvas
   */
  function KeyboardMove(
      config,
      keyboard,
      canvas
  ) {

    var self = this;

    this._config = assign({}, DEFAULT_CONFIG$1, config || {});

    keyboard.addListener(arrowsListener);


    function arrowsListener(context) {

      var event = context.keyEvent,
          config = self._config;

      if (!keyboard.isCmd(event)) {
        return;
      }

      if (keyboard.isKey([
        'ArrowLeft', 'Left',
        'ArrowUp', 'Up',
        'ArrowDown', 'Down',
        'ArrowRight', 'Right'
      ], event)) {

        var speed = (
          keyboard.isShift(event) ?
            config.moveSpeedAccelerated :
            config.moveSpeed
        );

        var direction;

        switch (event.key) {
        case 'ArrowLeft':
        case 'Left':
          direction = 'left';
          break;
        case 'ArrowUp':
        case 'Up':
          direction = 'up';
          break;
        case 'ArrowRight':
        case 'Right':
          direction = 'right';
          break;
        case 'ArrowDown':
        case 'Down':
          direction = 'down';
          break;
        }

        self.moveCanvas({
          speed: speed,
          direction: direction
        });

        return true;
      }
    }

    this.moveCanvas = function(opts) {

      var dx = 0,
          dy = 0,
          speed = opts.speed;

      var actualSpeed = speed / Math.min(Math.sqrt(canvas.viewbox().scale), 1);

      switch (opts.direction) {
      case 'left': // Left
        dx = actualSpeed;
        break;
      case 'up': // Up
        dy = actualSpeed;
        break;
      case 'right': // Right
        dx = -actualSpeed;
        break;
      case 'down': // Down
        dy = -actualSpeed;
        break;
      }

      canvas.scroll({
        dx: dx,
        dy: dy
      });
    };

  }


  KeyboardMove.$inject = [
    'config.keyboardMove',
    'keyboard',
    'canvas'
  ];

  var KeyboardMoveModule = {
    __depends__: [
      KeyboardModule$1
    ],
    __init__: [ 'keyboardMove' ],
    keyboardMove: [ 'type', KeyboardMove ]
  };

  var CURSOR_CLS_PATTERN = /^djs-cursor-.*$/;


  function set(mode) {
    var classes = classes$1(document.body);

    classes.removeMatching(CURSOR_CLS_PATTERN);

    if (mode) {
      classes.add('djs-cursor-' + mode);
    }
  }

  function unset() {
    set(null);
  }

  var TRAP_PRIORITY = 5000;

  /**
   * Installs a click trap that prevents a ghost click following a dragging operation.
   *
   * @return {Function} a function to immediately remove the installed trap.
   */
  function install(eventBus, eventName) {

    eventName = eventName || 'element.click';

    function trap() {
      return false;
    }

    eventBus.once(eventName, TRAP_PRIORITY, trap);

    return function() {
      eventBus.off(eventName, trap);
    };
  }

  function center(bounds) {
    return {
      x: bounds.x + (bounds.width / 2),
      y: bounds.y + (bounds.height / 2)
    };
  }


  function delta(a, b) {
    return {
      x: a.x - b.x,
      y: a.y - b.y
    };
  }

  var THRESHOLD$1 = 15;


  /**
   * Move the canvas via mouse.
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   */
  function MoveCanvas(eventBus, canvas) {

    var context;


    // listen for move on element mouse down;
    // allow others to hook into the event before us though
    // (dragging / element moving will do this)
    eventBus.on('element.mousedown', 500, function(e) {
      return handleStart(e.originalEvent);
    });


    function handleMove(event) {

      var start = context.start,
          button = context.button,
          position = toPoint(event),
          delta$1 = delta(position, start);

      if (!context.dragging && length(delta$1) > THRESHOLD$1) {
        context.dragging = true;

        if (button === 0) {
          install(eventBus);
        }

        set('grab');
      }

      if (context.dragging) {

        var lastPosition = context.last || context.start;

        delta$1 = delta(position, lastPosition);

        canvas.scroll({
          dx: delta$1.x,
          dy: delta$1.y
        });

        context.last = position;
      }

      // prevent select
      event.preventDefault();
    }


    function handleEnd(event) {
      componentEvent.unbind(document, 'mousemove', handleMove);
      componentEvent.unbind(document, 'mouseup', handleEnd);

      context = null;

      unset();
    }

    function handleStart(event) {

      // event is already handled by '.djs-draggable'
      if (closest(event.target, '.djs-draggable')) {
        return;
      }

      var button = event.button;

      // reject right mouse button or modifier key
      if (button >= 2 || event.ctrlKey || event.shiftKey || event.altKey) {
        return;
      }

      context = {
        button: button,
        start: toPoint(event)
      };

      componentEvent.bind(document, 'mousemove', handleMove);
      componentEvent.bind(document, 'mouseup', handleEnd);

      // we've handled the event
      return true;
    }

    this.isActive = function() {
      return !!context;
    };

  }


  MoveCanvas.$inject = [
    'eventBus',
    'canvas'
  ];



  // helpers ///////

  function length(point) {
    return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
  }

  var MoveCanvasModule = {
    __init__: [ 'moveCanvas' ],
    moveCanvas: [ 'type', MoveCanvas ]
  };

  /**
   * Get the logarithm of x with base 10
   * @param  {Integer} value
   */
  function log10(x) {
    return Math.log(x) / Math.log(10);
  }

  /**
   * Get step size for given range and number of steps.
   *
   * @param {Object} range
   * @param {number} range.min
   * @param {number} range.max
   */
  function getStepSize(range, steps) {

    var minLinearRange = log10(range.min),
        maxLinearRange = log10(range.max);

    var absoluteLinearRange = Math.abs(minLinearRange) + Math.abs(maxLinearRange);

    return absoluteLinearRange / steps;
  }

  function cap(range, scale) {
    return Math.max(range.min, Math.min(range.max, scale));
  }

  var sign = Math.sign || function(n) {
    return n >= 0 ? 1 : -1;
  };

  var RANGE = { min: 0.2, max: 4 },
      NUM_STEPS = 10;

  var DELTA_THRESHOLD = 0.1;

  var DEFAULT_SCALE = 0.75;

  /**
   * An implementation of zooming and scrolling within the
   * {@link Canvas} via the mouse wheel.
   *
   * Mouse wheel zooming / scrolling may be disabled using
   * the {@link toggle(enabled)} method.
   *
   * @param {Object} [config]
   * @param {boolean} [config.enabled=true] default enabled state
   * @param {number} [config.scale=.75] scroll sensivity
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   */
  function ZoomScroll(config, eventBus, canvas) {

    config = config || {};

    this._enabled = false;

    this._canvas = canvas;
    this._container = canvas._container;

    this._handleWheel = bind(this._handleWheel, this);

    this._totalDelta = 0;
    this._scale = config.scale || DEFAULT_SCALE;

    var self = this;

    eventBus.on('canvas.init', function(e) {
      self._init(config.enabled !== false);
    });
  }

  ZoomScroll.$inject = [
    'config.zoomScroll',
    'eventBus',
    'canvas'
  ];

  ZoomScroll.prototype.scroll = function scroll(delta) {
    this._canvas.scroll(delta);
  };


  ZoomScroll.prototype.reset = function reset() {
    this._canvas.zoom('fit-viewport');
  };

  /**
   * Zoom depending on delta.
   *
   * @param {number} delta
   * @param {Object} position
   */
  ZoomScroll.prototype.zoom = function zoom(delta, position) {

    // zoom with half the step size of stepZoom
    var stepSize = getStepSize(RANGE, NUM_STEPS * 2);

    // add until threshold reached
    this._totalDelta += delta;

    if (Math.abs(this._totalDelta) > DELTA_THRESHOLD) {
      this._zoom(delta, position, stepSize);

      // reset
      this._totalDelta = 0;
    }
  };


  ZoomScroll.prototype._handleWheel = function handleWheel(event) {

    // event is already handled by '.djs-scrollable'
    if (closest(event.target, '.djs-scrollable', true)) {
      return;
    }

    var element = this._container;

    event.preventDefault();

    // pinch to zoom is mapped to wheel + ctrlKey = true
    // in modern browsers (!)

    var isZoom = event.ctrlKey;

    var isHorizontalScroll = event.shiftKey;

    var factor = -1 * this._scale,
        delta;

    if (isZoom) {
      factor *= event.deltaMode === 0 ? 0.020 : 0.32;
    } else {
      factor *= event.deltaMode === 0 ? 1.0 : 16.0;
    }

    if (isZoom) {
      var elementRect = element.getBoundingClientRect();

      var offset = {
        x: event.clientX - elementRect.left,
        y: event.clientY - elementRect.top
      };

      delta = (
        Math.sqrt(
          Math.pow(event.deltaY, 2) +
          Math.pow(event.deltaX, 2)
        ) * sign(event.deltaY) * factor
      );

      // zoom in relative to diagram {x,y} coordinates
      this.zoom(delta, offset);
    } else {

      if (isHorizontalScroll) {
        delta = {
          dx: factor * event.deltaY,
          dy: 0
        };
      } else {
        delta = {
          dx: factor * event.deltaX,
          dy: factor * event.deltaY
        };
      }

      this.scroll(delta);
    }
  };

  /**
   * Zoom with fixed step size.
   *
   * @param {number} delta - Zoom delta (1 for zooming in, -1 for out).
   * @param {Object} position
   */
  ZoomScroll.prototype.stepZoom = function stepZoom(delta, position) {

    var stepSize = getStepSize(RANGE, NUM_STEPS);

    this._zoom(delta, position, stepSize);
  };


  /**
   * Zoom in/out given a step size.
   *
   * @param {number} delta
   * @param {Object} position
   * @param {number} stepSize
   */
  ZoomScroll.prototype._zoom = function(delta, position, stepSize) {
    var canvas = this._canvas;

    var direction = delta > 0 ? 1 : -1;

    var currentLinearZoomLevel = log10(canvas.zoom());

    // snap to a proximate zoom step
    var newLinearZoomLevel = Math.round(currentLinearZoomLevel / stepSize) * stepSize;

    // increase or decrease one zoom step in the given direction
    newLinearZoomLevel += stepSize * direction;

    // calculate the absolute logarithmic zoom level based on the linear zoom level
    // (e.g. 2 for an absolute x2 zoom)
    var newLogZoomLevel = Math.pow(10, newLinearZoomLevel);

    canvas.zoom(cap(RANGE, newLogZoomLevel), position);
  };


  /**
   * Toggle the zoom scroll ability via mouse wheel.
   *
   * @param  {boolean} [newEnabled] new enabled state
   */
  ZoomScroll.prototype.toggle = function toggle(newEnabled) {

    var element = this._container;
    var handleWheel = this._handleWheel;

    var oldEnabled = this._enabled;

    if (typeof newEnabled === 'undefined') {
      newEnabled = !oldEnabled;
    }

    // only react on actual changes
    if (oldEnabled !== newEnabled) {

      // add or remove wheel listener based on
      // changed enabled state
      componentEvent[newEnabled ? 'bind' : 'unbind'](element, 'wheel', handleWheel, false);
    }

    this._enabled = newEnabled;

    return newEnabled;
  };


  ZoomScroll.prototype._init = function(newEnabled) {
    this.toggle(newEnabled);
  };

  var ZoomScrollModule = {
    __init__: [ 'zoomScroll' ],
    zoomScroll: [ 'type', ZoomScroll ]
  };

  /**
   * A viewer that includes mouse navigation facilities
   *
   * @param {Object} options
   */
  function NavigatedViewer(options) {
    Viewer.call(this, options);
  }

  e(NavigatedViewer, Viewer);


  NavigatedViewer.prototype._navigationModules = [
    KeyboardMoveModule,
    MoveCanvasModule,
    ZoomScrollModule
  ];

  NavigatedViewer.prototype._modules = [].concat(
    Viewer.prototype._modules,
    NavigatedViewer.prototype._navigationModules
  );

  var hammer = {exports: {}};

  /*! Hammer.JS - v2.0.7 - 2016-04-22
   * http://hammerjs.github.io/
   *
   * Copyright (c) 2016 Jorik Tangelder;
   * Licensed under the MIT license */

  (function (module) {
  	(function(window, document, exportName, undefined$1) {

  	var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
  	var TEST_ELEMENT = document.createElement('div');

  	var TYPE_FUNCTION = 'function';

  	var round = Math.round;
  	var abs = Math.abs;
  	var now = Date.now;

  	/**
  	 * set a timeout with a given scope
  	 * @param {Function} fn
  	 * @param {Number} timeout
  	 * @param {Object} context
  	 * @returns {number}
  	 */
  	function setTimeoutContext(fn, timeout, context) {
  	    return setTimeout(bindFn(fn, context), timeout);
  	}

  	/**
  	 * if the argument is an array, we want to execute the fn on each entry
  	 * if it aint an array we don't want to do a thing.
  	 * this is used by all the methods that accept a single and array argument.
  	 * @param {*|Array} arg
  	 * @param {String} fn
  	 * @param {Object} [context]
  	 * @returns {Boolean}
  	 */
  	function invokeArrayArg(arg, fn, context) {
  	    if (Array.isArray(arg)) {
  	        each(arg, context[fn], context);
  	        return true;
  	    }
  	    return false;
  	}

  	/**
  	 * walk objects and arrays
  	 * @param {Object} obj
  	 * @param {Function} iterator
  	 * @param {Object} context
  	 */
  	function each(obj, iterator, context) {
  	    var i;

  	    if (!obj) {
  	        return;
  	    }

  	    if (obj.forEach) {
  	        obj.forEach(iterator, context);
  	    } else if (obj.length !== undefined$1) {
  	        i = 0;
  	        while (i < obj.length) {
  	            iterator.call(context, obj[i], i, obj);
  	            i++;
  	        }
  	    } else {
  	        for (i in obj) {
  	            obj.hasOwnProperty(i) && iterator.call(context, obj[i], i, obj);
  	        }
  	    }
  	}

  	/**
  	 * wrap a method with a deprecation warning and stack trace
  	 * @param {Function} method
  	 * @param {String} name
  	 * @param {String} message
  	 * @returns {Function} A new function wrapping the supplied method.
  	 */
  	function deprecate(method, name, message) {
  	    var deprecationMessage = 'DEPRECATED METHOD: ' + name + '\n' + message + ' AT \n';
  	    return function() {
  	        var e = new Error('get-stack-trace');
  	        var stack = e && e.stack ? e.stack.replace(/^[^\(]+?[\n$]/gm, '')
  	            .replace(/^\s+at\s+/gm, '')
  	            .replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@') : 'Unknown Stack Trace';

  	        var log = window.console && (window.console.warn || window.console.log);
  	        if (log) {
  	            log.call(window.console, deprecationMessage, stack);
  	        }
  	        return method.apply(this, arguments);
  	    };
  	}

  	/**
  	 * extend object.
  	 * means that properties in dest will be overwritten by the ones in src.
  	 * @param {Object} target
  	 * @param {...Object} objects_to_assign
  	 * @returns {Object} target
  	 */
  	var assign;
  	if (typeof Object.assign !== 'function') {
  	    assign = function assign(target) {
  	        if (target === undefined$1 || target === null) {
  	            throw new TypeError('Cannot convert undefined or null to object');
  	        }

  	        var output = Object(target);
  	        for (var index = 1; index < arguments.length; index++) {
  	            var source = arguments[index];
  	            if (source !== undefined$1 && source !== null) {
  	                for (var nextKey in source) {
  	                    if (source.hasOwnProperty(nextKey)) {
  	                        output[nextKey] = source[nextKey];
  	                    }
  	                }
  	            }
  	        }
  	        return output;
  	    };
  	} else {
  	    assign = Object.assign;
  	}

  	/**
  	 * extend object.
  	 * means that properties in dest will be overwritten by the ones in src.
  	 * @param {Object} dest
  	 * @param {Object} src
  	 * @param {Boolean} [merge=false]
  	 * @returns {Object} dest
  	 */
  	var extend = deprecate(function extend(dest, src, merge) {
  	    var keys = Object.keys(src);
  	    var i = 0;
  	    while (i < keys.length) {
  	        if (!merge || (merge && dest[keys[i]] === undefined$1)) {
  	            dest[keys[i]] = src[keys[i]];
  	        }
  	        i++;
  	    }
  	    return dest;
  	}, 'extend', 'Use `assign`.');

  	/**
  	 * merge the values from src in the dest.
  	 * means that properties that exist in dest will not be overwritten by src
  	 * @param {Object} dest
  	 * @param {Object} src
  	 * @returns {Object} dest
  	 */
  	var merge = deprecate(function merge(dest, src) {
  	    return extend(dest, src, true);
  	}, 'merge', 'Use `assign`.');

  	/**
  	 * simple class inheritance
  	 * @param {Function} child
  	 * @param {Function} base
  	 * @param {Object} [properties]
  	 */
  	function inherit(child, base, properties) {
  	    var baseP = base.prototype,
  	        childP;

  	    childP = child.prototype = Object.create(baseP);
  	    childP.constructor = child;
  	    childP._super = baseP;

  	    if (properties) {
  	        assign(childP, properties);
  	    }
  	}

  	/**
  	 * simple function bind
  	 * @param {Function} fn
  	 * @param {Object} context
  	 * @returns {Function}
  	 */
  	function bindFn(fn, context) {
  	    return function boundFn() {
  	        return fn.apply(context, arguments);
  	    };
  	}

  	/**
  	 * let a boolean value also be a function that must return a boolean
  	 * this first item in args will be used as the context
  	 * @param {Boolean|Function} val
  	 * @param {Array} [args]
  	 * @returns {Boolean}
  	 */
  	function boolOrFn(val, args) {
  	    if (typeof val == TYPE_FUNCTION) {
  	        return val.apply(args ? args[0] || undefined$1 : undefined$1, args);
  	    }
  	    return val;
  	}

  	/**
  	 * use the val2 when val1 is undefined
  	 * @param {*} val1
  	 * @param {*} val2
  	 * @returns {*}
  	 */
  	function ifUndefined(val1, val2) {
  	    return (val1 === undefined$1) ? val2 : val1;
  	}

  	/**
  	 * addEventListener with multiple events at once
  	 * @param {EventTarget} target
  	 * @param {String} types
  	 * @param {Function} handler
  	 */
  	function addEventListeners(target, types, handler) {
  	    each(splitStr(types), function(type) {
  	        target.addEventListener(type, handler, false);
  	    });
  	}

  	/**
  	 * removeEventListener with multiple events at once
  	 * @param {EventTarget} target
  	 * @param {String} types
  	 * @param {Function} handler
  	 */
  	function removeEventListeners(target, types, handler) {
  	    each(splitStr(types), function(type) {
  	        target.removeEventListener(type, handler, false);
  	    });
  	}

  	/**
  	 * find if a node is in the given parent
  	 * @method hasParent
  	 * @param {HTMLElement} node
  	 * @param {HTMLElement} parent
  	 * @return {Boolean} found
  	 */
  	function hasParent(node, parent) {
  	    while (node) {
  	        if (node == parent) {
  	            return true;
  	        }
  	        node = node.parentNode;
  	    }
  	    return false;
  	}

  	/**
  	 * small indexOf wrapper
  	 * @param {String} str
  	 * @param {String} find
  	 * @returns {Boolean} found
  	 */
  	function inStr(str, find) {
  	    return str.indexOf(find) > -1;
  	}

  	/**
  	 * split string on whitespace
  	 * @param {String} str
  	 * @returns {Array} words
  	 */
  	function splitStr(str) {
  	    return str.trim().split(/\s+/g);
  	}

  	/**
  	 * find if a array contains the object using indexOf or a simple polyFill
  	 * @param {Array} src
  	 * @param {String} find
  	 * @param {String} [findByKey]
  	 * @return {Boolean|Number} false when not found, or the index
  	 */
  	function inArray(src, find, findByKey) {
  	    if (src.indexOf && !findByKey) {
  	        return src.indexOf(find);
  	    } else {
  	        var i = 0;
  	        while (i < src.length) {
  	            if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) {
  	                return i;
  	            }
  	            i++;
  	        }
  	        return -1;
  	    }
  	}

  	/**
  	 * convert array-like objects to real arrays
  	 * @param {Object} obj
  	 * @returns {Array}
  	 */
  	function toArray(obj) {
  	    return Array.prototype.slice.call(obj, 0);
  	}

  	/**
  	 * unique array with objects based on a key (like 'id') or just by the array's value
  	 * @param {Array} src [{id:1},{id:2},{id:1}]
  	 * @param {String} [key]
  	 * @param {Boolean} [sort=False]
  	 * @returns {Array} [{id:1},{id:2}]
  	 */
  	function uniqueArray(src, key, sort) {
  	    var results = [];
  	    var values = [];
  	    var i = 0;

  	    while (i < src.length) {
  	        var val = key ? src[i][key] : src[i];
  	        if (inArray(values, val) < 0) {
  	            results.push(src[i]);
  	        }
  	        values[i] = val;
  	        i++;
  	    }

  	    if (sort) {
  	        if (!key) {
  	            results = results.sort();
  	        } else {
  	            results = results.sort(function sortUniqueArray(a, b) {
  	                return a[key] > b[key];
  	            });
  	        }
  	    }

  	    return results;
  	}

  	/**
  	 * get the prefixed property
  	 * @param {Object} obj
  	 * @param {String} property
  	 * @returns {String|Undefined} prefixed
  	 */
  	function prefixed(obj, property) {
  	    var prefix, prop;
  	    var camelProp = property[0].toUpperCase() + property.slice(1);

  	    var i = 0;
  	    while (i < VENDOR_PREFIXES.length) {
  	        prefix = VENDOR_PREFIXES[i];
  	        prop = (prefix) ? prefix + camelProp : property;

  	        if (prop in obj) {
  	            return prop;
  	        }
  	        i++;
  	    }
  	    return undefined$1;
  	}

  	/**
  	 * get a unique id
  	 * @returns {number} uniqueId
  	 */
  	var _uniqueId = 1;
  	function uniqueId() {
  	    return _uniqueId++;
  	}

  	/**
  	 * get the window object of an element
  	 * @param {HTMLElement} element
  	 * @returns {DocumentView|Window}
  	 */
  	function getWindowForElement(element) {
  	    var doc = element.ownerDocument || element;
  	    return (doc.defaultView || doc.parentWindow || window);
  	}

  	var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;

  	var SUPPORT_TOUCH = ('ontouchstart' in window);
  	var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined$1;
  	var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);

  	var INPUT_TYPE_TOUCH = 'touch';
  	var INPUT_TYPE_PEN = 'pen';
  	var INPUT_TYPE_MOUSE = 'mouse';
  	var INPUT_TYPE_KINECT = 'kinect';

  	var COMPUTE_INTERVAL = 25;

  	var INPUT_START = 1;
  	var INPUT_MOVE = 2;
  	var INPUT_END = 4;
  	var INPUT_CANCEL = 8;

  	var DIRECTION_NONE = 1;
  	var DIRECTION_LEFT = 2;
  	var DIRECTION_RIGHT = 4;
  	var DIRECTION_UP = 8;
  	var DIRECTION_DOWN = 16;

  	var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
  	var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
  	var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;

  	var PROPS_XY = ['x', 'y'];
  	var PROPS_CLIENT_XY = ['clientX', 'clientY'];

  	/**
  	 * create new input type manager
  	 * @param {Manager} manager
  	 * @param {Function} callback
  	 * @returns {Input}
  	 * @constructor
  	 */
  	function Input(manager, callback) {
  	    var self = this;
  	    this.manager = manager;
  	    this.callback = callback;
  	    this.element = manager.element;
  	    this.target = manager.options.inputTarget;

  	    // smaller wrapper around the handler, for the scope and the enabled state of the manager,
  	    // so when disabled the input events are completely bypassed.
  	    this.domHandler = function(ev) {
  	        if (boolOrFn(manager.options.enable, [manager])) {
  	            self.handler(ev);
  	        }
  	    };

  	    this.init();

  	}

  	Input.prototype = {
  	    /**
  	     * should handle the inputEvent data and trigger the callback
  	     * @virtual
  	     */
  	    handler: function() { },

  	    /**
  	     * bind the events
  	     */
  	    init: function() {
  	        this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
  	        this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
  	        this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
  	    },

  	    /**
  	     * unbind the events
  	     */
  	    destroy: function() {
  	        this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler);
  	        this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler);
  	        this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
  	    }
  	};

  	/**
  	 * create new input type manager
  	 * called by the Manager constructor
  	 * @param {Hammer} manager
  	 * @returns {Input}
  	 */
  	function createInputInstance(manager) {
  	    var Type;
  	    var inputClass = manager.options.inputClass;

  	    if (inputClass) {
  	        Type = inputClass;
  	    } else if (SUPPORT_POINTER_EVENTS) {
  	        Type = PointerEventInput;
  	    } else if (SUPPORT_ONLY_TOUCH) {
  	        Type = TouchInput;
  	    } else if (!SUPPORT_TOUCH) {
  	        Type = MouseInput;
  	    } else {
  	        Type = TouchMouseInput;
  	    }
  	    return new (Type)(manager, inputHandler);
  	}

  	/**
  	 * handle input events
  	 * @param {Manager} manager
  	 * @param {String} eventType
  	 * @param {Object} input
  	 */
  	function inputHandler(manager, eventType, input) {
  	    var pointersLen = input.pointers.length;
  	    var changedPointersLen = input.changedPointers.length;
  	    var isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0));
  	    var isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0));

  	    input.isFirst = !!isFirst;
  	    input.isFinal = !!isFinal;

  	    if (isFirst) {
  	        manager.session = {};
  	    }

  	    // source event is the normalized value of the domEvents
  	    // like 'touchstart, mouseup, pointerdown'
  	    input.eventType = eventType;

  	    // compute scale, rotation etc
  	    computeInputData(manager, input);

  	    // emit secret event
  	    manager.emit('hammer.input', input);

  	    manager.recognize(input);
  	    manager.session.prevInput = input;
  	}

  	/**
  	 * extend the data with some usable properties like scale, rotate, velocity etc
  	 * @param {Object} manager
  	 * @param {Object} input
  	 */
  	function computeInputData(manager, input) {
  	    var session = manager.session;
  	    var pointers = input.pointers;
  	    var pointersLength = pointers.length;

  	    // store the first input to calculate the distance and direction
  	    if (!session.firstInput) {
  	        session.firstInput = simpleCloneInputData(input);
  	    }

  	    // to compute scale and rotation we need to store the multiple touches
  	    if (pointersLength > 1 && !session.firstMultiple) {
  	        session.firstMultiple = simpleCloneInputData(input);
  	    } else if (pointersLength === 1) {
  	        session.firstMultiple = false;
  	    }

  	    var firstInput = session.firstInput;
  	    var firstMultiple = session.firstMultiple;
  	    var offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center;

  	    var center = input.center = getCenter(pointers);
  	    input.timeStamp = now();
  	    input.deltaTime = input.timeStamp - firstInput.timeStamp;

  	    input.angle = getAngle(offsetCenter, center);
  	    input.distance = getDistance(offsetCenter, center);

  	    computeDeltaXY(session, input);
  	    input.offsetDirection = getDirection(input.deltaX, input.deltaY);

  	    var overallVelocity = getVelocity(input.deltaTime, input.deltaX, input.deltaY);
  	    input.overallVelocityX = overallVelocity.x;
  	    input.overallVelocityY = overallVelocity.y;
  	    input.overallVelocity = (abs(overallVelocity.x) > abs(overallVelocity.y)) ? overallVelocity.x : overallVelocity.y;

  	    input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1;
  	    input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0;

  	    input.maxPointers = !session.prevInput ? input.pointers.length : ((input.pointers.length >
  	        session.prevInput.maxPointers) ? input.pointers.length : session.prevInput.maxPointers);

  	    computeIntervalInputData(session, input);

  	    // find the correct target
  	    var target = manager.element;
  	    if (hasParent(input.srcEvent.target, target)) {
  	        target = input.srcEvent.target;
  	    }
  	    input.target = target;
  	}

  	function computeDeltaXY(session, input) {
  	    var center = input.center;
  	    var offset = session.offsetDelta || {};
  	    var prevDelta = session.prevDelta || {};
  	    var prevInput = session.prevInput || {};

  	    if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) {
  	        prevDelta = session.prevDelta = {
  	            x: prevInput.deltaX || 0,
  	            y: prevInput.deltaY || 0
  	        };

  	        offset = session.offsetDelta = {
  	            x: center.x,
  	            y: center.y
  	        };
  	    }

  	    input.deltaX = prevDelta.x + (center.x - offset.x);
  	    input.deltaY = prevDelta.y + (center.y - offset.y);
  	}

  	/**
  	 * velocity is calculated every x ms
  	 * @param {Object} session
  	 * @param {Object} input
  	 */
  	function computeIntervalInputData(session, input) {
  	    var last = session.lastInterval || input,
  	        deltaTime = input.timeStamp - last.timeStamp,
  	        velocity, velocityX, velocityY, direction;

  	    if (input.eventType != INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined$1)) {
  	        var deltaX = input.deltaX - last.deltaX;
  	        var deltaY = input.deltaY - last.deltaY;

  	        var v = getVelocity(deltaTime, deltaX, deltaY);
  	        velocityX = v.x;
  	        velocityY = v.y;
  	        velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
  	        direction = getDirection(deltaX, deltaY);

  	        session.lastInterval = input;
  	    } else {
  	        // use latest velocity info if it doesn't overtake a minimum period
  	        velocity = last.velocity;
  	        velocityX = last.velocityX;
  	        velocityY = last.velocityY;
  	        direction = last.direction;
  	    }

  	    input.velocity = velocity;
  	    input.velocityX = velocityX;
  	    input.velocityY = velocityY;
  	    input.direction = direction;
  	}

  	/**
  	 * create a simple clone from the input used for storage of firstInput and firstMultiple
  	 * @param {Object} input
  	 * @returns {Object} clonedInputData
  	 */
  	function simpleCloneInputData(input) {
  	    // make a simple copy of the pointers because we will get a reference if we don't
  	    // we only need clientXY for the calculations
  	    var pointers = [];
  	    var i = 0;
  	    while (i < input.pointers.length) {
  	        pointers[i] = {
  	            clientX: round(input.pointers[i].clientX),
  	            clientY: round(input.pointers[i].clientY)
  	        };
  	        i++;
  	    }

  	    return {
  	        timeStamp: now(),
  	        pointers: pointers,
  	        center: getCenter(pointers),
  	        deltaX: input.deltaX,
  	        deltaY: input.deltaY
  	    };
  	}

  	/**
  	 * get the center of all the pointers
  	 * @param {Array} pointers
  	 * @return {Object} center contains `x` and `y` properties
  	 */
  	function getCenter(pointers) {
  	    var pointersLength = pointers.length;

  	    // no need to loop when only one touch
  	    if (pointersLength === 1) {
  	        return {
  	            x: round(pointers[0].clientX),
  	            y: round(pointers[0].clientY)
  	        };
  	    }

  	    var x = 0, y = 0, i = 0;
  	    while (i < pointersLength) {
  	        x += pointers[i].clientX;
  	        y += pointers[i].clientY;
  	        i++;
  	    }

  	    return {
  	        x: round(x / pointersLength),
  	        y: round(y / pointersLength)
  	    };
  	}

  	/**
  	 * calculate the velocity between two points. unit is in px per ms.
  	 * @param {Number} deltaTime
  	 * @param {Number} x
  	 * @param {Number} y
  	 * @return {Object} velocity `x` and `y`
  	 */
  	function getVelocity(deltaTime, x, y) {
  	    return {
  	        x: x / deltaTime || 0,
  	        y: y / deltaTime || 0
  	    };
  	}

  	/**
  	 * get the direction between two points
  	 * @param {Number} x
  	 * @param {Number} y
  	 * @return {Number} direction
  	 */
  	function getDirection(x, y) {
  	    if (x === y) {
  	        return DIRECTION_NONE;
  	    }

  	    if (abs(x) >= abs(y)) {
  	        return x < 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
  	    }
  	    return y < 0 ? DIRECTION_UP : DIRECTION_DOWN;
  	}

  	/**
  	 * calculate the absolute distance between two points
  	 * @param {Object} p1 {x, y}
  	 * @param {Object} p2 {x, y}
  	 * @param {Array} [props] containing x and y keys
  	 * @return {Number} distance
  	 */
  	function getDistance(p1, p2, props) {
  	    if (!props) {
  	        props = PROPS_XY;
  	    }
  	    var x = p2[props[0]] - p1[props[0]],
  	        y = p2[props[1]] - p1[props[1]];

  	    return Math.sqrt((x * x) + (y * y));
  	}

  	/**
  	 * calculate the angle between two coordinates
  	 * @param {Object} p1
  	 * @param {Object} p2
  	 * @param {Array} [props] containing x and y keys
  	 * @return {Number} angle
  	 */
  	function getAngle(p1, p2, props) {
  	    if (!props) {
  	        props = PROPS_XY;
  	    }
  	    var x = p2[props[0]] - p1[props[0]],
  	        y = p2[props[1]] - p1[props[1]];
  	    return Math.atan2(y, x) * 180 / Math.PI;
  	}

  	/**
  	 * calculate the rotation degrees between two pointersets
  	 * @param {Array} start array of pointers
  	 * @param {Array} end array of pointers
  	 * @return {Number} rotation
  	 */
  	function getRotation(start, end) {
  	    return getAngle(end[1], end[0], PROPS_CLIENT_XY) + getAngle(start[1], start[0], PROPS_CLIENT_XY);
  	}

  	/**
  	 * calculate the scale factor between two pointersets
  	 * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
  	 * @param {Array} start array of pointers
  	 * @param {Array} end array of pointers
  	 * @return {Number} scale
  	 */
  	function getScale(start, end) {
  	    return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY);
  	}

  	var MOUSE_INPUT_MAP = {
  	    mousedown: INPUT_START,
  	    mousemove: INPUT_MOVE,
  	    mouseup: INPUT_END
  	};

  	var MOUSE_ELEMENT_EVENTS = 'mousedown';
  	var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';

  	/**
  	 * Mouse events input
  	 * @constructor
  	 * @extends Input
  	 */
  	function MouseInput() {
  	    this.evEl = MOUSE_ELEMENT_EVENTS;
  	    this.evWin = MOUSE_WINDOW_EVENTS;

  	    this.pressed = false; // mousedown state

  	    Input.apply(this, arguments);
  	}

  	inherit(MouseInput, Input, {
  	    /**
  	     * handle mouse events
  	     * @param {Object} ev
  	     */
  	    handler: function MEhandler(ev) {
  	        var eventType = MOUSE_INPUT_MAP[ev.type];

  	        // on start we want to have the left mouse button down
  	        if (eventType & INPUT_START && ev.button === 0) {
  	            this.pressed = true;
  	        }

  	        if (eventType & INPUT_MOVE && ev.which !== 1) {
  	            eventType = INPUT_END;
  	        }

  	        // mouse must be down
  	        if (!this.pressed) {
  	            return;
  	        }

  	        if (eventType & INPUT_END) {
  	            this.pressed = false;
  	        }

  	        this.callback(this.manager, eventType, {
  	            pointers: [ev],
  	            changedPointers: [ev],
  	            pointerType: INPUT_TYPE_MOUSE,
  	            srcEvent: ev
  	        });
  	    }
  	});

  	var POINTER_INPUT_MAP = {
  	    pointerdown: INPUT_START,
  	    pointermove: INPUT_MOVE,
  	    pointerup: INPUT_END,
  	    pointercancel: INPUT_CANCEL,
  	    pointerout: INPUT_CANCEL
  	};

  	// in IE10 the pointer types is defined as an enum
  	var IE10_POINTER_TYPE_ENUM = {
  	    2: INPUT_TYPE_TOUCH,
  	    3: INPUT_TYPE_PEN,
  	    4: INPUT_TYPE_MOUSE,
  	    5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
  	};

  	var POINTER_ELEMENT_EVENTS = 'pointerdown';
  	var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';

  	// IE10 has prefixed support, and case-sensitive
  	if (window.MSPointerEvent && !window.PointerEvent) {
  	    POINTER_ELEMENT_EVENTS = 'MSPointerDown';
  	    POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel';
  	}

  	/**
  	 * Pointer events input
  	 * @constructor
  	 * @extends Input
  	 */
  	function PointerEventInput() {
  	    this.evEl = POINTER_ELEMENT_EVENTS;
  	    this.evWin = POINTER_WINDOW_EVENTS;

  	    Input.apply(this, arguments);

  	    this.store = (this.manager.session.pointerEvents = []);
  	}

  	inherit(PointerEventInput, Input, {
  	    /**
  	     * handle mouse events
  	     * @param {Object} ev
  	     */
  	    handler: function PEhandler(ev) {
  	        var store = this.store;
  	        var removePointer = false;

  	        var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
  	        var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
  	        var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;

  	        var isTouch = (pointerType == INPUT_TYPE_TOUCH);

  	        // get index of the event in the store
  	        var storeIndex = inArray(store, ev.pointerId, 'pointerId');

  	        // start and mouse must be down
  	        if (eventType & INPUT_START && (ev.button === 0 || isTouch)) {
  	            if (storeIndex < 0) {
  	                store.push(ev);
  	                storeIndex = store.length - 1;
  	            }
  	        } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
  	            removePointer = true;
  	        }

  	        // it not found, so the pointer hasn't been down (so it's probably a hover)
  	        if (storeIndex < 0) {
  	            return;
  	        }

  	        // update the event in the store
  	        store[storeIndex] = ev;

  	        this.callback(this.manager, eventType, {
  	            pointers: store,
  	            changedPointers: [ev],
  	            pointerType: pointerType,
  	            srcEvent: ev
  	        });

  	        if (removePointer) {
  	            // remove from the store
  	            store.splice(storeIndex, 1);
  	        }
  	    }
  	});

  	var SINGLE_TOUCH_INPUT_MAP = {
  	    touchstart: INPUT_START,
  	    touchmove: INPUT_MOVE,
  	    touchend: INPUT_END,
  	    touchcancel: INPUT_CANCEL
  	};

  	var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
  	var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';

  	/**
  	 * Touch events input
  	 * @constructor
  	 * @extends Input
  	 */
  	function SingleTouchInput() {
  	    this.evTarget = SINGLE_TOUCH_TARGET_EVENTS;
  	    this.evWin = SINGLE_TOUCH_WINDOW_EVENTS;
  	    this.started = false;

  	    Input.apply(this, arguments);
  	}

  	inherit(SingleTouchInput, Input, {
  	    handler: function TEhandler(ev) {
  	        var type = SINGLE_TOUCH_INPUT_MAP[ev.type];

  	        // should we handle the touch events?
  	        if (type === INPUT_START) {
  	            this.started = true;
  	        }

  	        if (!this.started) {
  	            return;
  	        }

  	        var touches = normalizeSingleTouches.call(this, ev, type);

  	        // when done, reset the started state
  	        if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) {
  	            this.started = false;
  	        }

  	        this.callback(this.manager, type, {
  	            pointers: touches[0],
  	            changedPointers: touches[1],
  	            pointerType: INPUT_TYPE_TOUCH,
  	            srcEvent: ev
  	        });
  	    }
  	});

  	/**
  	 * @this {TouchInput}
  	 * @param {Object} ev
  	 * @param {Number} type flag
  	 * @returns {undefined|Array} [all, changed]
  	 */
  	function normalizeSingleTouches(ev, type) {
  	    var all = toArray(ev.touches);
  	    var changed = toArray(ev.changedTouches);

  	    if (type & (INPUT_END | INPUT_CANCEL)) {
  	        all = uniqueArray(all.concat(changed), 'identifier', true);
  	    }

  	    return [all, changed];
  	}

  	var TOUCH_INPUT_MAP = {
  	    touchstart: INPUT_START,
  	    touchmove: INPUT_MOVE,
  	    touchend: INPUT_END,
  	    touchcancel: INPUT_CANCEL
  	};

  	var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';

  	/**
  	 * Multi-user touch events input
  	 * @constructor
  	 * @extends Input
  	 */
  	function TouchInput() {
  	    this.evTarget = TOUCH_TARGET_EVENTS;
  	    this.targetIds = {};

  	    Input.apply(this, arguments);
  	}

  	inherit(TouchInput, Input, {
  	    handler: function MTEhandler(ev) {
  	        var type = TOUCH_INPUT_MAP[ev.type];
  	        var touches = getTouches.call(this, ev, type);
  	        if (!touches) {
  	            return;
  	        }

  	        this.callback(this.manager, type, {
  	            pointers: touches[0],
  	            changedPointers: touches[1],
  	            pointerType: INPUT_TYPE_TOUCH,
  	            srcEvent: ev
  	        });
  	    }
  	});

  	/**
  	 * @this {TouchInput}
  	 * @param {Object} ev
  	 * @param {Number} type flag
  	 * @returns {undefined|Array} [all, changed]
  	 */
  	function getTouches(ev, type) {
  	    var allTouches = toArray(ev.touches);
  	    var targetIds = this.targetIds;

  	    // when there is only one touch, the process can be simplified
  	    if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) {
  	        targetIds[allTouches[0].identifier] = true;
  	        return [allTouches, allTouches];
  	    }

  	    var i,
  	        targetTouches,
  	        changedTouches = toArray(ev.changedTouches),
  	        changedTargetTouches = [],
  	        target = this.target;

  	    // get target touches from touches
  	    targetTouches = allTouches.filter(function(touch) {
  	        return hasParent(touch.target, target);
  	    });

  	    // collect touches
  	    if (type === INPUT_START) {
  	        i = 0;
  	        while (i < targetTouches.length) {
  	            targetIds[targetTouches[i].identifier] = true;
  	            i++;
  	        }
  	    }

  	    // filter changed touches to only contain touches that exist in the collected target ids
  	    i = 0;
  	    while (i < changedTouches.length) {
  	        if (targetIds[changedTouches[i].identifier]) {
  	            changedTargetTouches.push(changedTouches[i]);
  	        }

  	        // cleanup removed touches
  	        if (type & (INPUT_END | INPUT_CANCEL)) {
  	            delete targetIds[changedTouches[i].identifier];
  	        }
  	        i++;
  	    }

  	    if (!changedTargetTouches.length) {
  	        return;
  	    }

  	    return [
  	        // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
  	        uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true),
  	        changedTargetTouches
  	    ];
  	}

  	/**
  	 * Combined touch and mouse input
  	 *
  	 * Touch has a higher priority then mouse, and while touching no mouse events are allowed.
  	 * This because touch devices also emit mouse events while doing a touch.
  	 *
  	 * @constructor
  	 * @extends Input
  	 */

  	var DEDUP_TIMEOUT = 2500;
  	var DEDUP_DISTANCE = 25;

  	function TouchMouseInput() {
  	    Input.apply(this, arguments);

  	    var handler = bindFn(this.handler, this);
  	    this.touch = new TouchInput(this.manager, handler);
  	    this.mouse = new MouseInput(this.manager, handler);

  	    this.primaryTouch = null;
  	    this.lastTouches = [];
  	}

  	inherit(TouchMouseInput, Input, {
  	    /**
  	     * handle mouse and touch events
  	     * @param {Hammer} manager
  	     * @param {String} inputEvent
  	     * @param {Object} inputData
  	     */
  	    handler: function TMEhandler(manager, inputEvent, inputData) {
  	        var isTouch = (inputData.pointerType == INPUT_TYPE_TOUCH),
  	            isMouse = (inputData.pointerType == INPUT_TYPE_MOUSE);

  	        if (isMouse && inputData.sourceCapabilities && inputData.sourceCapabilities.firesTouchEvents) {
  	            return;
  	        }

  	        // when we're in a touch event, record touches to  de-dupe synthetic mouse event
  	        if (isTouch) {
  	            recordTouches.call(this, inputEvent, inputData);
  	        } else if (isMouse && isSyntheticEvent.call(this, inputData)) {
  	            return;
  	        }

  	        this.callback(manager, inputEvent, inputData);
  	    },

  	    /**
  	     * remove the event listeners
  	     */
  	    destroy: function destroy() {
  	        this.touch.destroy();
  	        this.mouse.destroy();
  	    }
  	});

  	function recordTouches(eventType, eventData) {
  	    if (eventType & INPUT_START) {
  	        this.primaryTouch = eventData.changedPointers[0].identifier;
  	        setLastTouch.call(this, eventData);
  	    } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
  	        setLastTouch.call(this, eventData);
  	    }
  	}

  	function setLastTouch(eventData) {
  	    var touch = eventData.changedPointers[0];

  	    if (touch.identifier === this.primaryTouch) {
  	        var lastTouch = {x: touch.clientX, y: touch.clientY};
  	        this.lastTouches.push(lastTouch);
  	        var lts = this.lastTouches;
  	        var removeLastTouch = function() {
  	            var i = lts.indexOf(lastTouch);
  	            if (i > -1) {
  	                lts.splice(i, 1);
  	            }
  	        };
  	        setTimeout(removeLastTouch, DEDUP_TIMEOUT);
  	    }
  	}

  	function isSyntheticEvent(eventData) {
  	    var x = eventData.srcEvent.clientX, y = eventData.srcEvent.clientY;
  	    for (var i = 0; i < this.lastTouches.length; i++) {
  	        var t = this.lastTouches[i];
  	        var dx = Math.abs(x - t.x), dy = Math.abs(y - t.y);
  	        if (dx <= DEDUP_DISTANCE && dy <= DEDUP_DISTANCE) {
  	            return true;
  	        }
  	    }
  	    return false;
  	}

  	var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
  	var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined$1;

  	// magical touchAction value
  	var TOUCH_ACTION_COMPUTE = 'compute';
  	var TOUCH_ACTION_AUTO = 'auto';
  	var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
  	var TOUCH_ACTION_NONE = 'none';
  	var TOUCH_ACTION_PAN_X = 'pan-x';
  	var TOUCH_ACTION_PAN_Y = 'pan-y';
  	var TOUCH_ACTION_MAP = getTouchActionProps();

  	/**
  	 * Touch Action
  	 * sets the touchAction property or uses the js alternative
  	 * @param {Manager} manager
  	 * @param {String} value
  	 * @constructor
  	 */
  	function TouchAction(manager, value) {
  	    this.manager = manager;
  	    this.set(value);
  	}

  	TouchAction.prototype = {
  	    /**
  	     * set the touchAction value on the element or enable the polyfill
  	     * @param {String} value
  	     */
  	    set: function(value) {
  	        // find out the touch-action by the event handlers
  	        if (value == TOUCH_ACTION_COMPUTE) {
  	            value = this.compute();
  	        }

  	        if (NATIVE_TOUCH_ACTION && this.manager.element.style && TOUCH_ACTION_MAP[value]) {
  	            this.manager.element.style[PREFIXED_TOUCH_ACTION] = value;
  	        }
  	        this.actions = value.toLowerCase().trim();
  	    },

  	    /**
  	     * just re-set the touchAction value
  	     */
  	    update: function() {
  	        this.set(this.manager.options.touchAction);
  	    },

  	    /**
  	     * compute the value for the touchAction property based on the recognizer's settings
  	     * @returns {String} value
  	     */
  	    compute: function() {
  	        var actions = [];
  	        each(this.manager.recognizers, function(recognizer) {
  	            if (boolOrFn(recognizer.options.enable, [recognizer])) {
  	                actions = actions.concat(recognizer.getTouchAction());
  	            }
  	        });
  	        return cleanTouchActions(actions.join(' '));
  	    },

  	    /**
  	     * this method is called on each input cycle and provides the preventing of the browser behavior
  	     * @param {Object} input
  	     */
  	    preventDefaults: function(input) {
  	        var srcEvent = input.srcEvent;
  	        var direction = input.offsetDirection;

  	        // if the touch action did prevented once this session
  	        if (this.manager.session.prevented) {
  	            srcEvent.preventDefault();
  	            return;
  	        }

  	        var actions = this.actions;
  	        var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
  	        var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
  	        var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];

  	        if (hasNone) {
  	            //do not prevent defaults if this is a tap gesture

  	            var isTapPointer = input.pointers.length === 1;
  	            var isTapMovement = input.distance < 2;
  	            var isTapTouchTime = input.deltaTime < 250;

  	            if (isTapPointer && isTapMovement && isTapTouchTime) {
  	                return;
  	            }
  	        }

  	        if (hasPanX && hasPanY) {
  	            // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent
  	            return;
  	        }

  	        if (hasNone ||
  	            (hasPanY && direction & DIRECTION_HORIZONTAL) ||
  	            (hasPanX && direction & DIRECTION_VERTICAL)) {
  	            return this.preventSrc(srcEvent);
  	        }
  	    },

  	    /**
  	     * call preventDefault to prevent the browser's default behavior (scrolling in most cases)
  	     * @param {Object} srcEvent
  	     */
  	    preventSrc: function(srcEvent) {
  	        this.manager.session.prevented = true;
  	        srcEvent.preventDefault();
  	    }
  	};

  	/**
  	 * when the touchActions are collected they are not a valid value, so we need to clean things up. *
  	 * @param {String} actions
  	 * @returns {*}
  	 */
  	function cleanTouchActions(actions) {
  	    // none
  	    if (inStr(actions, TOUCH_ACTION_NONE)) {
  	        return TOUCH_ACTION_NONE;
  	    }

  	    var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
  	    var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);

  	    // if both pan-x and pan-y are set (different recognizers
  	    // for different directions, e.g. horizontal pan but vertical swipe?)
  	    // we need none (as otherwise with pan-x pan-y combined none of these
  	    // recognizers will work, since the browser would handle all panning
  	    if (hasPanX && hasPanY) {
  	        return TOUCH_ACTION_NONE;
  	    }

  	    // pan-x OR pan-y
  	    if (hasPanX || hasPanY) {
  	        return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y;
  	    }

  	    // manipulation
  	    if (inStr(actions, TOUCH_ACTION_MANIPULATION)) {
  	        return TOUCH_ACTION_MANIPULATION;
  	    }

  	    return TOUCH_ACTION_AUTO;
  	}

  	function getTouchActionProps() {
  	    if (!NATIVE_TOUCH_ACTION) {
  	        return false;
  	    }
  	    var touchMap = {};
  	    var cssSupports = window.CSS && window.CSS.supports;
  	    ['auto', 'manipulation', 'pan-y', 'pan-x', 'pan-x pan-y', 'none'].forEach(function(val) {

  	        // If css.supports is not supported but there is native touch-action assume it supports
  	        // all values. This is the case for IE 10 and 11.
  	        touchMap[val] = cssSupports ? window.CSS.supports('touch-action', val) : true;
  	    });
  	    return touchMap;
  	}

  	/**
  	 * Recognizer flow explained; *
  	 * All recognizers have the initial state of POSSIBLE when a input session starts.
  	 * The definition of a input session is from the first input until the last input, with all it's movement in it. *
  	 * Example session for mouse-input: mousedown -> mousemove -> mouseup
  	 *
  	 * On each recognizing cycle (see Manager.recognize) the .recognize() method is executed
  	 * which determines with state it should be.
  	 *
  	 * If the recognizer has the state FAILED, CANCELLED or RECOGNIZED (equals ENDED), it is reset to
  	 * POSSIBLE to give it another change on the next cycle.
  	 *
  	 *               Possible
  	 *                  |
  	 *            +-----+---------------+
  	 *            |                     |
  	 *      +-----+-----+               |
  	 *      |           |               |
  	 *   Failed      Cancelled          |
  	 *                          +-------+------+
  	 *                          |              |
  	 *                      Recognized       Began
  	 *                                         |
  	 *                                      Changed
  	 *                                         |
  	 *                                  Ended/Recognized
  	 */
  	var STATE_POSSIBLE = 1;
  	var STATE_BEGAN = 2;
  	var STATE_CHANGED = 4;
  	var STATE_ENDED = 8;
  	var STATE_RECOGNIZED = STATE_ENDED;
  	var STATE_CANCELLED = 16;
  	var STATE_FAILED = 32;

  	/**
  	 * Recognizer
  	 * Every recognizer needs to extend from this class.
  	 * @constructor
  	 * @param {Object} options
  	 */
  	function Recognizer(options) {
  	    this.options = assign({}, this.defaults, options || {});

  	    this.id = uniqueId();

  	    this.manager = null;

  	    // default is enable true
  	    this.options.enable = ifUndefined(this.options.enable, true);

  	    this.state = STATE_POSSIBLE;

  	    this.simultaneous = {};
  	    this.requireFail = [];
  	}

  	Recognizer.prototype = {
  	    /**
  	     * @virtual
  	     * @type {Object}
  	     */
  	    defaults: {},

  	    /**
  	     * set options
  	     * @param {Object} options
  	     * @return {Recognizer}
  	     */
  	    set: function(options) {
  	        assign(this.options, options);

  	        // also update the touchAction, in case something changed about the directions/enabled state
  	        this.manager && this.manager.touchAction.update();
  	        return this;
  	    },

  	    /**
  	     * recognize simultaneous with an other recognizer.
  	     * @param {Recognizer} otherRecognizer
  	     * @returns {Recognizer} this
  	     */
  	    recognizeWith: function(otherRecognizer) {
  	        if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) {
  	            return this;
  	        }

  	        var simultaneous = this.simultaneous;
  	        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
  	        if (!simultaneous[otherRecognizer.id]) {
  	            simultaneous[otherRecognizer.id] = otherRecognizer;
  	            otherRecognizer.recognizeWith(this);
  	        }
  	        return this;
  	    },

  	    /**
  	     * drop the simultaneous link. it doesnt remove the link on the other recognizer.
  	     * @param {Recognizer} otherRecognizer
  	     * @returns {Recognizer} this
  	     */
  	    dropRecognizeWith: function(otherRecognizer) {
  	        if (invokeArrayArg(otherRecognizer, 'dropRecognizeWith', this)) {
  	            return this;
  	        }

  	        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
  	        delete this.simultaneous[otherRecognizer.id];
  	        return this;
  	    },

  	    /**
  	     * recognizer can only run when an other is failing
  	     * @param {Recognizer} otherRecognizer
  	     * @returns {Recognizer} this
  	     */
  	    requireFailure: function(otherRecognizer) {
  	        if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) {
  	            return this;
  	        }

  	        var requireFail = this.requireFail;
  	        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
  	        if (inArray(requireFail, otherRecognizer) === -1) {
  	            requireFail.push(otherRecognizer);
  	            otherRecognizer.requireFailure(this);
  	        }
  	        return this;
  	    },

  	    /**
  	     * drop the requireFailure link. it does not remove the link on the other recognizer.
  	     * @param {Recognizer} otherRecognizer
  	     * @returns {Recognizer} this
  	     */
  	    dropRequireFailure: function(otherRecognizer) {
  	        if (invokeArrayArg(otherRecognizer, 'dropRequireFailure', this)) {
  	            return this;
  	        }

  	        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
  	        var index = inArray(this.requireFail, otherRecognizer);
  	        if (index > -1) {
  	            this.requireFail.splice(index, 1);
  	        }
  	        return this;
  	    },

  	    /**
  	     * has require failures boolean
  	     * @returns {boolean}
  	     */
  	    hasRequireFailures: function() {
  	        return this.requireFail.length > 0;
  	    },

  	    /**
  	     * if the recognizer can recognize simultaneous with an other recognizer
  	     * @param {Recognizer} otherRecognizer
  	     * @returns {Boolean}
  	     */
  	    canRecognizeWith: function(otherRecognizer) {
  	        return !!this.simultaneous[otherRecognizer.id];
  	    },

  	    /**
  	     * You should use `tryEmit` instead of `emit` directly to check
  	     * that all the needed recognizers has failed before emitting.
  	     * @param {Object} input
  	     */
  	    emit: function(input) {
  	        var self = this;
  	        var state = this.state;

  	        function emit(event) {
  	            self.manager.emit(event, input);
  	        }

  	        // 'panstart' and 'panmove'
  	        if (state < STATE_ENDED) {
  	            emit(self.options.event + stateStr(state));
  	        }

  	        emit(self.options.event); // simple 'eventName' events

  	        if (input.additionalEvent) { // additional event(panleft, panright, pinchin, pinchout...)
  	            emit(input.additionalEvent);
  	        }

  	        // panend and pancancel
  	        if (state >= STATE_ENDED) {
  	            emit(self.options.event + stateStr(state));
  	        }
  	    },

  	    /**
  	     * Check that all the require failure recognizers has failed,
  	     * if true, it emits a gesture event,
  	     * otherwise, setup the state to FAILED.
  	     * @param {Object} input
  	     */
  	    tryEmit: function(input) {
  	        if (this.canEmit()) {
  	            return this.emit(input);
  	        }
  	        // it's failing anyway
  	        this.state = STATE_FAILED;
  	    },

  	    /**
  	     * can we emit?
  	     * @returns {boolean}
  	     */
  	    canEmit: function() {
  	        var i = 0;
  	        while (i < this.requireFail.length) {
  	            if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) {
  	                return false;
  	            }
  	            i++;
  	        }
  	        return true;
  	    },

  	    /**
  	     * update the recognizer
  	     * @param {Object} inputData
  	     */
  	    recognize: function(inputData) {
  	        // make a new copy of the inputData
  	        // so we can change the inputData without messing up the other recognizers
  	        var inputDataClone = assign({}, inputData);

  	        // is is enabled and allow recognizing?
  	        if (!boolOrFn(this.options.enable, [this, inputDataClone])) {
  	            this.reset();
  	            this.state = STATE_FAILED;
  	            return;
  	        }

  	        // reset when we've reached the end
  	        if (this.state & (STATE_RECOGNIZED | STATE_CANCELLED | STATE_FAILED)) {
  	            this.state = STATE_POSSIBLE;
  	        }

  	        this.state = this.process(inputDataClone);

  	        // the recognizer has recognized a gesture
  	        // so trigger an event
  	        if (this.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED | STATE_CANCELLED)) {
  	            this.tryEmit(inputDataClone);
  	        }
  	    },

  	    /**
  	     * return the state of the recognizer
  	     * the actual recognizing happens in this method
  	     * @virtual
  	     * @param {Object} inputData
  	     * @returns {Const} STATE
  	     */
  	    process: function(inputData) { }, // jshint ignore:line

  	    /**
  	     * return the preferred touch-action
  	     * @virtual
  	     * @returns {Array}
  	     */
  	    getTouchAction: function() { },

  	    /**
  	     * called when the gesture isn't allowed to recognize
  	     * like when another is being recognized or it is disabled
  	     * @virtual
  	     */
  	    reset: function() { }
  	};

  	/**
  	 * get a usable string, used as event postfix
  	 * @param {Const} state
  	 * @returns {String} state
  	 */
  	function stateStr(state) {
  	    if (state & STATE_CANCELLED) {
  	        return 'cancel';
  	    } else if (state & STATE_ENDED) {
  	        return 'end';
  	    } else if (state & STATE_CHANGED) {
  	        return 'move';
  	    } else if (state & STATE_BEGAN) {
  	        return 'start';
  	    }
  	    return '';
  	}

  	/**
  	 * direction cons to string
  	 * @param {Const} direction
  	 * @returns {String}
  	 */
  	function directionStr(direction) {
  	    if (direction == DIRECTION_DOWN) {
  	        return 'down';
  	    } else if (direction == DIRECTION_UP) {
  	        return 'up';
  	    } else if (direction == DIRECTION_LEFT) {
  	        return 'left';
  	    } else if (direction == DIRECTION_RIGHT) {
  	        return 'right';
  	    }
  	    return '';
  	}

  	/**
  	 * get a recognizer by name if it is bound to a manager
  	 * @param {Recognizer|String} otherRecognizer
  	 * @param {Recognizer} recognizer
  	 * @returns {Recognizer}
  	 */
  	function getRecognizerByNameIfManager(otherRecognizer, recognizer) {
  	    var manager = recognizer.manager;
  	    if (manager) {
  	        return manager.get(otherRecognizer);
  	    }
  	    return otherRecognizer;
  	}

  	/**
  	 * This recognizer is just used as a base for the simple attribute recognizers.
  	 * @constructor
  	 * @extends Recognizer
  	 */
  	function AttrRecognizer() {
  	    Recognizer.apply(this, arguments);
  	}

  	inherit(AttrRecognizer, Recognizer, {
  	    /**
  	     * @namespace
  	     * @memberof AttrRecognizer
  	     */
  	    defaults: {
  	        /**
  	         * @type {Number}
  	         * @default 1
  	         */
  	        pointers: 1
  	    },

  	    /**
  	     * Used to check if it the recognizer receives valid input, like input.distance > 10.
  	     * @memberof AttrRecognizer
  	     * @param {Object} input
  	     * @returns {Boolean} recognized
  	     */
  	    attrTest: function(input) {
  	        var optionPointers = this.options.pointers;
  	        return optionPointers === 0 || input.pointers.length === optionPointers;
  	    },

  	    /**
  	     * Process the input and return the state for the recognizer
  	     * @memberof AttrRecognizer
  	     * @param {Object} input
  	     * @returns {*} State
  	     */
  	    process: function(input) {
  	        var state = this.state;
  	        var eventType = input.eventType;

  	        var isRecognized = state & (STATE_BEGAN | STATE_CHANGED);
  	        var isValid = this.attrTest(input);

  	        // on cancel input and we've recognized before, return STATE_CANCELLED
  	        if (isRecognized && (eventType & INPUT_CANCEL || !isValid)) {
  	            return state | STATE_CANCELLED;
  	        } else if (isRecognized || isValid) {
  	            if (eventType & INPUT_END) {
  	                return state | STATE_ENDED;
  	            } else if (!(state & STATE_BEGAN)) {
  	                return STATE_BEGAN;
  	            }
  	            return state | STATE_CHANGED;
  	        }
  	        return STATE_FAILED;
  	    }
  	});

  	/**
  	 * Pan
  	 * Recognized when the pointer is down and moved in the allowed direction.
  	 * @constructor
  	 * @extends AttrRecognizer
  	 */
  	function PanRecognizer() {
  	    AttrRecognizer.apply(this, arguments);

  	    this.pX = null;
  	    this.pY = null;
  	}

  	inherit(PanRecognizer, AttrRecognizer, {
  	    /**
  	     * @namespace
  	     * @memberof PanRecognizer
  	     */
  	    defaults: {
  	        event: 'pan',
  	        threshold: 10,
  	        pointers: 1,
  	        direction: DIRECTION_ALL
  	    },

  	    getTouchAction: function() {
  	        var direction = this.options.direction;
  	        var actions = [];
  	        if (direction & DIRECTION_HORIZONTAL) {
  	            actions.push(TOUCH_ACTION_PAN_Y);
  	        }
  	        if (direction & DIRECTION_VERTICAL) {
  	            actions.push(TOUCH_ACTION_PAN_X);
  	        }
  	        return actions;
  	    },

  	    directionTest: function(input) {
  	        var options = this.options;
  	        var hasMoved = true;
  	        var distance = input.distance;
  	        var direction = input.direction;
  	        var x = input.deltaX;
  	        var y = input.deltaY;

  	        // lock to axis?
  	        if (!(direction & options.direction)) {
  	            if (options.direction & DIRECTION_HORIZONTAL) {
  	                direction = (x === 0) ? DIRECTION_NONE : (x < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
  	                hasMoved = x != this.pX;
  	                distance = Math.abs(input.deltaX);
  	            } else {
  	                direction = (y === 0) ? DIRECTION_NONE : (y < 0) ? DIRECTION_UP : DIRECTION_DOWN;
  	                hasMoved = y != this.pY;
  	                distance = Math.abs(input.deltaY);
  	            }
  	        }
  	        input.direction = direction;
  	        return hasMoved && distance > options.threshold && direction & options.direction;
  	    },

  	    attrTest: function(input) {
  	        return AttrRecognizer.prototype.attrTest.call(this, input) &&
  	            (this.state & STATE_BEGAN || (!(this.state & STATE_BEGAN) && this.directionTest(input)));
  	    },

  	    emit: function(input) {

  	        this.pX = input.deltaX;
  	        this.pY = input.deltaY;

  	        var direction = directionStr(input.direction);

  	        if (direction) {
  	            input.additionalEvent = this.options.event + direction;
  	        }
  	        this._super.emit.call(this, input);
  	    }
  	});

  	/**
  	 * Pinch
  	 * Recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out).
  	 * @constructor
  	 * @extends AttrRecognizer
  	 */
  	function PinchRecognizer() {
  	    AttrRecognizer.apply(this, arguments);
  	}

  	inherit(PinchRecognizer, AttrRecognizer, {
  	    /**
  	     * @namespace
  	     * @memberof PinchRecognizer
  	     */
  	    defaults: {
  	        event: 'pinch',
  	        threshold: 0,
  	        pointers: 2
  	    },

  	    getTouchAction: function() {
  	        return [TOUCH_ACTION_NONE];
  	    },

  	    attrTest: function(input) {
  	        return this._super.attrTest.call(this, input) &&
  	            (Math.abs(input.scale - 1) > this.options.threshold || this.state & STATE_BEGAN);
  	    },

  	    emit: function(input) {
  	        if (input.scale !== 1) {
  	            var inOut = input.scale < 1 ? 'in' : 'out';
  	            input.additionalEvent = this.options.event + inOut;
  	        }
  	        this._super.emit.call(this, input);
  	    }
  	});

  	/**
  	 * Press
  	 * Recognized when the pointer is down for x ms without any movement.
  	 * @constructor
  	 * @extends Recognizer
  	 */
  	function PressRecognizer() {
  	    Recognizer.apply(this, arguments);

  	    this._timer = null;
  	    this._input = null;
  	}

  	inherit(PressRecognizer, Recognizer, {
  	    /**
  	     * @namespace
  	     * @memberof PressRecognizer
  	     */
  	    defaults: {
  	        event: 'press',
  	        pointers: 1,
  	        time: 251, // minimal time of the pointer to be pressed
  	        threshold: 9 // a minimal movement is ok, but keep it low
  	    },

  	    getTouchAction: function() {
  	        return [TOUCH_ACTION_AUTO];
  	    },

  	    process: function(input) {
  	        var options = this.options;
  	        var validPointers = input.pointers.length === options.pointers;
  	        var validMovement = input.distance < options.threshold;
  	        var validTime = input.deltaTime > options.time;

  	        this._input = input;

  	        // we only allow little movement
  	        // and we've reached an end event, so a tap is possible
  	        if (!validMovement || !validPointers || (input.eventType & (INPUT_END | INPUT_CANCEL) && !validTime)) {
  	            this.reset();
  	        } else if (input.eventType & INPUT_START) {
  	            this.reset();
  	            this._timer = setTimeoutContext(function() {
  	                this.state = STATE_RECOGNIZED;
  	                this.tryEmit();
  	            }, options.time, this);
  	        } else if (input.eventType & INPUT_END) {
  	            return STATE_RECOGNIZED;
  	        }
  	        return STATE_FAILED;
  	    },

  	    reset: function() {
  	        clearTimeout(this._timer);
  	    },

  	    emit: function(input) {
  	        if (this.state !== STATE_RECOGNIZED) {
  	            return;
  	        }

  	        if (input && (input.eventType & INPUT_END)) {
  	            this.manager.emit(this.options.event + 'up', input);
  	        } else {
  	            this._input.timeStamp = now();
  	            this.manager.emit(this.options.event, this._input);
  	        }
  	    }
  	});

  	/**
  	 * Rotate
  	 * Recognized when two or more pointer are moving in a circular motion.
  	 * @constructor
  	 * @extends AttrRecognizer
  	 */
  	function RotateRecognizer() {
  	    AttrRecognizer.apply(this, arguments);
  	}

  	inherit(RotateRecognizer, AttrRecognizer, {
  	    /**
  	     * @namespace
  	     * @memberof RotateRecognizer
  	     */
  	    defaults: {
  	        event: 'rotate',
  	        threshold: 0,
  	        pointers: 2
  	    },

  	    getTouchAction: function() {
  	        return [TOUCH_ACTION_NONE];
  	    },

  	    attrTest: function(input) {
  	        return this._super.attrTest.call(this, input) &&
  	            (Math.abs(input.rotation) > this.options.threshold || this.state & STATE_BEGAN);
  	    }
  	});

  	/**
  	 * Swipe
  	 * Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction.
  	 * @constructor
  	 * @extends AttrRecognizer
  	 */
  	function SwipeRecognizer() {
  	    AttrRecognizer.apply(this, arguments);
  	}

  	inherit(SwipeRecognizer, AttrRecognizer, {
  	    /**
  	     * @namespace
  	     * @memberof SwipeRecognizer
  	     */
  	    defaults: {
  	        event: 'swipe',
  	        threshold: 10,
  	        velocity: 0.3,
  	        direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL,
  	        pointers: 1
  	    },

  	    getTouchAction: function() {
  	        return PanRecognizer.prototype.getTouchAction.call(this);
  	    },

  	    attrTest: function(input) {
  	        var direction = this.options.direction;
  	        var velocity;

  	        if (direction & (DIRECTION_HORIZONTAL | DIRECTION_VERTICAL)) {
  	            velocity = input.overallVelocity;
  	        } else if (direction & DIRECTION_HORIZONTAL) {
  	            velocity = input.overallVelocityX;
  	        } else if (direction & DIRECTION_VERTICAL) {
  	            velocity = input.overallVelocityY;
  	        }

  	        return this._super.attrTest.call(this, input) &&
  	            direction & input.offsetDirection &&
  	            input.distance > this.options.threshold &&
  	            input.maxPointers == this.options.pointers &&
  	            abs(velocity) > this.options.velocity && input.eventType & INPUT_END;
  	    },

  	    emit: function(input) {
  	        var direction = directionStr(input.offsetDirection);
  	        if (direction) {
  	            this.manager.emit(this.options.event + direction, input);
  	        }

  	        this.manager.emit(this.options.event, input);
  	    }
  	});

  	/**
  	 * A tap is ecognized when the pointer is doing a small tap/click. Multiple taps are recognized if they occur
  	 * between the given interval and position. The delay option can be used to recognize multi-taps without firing
  	 * a single tap.
  	 *
  	 * The eventData from the emitted event contains the property `tapCount`, which contains the amount of
  	 * multi-taps being recognized.
  	 * @constructor
  	 * @extends Recognizer
  	 */
  	function TapRecognizer() {
  	    Recognizer.apply(this, arguments);

  	    // previous time and center,
  	    // used for tap counting
  	    this.pTime = false;
  	    this.pCenter = false;

  	    this._timer = null;
  	    this._input = null;
  	    this.count = 0;
  	}

  	inherit(TapRecognizer, Recognizer, {
  	    /**
  	     * @namespace
  	     * @memberof PinchRecognizer
  	     */
  	    defaults: {
  	        event: 'tap',
  	        pointers: 1,
  	        taps: 1,
  	        interval: 300, // max time between the multi-tap taps
  	        time: 250, // max time of the pointer to be down (like finger on the screen)
  	        threshold: 9, // a minimal movement is ok, but keep it low
  	        posThreshold: 10 // a multi-tap can be a bit off the initial position
  	    },

  	    getTouchAction: function() {
  	        return [TOUCH_ACTION_MANIPULATION];
  	    },

  	    process: function(input) {
  	        var options = this.options;

  	        var validPointers = input.pointers.length === options.pointers;
  	        var validMovement = input.distance < options.threshold;
  	        var validTouchTime = input.deltaTime < options.time;

  	        this.reset();

  	        if ((input.eventType & INPUT_START) && (this.count === 0)) {
  	            return this.failTimeout();
  	        }

  	        // we only allow little movement
  	        // and we've reached an end event, so a tap is possible
  	        if (validMovement && validTouchTime && validPointers) {
  	            if (input.eventType != INPUT_END) {
  	                return this.failTimeout();
  	            }

  	            var validInterval = this.pTime ? (input.timeStamp - this.pTime < options.interval) : true;
  	            var validMultiTap = !this.pCenter || getDistance(this.pCenter, input.center) < options.posThreshold;

  	            this.pTime = input.timeStamp;
  	            this.pCenter = input.center;

  	            if (!validMultiTap || !validInterval) {
  	                this.count = 1;
  	            } else {
  	                this.count += 1;
  	            }

  	            this._input = input;

  	            // if tap count matches we have recognized it,
  	            // else it has began recognizing...
  	            var tapCount = this.count % options.taps;
  	            if (tapCount === 0) {
  	                // no failing requirements, immediately trigger the tap event
  	                // or wait as long as the multitap interval to trigger
  	                if (!this.hasRequireFailures()) {
  	                    return STATE_RECOGNIZED;
  	                } else {
  	                    this._timer = setTimeoutContext(function() {
  	                        this.state = STATE_RECOGNIZED;
  	                        this.tryEmit();
  	                    }, options.interval, this);
  	                    return STATE_BEGAN;
  	                }
  	            }
  	        }
  	        return STATE_FAILED;
  	    },

  	    failTimeout: function() {
  	        this._timer = setTimeoutContext(function() {
  	            this.state = STATE_FAILED;
  	        }, this.options.interval, this);
  	        return STATE_FAILED;
  	    },

  	    reset: function() {
  	        clearTimeout(this._timer);
  	    },

  	    emit: function() {
  	        if (this.state == STATE_RECOGNIZED) {
  	            this._input.tapCount = this.count;
  	            this.manager.emit(this.options.event, this._input);
  	        }
  	    }
  	});

  	/**
  	 * Simple way to create a manager with a default set of recognizers.
  	 * @param {HTMLElement} element
  	 * @param {Object} [options]
  	 * @constructor
  	 */
  	function Hammer(element, options) {
  	    options = options || {};
  	    options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
  	    return new Manager(element, options);
  	}

  	/**
  	 * @const {string}
  	 */
  	Hammer.VERSION = '2.0.7';

  	/**
  	 * default settings
  	 * @namespace
  	 */
  	Hammer.defaults = {
  	    /**
  	     * set if DOM events are being triggered.
  	     * But this is slower and unused by simple implementations, so disabled by default.
  	     * @type {Boolean}
  	     * @default false
  	     */
  	    domEvents: false,

  	    /**
  	     * The value for the touchAction property/fallback.
  	     * When set to `compute` it will magically set the correct value based on the added recognizers.
  	     * @type {String}
  	     * @default compute
  	     */
  	    touchAction: TOUCH_ACTION_COMPUTE,

  	    /**
  	     * @type {Boolean}
  	     * @default true
  	     */
  	    enable: true,

  	    /**
  	     * EXPERIMENTAL FEATURE -- can be removed/changed
  	     * Change the parent input target element.
  	     * If Null, then it is being set the to main element.
  	     * @type {Null|EventTarget}
  	     * @default null
  	     */
  	    inputTarget: null,

  	    /**
  	     * force an input class
  	     * @type {Null|Function}
  	     * @default null
  	     */
  	    inputClass: null,

  	    /**
  	     * Default recognizer setup when calling `Hammer()`
  	     * When creating a new Manager these will be skipped.
  	     * @type {Array}
  	     */
  	    preset: [
  	        // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
  	        [RotateRecognizer, {enable: false}],
  	        [PinchRecognizer, {enable: false}, ['rotate']],
  	        [SwipeRecognizer, {direction: DIRECTION_HORIZONTAL}],
  	        [PanRecognizer, {direction: DIRECTION_HORIZONTAL}, ['swipe']],
  	        [TapRecognizer],
  	        [TapRecognizer, {event: 'doubletap', taps: 2}, ['tap']],
  	        [PressRecognizer]
  	    ],

  	    /**
  	     * Some CSS properties can be used to improve the working of Hammer.
  	     * Add them to this method and they will be set when creating a new Manager.
  	     * @namespace
  	     */
  	    cssProps: {
  	        /**
  	         * Disables text selection to improve the dragging gesture. Mainly for desktop browsers.
  	         * @type {String}
  	         * @default 'none'
  	         */
  	        userSelect: 'none',

  	        /**
  	         * Disable the Windows Phone grippers when pressing an element.
  	         * @type {String}
  	         * @default 'none'
  	         */
  	        touchSelect: 'none',

  	        /**
  	         * Disables the default callout shown when you touch and hold a touch target.
  	         * On iOS, when you touch and hold a touch target such as a link, Safari displays
  	         * a callout containing information about the link. This property allows you to disable that callout.
  	         * @type {String}
  	         * @default 'none'
  	         */
  	        touchCallout: 'none',

  	        /**
  	         * Specifies whether zooming is enabled. Used by IE10>
  	         * @type {String}
  	         * @default 'none'
  	         */
  	        contentZooming: 'none',

  	        /**
  	         * Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers.
  	         * @type {String}
  	         * @default 'none'
  	         */
  	        userDrag: 'none',

  	        /**
  	         * Overrides the highlight color shown when the user taps a link or a JavaScript
  	         * clickable element in iOS. This property obeys the alpha value, if specified.
  	         * @type {String}
  	         * @default 'rgba(0,0,0,0)'
  	         */
  	        tapHighlightColor: 'rgba(0,0,0,0)'
  	    }
  	};

  	var STOP = 1;
  	var FORCED_STOP = 2;

  	/**
  	 * Manager
  	 * @param {HTMLElement} element
  	 * @param {Object} [options]
  	 * @constructor
  	 */
  	function Manager(element, options) {
  	    this.options = assign({}, Hammer.defaults, options || {});

  	    this.options.inputTarget = this.options.inputTarget || element;

  	    this.handlers = {};
  	    this.session = {};
  	    this.recognizers = [];
  	    this.oldCssProps = {};

  	    this.element = element;
  	    this.input = createInputInstance(this);
  	    this.touchAction = new TouchAction(this, this.options.touchAction);

  	    toggleCssProps(this, true);

  	    each(this.options.recognizers, function(item) {
  	        var recognizer = this.add(new (item[0])(item[1]));
  	        item[2] && recognizer.recognizeWith(item[2]);
  	        item[3] && recognizer.requireFailure(item[3]);
  	    }, this);
  	}

  	Manager.prototype = {
  	    /**
  	     * set options
  	     * @param {Object} options
  	     * @returns {Manager}
  	     */
  	    set: function(options) {
  	        assign(this.options, options);

  	        // Options that need a little more setup
  	        if (options.touchAction) {
  	            this.touchAction.update();
  	        }
  	        if (options.inputTarget) {
  	            // Clean up existing event listeners and reinitialize
  	            this.input.destroy();
  	            this.input.target = options.inputTarget;
  	            this.input.init();
  	        }
  	        return this;
  	    },

  	    /**
  	     * stop recognizing for this session.
  	     * This session will be discarded, when a new [input]start event is fired.
  	     * When forced, the recognizer cycle is stopped immediately.
  	     * @param {Boolean} [force]
  	     */
  	    stop: function(force) {
  	        this.session.stopped = force ? FORCED_STOP : STOP;
  	    },

  	    /**
  	     * run the recognizers!
  	     * called by the inputHandler function on every movement of the pointers (touches)
  	     * it walks through all the recognizers and tries to detect the gesture that is being made
  	     * @param {Object} inputData
  	     */
  	    recognize: function(inputData) {
  	        var session = this.session;
  	        if (session.stopped) {
  	            return;
  	        }

  	        // run the touch-action polyfill
  	        this.touchAction.preventDefaults(inputData);

  	        var recognizer;
  	        var recognizers = this.recognizers;

  	        // this holds the recognizer that is being recognized.
  	        // so the recognizer's state needs to be BEGAN, CHANGED, ENDED or RECOGNIZED
  	        // if no recognizer is detecting a thing, it is set to `null`
  	        var curRecognizer = session.curRecognizer;

  	        // reset when the last recognizer is recognized
  	        // or when we're in a new session
  	        if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
  	            curRecognizer = session.curRecognizer = null;
  	        }

  	        var i = 0;
  	        while (i < recognizers.length) {
  	            recognizer = recognizers[i];

  	            // find out if we are allowed try to recognize the input for this one.
  	            // 1.   allow if the session is NOT forced stopped (see the .stop() method)
  	            // 2.   allow if we still haven't recognized a gesture in this session, or the this recognizer is the one
  	            //      that is being recognized.
  	            // 3.   allow if the recognizer is allowed to run simultaneous with the current recognized recognizer.
  	            //      this can be setup with the `recognizeWith()` method on the recognizer.
  	            if (session.stopped !== FORCED_STOP && ( // 1
  	                    !curRecognizer || recognizer == curRecognizer || // 2
  	                    recognizer.canRecognizeWith(curRecognizer))) { // 3
  	                recognizer.recognize(inputData);
  	            } else {
  	                recognizer.reset();
  	            }

  	            // if the recognizer has been recognizing the input as a valid gesture, we want to store this one as the
  	            // current active recognizer. but only if we don't already have an active recognizer
  	            if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
  	                curRecognizer = session.curRecognizer = recognizer;
  	            }
  	            i++;
  	        }
  	    },

  	    /**
  	     * get a recognizer by its event name.
  	     * @param {Recognizer|String} recognizer
  	     * @returns {Recognizer|Null}
  	     */
  	    get: function(recognizer) {
  	        if (recognizer instanceof Recognizer) {
  	            return recognizer;
  	        }

  	        var recognizers = this.recognizers;
  	        for (var i = 0; i < recognizers.length; i++) {
  	            if (recognizers[i].options.event == recognizer) {
  	                return recognizers[i];
  	            }
  	        }
  	        return null;
  	    },

  	    /**
  	     * add a recognizer to the manager
  	     * existing recognizers with the same event name will be removed
  	     * @param {Recognizer} recognizer
  	     * @returns {Recognizer|Manager}
  	     */
  	    add: function(recognizer) {
  	        if (invokeArrayArg(recognizer, 'add', this)) {
  	            return this;
  	        }

  	        // remove existing
  	        var existing = this.get(recognizer.options.event);
  	        if (existing) {
  	            this.remove(existing);
  	        }

  	        this.recognizers.push(recognizer);
  	        recognizer.manager = this;

  	        this.touchAction.update();
  	        return recognizer;
  	    },

  	    /**
  	     * remove a recognizer by name or instance
  	     * @param {Recognizer|String} recognizer
  	     * @returns {Manager}
  	     */
  	    remove: function(recognizer) {
  	        if (invokeArrayArg(recognizer, 'remove', this)) {
  	            return this;
  	        }

  	        recognizer = this.get(recognizer);

  	        // let's make sure this recognizer exists
  	        if (recognizer) {
  	            var recognizers = this.recognizers;
  	            var index = inArray(recognizers, recognizer);

  	            if (index !== -1) {
  	                recognizers.splice(index, 1);
  	                this.touchAction.update();
  	            }
  	        }

  	        return this;
  	    },

  	    /**
  	     * bind event
  	     * @param {String} events
  	     * @param {Function} handler
  	     * @returns {EventEmitter} this
  	     */
  	    on: function(events, handler) {
  	        if (events === undefined$1) {
  	            return;
  	        }
  	        if (handler === undefined$1) {
  	            return;
  	        }

  	        var handlers = this.handlers;
  	        each(splitStr(events), function(event) {
  	            handlers[event] = handlers[event] || [];
  	            handlers[event].push(handler);
  	        });
  	        return this;
  	    },

  	    /**
  	     * unbind event, leave emit blank to remove all handlers
  	     * @param {String} events
  	     * @param {Function} [handler]
  	     * @returns {EventEmitter} this
  	     */
  	    off: function(events, handler) {
  	        if (events === undefined$1) {
  	            return;
  	        }

  	        var handlers = this.handlers;
  	        each(splitStr(events), function(event) {
  	            if (!handler) {
  	                delete handlers[event];
  	            } else {
  	                handlers[event] && handlers[event].splice(inArray(handlers[event], handler), 1);
  	            }
  	        });
  	        return this;
  	    },

  	    /**
  	     * emit event to the listeners
  	     * @param {String} event
  	     * @param {Object} data
  	     */
  	    emit: function(event, data) {
  	        // we also want to trigger dom events
  	        if (this.options.domEvents) {
  	            triggerDomEvent(event, data);
  	        }

  	        // no handlers, so skip it all
  	        var handlers = this.handlers[event] && this.handlers[event].slice();
  	        if (!handlers || !handlers.length) {
  	            return;
  	        }

  	        data.type = event;
  	        data.preventDefault = function() {
  	            data.srcEvent.preventDefault();
  	        };

  	        var i = 0;
  	        while (i < handlers.length) {
  	            handlers[i](data);
  	            i++;
  	        }
  	    },

  	    /**
  	     * destroy the manager and unbinds all events
  	     * it doesn't unbind dom events, that is the user own responsibility
  	     */
  	    destroy: function() {
  	        this.element && toggleCssProps(this, false);

  	        this.handlers = {};
  	        this.session = {};
  	        this.input.destroy();
  	        this.element = null;
  	    }
  	};

  	/**
  	 * add/remove the css properties as defined in manager.options.cssProps
  	 * @param {Manager} manager
  	 * @param {Boolean} add
  	 */
  	function toggleCssProps(manager, add) {
  	    var element = manager.element;
  	    if (!element.style) {
  	        return;
  	    }
  	    var prop;
  	    each(manager.options.cssProps, function(value, name) {
  	        prop = prefixed(element.style, name);
  	        if (add) {
  	            manager.oldCssProps[prop] = element.style[prop];
  	            element.style[prop] = value;
  	        } else {
  	            element.style[prop] = manager.oldCssProps[prop] || '';
  	        }
  	    });
  	    if (!add) {
  	        manager.oldCssProps = {};
  	    }
  	}

  	/**
  	 * trigger dom event
  	 * @param {String} event
  	 * @param {Object} data
  	 */
  	function triggerDomEvent(event, data) {
  	    var gestureEvent = document.createEvent('Event');
  	    gestureEvent.initEvent(event, true, true);
  	    gestureEvent.gesture = data;
  	    data.target.dispatchEvent(gestureEvent);
  	}

  	assign(Hammer, {
  	    INPUT_START: INPUT_START,
  	    INPUT_MOVE: INPUT_MOVE,
  	    INPUT_END: INPUT_END,
  	    INPUT_CANCEL: INPUT_CANCEL,

  	    STATE_POSSIBLE: STATE_POSSIBLE,
  	    STATE_BEGAN: STATE_BEGAN,
  	    STATE_CHANGED: STATE_CHANGED,
  	    STATE_ENDED: STATE_ENDED,
  	    STATE_RECOGNIZED: STATE_RECOGNIZED,
  	    STATE_CANCELLED: STATE_CANCELLED,
  	    STATE_FAILED: STATE_FAILED,

  	    DIRECTION_NONE: DIRECTION_NONE,
  	    DIRECTION_LEFT: DIRECTION_LEFT,
  	    DIRECTION_RIGHT: DIRECTION_RIGHT,
  	    DIRECTION_UP: DIRECTION_UP,
  	    DIRECTION_DOWN: DIRECTION_DOWN,
  	    DIRECTION_HORIZONTAL: DIRECTION_HORIZONTAL,
  	    DIRECTION_VERTICAL: DIRECTION_VERTICAL,
  	    DIRECTION_ALL: DIRECTION_ALL,

  	    Manager: Manager,
  	    Input: Input,
  	    TouchAction: TouchAction,

  	    TouchInput: TouchInput,
  	    MouseInput: MouseInput,
  	    PointerEventInput: PointerEventInput,
  	    TouchMouseInput: TouchMouseInput,
  	    SingleTouchInput: SingleTouchInput,

  	    Recognizer: Recognizer,
  	    AttrRecognizer: AttrRecognizer,
  	    Tap: TapRecognizer,
  	    Pan: PanRecognizer,
  	    Swipe: SwipeRecognizer,
  	    Pinch: PinchRecognizer,
  	    Rotate: RotateRecognizer,
  	    Press: PressRecognizer,

  	    on: addEventListeners,
  	    off: removeEventListeners,
  	    each: each,
  	    merge: merge,
  	    extend: extend,
  	    assign: assign,
  	    inherit: inherit,
  	    bindFn: bindFn,
  	    prefixed: prefixed
  	});

  	// this prevents errors when Hammer is loaded in the presence of an AMD
  	//  style loader but by script tag, not by the loader.
  	var freeGlobal = (typeof window !== 'undefined' ? window : (typeof self !== 'undefined' ? self : {})); // jshint ignore:line
  	freeGlobal.Hammer = Hammer;

  	if (typeof undefined$1 === 'function' && undefined$1.amd) {
  	    undefined$1(function() {
  	        return Hammer;
  	    });
  	} else if (module.exports) {
  	    module.exports = Hammer;
  	} else {
  	    window[exportName] = Hammer;
  	}

  	})(window, document, 'Hammer');
  } (hammer));

  var Hammer = hammer.exports;

  var MIN_ZOOM = 0.2,
      MAX_ZOOM = 4;

  var mouseEvents = [
    'mousedown',
    'mouseup',
    'mouseover',
    'mouseout',
    'click',
    'dblclick'
  ];

  function get(service, injector) {
    return injector.get(service, false);
  }

  function stopEvent(event) {

    event.preventDefault();

    if (typeof event.stopPropagation === 'function') {
      event.stopPropagation();
    } else if (event.srcEvent && typeof event.srcEvent.stopPropagation === 'function') {

      // iPhone & iPad
      event.srcEvent.stopPropagation();
    }

    if (typeof event.stopImmediatePropagation === 'function') {
      event.stopImmediatePropagation();
    }
  }


  function createTouchRecognizer(node) {

    function stopMouse(event) {

      forEach$1(mouseEvents, function(e) {
        componentEvent.bind(node, e, stopEvent, true);
      });
    }

    function allowMouse(event) {
      setTimeout(function() {
        forEach$1(mouseEvents, function(e) {
          componentEvent.unbind(node, e, stopEvent, true);
        });
      }, 500);
    }

    componentEvent.bind(node, 'touchstart', stopMouse, true);
    componentEvent.bind(node, 'touchend', allowMouse, true);
    componentEvent.bind(node, 'touchcancel', allowMouse, true);

    // A touch event recognizer that handles
    // touch events only (we know, we can already handle
    // mouse events out of the box)

    var recognizer = new Hammer.Manager(node, {
      inputClass: Hammer.TouchInput,
      recognizers: [],
      domEvents: true
    });


    var tap = new Hammer.Tap();
    var pan = new Hammer.Pan({ threshold: 10 });
    var press = new Hammer.Press();
    var pinch = new Hammer.Pinch();

    var doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });

    pinch.requireFailure(pan);
    pinch.requireFailure(press);

    recognizer.add([ pan, press, pinch, doubleTap, tap ]);

    recognizer.reset = function(force) {
      var recognizers = this.recognizers,
          session = this.session;

      if (session.stopped) {
        return;
      }

      recognizer.stop(force);

      setTimeout(function() {
        var i, r;
        for (i = 0; (r = recognizers[i]); i++) {
          r.reset();
          r.state = 8; // FAILED STATE
        }

        session.curRecognizer = null;
      }, 0);
    };

    recognizer.on('hammer.input', function(event) {
      if (event.srcEvent.defaultPrevented) {
        recognizer.reset(true);
      }
    });

    return recognizer;
  }

  /**
   * A plugin that provides touch events for elements.
   *
   * @param {EventBus} eventBus
   * @param {InteractionEvents} interactionEvents
   */
  function TouchInteractionEvents(
      injector, canvas, eventBus,
      elementRegistry, interactionEvents) {

    // optional integrations
    var dragging = get('dragging', injector),
        move = get('move', injector),
        contextPad = get('contextPad', injector),
        palette = get('palette', injector);

    // the touch recognizer
    var recognizer;

    function handler(type, buttonType) {

      return function(event) {

        var gfx = getGfx(event.target),
            element = gfx && elementRegistry.get(gfx);

        // translate into an actual mouse click event
        if (buttonType) {
          event.srcEvent.button = buttonType;
        }

        return interactionEvents.fire(type, event, element);
      };
    }


    function getGfx(target) {
      var node = closest(target, 'svg, .djs-element', true);
      return node;
    }

    function initEvents(svg) {

      // touch recognizer
      recognizer = createTouchRecognizer(svg);

      function startGrabCanvas(event) {

        var lx = 0, ly = 0;

        function update(e) {

          var dx = e.deltaX - lx,
              dy = e.deltaY - ly;

          canvas.scroll({ dx: dx, dy: dy });

          lx = e.deltaX;
          ly = e.deltaY;
        }

        function end(e) {
          recognizer.off('panmove', update);
          recognizer.off('panend', end);
          recognizer.off('pancancel', end);
        }

        recognizer.on('panmove', update);
        recognizer.on('panend', end);
        recognizer.on('pancancel', end);
      }

      function startGrab(event) {

        var gfx = getGfx(event.target),
            element = gfx && elementRegistry.get(gfx);

        // recognizer
        if (move && canvas.getRootElement() !== element) {
          return move.start(event, element, true);
        } else {
          startGrabCanvas();
        }
      }

      function startZoom(e) {

        var zoom = canvas.zoom(),
            mid = e.center;

        function update(e) {

          var ratio = 1 - (1 - e.scale) / 1.50,
              newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, ratio * zoom));

          canvas.zoom(newZoom, mid);

          stopEvent(e);
        }

        function end(e) {
          recognizer.off('pinchmove', update);
          recognizer.off('pinchend', end);
          recognizer.off('pinchcancel', end);

          recognizer.reset(true);
        }

        recognizer.on('pinchmove', update);
        recognizer.on('pinchend', end);
        recognizer.on('pinchcancel', end);
      }

      recognizer.on('tap', handler('element.click'));
      recognizer.on('doubletap', handler('element.dblclick', 1));

      recognizer.on('panstart', startGrab);
      recognizer.on('press', startGrab);

      recognizer.on('pinchstart', startZoom);
    }

    if (dragging) {

      // simulate hover during dragging
      eventBus.on('drag.move', function(event) {

        var originalEvent = event.originalEvent;

        if (!originalEvent || originalEvent instanceof MouseEvent) {
          return;
        }

        var position = toPoint(originalEvent);

        // this gets really expensive ...
        var node = document.elementFromPoint(position.x, position.y),
            gfx = getGfx(node),
            element = gfx && elementRegistry.get(gfx);

        if (element !== event.hover) {
          if (event.hover) {
            dragging.out(event);
          }

          if (element) {
            dragging.hover({ element: element, gfx: gfx });

            event.hover = element;
            event.hoverGfx = gfx;
          }
        }
      });
    }

    if (contextPad) {

      eventBus.on('contextPad.create', function(event) {
        var node = event.pad.html;

        // touch recognizer
        var padRecognizer = createTouchRecognizer(node);

        padRecognizer.on('panstart', function(event) {
          contextPad.trigger('dragstart', event, true);
        });

        padRecognizer.on('press', function(event) {
          contextPad.trigger('dragstart', event, true);
        });

        padRecognizer.on('tap', function(event) {
          contextPad.trigger('click', event);
        });
      });
    }

    if (palette) {
      eventBus.on('palette.create', function(event) {
        var node = event.container;

        // touch recognizer
        var padRecognizer = createTouchRecognizer(node);

        padRecognizer.on('panstart', function(event) {
          palette.trigger('dragstart', event, true);
        });

        padRecognizer.on('press', function(event) {
          palette.trigger('dragstart', event, true);
        });

        padRecognizer.on('tap', function(event) {
          palette.trigger('click', event);
        });
      });
    }

    eventBus.on('canvas.init', function(event) {
      initEvents(event.svg);
    });
  }


  TouchInteractionEvents.$inject = [
    'injector',
    'canvas',
    'eventBus',
    'elementRegistry',
    'interactionEvents',
    'touchFix'
  ];

  function TouchFix(canvas, eventBus) {

    var self = this;

    eventBus.on('canvas.init', function(e) {
      self.addBBoxMarker(e.svg);
    });
  }

  TouchFix.$inject = [ 'canvas', 'eventBus' ];


  /**
   * Safari mobile (iOS 7) does not fire touchstart event in <SVG> element
   * if there is no shape between 0,0 and viewport elements origin.
   *
   * So touchstart event is only fired when the <g class="viewport"> element was hit.
   * Putting an element over and below the 'viewport' fixes that behavior.
   */
  TouchFix.prototype.addBBoxMarker = function(svg) {

    var markerStyle = {
      fill: 'none',
      class: 'outer-bound-marker'
    };

    var rect1 = create$1('rect');
    attr(rect1, {
      x: -10000,
      y: 10000,
      width: 10,
      height: 10
    });
    attr(rect1, markerStyle);

    append(svg, rect1);

    var rect2 = create$1('rect');
    attr(rect2, {
      x: 10000,
      y: 10000,
      width: 10,
      height: 10
    });
    attr(rect2, markerStyle);

    append(svg, rect2);
  };

  var TouchModule$1 = {
    __depends__: [ InteractionEventsModule$1 ],
    __init__: [ 'touchInteractionEvents' ],
    touchInteractionEvents: [ 'type', TouchInteractionEvents ],
    touchFix: [ 'type', TouchFix ]
  };

  var TouchModule = {
    __depends__: [
      TouchModule$1
    ]
  };

  function last(arr) {
    return arr && arr[arr.length - 1];
  }

  function sortTopOrMiddle(element) {
    return element.y;
  }

  function sortLeftOrCenter(element) {
    return element.x;
  }

  /**
   * Sorting functions for different types of alignment
   *
   * @type {Object}
   *
   * @return {Function}
   */
  var ALIGNMENT_SORTING = {
    left: sortLeftOrCenter,
    center: sortLeftOrCenter,
    right: function(element) {
      return element.x + element.width;
    },
    top: sortTopOrMiddle,
    middle: sortTopOrMiddle,
    bottom: function(element) {
      return element.y + element.height;
    }
  };


  function AlignElements$1(modeling, rules) {
    this._modeling = modeling;
    this._rules = rules;
  }

  AlignElements$1.$inject = [ 'modeling', 'rules' ];


  /**
   * Get the relevant "axis" and "dimension" related to the current type of alignment
   *
   * @param  {string} type left|right|center|top|bottom|middle
   *
   * @return {Object} { axis, dimension }
   */
  AlignElements$1.prototype._getOrientationDetails = function(type) {
    var vertical = [ 'top', 'bottom', 'middle' ],
        axis = 'x',
        dimension = 'width';

    if (vertical.indexOf(type) !== -1) {
      axis = 'y';
      dimension = 'height';
    }

    return {
      axis: axis,
      dimension: dimension
    };
  };

  AlignElements$1.prototype._isType = function(type, types) {
    return types.indexOf(type) !== -1;
  };

  /**
   * Get a point on the relevant axis where elements should align to
   *
   * @param  {string} type left|right|center|top|bottom|middle
   * @param  {Array} sortedElements
   *
   * @return {Object}
   */
  AlignElements$1.prototype._alignmentPosition = function(type, sortedElements) {
    var orientation = this._getOrientationDetails(type),
        axis = orientation.axis,
        dimension = orientation.dimension,
        alignment = {},
        centers = {},
        hasSharedCenters = false,
        centeredElements,
        firstElement,
        lastElement;

    function getMiddleOrTop(first, last) {
      return Math.round((first[axis] + last[axis] + last[dimension]) / 2);
    }

    if (this._isType(type, [ 'left', 'top' ])) {
      alignment[type] = sortedElements[0][axis];

    } else if (this._isType(type, [ 'right', 'bottom' ])) {
      lastElement = last(sortedElements);

      alignment[type] = lastElement[axis] + lastElement[dimension];

    } else if (this._isType(type, [ 'center', 'middle' ])) {

      // check if there is a center shared by more than one shape
      // if not, just take the middle of the range
      forEach$1(sortedElements, function(element) {
        var center = element[axis] + Math.round(element[dimension] / 2);

        if (centers[center]) {
          centers[center].elements.push(element);
        } else {
          centers[center] = {
            elements: [ element ],
            center: center
          };
        }
      });

      centeredElements = sortBy(centers, function(center) {
        if (center.elements.length > 1) {
          hasSharedCenters = true;
        }

        return center.elements.length;
      });

      if (hasSharedCenters) {
        alignment[type] = last(centeredElements).center;

        return alignment;
      }

      firstElement = sortedElements[0];

      sortedElements = sortBy(sortedElements, function(element) {
        return element[axis] + element[dimension];
      });

      lastElement = last(sortedElements);

      alignment[type] = getMiddleOrTop(firstElement, lastElement);
    }

    return alignment;
  };

  /**
   * Executes the alignment of a selection of elements
   *
   * @param  {Array} elements
   * @param  {string} type left|right|center|top|bottom|middle
   */
  AlignElements$1.prototype.trigger = function(elements, type) {
    var modeling = this._modeling,
        allowed;

    // filter out elements which cannot be aligned
    var filteredElements = filter(elements, function(element) {
      return !(element.waypoints || element.host || element.labelTarget);
    });

    // filter out elements via rules
    allowed = this._rules.allowed('elements.align', { elements: filteredElements });
    if (isArray$3(allowed)) {
      filteredElements = allowed;
    }

    if (filteredElements.length < 2 || !allowed) {
      return;
    }

    var sortFn = ALIGNMENT_SORTING[type];

    var sortedElements = sortBy(filteredElements, sortFn);

    var alignment = this._alignmentPosition(type, sortedElements);

    modeling.alignElements(sortedElements, alignment);
  };

  var AlignElementsModule$1 = {
    __init__: [ 'alignElements' ],
    alignElements: [ 'type', AlignElements$1 ]
  };

  var entrySelector = '.entry';

  var DEFAULT_PRIORITY$2 = 1000;
  var CONTEXT_PAD_PADDING = 12;


  /**
   * @typedef {djs.model.Base|djs.model.Base[]} ContextPadTarget
   */

  /**
   * A context pad that displays element specific, contextual actions next
   * to a diagram element.
   *
   * @param {Canvas} canvas
   * @param {Object} config
   * @param {boolean|Object} [config.scale={ min: 1.0, max: 1.5 }]
   * @param {number} [config.scale.min]
   * @param {number} [config.scale.max]
   * @param {EventBus} eventBus
   * @param {Overlays} overlays
   */
  function ContextPad(canvas, config, eventBus, overlays) {

    this._canvas = canvas;
    this._eventBus = eventBus;
    this._overlays = overlays;

    var scale = isDefined(config && config.scale) ? config.scale : {
      min: 1,
      max: 1.5
    };

    this._overlaysConfig = {
      scale: scale
    };

    this._current = null;

    this._init();
  }

  ContextPad.$inject = [
    'canvas',
    'config.contextPad',
    'eventBus',
    'overlays'
  ];


  /**
   * Registers events needed for interaction with other components.
   */
  ContextPad.prototype._init = function() {
    var self = this;

    this._eventBus.on('selection.changed', function(event) {

      var selection = event.newSelection;

      var target = selection.length
        ? selection.length === 1
          ? selection[0]
          : selection
        : null;

      if (target) {
        self.open(target, true);
      } else {
        self.close();
      }
    });

    this._eventBus.on('elements.changed', function(event) {
      var elements = event.elements,
          current = self._current;

      if (!current) {
        return;
      }

      var currentTarget = current.target;

      var currentChanged = some(
        isArray$3(currentTarget) ? currentTarget : [ currentTarget ],
        function(element) {
          return includes$8(elements, element);
        }
      );

      // re-open if elements in current selection changed
      if (currentChanged) {
        self.open(currentTarget, true);
      }
    });
  };


  /**
   * Register context pad provider.
   *
   * @param  {number} [priority=1000]
   * @param  {ContextPadProvider} provider
   *
   * @example
   * const contextPadProvider = {
   *   getContextPadEntries: function(element) {
   *     return function(entries) {
   *       return {
   *         ...entries,
   *         'entry-1': {
   *           label: 'My Entry',
   *           action: function() { alert("I have been clicked!"); }
   *         }
   *       };
   *     }
   *   },
   *
   *   getMultiElementContextPadEntries: function(elements) {
   *     // ...
   *   }
   * };
   *
   * contextPad.registerProvider(800, contextPadProvider);
   */
  ContextPad.prototype.registerProvider = function(priority, provider) {
    if (!provider) {
      provider = priority;
      priority = DEFAULT_PRIORITY$2;
    }

    this._eventBus.on('contextPad.getProviders', priority, function(event) {
      event.providers.push(provider);
    });
  };


  /**
   * Get context pad entries for given elements.
   *
   * @param {ContextPadTarget} target
   *
   * @return {ContextPadEntryDescriptor[]} list of entries
   */
  ContextPad.prototype.getEntries = function(target) {
    var providers = this._getProviders();

    var provideFn = isArray$3(target)
      ? 'getMultiElementContextPadEntries'
      : 'getContextPadEntries';

    var entries = {};

    // loop through all providers and their entries.
    // group entries by id so that overriding an entry is possible
    forEach$1(providers, function(provider) {

      if (!isFunction(provider[provideFn])) {
        return;
      }

      var entriesOrUpdater = provider[provideFn](target);

      if (isFunction(entriesOrUpdater)) {
        entries = entriesOrUpdater(entries);
      } else {
        forEach$1(entriesOrUpdater, function(entry, id) {
          entries[id] = entry;
        });
      }
    });

    return entries;
  };


  /**
   * Trigger context pad action.
   *
   * @param  {string} action
   * @param  {Event} event
   * @param  {boolean} [autoActivate=false]
   */
  ContextPad.prototype.trigger = function(action, event, autoActivate) {

    var target = this._current.target,
        entries = this._current.entries,
        entry,
        handler,
        originalEvent,
        button = event.delegateTarget || event.target;

    if (!button) {
      return event.preventDefault();
    }

    entry = entries[attr$1(button, 'data-action')];
    handler = entry.action;

    originalEvent = event.originalEvent || event;

    // simple action (via callback function)
    if (isFunction(handler)) {
      if (action === 'click') {
        return handler(originalEvent, target, autoActivate);
      }
    } else {
      if (handler[action]) {
        return handler[action](originalEvent, target, autoActivate);
      }
    }

    // silence other actions
    event.preventDefault();
  };


  /**
   * Open the context pad for given elements.
   *
   * @param {ContextPadTarget} target
   * @param {boolean} [force=false] - Force re-opening context pad.
   */
  ContextPad.prototype.open = function(target, force) {
    if (!force && this.isOpen(target)) {
      return;
    }

    this.close();

    this._updateAndOpen(target);
  };

  ContextPad.prototype._getProviders = function() {

    var event = this._eventBus.createEvent({
      type: 'contextPad.getProviders',
      providers: []
    });

    this._eventBus.fire(event);

    return event.providers;
  };


  /**
   * @param {ContextPadTarget} target
   */
  ContextPad.prototype._updateAndOpen = function(target) {
    var entries = this.getEntries(target),
        pad = this.getPad(target),
        html = pad.html,
        image;

    forEach$1(entries, function(entry, id) {
      var grouping = entry.group || 'default',
          control = domify(entry.html || '<div class="entry" draggable="true"></div>'),
          container;

      attr$1(control, 'data-action', id);

      container = query('[data-group=' + cssEscape(grouping) + ']', html);
      if (!container) {
        container = domify('<div class="group"></div>');
        attr$1(container, 'data-group', grouping);

        html.appendChild(container);
      }

      container.appendChild(control);

      if (entry.className) {
        addClasses$1(control, entry.className);
      }

      if (entry.title) {
        attr$1(control, 'title', entry.title);
      }

      if (entry.imageUrl) {
        image = domify('<img>');
        attr$1(image, 'src', entry.imageUrl);
        image.style.width = '100%';
        image.style.height = '100%';

        control.appendChild(image);
      }
    });

    classes$1(html).add('open');

    this._current = {
      target: target,
      entries: entries,
      pad: pad
    };

    this._eventBus.fire('contextPad.open', { current: this._current });
  };

  /**
   * @param {ContextPadTarget} target
   *
   * @return {Overlay}
   */
  ContextPad.prototype.getPad = function(target) {
    if (this.isOpen()) {
      return this._current.pad;
    }

    var self = this;

    var overlays = this._overlays;

    var html = domify('<div class="djs-context-pad"></div>');

    var position = this._getPosition(target);

    var overlaysConfig = assign({
      html: html
    }, this._overlaysConfig, position);

    delegate.bind(html, entrySelector, 'click', function(event) {
      self.trigger('click', event);
    });

    delegate.bind(html, entrySelector, 'dragstart', function(event) {
      self.trigger('dragstart', event);
    });

    // stop propagation of mouse events
    componentEvent.bind(html, 'mousedown', function(event) {
      event.stopPropagation();
    });

    var activeRootElement = this._canvas.getRootElement();

    this._overlayId = overlays.add(activeRootElement, 'context-pad', overlaysConfig);

    var pad = overlays.get(this._overlayId);

    this._eventBus.fire('contextPad.create', {
      target: target,
      pad: pad
    });

    return pad;
  };


  /**
   * Close the context pad
   */
  ContextPad.prototype.close = function() {
    if (!this.isOpen()) {
      return;
    }

    this._overlays.remove(this._overlayId);

    this._overlayId = null;

    this._eventBus.fire('contextPad.close', { current: this._current });

    this._current = null;
  };

  /**
   * Check if pad is open.
   *
   * If target is provided, check if it is opened
   * for the given target (single or multiple elements).
   *
   * @param {ContextPadTarget} [target]
   * @return {boolean}
   */
  ContextPad.prototype.isOpen = function(target) {
    var current = this._current;

    if (!current) {
      return false;
    }

    // basic no-args is open check
    if (!target) {
      return true;
    }

    var currentTarget = current.target;

    // strict handling of single vs. multi-selection
    if (isArray$3(target) !== isArray$3(currentTarget)) {
      return false;
    }

    if (isArray$3(target)) {
      return (
        target.length === currentTarget.length &&
        every(target, function(element) {
          return includes$8(currentTarget, element);
        })
      );
    } else {
      return currentTarget === target;
    }
  };


  /**
   * Get contex pad position.
   *
   * @param {ContextPadTarget} target
   * @return {Bounds}
   */
  ContextPad.prototype._getPosition = function(target) {

    var elements = isArray$3(target) ? target : [ target ];
    var bBox = getBBox(elements);

    return {
      position: {
        left: bBox.x + bBox.width + CONTEXT_PAD_PADDING,
        top: bBox.y - CONTEXT_PAD_PADDING / 2
      }
    };
  };


  // helpers //////////

  function addClasses$1(element, classNames) {
    var classes = classes$1(element);

    classNames = isArray$3(classNames) ? classNames : classNames.split(/\s+/g);

    classNames.forEach(function(cls) {
      classes.add(cls);
    });
  }

  /**
   * @param {any[]} array
   * @param {any} item
   *
   * @return {boolean}
   */
  function includes$8(array, item) {
    return array.indexOf(item) !== -1;
  }

  var ContextPadModule$1 = {
    __depends__: [
      InteractionEventsModule$1,
      OverlaysModule
    ],
    contextPad: [ 'type', ContextPad ]
  };

  var DATA_REF = 'data-id';

  var CLOSE_EVENTS = [
    'contextPad.close',
    'canvas.viewbox.changing',
    'commandStack.changed'
  ];

  var DEFAULT_PRIORITY$1 = 1000;


  /**
   * A popup menu that can be used to display a list of actions anywhere in the canvas.
   *
   * @param {Object} config
   * @param {boolean|Object} [config.scale={ min: 1.0, max: 1.5 }]
   * @param {number} [config.scale.min]
   * @param {number} [config.scale.max]
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   *
   * @class
   * @constructor
   */
  function PopupMenu(config, eventBus, canvas) {

    var scale = isDefined(config && config.scale) ? config.scale : {
      min: 1,
      max: 1.5
    };

    this._config = {
      scale: scale
    };

    this._eventBus = eventBus;
    this._canvas = canvas;
    this._providers = {};
    this._current = {};
  }

  PopupMenu.$inject = [
    'config.popupMenu',
    'eventBus',
    'canvas'
  ];

  /**
   * Registers a popup menu provider
   *
   * @param  {string} id
   * @param {number} [priority=1000]
   * @param  {Object} provider
   *
   * @example
   * const popupMenuProvider = {
   *   getPopupMenuEntries: function(element) {
   *     return {
   *       'entry-1': {
   *         label: 'My Entry',
   *         action: function() { alert("I have been clicked!"); }
   *       }
   *     }
   *   }
   * };
   *
   * popupMenu.registerProvider('myMenuID', popupMenuProvider);
   */
  PopupMenu.prototype.registerProvider = function(id, priority, provider) {
    if (!provider) {
      provider = priority;
      priority = DEFAULT_PRIORITY$1;
    }

    this._eventBus.on('popupMenu.getProviders.' + id, priority, function(event) {
      event.providers.push(provider);
    });
  };

  /**
   * Determine if the popup menu has entries.
   *
   * @return {boolean} true if empty
   */
  PopupMenu.prototype.isEmpty = function(element, providerId) {
    if (!element) {
      throw new Error('element parameter is missing');
    }

    if (!providerId) {
      throw new Error('providerId parameter is missing');
    }

    var providers = this._getProviders(providerId);

    if (!providers) {
      return true;
    }

    var entries = this._getEntries(element, providers),
        headerEntries = this._getHeaderEntries(element, providers);

    var hasEntries = size(entries) > 0,
        hasHeaderEntries = headerEntries && size(headerEntries) > 0;

    return !hasEntries && !hasHeaderEntries;
  };


  /**
   * Create entries and open popup menu at given position
   *
   * @param  {Object} element
   * @param  {string} id provider id
   * @param  {Object} position
   *
   * @return {Object} popup menu instance
   */
  PopupMenu.prototype.open = function(element, id, position) {

    var providers = this._getProviders(id);

    if (!element) {
      throw new Error('Element is missing');
    }

    if (!providers || !providers.length) {
      throw new Error('No registered providers for: ' + id);
    }

    if (!position) {
      throw new Error('the position argument is missing');
    }

    if (this.isOpen()) {
      this.close();
    }

    this._emit('open');

    var current = this._current = {
      className: id,
      element: element,
      position: position
    };

    var entries = this._getEntries(element, providers),
        headerEntries = this._getHeaderEntries(element, providers);

    current.entries = assign({}, entries, headerEntries);

    current.container = this._createContainer(id);

    if (size(headerEntries)) {
      current.container.appendChild(
        this._createEntries(headerEntries, 'djs-popup-header')
      );
    }

    if (size(entries)) {
      current.container.appendChild(
        this._createEntries(entries, 'djs-popup-body')
      );
    }

    var canvas = this._canvas,
        parent = canvas.getContainer();

    this._attachContainer(current.container, parent, position.cursor);
    this._bindAutoClose();
  };


  /**
   * Removes the popup menu and unbinds the event handlers.
   */
  PopupMenu.prototype.close = function() {

    if (!this.isOpen()) {
      return;
    }

    this._emit('close');

    this._unbindAutoClose();
    remove$2(this._current.container);
    this._current.container = null;
  };


  /**
   * Determine if an open popup menu exist.
   *
   * @return {boolean} true if open
   */
  PopupMenu.prototype.isOpen = function() {
    return !!this._current.container;
  };


  /**
   * Trigger an action associated with an entry.
   *
   * @param {Object} event
   *
   * @return the result of the action callback, if any
   */
  PopupMenu.prototype.trigger = function(event) {

    // silence other actions
    event.preventDefault();

    var element = event.delegateTarget || event.target,
        entryId = attr$1(element, DATA_REF);

    var entry = this._getEntry(entryId);

    if (entry.action) {
      return entry.action.call(null, event, entry);
    }
  };

  PopupMenu.prototype._getProviders = function(id) {

    var event = this._eventBus.createEvent({
      type: 'popupMenu.getProviders.' + id,
      providers: []
    });

    this._eventBus.fire(event);

    return event.providers;
  };

  PopupMenu.prototype._getEntries = function(element, providers) {

    var entries = {};

    forEach$1(providers, function(provider) {

      // handle legacy method
      if (!provider.getPopupMenuEntries) {
        forEach$1(provider.getEntries(element), function(entry) {
          var id = entry.id;

          if (!id) {
            throw new Error('every entry must have the id property set');
          }

          entries[id] = omit(entry, [ 'id' ]);
        });

        return;
      }

      var entriesOrUpdater = provider.getPopupMenuEntries(element);

      if (isFunction(entriesOrUpdater)) {
        entries = entriesOrUpdater(entries);
      } else {
        forEach$1(entriesOrUpdater, function(entry, id) {
          entries[id] = entry;
        });
      }
    });

    return entries;
  };

  PopupMenu.prototype._getHeaderEntries = function(element, providers) {

    var entries = {};

    forEach$1(providers, function(provider) {

      // handle legacy method
      if (!provider.getPopupMenuHeaderEntries) {
        if (!provider.getHeaderEntries) {
          return;
        }

        forEach$1(provider.getHeaderEntries(element), function(entry) {
          var id = entry.id;

          if (!id) {
            throw new Error('every entry must have the id property set');
          }

          entries[id] = omit(entry, [ 'id' ]);
        });

        return;
      }

      var entriesOrUpdater = provider.getPopupMenuHeaderEntries(element);

      if (isFunction(entriesOrUpdater)) {
        entries = entriesOrUpdater(entries);
      } else {
        forEach$1(entriesOrUpdater, function(entry, id) {
          entries[id] = entry;
        });
      }
    });

    return entries;


  };

  /**
   * Gets an entry instance (either entry or headerEntry) by id.
   *
   * @param  {string} entryId
   *
   * @return {Object} entry instance
   */
  PopupMenu.prototype._getEntry = function(entryId) {

    var entry = this._current.entries[entryId];

    if (!entry) {
      throw new Error('entry not found');
    }

    return entry;
  };

  PopupMenu.prototype._emit = function(eventName) {
    this._eventBus.fire('popupMenu.' + eventName);
  };

  /**
   * Creates the popup menu container.
   *
   * @return {Object} a DOM container
   */
  PopupMenu.prototype._createContainer = function(id) {
    var container = domify('<div class="djs-popup">'),
        position = this._current.position,
        className = this._current.className;

    assign$1(container, {
      position: 'absolute',
      left: position.x + 'px',
      top: position.y + 'px',
      visibility: 'hidden'
    });

    classes$1(container).add(className);

    attr$1(container, 'data-popup', id);

    return container;
  };


  /**
   * Attaches the container to the DOM.
   *
   * @param {Object} container
   * @param {Object} parent
   */
  PopupMenu.prototype._attachContainer = function(container, parent, cursor) {
    var self = this;

    // Event handler
    delegate.bind(container, '.entry' ,'click', function(event) {
      self.trigger(event);
    });

    this._updateScale(container);

    // Attach to DOM
    parent.appendChild(container);

    if (cursor) {
      this._assureIsInbounds(container, cursor);
    }

    // display after position adjustment to avoid flickering
    assign$1(container, { visibility: 'visible' });
  };


  /**
   * Updates popup style.transform with respect to the config and zoom level.
   *
   * @method _updateScale
   *
   * @param {Object} container
   */
  PopupMenu.prototype._updateScale = function(container) {
    var zoom = this._canvas.zoom();

    var scaleConfig = this._config.scale,
        minScale,
        maxScale,
        scale = zoom;

    if (scaleConfig !== true) {

      if (scaleConfig === false) {
        minScale = 1;
        maxScale = 1;
      } else {
        minScale = scaleConfig.min;
        maxScale = scaleConfig.max;
      }

      if (isDefined(minScale) && zoom < minScale) {
        scale = minScale;
      }

      if (isDefined(maxScale) && zoom > maxScale) {
        scale = maxScale;
      }

    }

    setTransform(container, 'scale(' + scale + ')');
  };


  /**
   * Make sure that the menu is always fully shown
   *
   * @method function
   *
   * @param  {Object} container
   * @param  {Position} cursor {x, y}
   */
  PopupMenu.prototype._assureIsInbounds = function(container, cursor) {
    var canvas = this._canvas,
        clientRect = canvas._container.getBoundingClientRect();

    var containerX = container.offsetLeft,
        containerY = container.offsetTop,
        containerWidth = container.scrollWidth,
        containerHeight = container.scrollHeight,
        overAxis = {},
        left, top;

    var cursorPosition = {
      x: cursor.x - clientRect.left,
      y: cursor.y - clientRect.top
    };

    if (containerX + containerWidth > clientRect.width) {
      overAxis.x = true;
    }

    if (containerY + containerHeight > clientRect.height) {
      overAxis.y = true;
    }

    if (overAxis.x && overAxis.y) {
      left = cursorPosition.x - containerWidth + 'px';
      top = cursorPosition.y - containerHeight + 'px';
    } else if (overAxis.x) {
      left = cursorPosition.x - containerWidth + 'px';
      top = cursorPosition.y + 'px';
    } else if (overAxis.y && cursorPosition.y < containerHeight) {
      left = cursorPosition.x + 'px';
      top = 10 + 'px';
    } else if (overAxis.y) {
      left = cursorPosition.x + 'px';
      top = cursorPosition.y - containerHeight + 'px';
    }

    assign$1(container, { left: left, top: top }, { 'zIndex': 1000 });
  };


  /**
   * Creates a list of entries and returns them as a DOM container.
   *
   * @param {Array<Object>} entries an array of entry objects
   * @param {string} className the class name of the entry container
   *
   * @return {Object} a DOM container
   */
  PopupMenu.prototype._createEntries = function(entries, className) {

    var entriesContainer = domify('<div>'),
        self = this;

    classes$1(entriesContainer).add(className);

    forEach$1(entries, function(entry, id) {
      var entryContainer = self._createEntry(entry, id),
          grouping = entry.group || 'default',
          groupContainer = query('[data-group=' + cssEscape(grouping) + ']', entriesContainer);

      if (!groupContainer) {
        groupContainer = domify('<div class="group"></div>');
        attr$1(groupContainer, 'data-group', grouping);

        entriesContainer.appendChild(groupContainer);
      }

      groupContainer.appendChild(entryContainer);
    });

    return entriesContainer;
  };


  /**
   * Creates a single entry and returns it as a DOM container.
   *
   * @param  {Object} entry
   *
   * @return {Object} a DOM container
   */
  PopupMenu.prototype._createEntry = function(entry, id) {

    var entryContainer = domify('<div>'),
        entryClasses = classes$1(entryContainer);

    entryClasses.add('entry');

    if (entry.className) {
      entry.className.split(' ').forEach(function(className) {
        entryClasses.add(className);
      });
    }

    attr$1(entryContainer, DATA_REF, id);

    if (entry.label) {
      var label = domify('<span>');
      label.textContent = entry.label;
      entryContainer.appendChild(label);
    }

    if (entry.imageUrl) {
      var image = domify('<img>');
      attr$1(image, 'src', entry.imageUrl);

      entryContainer.appendChild(image);
    }

    if (entry.active === true) {
      entryClasses.add('active');
    }

    if (entry.disabled === true) {
      entryClasses.add('disabled');
    }

    if (entry.title) {
      entryContainer.title = entry.title;
    }

    return entryContainer;
  };


  /**
   * Set up listener to close popup automatically on certain events.
   */
  PopupMenu.prototype._bindAutoClose = function() {
    this._eventBus.once(CLOSE_EVENTS, this.close, this);
  };


  /**
   * Remove the auto-closing listener.
   */
  PopupMenu.prototype._unbindAutoClose = function() {
    this._eventBus.off(CLOSE_EVENTS, this.close, this);
  };



  // helpers /////////////////////////////

  function setTransform(element, transform) {
    element.style['transform-origin'] = 'top left';

    [ '', '-ms-', '-webkit-' ].forEach(function(prefix) {
      element.style[prefix + 'transform'] = transform;
    });
  }

  var PopupMenuModule$1 = {
    __init__: [ 'popupMenu' ],
    popupMenu: [ 'type', PopupMenu ]
  };

  /**
   * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,
   * and then replace respective icons with the optimized data URIs in `./dist`.
   */
  var icons$1 = {
    align:  'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202000%202000%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M200%20150v1700%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22700%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%221150%22%20width%3D%22700%22%20height%3D%22700%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    bottom: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%201650h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22350%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22850%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    center: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M900%20150v1500%22%2F%3E%3Crect%20x%3D%22250%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    left:   'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M100%20150v1500%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    right:  'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M1650%20150v1500%22%2F%3E%3Crect%20x%3D%22350%22%20y%3D%22150%22%20width%3D%221300%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22850%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    top:    'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%20150h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22150%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22150%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    middle: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22stroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linecap%3Around%22%20d%3D%22M150%20900h1500%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22250%22%20width%3D%22600%22%20height%3D%221300%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22500%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E'
  };

  var LOW_PRIORITY$l = 900;

  /**
   * A provider for align elements context pad button
   */
  function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {

    contextPad.registerProvider(LOW_PRIORITY$l, this);

    this._contextPad = contextPad;
    this._popupMenu = popupMenu;
    this._translate = translate;
    this._canvas = canvas;
  }

  AlignElementsContextPadProvider.$inject = [
    'contextPad',
    'popupMenu',
    'translate',
    'canvas'
  ];

  AlignElementsContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
    var actions = {};

    if (this._isAllowed(elements)) {
      assign(actions, this._getEntries(elements));
    }

    return actions;
  };

  AlignElementsContextPadProvider.prototype._isAllowed = function(elements) {
    return !this._popupMenu.isEmpty(elements, 'align-elements');
  };

  AlignElementsContextPadProvider.prototype._getEntries = function(elements) {
    var self = this;

    return {
      'align-elements': {
        group: 'align-elements',
        title: self._translate('Align elements'),
        imageUrl: icons$1['align'],
        action: {
          click: function(event, elements) {
            var position = self._getMenuPosition(elements);

            assign(position, {
              cursor: {
                x: event.x,
                y: event.y
              }
            });

            self._popupMenu.open(elements, 'align-elements', position);
          }
        }
      }
    };
  };

  AlignElementsContextPadProvider.prototype._getMenuPosition = function(elements) {
    var Y_OFFSET = 5;

    var diagramContainer = this._canvas.getContainer(),
        pad = this._contextPad.getPad(elements).html;

    var diagramRect = diagramContainer.getBoundingClientRect(),
        padRect = pad.getBoundingClientRect();

    var top = padRect.top - diagramRect.top;
    var left = padRect.left - diagramRect.left;

    var pos = {
      x: left,
      y: top + padRect.height + Y_OFFSET
    };

    return pos;
  };

  var ALIGNMENT_OPTIONS = [
    'left',
    'center',
    'right',
    'top',
    'middle',
    'bottom'
  ];

  /**
   * A provider for align elements popup menu.
   */
  function AlignElementsMenuProvider(popupMenu, alignElements, translate, rules) {

    this._alignElements = alignElements;
    this._translate = translate;
    this._popupMenu = popupMenu;
    this._rules = rules;

    popupMenu.registerProvider('align-elements', this);
  }

  AlignElementsMenuProvider.$inject = [
    'popupMenu',
    'alignElements',
    'translate',
    'rules'
  ];

  AlignElementsMenuProvider.prototype.getPopupMenuEntries = function(elements) {
    var entries = {};

    if (this._isAllowed(elements)) {
      assign(entries, this._getEntries(elements));
    }

    return entries;
  };

  AlignElementsMenuProvider.prototype._isAllowed = function(elements) {
    return this._rules.allowed('elements.align', { elements: elements });
  };

  AlignElementsMenuProvider.prototype._getEntries = function(elements) {
    var alignElements = this._alignElements,
        translate = this._translate,
        popupMenu = this._popupMenu;

    var entries = {};

    forEach$1(ALIGNMENT_OPTIONS, function(alignment) {
      entries[ 'align-elements-' + alignment ] = {
        group: 'align',
        title: translate('Align elements ' + alignment),
        className: 'bjs-align-elements-menu-entry',
        imageUrl: icons$1[alignment],
        action: function(event, entry) {
          alignElements.trigger(elements, alignment);
          popupMenu.close();
        }
      };
    });

    return entries;
  };

  /**
   * A basic provider that may be extended to implement modeling rules.
   *
   * Extensions should implement the init method to actually add their custom
   * modeling checks. Checks may be added via the #addRule(action, fn) method.
   *
   * @param {EventBus} eventBus
   */
  function RuleProvider(eventBus) {
    CommandInterceptor.call(this, eventBus);

    this.init();
  }

  RuleProvider.$inject = [ 'eventBus' ];

  e(RuleProvider, CommandInterceptor);


  /**
   * Adds a modeling rule for the given action, implemented through
   * a callback function.
   *
   * The function will receive the modeling specific action context
   * to perform its check. It must return `false` to disallow the
   * action from happening or `true` to allow the action.
   *
   * A rule provider may pass over the evaluation to lower priority
   * rules by returning return nothing (or <code>undefined</code>).
   *
   * @example
   *
   * ResizableRules.prototype.init = function() {
   *
   *   \/**
   *    * Return `true`, `false` or nothing to denote
   *    * _allowed_, _not allowed_ and _continue evaluating_.
   *    *\/
   *   this.addRule('shape.resize', function(context) {
   *
   *     var shape = context.shape;
   *
   *     if (!context.newBounds) {
   *       // check general resizability
   *       if (!shape.resizable) {
   *         return false;
   *       }
   *
   *       // not returning anything (read: undefined)
   *       // will continue the evaluation of other rules
   *       // (with lower priority)
   *       return;
   *     } else {
   *       // element must have minimum size of 10*10 points
   *       return context.newBounds.width > 10 && context.newBounds.height > 10;
   *     }
   *   });
   * };
   *
   * @param {string|Array<string>} actions the identifier for the modeling action to check
   * @param {number} [priority] the priority at which this rule is being applied
   * @param {Function} fn the callback function that performs the actual check
   */
  RuleProvider.prototype.addRule = function(actions, priority, fn) {

    var self = this;

    if (typeof actions === 'string') {
      actions = [ actions ];
    }

    actions.forEach(function(action) {

      self.canExecute(action, priority, function(context, action, event) {
        return fn(context);
      }, true);
    });
  };

  /**
   * Implement this method to add new rules during provider initialization.
   */
  RuleProvider.prototype.init = function() {};

  /**
   * Rule provider for alignment of BPMN elements.
   */
  function BpmnAlignElements(eventBus) {
    RuleProvider.call(this, eventBus);
  }

  BpmnAlignElements.$inject = [ 'eventBus' ];

  e(BpmnAlignElements, RuleProvider);

  BpmnAlignElements.prototype.init = function() {
    this.addRule('elements.align', function(context) {
      var elements = context.elements;

      // filter out elements which cannot be aligned
      var filteredElements = filter(elements, function(element) {
        return !(element.waypoints || element.host || element.labelTarget);
      });

      // filter out elements which are children of any of the selected elements
      filteredElements = getParents$1(filteredElements);

      if (filteredElements.length < 2) {
        return false;
      }

      return filteredElements;
    });
  };

  var AlignElementsModule = {
    __depends__: [
      AlignElementsModule$1,
      ContextPadModule$1,
      PopupMenuModule$1
    ],
    __init__: [
      'alignElementsContextPadProvider',
      'alignElementsMenuProvider',
      'bpmnAlignElements'
    ],
    alignElementsContextPadProvider: [ 'type', AlignElementsContextPadProvider ],
    alignElementsMenuProvider: [ 'type', AlignElementsMenuProvider ],
    bpmnAlignElements: [ 'type', BpmnAlignElements ]
  };

  // padding to detect element placement
  var PLACEMENT_DETECTION_PAD = 10;

  var DEFAULT_DISTANCE = 50;

  var DEFAULT_MAX_DISTANCE = 250;


  /**
   * Get free position starting from given position.
   *
   * @param {djs.model.Shape} source
   * @param {djs.model.Shape} element
   * @param {Point} position
   * @param {Function} getNextPosition
   *
   * @return {Point}
   */
  function findFreePosition(source, element, position, getNextPosition) {
    var connectedAtPosition;

    while ((connectedAtPosition = getConnectedAtPosition(source, position, element))) {
      position = getNextPosition(element, position, connectedAtPosition);
    }

    return position;
  }

  /**
   * Returns function that returns next position.
   *
   * @param {Object} nextPositionDirection
   * @param {Object} [nextPositionDirection.x]
   * @param {Object} [nextPositionDirection.y]
   *
   * @returns {Function}
   */
  function generateGetNextPosition(nextPositionDirection) {
    return function(element, previousPosition, connectedAtPosition) {
      var nextPosition = {
        x: previousPosition.x,
        y: previousPosition.y
      };

      [ 'x', 'y' ].forEach(function(axis) {

        var nextPositionDirectionForAxis = nextPositionDirection[ axis ];

        if (!nextPositionDirectionForAxis) {
          return;
        }

        var dimension = axis === 'x' ? 'width' : 'height';

        var margin = nextPositionDirectionForAxis.margin,
            minDistance = nextPositionDirectionForAxis.minDistance;

        if (margin < 0) {
          nextPosition[ axis ] = Math.min(
            connectedAtPosition[ axis ] + margin - element[ dimension ] / 2,
            previousPosition[ axis ] - minDistance + margin
          );
        } else {
          nextPosition[ axis ] = Math.max(
            connectedAtPosition[ axis ] + connectedAtPosition[ dimension ] + margin + element[ dimension ] / 2,
            previousPosition[ axis ] + minDistance + margin
          );
        }
      });

      return nextPosition;
    };
  }

  /**
   * Return target at given position, if defined.
   *
   * This takes connected elements from host and attachers
   * into account, too.
   */
  function getConnectedAtPosition(source, position, element) {

    var bounds = {
      x: position.x - (element.width / 2),
      y: position.y - (element.height / 2),
      width: element.width,
      height: element.height
    };

    var closure = getAutoPlaceClosure(source);

    return find(closure, function(target) {

      if (target === element) {
        return false;
      }

      var orientation = getOrientation(target, bounds, PLACEMENT_DETECTION_PAD);

      return orientation === 'intersect';
    });
  }

  /**
  * Compute optimal distance between source and target based on existing connections to and from source.
  * Assumes left-to-right and top-to-down modeling.
  *
  * @param {djs.model.Shape} source
  * @param {Object} [hints]
  * @param {number} [hints.defaultDistance]
  * @param {string} [hints.direction]
  * @param {Function} [hints.filter]
  * @param {Function} [hints.getWeight]
  * @param {number} [hints.maxDistance]
  * @param {string} [hints.reference]
  *
  * @return {number}
  */
  function getConnectedDistance(source, hints) {
    if (!hints) {
      hints = {};
    }

    // targets > sources by default
    function getDefaultWeight(connection) {
      return connection.source === source ? 1 : -1;
    }

    var defaultDistance = hints.defaultDistance || DEFAULT_DISTANCE,
        direction = hints.direction || 'e',
        filter = hints.filter,
        getWeight = hints.getWeight || getDefaultWeight,
        maxDistance = hints.maxDistance || DEFAULT_MAX_DISTANCE,
        reference = hints.reference || 'start';

    if (!filter) {
      filter = noneFilter;
    }

    function getDistance(a, b) {
      if (direction === 'n') {
        if (reference === 'start') {
          return asTRBL(a).top - asTRBL(b).bottom;
        } else if (reference === 'center') {
          return asTRBL(a).top - getMid(b).y;
        } else {
          return asTRBL(a).top - asTRBL(b).top;
        }
      } else if (direction === 'w') {
        if (reference === 'start') {
          return asTRBL(a).left - asTRBL(b).right;
        } else if (reference === 'center') {
          return asTRBL(a).left - getMid(b).x;
        } else {
          return asTRBL(a).left - asTRBL(b).left;
        }
      } else if (direction === 's') {
        if (reference === 'start') {
          return asTRBL(b).top - asTRBL(a).bottom;
        } else if (reference === 'center') {
          return getMid(b).y - asTRBL(a).bottom;
        } else {
          return asTRBL(b).bottom - asTRBL(a).bottom;
        }
      } else {
        if (reference === 'start') {
          return asTRBL(b).left - asTRBL(a).right;
        } else if (reference === 'center') {
          return getMid(b).x - asTRBL(a).right;
        } else {
          return asTRBL(b).right - asTRBL(a).right;
        }
      }
    }

    var sourcesDistances = source.incoming
      .filter(filter)
      .map(function(connection) {
        var weight = getWeight(connection);

        var distance = weight < 0
          ? getDistance(connection.source, source)
          : getDistance(source, connection.source);

        return {
          id: connection.source.id,
          distance: distance,
          weight: weight
        };
      });

    var targetsDistances = source.outgoing
      .filter(filter)
      .map(function(connection) {
        var weight = getWeight(connection);

        var distance = weight > 0
          ? getDistance(source, connection.target)
          : getDistance(connection.target, source);

        return {
          id: connection.target.id,
          distance: distance,
          weight: weight
        };
      });

    var distances = sourcesDistances.concat(targetsDistances).reduce(function(accumulator, currentValue) {
      accumulator[ currentValue.id + '__weight_' + currentValue.weight ] = currentValue;

      return accumulator;
    }, {});

    var distancesGrouped = reduce(distances, function(accumulator, currentValue) {
      var distance = currentValue.distance,
          weight = currentValue.weight;

      if (distance < 0 || distance > maxDistance) {
        return accumulator;
      }

      if (!accumulator[ String(distance) ]) {
        accumulator[ String(distance) ] = 0;
      }

      accumulator[ String(distance) ] += 1 * weight;

      if (!accumulator.distance || accumulator[ accumulator.distance ] < accumulator[ String(distance) ]) {
        accumulator.distance = distance;
      }

      return accumulator;
    }, {});

    return distancesGrouped.distance || defaultDistance;
  }

  /**
   * Returns all connected elements around the given source.
   *
   * This includes:
   *
   *   - connected elements
   *   - host connected elements
   *   - attachers connected elements
   *
   * @param  {djs.model.Shape} source
   *
   * @return {Array<djs.model.Shape>}
   */
  function getAutoPlaceClosure(source) {

    var allConnected = getConnected(source);

    if (source.host) {
      allConnected = allConnected.concat(getConnected(source.host));
    }

    if (source.attachers) {
      allConnected = allConnected.concat(source.attachers.reduce(function(shapes, attacher) {
        return shapes.concat(getConnected(attacher));
      }, []));
    }

    return allConnected;
  }

  function getConnected(element) {
    return getTargets(element).concat(getSources(element));
  }

  function getSources(shape) {
    return shape.incoming.map(function(connection) {
      return connection.source;
    });
  }

  function getTargets(shape) {
    return shape.outgoing.map(function(connection) {
      return connection.target;
    });
  }

  function noneFilter() {
    return true;
  }

  var LOW_PRIORITY$k = 100;


  /**
   * A service that places elements connected to existing ones
   * to an appropriate position in an _automated_ fashion.
   *
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   */
  function AutoPlace$1(eventBus, modeling, canvas) {

    eventBus.on('autoPlace', LOW_PRIORITY$k, function(context) {
      var shape = context.shape,
          source = context.source;

      return getNewShapePosition$1(source, shape);
    });

    eventBus.on('autoPlace.end', function(event) {
      canvas.scrollToElement(event.shape);
    });

    /**
     * Append shape to source at appropriate position.
     *
     * @param {djs.model.Shape} source
     * @param {djs.model.Shape} shape
     *
     * @return {djs.model.Shape} appended shape
     */
    this.append = function(source, shape, hints) {

      eventBus.fire('autoPlace.start', {
        source: source,
        shape: shape
      });

      // allow others to provide the position
      var position = eventBus.fire('autoPlace', {
        source: source,
        shape: shape
      });

      var newShape = modeling.appendShape(source, shape, position, source.parent, hints);

      eventBus.fire('autoPlace.end', {
        source: source,
        shape: newShape
      });

      return newShape;
    };

  }

  AutoPlace$1.$inject = [
    'eventBus',
    'modeling',
    'canvas'
  ];

  // helpers //////////

  /**
   * Find the new position for the target element to
   * connect to source.
   *
   * @param  {djs.model.Shape} source
   * @param  {djs.model.Shape} element
   * @param  {Object} [hints]
   * @param  {Object} [hints.defaultDistance]
   *
   * @returns {Point}
   */
  function getNewShapePosition$1(source, element, hints) {
    if (!hints) {
      hints = {};
    }

    var distance = hints.defaultDistance || DEFAULT_DISTANCE;

    var sourceMid = getMid(source),
        sourceTrbl = asTRBL(source);

    // simply put element right next to source
    return {
      x: sourceTrbl.right + distance + element.width / 2,
      y: sourceMid.y
    };
  }

  /**
   * Select element after auto placement.
   *
   * @param {EventBus} eventBus
   * @param {Selection} selection
   */
  function AutoPlaceSelectionBehavior(eventBus, selection) {

    eventBus.on('autoPlace.end', 500, function(e) {
      selection.select(e.shape);
    });

  }

  AutoPlaceSelectionBehavior.$inject = [
    'eventBus',
    'selection'
  ];

  var AutoPlaceModule$1 = {
    __init__: [ 'autoPlaceSelectionBehavior' ],
    autoPlace: [ 'type', AutoPlace$1 ],
    autoPlaceSelectionBehavior: [ 'type', AutoPlaceSelectionBehavior ]
  };

  /**
   * Return the parent of the element with any of the given types.
   *
   * @param {djs.model.Base} element
   * @param {string|Array<string>} anyType
   *
   * @return {djs.model.Base}
   */
  function getParent(element, anyType) {

    if (typeof anyType === 'string') {
      anyType = [ anyType ];
    }

    while ((element = element.parent)) {
      if (isAny(element, anyType)) {
        return element;
      }
    }

    return null;
  }

  /**
   * Find the new position for the target element to
   * connect to source.
   *
   * @param  {djs.model.Shape} source
   * @param  {djs.model.Shape} element
   *
   * @return {Point}
   */
  function getNewShapePosition(source, element) {

    if (is$1(element, 'bpmn:TextAnnotation')) {
      return getTextAnnotationPosition(source, element);
    }

    if (isAny(element, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
      return getDataElementPosition(source, element);
    }

    if (is$1(element, 'bpmn:FlowNode')) {
      return getFlowNodePosition(source, element);
    }
  }

  /**
   * Always try to place element right of source;
   * compute actual distance from previous nodes in flow.
   */
  function getFlowNodePosition(source, element) {

    var sourceTrbl = asTRBL(source);
    var sourceMid = getMid(source);

    var horizontalDistance = getConnectedDistance(source, {
      filter: function(connection) {
        return is$1(connection, 'bpmn:SequenceFlow');
      }
    });

    var margin = 30,
        minDistance = 80,
        orientation = 'left';

    if (is$1(source, 'bpmn:BoundaryEvent')) {
      orientation = getOrientation(source, source.host, -25);

      if (orientation.indexOf('top') !== -1) {
        margin *= -1;
      }
    }

    var position = {
      x: sourceTrbl.right + horizontalDistance + element.width / 2,
      y: sourceMid.y + getVerticalDistance(orientation, minDistance)
    };

    var nextPositionDirection = {
      y: {
        margin: margin,
        minDistance: minDistance
      }
    };

    return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
  }


  function getVerticalDistance(orientation, minDistance) {
    if (orientation.indexOf('top') != -1) {
      return -1 * minDistance;
    } else if (orientation.indexOf('bottom') != -1) {
      return minDistance;
    } else {
      return 0;
    }
  }


  /**
   * Always try to place text annotations top right of source.
   */
  function getTextAnnotationPosition(source, element) {

    var sourceTrbl = asTRBL(source);

    var position = {
      x: sourceTrbl.right + element.width / 2,
      y: sourceTrbl.top - 50 - element.height / 2
    };

    if (isConnection$e(source)) {
      position = getMid(source);
      position.x += 100;
      position.y -= 50;
    }

    var nextPositionDirection = {
      y: {
        margin: -30,
        minDistance: 20
      }
    };

    return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
  }


  /**
   * Always put element bottom right of source.
   */
  function getDataElementPosition(source, element) {

    var sourceTrbl = asTRBL(source);

    var position = {
      x: sourceTrbl.right - 10 + element.width / 2,
      y: sourceTrbl.bottom + 40 + element.width / 2
    };

    var nextPositionDirection = {
      x: {
        margin: 30,
        minDistance: 30
      }
    };

    return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
  }

  function isConnection$e(element) {
    return !!element.waypoints;
  }

  /**
   * BPMN auto-place behavior.
   *
   * @param {EventBus} eventBus
   */
  function AutoPlace(eventBus) {
    eventBus.on('autoPlace', function(context) {
      var shape = context.shape,
          source = context.source;

      return getNewShapePosition(source, shape);
    });
  }

  AutoPlace.$inject = [ 'eventBus' ];

  var AutoPlaceModule = {
    __depends__: [ AutoPlaceModule$1 ],
    __init__: [ 'bpmnAutoPlace' ],
    bpmnAutoPlace: [ 'type', AutoPlace ]
  };

  /**
   * An auto resize component that takes care of expanding a parent element
   * if child elements are created or moved close the parents edge.
   *
   * @param {EventBus} eventBus
   * @param {ElementRegistry} elementRegistry
   * @param {Modeling} modeling
   * @param {Rules} rules
   */
  function AutoResize(eventBus, elementRegistry, modeling, rules) {

    CommandInterceptor.call(this, eventBus);

    this._elementRegistry = elementRegistry;
    this._modeling = modeling;
    this._rules = rules;

    var self = this;

    this.postExecuted([ 'shape.create' ], function(event) {
      var context = event.context,
          hints = context.hints || {},
          shape = context.shape,
          parent = context.parent || context.newParent;

      if (hints.autoResize === false) {
        return;
      }

      self._expand([ shape ], parent);
    });

    this.postExecuted([ 'elements.move' ], function(event) {
      var context = event.context,
          elements = flatten(values(context.closure.topLevel)),
          hints = context.hints;

      var autoResize = hints ? hints.autoResize : true;

      if (autoResize === false) {
        return;
      }

      var expandings = groupBy(elements, function(element) {
        return element.parent.id;
      });

      forEach$1(expandings, function(elements, parentId) {

        // optionally filter elements to be considered when resizing
        if (isArray$3(autoResize)) {
          elements = elements.filter(function(element) {
            return find(autoResize, matchPattern({ id: element.id }));
          });
        }

        self._expand(elements, parentId);
      });
    });

    this.postExecuted([ 'shape.toggleCollapse' ], function(event) {
      var context = event.context,
          hints = context.hints,
          shape = context.shape;

      if (hints && hints.autoResize === false) {
        return;
      }

      if (shape.collapsed) {
        return;
      }

      self._expand(shape.children || [], shape);
    });

    this.postExecuted([ 'shape.resize' ], function(event) {
      var context = event.context,
          hints = context.hints,
          shape = context.shape,
          parent = shape.parent;

      if (hints && hints.autoResize === false) {
        return;
      }

      if (parent) {
        self._expand([ shape ], parent);
      }
    });

  }

  AutoResize.$inject = [
    'eventBus',
    'elementRegistry',
    'modeling',
    'rules'
  ];

  e(AutoResize, CommandInterceptor);


  /**
   * Calculate the new bounds of the target shape, given
   * a number of elements have been moved or added into the parent.
   *
   * This method considers the current size, the added elements as well as
   * the provided padding for the new bounds.
   *
   * @param {Array<djs.model.Shape>} elements
   * @param {djs.model.Shape} target
   */
  AutoResize.prototype._getOptimalBounds = function(elements, target) {

    var offset = this.getOffset(target),
        padding = this.getPadding(target);

    var elementsTrbl = asTRBL(getBBox(elements)),
        targetTrbl = asTRBL(target);

    var newTrbl = {};

    if (elementsTrbl.top - targetTrbl.top < padding.top) {
      newTrbl.top = elementsTrbl.top - offset.top;
    }

    if (elementsTrbl.left - targetTrbl.left < padding.left) {
      newTrbl.left = elementsTrbl.left - offset.left;
    }

    if (targetTrbl.right - elementsTrbl.right < padding.right) {
      newTrbl.right = elementsTrbl.right + offset.right;
    }

    if (targetTrbl.bottom - elementsTrbl.bottom < padding.bottom) {
      newTrbl.bottom = elementsTrbl.bottom + offset.bottom;
    }

    return asBounds(assign({}, targetTrbl, newTrbl));
  };


  /**
   * Expand the target shape respecting rules, offset and padding
   *
   * @param {Array<djs.model.Shape>} elements
   * @param {djs.model.Shape|string} target|targetId
   */
  AutoResize.prototype._expand = function(elements, target) {

    if (typeof target === 'string') {
      target = this._elementRegistry.get(target);
    }

    var allowed = this._rules.allowed('element.autoResize', {
      elements: elements,
      target: target
    });

    if (!allowed) {
      return;
    }

    // calculate the new bounds
    var newBounds = this._getOptimalBounds(elements, target);

    if (!boundsChanged$1(newBounds, target)) {
      return;
    }

    var resizeDirections = getResizeDirections(pick(target, [ 'x', 'y', 'width', 'height' ]), newBounds);

    // resize the parent shape
    this.resize(target, newBounds, {
      autoResize: resizeDirections
    });

    var parent = target.parent;

    // recursively expand parent elements
    if (parent) {
      this._expand([ target ], parent);
    }
  };


  /**
   * Get the amount to expand the given shape in each direction.
   *
   * @param {djs.model.Shape} shape
   *
   * @return {TRBL}
   */
  AutoResize.prototype.getOffset = function(shape) {
    return { top: 60, bottom: 60, left: 100, right: 100 };
  };


  /**
   * Get the activation threshold for each side for which
   * resize triggers.
   *
   * @param {djs.model.Shape} shape
   *
   * @return {TRBL}
   */
  AutoResize.prototype.getPadding = function(shape) {
    return { top: 2, bottom: 2, left: 15, right: 15 };
  };


  /**
   * Perform the actual resize operation.
   *
   * @param {djs.model.Shape} shape
   * @param {Bounds} newBounds
   * @param {Object} [hints]
   * @param {string} [hints.autoResize]
   */
  AutoResize.prototype.resize = function(shape, newBounds, hints) {
    this._modeling.resizeShape(shape, newBounds, null, hints);
  };


  function boundsChanged$1(newBounds, oldBounds) {
    return (
      newBounds.x !== oldBounds.x ||
      newBounds.y !== oldBounds.y ||
      newBounds.width !== oldBounds.width ||
      newBounds.height !== oldBounds.height
    );
  }

  /**
   * Get directions of resize as {n|w|s|e} e.g. "nw".
   *
   * @param {Bounds} oldBounds
   * @param {Bounds} newBounds
   *
   * @returns {string} Resize directions as {n|w|s|e}.
   */
  function getResizeDirections(oldBounds, newBounds) {
    var directions = '';

    oldBounds = asTRBL(oldBounds);
    newBounds = asTRBL(newBounds);

    if (oldBounds.top > newBounds.top) {
      directions = directions.concat('n');
    }

    if (oldBounds.right < newBounds.right) {
      directions = directions.concat('w');
    }

    if (oldBounds.bottom < newBounds.bottom) {
      directions = directions.concat('s');
    }

    if (oldBounds.left > newBounds.left) {
      directions = directions.concat('e');
    }

    return directions;
  }

  /**
   * Sub class of the AutoResize module which implements a BPMN
   * specific resize function.
   */
  function BpmnAutoResize(injector) {

    injector.invoke(AutoResize, this);
  }

  BpmnAutoResize.$inject = [
    'injector'
  ];

  e(BpmnAutoResize, AutoResize);


  /**
   * Resize shapes and lanes.
   *
   * @param {djs.model.Shape} target
   * @param {Bounds} newBounds
   * @param {Object} hints
   */
  BpmnAutoResize.prototype.resize = function(target, newBounds, hints) {

    if (is$1(target, 'bpmn:Participant')) {
      this._modeling.resizeLane(target, newBounds, null, hints);
    } else {
      this._modeling.resizeShape(target, newBounds, null, hints);
    }
  };

  /**
   * This is a base rule provider for the element.autoResize rule.
   */
  function AutoResizeProvider(eventBus) {

    RuleProvider.call(this, eventBus);

    var self = this;

    this.addRule('element.autoResize', function(context) {
      return self.canResize(context.elements, context.target);
    });
  }

  AutoResizeProvider.$inject = [ 'eventBus' ];

  e(AutoResizeProvider, RuleProvider);

  /**
   * Needs to be implemented by sub classes to allow actual auto resize
   *
   * @param  {Array<djs.model.Shape>} elements
   * @param  {djs.model.Shape} target
   *
   * @return {boolean}
   */
  AutoResizeProvider.prototype.canResize = function(elements, target) {
    return false;
  };

  /**
   * This module is a provider for automatically resizing parent BPMN elements
   */
  function BpmnAutoResizeProvider(eventBus, modeling) {
    AutoResizeProvider.call(this, eventBus);

    this._modeling = modeling;
  }

  e(BpmnAutoResizeProvider, AutoResizeProvider);

  BpmnAutoResizeProvider.$inject = [
    'eventBus',
    'modeling'
  ];


  /**
   * Check if the given target can be expanded
   *
   * @param  {djs.model.Shape} target
   *
   * @return {boolean}
   */
  BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {

    // do not resize plane elements:
    // root elements, collapsed sub-processes
    if (is$1(target.di, 'bpmndi:BPMNPlane')) {
      return false;
    }

    if (!is$1(target, 'bpmn:Participant') && !is$1(target, 'bpmn:Lane') && !(is$1(target, 'bpmn:SubProcess'))) {
      return false;
    }

    var canResize = true;

    forEach$1(elements, function(element) {

      if (is$1(element, 'bpmn:Lane') || element.labelTarget) {
        canResize = false;
        return;
      }
    });

    return canResize;
  };

  var AutoResizeModule = {
    __init__: [
      'bpmnAutoResize',
      'bpmnAutoResizeProvider'
    ],
    bpmnAutoResize: [ 'type', BpmnAutoResize ],
    bpmnAutoResizeProvider: [ 'type', BpmnAutoResizeProvider ]
  };

  var HIGH_PRIORITY$j = 1500;


  /**
   * Browsers may swallow certain events (hover, out ...) if users are to
   * fast with the mouse.
   *
   * @see http://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event
   *
   * The fix implemented in this component ensure that we
   *
   * 1) have a hover state after a successful drag.move event
   * 2) have an out event when dragging leaves an element
   *
   * @param {ElementRegistry} elementRegistry
   * @param {EventBus} eventBus
   * @param {Injector} injector
   */
  function HoverFix(elementRegistry, eventBus, injector) {

    var self = this;

    var dragging = injector.get('dragging', false);

    /**
     * Make sure we are god damn hovering!
     *
     * @param {Event} dragging event
     */
    function ensureHover(event) {

      if (event.hover) {
        return;
      }

      var originalEvent = event.originalEvent;

      var gfx = self._findTargetGfx(originalEvent);

      var element = gfx && elementRegistry.get(gfx);

      if (gfx && element) {

        // 1) cancel current mousemove
        event.stopPropagation();

        // 2) emit fake hover for new target
        dragging.hover({ element: element, gfx: gfx });

        // 3) re-trigger move event
        dragging.move(originalEvent);
      }
    }


    if (dragging) {

      /**
       * We wait for a specific sequence of events before
       * emitting a fake drag.hover event.
       *
       * Event Sequence:
       *
       * drag.start
       * drag.move >> ensure we are hovering
       */
      eventBus.on('drag.start', function(event) {

        eventBus.once('drag.move', HIGH_PRIORITY$j, function(event) {

          ensureHover(event);

        });

      });
    }


    /**
     * We make sure that element.out is always fired, even if the
     * browser swallows an element.out event.
     *
     * Event sequence:
     *
     * element.hover
     * (element.out >> sometimes swallowed)
     * element.hover >> ensure we fired element.out
     */
    (function() {
      var hoverGfx;
      var hover;

      eventBus.on('element.hover', function(event) {

        // (1) remember current hover element
        hoverGfx = event.gfx;
        hover = event.element;
      });

      eventBus.on('element.hover', HIGH_PRIORITY$j, function(event) {

        // (3) am I on an element still?
        if (hover) {

          // (4) that is a problem, gotta "simulate the out"
          eventBus.fire('element.out', {
            element: hover,
            gfx: hoverGfx
          });
        }

      });

      eventBus.on('element.out', function() {

        // (2) unset hover state if we correctly outed us *GG*
        hoverGfx = null;
        hover = null;
      });

    })();

    this._findTargetGfx = function(event) {
      var position,
          target;

      if (!(event instanceof MouseEvent)) {
        return;
      }

      position = toPoint(event);

      // damn expensive operation, ouch!
      target = document.elementFromPoint(position.x, position.y);

      return getGfx(target);
    };

  }

  HoverFix.$inject = [
    'elementRegistry',
    'eventBus',
    'injector'
  ];


  // helpers /////////////////////

  function getGfx(target) {
    return closest(target, 'svg, .djs-element', true);
  }

  var HoverFixModule = {
    __init__: [
      'hoverFix'
    ],
    hoverFix: [ 'type', HoverFix ],
  };

  var round$a = Math.round;

  var DRAG_ACTIVE_CLS = 'djs-drag-active';


  function preventDefault$1(event) {
    event.preventDefault();
  }

  function isTouchEvent(event) {

    // check for TouchEvent being available first
    // (i.e. not available on desktop Firefox)
    return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;
  }

  function getLength(point) {
    return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
  }

  /**
   * A helper that fires canvas localized drag events and realizes
   * the general "drag-and-drop" look and feel.
   *
   * Calling {@link Dragging#activate} activates dragging on a canvas.
   *
   * It provides the following:
   *
   *   * emits life cycle events, namespaced with a prefix assigned
   *     during dragging activation
   *   * sets and restores the cursor
   *   * sets and restores the selection if elements still exist
   *   * ensures there can be only one drag operation active at a time
   *
   * Dragging may be canceled manually by calling {@link Dragging#cancel}
   * or by pressing ESC.
   *
   *
   * ## Life-cycle events
   *
   * Dragging can be in three different states, off, initialized
   * and active.
   *
   * (1) off: no dragging operation is in progress
   * (2) initialized: a new drag operation got initialized but not yet
   *                  started (i.e. because of no initial move)
   * (3) started: dragging is in progress
   *
   * Eventually dragging will be off again after a drag operation has
   * been ended or canceled via user click or ESC key press.
   *
   * To indicate transitions between these states dragging emits generic
   * life-cycle events with the `drag.` prefix _and_ events namespaced
   * to a prefix choosen by a user during drag initialization.
   *
   * The following events are emitted (appropriately prefixed) via
   * the {@link EventBus}.
   *
   * * `init`
   * * `start`
   * * `move`
   * * `end`
   * * `ended` (dragging already in off state)
   * * `cancel` (only if previously started)
   * * `canceled` (dragging already in off state, only if previously started)
   * * `cleanup`
   *
   *
   * @example
   *
   * function MyDragComponent(eventBus, dragging) {
   *
   *   eventBus.on('mydrag.start', function(event) {
   *     console.log('yes, we start dragging');
   *   });
   *
   *   eventBus.on('mydrag.move', function(event) {
   *     console.log('canvas local coordinates', event.x, event.y, event.dx, event.dy);
   *
   *     // local drag data is passed with the event
   *     event.context.foo; // "BAR"
   *
   *     // the original mouse event, too
   *     event.originalEvent; // MouseEvent(...)
   *   });
   *
   *   eventBus.on('element.click', function(event) {
   *     dragging.init(event, 'mydrag', {
   *       cursor: 'grabbing',
   *       data: {
   *         context: {
   *           foo: "BAR"
   *         }
   *       }
   *     });
   *   });
   * }
   */
  function Dragging(eventBus, canvas, selection, elementRegistry) {

    var defaultOptions = {
      threshold: 5,
      trapClick: true
    };

    // the currently active drag operation
    // dragging is active as soon as this context exists.
    //
    // it is visually _active_ only when a context.active flag is set to true.
    var context;

    /* convert a global event into local coordinates */
    function toLocalPoint(globalPosition) {

      var viewbox = canvas.viewbox();

      var clientRect = canvas._container.getBoundingClientRect();

      return {
        x: viewbox.x + (globalPosition.x - clientRect.left) / viewbox.scale,
        y: viewbox.y + (globalPosition.y - clientRect.top) / viewbox.scale
      };
    }

    // helpers

    function fire(type, dragContext) {
      dragContext = dragContext || context;

      var event = eventBus.createEvent(
        assign(
          {},
          dragContext.payload,
          dragContext.data,
          { isTouch: dragContext.isTouch }
        )
      );

      // default integration
      if (eventBus.fire('drag.' + type, event) === false) {
        return false;
      }

      return eventBus.fire(dragContext.prefix + '.' + type, event);
    }

    function restoreSelection(previousSelection) {
      var existingSelection = previousSelection.filter(function(element) {
        return elementRegistry.get(element.id);
      });

      existingSelection.length && selection.select(existingSelection);
    }

    // event listeners

    function move(event, activate) {
      var payload = context.payload,
          displacement = context.displacement;

      var globalStart = context.globalStart,
          globalCurrent = toPoint(event),
          globalDelta = delta(globalCurrent, globalStart);

      var localStart = context.localStart,
          localCurrent = toLocalPoint(globalCurrent),
          localDelta = delta(localCurrent, localStart);


      // activate context explicitly or once threshold is reached
      if (!context.active && (activate || getLength(globalDelta) > context.threshold)) {

        // fire start event with original
        // starting coordinates

        assign(payload, {
          x: round$a(localStart.x + displacement.x),
          y: round$a(localStart.y + displacement.y),
          dx: 0,
          dy: 0
        }, { originalEvent: event });

        if (false === fire('start')) {
          return cancel();
        }

        context.active = true;

        // unset selection and remember old selection
        // the previous (old) selection will always passed
        // with the event via the event.previousSelection property
        if (!context.keepSelection) {
          payload.previousSelection = selection.get();
          selection.select(null);
        }

        // allow custom cursor
        if (context.cursor) {
          set(context.cursor);
        }

        // indicate dragging via marker on root element
        canvas.addMarker(canvas.getRootElement(), DRAG_ACTIVE_CLS);
      }

      stopPropagation$1(event);

      if (context.active) {

        // update payload with actual coordinates
        assign(payload, {
          x: round$a(localCurrent.x + displacement.x),
          y: round$a(localCurrent.y + displacement.y),
          dx: round$a(localDelta.x),
          dy: round$a(localDelta.y)
        }, { originalEvent: event });

        // emit move event
        fire('move');
      }
    }

    function end(event) {
      var previousContext,
          returnValue = true;

      if (context.active) {

        if (event) {
          context.payload.originalEvent = event;

          // suppress original event (click, ...)
          // because we just ended a drag operation
          stopPropagation$1(event);
        }

        // implementations may stop restoring the
        // original state (selections, ...) by preventing the
        // end events default action
        returnValue = fire('end');
      }

      if (returnValue === false) {
        fire('rejected');
      }

      previousContext = cleanup(returnValue !== true);

      // last event to be fired when all drag operations are done
      // at this point in time no drag operation is in progress anymore
      fire('ended', previousContext);
    }


    // cancel active drag operation if the user presses
    // the ESC key on the keyboard

    function checkCancel(event) {

      if (event.which === 27) {
        preventDefault$1(event);

        cancel();
      }
    }


    // prevent ghost click that might occur after a finished
    // drag and drop session

    function trapClickAndEnd(event) {

      var untrap;

      // trap the click in case we are part of an active
      // drag operation. This will effectively prevent
      // the ghost click that cannot be canceled otherwise.
      if (context.active) {

        untrap = install(eventBus);

        // remove trap after minimal delay
        setTimeout(untrap, 400);

        // prevent default action (click)
        preventDefault$1(event);
      }

      end(event);
    }

    function trapTouch(event) {
      move(event);
    }

    // update the drag events hover (djs.model.Base) and hoverGfx (Snap<SVGElement>)
    // properties during hover and out and fire {prefix}.hover and {prefix}.out properties
    // respectively

    function hover(event) {
      var payload = context.payload;

      payload.hoverGfx = event.gfx;
      payload.hover = event.element;

      fire('hover');
    }

    function out(event) {
      fire('out');

      var payload = context.payload;

      payload.hoverGfx = null;
      payload.hover = null;
    }


    // life-cycle methods

    function cancel(restore) {
      var previousContext;

      if (!context) {
        return;
      }

      var wasActive = context.active;

      if (wasActive) {
        fire('cancel');
      }

      previousContext = cleanup(restore);

      if (wasActive) {

        // last event to be fired when all drag operations are done
        // at this point in time no drag operation is in progress anymore
        fire('canceled', previousContext);
      }
    }

    function cleanup(restore) {
      var previousContext,
          endDrag;

      fire('cleanup');

      // reset cursor
      unset();

      if (context.trapClick) {
        endDrag = trapClickAndEnd;
      } else {
        endDrag = end;
      }

      // reset dom listeners
      componentEvent.unbind(document, 'mousemove', move);

      componentEvent.unbind(document, 'dragstart', preventDefault$1);
      componentEvent.unbind(document, 'selectstart', preventDefault$1);

      componentEvent.unbind(document, 'mousedown', endDrag, true);
      componentEvent.unbind(document, 'mouseup', endDrag, true);

      componentEvent.unbind(document, 'keyup', checkCancel);

      componentEvent.unbind(document, 'touchstart', trapTouch, true);
      componentEvent.unbind(document, 'touchcancel', cancel, true);
      componentEvent.unbind(document, 'touchmove', move, true);
      componentEvent.unbind(document, 'touchend', end, true);

      eventBus.off('element.hover', hover);
      eventBus.off('element.out', out);

      // remove drag marker on root element
      canvas.removeMarker(canvas.getRootElement(), DRAG_ACTIVE_CLS);

      // restore selection, unless it has changed
      var previousSelection = context.payload.previousSelection;

      if (restore !== false && previousSelection && !selection.get().length) {
        restoreSelection(previousSelection);
      }

      previousContext = context;

      context = null;

      return previousContext;
    }

    /**
     * Initialize a drag operation.
     *
     * If `localPosition` is given, drag events will be emitted
     * relative to it.
     *
     * @param {MouseEvent|TouchEvent} [event]
     * @param {Point} [localPosition] actual diagram local position this drag operation should start at
     * @param {string} prefix
     * @param {Object} [options]
     */
    function init(event, relativeTo, prefix, options) {

      // only one drag operation may be active, at a time
      if (context) {
        cancel(false);
      }

      if (typeof relativeTo === 'string') {
        options = prefix;
        prefix = relativeTo;
        relativeTo = null;
      }

      options = assign({}, defaultOptions, options || {});

      var data = options.data || {},
          originalEvent,
          globalStart,
          localStart,
          endDrag,
          isTouch;

      if (options.trapClick) {
        endDrag = trapClickAndEnd;
      } else {
        endDrag = end;
      }

      if (event) {
        originalEvent = getOriginal$1(event) || event;
        globalStart = toPoint(event);

        stopPropagation$1(event);

        // prevent default browser dragging behavior
        if (originalEvent.type === 'dragstart') {
          preventDefault$1(originalEvent);
        }
      } else {
        originalEvent = null;
        globalStart = { x: 0, y: 0 };
      }

      localStart = toLocalPoint(globalStart);

      if (!relativeTo) {
        relativeTo = localStart;
      }

      isTouch = isTouchEvent(originalEvent);

      context = assign({
        prefix: prefix,
        data: data,
        payload: {},
        globalStart: globalStart,
        displacement: delta(relativeTo, localStart),
        localStart: localStart,
        isTouch: isTouch
      }, options);

      // skip dom registration if trigger
      // is set to manual (during testing)
      if (!options.manual) {

        // add dom listeners

        if (isTouch) {
          componentEvent.bind(document, 'touchstart', trapTouch, true);
          componentEvent.bind(document, 'touchcancel', cancel, true);
          componentEvent.bind(document, 'touchmove', move, true);
          componentEvent.bind(document, 'touchend', end, true);
        } else {

          // assume we use the mouse to interact per default
          componentEvent.bind(document, 'mousemove', move);

          // prevent default browser drag and text selection behavior
          componentEvent.bind(document, 'dragstart', preventDefault$1);
          componentEvent.bind(document, 'selectstart', preventDefault$1);

          componentEvent.bind(document, 'mousedown', endDrag, true);
          componentEvent.bind(document, 'mouseup', endDrag, true);
        }

        componentEvent.bind(document, 'keyup', checkCancel);

        eventBus.on('element.hover', hover);
        eventBus.on('element.out', out);
      }

      fire('init');

      if (options.autoActivate) {
        move(event, true);
      }
    }

    // cancel on diagram destruction
    eventBus.on('diagram.destroy', cancel);


    // API

    this.init = init;
    this.move = move;
    this.hover = hover;
    this.out = out;
    this.end = end;

    this.cancel = cancel;

    // for introspection

    this.context = function() {
      return context;
    };

    this.setOptions = function(options) {
      assign(defaultOptions, options);
    };
  }

  Dragging.$inject = [
    'eventBus',
    'canvas',
    'selection',
    'elementRegistry'
  ];

  var DraggingModule = {
    __depends__: [
      HoverFixModule,
      SelectionModule,
    ],
    dragging: [ 'type', Dragging ],
  };

  /**
   * Initiates canvas scrolling if current cursor point is close to a border.
   * Cancelled when current point moves back inside the scrolling borders
   * or cancelled manually.
   *
   * Default options :
   *   scrollThresholdIn: [ 20, 20, 20, 20 ],
   *   scrollThresholdOut: [ 0, 0, 0, 0 ],
   *   scrollRepeatTimeout: 15,
   *   scrollStep: 10
   *
   * Threshold order:
   *   [ left, top, right, bottom ]
   */
  function AutoScroll(config, eventBus, canvas) {

    this._canvas = canvas;

    this._opts = assign({
      scrollThresholdIn: [ 20, 20, 20, 20 ],
      scrollThresholdOut: [ 0, 0, 0, 0 ],
      scrollRepeatTimeout: 15,
      scrollStep: 10
    }, config);

    var self = this;

    eventBus.on('drag.move', function(e) {
      var point = self._toBorderPoint(e);

      self.startScroll(point);
    });

    eventBus.on([ 'drag.cleanup' ], function() {
      self.stopScroll();
    });
  }

  AutoScroll.$inject = [
    'config.autoScroll',
    'eventBus',
    'canvas'
  ];


  /**
   * Starts scrolling loop.
   * Point is given in global scale in canvas container box plane.
   *
   * @param  {Object} point { x: X, y: Y }
   */
  AutoScroll.prototype.startScroll = function(point) {

    var canvas = this._canvas;
    var opts = this._opts;
    var self = this;

    var clientRect = canvas.getContainer().getBoundingClientRect();

    var diff = [
      point.x,
      point.y,
      clientRect.width - point.x,
      clientRect.height - point.y
    ];

    this.stopScroll();

    var dx = 0,
        dy = 0;

    for (var i = 0; i < 4; i++) {
      if (between(diff[i], opts.scrollThresholdOut[i], opts.scrollThresholdIn[i])) {
        if (i === 0) {
          dx = opts.scrollStep;
        } else if (i == 1) {
          dy = opts.scrollStep;
        } else if (i == 2) {
          dx = -opts.scrollStep;
        } else if (i == 3) {
          dy = -opts.scrollStep;
        }
      }
    }

    if (dx !== 0 || dy !== 0) {
      canvas.scroll({ dx: dx, dy: dy });

      this._scrolling = setTimeout(function() {
        self.startScroll(point);
      }, opts.scrollRepeatTimeout);
    }
  };

  function between(val, start, end) {
    if (start < val && val < end) {
      return true;
    }

    return false;
  }


  /**
   * Stops scrolling loop.
   */
  AutoScroll.prototype.stopScroll = function() {
    clearTimeout(this._scrolling);
  };


  /**
   * Overrides defaults options.
   *
   * @param  {Object} options
   */
  AutoScroll.prototype.setOptions = function(options) {
    this._opts = assign({}, this._opts, options);
  };


  /**
   * Converts event to a point in canvas container plane in global scale.
   *
   * @param  {Event} event
   * @return {Point}
   */
  AutoScroll.prototype._toBorderPoint = function(event) {
    var clientRect = this._canvas._container.getBoundingClientRect();

    var globalPosition = toPoint(event.originalEvent);

    return {
      x: globalPosition.x - clientRect.left,
      y: globalPosition.y - clientRect.top
    };
  };

  var AutoScrollModule = {
    __depends__: [
      DraggingModule,
    ],
    __init__: [ 'autoScroll' ],
    autoScroll: [ 'type', AutoScroll ]
  };

  /**
   * A service that provides rules for certain diagram actions.
   *
   * The default implementation will hook into the {@link CommandStack}
   * to perform the actual rule evaluation. Make sure to provide the
   * `commandStack` service with this module if you plan to use it.
   *
   * Together with this implementation you may use the {@link RuleProvider}
   * to implement your own rule checkers.
   *
   * This module is ment to be easily replaced, thus the tiny foot print.
   *
   * @param {Injector} injector
   */
  function Rules(injector) {
    this._commandStack = injector.get('commandStack', false);
  }

  Rules.$inject = [ 'injector' ];


  /**
   * Returns whether or not a given modeling action can be executed
   * in the specified context.
   *
   * This implementation will respond with allow unless anyone
   * objects.
   *
   * @param {string} action the action to be checked
   * @param {Object} [context] the context to check the action in
   *
   * @return {boolean} returns true, false or null depending on whether the
   *                   operation is allowed, not allowed or should be ignored.
   */
  Rules.prototype.allowed = function(action, context) {
    var allowed = true;

    var commandStack = this._commandStack;

    if (commandStack) {
      allowed = commandStack.canExecute(action, context);
    }

    // map undefined to true, i.e. no rules
    return allowed === undefined ? true : allowed;
  };

  var RulesModule$1 = {
    __init__: [ 'rules' ],
    rules: [ 'type', Rules ]
  };

  var round$9 = Math.round,
      max$6 = Math.max;


  function circlePath(center, r) {
    var x = center.x,
        y = center.y;

    return [
      [ 'M', x, y ],
      [ 'm', 0, -r ],
      [ 'a', r, r, 0, 1, 1, 0, 2 * r ],
      [ 'a', r, r, 0, 1, 1, 0, -2 * r ],
      [ 'z' ]
    ];
  }

  function linePath(points) {
    var segments = [];

    points.forEach(function(p, idx) {
      segments.push([ idx === 0 ? 'M' : 'L', p.x, p.y ]);
    });

    return segments;
  }


  var INTERSECTION_THRESHOLD$1 = 10;

  function getBendpointIntersection(waypoints, reference) {

    var i, w;

    for (i = 0; (w = waypoints[i]); i++) {

      if (pointDistance(w, reference) <= INTERSECTION_THRESHOLD$1) {
        return {
          point: waypoints[i],
          bendpoint: true,
          index: i
        };
      }
    }

    return null;
  }

  function getPathIntersection(waypoints, reference) {

    var intersections = intersect(circlePath(reference, INTERSECTION_THRESHOLD$1), linePath(waypoints));

    var a = intersections[0],
        b = intersections[intersections.length - 1],
        idx;

    if (!a) {

      // no intersection
      return null;
    }

    if (a !== b) {

      if (a.segment2 !== b.segment2) {

        // we use the bendpoint in between both segments
        // as the intersection point

        idx = max$6(a.segment2, b.segment2) - 1;

        return {
          point: waypoints[idx],
          bendpoint: true,
          index: idx
        };
      }

      return {
        point: {
          x: (round$9(a.x + b.x) / 2),
          y: (round$9(a.y + b.y) / 2)
        },
        index: a.segment2
      };
    }

    return {
      point: {
        x: round$9(a.x),
        y: round$9(a.y)
      },
      index: a.segment2
    };
  }

  /**
   * Returns the closest point on the connection towards a given reference point.
   *
   * @param  {Array<Point>} waypoints
   * @param  {Point} reference
   *
   * @return {Object} intersection data (segment, point)
   */
  function getApproxIntersection(waypoints, reference) {
    return getBendpointIntersection(waypoints, reference) || getPathIntersection(waypoints, reference);
  }

  /**
   * Returns the length of a vector
   *
   * @param {Vector}
   * @return {Float}
   */
  function vectorLength(v) {
    return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
  }


  /**
   * Calculates the angle between a line a the yAxis
   *
   * @param {Array}
   * @return {Float}
   */
  function getAngle(line) {

    // return value is between 0, 180 and -180, -0
    // @janstuemmel: maybe replace return a/b with b/a
    return Math.atan((line[1].y - line[0].y) / (line[1].x - line[0].x));
  }


  /**
   * Rotates a vector by a given angle
   *
   * @param {Vector}
   * @param {Float} Angle in radians
   * @return {Vector}
   */
  function rotateVector(vector, angle) {
    return (!angle) ? vector : {
      x: Math.cos(angle) * vector.x - Math.sin(angle) * vector.y,
      y: Math.sin(angle) * vector.x + Math.cos(angle) * vector.y
    };
  }


  /**
   * Solves a 2D equation system
   * a + r*b = c, where a,b,c are 2D vectors
   *
   * @param {Vector}
   * @param {Vector}
   * @param {Vector}
   * @return {Float}
   */
  function solveLambaSystem(a, b, c) {

    // the 2d system
    var system = [
      { n: a[0] - c[0], lambda: b[0] },
      { n: a[1] - c[1], lambda: b[1] }
    ];

    // solve
    var n = system[0].n * b[0] + system[1].n * b[1],
        l = system[0].lambda * b[0] + system[1].lambda * b[1];

    return -n / l;
  }


  /**
   * Position of perpendicular foot
   *
   * @param {Point}
   * @param [ {Point}, {Point} ] line defined through two points
   * @return {Point} the perpendicular foot position
   */
  function perpendicularFoot(point, line) {

    var a = line[0], b = line[1];

    // relative position of b from a
    var bd = { x: b.x - a.x, y: b.y - a.y };

    // solve equation system to the parametrized vectors param real value
    var r = solveLambaSystem([ a.x, a.y ], [ bd.x, bd.y ], [ point.x, point.y ]);

    return { x: a.x + r * bd.x, y: a.y + r * bd.y };
  }


  /**
   * Calculates the distance between a point and a line
   *
   * @param {Point}
   * @param [ {Point}, {Point} ] line defined through two points
   * @return {Float} distance
   */
  function getDistancePointLine(point, line) {

    var pfPoint = perpendicularFoot(point, line);

    // distance vector
    var connectionVector = {
      x: pfPoint.x - point.x,
      y: pfPoint.y - point.y
    };

    return vectorLength(connectionVector);
  }


  /**
   * Calculates the distance between two points
   *
   * @param {Point}
   * @param {Point}
   * @return {Float} distance
   */
  function getDistancePointPoint(point1, point2) {

    return vectorLength({
      x: point1.x - point2.x,
      y: point1.y - point2.y
    });
  }

  var BENDPOINT_CLS = 'djs-bendpoint';
  var SEGMENT_DRAGGER_CLS = 'djs-segment-dragger';

  function toCanvasCoordinates(canvas, event) {

    var position = toPoint(event),
        clientRect = canvas._container.getBoundingClientRect(),
        offset;

    // canvas relative position

    offset = {
      x: clientRect.left,
      y: clientRect.top
    };

    // update actual event payload with canvas relative measures

    var viewbox = canvas.viewbox();

    return {
      x: viewbox.x + (position.x - offset.x) / viewbox.scale,
      y: viewbox.y + (position.y - offset.y) / viewbox.scale
    };
  }

  function getConnectionIntersection(canvas, waypoints, event) {
    var localPosition = toCanvasCoordinates(canvas, event),
        intersection = getApproxIntersection(waypoints, localPosition);

    return intersection;
  }

  function addBendpoint(parentGfx, cls) {
    var groupGfx = create$1('g');
    classes(groupGfx).add(BENDPOINT_CLS);

    append(parentGfx, groupGfx);

    var visual = create$1('circle');
    attr(visual, {
      cx: 0,
      cy: 0,
      r: 4
    });
    classes(visual).add('djs-visual');

    append(groupGfx, visual);

    var hit = create$1('circle');
    attr(hit, {
      cx: 0,
      cy: 0,
      r: 10
    });
    classes(hit).add('djs-hit');

    append(groupGfx, hit);

    if (cls) {
      classes(groupGfx).add(cls);
    }

    return groupGfx;
  }

  function createParallelDragger(parentGfx, segmentStart, segmentEnd, alignment) {
    var draggerGfx = create$1('g');

    append(parentGfx, draggerGfx);

    var width = 18,
        height = 6,
        padding = 11,
        hitWidth = calculateHitWidth(segmentStart, segmentEnd, alignment),
        hitHeight = height + padding;

    var visual = create$1('rect');
    attr(visual, {
      x: -width / 2,
      y: -height / 2,
      width: width,
      height: height
    });
    classes(visual).add('djs-visual');

    append(draggerGfx, visual);

    var hit = create$1('rect');
    attr(hit, {
      x: -hitWidth / 2,
      y: -hitHeight / 2,
      width: hitWidth,
      height: hitHeight
    });
    classes(hit).add('djs-hit');

    append(draggerGfx, hit);

    rotate(draggerGfx, alignment === 'v' ? 90 : 0);

    return draggerGfx;
  }


  function addSegmentDragger(parentGfx, segmentStart, segmentEnd) {

    var groupGfx = create$1('g'),
        mid = getMidPoint(segmentStart, segmentEnd),
        alignment = pointsAligned(segmentStart, segmentEnd);

    append(parentGfx, groupGfx);

    createParallelDragger(groupGfx, segmentStart, segmentEnd, alignment);

    classes(groupGfx).add(SEGMENT_DRAGGER_CLS);
    classes(groupGfx).add(alignment === 'h' ? 'horizontal' : 'vertical');

    translate$2(groupGfx, mid.x, mid.y);

    return groupGfx;
  }

  /**
   * Calculates region for segment move which is 2/3 of the full segment length
   * @param {number} segmentLength
   *
   * @return {number}
   */
  function calculateSegmentMoveRegion(segmentLength) {
    return Math.abs(Math.round(segmentLength * 2 / 3));
  }

  /**
   * Returns the point with the closest distance that is on the connection path.
   *
   * @param {Point} position
   * @param {djs.Base.Connection} connection
   * @returns {Point}
   */
  function getClosestPointOnConnection(position, connection) {
    var segment = getClosestSegment(position, connection);

    return perpendicularFoot(position, segment);
  }


  // helper //////////

  function calculateHitWidth(segmentStart, segmentEnd, alignment) {
    var segmentLengthXAxis = segmentEnd.x - segmentStart.x,
        segmentLengthYAxis = segmentEnd.y - segmentStart.y;

    return alignment === 'h' ?
      calculateSegmentMoveRegion(segmentLengthXAxis) :
      calculateSegmentMoveRegion(segmentLengthYAxis);
  }

  function getClosestSegment(position, connection) {
    var waypoints = connection.waypoints;

    var minDistance = Infinity,
        segmentIndex;

    for (var i = 0; i < waypoints.length - 1; i++) {
      var start = waypoints[i],
          end = waypoints[i + 1],
          distance = getDistancePointLine(position, [ start, end ]);

      if (distance < minDistance) {
        minDistance = distance;
        segmentIndex = i;
      }
    }

    return [ waypoints[segmentIndex], waypoints[segmentIndex + 1] ];
  }

  /**
   * A service that adds editable bendpoints to connections.
   */
  function Bendpoints(
      eventBus, canvas, interactionEvents,
      bendpointMove, connectionSegmentMove) {

    /**
     * Returns true if intersection point is inside middle region of segment, adjusted by
     * optional threshold
     */
    function isIntersectionMiddle(intersection, waypoints, treshold) {
      var idx = intersection.index,
          p = intersection.point,
          p0, p1, mid, aligned, xDelta, yDelta;

      if (idx <= 0 || intersection.bendpoint) {
        return false;
      }

      p0 = waypoints[idx - 1];
      p1 = waypoints[idx];
      mid = getMidPoint(p0, p1),
      aligned = pointsAligned(p0, p1);
      xDelta = Math.abs(p.x - mid.x);
      yDelta = Math.abs(p.y - mid.y);

      return aligned && xDelta <= treshold && yDelta <= treshold;
    }

    /**
     * Calculates the threshold from a connection's middle which fits the two-third-region
     */
    function calculateIntersectionThreshold(connection, intersection) {
      var waypoints = connection.waypoints,
          relevantSegment, alignment, segmentLength, threshold;

      if (intersection.index <= 0 || intersection.bendpoint) {
        return null;
      }

      // segment relative to connection intersection
      relevantSegment = {
        start: waypoints[intersection.index - 1],
        end: waypoints[intersection.index]
      };

      alignment = pointsAligned(relevantSegment.start, relevantSegment.end);

      if (!alignment) {
        return null;
      }

      if (alignment === 'h') {
        segmentLength = relevantSegment.end.x - relevantSegment.start.x;
      } else {
        segmentLength = relevantSegment.end.y - relevantSegment.start.y;
      }

      // calculate threshold relative to 2/3 of segment length
      threshold = calculateSegmentMoveRegion(segmentLength) / 2;

      return threshold;
    }

    function activateBendpointMove(event, connection) {
      var waypoints = connection.waypoints,
          intersection = getConnectionIntersection(canvas, waypoints, event),
          threshold;

      if (!intersection) {
        return;
      }

      threshold = calculateIntersectionThreshold(connection, intersection);

      if (isIntersectionMiddle(intersection, waypoints, threshold)) {
        connectionSegmentMove.start(event, connection, intersection.index);
      } else {
        bendpointMove.start(event, connection, intersection.index, !intersection.bendpoint);
      }

      // we've handled the event
      return true;
    }

    function bindInteractionEvents(node, eventName, element) {

      componentEvent.bind(node, eventName, function(event) {
        interactionEvents.triggerMouseEvent(eventName, event, element);
        event.stopPropagation();
      });
    }

    function getBendpointsContainer(element, create) {

      var layer = canvas.getLayer('overlays'),
          gfx = query('.djs-bendpoints[data-element-id="' + cssEscape(element.id) + '"]', layer);

      if (!gfx && create) {
        gfx = create$1('g');
        attr(gfx, { 'data-element-id': element.id });
        classes(gfx).add('djs-bendpoints');

        append(layer, gfx);

        bindInteractionEvents(gfx, 'mousedown', element);
        bindInteractionEvents(gfx, 'click', element);
        bindInteractionEvents(gfx, 'dblclick', element);
      }

      return gfx;
    }

    function getSegmentDragger(idx, parentGfx) {
      return query(
        '.djs-segment-dragger[data-segment-idx="' + idx + '"]',
        parentGfx
      );
    }

    function createBendpoints(gfx, connection) {
      connection.waypoints.forEach(function(p, idx) {
        var bendpoint = addBendpoint(gfx);

        append(gfx, bendpoint);

        translate$2(bendpoint, p.x, p.y);
      });

      // add floating bendpoint
      addBendpoint(gfx, 'floating');
    }

    function createSegmentDraggers(gfx, connection) {

      var waypoints = connection.waypoints;

      var segmentStart,
          segmentEnd,
          segmentDraggerGfx;

      for (var i = 1; i < waypoints.length; i++) {

        segmentStart = waypoints[i - 1];
        segmentEnd = waypoints[i];

        if (pointsAligned(segmentStart, segmentEnd)) {
          segmentDraggerGfx = addSegmentDragger(gfx, segmentStart, segmentEnd);

          attr(segmentDraggerGfx, { 'data-segment-idx': i });

          bindInteractionEvents(segmentDraggerGfx, 'mousemove', connection);
        }
      }
    }

    function clearBendpoints(gfx) {
      forEach$1(all('.' + BENDPOINT_CLS, gfx), function(node) {
        remove$1(node);
      });
    }

    function clearSegmentDraggers(gfx) {
      forEach$1(all('.' + SEGMENT_DRAGGER_CLS, gfx), function(node) {
        remove$1(node);
      });
    }

    function addHandles(connection) {

      var gfx = getBendpointsContainer(connection);

      if (!gfx) {
        gfx = getBendpointsContainer(connection, true);

        createBendpoints(gfx, connection);
        createSegmentDraggers(gfx, connection);
      }

      return gfx;
    }

    function updateHandles(connection) {

      var gfx = getBendpointsContainer(connection);

      if (gfx) {
        clearSegmentDraggers(gfx);
        clearBendpoints(gfx);
        createSegmentDraggers(gfx, connection);
        createBendpoints(gfx, connection);
      }
    }

    function updateFloatingBendpointPosition(parentGfx, intersection) {
      var floating = query('.floating', parentGfx),
          point = intersection.point;

      if (!floating) {
        return;
      }

      translate$2(floating, point.x, point.y);

    }

    function updateSegmentDraggerPosition(parentGfx, intersection, waypoints) {

      var draggerGfx = getSegmentDragger(intersection.index, parentGfx),
          segmentStart = waypoints[intersection.index - 1],
          segmentEnd = waypoints[intersection.index],
          point = intersection.point,
          mid = getMidPoint(segmentStart, segmentEnd),
          alignment = pointsAligned(segmentStart, segmentEnd),
          draggerVisual, relativePosition;

      if (!draggerGfx) {
        return;
      }

      draggerVisual = getDraggerVisual(draggerGfx);

      relativePosition = {
        x: point.x - mid.x,
        y: point.y - mid.y
      };

      if (alignment === 'v') {

        // rotate position
        relativePosition = {
          x: relativePosition.y,
          y: relativePosition.x
        };
      }

      translate$2(draggerVisual, relativePosition.x, relativePosition.y);
    }

    eventBus.on('connection.changed', function(event) {
      updateHandles(event.element);
    });

    eventBus.on('connection.remove', function(event) {
      var gfx = getBendpointsContainer(event.element);

      if (gfx) {
        remove$1(gfx);
      }
    });

    eventBus.on('element.marker.update', function(event) {

      var element = event.element,
          bendpointsGfx;

      if (!element.waypoints) {
        return;
      }

      bendpointsGfx = addHandles(element);

      if (event.add) {
        classes(bendpointsGfx).add(event.marker);
      } else {
        classes(bendpointsGfx).remove(event.marker);
      }
    });

    eventBus.on('element.mousemove', function(event) {

      var element = event.element,
          waypoints = element.waypoints,
          bendpointsGfx,
          intersection;

      if (waypoints) {
        bendpointsGfx = getBendpointsContainer(element, true);

        intersection = getConnectionIntersection(canvas, waypoints, event.originalEvent);

        if (!intersection) {
          return;
        }

        updateFloatingBendpointPosition(bendpointsGfx, intersection);

        if (!intersection.bendpoint) {
          updateSegmentDraggerPosition(bendpointsGfx, intersection, waypoints);
        }

      }
    });

    eventBus.on('element.mousedown', function(event) {

      if (!isPrimaryButton(event)) {
        return;
      }

      var originalEvent = event.originalEvent,
          element = event.element;

      if (!element.waypoints) {
        return;
      }

      return activateBendpointMove(originalEvent, element);
    });

    eventBus.on('selection.changed', function(event) {
      var newSelection = event.newSelection,
          primary = newSelection[0];

      if (primary && primary.waypoints) {
        addHandles(primary);
      }
    });

    eventBus.on('element.hover', function(event) {
      var element = event.element;

      if (element.waypoints) {
        addHandles(element);
        interactionEvents.registerEvent(event.gfx, 'mousemove', 'element.mousemove');
      }
    });

    eventBus.on('element.out', function(event) {
      interactionEvents.unregisterEvent(event.gfx, 'mousemove', 'element.mousemove');
    });

    // update bendpoint container data attribute on element ID change
    eventBus.on('element.updateId', function(context) {
      var element = context.element,
          newId = context.newId;

      if (element.waypoints) {
        var bendpointContainer = getBendpointsContainer(element);

        if (bendpointContainer) {
          attr(bendpointContainer, { 'data-element-id': newId });
        }
      }
    });

    // API

    this.addHandles = addHandles;
    this.updateHandles = updateHandles;
    this.getBendpointsContainer = getBendpointsContainer;
    this.getSegmentDragger = getSegmentDragger;
  }

  Bendpoints.$inject = [
    'eventBus',
    'canvas',
    'interactionEvents',
    'bendpointMove',
    'connectionSegmentMove'
  ];



  // helper /////////////

  function getDraggerVisual(draggerGfx) {
    return query('.djs-visual', draggerGfx);
  }

  var round$8 = Math.round;

  var RECONNECT_START$1 = 'reconnectStart',
      RECONNECT_END$1 = 'reconnectEnd',
      UPDATE_WAYPOINTS$1 = 'updateWaypoints';


  /**
   * Move bendpoints through drag and drop to add/remove bendpoints or reconnect connection.
   */
  function BendpointMove(injector, eventBus, canvas, dragging, rules, modeling) {
    this._injector = injector;

    this.start = function(event, connection, bendpointIndex, insert) {
      var gfx = canvas.getGraphics(connection),
          source = connection.source,
          target = connection.target,
          waypoints = connection.waypoints,
          type;

      if (!insert && bendpointIndex === 0) {
        type = RECONNECT_START$1;
      } else
      if (!insert && bendpointIndex === waypoints.length - 1) {
        type = RECONNECT_END$1;
      } else {
        type = UPDATE_WAYPOINTS$1;
      }

      var command = type === UPDATE_WAYPOINTS$1 ? 'connection.updateWaypoints' : 'connection.reconnect';

      var allowed = rules.allowed(command, {
        connection: connection,
        source: source,
        target: target
      });

      if (allowed === false) {
        allowed = rules.allowed(command, {
          connection: connection,
          source: target,
          target: source
        });
      }

      if (allowed === false) {
        return;
      }

      dragging.init(event, 'bendpoint.move', {
        data: {
          connection: connection,
          connectionGfx: gfx,
          context: {
            allowed: allowed,
            bendpointIndex: bendpointIndex,
            connection: connection,
            source: source,
            target: target,
            insert: insert,
            type: type
          }
        }
      });
    };

    eventBus.on('bendpoint.move.hover', function(event) {
      var context = event.context,
          connection = context.connection,
          source = connection.source,
          target = connection.target,
          hover = event.hover,
          type = context.type;

      // cache hover state
      context.hover = hover;

      var allowed;

      if (!hover) {
        return;
      }

      var command = type === UPDATE_WAYPOINTS$1 ? 'connection.updateWaypoints' : 'connection.reconnect';

      allowed = context.allowed = rules.allowed(command, {
        connection: connection,
        source: type === RECONNECT_START$1 ? hover : source,
        target: type === RECONNECT_END$1 ? hover : target
      });

      if (allowed) {
        context.source = type === RECONNECT_START$1 ? hover : source;
        context.target = type === RECONNECT_END$1 ? hover : target;

        return;
      }

      if (allowed === false) {
        allowed = context.allowed = rules.allowed(command, {
          connection: connection,
          source: type === RECONNECT_END$1 ? hover : target,
          target: type === RECONNECT_START$1 ? hover : source
        });
      }

      if (allowed) {
        context.source = type === RECONNECT_END$1 ? hover : target;
        context.target = type === RECONNECT_START$1 ? hover : source;
      }
    });

    eventBus.on([ 'bendpoint.move.out', 'bendpoint.move.cleanup' ], function(event) {
      var context = event.context,
          type = context.type;

      context.hover = null;
      context.source = null;
      context.target = null;

      if (type !== UPDATE_WAYPOINTS$1) {
        context.allowed = false;
      }
    });

    eventBus.on('bendpoint.move.end', function(event) {
      var context = event.context,
          allowed = context.allowed,
          bendpointIndex = context.bendpointIndex,
          connection = context.connection,
          insert = context.insert,
          newWaypoints = connection.waypoints.slice(),
          source = context.source,
          target = context.target,
          type = context.type,
          hints = context.hints || {};

      // ensure integer values (important if zoom level was > 1 during move)
      var docking = {
        x: round$8(event.x),
        y: round$8(event.y)
      };

      if (!allowed) {
        return false;
      }

      if (type === UPDATE_WAYPOINTS$1) {
        if (insert) {

          // insert new bendpoint
          newWaypoints.splice(bendpointIndex, 0, docking);
        } else {

          // swap previous waypoint with moved one
          newWaypoints[bendpointIndex] = docking;
        }

        // pass hints about actual moved bendpoint
        // useful for connection/label layout
        hints.bendpointMove = {
          insert: insert,
          bendpointIndex: bendpointIndex
        };

        newWaypoints = this.cropWaypoints(connection, newWaypoints);

        modeling.updateWaypoints(connection, filterRedundantWaypoints(newWaypoints), hints);
      } else {
        if (type === RECONNECT_START$1) {
          hints.docking = 'source';

          if (isReverse$2(context)) {
            hints.docking = 'target';

            hints.newWaypoints = newWaypoints.reverse();
          }
        } else if (type === RECONNECT_END$1) {
          hints.docking = 'target';

          if (isReverse$2(context)) {
            hints.docking = 'source';

            hints.newWaypoints = newWaypoints.reverse();
          }
        }

        modeling.reconnect(connection, source, target, docking, hints);
      }
    }, this);
  }

  BendpointMove.$inject = [
    'injector',
    'eventBus',
    'canvas',
    'dragging',
    'rules',
    'modeling'
  ];

  BendpointMove.prototype.cropWaypoints = function(connection, newWaypoints) {
    var connectionDocking = this._injector.get('connectionDocking', false);

    if (!connectionDocking) {
      return newWaypoints;
    }

    var waypoints = connection.waypoints;

    connection.waypoints = newWaypoints;

    connection.waypoints = connectionDocking.getCroppedWaypoints(connection);

    newWaypoints = connection.waypoints;

    connection.waypoints = waypoints;

    return newWaypoints;
  };


  // helpers //////////

  function isReverse$2(context) {
    var hover = context.hover,
        source = context.source,
        target = context.target,
        type = context.type;

    if (type === RECONNECT_START$1) {
      return hover && target && hover === target && source !== target;
    }

    if (type === RECONNECT_END$1) {
      return hover && source && hover === source && source !== target;
    }
  }

  var RECONNECT_START = 'reconnectStart',
      RECONNECT_END = 'reconnectEnd',
      UPDATE_WAYPOINTS = 'updateWaypoints';

  var MARKER_OK$4 = 'connect-ok',
      MARKER_NOT_OK$4 = 'connect-not-ok',
      MARKER_CONNECT_HOVER$1 = 'connect-hover',
      MARKER_CONNECT_UPDATING$1 = 'djs-updating',
      MARKER_ELEMENT_HIDDEN = 'djs-element-hidden';

  var HIGH_PRIORITY$i = 1100;

  /**
   * Preview connection while moving bendpoints.
   */
  function BendpointMovePreview(bendpointMove, injector, eventBus, canvas) {
    this._injector = injector;

    var connectionPreview = injector.get('connectionPreview', false);

    eventBus.on('bendpoint.move.start', function(event) {
      var context = event.context,
          bendpointIndex = context.bendpointIndex,
          connection = context.connection,
          insert = context.insert,
          waypoints = connection.waypoints,
          newWaypoints = waypoints.slice();

      context.waypoints = waypoints;

      if (insert) {

        // insert placeholder for new bendpoint
        newWaypoints.splice(bendpointIndex, 0, { x: event.x, y: event.y });
      }

      connection.waypoints = newWaypoints;

      // add dragger gfx
      var draggerGfx = context.draggerGfx = addBendpoint(canvas.getLayer('overlays'));

      classes(draggerGfx).add('djs-dragging');

      canvas.addMarker(connection, MARKER_ELEMENT_HIDDEN);
      canvas.addMarker(connection, MARKER_CONNECT_UPDATING$1);
    });

    eventBus.on('bendpoint.move.hover', function(event) {
      var context = event.context,
          allowed = context.allowed,
          hover = context.hover,
          type = context.type;

      if (hover) {
        canvas.addMarker(hover, MARKER_CONNECT_HOVER$1);

        if (type === UPDATE_WAYPOINTS) {
          return;
        }

        if (allowed) {
          canvas.removeMarker(hover, MARKER_NOT_OK$4);
          canvas.addMarker(hover, MARKER_OK$4);
        } else if (allowed === false) {
          canvas.removeMarker(hover, MARKER_OK$4);
          canvas.addMarker(hover, MARKER_NOT_OK$4);
        }
      }
    });

    eventBus.on([
      'bendpoint.move.out',
      'bendpoint.move.cleanup'
    ], HIGH_PRIORITY$i, function(event) {
      var context = event.context,
          hover = context.hover,
          target = context.target;

      if (hover) {
        canvas.removeMarker(hover, MARKER_CONNECT_HOVER$1);
        canvas.removeMarker(hover, target ? MARKER_OK$4 : MARKER_NOT_OK$4);
      }
    });

    eventBus.on('bendpoint.move.move', function(event) {
      var context = event.context,
          allowed = context.allowed,
          bendpointIndex = context.bendpointIndex,
          draggerGfx = context.draggerGfx,
          hover = context.hover,
          type = context.type,
          connection = context.connection,
          source = connection.source,
          target = connection.target,
          newWaypoints = connection.waypoints.slice(),
          bendpoint = { x: event.x, y: event.y },
          hints = context.hints || {},
          drawPreviewHints = {};

      if (connectionPreview) {
        if (hints.connectionStart) {
          drawPreviewHints.connectionStart = hints.connectionStart;
        }

        if (hints.connectionEnd) {
          drawPreviewHints.connectionEnd = hints.connectionEnd;
        }


        if (type === RECONNECT_START) {
          if (isReverse$2(context)) {
            drawPreviewHints.connectionEnd = drawPreviewHints.connectionEnd || bendpoint;

            drawPreviewHints.source = target;
            drawPreviewHints.target = hover || source;

            newWaypoints = newWaypoints.reverse();
          } else {
            drawPreviewHints.connectionStart = drawPreviewHints.connectionStart || bendpoint;

            drawPreviewHints.source = hover || source;
            drawPreviewHints.target = target;
          }
        } else if (type === RECONNECT_END) {
          if (isReverse$2(context)) {
            drawPreviewHints.connectionStart = drawPreviewHints.connectionStart || bendpoint;

            drawPreviewHints.source = hover || target;
            drawPreviewHints.target = source;

            newWaypoints = newWaypoints.reverse();
          } else {
            drawPreviewHints.connectionEnd = drawPreviewHints.connectionEnd || bendpoint;

            drawPreviewHints.source = source;
            drawPreviewHints.target = hover || target;
          }

        } else {
          drawPreviewHints.noCropping = true;
          drawPreviewHints.noLayout = true;
          newWaypoints[ bendpointIndex ] = bendpoint;
        }

        if (type === UPDATE_WAYPOINTS) {
          newWaypoints = bendpointMove.cropWaypoints(connection, newWaypoints);
        }

        drawPreviewHints.waypoints = newWaypoints;

        connectionPreview.drawPreview(context, allowed, drawPreviewHints);
      }

      translate$2(draggerGfx, event.x, event.y);
    }, this);

    eventBus.on([
      'bendpoint.move.end',
      'bendpoint.move.cancel'
    ], HIGH_PRIORITY$i, function(event) {
      var context = event.context,
          connection = context.connection,
          draggerGfx = context.draggerGfx,
          hover = context.hover,
          target = context.target,
          waypoints = context.waypoints;

      connection.waypoints = waypoints;

      // remove dragger gfx
      remove$1(draggerGfx);

      canvas.removeMarker(connection, MARKER_CONNECT_UPDATING$1);
      canvas.removeMarker(connection, MARKER_ELEMENT_HIDDEN);

      if (hover) {
        canvas.removeMarker(hover, MARKER_OK$4);
        canvas.removeMarker(hover, target ? MARKER_OK$4 : MARKER_NOT_OK$4);
      }

      if (connectionPreview) {
        connectionPreview.cleanUp(context);
      }
    });
  }

  BendpointMovePreview.$inject = [
    'bendpointMove',
    'injector',
    'eventBus',
    'canvas'
  ];

  var MARKER_CONNECT_HOVER = 'connect-hover',
      MARKER_CONNECT_UPDATING = 'djs-updating';


  function axisAdd(point, axis, delta) {
    return axisSet(point, axis, point[axis] + delta);
  }

  function axisSet(point, axis, value) {
    return {
      x: (axis === 'x' ? value : point.x),
      y: (axis === 'y' ? value : point.y)
    };
  }

  function axisFenced(position, segmentStart, segmentEnd, axis) {

    var maxValue = Math.max(segmentStart[axis], segmentEnd[axis]),
        minValue = Math.min(segmentStart[axis], segmentEnd[axis]);

    var padding = 20;

    var fencedValue = Math.min(Math.max(minValue + padding, position[axis]), maxValue - padding);

    return axisSet(segmentStart, axis, fencedValue);
  }

  function flipAxis(axis) {
    return axis === 'x' ? 'y' : 'x';
  }

  /**
   * Get the docking point on the given element.
   *
   * Compute a reasonable docking, if non exists.
   *
   * @param  {Point} point
   * @param  {djs.model.Shape} referenceElement
   * @param  {string} moveAxis (x|y)
   *
   * @return {Point}
   */
  function getDocking$2(point, referenceElement, moveAxis) {

    var referenceMid,
        inverseAxis;

    if (point.original) {
      return point.original;
    } else {
      referenceMid = getMid(referenceElement);
      inverseAxis = flipAxis(moveAxis);

      return axisSet(point, inverseAxis, referenceMid[inverseAxis]);
    }
  }

  /**
   * A component that implements moving of bendpoints
   */
  function ConnectionSegmentMove(
      injector, eventBus, canvas,
      dragging, graphicsFactory, modeling) {

    // optional connection docking integration
    var connectionDocking = injector.get('connectionDocking', false);


    // API

    this.start = function(event, connection, idx) {

      var context,
          gfx = canvas.getGraphics(connection),
          segmentStartIndex = idx - 1,
          segmentEndIndex = idx,
          waypoints = connection.waypoints,
          segmentStart = waypoints[segmentStartIndex],
          segmentEnd = waypoints[segmentEndIndex],
          intersection = getConnectionIntersection(canvas, waypoints, event),
          direction, axis, dragPosition;

      direction = pointsAligned(segmentStart, segmentEnd);

      // do not move diagonal connection
      if (!direction) {
        return;
      }

      // the axis where we are going to move things
      axis = direction === 'v' ? 'x' : 'y';

      if (segmentStartIndex === 0) {
        segmentStart = getDocking$2(segmentStart, connection.source, axis);
      }

      if (segmentEndIndex === waypoints.length - 1) {
        segmentEnd = getDocking$2(segmentEnd, connection.target, axis);
      }

      if (intersection) {
        dragPosition = intersection.point;
      } else {

        // set to segment center as default
        dragPosition = {
          x: (segmentStart.x + segmentEnd.x) / 2,
          y: (segmentStart.y + segmentEnd.y) / 2
        };
      }

      context = {
        connection: connection,
        segmentStartIndex: segmentStartIndex,
        segmentEndIndex: segmentEndIndex,
        segmentStart: segmentStart,
        segmentEnd: segmentEnd,
        axis: axis,
        dragPosition: dragPosition
      };

      dragging.init(event, dragPosition, 'connectionSegment.move', {
        cursor: axis === 'x' ? 'resize-ew' : 'resize-ns',
        data: {
          connection: connection,
          connectionGfx: gfx,
          context: context
        }
      });
    };

    /**
     * Crop connection if connection cropping is provided.
     *
     * @param {Connection} connection
     * @param {Array<Point>} newWaypoints
     *
     * @return {Array<Point>} cropped connection waypoints
     */
    function cropConnection(connection, newWaypoints) {

      // crop connection, if docking service is provided only
      if (!connectionDocking) {
        return newWaypoints;
      }

      var oldWaypoints = connection.waypoints,
          croppedWaypoints;

      // temporary set new waypoints
      connection.waypoints = newWaypoints;

      croppedWaypoints = connectionDocking.getCroppedWaypoints(connection);

      // restore old waypoints
      connection.waypoints = oldWaypoints;

      return croppedWaypoints;
    }

    // DRAGGING IMPLEMENTATION

    function redrawConnection(data) {
      graphicsFactory.update('connection', data.connection, data.connectionGfx);
    }

    function updateDragger(context, segmentOffset, event) {

      var newWaypoints = context.newWaypoints,
          segmentStartIndex = context.segmentStartIndex + segmentOffset,
          segmentStart = newWaypoints[segmentStartIndex],
          segmentEndIndex = context.segmentEndIndex + segmentOffset,
          segmentEnd = newWaypoints[segmentEndIndex],
          axis = flipAxis(context.axis);

      // make sure the dragger does not move
      // outside the connection
      var draggerPosition = axisFenced(event, segmentStart, segmentEnd, axis);

      // update dragger
      translate$2(context.draggerGfx, draggerPosition.x, draggerPosition.y);
    }

    /**
     * Filter waypoints for redundant ones (i.e. on the same axis).
     * Returns the filtered waypoints and the offset related to the segment move.
     *
     * @param {Array<Point>} waypoints
     * @param {Integer} segmentStartIndex of moved segment start
     *
     * @return {Object} { filteredWaypoints, segmentOffset }
     */
    function filterRedundantWaypoints(waypoints, segmentStartIndex) {

      var segmentOffset = 0;

      var filteredWaypoints = waypoints.filter(function(r, idx) {
        if (pointsOnLine(waypoints[idx - 1], waypoints[idx + 1], r)) {

          // remove point and increment offset
          segmentOffset = idx <= segmentStartIndex ? segmentOffset - 1 : segmentOffset;
          return false;
        }

        // dont remove point
        return true;
      });

      return {
        waypoints: filteredWaypoints,
        segmentOffset: segmentOffset
      };
    }

    eventBus.on('connectionSegment.move.start', function(event) {

      var context = event.context,
          connection = event.connection,
          layer = canvas.getLayer('overlays');

      context.originalWaypoints = connection.waypoints.slice();

      // add dragger gfx
      context.draggerGfx = addSegmentDragger(layer, context.segmentStart, context.segmentEnd);
      classes(context.draggerGfx).add('djs-dragging');

      canvas.addMarker(connection, MARKER_CONNECT_UPDATING);
    });

    eventBus.on('connectionSegment.move.move', function(event) {

      var context = event.context,
          connection = context.connection,
          segmentStartIndex = context.segmentStartIndex,
          segmentEndIndex = context.segmentEndIndex,
          segmentStart = context.segmentStart,
          segmentEnd = context.segmentEnd,
          axis = context.axis;

      var newWaypoints = context.originalWaypoints.slice(),
          newSegmentStart = axisAdd(segmentStart, axis, event['d' + axis]),
          newSegmentEnd = axisAdd(segmentEnd, axis, event['d' + axis]);

      // original waypoint count and added / removed
      // from start waypoint delta. We use the later
      // to retrieve the updated segmentStartIndex / segmentEndIndex
      var waypointCount = newWaypoints.length,
          segmentOffset = 0;

      // move segment start / end by axis delta
      newWaypoints[segmentStartIndex] = newSegmentStart;
      newWaypoints[segmentEndIndex] = newSegmentEnd;

      var sourceToSegmentOrientation,
          targetToSegmentOrientation;

      // handle first segment
      if (segmentStartIndex < 2) {
        sourceToSegmentOrientation = getOrientation(connection.source, newSegmentStart);

        // first bendpoint, remove first segment if intersecting
        if (segmentStartIndex === 1) {

          if (sourceToSegmentOrientation === 'intersect') {
            newWaypoints.shift();
            newWaypoints[0] = newSegmentStart;
            segmentOffset--;
          }
        }

        // docking point, add segment if not intersecting anymore
        else {
          if (sourceToSegmentOrientation !== 'intersect') {
            newWaypoints.unshift(segmentStart);
            segmentOffset++;
          }
        }
      }

      // handle last segment
      if (segmentEndIndex > waypointCount - 3) {
        targetToSegmentOrientation = getOrientation(connection.target, newSegmentEnd);

        // last bendpoint, remove last segment if intersecting
        if (segmentEndIndex === waypointCount - 2) {

          if (targetToSegmentOrientation === 'intersect') {
            newWaypoints.pop();
            newWaypoints[newWaypoints.length - 1] = newSegmentEnd;
          }
        }

        // last bendpoint, remove last segment if intersecting
        else {
          if (targetToSegmentOrientation !== 'intersect') {
            newWaypoints.push(segmentEnd);
          }
        }
      }

      // update connection waypoints
      context.newWaypoints = connection.waypoints = cropConnection(connection, newWaypoints);

      // update dragger position
      updateDragger(context, segmentOffset, event);

      // save segmentOffset in context
      context.newSegmentStartIndex = segmentStartIndex + segmentOffset;

      // redraw connection
      redrawConnection(event);
    });

    eventBus.on('connectionSegment.move.hover', function(event) {

      event.context.hover = event.hover;
      canvas.addMarker(event.hover, MARKER_CONNECT_HOVER);
    });

    eventBus.on([
      'connectionSegment.move.out',
      'connectionSegment.move.cleanup'
    ], function(event) {

      // remove connect marker
      // if it was added
      var hover = event.context.hover;

      if (hover) {
        canvas.removeMarker(hover, MARKER_CONNECT_HOVER);
      }
    });

    eventBus.on('connectionSegment.move.cleanup', function(event) {

      var context = event.context,
          connection = context.connection;

      // remove dragger gfx
      if (context.draggerGfx) {
        remove$1(context.draggerGfx);
      }

      canvas.removeMarker(connection, MARKER_CONNECT_UPDATING);
    });

    eventBus.on([
      'connectionSegment.move.cancel',
      'connectionSegment.move.end'
    ], function(event) {
      var context = event.context,
          connection = context.connection;

      connection.waypoints = context.originalWaypoints;

      redrawConnection(event);
    });

    eventBus.on('connectionSegment.move.end', function(event) {

      var context = event.context,
          connection = context.connection,
          newWaypoints = context.newWaypoints,
          newSegmentStartIndex = context.newSegmentStartIndex;

      // ensure we have actual pixel values bendpoint
      // coordinates (important when zoom level was > 1 during move)
      newWaypoints = newWaypoints.map(function(p) {
        return {
          original: p.original,
          x: Math.round(p.x),
          y: Math.round(p.y)
        };
      });

      // apply filter redunant waypoints
      var filtered = filterRedundantWaypoints(newWaypoints, newSegmentStartIndex);

      // get filtered waypoints
      var filteredWaypoints = filtered.waypoints,
          croppedWaypoints = cropConnection(connection, filteredWaypoints),
          segmentOffset = filtered.segmentOffset;

      var hints = {
        segmentMove: {
          segmentStartIndex: context.segmentStartIndex,
          newSegmentStartIndex: newSegmentStartIndex + segmentOffset
        }
      };

      modeling.updateWaypoints(connection, croppedWaypoints, hints);
    });
  }

  ConnectionSegmentMove.$inject = [
    'injector',
    'eventBus',
    'canvas',
    'dragging',
    'graphicsFactory',
    'modeling'
  ];

  var abs$6 = Math.abs,
      round$7 = Math.round;


  /**
   * Snap value to a collection of reference values.
   *
   * @param  {number} value
   * @param  {Array<number>} values
   * @param  {number} [tolerance=10]
   *
   * @return {number} the value we snapped to or null, if none snapped
   */
  function snapTo(value, values, tolerance) {
    tolerance = tolerance === undefined ? 10 : tolerance;

    var idx, snapValue;

    for (idx = 0; idx < values.length; idx++) {
      snapValue = values[idx];

      if (abs$6(snapValue - value) <= tolerance) {
        return snapValue;
      }
    }
  }


  function topLeft(bounds) {
    return {
      x: bounds.x,
      y: bounds.y
    };
  }

  function bottomRight(bounds) {
    return {
      x: bounds.x + bounds.width,
      y: bounds.y + bounds.height
    };
  }

  function mid$2(bounds, defaultValue) {

    if (!bounds || isNaN(bounds.x) || isNaN(bounds.y)) {
      return defaultValue;
    }

    return {
      x: round$7(bounds.x + bounds.width / 2),
      y: round$7(bounds.y + bounds.height / 2)
    };
  }


  /**
   * Retrieve the snap state of the given event.
   *
   * @param  {Event} event
   * @param  {string} axis
   *
   * @return {boolean} the snapped state
   *
   */
  function isSnapped(event, axis) {
    var snapped = event.snapped;

    if (!snapped) {
      return false;
    }

    if (typeof axis === 'string') {
      return snapped[axis];
    }

    return snapped.x && snapped.y;
  }


  /**
   * Set the given event as snapped.
   *
   * This method may change the x and/or y position of the shape
   * from the given event!
   *
   * @param {Event} event
   * @param {string} axis
   * @param {number|boolean} value
   *
   * @return {number} old value
   */
  function setSnapped(event, axis, value) {
    if (typeof axis !== 'string') {
      throw new Error('axis must be in [x, y]');
    }

    if (typeof value !== 'number' && value !== false) {
      throw new Error('value must be Number or false');
    }

    var delta,
        previousValue = event[axis];

    var snapped = event.snapped = (event.snapped || {});


    if (value === false) {
      snapped[axis] = false;
    } else {
      snapped[axis] = true;

      delta = value - previousValue;

      event[axis] += delta;
      event['d' + axis] += delta;
    }

    return previousValue;
  }

  /**
   * Get children of a shape.
   *
   * @param {djs.model.Shape} parent
   *
   * @returns {Array<djs.model.Shape|djs.model.Connection>}
   */
  function getChildren(parent) {
    return parent.children || [];
  }

  var abs$5 = Math.abs,
      round$6 = Math.round;

  var TOLERANCE = 10;


  function BendpointSnapping(eventBus) {

    function snapTo(values, value) {

      if (isArray$3(values)) {
        var i = values.length;

        while (i--) if (abs$5(values[i] - value) <= TOLERANCE) {
          return values[i];
        }
      } else {
        values = +values;
        var rem = value % values;

        if (rem < TOLERANCE) {
          return value - rem;
        }

        if (rem > values - TOLERANCE) {
          return value - rem + values;
        }
      }

      return value;
    }

    function getSnapPoint(element, event) {

      if (element.waypoints) {
        return getClosestPointOnConnection(event, element);
      }

      if (element.width) {
        return {
          x: round$6(element.width / 2 + element.x),
          y: round$6(element.height / 2 + element.y)
        };
      }
    }

    // connection segment snapping //////////////////////

    function getConnectionSegmentSnaps(event) {

      var context = event.context,
          snapPoints = context.snapPoints,
          connection = context.connection,
          waypoints = connection.waypoints,
          segmentStart = context.segmentStart,
          segmentStartIndex = context.segmentStartIndex,
          segmentEnd = context.segmentEnd,
          segmentEndIndex = context.segmentEndIndex,
          axis = context.axis;

      if (snapPoints) {
        return snapPoints;
      }

      var referenceWaypoints = [
        waypoints[segmentStartIndex - 1],
        segmentStart,
        segmentEnd,
        waypoints[segmentEndIndex + 1]
      ];

      if (segmentStartIndex < 2) {
        referenceWaypoints.unshift(getSnapPoint(connection.source, event));
      }

      if (segmentEndIndex > waypoints.length - 3) {
        referenceWaypoints.unshift(getSnapPoint(connection.target, event));
      }

      context.snapPoints = snapPoints = { horizontal: [] , vertical: [] };

      forEach$1(referenceWaypoints, function(p) {

        // we snap on existing bendpoints only,
        // not placeholders that are inserted during add
        if (p) {
          p = p.original || p;

          if (axis === 'y') {
            snapPoints.horizontal.push(p.y);
          }

          if (axis === 'x') {
            snapPoints.vertical.push(p.x);
          }
        }
      });

      return snapPoints;
    }

    eventBus.on('connectionSegment.move.move', 1500, function(event) {
      var snapPoints = getConnectionSegmentSnaps(event),
          x = event.x,
          y = event.y,
          sx, sy;

      if (!snapPoints) {
        return;
      }

      // snap
      sx = snapTo(snapPoints.vertical, x);
      sy = snapTo(snapPoints.horizontal, y);


      // correction x/y
      var cx = (x - sx),
          cy = (y - sy);

      // update delta
      assign(event, {
        dx: event.dx - cx,
        dy: event.dy - cy,
        x: sx,
        y: sy
      });

      // only set snapped if actually snapped
      if (cx || snapPoints.vertical.indexOf(x) !== -1) {
        setSnapped(event, 'x', sx);
      }

      if (cy || snapPoints.horizontal.indexOf(y) !== -1) {
        setSnapped(event, 'y', sy);
      }
    });


    // bendpoint snapping //////////////////////

    function getBendpointSnaps(context) {

      var snapPoints = context.snapPoints,
          waypoints = context.connection.waypoints,
          bendpointIndex = context.bendpointIndex;

      if (snapPoints) {
        return snapPoints;
      }

      var referenceWaypoints = [ waypoints[bendpointIndex - 1], waypoints[bendpointIndex + 1] ];

      context.snapPoints = snapPoints = { horizontal: [] , vertical: [] };

      forEach$1(referenceWaypoints, function(p) {

        // we snap on existing bendpoints only,
        // not placeholders that are inserted during add
        if (p) {
          p = p.original || p;

          snapPoints.horizontal.push(p.y);
          snapPoints.vertical.push(p.x);
        }
      });

      return snapPoints;
    }

    // Snap Endpoint of new connection
    eventBus.on([
      'connect.hover',
      'connect.move',
      'connect.end'
    ], 1500, function(event) {
      var context = event.context,
          hover = context.hover,
          hoverMid = hover && getSnapPoint(hover, event);

      // only snap on connections, elements can have multiple connect endpoints
      if (!isConnection$d(hover) || !hoverMid || !hoverMid.x || !hoverMid.y) {
        return;
      }

      setSnapped(event, 'x', hoverMid.x);
      setSnapped(event, 'y', hoverMid.y);
    });

    eventBus.on([ 'bendpoint.move.move', 'bendpoint.move.end' ], 1500, function(event) {

      var context = event.context,
          snapPoints = getBendpointSnaps(context),
          hover = context.hover,
          hoverMid = hover && getSnapPoint(hover, event),
          x = event.x,
          y = event.y,
          sx, sy;

      if (!snapPoints) {
        return;
      }

      // snap to hover mid
      sx = snapTo(hoverMid ? snapPoints.vertical.concat([ hoverMid.x ]) : snapPoints.vertical, x);
      sy = snapTo(hoverMid ? snapPoints.horizontal.concat([ hoverMid.y ]) : snapPoints.horizontal, y);

      // correction x/y
      var cx = (x - sx),
          cy = (y - sy);

      // update delta
      assign(event, {
        dx: event.dx - cx,
        dy: event.dy - cy,
        x: event.x - cx,
        y: event.y - cy
      });

      // only set snapped if actually snapped
      if (cx || snapPoints.vertical.indexOf(x) !== -1) {
        setSnapped(event, 'x', sx);
      }

      if (cy || snapPoints.horizontal.indexOf(y) !== -1) {
        setSnapped(event, 'y', sy);
      }
    });
  }


  BendpointSnapping.$inject = [ 'eventBus' ];


  // helpers //////////////////////

  function isConnection$d(element) {
    return element && !!element.waypoints;
  }

  var BendpointsModule = {
    __depends__: [
      DraggingModule,
      RulesModule$1
    ],
    __init__: [ 'bendpoints', 'bendpointSnapping', 'bendpointMovePreview' ],
    bendpoints: [ 'type', Bendpoints ],
    bendpointMove: [ 'type', BendpointMove ],
    bendpointMovePreview: [ 'type', BendpointMovePreview ],
    connectionSegmentMove: [ 'type', ConnectionSegmentMove ],
    bendpointSnapping: [ 'type', BendpointSnapping ]
  };

  function Connect(eventBus, dragging, modeling, rules) {

    // rules

    function canConnect(source, target) {
      return rules.allowed('connection.create', {
        source: source,
        target: target
      });
    }

    function canConnectReverse(source, target) {
      return canConnect(target, source);
    }


    // event handlers

    eventBus.on('connect.hover', function(event) {
      var context = event.context,
          start = context.start,
          hover = event.hover,
          canExecute;

      // cache hover state
      context.hover = hover;

      canExecute = context.canExecute = canConnect(start, hover);

      // ignore hover
      if (isNil(canExecute)) {
        return;
      }

      if (canExecute !== false) {
        context.source = start;
        context.target = hover;

        return;
      }

      canExecute = context.canExecute = canConnectReverse(start, hover);

      // ignore hover
      if (isNil(canExecute)) {
        return;
      }

      if (canExecute !== false) {
        context.source = hover;
        context.target = start;
      }
    });

    eventBus.on([ 'connect.out', 'connect.cleanup' ], function(event) {
      var context = event.context;

      context.hover = null;
      context.source = null;
      context.target = null;

      context.canExecute = false;
    });

    eventBus.on('connect.end', function(event) {
      var context = event.context,
          canExecute = context.canExecute,
          connectionStart = context.connectionStart,
          connectionEnd = {
            x: event.x,
            y: event.y
          },
          source = context.source,
          target = context.target;

      if (!canExecute) {
        return false;
      }

      var attrs = null,
          hints = {
            connectionStart: isReverse$1(context) ? connectionEnd : connectionStart,
            connectionEnd: isReverse$1(context) ? connectionStart : connectionEnd
          };

      if (isObject(canExecute)) {
        attrs = canExecute;
      }

      context.connection = modeling.connect(source, target, attrs, hints);
    });


    // API

    /**
     * Start connect operation.
     *
     * @param {DOMEvent} event
     * @param {djs.model.Base} start
     * @param {Point} [connectionStart]
     * @param {boolean} [autoActivate=false]
     */
    this.start = function(event, start, connectionStart, autoActivate) {
      if (!isObject(connectionStart)) {
        autoActivate = connectionStart;
        connectionStart = getMid(start);
      }

      dragging.init(event, 'connect', {
        autoActivate: autoActivate,
        data: {
          shape: start,
          context: {
            start: start,
            connectionStart: connectionStart
          }
        }
      });
    };
  }

  Connect.$inject = [
    'eventBus',
    'dragging',
    'modeling',
    'rules'
  ];


  // helpers //////////

  function isReverse$1(context) {
    var hover = context.hover,
        source = context.source,
        target = context.target;

    return hover && source && hover === source && source !== target;
  }

  var HIGH_PRIORITY$h = 1100,
      LOW_PRIORITY$j = 900;

  var MARKER_OK$3 = 'connect-ok',
      MARKER_NOT_OK$3 = 'connect-not-ok';

  /**
   * Shows connection preview during connect.
   *
   * @param {didi.Injector} injector
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   */
  function ConnectPreview(injector, eventBus, canvas) {
    var connectionPreview = injector.get('connectionPreview', false);

    connectionPreview && eventBus.on('connect.move', function(event) {
      var context = event.context,
          canConnect = context.canExecute,
          hover = context.hover,
          source = context.source,
          start = context.start,
          startPosition = context.startPosition,
          target = context.target,
          connectionStart = context.connectionStart || startPosition,
          connectionEnd = context.connectionEnd || {
            x: event.x,
            y: event.y
          },
          previewStart = connectionStart,
          previewEnd = connectionEnd;

      if (isReverse$1(context)) {
        previewStart = connectionEnd;
        previewEnd = connectionStart;
      }

      connectionPreview.drawPreview(context, canConnect, {
        source: source || start,
        target: target || hover,
        connectionStart: previewStart,
        connectionEnd: previewEnd
      });
    });

    eventBus.on('connect.hover', LOW_PRIORITY$j, function(event) {
      var context = event.context,
          hover = event.hover,
          canExecute = context.canExecute;

      // ignore hover
      if (canExecute === null) {
        return;
      }

      canvas.addMarker(hover, canExecute ? MARKER_OK$3 : MARKER_NOT_OK$3);
    });

    eventBus.on([
      'connect.out',
      'connect.cleanup'
    ], HIGH_PRIORITY$h, function(event) {
      var hover = event.hover;

      if (hover) {
        canvas.removeMarker(hover, MARKER_OK$3);
        canvas.removeMarker(hover, MARKER_NOT_OK$3);
      }
    });

    connectionPreview && eventBus.on('connect.cleanup', function(event) {
      connectionPreview.cleanUp(event.context);
    });
  }

  ConnectPreview.$inject = [
    'injector',
    'eventBus',
    'canvas'
  ];

  var ConnectModule = {
    __depends__: [
      SelectionModule,
      RulesModule$1,
      DraggingModule
    ],
    __init__: [
      'connectPreview'
    ],
    connect: [ 'type', Connect ],
    connectPreview: [ 'type', ConnectPreview ]
  };

  var MARKER_CONNECTION_PREVIEW = 'djs-connection-preview';

  /**
   * Draws connection preview. Optionally, this can use layouter and connection docking to draw
   * better looking previews.
   *
   * @param {didi.Injector} injector
   * @param {Canvas} canvas
   * @param {GraphicsFactory} graphicsFactory
   * @param {ElementFactory} elementFactory
   */
  function ConnectionPreview(
      injector,
      canvas,
      graphicsFactory,
      elementFactory
  ) {
    this._canvas = canvas;
    this._graphicsFactory = graphicsFactory;
    this._elementFactory = elementFactory;

    // optional components
    this._connectionDocking = injector.get('connectionDocking', false);
    this._layouter = injector.get('layouter', false);
  }

  ConnectionPreview.$inject = [
    'injector',
    'canvas',
    'graphicsFactory',
    'elementFactory'
  ];

  /**
   * Draw connection preview.
   *
   * Provide at least one of <source, connectionStart> and <target, connectionEnd> to create a preview.
   * In the clean up stage, call `connectionPreview#cleanUp` with the context to remove preview.
   *
   * @param {Object} context
   * @param {Object|boolean} canConnect
   * @param {Object} hints
   * @param {djs.model.shape} [hints.source] source element
   * @param {djs.model.shape} [hints.target] target element
   * @param {Point} [hints.connectionStart] connection preview start
   * @param {Point} [hints.connectionEnd] connection preview end
   * @param {Array<Point>} [hints.waypoints] provided waypoints for preview
   * @param {boolean} [hints.noLayout] true if preview should not be laid out
   * @param {boolean} [hints.noCropping] true if preview should not be cropped
   * @param {boolean} [hints.noNoop] true if simple connection should not be drawn
   */
  ConnectionPreview.prototype.drawPreview = function(context, canConnect, hints) {

    hints = hints || {};

    var connectionPreviewGfx = context.connectionPreviewGfx,
        getConnection = context.getConnection,
        source = hints.source,
        target = hints.target,
        waypoints = hints.waypoints,
        connectionStart = hints.connectionStart,
        connectionEnd = hints.connectionEnd,
        noLayout = hints.noLayout,
        noCropping = hints.noCropping,
        noNoop = hints.noNoop,
        connection;

    var self = this;

    if (!connectionPreviewGfx) {
      connectionPreviewGfx = context.connectionPreviewGfx = this.createConnectionPreviewGfx();
    }

    clear(connectionPreviewGfx);

    if (!getConnection) {
      getConnection = context.getConnection = cacheReturnValues(function(canConnect, source, target) {
        return self.getConnection(canConnect, source, target);
      });
    }

    if (canConnect) {
      connection = getConnection(canConnect, source, target);
    }

    if (!connection) {
      !noNoop && this.drawNoopPreview(connectionPreviewGfx, hints);
      return;
    }

    connection.waypoints = waypoints || [];

    // optional layout
    if (this._layouter && !noLayout) {
      connection.waypoints = this._layouter.layoutConnection(connection, {
        source: source,
        target: target,
        connectionStart: connectionStart,
        connectionEnd: connectionEnd,
        waypoints: hints.waypoints || connection.waypoints
      });
    }

    // fallback if no waypoints were provided nor created with layouter
    if (!connection.waypoints || !connection.waypoints.length) {
      connection.waypoints = [
        source ? getMid(source) : connectionStart,
        target ? getMid(target) : connectionEnd
      ];
    }

    // optional cropping
    if (this._connectionDocking && (source || target) && !noCropping) {
      connection.waypoints = this._connectionDocking.getCroppedWaypoints(connection, source, target);
    }

    this._graphicsFactory.drawConnection(connectionPreviewGfx, connection);
  };

  /**
   * Draw simple connection between source and target or provided points.
   *
   * @param {SVGElement} connectionPreviewGfx container for the connection
   * @param {Object} hints
   * @param {djs.model.shape} [hints.source] source element
   * @param {djs.model.shape} [hints.target] target element
   * @param {Point} [hints.connectionStart] required if source is not provided
   * @param {Point} [hints.connectionEnd] required if target is not provided
   */
  ConnectionPreview.prototype.drawNoopPreview = function(connectionPreviewGfx, hints) {
    var source = hints.source,
        target = hints.target,
        start = hints.connectionStart || getMid(source),
        end = hints.connectionEnd || getMid(target);

    var waypoints = this.cropWaypoints(start, end, source, target);

    var connection = this.createNoopConnection(waypoints[0], waypoints[1]);

    append(connectionPreviewGfx, connection);
  };

  /**
   * Return cropped waypoints.
   *
   * @param {Point} start
   * @param {Point} end
   * @param {djs.model.shape} source
   * @param {djs.model.shape} target
   *
   * @returns {Array}
   */
  ConnectionPreview.prototype.cropWaypoints = function(start, end, source, target) {
    var graphicsFactory = this._graphicsFactory,
        sourcePath = source && graphicsFactory.getShapePath(source),
        targetPath = target && graphicsFactory.getShapePath(target),
        connectionPath = graphicsFactory.getConnectionPath({ waypoints: [ start, end ] });

    start = (source && getElementLineIntersection(sourcePath, connectionPath, true)) || start;
    end = (target && getElementLineIntersection(targetPath, connectionPath, false)) || end;

    return [ start, end ];
  };

  /**
   * Remove connection preview container if it exists.
   *
   * @param {Object} [context]
   * @param {SVGElement} [context.connectionPreviewGfx] preview container
   */
  ConnectionPreview.prototype.cleanUp = function(context) {
    if (context && context.connectionPreviewGfx) {
      remove$1(context.connectionPreviewGfx);
    }
  };

  /**
   * Get connection that connects source and target.
   *
   * @param {Object|boolean} canConnect
   *
   * @returns {djs.model.connection}
   */
  ConnectionPreview.prototype.getConnection = function(canConnect) {
    var attrs = ensureConnectionAttrs(canConnect);

    return this._elementFactory.createConnection(attrs);
  };


  /**
   * Add and return preview graphics.
   *
   * @returns {SVGElement}
   */
  ConnectionPreview.prototype.createConnectionPreviewGfx = function() {
    var gfx = create$1('g');

    attr(gfx, {
      pointerEvents: 'none'
    });

    classes(gfx).add(MARKER_CONNECTION_PREVIEW);

    append(this._canvas.getActiveLayer(), gfx);

    return gfx;
  };

  /**
   * Create and return simple connection.
   *
   * @param {Point} start
   * @param {Point} end
   *
   * @returns {SVGElement}
   */
  ConnectionPreview.prototype.createNoopConnection = function(start, end) {
    var connection = create$1('polyline');

    attr(connection, {
      'stroke': '#333',
      'strokeDasharray': [ 1 ],
      'strokeWidth': 2,
      'pointer-events': 'none'
    });

    attr(connection, { 'points': [ start.x, start.y, end.x, end.y ] });

    return connection;
  };

  // helpers //////////

  /**
   * Returns function that returns cached return values referenced by stringified first argument.
   *
   * @param {Function} fn
   *
   * @return {Function}
   */
  function cacheReturnValues(fn) {
    var returnValues = {};

    /**
     * Return cached return value referenced by stringified first argument.
     *
     * @returns {*}
     */
    return function(firstArgument) {
      var key = JSON.stringify(firstArgument);

      var returnValue = returnValues[key];

      if (!returnValue) {
        returnValue = returnValues[key] = fn.apply(null, arguments);
      }

      return returnValue;
    };
  }

  /**
   * Ensure connection attributes is object.
   *
   * @param {Object|boolean} canConnect
   *
   * @returns {Object}
   */
  function ensureConnectionAttrs(canConnect) {
    if (isObject(canConnect)) {
      return canConnect;
    } else {
      return {};
    }
  }

  var ConnectionPreviewModule = {
    __init__: [ 'connectionPreview' ],
    connectionPreview: [ 'type', ConnectionPreview ]
  };

  var min$3 = Math.min,
      max$5 = Math.max;

  function preventDefault(e) {
    e.preventDefault();
  }

  function stopPropagation(e) {
    e.stopPropagation();
  }

  function isTextNode(node) {
    return node.nodeType === Node.TEXT_NODE;
  }

  function toArray(nodeList) {
    return [].slice.call(nodeList);
  }

  /**
   * Initializes a container for a content editable div.
   *
   * Structure:
   *
   * container
   *   parent
   *     content
   *     resize-handle
   *
   * @param {object} options
   * @param {DOMElement} options.container The DOM element to append the contentContainer to
   * @param {Function} options.keyHandler Handler for key events
   * @param {Function} options.resizeHandler Handler for resize events
   */
  function TextBox(options) {
    this.container = options.container;

    this.parent = domify(
      '<div class="djs-direct-editing-parent">' +
        '<div class="djs-direct-editing-content" contenteditable="true"></div>' +
      '</div>'
    );

    this.content = query('[contenteditable]', this.parent);

    this.keyHandler = options.keyHandler || function() {};
    this.resizeHandler = options.resizeHandler || function() {};

    this.autoResize = bind(this.autoResize, this);
    this.handlePaste = bind(this.handlePaste, this);
  }


  /**
   * Create a text box with the given position, size, style and text content
   *
   * @param {Object} bounds
   * @param {Number} bounds.x absolute x position
   * @param {Number} bounds.y absolute y position
   * @param {Number} [bounds.width] fixed width value
   * @param {Number} [bounds.height] fixed height value
   * @param {Number} [bounds.maxWidth] maximum width value
   * @param {Number} [bounds.maxHeight] maximum height value
   * @param {Number} [bounds.minWidth] minimum width value
   * @param {Number} [bounds.minHeight] minimum height value
   * @param {Object} [style]
   * @param {String} value text content
   *
   * @return {DOMElement} The created content DOM element
   */
  TextBox.prototype.create = function(bounds, style, value, options) {
    var self = this;

    var parent = this.parent,
        content = this.content,
        container = this.container;

    options = this.options = options || {};

    style = this.style = style || {};

    var parentStyle = pick(style, [
      'width',
      'height',
      'maxWidth',
      'maxHeight',
      'minWidth',
      'minHeight',
      'left',
      'top',
      'backgroundColor',
      'position',
      'overflow',
      'border',
      'wordWrap',
      'textAlign',
      'outline',
      'transform'
    ]);

    assign(parent.style, {
      width: bounds.width + 'px',
      height: bounds.height + 'px',
      maxWidth: bounds.maxWidth + 'px',
      maxHeight: bounds.maxHeight + 'px',
      minWidth: bounds.minWidth + 'px',
      minHeight: bounds.minHeight + 'px',
      left: bounds.x + 'px',
      top: bounds.y + 'px',
      backgroundColor: '#ffffff',
      position: 'absolute',
      overflow: 'visible',
      border: '1px solid #ccc',
      boxSizing: 'border-box',
      wordWrap: 'normal',
      textAlign: 'center',
      outline: 'none'
    }, parentStyle);

    var contentStyle = pick(style, [
      'fontFamily',
      'fontSize',
      'fontWeight',
      'lineHeight',
      'padding',
      'paddingTop',
      'paddingRight',
      'paddingBottom',
      'paddingLeft'
    ]);

    assign(content.style, {
      boxSizing: 'border-box',
      width: '100%',
      outline: 'none',
      wordWrap: 'break-word'
    }, contentStyle);

    if (options.centerVertically) {
      assign(content.style, {
        position: 'absolute',
        top: '50%',
        transform: 'translate(0, -50%)'
      }, contentStyle);
    }

    content.innerText = value;

    componentEvent.bind(content, 'keydown', this.keyHandler);
    componentEvent.bind(content, 'mousedown', stopPropagation);
    componentEvent.bind(content, 'paste', self.handlePaste);

    if (options.autoResize) {
      componentEvent.bind(content, 'input', this.autoResize);
    }

    if (options.resizable) {
      this.resizable(style);
    }

    container.appendChild(parent);

    // set selection to end of text
    this.setSelection(content.lastChild, content.lastChild && content.lastChild.length);

    return parent;
  };

  /**
   * Intercept paste events to remove formatting from pasted text.
   */
  TextBox.prototype.handlePaste = function(e) {
    var options = this.options,
        style = this.style;

    e.preventDefault();

    var text;

    if (e.clipboardData) {

      // Chrome, Firefox, Safari
      text = e.clipboardData.getData('text/plain');
    } else {

      // Internet Explorer
      text = window.clipboardData.getData('Text');
    }

    this.insertText(text);

    if (options.autoResize) {
      var hasResized = this.autoResize(style);

      if (hasResized) {
        this.resizeHandler(hasResized);
      }
    }
  };

  TextBox.prototype.insertText = function(text) {
    text = normalizeEndOfLineSequences(text);

    // insertText command not supported by Internet Explorer
    var success = document.execCommand('insertText', false, text);

    if (success) {
      return;
    }

    this._insertTextIE(text);
  };

  TextBox.prototype._insertTextIE = function(text) {

    // Internet Explorer
    var range = this.getSelection(),
        startContainer = range.startContainer,
        endContainer = range.endContainer,
        startOffset = range.startOffset,
        endOffset = range.endOffset,
        commonAncestorContainer = range.commonAncestorContainer;

    var childNodesArray = toArray(commonAncestorContainer.childNodes);

    var container,
        offset;

    if (isTextNode(commonAncestorContainer)) {
      var containerTextContent = startContainer.textContent;

      startContainer.textContent =
        containerTextContent.substring(0, startOffset)
        + text
        + containerTextContent.substring(endOffset);

      container = startContainer;
      offset = startOffset + text.length;

    } else if (startContainer === this.content && endContainer === this.content) {
      var textNode = document.createTextNode(text);

      this.content.insertBefore(textNode, childNodesArray[startOffset]);

      container = textNode;
      offset = textNode.textContent.length;
    } else {
      var startContainerChildIndex = childNodesArray.indexOf(startContainer),
          endContainerChildIndex = childNodesArray.indexOf(endContainer);

      childNodesArray.forEach(function(childNode, index) {

        if (index === startContainerChildIndex) {
          childNode.textContent =
            startContainer.textContent.substring(0, startOffset) +
            text +
            endContainer.textContent.substring(endOffset);
        } else if (index > startContainerChildIndex && index <= endContainerChildIndex) {
          remove$2(childNode);
        }
      });

      container = startContainer;
      offset = startOffset + text.length;
    }

    if (container && offset !== undefined) {

      // is necessary in Internet Explorer
      setTimeout(function() {
        self.setSelection(container, offset);
      });
    }
  };

  /**
   * Automatically resize element vertically to fit its content.
   */
  TextBox.prototype.autoResize = function() {
    var parent = this.parent,
        content = this.content;

    var fontSize = parseInt(this.style.fontSize) || 12;

    if (content.scrollHeight > parent.offsetHeight ||
        content.scrollHeight < parent.offsetHeight - fontSize) {
      var bounds = parent.getBoundingClientRect();

      var height = content.scrollHeight;
      parent.style.height = height + 'px';

      this.resizeHandler({
        width: bounds.width,
        height: bounds.height,
        dx: 0,
        dy: height - bounds.height
      });
    }
  };

  /**
   * Make an element resizable by adding a resize handle.
   */
  TextBox.prototype.resizable = function() {
    var self = this;

    var parent = this.parent,
        resizeHandle = this.resizeHandle;

    var minWidth = parseInt(this.style.minWidth) || 0,
        minHeight = parseInt(this.style.minHeight) || 0,
        maxWidth = parseInt(this.style.maxWidth) || Infinity,
        maxHeight = parseInt(this.style.maxHeight) || Infinity;

    if (!resizeHandle) {
      resizeHandle = this.resizeHandle = domify(
        '<div class="djs-direct-editing-resize-handle"></div>'
      );

      var startX, startY, startWidth, startHeight;

      var onMouseDown = function(e) {
        preventDefault(e);
        stopPropagation(e);

        startX = e.clientX;
        startY = e.clientY;

        var bounds = parent.getBoundingClientRect();

        startWidth = bounds.width;
        startHeight = bounds.height;

        componentEvent.bind(document, 'mousemove', onMouseMove);
        componentEvent.bind(document, 'mouseup', onMouseUp);
      };

      var onMouseMove = function(e) {
        preventDefault(e);
        stopPropagation(e);

        var newWidth = min$3(max$5(startWidth + e.clientX - startX, minWidth), maxWidth);
        var newHeight = min$3(max$5(startHeight + e.clientY - startY, minHeight), maxHeight);

        parent.style.width = newWidth + 'px';
        parent.style.height = newHeight + 'px';

        self.resizeHandler({
          width: startWidth,
          height: startHeight,
          dx: e.clientX - startX,
          dy: e.clientY - startY
        });
      };

      var onMouseUp = function(e) {
        preventDefault(e);
        stopPropagation(e);

        componentEvent.unbind(document,'mousemove', onMouseMove, false);
        componentEvent.unbind(document, 'mouseup', onMouseUp, false);
      };

      componentEvent.bind(resizeHandle, 'mousedown', onMouseDown);
    }

    assign(resizeHandle.style, {
      position: 'absolute',
      bottom: '0px',
      right: '0px',
      cursor: 'nwse-resize',
      width: '0',
      height: '0',
      borderTop: (parseInt(this.style.fontSize) / 4 || 3) + 'px solid transparent',
      borderRight: (parseInt(this.style.fontSize) / 4 || 3) + 'px solid #ccc',
      borderBottom: (parseInt(this.style.fontSize) / 4 || 3) + 'px solid #ccc',
      borderLeft: (parseInt(this.style.fontSize) / 4 || 3) + 'px solid transparent'
    });

    parent.appendChild(resizeHandle);
  };


  /**
   * Clear content and style of the textbox, unbind listeners and
   * reset CSS style.
   */
  TextBox.prototype.destroy = function() {
    var parent = this.parent,
        content = this.content,
        resizeHandle = this.resizeHandle;

    // clear content
    content.innerText = '';

    // clear styles
    parent.removeAttribute('style');
    content.removeAttribute('style');

    componentEvent.unbind(content, 'keydown', this.keyHandler);
    componentEvent.unbind(content, 'mousedown', stopPropagation);
    componentEvent.unbind(content, 'input', this.autoResize);
    componentEvent.unbind(content, 'paste', this.handlePaste);

    if (resizeHandle) {
      resizeHandle.removeAttribute('style');

      remove$2(resizeHandle);
    }

    remove$2(parent);
  };


  TextBox.prototype.getValue = function() {
    return this.content.innerText.trim();
  };


  TextBox.prototype.getSelection = function() {
    var selection = window.getSelection(),
        range = selection.getRangeAt(0);

    return range;
  };


  TextBox.prototype.setSelection = function(container, offset) {
    var range = document.createRange();

    if (container === null) {
      range.selectNodeContents(this.content);
    } else {
      range.setStart(container, offset);
      range.setEnd(container, offset);
    }

    var selection = window.getSelection();

    selection.removeAllRanges();
    selection.addRange(range);
  };

  // helpers //////////

  function normalizeEndOfLineSequences(string) {
    return string.replace(/\r\n|\r|\n/g, '\n');
  }

  /**
   * A direct editing component that allows users
   * to edit an elements text directly in the diagram
   *
   * @param {EventBus} eventBus the event bus
   */
  function DirectEditing(eventBus, canvas) {

    this._eventBus = eventBus;

    this._providers = [];
    this._textbox = new TextBox({
      container: canvas.getContainer(),
      keyHandler: bind(this._handleKey, this),
      resizeHandler: bind(this._handleResize, this)
    });
  }

  DirectEditing.$inject = [ 'eventBus', 'canvas' ];


  /**
   * Register a direct editing provider

   * @param {Object} provider the provider, must expose an #activate(element) method that returns
   *                          an activation context ({ bounds: {x, y, width, height }, text }) if
   *                          direct editing is available for the given element.
   *                          Additionally the provider must expose a #update(element, value) method
   *                          to receive direct editing updates.
   */
  DirectEditing.prototype.registerProvider = function(provider) {
    this._providers.push(provider);
  };


  /**
   * Returns true if direct editing is currently active
   *
   * @param {djs.model.Base} [element]
   *
   * @return {boolean}
   */
  DirectEditing.prototype.isActive = function(element) {
    return !!(this._active && (!element || this._active.element === element));
  };


  /**
   * Cancel direct editing, if it is currently active
   */
  DirectEditing.prototype.cancel = function() {
    if (!this._active) {
      return;
    }

    this._fire('cancel');
    this.close();
  };


  DirectEditing.prototype._fire = function(event, context) {
    this._eventBus.fire('directEditing.' + event, context || { active: this._active });
  };

  DirectEditing.prototype.close = function() {
    this._textbox.destroy();

    this._fire('deactivate');

    this._active = null;

    this.resizable = undefined;
  };


  DirectEditing.prototype.complete = function() {

    var active = this._active;

    if (!active) {
      return;
    }

    var containerBounds,
        previousBounds = active.context.bounds,
        newBounds = this.$textbox.getBoundingClientRect(),
        newText = this.getValue(),
        previousText = active.context.text;

    if (
      newText !== previousText ||
      newBounds.height !== previousBounds.height ||
      newBounds.width !== previousBounds.width
    ) {
      containerBounds = this._textbox.container.getBoundingClientRect();

      active.provider.update(active.element, newText, active.context.text, {
        x: newBounds.left - containerBounds.left,
        y: newBounds.top - containerBounds.top,
        width: newBounds.width,
        height: newBounds.height
      });
    }

    this._fire('complete');

    this.close();
  };


  DirectEditing.prototype.getValue = function() {
    return this._textbox.getValue();
  };


  DirectEditing.prototype._handleKey = function(e) {

    // stop bubble
    e.stopPropagation();

    var key = e.keyCode || e.charCode;

    // ESC
    if (key === 27) {
      e.preventDefault();
      return this.cancel();
    }

    // Enter
    if (key === 13 && !e.shiftKey) {
      e.preventDefault();
      return this.complete();
    }
  };


  DirectEditing.prototype._handleResize = function(event) {
    this._fire('resize', event);
  };


  /**
   * Activate direct editing on the given element
   *
   * @param {Object} ElementDescriptor the descriptor for a shape or connection
   * @return {Boolean} true if the activation was possible
   */
  DirectEditing.prototype.activate = function(element) {
    if (this.isActive()) {
      this.cancel();
    }

    // the direct editing context
    var context;

    var provider = find(this._providers, function(p) {
      return (context = p.activate(element)) ? p : null;
    });

    // check if activation took place
    if (context) {
      this.$textbox = this._textbox.create(
        context.bounds,
        context.style,
        context.text,
        context.options
      );

      this._active = {
        element: element,
        context: context,
        provider: provider
      };

      if (context.options && context.options.resizable) {
        this.resizable = true;
      }

      this._fire('activate');
    }

    return !!context;
  };

  var DirectEditingModule = {
    __depends__: [
      InteractionEventsModule$1
    ],
    __init__: [ 'directEditing' ],
    directEditing: [ 'type', DirectEditing ]
  };

  var MARKER_TYPES = [
    'marker-start',
    'marker-mid',
    'marker-end'
  ];

  var NODES_CAN_HAVE_MARKER = [
    'circle',
    'ellipse',
    'line',
    'path',
    'polygon',
    'polyline',
    'rect'
  ];


  /**
   * Adds support for previews of moving/resizing elements.
   */
  function PreviewSupport(elementRegistry, eventBus, canvas, styles) {
    this._elementRegistry = elementRegistry;
    this._canvas = canvas;
    this._styles = styles;

    this._clonedMarkers = {};

    var self = this;

    eventBus.on('drag.cleanup', function() {
      forEach$1(self._clonedMarkers, function(clonedMarker) {
        remove$1(clonedMarker);
      });

      self._clonedMarkers = {};
    });
  }

  PreviewSupport.$inject = [
    'elementRegistry',
    'eventBus',
    'canvas',
    'styles'
  ];


  /**
   * Returns graphics of an element.
   *
   * @param {djs.model.Base} element
   *
   * @return {SVGElement}
   */
  PreviewSupport.prototype.getGfx = function(element) {
    return this._elementRegistry.getGraphics(element);
  };

  /**
   * Adds a move preview of a given shape to a given svg group.
   *
   * @param {djs.model.Base} element
   * @param {SVGElement} group
   * @param {SVGElement} [gfx]
   *
   * @return {SVGElement} dragger
   */
  PreviewSupport.prototype.addDragger = function(element, group, gfx) {
    gfx = gfx || this.getGfx(element);

    var dragger = clone$1(gfx);
    var bbox = gfx.getBoundingClientRect();

    this._cloneMarkers(getVisual(dragger));

    attr(dragger, this._styles.cls('djs-dragger', [], {
      x: bbox.top,
      y: bbox.left
    }));

    append(group, dragger);

    return dragger;
  };

  /**
   * Adds a resize preview of a given shape to a given svg group.
   *
   * @param {djs.model.Base} element
   * @param {SVGElement} group
   *
   * @return {SVGElement} frame
   */
  PreviewSupport.prototype.addFrame = function(shape, group) {

    var frame = create$1('rect', {
      class: 'djs-resize-overlay',
      width:  shape.width,
      height: shape.height,
      x: shape.x,
      y: shape.y
    });

    append(group, frame);

    return frame;
  };

  /**
   * Clone all markers referenced by a node and its child nodes.
   *
   * @param {SVGElement} gfx
   */
  PreviewSupport.prototype._cloneMarkers = function(gfx) {
    var self = this;

    if (gfx.childNodes) {

      // TODO: use forEach once we drop PhantomJS
      for (var i = 0; i < gfx.childNodes.length; i++) {

        // recursively clone markers of child nodes
        self._cloneMarkers(gfx.childNodes[ i ]);
      }
    }

    if (!canHaveMarker(gfx)) {
      return;
    }

    MARKER_TYPES.forEach(function(markerType) {
      if (attr(gfx, markerType)) {
        var marker = getMarker(gfx, markerType, self._canvas.getContainer());

        self._cloneMarker(gfx, marker, markerType);
      }
    });
  };

  /**
   * Clone marker referenced by an element.
   *
   * @param {SVGElement} gfx
   * @param {SVGElement} marker
   * @param {string} markerType
   */
  PreviewSupport.prototype._cloneMarker = function(gfx, marker, markerType) {
    var markerId = marker.id;

    var clonedMarker = this._clonedMarkers[ markerId ];

    if (!clonedMarker) {
      clonedMarker = clone$1(marker);

      var clonedMarkerId = markerId + '-clone';

      clonedMarker.id = clonedMarkerId;

      classes(clonedMarker)
        .add('djs-dragger')
        .add('djs-dragger-marker');

      this._clonedMarkers[ markerId ] = clonedMarker;

      var defs = query('defs', this._canvas._svg);

      if (!defs) {
        defs = create$1('defs');

        append(this._canvas._svg, defs);
      }

      append(defs, clonedMarker);
    }

    var reference = idToReference(this._clonedMarkers[ markerId ].id);

    attr(gfx, markerType, reference);
  };

  // helpers //////////

  /**
   * Get marker of given type referenced by node.
   *
   * @param {Node} node
   * @param {string} markerType
   * @param {Node} [parentNode]
   *
   * @param {Node}
   */
  function getMarker(node, markerType, parentNode) {
    var id = referenceToId(attr(node, markerType));

    return query('marker#' + id, parentNode || document);
  }

  /**
   * Get ID of fragment within current document from its functional IRI reference.
   * References may use single or double quotes.
   *
   * @param {string} reference
   *
   * @returns {string}
   */
  function referenceToId(reference) {
    return reference.match(/url\(['"]?#([^'"]*)['"]?\)/)[1];
  }

  /**
   * Get functional IRI reference for given ID of fragment within current document.
   *
   * @param {string} id
   *
   * @returns {string}
   */
  function idToReference(id) {
    return 'url(#' + id + ')';
  }

  /**
   * Check wether node type can have marker attributes.
   *
   * @param {Node} node
   *
   * @returns {boolean}
   */
  function canHaveMarker(node) {
    return NODES_CAN_HAVE_MARKER.indexOf(node.nodeName) !== -1;
  }

  var PreviewSupportModule = {
    __init__: [ 'previewSupport' ],
    previewSupport: [ 'type', PreviewSupport ]
  };

  var MARKER_OK$2 = 'drop-ok',
      MARKER_NOT_OK$2 = 'drop-not-ok',
      MARKER_ATTACH$2 = 'attach-ok',
      MARKER_NEW_PARENT$1 = 'new-parent';

  var PREFIX = 'create';

  var HIGH_PRIORITY$g = 2000;


  /**
   * Create new elements through drag and drop.
   *
   * @param {Canvas} canvas
   * @param {Dragging} dragging
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   * @param {Rules} rules
   */
  function Create(
      canvas,
      dragging,
      eventBus,
      modeling,
      rules
  ) {

    // rules //////////

    /**
     * Check wether elements can be created.
     *
     * @param {Array<djs.model.Base>} elements
     * @param {djs.model.Base} target
     * @param {Point} position
     * @param {djs.model.Base} [source]
     *
     * @returns {boolean|null|Object}
     */
    function canCreate(elements, target, position, source, hints) {
      if (!target) {
        return false;
      }

      // ignore child elements and external labels
      elements = filter(elements, function(element) {
        var labelTarget = element.labelTarget;

        return !element.parent && !(isLabel$5(element) && elements.indexOf(labelTarget) !== -1);
      });

      var shape = find(elements, function(element) {
        return !isConnection$c(element);
      });

      var attach = false,
          connect = false,
          create = false;

      // (1) attaching single shapes
      if (isSingleShape(elements)) {
        attach = rules.allowed('shape.attach', {
          position: position,
          shape: shape,
          target: target
        });
      }

      if (!attach) {

        // (2) creating elements
        if (isSingleShape(elements)) {
          create = rules.allowed('shape.create', {
            position: position,
            shape: shape,
            source: source,
            target: target
          });
        } else {
          create = rules.allowed('elements.create', {
            elements: elements,
            position: position,
            target: target
          });
        }

      }

      var connectionTarget = hints.connectionTarget;

      // (3) appending single shapes
      if (create || attach) {
        if (shape && source) {
          connect = rules.allowed('connection.create', {
            source: connectionTarget === source ? shape : source,
            target: connectionTarget === source ? source : shape,
            hints: {
              targetParent: target,
              targetAttach: attach
            }
          });
        }

        return {
          attach: attach,
          connect: connect
        };
      }

      // ignore wether or not elements can be created
      if (create === null || attach === null) {
        return null;
      }

      return false;
    }

    function setMarker(element, marker) {
      [ MARKER_ATTACH$2, MARKER_OK$2, MARKER_NOT_OK$2, MARKER_NEW_PARENT$1 ].forEach(function(m) {

        if (m === marker) {
          canvas.addMarker(element, m);
        } else {
          canvas.removeMarker(element, m);
        }
      });
    }

    // event handling //////////

    eventBus.on([ 'create.move', 'create.hover' ], function(event) {
      var context = event.context,
          elements = context.elements,
          hover = event.hover,
          source = context.source,
          hints = context.hints || {};

      if (!hover) {
        context.canExecute = false;
        context.target = null;

        return;
      }

      ensureConstraints$2(event);

      var position = {
        x: event.x,
        y: event.y
      };

      var canExecute = context.canExecute = hover && canCreate(elements, hover, position, source, hints);

      if (hover && canExecute !== null) {
        context.target = hover;

        if (canExecute && canExecute.attach) {
          setMarker(hover, MARKER_ATTACH$2);
        } else {
          setMarker(hover, canExecute ? MARKER_NEW_PARENT$1 : MARKER_NOT_OK$2);
        }
      }
    });

    eventBus.on([ 'create.end', 'create.out', 'create.cleanup' ], function(event) {
      var hover = event.hover;

      if (hover) {
        setMarker(hover, null);
      }
    });

    eventBus.on('create.end', function(event) {
      var context = event.context,
          source = context.source,
          shape = context.shape,
          elements = context.elements,
          target = context.target,
          canExecute = context.canExecute,
          attach = canExecute && canExecute.attach,
          connect = canExecute && canExecute.connect,
          hints = context.hints || {};

      if (canExecute === false || !target) {
        return false;
      }

      ensureConstraints$2(event);

      var position = {
        x: event.x,
        y: event.y
      };

      if (connect) {
        shape = modeling.appendShape(source, shape, position, target, {
          attach: attach,
          connection: connect === true ? {} : connect,
          connectionTarget: hints.connectionTarget
        });
      } else {
        elements = modeling.createElements(elements, position, target, assign({}, hints, {
          attach: attach
        }));

        // update shape
        shape = find(elements, function(element) {
          return !isConnection$c(element);
        });
      }

      // update elements and shape
      assign(context, {
        elements: elements,
        shape: shape
      });

      assign(event, {
        elements: elements,
        shape: shape
      });
    });

    function cancel() {
      var context = dragging.context();

      if (context && context.prefix === PREFIX) {
        dragging.cancel();
      }
    }

    // cancel on <elements.changed> that is not result of <drag.end>
    eventBus.on('create.init', function() {
      eventBus.on('elements.changed', cancel);

      eventBus.once([ 'create.cancel', 'create.end' ], HIGH_PRIORITY$g, function() {
        eventBus.off('elements.changed', cancel);
      });
    });

    // API //////////

    this.start = function(event, elements, context) {
      if (!isArray$3(elements)) {
        elements = [ elements ];
      }

      var shape = find(elements, function(element) {
        return !isConnection$c(element);
      });

      if (!shape) {

        // at least one shape is required
        return;
      }

      context = assign({
        elements: elements,
        hints: {},
        shape: shape
      }, context || {});

      // make sure each element has x and y
      forEach$1(elements, function(element) {
        if (!isNumber(element.x)) {
          element.x = 0;
        }

        if (!isNumber(element.y)) {
          element.y = 0;
        }
      });

      var visibleElements = filter(elements, function(element) {
        return !element.hidden;
      });

      var bbox = getBBox(visibleElements);

      // center elements around cursor
      forEach$1(elements, function(element) {
        if (isConnection$c(element)) {
          element.waypoints = map(element.waypoints, function(waypoint) {
            return {
              x: waypoint.x - bbox.x - bbox.width / 2,
              y: waypoint.y - bbox.y - bbox.height / 2
            };
          });
        }

        assign(element, {
          x: element.x - bbox.x - bbox.width / 2,
          y: element.y - bbox.y - bbox.height / 2
        });
      });

      dragging.init(event, PREFIX, {
        cursor: 'grabbing',
        autoActivate: true,
        data: {
          shape: shape,
          elements: elements,
          context: context
        }
      });
    };
  }

  Create.$inject = [
    'canvas',
    'dragging',
    'eventBus',
    'modeling',
    'rules'
  ];

  // helpers //////////

  function ensureConstraints$2(event) {
    var context = event.context,
        createConstraints = context.createConstraints;

    if (!createConstraints) {
      return;
    }

    if (createConstraints.left) {
      event.x = Math.max(event.x, createConstraints.left);
    }

    if (createConstraints.right) {
      event.x = Math.min(event.x, createConstraints.right);
    }

    if (createConstraints.top) {
      event.y = Math.max(event.y, createConstraints.top);
    }

    if (createConstraints.bottom) {
      event.y = Math.min(event.y, createConstraints.bottom);
    }
  }

  function isConnection$c(element) {
    return !!element.waypoints;
  }

  function isSingleShape(elements) {
    return elements && elements.length === 1 && !isConnection$c(elements[0]);
  }

  function isLabel$5(element) {
    return !!element.labelTarget;
  }

  var LOW_PRIORITY$i = 750;


  function CreatePreview(
      canvas,
      eventBus,
      graphicsFactory,
      previewSupport,
      styles
  ) {
    function createDragGroup(elements) {
      var dragGroup = create$1('g');

      attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));

      var childrenGfx = create$1('g');

      elements.forEach(function(element) {

        // create graphics
        var gfx;

        if (element.hidden) {
          return;
        }

        if (element.waypoints) {
          gfx = graphicsFactory._createContainer('connection', childrenGfx);

          graphicsFactory.drawConnection(getVisual(gfx), element);
        } else {
          gfx = graphicsFactory._createContainer('shape', childrenGfx);

          graphicsFactory.drawShape(getVisual(gfx), element);

          translate$2(gfx, element.x, element.y);
        }

        // add preview
        previewSupport.addDragger(element, dragGroup, gfx);
      });

      return dragGroup;
    }

    eventBus.on('create.move', LOW_PRIORITY$i, function(event) {

      var hover = event.hover,
          context = event.context,
          elements = context.elements,
          dragGroup = context.dragGroup;

      // lazily create previews
      if (!dragGroup) {
        dragGroup = context.dragGroup = createDragGroup(elements);
      }

      var activeLayer;

      if (hover) {
        if (!dragGroup.parentNode) {
          activeLayer = canvas.getActiveLayer();

          append(activeLayer, dragGroup);
        }

        translate$2(dragGroup, event.x, event.y);
      } else {
        remove$1(dragGroup);
      }
    });

    eventBus.on('create.cleanup', function(event) {
      var context = event.context,
          dragGroup = context.dragGroup;

      if (dragGroup) {
        remove$1(dragGroup);
      }
    });
  }

  CreatePreview.$inject = [
    'canvas',
    'eventBus',
    'graphicsFactory',
    'previewSupport',
    'styles'
  ];

  var CreateModule = {
    __depends__: [
      DraggingModule,
      PreviewSupportModule,
      RulesModule$1,
      SelectionModule
    ],
    __init__: [
      'create',
      'createPreview'
    ],
    create: [ 'type', Create ],
    createPreview: [ 'type', CreatePreview ]
  };

  /**
   * A clip board stub
   */
  function Clipboard() {}


  Clipboard.prototype.get = function() {
    return this._data;
  };

  Clipboard.prototype.set = function(data) {
    this._data = data;
  };

  Clipboard.prototype.clear = function() {
    var data = this._data;

    delete this._data;

    return data;
  };

  Clipboard.prototype.isEmpty = function() {
    return !this._data;
  };

  var ClipboardModule = {
    clipboard: [ 'type', Clipboard ]
  };

  function Mouse(eventBus) {
    var self = this;

    this._lastMoveEvent = null;

    function setLastMoveEvent(mousemoveEvent) {
      self._lastMoveEvent = mousemoveEvent;
    }

    eventBus.on('canvas.init', function(context) {
      var svg = self._svg = context.svg;

      svg.addEventListener('mousemove', setLastMoveEvent);
    });

    eventBus.on('canvas.destroy', function() {
      self._lastMouseEvent = null;

      self._svg.removeEventListener('mousemove', setLastMoveEvent);
    });
  }

  Mouse.$inject = [ 'eventBus' ];

  Mouse.prototype.getLastMoveEvent = function() {
    return this._lastMoveEvent || createMoveEvent(0, 0);
  };

  // helpers //////////

  function createMoveEvent(x, y) {
    var event = document.createEvent('MouseEvent');

    var screenX = x,
        screenY = y,
        clientX = x,
        clientY = y;

    if (event.initMouseEvent) {
      event.initMouseEvent(
        'mousemove',
        true,
        true,
        window,
        0,
        screenX,
        screenY,
        clientX,
        clientY,
        false,
        false,
        false,
        false,
        0,
        null
      );
    }

    return event;
  }

  var MouseModule = {
    __init__: [ 'mouse' ],
    mouse: [ 'type', Mouse ]
  };

  /**
   * @typedef {Function} <copyPaste.canCopyElements> listener
   *
   * @param {Object} context
   * @param {Array<djs.model.Base>} context.elements
   *
   * @returns {Array<djs.model.Base>|boolean} - Return elements to be copied or false to disallow
   * copying.
   */

  /**
   * @typedef {Function} <copyPaste.copyElement> listener
   *
   * @param {Object} context
   * @param {Object} context.descriptor
   * @param {djs.model.Base} context.element
   * @param {Array<djs.model.Base>} context.elements
   */

  /**
   * @typedef {Function} <copyPaste.createTree> listener
   *
   * @param {Object} context
   * @param {djs.model.Base} context.element
   * @param {Array<djs.model.Base>} context.children - Add children to be added to tree.
   */

  /**
   * @typedef {Function} <copyPaste.elementsCopied> listener
   *
   * @param {Object} context
   * @param {Object} context.elements
   * @param {Object} context.tree
   */

  /**
   * @typedef {Function} <copyPaste.pasteElement> listener
   *
   * @param {Object} context
   * @param {Object} context.cache - Already created elements.
   * @param {Object} context.descriptor
   */

  /**
   * @typedef {Function} <copyPaste.pasteElements> listener
   *
   * @param {Object} context
   * @param {Object} context.hints - Add hints before pasting.
   */

  /**
   * Copy and paste elements.
   *
   * @param {Canvas} canvas
   * @param {Create} create
   * @param {Clipboard} clipboard
   * @param {ElementFactory} elementFactory
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   * @param {Mouse} mouse
   * @param {Rules} rules
   */
  function CopyPaste(
      canvas,
      create,
      clipboard,
      elementFactory,
      eventBus,
      modeling,
      mouse,
      rules
  ) {

    this._canvas = canvas;
    this._create = create;
    this._clipboard = clipboard;
    this._elementFactory = elementFactory;
    this._eventBus = eventBus;
    this._modeling = modeling;
    this._mouse = mouse;
    this._rules = rules;

    eventBus.on('copyPaste.copyElement', function(context) {
      var descriptor = context.descriptor,
          element = context.element,
          elements = context.elements;

      // default priority (priority = 1)
      descriptor.priority = 1;

      descriptor.id = element.id;

      var parentCopied = find(elements, function(e) {
        return e === element.parent;
      });

      // do NOT reference parent if parent wasn't copied
      if (parentCopied) {
        descriptor.parent = element.parent.id;
      }

      // attachers (priority = 2)
      if (isAttacher$1(element)) {
        descriptor.priority = 2;

        descriptor.host = element.host.id;
      }

      // connections (priority = 3)
      if (isConnection$b(element)) {
        descriptor.priority = 3;

        descriptor.source = element.source.id;
        descriptor.target = element.target.id;

        descriptor.waypoints = copyWaypoints$1(element);
      }

      // labels (priority = 4)
      if (isLabel$4(element)) {
        descriptor.priority = 4;

        descriptor.labelTarget = element.labelTarget.id;
      }

      forEach$1([ 'x', 'y', 'width', 'height' ], function(property) {
        if (isNumber(element[ property ])) {
          descriptor[ property ] = element[ property ];
        }
      });

      descriptor.hidden = element.hidden;
      descriptor.collapsed = element.collapsed;

    });

    eventBus.on('copyPaste.pasteElements', function(context) {
      var hints = context.hints;

      assign(hints, {
        createElementsBehavior: false
      });
    });
  }

  CopyPaste.$inject = [
    'canvas',
    'create',
    'clipboard',
    'elementFactory',
    'eventBus',
    'modeling',
    'mouse',
    'rules'
  ];


  /**
   * Copy elements.
   *
   * @param {Array<djs.model.Base>} elements
   *
   * @returns {Object}
   */
  CopyPaste.prototype.copy = function(elements) {
    var allowed,
        tree;

    if (!isArray$3(elements)) {
      elements = elements ? [ elements ] : [];
    }

    allowed = this._eventBus.fire('copyPaste.canCopyElements', {
      elements: elements
    });

    if (allowed === false) {
      tree = {};
    } else {
      tree = this.createTree(isArray$3(allowed) ? allowed : elements);
    }

    // we set an empty tree, selection of elements
    // to copy was empty.
    this._clipboard.set(tree);

    this._eventBus.fire('copyPaste.elementsCopied', {
      elements: elements,
      tree: tree
    });

    return tree;
  };

  /**
   * Paste elements.
   *
   * @param {Object} [context]
   * @param {djs.model.base} [context.element] - Parent.
   * @param {Point} [context.point] - Position.
   * @param {Object} [context.hints] - Hints.
   */
  CopyPaste.prototype.paste = function(context) {
    var tree = this._clipboard.get();

    if (this._clipboard.isEmpty()) {
      return;
    }

    var hints = context && context.hints || {};

    this._eventBus.fire('copyPaste.pasteElements', {
      hints: hints
    });

    var elements = this._createElements(tree);

    // paste directly
    if (context && context.element && context.point) {
      return this._paste(elements, context.element, context.point, hints);
    }

    this._create.start(this._mouse.getLastMoveEvent(), elements, {
      hints: hints || {}
    });
  };

  /**
   * Paste elements directly.
   *
   * @param {Array<djs.model.Base>} elements
   * @param {djs.model.base} target
   * @param {Point} position
   * @param {Object} [hints]
   */
  CopyPaste.prototype._paste = function(elements, target, position, hints) {

    // make sure each element has x and y
    forEach$1(elements, function(element) {
      if (!isNumber(element.x)) {
        element.x = 0;
      }

      if (!isNumber(element.y)) {
        element.y = 0;
      }
    });

    var bbox = getBBox(elements);

    // center elements around cursor
    forEach$1(elements, function(element) {
      if (isConnection$b(element)) {
        element.waypoints = map(element.waypoints, function(waypoint) {
          return {
            x: waypoint.x - bbox.x - bbox.width / 2,
            y: waypoint.y - bbox.y - bbox.height / 2
          };
        });
      }

      assign(element, {
        x: element.x - bbox.x - bbox.width / 2,
        y: element.y - bbox.y - bbox.height / 2
      });
    });

    return this._modeling.createElements(elements, position, target, assign({}, hints));
  };

  /**
   * Create elements from tree.
   */
  CopyPaste.prototype._createElements = function(tree) {
    var self = this;

    var eventBus = this._eventBus;

    var cache = {};

    var elements = [];

    forEach$1(tree, function(branch, depth) {

      // sort by priority
      branch = sortBy(branch, 'priority');

      forEach$1(branch, function(descriptor) {

        // remove priority
        var attrs = assign({}, omit(descriptor, [ 'priority' ]));

        if (cache[ descriptor.parent ]) {
          attrs.parent = cache[ descriptor.parent ];
        } else {
          delete attrs.parent;
        }

        eventBus.fire('copyPaste.pasteElement', {
          cache: cache,
          descriptor: attrs
        });

        var element;

        if (isConnection$b(attrs)) {
          attrs.source = cache[ descriptor.source ];
          attrs.target = cache[ descriptor.target ];

          element = cache[ descriptor.id ] = self.createConnection(attrs);

          elements.push(element);

          return;
        }

        if (isLabel$4(attrs)) {
          attrs.labelTarget = cache[ attrs.labelTarget ];

          element = cache[ descriptor.id ] = self.createLabel(attrs);

          elements.push(element);

          return;
        }

        if (attrs.host) {
          attrs.host = cache[ attrs.host ];
        }

        element = cache[ descriptor.id ] = self.createShape(attrs);

        elements.push(element);
      });

    });

    return elements;
  };

  CopyPaste.prototype.createConnection = function(attrs) {
    var connection = this._elementFactory.createConnection(omit(attrs, [ 'id' ]));

    return connection;
  };

  CopyPaste.prototype.createLabel = function(attrs) {
    var label = this._elementFactory.createLabel(omit(attrs, [ 'id' ]));

    return label;
  };

  CopyPaste.prototype.createShape = function(attrs) {
    var shape = this._elementFactory.createShape(omit(attrs, [ 'id' ]));

    return shape;
  };

  /**
   * Check wether element has relations to other elements e.g. attachers, labels and connections.
   *
   * @param  {Object} element
   * @param  {Array<djs.model.Base>} elements
   *
   * @returns {boolean}
   */
  CopyPaste.prototype.hasRelations = function(element, elements) {
    var labelTarget,
        source,
        target;

    if (isConnection$b(element)) {
      source = find(elements, matchPattern({ id: element.source.id }));
      target = find(elements, matchPattern({ id: element.target.id }));

      if (!source || !target) {
        return false;
      }
    }

    if (isLabel$4(element)) {
      labelTarget = find(elements, matchPattern({ id: element.labelTarget.id }));

      if (!labelTarget) {
        return false;
      }
    }

    return true;
  };

  /**
   * Create a tree-like structure from elements.
   *
   * @example
   * tree: {
    *  0: [
    *    { id: 'Shape_1', priority: 1, ... },
    *    { id: 'Shape_2', priority: 1, ... },
    *    { id: 'Connection_1', source: 'Shape_1', target: 'Shape_2', priority: 3, ... },
    *    ...
    *  ],
    *  1: [
    *    { id: 'Shape_3', parent: 'Shape1', priority: 1, ... },
    *    ...
    *  ]
    * };
    *
    * @param  {Array<djs.model.base>} elements
    *
    * @return {Object}
    */
  CopyPaste.prototype.createTree = function(elements) {
    var rules = this._rules,
        self = this;

    var tree = {},
        elementsData = [];

    var parents = getParents$1(elements);

    function canCopy(element, elements) {
      return rules.allowed('element.copy', {
        element: element,
        elements: elements
      });
    }

    function addElementData(element, depth) {

      // (1) check wether element has already been added
      var foundElementData = find(elementsData, function(elementsData) {
        return element === elementsData.element;
      });

      // (2) add element if not already added
      if (!foundElementData) {
        elementsData.push({
          element: element,
          depth: depth
        });

        return;
      }

      // (3) update depth
      if (foundElementData.depth < depth) {
        elementsData = removeElementData(foundElementData, elementsData);

        elementsData.push({
          element: foundElementData.element,
          depth: depth
        });
      }
    }

    function removeElementData(elementData, elementsData) {
      var index = elementsData.indexOf(elementData);

      if (index !== -1) {
        elementsData.splice(index, 1);
      }

      return elementsData;
    }

    // (1) add elements
    eachElement(parents, function(element, _index, depth) {

      // do NOT add external labels directly
      if (isLabel$4(element)) {
        return;
      }

      // always copy external labels
      forEach$1(element.labels, function(label) {
        addElementData(label, depth);
      });

      function addRelatedElements(elements) {
        elements && elements.length && forEach$1(elements, function(element) {

          // add external labels
          forEach$1(element.labels, function(label) {
            addElementData(label, depth);
          });

          addElementData(element, depth);
        });
      }

      forEach$1([ element.attachers, element.incoming, element.outgoing ], addRelatedElements);

      addElementData(element, depth);

      var children = [];

      if (element.children) {
        children = element.children.slice();
      }

      // allow others to add children to tree
      self._eventBus.fire('copyPaste.createTree', {
        element: element,
        children: children
      });

      return children;
    });

    elements = map(elementsData, function(elementData) {
      return elementData.element;
    });

    // (2) copy elements
    elementsData = map(elementsData, function(elementData) {
      elementData.descriptor = {};

      self._eventBus.fire('copyPaste.copyElement', {
        descriptor: elementData.descriptor,
        element: elementData.element,
        elements: elements
      });

      return elementData;
    });

    // (3) sort elements by priority
    elementsData = sortBy(elementsData, function(elementData) {
      return elementData.descriptor.priority;
    });

    elements = map(elementsData, function(elementData) {
      return elementData.element;
    });

    // (4) create tree
    forEach$1(elementsData, function(elementData) {
      var depth = elementData.depth;

      if (!self.hasRelations(elementData.element, elements)) {
        removeElement(elementData.element, elements);

        return;
      }

      if (!canCopy(elementData.element, elements)) {
        removeElement(elementData.element, elements);

        return;
      }

      if (!tree[depth]) {
        tree[depth] = [];
      }

      tree[depth].push(elementData.descriptor);
    });

    return tree;
  };

  // helpers //////////

  function isAttacher$1(element) {
    return !!element.host;
  }

  function isConnection$b(element) {
    return !!element.waypoints;
  }

  function isLabel$4(element) {
    return !!element.labelTarget;
  }

  function copyWaypoints$1(element) {
    return map(element.waypoints, function(waypoint) {

      waypoint = copyWaypoint$1(waypoint);

      if (waypoint.original) {
        waypoint.original = copyWaypoint$1(waypoint.original);
      }

      return waypoint;
    });
  }

  function copyWaypoint$1(waypoint) {
    return assign({}, waypoint);
  }

  function removeElement(element, elements) {
    var index = elements.indexOf(element);

    if (index === -1) {
      return elements;
    }

    return elements.splice(index, 1);
  }

  var CopyPasteModule$1 = {
    __depends__: [
      ClipboardModule,
      CreateModule,
      MouseModule,
      RulesModule$1
    ],
    __init__: [ 'copyPaste' ],
    copyPaste: [ 'type', CopyPaste ]
  };

  function copyProperties$1(source, target, properties) {
    if (!isArray$3(properties)) {
      properties = [ properties ];
    }

    forEach$1(properties, function(property) {
      if (!isUndefined$2(source[property])) {
        target[property] = source[property];
      }
    });
  }

  var LOW_PRIORITY$h = 750;


  function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {

    function copy(bo, clone) {
      var targetBo = bpmnFactory.create(bo.$type);

      return moddleCopy.copyElement(bo, targetBo, null, clone);
    }

    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$h, function(context) {
      var descriptor = context.descriptor,
          element = context.element,
          businessObject = getBusinessObject(element);

      // do not copy business object + di for labels;
      // will be pulled from the referenced label target
      if (isLabel$3(element)) {
        return descriptor;
      }

      var businessObjectCopy = descriptor.businessObject = copy(businessObject, true);
      var diCopy = descriptor.di = copy(getDi(element), true);
      diCopy.bpmnElement = businessObjectCopy;

      copyProperties$1(businessObjectCopy, descriptor, 'name');
      copyProperties$1(diCopy, descriptor, 'isExpanded');

      // default sequence flow
      if (businessObject.default) {
        descriptor.default = businessObject.default.id;
      }
    });

    var referencesKey = '-bpmn-js-refs';

    function getReferences(cache) {
      return (cache[referencesKey] = cache[referencesKey] || {});
    }

    function setReferences(cache, references) {
      cache[referencesKey] = references;
    }

    function resolveReferences(descriptor, cache, references) {
      var businessObject = getBusinessObject(descriptor);

      // default sequence flows
      if (descriptor.default) {

        // relationship cannot be resolved immediately
        references[ descriptor.default ] = {
          element: businessObject,
          property: 'default'
        };
      }

      // boundary events
      if (descriptor.host) {

        // relationship can be resolved immediately
        getBusinessObject(descriptor).attachedToRef = getBusinessObject(cache[ descriptor.host ]);
      }

      return omit(references, reduce(references, function(array, reference, key) {
        var element = reference.element,
            property = reference.property;

        if (key === descriptor.id) {
          element[ property ] = businessObject;

          array.push(descriptor.id);
        }

        return array;
      }, []));
    }

    eventBus.on('copyPaste.pasteElement', function(context) {
      var cache = context.cache,
          descriptor = context.descriptor,
          businessObject = descriptor.businessObject,
          di = descriptor.di;

      // wire existing di + businessObject for external label
      if (isLabel$3(descriptor)) {
        descriptor.businessObject = getBusinessObject(cache[ descriptor.labelTarget ]);
        descriptor.di = getDi(cache[ descriptor.labelTarget ]);

        return;
      }

      businessObject = descriptor.businessObject = copy(businessObject);

      di = descriptor.di = copy(di);
      di.bpmnElement = businessObject;

      copyProperties$1(descriptor, businessObject, [
        'isExpanded',
        'name'
      ]);

      descriptor.type = businessObject.$type;
    });

    // copy + paste processRef with participant

    eventBus.on('copyPaste.copyElement', LOW_PRIORITY$h, function(context) {
      var descriptor = context.descriptor,
          element = context.element;

      if (!is$1(element, 'bpmn:Participant')) {
        return;
      }

      var participantBo = getBusinessObject(element);

      if (participantBo.processRef) {
        descriptor.processRef = copy(participantBo.processRef, true);
      }
    });

    eventBus.on('copyPaste.pasteElement', function(context) {
      var descriptor = context.descriptor,
          processRef = descriptor.processRef;

      if (processRef) {
        descriptor.processRef = copy(processRef);
      }
    });

    // resolve references

    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$h, function(context) {
      var cache = context.cache,
          descriptor = context.descriptor;

      // resolve references e.g. default sequence flow
      setReferences(
        cache,
        resolveReferences(descriptor, cache, getReferences(cache))
      );
    });

  }


  BpmnCopyPaste.$inject = [
    'bpmnFactory',
    'eventBus',
    'moddleCopy'
  ];

  // helpers //////////

  function isLabel$3(element) {
    return !!element.labelTarget;
  }

  var DISALLOWED_PROPERTIES = [
    'artifacts',
    'dataInputAssociations',
    'dataOutputAssociations',
    'default',
    'flowElements',
    'lanes',
    'incoming',
    'outgoing',
    'categoryValue'
  ];

  /**
   * @typedef {Function} <moddleCopy.canCopyProperties> listener
   *
   * @param {Object} context
   * @param {Array<string>} context.propertyNames
   * @param {ModdleElement} context.sourceElement
   * @param {ModdleElement} context.targetElement
   *
   * @returns {Array<string>|boolean} - Return properties to be copied or false to disallow
   * copying.
   */

  /**
   * @typedef {Function} <moddleCopy.canCopyProperty> listener
   *
   * @param {Object} context
   * @param {ModdleElement} context.parent
   * @param {*} context.property
   * @param {string} context.propertyName
   *
   * @returns {*|boolean} - Return copied property or false to disallow
   * copying.
   */

  /**
   * @typedef {Function} <moddleCopy.canSetCopiedProperty> listener
   *
   * @param {Object} context
   * @param {ModdleElement} context.parent
   * @param {*} context.property
   * @param {string} context.propertyName
   *
   * @returns {boolean} - Return false to disallow
   * setting copied property.
   */

  /**
   * Utility for copying model properties from source element to target element.
   *
   * @param {EventBus} eventBus
   * @param {BpmnFactory} bpmnFactory
   * @param {BpmnModdle} moddle
   */
  function ModdleCopy(eventBus, bpmnFactory, moddle) {
    this._bpmnFactory = bpmnFactory;
    this._eventBus = eventBus;
    this._moddle = moddle;

    // copy extension elements last
    eventBus.on('moddleCopy.canCopyProperties', function(context) {
      var propertyNames = context.propertyNames;

      if (!propertyNames || !propertyNames.length) {
        return;
      }

      return sortBy(propertyNames, function(propertyName) {
        return propertyName === 'extensionElements';
      });
    });

    // default check whether property can be copied
    eventBus.on('moddleCopy.canCopyProperty', function(context) {
      var parent = context.parent,
          parentDescriptor = isObject(parent) && parent.$descriptor,
          propertyName = context.propertyName;

      if (propertyName && DISALLOWED_PROPERTIES.indexOf(propertyName) !== -1) {

        // disallow copying property
        return false;
      }

      if (propertyName &&
        parentDescriptor &&
        !find(parentDescriptor.properties, matchPattern({ name: propertyName }))) {

        // disallow copying property
        return false;
      }
    });

    // do NOT allow to copy empty extension elements
    eventBus.on('moddleCopy.canSetCopiedProperty', function(context) {
      var property = context.property;

      if (is(property, 'bpmn:ExtensionElements') && (!property.values || !property.values.length)) {

        // disallow setting copied property
        return false;
      }
    });
  }

  ModdleCopy.$inject = [
    'eventBus',
    'bpmnFactory',
    'moddle'
  ];

  /**
   * Copy model properties of source element to target element.
   *
   * @param {ModdleElement} sourceElement
   * @param {ModdleElement} targetElement
   * @param {Array<string>} [propertyNames]
   * @param {boolean} clone
   *
   * @param {ModdleElement}
   */
  ModdleCopy.prototype.copyElement = function(sourceElement, targetElement, propertyNames, clone) {
    var self = this;

    if (propertyNames && !isArray$3(propertyNames)) {
      propertyNames = [ propertyNames ];
    }

    propertyNames = propertyNames || getPropertyNames(sourceElement.$descriptor);

    var canCopyProperties = this._eventBus.fire('moddleCopy.canCopyProperties', {
      propertyNames: propertyNames,
      sourceElement: sourceElement,
      targetElement: targetElement,
      clone: clone
    });

    if (canCopyProperties === false) {
      return targetElement;
    }

    if (isArray$3(canCopyProperties)) {
      propertyNames = canCopyProperties;
    }

    // copy properties
    forEach$1(propertyNames, function(propertyName) {
      var sourceProperty;

      if (has$1(sourceElement, propertyName)) {
        sourceProperty = sourceElement.get(propertyName);
      }

      var copiedProperty = self.copyProperty(sourceProperty, targetElement, propertyName, clone);

      if (!isDefined(copiedProperty)) {
        return;
      }

      var canSetProperty = self._eventBus.fire('moddleCopy.canSetCopiedProperty', {
        parent: targetElement,
        property: copiedProperty,
        propertyName: propertyName
      });

      if (canSetProperty === false) {
        return;
      }

      // TODO(nikku): unclaim old IDs if ID property is copied over
      // this._moddle.getPropertyDescriptor(parent, propertyName)
      targetElement.set(propertyName, copiedProperty);
    });

    return targetElement;
  };

  /**
   * Copy model property.
   *
   * @param {*} property
   * @param {ModdleElement} parent
   * @param {string} propertyName
   * @param {boolean} clone
   *
   * @returns {*}
   */
  ModdleCopy.prototype.copyProperty = function(property, parent, propertyName, clone) {
    var self = this;

    // allow others to copy property
    var copiedProperty = this._eventBus.fire('moddleCopy.canCopyProperty', {
      parent: parent,
      property: property,
      propertyName: propertyName,
      clone: clone
    });

    // return if copying is NOT allowed
    if (copiedProperty === false) {
      return;
    }

    if (copiedProperty) {
      if (isObject(copiedProperty) && copiedProperty.$type && !copiedProperty.$parent) {
        copiedProperty.$parent = parent;
      }

      return copiedProperty;
    }

    var propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);

    // do NOT copy references
    if (propertyDescriptor.isReference) {
      return;
    }

    // copy id
    if (propertyDescriptor.isId) {
      return property && this._copyId(property, parent, clone);
    }

    // copy arrays
    if (isArray$3(property)) {
      return reduce(property, function(childProperties, childProperty) {

        // recursion
        copiedProperty = self.copyProperty(childProperty, parent, propertyName, clone);

        // copying might NOT be allowed
        if (copiedProperty) {
          return childProperties.concat(copiedProperty);
        }

        return childProperties;
      }, []);
    }

    // copy model elements
    if (isObject(property) && property.$type) {
      if (this._moddle.getElementDescriptor(property).isGeneric) {
        return;
      }

      copiedProperty = self._bpmnFactory.create(property.$type);

      copiedProperty.$parent = parent;

      // recursion
      copiedProperty = self.copyElement(property, copiedProperty, null, clone);

      return copiedProperty;
    }

    // copy primitive properties
    return property;
  };

  ModdleCopy.prototype._copyId = function(id, element, clone) {

    if (clone) {
      return id;
    }

    // disallow if already taken
    if (this._moddle.ids.assigned(id)) {
      return;
    } else {

      this._moddle.ids.claim(id, element);
      return id;
    }
  };

  // helpers //////////

  function getPropertyNames(descriptor, keepDefaultProperties) {
    return reduce(descriptor.properties, function(properties, property) {

      if (keepDefaultProperties && property.default) {
        return properties;
      }

      return properties.concat(property.name);
    }, []);
  }

  function is(element, type) {
    return element && (typeof element.$instanceOf === 'function') && element.$instanceOf(type);
  }

  var CopyPasteModule = {
    __depends__: [
      CopyPasteModule$1
    ],
    __init__: [ 'bpmnCopyPaste', 'moddleCopy' ],
    bpmnCopyPaste: [ 'type', BpmnCopyPaste ],
    moddleCopy: [ 'type', ModdleCopy ]
  };

  var round$5 = Math.round;

  /**
   * Service that allow replacing of elements.
   */
  function Replace(modeling) {

    this._modeling = modeling;
  }

  Replace.$inject = [ 'modeling' ];

  /**
   * @param {Element} oldElement - Element to be replaced
   * @param {Object}  newElementData - Containing information about the new element,
   *                                   for example the new bounds and type.
   * @param {Object}  options - Custom options that will be attached to the context. It can be used to inject data
   *                            that is needed in the command chain. For example it could be used in
   *                            eventbus.on('commandStack.shape.replace.postExecute') to change shape attributes after
   *                            shape creation.
   */
  Replace.prototype.replaceElement = function(oldElement, newElementData, options) {

    if (oldElement.waypoints) {

      // TODO(nikku): we do not replace connections, yet
      return null;
    }

    var modeling = this._modeling;

    var width = newElementData.width || oldElement.width,
        height = newElementData.height || oldElement.height,
        x = newElementData.x || oldElement.x,
        y = newElementData.y || oldElement.y,
        centerX = round$5(x + width / 2),
        centerY = round$5(y + height / 2);

    // modeling API requires center coordinates,
    // account for that when handling shape bounds

    return modeling.replaceShape(
      oldElement,
      assign(
        {},
        newElementData,
        {
          x: centerX,
          y: centerY,
          width: width,
          height: height
        }
      ),
      options
    );
  };

  var ReplaceModule$1 = {
    __init__: [ 'replace' ],
    replace: [ 'type', Replace ]
  };

  function copyProperties(source, target, properties) {
    if (!isArray$3(properties)) {
      properties = [ properties ];
    }

    forEach$1(properties, function(property) {
      if (!isUndefined$2(source[property])) {
        target[property] = source[property];
      }
    });
  }


  var CUSTOM_PROPERTIES = [
    'cancelActivity',
    'instantiate',
    'eventGatewayType',
    'triggeredByEvent',
    'isInterrupting'
  ];

  /**
   * Check if element should be collapsed or expanded.
   */
  function shouldToggleCollapsed(element, targetElement) {

    var oldCollapsed = (
      element && has$1(element, 'collapsed') ? element.collapsed : !isExpanded(element)
    );

    var targetCollapsed;

    if (targetElement && (has$1(targetElement, 'collapsed') || has$1(targetElement, 'isExpanded'))) {

      // property is explicitly set so use it
      targetCollapsed = (
        has$1(targetElement, 'collapsed') ? targetElement.collapsed : !targetElement.isExpanded
      );
    } else {

      // keep old state
      targetCollapsed = oldCollapsed;
    }

    if (oldCollapsed !== targetCollapsed) {
      return true;
    }

    return false;
  }


  /**
   * This module takes care of replacing BPMN elements
   */
  function BpmnReplace(
      bpmnFactory,
      elementFactory,
      moddleCopy,
      modeling,
      replace,
      rules,
      selection
  ) {

    /**
     * Prepares a new business object for the replacement element
     * and triggers the replace operation.
     *
     * @param  {djs.model.Base} element
     * @param  {Object} target
     * @param  {Object} [hints]
     *
     * @return {djs.model.Base} the newly created element
     */
    function replaceElement(element, target, hints) {

      hints = hints || {};

      var type = target.type,
          oldBusinessObject = element.businessObject;

      if (isSubProcess(oldBusinessObject) && type === 'bpmn:SubProcess') {
        if (shouldToggleCollapsed(element, target)) {

          // expanding or collapsing process
          modeling.toggleCollapse(element);

          return element;
        }
      }

      var newBusinessObject = bpmnFactory.create(type);

      var newElement = {
        type: type,
        businessObject: newBusinessObject,
      };

      newElement.di = {};

      // colors will be set to DI
      copyProperties(element.di, newElement.di, [
        'fill',
        'stroke',
        'background-color',
        'border-color',
        'color'
      ]);

      var elementProps = getPropertyNames(oldBusinessObject.$descriptor),
          newElementProps = getPropertyNames(newBusinessObject.$descriptor, true),
          copyProps = intersection(elementProps, newElementProps);

      // initialize special properties defined in target definition
      assign(newBusinessObject, pick(target, CUSTOM_PROPERTIES));

      var properties = filter(copyProps, function(propertyName) {

        // copying event definitions, unless we replace
        if (propertyName === 'eventDefinitions') {
          return hasEventDefinition$1(element, target.eventDefinitionType);
        }

        // retain loop characteristics if the target element
        // is not an event sub process
        if (propertyName === 'loopCharacteristics') {
          return !isEventSubProcess(newBusinessObject);
        }

        // so the applied properties from 'target' don't get lost
        if (has$1(newBusinessObject, propertyName)) {
          return false;
        }

        if (propertyName === 'processRef' && target.isExpanded === false) {
          return false;
        }

        if (propertyName === 'triggeredByEvent') {
          return false;
        }

        return true;
      });

      newBusinessObject = moddleCopy.copyElement(
        oldBusinessObject,
        newBusinessObject,
        properties
      );

      // initialize custom BPMN extensions
      if (target.eventDefinitionType) {

        // only initialize with new eventDefinition
        // if we did not set an event definition yet,
        // i.e. because we copied it
        if (!hasEventDefinition$1(newBusinessObject, target.eventDefinitionType)) {
          newElement.eventDefinitionType = target.eventDefinitionType;
          newElement.eventDefinitionAttrs = target.eventDefinitionAttrs;
        }
      }

      if (is$1(oldBusinessObject, 'bpmn:Activity')) {

        if (isSubProcess(oldBusinessObject)) {

          // no toggeling, so keep old state
          newElement.isExpanded = isExpanded(element);
        }

        // else if property is explicitly set, use it
        else if (target && has$1(target, 'isExpanded')) {
          newElement.isExpanded = target.isExpanded;

          // assign default size of new expanded element
          var defaultSize = elementFactory.getDefaultSize(newBusinessObject, {
            isExpanded: newElement.isExpanded
          });

          newElement.width = defaultSize.width;
          newElement.height = defaultSize.height;

          // keep element centered
          newElement.x = element.x - (newElement.width - element.width) / 2;
          newElement.y = element.y - (newElement.height - element.height) / 2;
        }

        // TODO: need also to respect min/max Size
        // copy size, from an expanded subprocess to an expanded alternative subprocess
        // except bpmn:Task, because Task is always expanded
        if ((isExpanded(element) && !is$1(oldBusinessObject, 'bpmn:Task')) && newElement.isExpanded) {
          newElement.width = element.width;
          newElement.height = element.height;
        }
      }

      // remove children if not expanding sub process
      if (isSubProcess(oldBusinessObject) && !isSubProcess(newBusinessObject)) {
        hints.moveChildren = false;
      }

      // transform collapsed/expanded pools
      if (is$1(oldBusinessObject, 'bpmn:Participant')) {

        // create expanded pool
        if (target.isExpanded === true) {
          newBusinessObject.processRef = bpmnFactory.create('bpmn:Process');
        } else {

          // remove children when transforming to collapsed pool
          hints.moveChildren = false;
        }

        // apply same width and default height
        newElement.width = element.width;
        newElement.height = elementFactory.getDefaultSize(newElement).height;
      }

      if (!rules.allowed('shape.resize', { shape: newBusinessObject })) {
        newElement.height = elementFactory.getDefaultSize(newElement).height;
        newElement.width = elementFactory.getDefaultSize(newElement).width;
      }

      newBusinessObject.name = oldBusinessObject.name;

      // retain default flow's reference between inclusive <-> exclusive gateways and activities
      if (
        isAny(oldBusinessObject, [
          'bpmn:ExclusiveGateway',
          'bpmn:InclusiveGateway',
          'bpmn:Activity'
        ]) &&
        isAny(newBusinessObject, [
          'bpmn:ExclusiveGateway',
          'bpmn:InclusiveGateway',
          'bpmn:Activity'
        ])
      ) {
        newBusinessObject.default = oldBusinessObject.default;
      }

      if (
        target.host &&
        !is$1(oldBusinessObject, 'bpmn:BoundaryEvent') &&
        is$1(newBusinessObject, 'bpmn:BoundaryEvent')
      ) {
        newElement.host = target.host;
      }

      // The DataStoreReference element is 14px wider than the DataObjectReference element
      // This ensures that they stay centered on the x axis when replaced
      if (
        newElement.type === 'bpmn:DataStoreReference' ||
        newElement.type === 'bpmn:DataObjectReference'
      ) {
        newElement.x = element.x + (element.width - newElement.width) / 2;
      }


      newElement = replace.replaceElement(element, newElement, hints);

      if (hints.select !== false) {
        selection.select(newElement);
      }

      return newElement;
    }

    this.replaceElement = replaceElement;
  }

  BpmnReplace.$inject = [
    'bpmnFactory',
    'elementFactory',
    'moddleCopy',
    'modeling',
    'replace',
    'rules',
    'selection'
  ];


  function isSubProcess(bo) {
    return is$1(bo, 'bpmn:SubProcess');
  }

  function hasEventDefinition$1(element, type) {

    var bo = getBusinessObject(element);

    return type && bo.get('eventDefinitions').some(function(definition) {
      return is$1(definition, type);
    });
  }

  /**
   * Compute intersection between two arrays.
   */
  function intersection(a1, a2) {
    return a1.filter(function(el) {
      return a2.indexOf(el) !== -1;
    });
  }

  var ReplaceModule = {
    __depends__: [
      CopyPasteModule,
      ReplaceModule$1,
      SelectionModule
    ],
    bpmnReplace: [ 'type', BpmnReplace ]
  };

  /**
   * Returns true, if an element is from a different type
   * than a target definition. Takes into account the type,
   * event definition type and triggeredByEvent property.
   *
   * @param {djs.model.Base} element
   *
   * @return {boolean}
   */
  function isDifferentType(element) {

    return function(entry) {
      var target = entry.target;

      var businessObject = getBusinessObject(element),
          eventDefinition = businessObject.eventDefinitions && businessObject.eventDefinitions[0];

      var isTypeEqual = businessObject.$type === target.type;

      var isEventDefinitionEqual = (
        (eventDefinition && eventDefinition.$type) === target.eventDefinitionType
      );

      var isTriggeredByEventEqual = (
        businessObject.triggeredByEvent === target.triggeredByEvent
      );

      var isExpandedEqual = (
        target.isExpanded === undefined ||
        target.isExpanded === isExpanded(element)
      );

      return !isTypeEqual || !isEventDefinitionEqual || !isTriggeredByEventEqual || !isExpandedEqual;
    };
  }

  var START_EVENT = [
    {
      label: 'Start Event',
      actionName: 'replace-with-none-start',
      className: 'bpmn-icon-start-event-none',
      target: {
        type: 'bpmn:StartEvent'
      }
    },
    {
      label: 'Intermediate Throw Event',
      actionName: 'replace-with-none-intermediate-throwing',
      className: 'bpmn-icon-intermediate-event-none',
      target: {
        type: 'bpmn:IntermediateThrowEvent'
      }
    },
    {
      label: 'End Event',
      actionName: 'replace-with-none-end',
      className: 'bpmn-icon-end-event-none',
      target: {
        type: 'bpmn:EndEvent'
      }
    },
    {
      label: 'Message Start Event',
      actionName: 'replace-with-message-start',
      className: 'bpmn-icon-start-event-message',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition'
      }
    },
    {
      label: 'Timer Start Event',
      actionName: 'replace-with-timer-start',
      className: 'bpmn-icon-start-event-timer',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition'
      }
    },
    {
      label: 'Conditional Start Event',
      actionName: 'replace-with-conditional-start',
      className: 'bpmn-icon-start-event-condition',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
      }
    },
    {
      label: 'Signal Start Event',
      actionName: 'replace-with-signal-start',
      className: 'bpmn-icon-start-event-signal',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition'
      }
    }
  ];

  var START_EVENT_SUB_PROCESS = [
    {
      label: 'Start Event',
      actionName: 'replace-with-none-start',
      className: 'bpmn-icon-start-event-none',
      target: {
        type: 'bpmn:StartEvent'
      }
    },
    {
      label: 'Intermediate Throw Event',
      actionName: 'replace-with-none-intermediate-throwing',
      className: 'bpmn-icon-intermediate-event-none',
      target: {
        type: 'bpmn:IntermediateThrowEvent'
      }
    },
    {
      label: 'End Event',
      actionName: 'replace-with-none-end',
      className: 'bpmn-icon-end-event-none',
      target: {
        type: 'bpmn:EndEvent'
      }
    }
  ];

  var INTERMEDIATE_EVENT = [
    {
      label: 'Start Event',
      actionName: 'replace-with-none-start',
      className: 'bpmn-icon-start-event-none',
      target: {
        type: 'bpmn:StartEvent'
      }
    },
    {
      label: 'Intermediate Throw Event',
      actionName: 'replace-with-none-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-none',
      target: {
        type: 'bpmn:IntermediateThrowEvent'
      }
    },
    {
      label: 'End Event',
      actionName: 'replace-with-none-end',
      className: 'bpmn-icon-end-event-none',
      target: {
        type: 'bpmn:EndEvent'
      }
    },
    {
      label: 'Message Intermediate Catch Event',
      actionName: 'replace-with-message-intermediate-catch',
      className: 'bpmn-icon-intermediate-event-catch-message',
      target: {
        type: 'bpmn:IntermediateCatchEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition'
      }
    },
    {
      label: 'Message Intermediate Throw Event',
      actionName: 'replace-with-message-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-throw-message',
      target: {
        type: 'bpmn:IntermediateThrowEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition'
      }
    },
    {
      label: 'Timer Intermediate Catch Event',
      actionName: 'replace-with-timer-intermediate-catch',
      className: 'bpmn-icon-intermediate-event-catch-timer',
      target: {
        type: 'bpmn:IntermediateCatchEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition'
      }
    },
    {
      label: 'Escalation Intermediate Throw Event',
      actionName: 'replace-with-escalation-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-throw-escalation',
      target: {
        type: 'bpmn:IntermediateThrowEvent',
        eventDefinitionType: 'bpmn:EscalationEventDefinition'
      }
    },
    {
      label: 'Conditional Intermediate Catch Event',
      actionName: 'replace-with-conditional-intermediate-catch',
      className: 'bpmn-icon-intermediate-event-catch-condition',
      target: {
        type: 'bpmn:IntermediateCatchEvent',
        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
      }
    },
    {
      label: 'Link Intermediate Catch Event',
      actionName: 'replace-with-link-intermediate-catch',
      className: 'bpmn-icon-intermediate-event-catch-link',
      target: {
        type: 'bpmn:IntermediateCatchEvent',
        eventDefinitionType: 'bpmn:LinkEventDefinition',
        eventDefinitionAttrs: {
          name: ''
        }
      }
    },
    {
      label: 'Link Intermediate Throw Event',
      actionName: 'replace-with-link-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-throw-link',
      target: {
        type: 'bpmn:IntermediateThrowEvent',
        eventDefinitionType: 'bpmn:LinkEventDefinition',
        eventDefinitionAttrs: {
          name: ''
        }
      }
    },
    {
      label: 'Compensation Intermediate Throw Event',
      actionName: 'replace-with-compensation-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-throw-compensation',
      target: {
        type: 'bpmn:IntermediateThrowEvent',
        eventDefinitionType: 'bpmn:CompensateEventDefinition'
      }
    },
    {
      label: 'Signal Intermediate Catch Event',
      actionName: 'replace-with-signal-intermediate-catch',
      className: 'bpmn-icon-intermediate-event-catch-signal',
      target: {
        type: 'bpmn:IntermediateCatchEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition'
      }
    },
    {
      label: 'Signal Intermediate Throw Event',
      actionName: 'replace-with-signal-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-throw-signal',
      target: {
        type: 'bpmn:IntermediateThrowEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition'
      }
    }
  ];

  var END_EVENT = [
    {
      label: 'Start Event',
      actionName: 'replace-with-none-start',
      className: 'bpmn-icon-start-event-none',
      target: {
        type: 'bpmn:StartEvent'
      }
    },
    {
      label: 'Intermediate Throw Event',
      actionName: 'replace-with-none-intermediate-throw',
      className: 'bpmn-icon-intermediate-event-none',
      target: {
        type: 'bpmn:IntermediateThrowEvent'
      }
    },
    {
      label: 'End Event',
      actionName: 'replace-with-none-end',
      className: 'bpmn-icon-end-event-none',
      target: {
        type: 'bpmn:EndEvent'
      }
    },
    {
      label: 'Message End Event',
      actionName: 'replace-with-message-end',
      className: 'bpmn-icon-end-event-message',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition'
      }
    },
    {
      label: 'Escalation End Event',
      actionName: 'replace-with-escalation-end',
      className: 'bpmn-icon-end-event-escalation',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:EscalationEventDefinition'
      }
    },
    {
      label: 'Error End Event',
      actionName: 'replace-with-error-end',
      className: 'bpmn-icon-end-event-error',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:ErrorEventDefinition'
      }
    },
    {
      label: 'Cancel End Event',
      actionName: 'replace-with-cancel-end',
      className: 'bpmn-icon-end-event-cancel',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:CancelEventDefinition'
      }
    },
    {
      label: 'Compensation End Event',
      actionName: 'replace-with-compensation-end',
      className: 'bpmn-icon-end-event-compensation',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:CompensateEventDefinition'
      }
    },
    {
      label: 'Signal End Event',
      actionName: 'replace-with-signal-end',
      className: 'bpmn-icon-end-event-signal',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition'
      }
    },
    {
      label: 'Terminate End Event',
      actionName: 'replace-with-terminate-end',
      className: 'bpmn-icon-end-event-terminate',
      target: {
        type: 'bpmn:EndEvent',
        eventDefinitionType: 'bpmn:TerminateEventDefinition'
      }
    }
  ];

  var GATEWAY = [
    {
      label: 'Exclusive Gateway',
      actionName: 'replace-with-exclusive-gateway',
      className: 'bpmn-icon-gateway-xor',
      target: {
        type: 'bpmn:ExclusiveGateway'
      }
    },
    {
      label: 'Parallel Gateway',
      actionName: 'replace-with-parallel-gateway',
      className: 'bpmn-icon-gateway-parallel',
      target: {
        type: 'bpmn:ParallelGateway'
      }
    },
    {
      label: 'Inclusive Gateway',
      actionName: 'replace-with-inclusive-gateway',
      className: 'bpmn-icon-gateway-or',
      target: {
        type: 'bpmn:InclusiveGateway'
      }
    },
    {
      label: 'Complex Gateway',
      actionName: 'replace-with-complex-gateway',
      className: 'bpmn-icon-gateway-complex',
      target: {
        type: 'bpmn:ComplexGateway'
      }
    },
    {
      label: 'Event based Gateway',
      actionName: 'replace-with-event-based-gateway',
      className: 'bpmn-icon-gateway-eventbased',
      target: {
        type: 'bpmn:EventBasedGateway',
        instantiate: false,
        eventGatewayType: 'Exclusive'
      }
    }

    // Gateways deactivated until https://github.com/bpmn-io/bpmn-js/issues/194
    // {
    //   label: 'Event based instantiating Gateway',
    //   actionName: 'replace-with-exclusive-event-based-gateway',
    //   className: 'bpmn-icon-exclusive-event-based',
    //   target: {
    //     type: 'bpmn:EventBasedGateway'
    //   },
    //   options: {
    //     businessObject: { instantiate: true, eventGatewayType: 'Exclusive' }
    //   }
    // },
    // {
    //   label: 'Parallel Event based instantiating Gateway',
    //   actionName: 'replace-with-parallel-event-based-instantiate-gateway',
    //   className: 'bpmn-icon-parallel-event-based-instantiate-gateway',
    //   target: {
    //     type: 'bpmn:EventBasedGateway'
    //   },
    //   options: {
    //     businessObject: { instantiate: true, eventGatewayType: 'Parallel' }
    //   }
    // }
  ];

  var SUBPROCESS_EXPANDED = [
    {
      label: 'Transaction',
      actionName: 'replace-with-transaction',
      className: 'bpmn-icon-transaction',
      target: {
        type: 'bpmn:Transaction',
        isExpanded: true
      }
    },
    {
      label: 'Event Sub Process',
      actionName: 'replace-with-event-subprocess',
      className: 'bpmn-icon-event-subprocess-expanded',
      target: {
        type: 'bpmn:SubProcess',
        triggeredByEvent: true,
        isExpanded: true
      }
    },
    {
      label: 'Sub Process (collapsed)',
      actionName: 'replace-with-collapsed-subprocess',
      className: 'bpmn-icon-subprocess-collapsed',
      target: {
        type: 'bpmn:SubProcess',
        isExpanded: false
      }
    }
  ];

  var TRANSACTION = [
    {
      label: 'Sub Process',
      actionName: 'replace-with-subprocess',
      className: 'bpmn-icon-subprocess-expanded',
      target: {
        type: 'bpmn:SubProcess',
        isExpanded: true
      }
    },
    {
      label: 'Event Sub Process',
      actionName: 'replace-with-event-subprocess',
      className: 'bpmn-icon-event-subprocess-expanded',
      target: {
        type: 'bpmn:SubProcess',
        triggeredByEvent: true,
        isExpanded: true
      }
    }
  ];

  var EVENT_SUB_PROCESS = [
    {
      label: 'Sub Process',
      actionName: 'replace-with-subprocess',
      className: 'bpmn-icon-subprocess-expanded',
      target: {
        type: 'bpmn:SubProcess',
        isExpanded: true
      }
    },
    {
      label: 'Transaction',
      actionName: 'replace-with-transaction',
      className: 'bpmn-icon-transaction',
      target: {
        type: 'bpmn:Transaction',
        isExpanded: true
      }
    }
  ];

  var TASK = [
    {
      label: 'Task',
      actionName: 'replace-with-task',
      className: 'bpmn-icon-task',
      target: {
        type: 'bpmn:Task'
      }
    },
    {
      label: 'Send Task',
      actionName: 'replace-with-send-task',
      className: 'bpmn-icon-send',
      target: {
        type: 'bpmn:SendTask'
      }
    },
    {
      label: 'Receive Task',
      actionName: 'replace-with-receive-task',
      className: 'bpmn-icon-receive',
      target: {
        type: 'bpmn:ReceiveTask'
      }
    },
    {
      label: 'User Task',
      actionName: 'replace-with-user-task',
      className: 'bpmn-icon-user',
      target: {
        type: 'bpmn:UserTask'
      }
    },
    {
      label: 'Manual Task',
      actionName: 'replace-with-manual-task',
      className: 'bpmn-icon-manual',
      target: {
        type: 'bpmn:ManualTask'
      }
    },
    {
      label: 'Business Rule Task',
      actionName: 'replace-with-rule-task',
      className: 'bpmn-icon-business-rule',
      target: {
        type: 'bpmn:BusinessRuleTask'
      }
    },
    {
      label: 'Service Task',
      actionName: 'replace-with-service-task',
      className: 'bpmn-icon-service',
      target: {
        type: 'bpmn:ServiceTask'
      }
    },
    {
      label: 'Script Task',
      actionName: 'replace-with-script-task',
      className: 'bpmn-icon-script',
      target: {
        type: 'bpmn:ScriptTask'
      }
    },
    {
      label: 'Call Activity',
      actionName: 'replace-with-call-activity',
      className: 'bpmn-icon-call-activity',
      target: {
        type: 'bpmn:CallActivity'
      }
    },
    {
      label: 'Sub Process (collapsed)',
      actionName: 'replace-with-collapsed-subprocess',
      className: 'bpmn-icon-subprocess-collapsed',
      target: {
        type: 'bpmn:SubProcess',
        isExpanded: false
      }
    },
    {
      label: 'Sub Process (expanded)',
      actionName: 'replace-with-expanded-subprocess',
      className: 'bpmn-icon-subprocess-expanded',
      target: {
        type: 'bpmn:SubProcess',
        isExpanded: true
      }
    }
  ];

  var DATA_OBJECT_REFERENCE = [
    {
      label: 'Data Store Reference',
      actionName: 'replace-with-data-store-reference',
      className: 'bpmn-icon-data-store',
      target: {
        type: 'bpmn:DataStoreReference'
      }
    }
  ];

  var DATA_STORE_REFERENCE = [
    {
      label: 'Data Object Reference',
      actionName: 'replace-with-data-object-reference',
      className: 'bpmn-icon-data-object',
      target: {
        type: 'bpmn:DataObjectReference'
      }
    }
  ];

  var BOUNDARY_EVENT = [
    {
      label: 'Message Boundary Event',
      actionName: 'replace-with-message-boundary',
      className: 'bpmn-icon-intermediate-event-catch-message',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition'
      }
    },
    {
      label: 'Timer Boundary Event',
      actionName: 'replace-with-timer-boundary',
      className: 'bpmn-icon-intermediate-event-catch-timer',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition'
      }
    },
    {
      label: 'Escalation Boundary Event',
      actionName: 'replace-with-escalation-boundary',
      className: 'bpmn-icon-intermediate-event-catch-escalation',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:EscalationEventDefinition'
      }
    },
    {
      label: 'Conditional Boundary Event',
      actionName: 'replace-with-conditional-boundary',
      className: 'bpmn-icon-intermediate-event-catch-condition',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
      }
    },
    {
      label: 'Error Boundary Event',
      actionName: 'replace-with-error-boundary',
      className: 'bpmn-icon-intermediate-event-catch-error',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:ErrorEventDefinition'
      }
    },
    {
      label: 'Cancel Boundary Event',
      actionName: 'replace-with-cancel-boundary',
      className: 'bpmn-icon-intermediate-event-catch-cancel',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:CancelEventDefinition'
      }
    },
    {
      label: 'Signal Boundary Event',
      actionName: 'replace-with-signal-boundary',
      className: 'bpmn-icon-intermediate-event-catch-signal',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition'
      }
    },
    {
      label: 'Compensation Boundary Event',
      actionName: 'replace-with-compensation-boundary',
      className: 'bpmn-icon-intermediate-event-catch-compensation',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:CompensateEventDefinition'
      }
    },
    {
      label: 'Message Boundary Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-message-boundary',
      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-message',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition',
        cancelActivity: false
      }
    },
    {
      label: 'Timer Boundary Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-timer-boundary',
      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-timer',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition',
        cancelActivity: false
      }
    },
    {
      label: 'Escalation Boundary Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-escalation-boundary',
      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-escalation',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:EscalationEventDefinition',
        cancelActivity: false
      }
    },
    {
      label: 'Conditional Boundary Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-conditional-boundary',
      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-condition',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:ConditionalEventDefinition',
        cancelActivity: false
      }
    },
    {
      label: 'Signal Boundary Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-signal-boundary',
      className: 'bpmn-icon-intermediate-event-catch-non-interrupting-signal',
      target: {
        type: 'bpmn:BoundaryEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition',
        cancelActivity: false
      }
    }
  ];

  var EVENT_SUB_PROCESS_START_EVENT = [
    {
      label: 'Message Start Event',
      actionName: 'replace-with-message-start',
      className: 'bpmn-icon-start-event-message',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition'
      }
    },
    {
      label: 'Timer Start Event',
      actionName: 'replace-with-timer-start',
      className: 'bpmn-icon-start-event-timer',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition'
      }
    },
    {
      label: 'Conditional Start Event',
      actionName: 'replace-with-conditional-start',
      className: 'bpmn-icon-start-event-condition',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
      }
    },
    {
      label: 'Signal Start Event',
      actionName: 'replace-with-signal-start',
      className: 'bpmn-icon-start-event-signal',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition'
      }
    },
    {
      label: 'Error Start Event',
      actionName: 'replace-with-error-start',
      className: 'bpmn-icon-start-event-error',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:ErrorEventDefinition'
      }
    },
    {
      label: 'Escalation Start Event',
      actionName: 'replace-with-escalation-start',
      className: 'bpmn-icon-start-event-escalation',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:EscalationEventDefinition'
      }
    },
    {
      label: 'Compensation Start Event',
      actionName: 'replace-with-compensation-start',
      className: 'bpmn-icon-start-event-compensation',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:CompensateEventDefinition'
      }
    },
    {
      label: 'Message Start Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-message-start',
      className: 'bpmn-icon-start-event-non-interrupting-message',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:MessageEventDefinition',
        isInterrupting: false
      }
    },
    {
      label: 'Timer Start Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-timer-start',
      className: 'bpmn-icon-start-event-non-interrupting-timer',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition',
        isInterrupting: false
      }
    },
    {
      label: 'Conditional Start Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-conditional-start',
      className: 'bpmn-icon-start-event-non-interrupting-condition',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:ConditionalEventDefinition',
        isInterrupting: false
      }
    },
    {
      label: 'Signal Start Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-signal-start',
      className: 'bpmn-icon-start-event-non-interrupting-signal',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:SignalEventDefinition',
        isInterrupting: false
      }
    },
    {
      label: 'Escalation Start Event (non-interrupting)',
      actionName: 'replace-with-non-interrupting-escalation-start',
      className: 'bpmn-icon-start-event-non-interrupting-escalation',
      target: {
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:EscalationEventDefinition',
        isInterrupting: false
      }
    }
  ];

  var SEQUENCE_FLOW = [
    {
      label: 'Sequence Flow',
      actionName: 'replace-with-sequence-flow',
      className: 'bpmn-icon-connection'
    },
    {
      label: 'Default Flow',
      actionName: 'replace-with-default-flow',
      className: 'bpmn-icon-default-flow'
    },
    {
      label: 'Conditional Flow',
      actionName: 'replace-with-conditional-flow',
      className: 'bpmn-icon-conditional-flow'
    }
  ];

  var PARTICIPANT = [
    {
      label: 'Expanded Pool',
      actionName: 'replace-with-expanded-pool',
      className: 'bpmn-icon-participant',
      target: {
        type: 'bpmn:Participant',
        isExpanded: true
      }
    },
    {
      label: function(element) {
        var label = 'Empty Pool';

        if (element.children && element.children.length) {
          label += ' (removes content)';
        }

        return label;
      },
      actionName: 'replace-with-collapsed-pool',

      // TODO(@janstuemmel): maybe design new icon
      className: 'bpmn-icon-lane',
      target: {
        type: 'bpmn:Participant',
        isExpanded: false
      }
    }
  ];

  /**
   * This module is an element agnostic replace menu provider for the popup menu.
   */
  function ReplaceMenuProvider(
      bpmnFactory, popupMenu, modeling, moddle,
      bpmnReplace, rules, translate) {

    this._bpmnFactory = bpmnFactory;
    this._popupMenu = popupMenu;
    this._modeling = modeling;
    this._moddle = moddle;
    this._bpmnReplace = bpmnReplace;
    this._rules = rules;
    this._translate = translate;

    this.register();
  }

  ReplaceMenuProvider.$inject = [
    'bpmnFactory',
    'popupMenu',
    'modeling',
    'moddle',
    'bpmnReplace',
    'rules',
    'translate'
  ];


  /**
   * Register replace menu provider in the popup menu
   */
  ReplaceMenuProvider.prototype.register = function() {
    this._popupMenu.registerProvider('bpmn-replace', this);
  };


  /**
   * Get all entries from replaceOptions for the given element and apply filters
   * on them. Get for example only elements, which are different from the current one.
   *
   * @param {djs.model.Base} element
   *
   * @return {Array<Object>} a list of menu entry items
   */
  ReplaceMenuProvider.prototype.getEntries = function(element) {

    var businessObject = element.businessObject;

    var rules = this._rules;

    var entries;

    if (!rules.allowed('shape.replace', { element: element })) {
      return [];
    }

    var differentType = isDifferentType(element);

    if (is$1(businessObject, 'bpmn:DataObjectReference')) {
      return this._createEntries(element, DATA_OBJECT_REFERENCE);
    }

    if (is$1(businessObject, 'bpmn:DataStoreReference') && !is$1(element.parent, 'bpmn:Collaboration')) {
      return this._createEntries(element, DATA_STORE_REFERENCE);
    }

    // start events outside sub processes
    if (is$1(businessObject, 'bpmn:StartEvent') && !is$1(businessObject.$parent, 'bpmn:SubProcess')) {

      entries = filter(START_EVENT, differentType);

      return this._createEntries(element, entries);
    }

    // expanded/collapsed pools
    if (is$1(businessObject, 'bpmn:Participant')) {

      entries = filter(PARTICIPANT, function(entry) {
        return isExpanded(element) !== entry.target.isExpanded;
      });

      return this._createEntries(element, entries);
    }

    // start events inside event sub processes
    if (is$1(businessObject, 'bpmn:StartEvent') && isEventSubProcess(businessObject.$parent)) {
      entries = filter(EVENT_SUB_PROCESS_START_EVENT, function(entry) {

        var target = entry.target;

        var isInterrupting = target.isInterrupting !== false;

        var isInterruptingEqual = getBusinessObject(element).isInterrupting === isInterrupting;

        // filters elements which types and event definition are equal but have have different interrupting types
        return differentType(entry) || !differentType(entry) && !isInterruptingEqual;

      });

      return this._createEntries(element, entries);
    }

    // start events inside sub processes
    if (is$1(businessObject, 'bpmn:StartEvent') && !isEventSubProcess(businessObject.$parent)
        && is$1(businessObject.$parent, 'bpmn:SubProcess')) {
      entries = filter(START_EVENT_SUB_PROCESS, differentType);

      return this._createEntries(element, entries);
    }

    // end events
    if (is$1(businessObject, 'bpmn:EndEvent')) {

      entries = filter(END_EVENT, function(entry) {
        var target = entry.target;

        // hide cancel end events outside transactions
        if (target.eventDefinitionType == 'bpmn:CancelEventDefinition' && !is$1(businessObject.$parent, 'bpmn:Transaction')) {
          return false;
        }

        return differentType(entry);
      });

      return this._createEntries(element, entries);
    }

    // boundary events
    if (is$1(businessObject, 'bpmn:BoundaryEvent')) {

      entries = filter(BOUNDARY_EVENT, function(entry) {

        var target = entry.target;

        if (target.eventDefinitionType == 'bpmn:CancelEventDefinition' &&
           !is$1(businessObject.attachedToRef, 'bpmn:Transaction')) {
          return false;
        }
        var cancelActivity = target.cancelActivity !== false;

        var isCancelActivityEqual = businessObject.cancelActivity == cancelActivity;

        return differentType(entry) || !differentType(entry) && !isCancelActivityEqual;
      });

      return this._createEntries(element, entries);
    }

    // intermediate events
    if (is$1(businessObject, 'bpmn:IntermediateCatchEvent') ||
        is$1(businessObject, 'bpmn:IntermediateThrowEvent')) {

      entries = filter(INTERMEDIATE_EVENT, differentType);

      return this._createEntries(element, entries);
    }

    // gateways
    if (is$1(businessObject, 'bpmn:Gateway')) {

      entries = filter(GATEWAY, differentType);

      return this._createEntries(element, entries);
    }

    // transactions
    if (is$1(businessObject, 'bpmn:Transaction')) {

      entries = filter(TRANSACTION, differentType);

      return this._createEntries(element, entries);
    }

    // expanded event sub processes
    if (isEventSubProcess(businessObject) && isExpanded(element)) {

      entries = filter(EVENT_SUB_PROCESS, differentType);

      return this._createEntries(element, entries);
    }

    // expanded sub processes
    if (is$1(businessObject, 'bpmn:SubProcess') && isExpanded(element)) {

      entries = filter(SUBPROCESS_EXPANDED, differentType);

      return this._createEntries(element, entries);
    }

    // collapsed ad hoc sub processes
    if (is$1(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(element)) {

      entries = filter(TASK, function(entry) {

        var target = entry.target;

        var isTargetSubProcess = target.type === 'bpmn:SubProcess';

        var isTargetExpanded = target.isExpanded === true;

        return isDifferentType(element) && (!isTargetSubProcess || isTargetExpanded);
      });

      return this._createEntries(element, entries);
    }

    // sequence flows
    if (is$1(businessObject, 'bpmn:SequenceFlow')) {
      return this._createSequenceFlowEntries(element, SEQUENCE_FLOW);
    }

    // flow nodes
    if (is$1(businessObject, 'bpmn:FlowNode')) {
      entries = filter(TASK, differentType);

      // collapsed SubProcess can not be replaced with itself
      if (is$1(businessObject, 'bpmn:SubProcess') && !isExpanded(element)) {
        entries = filter(entries, function(entry) {
          return entry.label !== 'Sub Process (collapsed)';
        });
      }

      return this._createEntries(element, entries);
    }

    return [];
  };


  /**
   * Get a list of header items for the given element. This includes buttons
   * for multi instance markers and for the ad hoc marker.
   *
   * @param {djs.model.Base} element
   *
   * @return {Array<Object>} a list of menu entry items
   */
  ReplaceMenuProvider.prototype.getHeaderEntries = function(element) {

    var headerEntries = [];

    if (is$1(element, 'bpmn:Activity') && !isEventSubProcess(element)) {
      headerEntries = headerEntries.concat(this._getLoopEntries(element));
    }

    if (is$1(element, 'bpmn:DataObjectReference')) {
      headerEntries = headerEntries.concat(this._getDataObjectIsCollection(element));
    }

    if (is$1(element, 'bpmn:Participant')) {
      headerEntries = headerEntries.concat(this._getParticipantMultiplicity(element));
    }

    if (is$1(element, 'bpmn:SubProcess') &&
        !is$1(element, 'bpmn:Transaction') &&
        !isEventSubProcess(element)) {
      headerEntries.push(this._getAdHocEntry(element));
    }

    return headerEntries;
  };


  /**
   * Creates an array of menu entry objects for a given element and filters the replaceOptions
   * according to a filter function.
   *
   * @param  {djs.model.Base} element
   * @param  {Object} replaceOptions
   *
   * @return {Array<Object>} a list of menu items
   */
  ReplaceMenuProvider.prototype._createEntries = function(element, replaceOptions) {
    var menuEntries = [];

    var self = this;

    forEach$1(replaceOptions, function(definition) {
      var entry = self._createMenuEntry(definition, element);

      menuEntries.push(entry);
    });

    return menuEntries;
  };

  /**
   * Creates an array of menu entry objects for a given sequence flow.
   *
   * @param  {djs.model.Base} element
   * @param  {Object} replaceOptions

   * @return {Array<Object>} a list of menu items
   */
  ReplaceMenuProvider.prototype._createSequenceFlowEntries = function(element, replaceOptions) {

    var businessObject = getBusinessObject(element);

    var menuEntries = [];

    var modeling = this._modeling,
        moddle = this._moddle;

    var self = this;

    forEach$1(replaceOptions, function(entry) {

      switch (entry.actionName) {
      case 'replace-with-default-flow':
        if (businessObject.sourceRef.default !== businessObject &&
              (is$1(businessObject.sourceRef, 'bpmn:ExclusiveGateway') ||
               is$1(businessObject.sourceRef, 'bpmn:InclusiveGateway') ||
               is$1(businessObject.sourceRef, 'bpmn:ComplexGateway') ||
               is$1(businessObject.sourceRef, 'bpmn:Activity'))) {

          menuEntries.push(self._createMenuEntry(entry, element, function() {
            modeling.updateProperties(element.source, { default: businessObject });
          }));
        }
        break;
      case 'replace-with-conditional-flow':
        if (!businessObject.conditionExpression && is$1(businessObject.sourceRef, 'bpmn:Activity')) {

          menuEntries.push(self._createMenuEntry(entry, element, function() {
            var conditionExpression = moddle.create('bpmn:FormalExpression', { body: '' });

            modeling.updateProperties(element, { conditionExpression: conditionExpression });
          }));
        }
        break;
      default:

        // default flows
        if (is$1(businessObject.sourceRef, 'bpmn:Activity') && businessObject.conditionExpression) {
          return menuEntries.push(self._createMenuEntry(entry, element, function() {
            modeling.updateProperties(element, { conditionExpression: undefined });
          }));
        }

        // conditional flows
        if ((is$1(businessObject.sourceRef, 'bpmn:ExclusiveGateway') ||
             is$1(businessObject.sourceRef, 'bpmn:InclusiveGateway') ||
             is$1(businessObject.sourceRef, 'bpmn:ComplexGateway') ||
             is$1(businessObject.sourceRef, 'bpmn:Activity')) &&
             businessObject.sourceRef.default === businessObject) {

          return menuEntries.push(self._createMenuEntry(entry, element, function() {
            modeling.updateProperties(element.source, { default: undefined });
          }));
        }
      }
    });

    return menuEntries;
  };


  /**
   * Creates and returns a single menu entry item.
   *
   * @param  {Object} definition a single replace options definition object
   * @param  {djs.model.Base} element
   * @param  {Function} [action] an action callback function which gets called when
   *                             the menu entry is being triggered.
   *
   * @return {Object} menu entry item
   */
  ReplaceMenuProvider.prototype._createMenuEntry = function(definition, element, action) {
    var translate = this._translate;
    var replaceElement = this._bpmnReplace.replaceElement;

    var replaceAction = function() {
      return replaceElement(element, definition.target);
    };

    var label = definition.label;
    if (label && typeof label === 'function') {
      label = label(element);
    }

    action = action || replaceAction;

    var menuEntry = {
      label: translate(label),
      className: definition.className,
      id: definition.actionName,
      action: action
    };

    return menuEntry;
  };

  /**
   * Get a list of menu items containing buttons for multi instance markers
   *
   * @param  {djs.model.Base} element
   *
   * @return {Array<Object>} a list of menu items
   */
  ReplaceMenuProvider.prototype._getLoopEntries = function(element) {

    var self = this;
    var translate = this._translate;

    function toggleLoopEntry(event, entry) {
      var newLoopCharacteristics = getBusinessObject(element).loopCharacteristics;

      if (entry.active) {
        newLoopCharacteristics = undefined;
      } else {
        if (isUndefined$2(entry.options.isSequential) || !newLoopCharacteristics
        || !is$1(newLoopCharacteristics, entry.options.loopCharacteristics)) {
          newLoopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
        }

        newLoopCharacteristics.isSequential = entry.options.isSequential;
      }
      self._modeling.updateProperties(element, { loopCharacteristics: newLoopCharacteristics });
    }

    var businessObject = getBusinessObject(element),
        loopCharacteristics = businessObject.loopCharacteristics;

    var isSequential,
        isLoop,
        isParallel;

    if (loopCharacteristics) {
      isSequential = loopCharacteristics.isSequential;
      isLoop = loopCharacteristics.isSequential === undefined;
      isParallel = loopCharacteristics.isSequential !== undefined && !loopCharacteristics.isSequential;
    }


    var loopEntries = [
      {
        id: 'toggle-parallel-mi',
        className: 'bpmn-icon-parallel-mi-marker',
        title: translate('Parallel Multi Instance'),
        active: isParallel,
        action: toggleLoopEntry,
        options: {
          loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
          isSequential: false
        }
      },
      {
        id: 'toggle-sequential-mi',
        className: 'bpmn-icon-sequential-mi-marker',
        title: translate('Sequential Multi Instance'),
        active: isSequential,
        action: toggleLoopEntry,
        options: {
          loopCharacteristics: 'bpmn:MultiInstanceLoopCharacteristics',
          isSequential: true
        }
      },
      {
        id: 'toggle-loop',
        className: 'bpmn-icon-loop-marker',
        title: translate('Loop'),
        active: isLoop,
        action: toggleLoopEntry,
        options: {
          loopCharacteristics: 'bpmn:StandardLoopCharacteristics'
        }
      }
    ];
    return loopEntries;
  };

  /**
   * Get a list of menu items containing a button for the collection marker
   *
   * @param  {djs.model.Base} element
   *
   * @return {Array<Object>} a list of menu items
   */
  ReplaceMenuProvider.prototype._getDataObjectIsCollection = function(element) {

    var self = this;
    var translate = this._translate;

    function toggleIsCollection(event, entry) {
      self._modeling.updateModdleProperties(
        element,
        dataObject,
        { isCollection: !entry.active });
    }

    var dataObject = element.businessObject.dataObjectRef,
        isCollection = dataObject.isCollection;

    var dataObjectEntries = [
      {
        id: 'toggle-is-collection',
        className: 'bpmn-icon-parallel-mi-marker',
        title: translate('Collection'),
        active: isCollection,
        action: toggleIsCollection,
      }
    ];
    return dataObjectEntries;
  };

  /**
   * Get a list of menu items containing a button for the participant multiplicity marker
   *
   * @param  {djs.model.Base} element
   *
   * @return {Array<Object>} a list of menu items
   */
  ReplaceMenuProvider.prototype._getParticipantMultiplicity = function(element) {

    var self = this;
    var bpmnFactory = this._bpmnFactory;
    var translate = this._translate;

    function toggleParticipantMultiplicity(event, entry) {
      var isActive = entry.active;
      var participantMultiplicity;

      if (!isActive) {
        participantMultiplicity = bpmnFactory.create('bpmn:ParticipantMultiplicity');
      }

      self._modeling.updateProperties(
        element,
        { participantMultiplicity: participantMultiplicity });
    }

    var participantMultiplicity = element.businessObject.participantMultiplicity;

    var participantEntries = [
      {
        id: 'toggle-participant-multiplicity',
        className: 'bpmn-icon-parallel-mi-marker',
        title: translate('Participant Multiplicity'),
        active: !!participantMultiplicity,
        action: toggleParticipantMultiplicity,
      }
    ];
    return participantEntries;
  };


  /**
   * Get the menu items containing a button for the ad hoc marker
   *
   * @param  {djs.model.Base} element
   *
   * @return {Object} a menu item
   */
  ReplaceMenuProvider.prototype._getAdHocEntry = function(element) {
    var translate = this._translate;
    var businessObject = getBusinessObject(element);

    var isAdHoc = is$1(businessObject, 'bpmn:AdHocSubProcess');

    var replaceElement = this._bpmnReplace.replaceElement;

    var adHocEntry = {
      id: 'toggle-adhoc',
      className: 'bpmn-icon-ad-hoc-marker',
      title: translate('Ad-hoc'),
      active: isAdHoc,
      action: function(event, entry) {
        if (isAdHoc) {
          return replaceElement(element, { type: 'bpmn:SubProcess' }, {
            autoResize: false,
            layoutConnection: false
          });
        } else {
          return replaceElement(element, { type: 'bpmn:AdHocSubProcess' }, {
            autoResize: false,
            layoutConnection: false
          });
        }
      }
    };

    return adHocEntry;
  };

  var PopupMenuModule = {
    __depends__: [
      PopupMenuModule$1,
      ReplaceModule
    ],
    __init__: [ 'replaceMenuProvider' ],
    replaceMenuProvider: [ 'type', ReplaceMenuProvider ]
  };

  var max$4 = Math.max,
      min$2 = Math.min;

  var DEFAULT_CHILD_BOX_PADDING = 20;


  /**
   * Substract a TRBL from another
   *
   * @param  {TRBL} trblA
   * @param  {TRBL} trblB
   *
   * @return {TRBL}
   */
  function substractTRBL(trblA, trblB) {
    return {
      top: trblA.top - trblB.top,
      right: trblA.right - trblB.right,
      bottom: trblA.bottom - trblB.bottom,
      left: trblA.left - trblB.left
    };
  }

  /**
   * Resize the given bounds by the specified delta from a given anchor point.
   *
   * @param {Bounds} bounds the bounding box that should be resized
   * @param {string} direction in which the element is resized (nw, ne, se, sw)
   * @param {Point} delta of the resize operation
   *
   * @return {Bounds} resized bounding box
   */
  function resizeBounds$1(bounds, direction, delta) {
    var dx = delta.x,
        dy = delta.y;

    var newBounds = {
      x: bounds.x,
      y: bounds.y,
      width: bounds.width,
      height: bounds.height
    };

    if (direction.indexOf('n') !== -1) {
      newBounds.y = bounds.y + dy;
      newBounds.height = bounds.height - dy;
    } else if (direction.indexOf('s') !== -1) {
      newBounds.height = bounds.height + dy;
    }

    if (direction.indexOf('e') !== -1) {
      newBounds.width = bounds.width + dx;
    } else if (direction.indexOf('w') !== -1) {
      newBounds.x = bounds.x + dx;
      newBounds.width = bounds.width - dx;
    }

    return newBounds;
  }


  /**
   * Resize the given bounds by applying the passed
   * { top, right, bottom, left } delta.
   *
   * @param {Bounds} bounds
   * @param {TRBL} trblResize
   *
   * @return {Bounds}
   */
  function resizeTRBL(bounds, resize) {
    return {
      x: bounds.x + (resize.left || 0),
      y: bounds.y + (resize.top || 0),
      width: bounds.width - (resize.left || 0) + (resize.right || 0),
      height: bounds.height - (resize.top || 0) + (resize.bottom || 0)
    };
  }


  function applyConstraints(attr, trbl, resizeConstraints) {

    var value = trbl[attr],
        minValue = resizeConstraints.min && resizeConstraints.min[attr],
        maxValue = resizeConstraints.max && resizeConstraints.max[attr];

    if (isNumber(minValue)) {
      value = (/top|left/.test(attr) ? min$2 : max$4)(value, minValue);
    }

    if (isNumber(maxValue)) {
      value = (/top|left/.test(attr) ? max$4 : min$2)(value, maxValue);
    }

    return value;
  }

  function ensureConstraints$1(currentBounds, resizeConstraints) {

    if (!resizeConstraints) {
      return currentBounds;
    }

    var currentTrbl = asTRBL(currentBounds);

    return asBounds({
      top: applyConstraints('top', currentTrbl, resizeConstraints),
      right: applyConstraints('right', currentTrbl, resizeConstraints),
      bottom: applyConstraints('bottom', currentTrbl, resizeConstraints),
      left: applyConstraints('left', currentTrbl, resizeConstraints)
    });
  }


  function getMinResizeBounds(direction, currentBounds, minDimensions, childrenBounds) {

    var currentBox = asTRBL(currentBounds);

    var minBox = {
      top: /n/.test(direction) ? currentBox.bottom - minDimensions.height : currentBox.top,
      left: /w/.test(direction) ? currentBox.right - minDimensions.width : currentBox.left,
      bottom: /s/.test(direction) ? currentBox.top + minDimensions.height : currentBox.bottom,
      right: /e/.test(direction) ? currentBox.left + minDimensions.width : currentBox.right
    };

    var childrenBox = childrenBounds ? asTRBL(childrenBounds) : minBox;

    var combinedBox = {
      top: min$2(minBox.top, childrenBox.top),
      left: min$2(minBox.left, childrenBox.left),
      bottom: max$4(minBox.bottom, childrenBox.bottom),
      right: max$4(minBox.right, childrenBox.right)
    };

    return asBounds(combinedBox);
  }

  function asPadding(mayBePadding, defaultValue) {
    if (typeof mayBePadding !== 'undefined') {
      return mayBePadding;
    } else {
      return DEFAULT_CHILD_BOX_PADDING;
    }
  }

  function addPadding$1(bbox, padding) {
    var left, right, top, bottom;

    if (typeof padding === 'object') {
      left = asPadding(padding.left);
      right = asPadding(padding.right);
      top = asPadding(padding.top);
      bottom = asPadding(padding.bottom);
    } else {
      left = right = top = bottom = asPadding(padding);
    }

    return {
      x: bbox.x - left,
      y: bbox.y - top,
      width: bbox.width + left + right,
      height: bbox.height + top + bottom
    };
  }


  /**
   * Is the given element part of the resize
   * targets min boundary box?
   *
   * This is the default implementation which excludes
   * connections and labels.
   *
   * @param {djs.model.Base} element
   */
  function isBBoxChild(element) {

    // exclude connections
    if (element.waypoints) {
      return false;
    }

    // exclude labels
    if (element.type === 'label') {
      return false;
    }

    return true;
  }

  /**
   * Return children bounding computed from a shapes children
   * or a list of prefiltered children.
   *
   * @param  {djs.model.Shape|Array<djs.model.Shape>} shapeOrChildren
   * @param  {number|Object} padding
   *
   * @return {Bounds}
   */
  function computeChildrenBBox(shapeOrChildren, padding) {

    var elements;

    // compute based on shape
    if (shapeOrChildren.length === undefined) {

      // grab all the children that are part of the
      // parents children box
      elements = filter(shapeOrChildren.children, isBBoxChild);

    } else {
      elements = shapeOrChildren;
    }

    if (elements.length) {
      return addPadding$1(getBBox(elements), padding);
    }
  }

  var abs$4 = Math.abs;


  function getTRBLResize(oldBounds, newBounds) {
    return substractTRBL(asTRBL(newBounds), asTRBL(oldBounds));
  }


  var LANE_PARENTS = [
    'bpmn:Participant',
    'bpmn:Process',
    'bpmn:SubProcess'
  ];

  var LANE_INDENTATION = 30;


  /**
   * Collect all lane shapes in the given paren
   *
   * @param  {djs.model.Shape} shape
   * @param  {Array<djs.model.Base>} [collectedShapes]
   *
   * @return {Array<djs.model.Base>}
   */
  function collectLanes(shape, collectedShapes) {

    collectedShapes = collectedShapes || [];

    shape.children.filter(function(s) {
      if (is$1(s, 'bpmn:Lane')) {
        collectLanes(s, collectedShapes);

        collectedShapes.push(s);
      }
    });

    return collectedShapes;
  }


  /**
   * Return the lane children of the given element.
   *
   * @param {djs.model.Shape} shape
   *
   * @return {Array<djs.model.Shape>}
   */
  function getChildLanes(shape) {
    return shape.children.filter(function(c) {
      return is$1(c, 'bpmn:Lane');
    });
  }


  /**
   * Return the root element containing the given lane shape
   *
   * @param {djs.model.Shape} shape
   *
   * @return {djs.model.Shape}
   */
  function getLanesRoot(shape) {
    return getParent(shape, LANE_PARENTS) || shape;
  }


  /**
   * Compute the required resize operations for lanes
   * adjacent to the given shape, assuming it will be
   * resized to the given new bounds.
   *
   * @param {djs.model.Shape} shape
   * @param {Bounds} newBounds
   *
   * @return {Array<Object>}
   */
  function computeLanesResize(shape, newBounds) {

    var rootElement = getLanesRoot(shape);

    var initialShapes = is$1(rootElement, 'bpmn:Process') ? [] : [ rootElement ];

    var allLanes = collectLanes(rootElement, initialShapes),
        shapeTrbl = asTRBL(shape),
        shapeNewTrbl = asTRBL(newBounds),
        trblResize = getTRBLResize(shape, newBounds),
        resizeNeeded = [];

    allLanes.forEach(function(other) {

      if (other === shape) {
        return;
      }

      var topResize = 0,
          rightResize = trblResize.right,
          bottomResize = 0,
          leftResize = trblResize.left;

      var otherTrbl = asTRBL(other);

      if (trblResize.top) {
        if (abs$4(otherTrbl.bottom - shapeTrbl.top) < 10) {
          bottomResize = shapeNewTrbl.top - otherTrbl.bottom;
        }

        if (abs$4(otherTrbl.top - shapeTrbl.top) < 5) {
          topResize = shapeNewTrbl.top - otherTrbl.top;
        }
      }

      if (trblResize.bottom) {
        if (abs$4(otherTrbl.top - shapeTrbl.bottom) < 10) {
          topResize = shapeNewTrbl.bottom - otherTrbl.top;
        }

        if (abs$4(otherTrbl.bottom - shapeTrbl.bottom) < 5) {
          bottomResize = shapeNewTrbl.bottom - otherTrbl.bottom;
        }
      }

      if (topResize || rightResize || bottomResize || leftResize) {

        resizeNeeded.push({
          shape: other,
          newBounds: resizeTRBL(other, {
            top: topResize,
            right: rightResize,
            bottom: bottomResize,
            left: leftResize
          })
        });
      }

    });

    return resizeNeeded;
  }

  /**
   * A provider for BPMN 2.0 elements context pad
   */
  function ContextPadProvider(
      config, injector, eventBus,
      contextPad, modeling, elementFactory,
      connect, create, popupMenu,
      canvas, rules, translate) {

    config = config || {};

    contextPad.registerProvider(this);

    this._contextPad = contextPad;

    this._modeling = modeling;

    this._elementFactory = elementFactory;
    this._connect = connect;
    this._create = create;
    this._popupMenu = popupMenu;
    this._canvas = canvas;
    this._rules = rules;
    this._translate = translate;

    if (config.autoPlace !== false) {
      this._autoPlace = injector.get('autoPlace', false);
    }

    eventBus.on('create.end', 250, function(event) {
      var context = event.context,
          shape = context.shape;

      if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
        return;
      }

      var entries = contextPad.getEntries(shape);

      if (entries.replace) {
        entries.replace.action.click(event, shape);
      }
    });
  }

  ContextPadProvider.$inject = [
    'config.contextPad',
    'injector',
    'eventBus',
    'contextPad',
    'modeling',
    'elementFactory',
    'connect',
    'create',
    'popupMenu',
    'canvas',
    'rules',
    'translate'
  ];

  ContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
    var modeling = this._modeling;

    var actions = {};

    if (this._isDeleteAllowed(elements)) {
      assign(actions, {
        'delete': {
          group: 'edit',
          className: 'bpmn-icon-trash',
          title: this._translate('Remove'),
          action: {
            click: function(event, elements) {
              modeling.removeElements(elements.slice());
            }
          }
        }
      });
    }

    return actions;
  };

  /**
   * @param {djs.model.Base[]} elements
   * @return {boolean}
   */
  ContextPadProvider.prototype._isDeleteAllowed = function(elements) {

    var baseAllowed = this._rules.allowed('elements.delete', {
      elements: elements
    });

    if (isArray$3(baseAllowed)) {
      return every(baseAllowed, function(element) {
        return includes$7(baseAllowed, element);
      });
    }

    return baseAllowed;
  };

  ContextPadProvider.prototype.getContextPadEntries = function(element) {
    var contextPad = this._contextPad,
        modeling = this._modeling,

        elementFactory = this._elementFactory,
        connect = this._connect,
        create = this._create,
        popupMenu = this._popupMenu,
        canvas = this._canvas,
        rules = this._rules,
        autoPlace = this._autoPlace,
        translate = this._translate;

    var actions = {};

    if (element.type === 'label') {
      return actions;
    }

    var businessObject = element.businessObject;

    function startConnect(event, element) {
      connect.start(event, element);
    }

    function removeElement(e, element) {
      modeling.removeElements([ element ]);
    }

    function getReplaceMenuPosition(element) {

      var Y_OFFSET = 5;

      var diagramContainer = canvas.getContainer(),
          pad = contextPad.getPad(element).html;

      var diagramRect = diagramContainer.getBoundingClientRect(),
          padRect = pad.getBoundingClientRect();

      var top = padRect.top - diagramRect.top;
      var left = padRect.left - diagramRect.left;

      var pos = {
        x: left,
        y: top + padRect.height + Y_OFFSET
      };

      return pos;
    }


    /**
     * Create an append action
     *
     * @param {string} type
     * @param {string} className
     * @param {string} [title]
     * @param {Object} [options]
     *
     * @return {Object} descriptor
     */
    function appendAction(type, className, title, options) {

      if (typeof title !== 'string') {
        options = title;
        title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
      }

      function appendStart(event, element) {

        var shape = elementFactory.createShape(assign({ type: type }, options));
        create.start(event, shape, {
          source: element
        });
      }


      var append = autoPlace ? function(event, element) {
        var shape = elementFactory.createShape(assign({ type: type }, options));

        autoPlace.append(element, shape);
      } : appendStart;


      return {
        group: 'model',
        className: className,
        title: title,
        action: {
          dragstart: appendStart,
          click: append
        }
      };
    }

    function splitLaneHandler(count) {

      return function(event, element) {

        // actual split
        modeling.splitLane(element, count);

        // refresh context pad after split to
        // get rid of split icons
        contextPad.open(element, true);
      };
    }


    if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {

      var childLanes = getChildLanes(element);

      assign(actions, {
        'lane-insert-above': {
          group: 'lane-insert-above',
          className: 'bpmn-icon-lane-insert-above',
          title: translate('Add Lane above'),
          action: {
            click: function(event, element) {
              modeling.addLane(element, 'top');
            }
          }
        }
      });

      if (childLanes.length < 2) {

        if (element.height >= 120) {
          assign(actions, {
            'lane-divide-two': {
              group: 'lane-divide',
              className: 'bpmn-icon-lane-divide-two',
              title: translate('Divide into two Lanes'),
              action: {
                click: splitLaneHandler(2)
              }
            }
          });
        }

        if (element.height >= 180) {
          assign(actions, {
            'lane-divide-three': {
              group: 'lane-divide',
              className: 'bpmn-icon-lane-divide-three',
              title: translate('Divide into three Lanes'),
              action: {
                click: splitLaneHandler(3)
              }
            }
          });
        }
      }

      assign(actions, {
        'lane-insert-below': {
          group: 'lane-insert-below',
          className: 'bpmn-icon-lane-insert-below',
          title: translate('Add Lane below'),
          action: {
            click: function(event, element) {
              modeling.addLane(element, 'bottom');
            }
          }
        }
      });

    }

    if (is$1(businessObject, 'bpmn:FlowNode')) {

      if (is$1(businessObject, 'bpmn:EventBasedGateway')) {

        assign(actions, {
          'append.receive-task': appendAction(
            'bpmn:ReceiveTask',
            'bpmn-icon-receive-task',
            translate('Append ReceiveTask')
          ),
          'append.message-intermediate-event': appendAction(
            'bpmn:IntermediateCatchEvent',
            'bpmn-icon-intermediate-event-catch-message',
            translate('Append MessageIntermediateCatchEvent'),
            { eventDefinitionType: 'bpmn:MessageEventDefinition' }
          ),
          'append.timer-intermediate-event': appendAction(
            'bpmn:IntermediateCatchEvent',
            'bpmn-icon-intermediate-event-catch-timer',
            translate('Append TimerIntermediateCatchEvent'),
            { eventDefinitionType: 'bpmn:TimerEventDefinition' }
          ),
          'append.condition-intermediate-event': appendAction(
            'bpmn:IntermediateCatchEvent',
            'bpmn-icon-intermediate-event-catch-condition',
            translate('Append ConditionIntermediateCatchEvent'),
            { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }
          ),
          'append.signal-intermediate-event': appendAction(
            'bpmn:IntermediateCatchEvent',
            'bpmn-icon-intermediate-event-catch-signal',
            translate('Append SignalIntermediateCatchEvent'),
            { eventDefinitionType: 'bpmn:SignalEventDefinition' }
          )
        });
      } else

      if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {

        assign(actions, {
          'append.compensation-activity':
              appendAction(
                'bpmn:Task',
                'bpmn-icon-task',
                translate('Append compensation activity'),
                {
                  isForCompensation: true
                }
              )
        });
      } else

      if (!is$1(businessObject, 'bpmn:EndEvent') &&
          !businessObject.isForCompensation &&
          !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
          !isEventSubProcess(businessObject)) {

        assign(actions, {
          'append.end-event': appendAction(
            'bpmn:EndEvent',
            'bpmn-icon-end-event-none',
            translate('Append EndEvent')
          ),
          'append.gateway': appendAction(
            'bpmn:ExclusiveGateway',
            'bpmn-icon-gateway-none',
            translate('Append Gateway')
          ),
          'append.append-task': appendAction(
            'bpmn:Task',
            'bpmn-icon-task',
            translate('Append Task')
          ),
          'append.intermediate-event': appendAction(
            'bpmn:IntermediateThrowEvent',
            'bpmn-icon-intermediate-event-none',
            translate('Append Intermediate/Boundary Event')
          )
        });
      }
    }

    if (!popupMenu.isEmpty(element, 'bpmn-replace')) {

      // Replace menu entry
      assign(actions, {
        'replace': {
          group: 'edit',
          className: 'bpmn-icon-screw-wrench',
          title: translate('Change type'),
          action: {
            click: function(event, element) {

              var position = assign(getReplaceMenuPosition(element), {
                cursor: { x: event.x, y: event.y }
              });

              popupMenu.open(element, 'bpmn-replace', position);
            }
          }
        }
      });
    }

    if (is$1(businessObject, 'bpmn:SequenceFlow')) {
      assign(actions, {
        'append.text-annotation': appendAction(
          'bpmn:TextAnnotation',
          'bpmn-icon-text-annotation'
        )
      });
    }

    if (
      isAny(businessObject, [
        'bpmn:FlowNode',
        'bpmn:InteractionNode',
        'bpmn:DataObjectReference',
        'bpmn:DataStoreReference',
      ])
    ) {
      assign(actions, {
        'append.text-annotation': appendAction(
          'bpmn:TextAnnotation',
          'bpmn-icon-text-annotation'
        ),

        'connect': {
          group: 'connect',
          className: 'bpmn-icon-connection-multi',
          title: translate(
            'Connect using ' +
              (businessObject.isForCompensation
                ? ''
                : 'Sequence/MessageFlow or ') +
              'Association'
          ),
          action: {
            click: startConnect,
            dragstart: startConnect,
          },
        },
      });
    }

    if (is$1(businessObject, 'bpmn:TextAnnotation')) {
      assign(actions, {
        'connect': {
          group: 'connect',
          className: 'bpmn-icon-connection-multi',
          title: translate('Connect using Association'),
          action: {
            click: startConnect,
            dragstart: startConnect,
          },
        },
      });
    }

    if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {
      assign(actions, {
        'connect': {
          group: 'connect',
          className: 'bpmn-icon-connection-multi',
          title: translate('Connect using DataInputAssociation'),
          action: {
            click: startConnect,
            dragstart: startConnect
          }
        }
      });
    }

    if (is$1(businessObject, 'bpmn:Group')) {
      assign(actions, {
        'append.text-annotation': appendAction('bpmn:TextAnnotation', 'bpmn-icon-text-annotation')
      });
    }

    // delete element entry, only show if allowed by rules
    var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });

    if (isArray$3(deleteAllowed)) {

      // was the element returned as a deletion candidate?
      deleteAllowed = deleteAllowed[0] === element;
    }

    if (deleteAllowed) {
      assign(actions, {
        'delete': {
          group: 'edit',
          className: 'bpmn-icon-trash',
          title: translate('Remove'),
          action: {
            click: removeElement
          }
        }
      });
    }

    return actions;
  };


  // helpers /////////

  function isEventType(eventBo, type, definition) {

    var isType = eventBo.$instanceOf(type);
    var isDefinition = false;

    var definitions = eventBo.eventDefinitions || [];
    forEach$1(definitions, function(def) {
      if (def.$type === definition) {
        isDefinition = true;
      }
    });

    return isType && isDefinition;
  }

  function includes$7(array, item) {
    return array.indexOf(item) !== -1;
  }

  var ContextPadModule = {
    __depends__: [
      DirectEditingModule,
      ContextPadModule$1,
      SelectionModule,
      ConnectModule,
      CreateModule,
      PopupMenuModule
    ],
    __init__: [ 'contextPadProvider' ],
    contextPadProvider: [ 'type', ContextPadProvider ]
  };

  var AXIS_DIMENSIONS = {
    horizontal: [ 'x', 'width' ],
    vertical: [ 'y', 'height' ]
  };

  var THRESHOLD = 5;


  /**
   * Groups and filters elements and then trigger even distribution.
   */
  function DistributeElements$1(modeling, rules) {
    this._modeling = modeling;

    this._filters = [];

    this.registerFilter(function(elements) {
      var allowed = rules.allowed('elements.distribute', { elements: elements });

      if (isArray$3(allowed)) {
        return allowed;
      }

      return allowed ? elements : [];
    });
  }

  DistributeElements$1.$inject = [ 'modeling', 'rules' ];


  /**
   * Registers filter functions that allow external parties to filter
   * out certain elements.
   *
   * @param  {Function} filterFn
   */
  DistributeElements$1.prototype.registerFilter = function(filterFn) {
    if (typeof filterFn !== 'function') {
      throw new Error('the filter has to be a function');
    }

    this._filters.push(filterFn);
  };

  /**
   * Distributes the elements with a given orientation
   *
   * @param  {Array} elements
   * @param  {string} orientation
   */
  DistributeElements$1.prototype.trigger = function(elements, orientation) {
    var modeling = this._modeling;

    var groups,
        distributableElements;

    if (elements.length < 3) {
      return;
    }

    this._setOrientation(orientation);

    distributableElements = this._filterElements(elements);

    groups = this._createGroups(distributableElements);

    // nothing to distribute
    if (groups.length <= 2) {
      return;
    }

    modeling.distributeElements(groups, this._axis, this._dimension);

    return groups;
  };

  /**
   * Filters the elements with provided filters by external parties
   *
   * @param  {Array[Elements]} elements
   *
   * @return {Array[Elements]}
   */
  DistributeElements$1.prototype._filterElements = function(elements) {
    var filters = this._filters,
        axis = this._axis,
        dimension = this._dimension,
        distributableElements = [].concat(elements);

    if (!filters.length) {
      return elements;
    }

    forEach$1(filters, function(filterFn) {
      distributableElements = filterFn(distributableElements, axis, dimension);
    });

    return distributableElements;
  };


  /**
   * Create range (min, max) groups. Also tries to group elements
   * together that share the same range.
   *
   * @example
   * 	var distributableElements = [
   * 		{
   * 			range: {
   * 				min: 100,
   * 				max: 200
   * 			},
   * 			elements: [ { id: 'shape1', .. }]
   * 		}
   * 	]
   *
   * @param  {Array} elements
   *
   * @return {Array[Objects]}
   */
  DistributeElements$1.prototype._createGroups = function(elements) {
    var rangeGroups = [],
        self = this,
        axis = this._axis,
        dimension = this._dimension;

    if (!axis) {
      throw new Error('must have a defined "axis" and "dimension"');
    }

    // sort by 'left->right' or 'top->bottom'
    var sortedElements = sortBy(elements, axis);

    forEach$1(sortedElements, function(element, idx) {
      var elementRange = self._findRange(element, axis, dimension),
          range;

      var previous = rangeGroups[rangeGroups.length - 1];

      if (previous && self._hasIntersection(previous.range, elementRange)) {
        rangeGroups[rangeGroups.length - 1].elements.push(element);
      } else {
        range = { range: elementRange, elements: [ element ] };

        rangeGroups.push(range);
      }
    });

    return rangeGroups;
  };


  /**
   * Maps a direction to the according axis and dimension
   *
   * @param  {string} direction 'horizontal' or 'vertical'
   */
  DistributeElements$1.prototype._setOrientation = function(direction) {
    var orientation = AXIS_DIMENSIONS[direction];

    this._axis = orientation[0];
    this._dimension = orientation[1];
  };


  /**
   * Checks if the two ranges intercept each other
   *
   * @param  {Object} rangeA {min, max}
   * @param  {Object} rangeB {min, max}
   *
   * @return {boolean}
   */
  DistributeElements$1.prototype._hasIntersection = function(rangeA, rangeB) {
    return Math.max(rangeA.min, rangeA.max) >= Math.min(rangeB.min, rangeB.max) &&
           Math.min(rangeA.min, rangeA.max) <= Math.max(rangeB.min, rangeB.max);
  };


  /**
   * Returns the min and max values for an element
   *
   * @param  {Bounds} element
   * @param  {string} axis
   * @param  {string} dimension
   *
   * @return {{ min: number, max: number }}
   */
  DistributeElements$1.prototype._findRange = function(element) {
    var axis = element[this._axis],
        dimension = element[this._dimension];

    return {
      min: axis + THRESHOLD,
      max: axis + dimension - THRESHOLD
    };
  };

  var DistributeElementsModule$1 = {
    __init__: [ 'distributeElements' ],
    distributeElements: [ 'type', DistributeElements$1 ]
  };

  /**
   * Registers element exclude filters for elements that
   * currently do not support distribution.
   */
  function BpmnDistributeElements(distributeElements, eventBus, rules) {
    RuleProvider.call(this, eventBus);
  }

  BpmnDistributeElements.$inject = [ 'distributeElements', 'eventBus', 'rules' ];

  e(BpmnDistributeElements, RuleProvider);

  BpmnDistributeElements.prototype.init = function() {
    this.addRule('elements.distribute', function(context) {
      var elements = context.elements;

      elements = filter(elements, function(element) {
        var cannotDistribute = isAny(element, [
          'bpmn:Association',
          'bpmn:BoundaryEvent',
          'bpmn:DataInputAssociation',
          'bpmn:DataOutputAssociation',
          'bpmn:Lane',
          'bpmn:MessageFlow',
          'bpmn:SequenceFlow',
          'bpmn:TextAnnotation'
        ]);

        return !(element.labelTarget || cannotDistribute);
      });

      // filter out elements which are children of any of the selected elements
      elements = getParents$1(elements);

      if (elements.length < 3) {
        return false;
      }

      return elements;
    });
  };

  /**
   * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,
   * and then replace respective icons with the optimized data URIs in `./dist`.
   */
  var icons = {
    horizontal: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linejoin%3Around%22%20d%3D%22M450%20400V150h900v250%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22450%22%20width%3D%22600%22%20height%3D%221200%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%22450%22%20width%3D%22600%22%20height%3D%22800%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
    vertical: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201800%201800%22%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bstroke-linejoin%3Around%22%20d%3D%22M400%201350H150V450h250%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%22150%22%20width%3D%221200%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%221050%22%20width%3D%22800%22%20height%3D%22600%22%20rx%3D%221%22%20style%3D%22fill%3AcurrentColor%3Bstroke%3AcurrentColor%3Bstroke-width%3A100%3Bopacity%3A.5%22%2F%3E%3C%2Fsvg%3E',
  };

  var LOW_PRIORITY$g = 900;

  /**
   * A provider for distribute elements popup menu.
   */
  function DistributeElementsMenuProvider(
      popupMenu, distributeElements, translate, rules) {
    this._distributeElements = distributeElements;
    this._translate = translate;
    this._popupMenu = popupMenu;
    this._rules = rules;

    popupMenu.registerProvider('align-elements', LOW_PRIORITY$g, this);
  }

  DistributeElementsMenuProvider.$inject = [
    'popupMenu',
    'distributeElements',
    'translate',
    'rules'
  ];

  DistributeElementsMenuProvider.prototype.getPopupMenuEntries = function(elements) {
    var entries = {};

    if (this._isAllowed(elements)) {
      assign(entries, this._getEntries(elements));
    }

    return entries;
  };

  DistributeElementsMenuProvider.prototype._isAllowed = function(elements) {
    return this._rules.allowed('elements.distribute', { elements: elements });
  };

  DistributeElementsMenuProvider.prototype._getEntries = function(elements) {
    var distributeElements = this._distributeElements,
        translate = this._translate,
        popupMenu = this._popupMenu;

    var entries = {
      'distribute-elements-horizontal': {
        group: 'distribute',
        title: translate('Distribute elements horizontally'),
        className: 'bjs-align-elements-menu-entry',
        imageUrl: icons['horizontal'],
        action: function(event, entry) {
          distributeElements.trigger(elements, 'horizontal');
          popupMenu.close();
        }
      },
      'distribute-elements-vertical': {
        group: 'distribute',
        title: translate('Distribute elements vertically'),
        imageUrl: icons['vertical'],
        action: function(event, entry) {
          distributeElements.trigger(elements, 'vertical');
          popupMenu.close();
        }
      },
    };

    return entries;
  };

  var DistributeElementsModule = {
    __depends__: [
      PopupMenuModule$1,
      DistributeElementsModule$1
    ],
    __init__: [
      'bpmnDistributeElements',
      'distributeElementsMenuProvider'
    ],
    bpmnDistributeElements: [ 'type', BpmnDistributeElements ],
    distributeElementsMenuProvider: [ 'type', DistributeElementsMenuProvider ]
  };

  var NOT_REGISTERED_ERROR = 'is not a registered action',
      IS_REGISTERED_ERROR = 'is already registered';


  /**
   * An interface that provides access to modeling actions by decoupling
   * the one who requests the action to be triggered and the trigger itself.
   *
   * It's possible to add new actions by registering them with ´registerAction´
   * and likewise unregister existing ones with ´unregisterAction´.
   *
   *
   * ## Life-Cycle and configuration
   *
   * The editor actions will wait for diagram initialization before
   * registering default actions _and_ firing an `editorActions.init` event.
   *
   * Interested parties may listen to the `editorActions.init` event with
   * low priority to check, which actions got registered. Other components
   * may use the event to register their own actions via `registerAction`.
   *
   * @param {EventBus} eventBus
   * @param {Injector} injector
   */
  function EditorActions(eventBus, injector) {

    // initialize actions
    this._actions = {};

    var self = this;

    eventBus.on('diagram.init', function() {

      // all diagram modules got loaded; check which ones
      // are available and register the respective default actions
      self._registerDefaultActions(injector);

      // ask interested parties to register available editor
      // actions on diagram initialization
      eventBus.fire('editorActions.init', {
        editorActions: self
      });
    });

  }

  EditorActions.$inject = [
    'eventBus',
    'injector'
  ];

  /**
   * Register default actions.
   *
   * @param {Injector} injector
   */
  EditorActions.prototype._registerDefaultActions = function(injector) {

    // (1) retrieve optional components to integrate with

    var commandStack = injector.get('commandStack', false);
    var modeling = injector.get('modeling', false);
    var selection = injector.get('selection', false);
    var zoomScroll = injector.get('zoomScroll', false);
    var copyPaste = injector.get('copyPaste', false);
    var canvas = injector.get('canvas', false);
    var rules = injector.get('rules', false);
    var keyboardMove = injector.get('keyboardMove', false);
    var keyboardMoveSelection = injector.get('keyboardMoveSelection', false);

    // (2) check components and register actions

    if (commandStack) {
      this.register('undo', function() {
        commandStack.undo();
      });

      this.register('redo', function() {
        commandStack.redo();
      });
    }

    if (copyPaste && selection) {
      this.register('copy', function() {
        var selectedElements = selection.get();

        if (selectedElements.length) {
          return copyPaste.copy(selectedElements);
        }
      });
    }

    if (copyPaste) {
      this.register('paste', function() {
        copyPaste.paste();
      });
    }

    if (zoomScroll) {
      this.register('stepZoom', function(opts) {
        zoomScroll.stepZoom(opts.value);
      });
    }

    if (canvas) {
      this.register('zoom', function(opts) {
        canvas.zoom(opts.value);
      });
    }

    if (modeling && selection && rules) {
      this.register('removeSelection', function() {

        var selectedElements = selection.get();

        if (!selectedElements.length) {
          return;
        }

        var allowed = rules.allowed('elements.delete', { elements: selectedElements }),
            removableElements;

        if (allowed === false) {
          return;
        }
        else if (isArray$3(allowed)) {
          removableElements = allowed;
        }
        else {
          removableElements = selectedElements;
        }

        if (removableElements.length) {
          modeling.removeElements(removableElements.slice());
        }
      });
    }

    if (keyboardMove) {
      this.register('moveCanvas', function(opts) {
        keyboardMove.moveCanvas(opts);
      });
    }

    if (keyboardMoveSelection) {
      this.register('moveSelection', function(opts) {
        keyboardMoveSelection.moveSelection(opts.direction, opts.accelerated);
      });
    }

  };


  /**
   * Triggers a registered action
   *
   * @param  {string} action
   * @param  {Object} opts
   *
   * @return {Unknown} Returns what the registered listener returns
   */
  EditorActions.prototype.trigger = function(action, opts) {
    if (!this._actions[action]) {
      throw error(action, NOT_REGISTERED_ERROR);
    }

    return this._actions[action](opts);
  };


  /**
   * Registers a collections of actions.
   * The key of the object will be the name of the action.
   *
   * @example
   * ´´´
   * var actions = {
   *   spaceTool: function() {
   *     spaceTool.activateSelection();
   *   },
   *   lassoTool: function() {
   *     lassoTool.activateSelection();
   *   }
   * ];
   *
   * editorActions.register(actions);
   *
   * editorActions.isRegistered('spaceTool'); // true
   * ´´´
   *
   * @param  {Object} actions
   */
  EditorActions.prototype.register = function(actions, listener) {
    var self = this;

    if (typeof actions === 'string') {
      return this._registerAction(actions, listener);
    }

    forEach$1(actions, function(listener, action) {
      self._registerAction(action, listener);
    });
  };

  /**
   * Registers a listener to an action key
   *
   * @param  {string} action
   * @param  {Function} listener
   */
  EditorActions.prototype._registerAction = function(action, listener) {
    if (this.isRegistered(action)) {
      throw error(action, IS_REGISTERED_ERROR);
    }

    this._actions[action] = listener;
  };

  /**
   * Unregister an existing action
   *
   * @param {string} action
   */
  EditorActions.prototype.unregister = function(action) {
    if (!this.isRegistered(action)) {
      throw error(action, NOT_REGISTERED_ERROR);
    }

    this._actions[action] = undefined;
  };

  /**
   * Returns the number of actions that are currently registered
   *
   * @return {number}
   */
  EditorActions.prototype.getActions = function() {
    return Object.keys(this._actions);
  };

  /**
   * Checks wether the given action is registered
   *
   * @param {string} action
   *
   * @return {boolean}
   */
  EditorActions.prototype.isRegistered = function(action) {
    return !!this._actions[action];
  };


  function error(action, message) {
    return new Error(action + ' ' + message);
  }

  var EditorActionsModule$1 = {
    __init__: [ 'editorActions' ],
    editorActions: [ 'type', EditorActions ]
  };

  /**
   * Registers and executes BPMN specific editor actions.
   *
   * @param {Injector} injector
   */
  function BpmnEditorActions(injector) {
    injector.invoke(EditorActions, this);
  }

  e(BpmnEditorActions, EditorActions);

  BpmnEditorActions.$inject = [
    'injector'
  ];

  /**
   * Register default actions.
   *
   * @param {Injector} injector
   */
  BpmnEditorActions.prototype._registerDefaultActions = function(injector) {

    // (0) invoke super method

    EditorActions.prototype._registerDefaultActions.call(this, injector);

    // (1) retrieve optional components to integrate with

    var canvas = injector.get('canvas', false);
    var elementRegistry = injector.get('elementRegistry', false);
    var selection = injector.get('selection', false);
    var spaceTool = injector.get('spaceTool', false);
    var lassoTool = injector.get('lassoTool', false);
    var handTool = injector.get('handTool', false);
    var globalConnect = injector.get('globalConnect', false);
    var distributeElements = injector.get('distributeElements', false);
    var alignElements = injector.get('alignElements', false);
    var directEditing = injector.get('directEditing', false);
    var searchPad = injector.get('searchPad', false);
    var modeling = injector.get('modeling', false);

    // (2) check components and register actions

    if (canvas && elementRegistry && selection) {
      this._registerAction('selectElements', function() {

        // select all elements except for the invisible
        // root element
        var rootElement = canvas.getRootElement();

        var elements = elementRegistry.filter(function(element) {
          return element !== rootElement;
        });

        selection.select(elements);

        return elements;
      });
    }

    if (spaceTool) {
      this._registerAction('spaceTool', function() {
        spaceTool.toggle();
      });
    }

    if (lassoTool) {
      this._registerAction('lassoTool', function() {
        lassoTool.toggle();
      });
    }

    if (handTool) {
      this._registerAction('handTool', function() {
        handTool.toggle();
      });
    }

    if (globalConnect) {
      this._registerAction('globalConnectTool', function() {
        globalConnect.toggle();
      });
    }

    if (selection && distributeElements) {
      this._registerAction('distributeElements', function(opts) {
        var currentSelection = selection.get(),
            type = opts.type;

        if (currentSelection.length) {
          distributeElements.trigger(currentSelection, type);
        }
      });
    }

    if (selection && alignElements) {
      this._registerAction('alignElements', function(opts) {
        var currentSelection = selection.get(),
            aligneableElements = [],
            type = opts.type;

        if (currentSelection.length) {
          aligneableElements = filter(currentSelection, function(element) {
            return !is$1(element, 'bpmn:Lane');
          });

          alignElements.trigger(aligneableElements, type);
        }
      });
    }

    if (selection && modeling) {
      this._registerAction('setColor', function(opts) {
        var currentSelection = selection.get();

        if (currentSelection.length) {
          modeling.setColor(currentSelection, opts);
        }
      });
    }

    if (selection && directEditing) {
      this._registerAction('directEditing', function() {
        var currentSelection = selection.get();

        if (currentSelection.length) {
          directEditing.activate(currentSelection[0]);
        }
      });
    }

    if (searchPad) {
      this._registerAction('find', function() {
        searchPad.toggle();
      });
    }

    if (canvas && modeling) {
      this._registerAction('moveToOrigin', function() {
        var rootElement = canvas.getRootElement(),
            boundingBox,
            elements;

        if (is$1(rootElement, 'bpmn:Collaboration')) {
          elements = elementRegistry.filter(function(element) {
            return is$1(element.parent, 'bpmn:Collaboration');
          });
        } else {
          elements = elementRegistry.filter(function(element) {
            return element !== rootElement && !is$1(element.parent, 'bpmn:SubProcess');
          });
        }

        boundingBox = getBBox(elements);

        modeling.moveElements(
          elements,
          { x: -boundingBox.x, y: -boundingBox.y },
          rootElement
        );
      });
    }

  };

  var EditorActionsModule = {
    __depends__: [
      EditorActionsModule$1
    ],
    editorActions: [ 'type', BpmnEditorActions ]
  };

  function BpmnGridSnapping(eventBus) {
    eventBus.on([
      'create.init',
      'shape.move.init'
    ], function(event) {
      var context = event.context,
          shape = event.shape;

      if (isAny(shape, [
        'bpmn:Participant',
        'bpmn:SubProcess',
        'bpmn:TextAnnotation'
      ])) {
        if (!context.gridSnappingContext) {
          context.gridSnappingContext = {};
        }

        context.gridSnappingContext.snapLocation = 'top-left';
      }
    });
  }

  BpmnGridSnapping.$inject = [ 'eventBus' ];

  var SPACING = 10;

  function quantize(value, quantum, fn) {
    if (!fn) {
      fn = 'round';
    }

    return Math[ fn ](value / quantum) * quantum;
  }

  var LOWER_PRIORITY$1 = 1200;
  var LOW_PRIORITY$f = 800;

  /**
   * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
   * and connection segments.
   */
  function GridSnapping(elementRegistry, eventBus, config) {

    var active = !config || config.active !== false;

    this._eventBus = eventBus;

    var self = this;

    eventBus.on('diagram.init', LOW_PRIORITY$f, function() {
      self.setActive(active);
    });

    eventBus.on([
      'create.move',
      'create.end',
      'bendpoint.move.move',
      'bendpoint.move.end',
      'connect.move',
      'connect.end',
      'connectionSegment.move.move',
      'connectionSegment.move.end',
      'resize.move',
      'resize.end',
      'shape.move.move',
      'shape.move.end'
    ], LOWER_PRIORITY$1, function(event) {
      var originalEvent = event.originalEvent;

      if (!self.active || (originalEvent && isCmd(originalEvent))) {
        return;
      }

      var context = event.context,
          gridSnappingContext = context.gridSnappingContext;

      if (!gridSnappingContext) {
        gridSnappingContext = context.gridSnappingContext = {};
      }

      [ 'x', 'y' ].forEach(function(axis) {
        var options = {};

        // allow snapping with offset
        var snapOffset = getSnapOffset(event, axis, elementRegistry);

        if (snapOffset) {
          options.offset = snapOffset;
        }

        // allow snapping with min and max
        var snapConstraints = getSnapConstraints(event, axis);

        if (snapConstraints) {
          assign(options, snapConstraints);
        }

        if (!isSnapped(event, axis)) {
          self.snapEvent(event, axis, options);
        }
      });
    });
  }

  /**
   * Snap an events x or y with optional min, max and offset.
   *
   * @param {Object} event
   * @param {string} axis
   * @param {number} [options.min]
   * @param {number} [options.max]
   * @param {number} [options.offset]
   */
  GridSnapping.prototype.snapEvent = function(event, axis, options) {
    var snappedValue = this.snapValue(event[ axis ], options);

    setSnapped(event, axis, snappedValue);
  };

  /**
   * Expose grid spacing for third parties (i.e. extensions).
   *
   * @return {number} spacing of grid dots
   */
  GridSnapping.prototype.getGridSpacing = function() {
    return SPACING;
  };

  /**
   * Snap value with optional min, max and offset.
   *
   * @param {number} value
   * @param {Object} options
   * @param {number} [options.min]
   * @param {number} [options.max]
   * @param {number} [options.offset]
   */
  GridSnapping.prototype.snapValue = function(value, options) {
    var offset = 0;

    if (options && options.offset) {
      offset = options.offset;
    }

    value += offset;

    value = quantize(value, SPACING);

    var min, max;

    if (options && options.min) {
      min = options.min;

      if (isNumber(min)) {
        min = quantize(min + offset, SPACING, 'ceil');

        value = Math.max(value, min);
      }
    }

    if (options && options.max) {
      max = options.max;

      if (isNumber(max)) {
        max = quantize(max + offset, SPACING, 'floor');

        value = Math.min(value, max);
      }
    }

    value -= offset;

    return value;
  };

  GridSnapping.prototype.isActive = function() {
    return this.active;
  };

  GridSnapping.prototype.setActive = function(active) {
    this.active = active;

    this._eventBus.fire('gridSnapping.toggle', { active: active });
  };

  GridSnapping.prototype.toggleActive = function() {
    this.setActive(!this.active);
  };

  GridSnapping.$inject = [
    'elementRegistry',
    'eventBus',
    'config.gridSnapping'
  ];

  // helpers //////////

  /**
   * Get minimum and maximum snap constraints.
   * Constraints are cached.
   *
   * @param {Object} event
   * @param {Object} event.context
   * @param {string} axis
   *
   * @returns {boolean|Object}
   */
  function getSnapConstraints(event, axis) {
    var context = event.context,
        createConstraints = context.createConstraints,
        resizeConstraints = context.resizeConstraints || {},
        gridSnappingContext = context.gridSnappingContext,
        snapConstraints = gridSnappingContext.snapConstraints;

    // cache snap constraints
    if (snapConstraints && snapConstraints[ axis ]) {
      return snapConstraints[ axis ];
    }

    if (!snapConstraints) {
      snapConstraints = gridSnappingContext.snapConstraints = {};
    }

    if (!snapConstraints[ axis ]) {
      snapConstraints[ axis ] = {};
    }

    var direction = context.direction;

    // create
    if (createConstraints) {
      if (isHorizontal$3(axis)) {
        snapConstraints.x.min = createConstraints.left;
        snapConstraints.x.max = createConstraints.right;
      } else {
        snapConstraints.y.min = createConstraints.top;
        snapConstraints.y.max = createConstraints.bottom;
      }
    }

    // resize
    var minResizeConstraints = resizeConstraints.min,
        maxResizeConstraints = resizeConstraints.max;

    if (minResizeConstraints) {
      if (isHorizontal$3(axis)) {

        if (isWest(direction)) {
          snapConstraints.x.max = minResizeConstraints.left;
        } else {
          snapConstraints.x.min = minResizeConstraints.right;
        }

      } else {

        if (isNorth(direction)) {
          snapConstraints.y.max = minResizeConstraints.top;
        } else {
          snapConstraints.y.min = minResizeConstraints.bottom;
        }

      }
    }

    if (maxResizeConstraints) {
      if (isHorizontal$3(axis)) {

        if (isWest(direction)) {
          snapConstraints.x.min = maxResizeConstraints.left;
        } else {
          snapConstraints.x.max = maxResizeConstraints.right;
        }

      } else {

        if (isNorth(direction)) {
          snapConstraints.y.min = maxResizeConstraints.top;
        } else {
          snapConstraints.y.max = maxResizeConstraints.bottom;
        }

      }
    }

    return snapConstraints[ axis ];
  }

  /**
   * Get snap offset.
   * Offset is cached.
   *
   * @param {Object} event
   * @param {string} axis
   * @param {ElementRegistry} elementRegistry
   *
   * @returns {number}
   */
  function getSnapOffset(event, axis, elementRegistry) {
    var context = event.context,
        shape = event.shape,
        gridSnappingContext = context.gridSnappingContext,
        snapLocation = gridSnappingContext.snapLocation,
        snapOffset = gridSnappingContext.snapOffset;

    // cache snap offset
    if (snapOffset && isNumber(snapOffset[ axis ])) {
      return snapOffset[ axis ];
    }

    if (!snapOffset) {
      snapOffset = gridSnappingContext.snapOffset = {};
    }

    if (!isNumber(snapOffset[ axis ])) {
      snapOffset[ axis ] = 0;
    }

    if (!shape) {
      return snapOffset[ axis ];
    }

    if (!elementRegistry.get(shape.id)) {

      if (isHorizontal$3(axis)) {
        snapOffset[ axis ] += shape[ axis ] + shape.width / 2;
      } else {
        snapOffset[ axis ] += shape[ axis ] + shape.height / 2;
      }
    }

    if (!snapLocation) {
      return snapOffset[ axis ];
    }

    if (axis === 'x') {
      if (/left/.test(snapLocation)) {
        snapOffset[ axis ] -= shape.width / 2;
      } else if (/right/.test(snapLocation)) {
        snapOffset[ axis ] += shape.width / 2;
      }
    } else {
      if (/top/.test(snapLocation)) {
        snapOffset[ axis ] -= shape.height / 2;
      } else if (/bottom/.test(snapLocation)) {
        snapOffset[ axis ] += shape.height / 2;
      }
    }

    return snapOffset[ axis ];
  }

  function isHorizontal$3(axis) {
    return axis === 'x';
  }

  function isNorth(direction) {
    return direction.indexOf('n') !== -1;
  }

  function isWest(direction) {
    return direction.indexOf('w') !== -1;
  }

  /**
   * Integrates resizing with grid snapping.
   */
  function ResizeBehavior$1(eventBus, gridSnapping) {
    CommandInterceptor.call(this, eventBus);

    this._gridSnapping = gridSnapping;

    var self = this;

    this.preExecute('shape.resize', function(event) {
      var context = event.context,
          hints = context.hints || {},
          autoResize = hints.autoResize;

      if (!autoResize) {
        return;
      }

      var shape = context.shape,
          newBounds = context.newBounds;

      if (isString(autoResize)) {
        context.newBounds = self.snapComplex(newBounds, autoResize);
      } else {
        context.newBounds = self.snapSimple(shape, newBounds);
      }
    });
  }

  ResizeBehavior$1.$inject = [
    'eventBus',
    'gridSnapping',
    'modeling'
  ];

  e(ResizeBehavior$1, CommandInterceptor);

  /**
   * Snap width and height in relation to center.
   *
   * @param {djs.model.shape} shape
   * @param {Bounds} newBounds
   *
   * @returns {Bounds} Snapped bounds.
   */
  ResizeBehavior$1.prototype.snapSimple = function(shape, newBounds) {
    var gridSnapping = this._gridSnapping;

    newBounds.width = gridSnapping.snapValue(newBounds.width, {
      min: newBounds.width
    });

    newBounds.height = gridSnapping.snapValue(newBounds.height, {
      min: newBounds.height
    });

    newBounds.x = shape.x + (shape.width / 2) - (newBounds.width / 2);
    newBounds.y = shape.y + (shape.height / 2) - (newBounds.height / 2);

    return newBounds;
  };

  /**
   * Snap x, y, width and height according to given directions.
   *
   * @param {Bounds} newBounds
   * @param {string} directions - Directions as {n|w|s|e}.
   *
   * @returns {Bounds} Snapped bounds.
   */
  ResizeBehavior$1.prototype.snapComplex = function(newBounds, directions) {
    if (/w|e/.test(directions)) {
      newBounds = this.snapHorizontally(newBounds, directions);
    }

    if (/n|s/.test(directions)) {
      newBounds = this.snapVertically(newBounds, directions);
    }

    return newBounds;
  };

  /**
   * Snap in one or both directions horizontally.
   *
   * @param {Bounds} newBounds
   * @param {string} directions - Directions as {n|w|s|e}.
   *
   * @returns {Bounds} Snapped bounds.
   */
  ResizeBehavior$1.prototype.snapHorizontally = function(newBounds, directions) {
    var gridSnapping = this._gridSnapping,
        west = /w/.test(directions),
        east = /e/.test(directions);

    var snappedNewBounds = {};

    snappedNewBounds.width = gridSnapping.snapValue(newBounds.width, {
      min: newBounds.width
    });

    if (east) {

      // handle <we>
      if (west) {
        snappedNewBounds.x = gridSnapping.snapValue(newBounds.x, {
          max: newBounds.x
        });

        snappedNewBounds.width += gridSnapping.snapValue(newBounds.x - snappedNewBounds.x, {
          min: newBounds.x - snappedNewBounds.x
        });
      }

      // handle <e>
      else {
        newBounds.x = newBounds.x + newBounds.width - snappedNewBounds.width;
      }
    }

    // assign snapped x and width
    assign(newBounds, snappedNewBounds);

    return newBounds;
  };

  /**
   * Snap in one or both directions vertically.
   *
   * @param {Bounds} newBounds
   * @param {string} directions - Directions as {n|w|s|e}.
   *
   * @returns {Bounds} Snapped bounds.
   */
  ResizeBehavior$1.prototype.snapVertically = function(newBounds, directions) {
    var gridSnapping = this._gridSnapping,
        north = /n/.test(directions),
        south = /s/.test(directions);

    var snappedNewBounds = {};

    snappedNewBounds.height = gridSnapping.snapValue(newBounds.height, {
      min: newBounds.height
    });

    if (north) {

      // handle <ns>
      if (south) {
        snappedNewBounds.y = gridSnapping.snapValue(newBounds.y, {
          max: newBounds.y
        });

        snappedNewBounds.height += gridSnapping.snapValue(newBounds.y - snappedNewBounds.y, {
          min: newBounds.y - snappedNewBounds.y
        });
      }

      // handle <n>
      else {
        newBounds.y = newBounds.y + newBounds.height - snappedNewBounds.height;
      }
    }

    // assign snapped y and height
    assign(newBounds, snappedNewBounds);

    return newBounds;
  };

  var HIGH_PRIORITY$f = 2000;

  /**
   * Integrates space tool with grid snapping.
   */
  function SpaceToolBehavior$1(eventBus, gridSnapping) {
    eventBus.on([
      'spaceTool.move',
      'spaceTool.end'
    ], HIGH_PRIORITY$f, function(event) {
      var context = event.context;

      if (!context.initialized) {
        return;
      }

      var axis = context.axis;

      var snapped;

      if (axis === 'x') {

        // snap delta x to multiple of 10
        snapped = gridSnapping.snapValue(event.dx);

        event.x = event.x + snapped - event.dx;
        event.dx = snapped;
      } else {

        // snap delta y to multiple of 10
        snapped = gridSnapping.snapValue(event.dy);

        event.y = event.y + snapped - event.dy;
        event.dy = snapped;
      }
    });
  }

  SpaceToolBehavior$1.$inject = [
    'eventBus',
    'gridSnapping'
  ];

  var GridSnappingBehaviorModule$1 = {
    __init__: [
      'gridSnappingResizeBehavior',
      'gridSnappingSpaceToolBehavior'
    ],
    gridSnappingResizeBehavior: [ 'type', ResizeBehavior$1 ],
    gridSnappingSpaceToolBehavior: [ 'type', SpaceToolBehavior$1 ]
  };

  var GridSnappingModule$1 = {
    __depends__: [ GridSnappingBehaviorModule$1 ],
    __init__: [ 'gridSnapping' ],
    gridSnapping: [ 'type', GridSnapping ]
  };

  var HIGH_PRIORITY$e = 2000;


  function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping) {
    eventBus.on('autoPlace', HIGH_PRIORITY$e, function(context) {
      var source = context.source,
          sourceMid = getMid(source),
          shape = context.shape;

      var position = getNewShapePosition(source, shape);

      [ 'x', 'y' ].forEach(function(axis) {
        var options = {};

        // do not snap if x/y equal
        if (position[ axis ] === sourceMid[ axis ]) {
          return;
        }

        if (position[ axis ] > sourceMid[ axis ]) {
          options.min = position[ axis ];
        } else {
          options.max = position[ axis ];
        }

        if (is$1(shape, 'bpmn:TextAnnotation')) {

          if (isHorizontal$2(axis)) {
            options.offset = -shape.width / 2;
          } else {
            options.offset = -shape.height / 2;
          }

        }

        position[ axis ] = gridSnapping.snapValue(position[ axis ], options);

      });

      // must be returned to be considered by auto place
      return position;
    });
  }

  GridSnappingAutoPlaceBehavior.$inject = [
    'eventBus',
    'gridSnapping'
  ];

  // helpers //////////

  function isHorizontal$2(axis) {
    return axis === 'x';
  }

  var HIGHER_PRIORITY$4 = 1750;


  function GridSnappingParticipantBehavior(canvas, eventBus, gridSnapping) {
    eventBus.on([
      'create.start',
      'shape.move.start'
    ], HIGHER_PRIORITY$4, function(event) {
      var context = event.context,
          shape = context.shape,
          rootElement = canvas.getRootElement();

      if (!is$1(shape, 'bpmn:Participant') ||
        !is$1(rootElement, 'bpmn:Process') ||
        !rootElement.children.length) {
        return;
      }

      var createConstraints = context.createConstraints;

      if (!createConstraints) {
        return;
      }

      shape.width = gridSnapping.snapValue(shape.width, { min: shape.width });
      shape.height = gridSnapping.snapValue(shape.height, { min: shape.height });
    });
  }

  GridSnappingParticipantBehavior.$inject = [
    'canvas',
    'eventBus',
    'gridSnapping'
  ];

  var HIGH_PRIORITY$d = 3000;


  /**
   * Snaps connections with Manhattan layout.
   */
  function GridSnappingLayoutConnectionBehavior(eventBus, gridSnapping, modeling) {
    CommandInterceptor.call(this, eventBus);

    this._gridSnapping = gridSnapping;

    var self = this;

    this.postExecuted([
      'connection.create',
      'connection.layout'
    ], HIGH_PRIORITY$d, function(event) {
      var context = event.context,
          connection = context.connection,
          hints = context.hints || {},
          waypoints = connection.waypoints;

      if (hints.connectionStart || hints.connectionEnd || hints.createElementsBehavior === false) {
        return;
      }

      if (!hasMiddleSegments(waypoints)) {
        return;
      }

      modeling.updateWaypoints(connection, self.snapMiddleSegments(waypoints));
    });
  }

  GridSnappingLayoutConnectionBehavior.$inject = [
    'eventBus',
    'gridSnapping',
    'modeling'
  ];

  e(GridSnappingLayoutConnectionBehavior, CommandInterceptor);

  /**
   * Snap middle segments of a given connection.
   *
   * @param {Array<Point>} waypoints
   *
   * @returns {Array<Point>}
   */
  GridSnappingLayoutConnectionBehavior.prototype.snapMiddleSegments = function(waypoints) {
    var gridSnapping = this._gridSnapping,
        snapped;

    waypoints = waypoints.slice();

    for (var i = 1; i < waypoints.length - 2; i++) {

      snapped = snapSegment(gridSnapping, waypoints[i], waypoints[i + 1]);

      waypoints[i] = snapped[0];
      waypoints[i + 1] = snapped[1];
    }

    return waypoints;
  };


  // helpers //////////

  /**
   * Check whether a connection has a middle segments.
   *
   * @param {Array} waypoints
   *
   * @returns {boolean}
   */
  function hasMiddleSegments(waypoints) {
    return waypoints.length > 3;
  }

  /**
   * Check whether an alignment is horizontal.
   *
   * @param {string} aligned
   *
   * @returns {boolean}
   */
  function horizontallyAligned(aligned) {
    return aligned === 'h';
  }

  /**
   * Check whether an alignment is vertical.
   *
   * @param {string} aligned
   *
   * @returns {boolean}
   */
  function verticallyAligned(aligned) {
    return aligned === 'v';
  }

  /**
   * Get middle segments from a given connection.
   *
   * @param {Array} waypoints
   *
   * @returns {Array}
   */
  function snapSegment(gridSnapping, segmentStart, segmentEnd) {

    var aligned = pointsAligned(segmentStart, segmentEnd);

    var snapped = {};

    if (horizontallyAligned(aligned)) {

      // snap horizontally
      snapped.y = gridSnapping.snapValue(segmentStart.y);
    }

    if (verticallyAligned(aligned)) {

      // snap vertically
      snapped.x = gridSnapping.snapValue(segmentStart.x);
    }

    if ('x' in snapped || 'y' in snapped) {
      segmentStart = assign({}, segmentStart, snapped);
      segmentEnd = assign({}, segmentEnd, snapped);
    }

    return [ segmentStart, segmentEnd ];
  }

  var GridSnappingBehaviorModule = {
    __init__: [
      'gridSnappingAutoPlaceBehavior',
      'gridSnappingParticipantBehavior',
      'gridSnappingLayoutConnectionBehavior',
    ],
    gridSnappingAutoPlaceBehavior: [ 'type', GridSnappingAutoPlaceBehavior ],
    gridSnappingParticipantBehavior: [ 'type', GridSnappingParticipantBehavior ],
    gridSnappingLayoutConnectionBehavior: [ 'type', GridSnappingLayoutConnectionBehavior ]
  };

  var GridSnappingModule = {
    __depends__: [
      GridSnappingModule$1,
      GridSnappingBehaviorModule
    ],
    __init__: [ 'bpmnGridSnapping' ],
    bpmnGridSnapping: [ 'type', BpmnGridSnapping ]
  };

  var LABEL_WIDTH = 30,
      LABEL_HEIGHT = 30;


  /**
   * BPMN-specific hit zones and interaction fixes.
   *
   * @param {EventBus} eventBus
   * @param {InteractionEvents} interactionEvents
   */
  function BpmnInteractionEvents(eventBus, interactionEvents) {

    this._interactionEvents = interactionEvents;

    var self = this;

    eventBus.on([
      'interactionEvents.createHit',
      'interactionEvents.updateHit'
    ], function(context) {
      var element = context.element,
          gfx = context.gfx;

      if (is$1(element, 'bpmn:Lane')) {
        return self.createParticipantHit(element, gfx);
      } else

      if (is$1(element, 'bpmn:Participant')) {
        if (isExpanded(element)) {
          return self.createParticipantHit(element, gfx);
        } else {
          return self.createDefaultHit(element, gfx);
        }
      } else

      if (is$1(element, 'bpmn:SubProcess')) {
        if (isExpanded(element)) {
          return self.createSubProcessHit(element, gfx);
        } else {
          return self.createDefaultHit(element, gfx);
        }
      }
    });

  }

  BpmnInteractionEvents.$inject = [
    'eventBus',
    'interactionEvents'
  ];


  BpmnInteractionEvents.prototype.createDefaultHit = function(element, gfx) {
    this._interactionEvents.removeHits(gfx);

    this._interactionEvents.createDefaultHit(element, gfx);

    // indicate that we created a hit
    return true;
  };

  BpmnInteractionEvents.prototype.createParticipantHit = function(element, gfx) {

    // remove existing hits
    this._interactionEvents.removeHits(gfx);

    // add body hit
    this._interactionEvents.createBoxHit(gfx, 'no-move', {
      width: element.width,
      height: element.height
    });

    // add outline hit
    this._interactionEvents.createBoxHit(gfx, 'click-stroke', {
      width: element.width,
      height: element.height
    });

    // add label hit
    this._interactionEvents.createBoxHit(gfx, 'all', {
      width: LABEL_WIDTH,
      height: element.height
    });

    // indicate that we created a hit
    return true;
  };

  BpmnInteractionEvents.prototype.createSubProcessHit = function(element, gfx) {

    // remove existing hits
    this._interactionEvents.removeHits(gfx);

    // add body hit
    this._interactionEvents.createBoxHit(gfx, 'no-move', {
      width: element.width,
      height: element.height
    });

    // add outline hit
    this._interactionEvents.createBoxHit(gfx, 'click-stroke', {
      width: element.width,
      height: element.height
    });

    // add label hit
    this._interactionEvents.createBoxHit(gfx, 'all', {
      width: element.width,
      height: LABEL_HEIGHT
    });

    // indicate that we created a hit
    return true;
  };

  var InteractionEventsModule = {
    __init__: [ 'bpmnInteractionEvents' ],
    bpmnInteractionEvents: [ 'type', BpmnInteractionEvents ]
  };

  /**
   * BPMN 2.0 specific keyboard bindings.
   *
   * @param {Injector} injector
   */
  function BpmnKeyboardBindings(injector) {
    injector.invoke(KeyboardBindings, this);
  }

  e(BpmnKeyboardBindings, KeyboardBindings);

  BpmnKeyboardBindings.$inject = [
    'injector'
  ];


  /**
   * Register available keyboard bindings.
   *
   * @param {Keyboard} keyboard
   * @param {EditorActions} editorActions
   */
  BpmnKeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {

    // inherit default bindings
    KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);

    /**
     * Add keyboard binding if respective editor action
     * is registered.
     *
     * @param {string} action name
     * @param {Function} fn that implements the key binding
     */
    function addListener(action, fn) {

      if (editorActions.isRegistered(action)) {
        keyboard.addListener(fn);
      }
    }

    // select all elements
    // CTRL + A
    addListener('selectElements', function(context) {

      var event = context.keyEvent;

      if (keyboard.isKey([ 'a', 'A' ], event) && keyboard.isCmd(event)) {
        editorActions.trigger('selectElements');

        return true;
      }
    });

    // search labels
    // CTRL + F
    addListener('find', function(context) {

      var event = context.keyEvent;

      if (keyboard.isKey([ 'f', 'F' ], event) && keyboard.isCmd(event)) {
        editorActions.trigger('find');

        return true;
      }
    });

    // activate space tool
    // S
    addListener('spaceTool', function(context) {

      var event = context.keyEvent;

      if (keyboard.hasModifier(event)) {
        return;
      }

      if (keyboard.isKey([ 's', 'S' ], event)) {
        editorActions.trigger('spaceTool');

        return true;
      }
    });

    // activate lasso tool
    // L
    addListener('lassoTool', function(context) {

      var event = context.keyEvent;

      if (keyboard.hasModifier(event)) {
        return;
      }

      if (keyboard.isKey([ 'l', 'L' ], event)) {
        editorActions.trigger('lassoTool');

        return true;
      }
    });

    // activate hand tool
    // H
    addListener('handTool', function(context) {

      var event = context.keyEvent;

      if (keyboard.hasModifier(event)) {
        return;
      }

      if (keyboard.isKey([ 'h', 'H' ], event)) {
        editorActions.trigger('handTool');

        return true;
      }
    });

    // activate global connect tool
    // C
    addListener('globalConnectTool', function(context) {

      var event = context.keyEvent;

      if (keyboard.hasModifier(event)) {
        return;
      }

      if (keyboard.isKey([ 'c', 'C' ], event)) {
        editorActions.trigger('globalConnectTool');

        return true;
      }
    });

    // activate direct editing
    // E
    addListener('directEditing', function(context) {

      var event = context.keyEvent;

      if (keyboard.hasModifier(event)) {
        return;
      }

      if (keyboard.isKey([ 'e', 'E' ], event)) {
        editorActions.trigger('directEditing');

        return true;
      }
    });

  };

  var KeyboardModule = {
    __depends__: [
      KeyboardModule$1
    ],
    __init__: [ 'keyboardBindings' ],
    keyboardBindings: [ 'type', BpmnKeyboardBindings ]
  };

  var DEFAULT_CONFIG = {
    moveSpeed: 1,
    moveSpeedAccelerated: 10
  };

  var HIGHER_PRIORITY$3 = 1500;

  var LEFT = 'left';
  var UP = 'up';
  var RIGHT = 'right';
  var DOWN = 'down';

  var KEY_TO_DIRECTION = {
    ArrowLeft: LEFT,
    Left: LEFT,
    ArrowUp: UP,
    Up: UP,
    ArrowRight: RIGHT,
    Right: RIGHT,
    ArrowDown: DOWN,
    Down: DOWN
  };

  var DIRECTIONS_DELTA = {
    left: function(speed) {
      return {
        x: -speed,
        y: 0
      };
    },
    up: function(speed) {
      return {
        x: 0,
        y: -speed
      };
    },
    right: function(speed) {
      return {
        x: speed,
        y: 0
      };
    },
    down: function(speed) {
      return {
        x: 0,
        y: speed
      };
    }
  };


  /**
   * Enables to move selection with keyboard arrows.
   * Use with Shift for modified speed (default=1, with Shift=10).
   * Pressed Cmd/Ctrl turns the feature off.
   *
   * @param {Object} config
   * @param {number} [config.moveSpeed=1]
   * @param {number} [config.moveSpeedAccelerated=10]
   * @param {Keyboard} keyboard
   * @param {Modeling} modeling
   * @param {Selection} selection
   */
  function KeyboardMoveSelection(
      config,
      keyboard,
      modeling,
      rules,
      selection
  ) {

    var self = this;

    this._config = assign({}, DEFAULT_CONFIG, config || {});

    keyboard.addListener(HIGHER_PRIORITY$3, function(event) {

      var keyEvent = event.keyEvent;

      var direction = KEY_TO_DIRECTION[keyEvent.key];

      if (!direction) {
        return;
      }

      if (keyboard.isCmd(keyEvent)) {
        return;
      }

      var accelerated = keyboard.isShift(keyEvent);

      self.moveSelection(direction, accelerated);

      return true;
    });


    /**
     * Move selected elements in the given direction,
     * optionally specifying accelerated movement.
     *
     * @param {string} direction
     * @param {boolean} [accelerated=false]
     */
    this.moveSelection = function(direction, accelerated) {

      var selectedElements = selection.get();

      if (!selectedElements.length) {
        return;
      }

      var speed = this._config[
        accelerated ?
          'moveSpeedAccelerated' :
          'moveSpeed'
      ];

      var delta = DIRECTIONS_DELTA[direction](speed);

      var canMove = rules.allowed('elements.move', {
        shapes: selectedElements
      });

      if (canMove) {
        modeling.moveElements(selectedElements, delta);
      }
    };

  }

  KeyboardMoveSelection.$inject = [
    'config.keyboardMoveSelection',
    'keyboard',
    'modeling',
    'rules',
    'selection'
  ];

  var KeyboardMoveSelectionModule = {
    __depends__: [
      KeyboardModule$1,
      SelectionModule
    ],
    __init__: [
      'keyboardMoveSelection'
    ],
    keyboardMoveSelection: [ 'type', KeyboardMoveSelection ]
  };

  var DEFAULT_MIN_WIDTH = 10;


  /**
   * A component that provides resizing of shapes on the canvas.
   *
   * The following components are part of shape resize:
   *
   *  * adding resize handles,
   *  * creating a visual during resize
   *  * checking resize rules
   *  * committing a change once finished
   *
   *
   * ## Customizing
   *
   * It's possible to customize the resizing behaviour by intercepting 'resize.start'
   * and providing the following parameters through the 'context':
   *
   *   * minDimensions ({ width, height }): minimum shape dimensions
   *
   *   * childrenBoxPadding ({ left, top, bottom, right } || number):
   *     gap between the minimum bounding box and the container
   *
   * f.ex:
   *
   * ```javascript
   * eventBus.on('resize.start', 1500, function(event) {
   *   var context = event.context,
   *
   *  context.minDimensions = { width: 140, height: 120 };
   *
   *  // Passing general padding
   *  context.childrenBoxPadding = 30;
   *
   *  // Passing padding to a specific side
   *  context.childrenBoxPadding.left = 20;
   * });
   * ```
   */
  function Resize(eventBus, rules, modeling, dragging) {

    this._dragging = dragging;
    this._rules = rules;

    var self = this;


    /**
     * Handle resize move by specified delta.
     *
     * @param {Object} context
     * @param {Point} delta
     */
    function handleMove(context, delta) {

      var shape = context.shape,
          direction = context.direction,
          resizeConstraints = context.resizeConstraints,
          newBounds;

      context.delta = delta;

      newBounds = resizeBounds$1(shape, direction, delta);

      // ensure constraints during resize
      context.newBounds = ensureConstraints$1(newBounds, resizeConstraints);

      // update + cache executable state
      context.canExecute = self.canResize(context);
    }

    /**
     * Handle resize start.
     *
     * @param  {Object} context
     */
    function handleStart(context) {

      var resizeConstraints = context.resizeConstraints,

          // evaluate minBounds for backwards compatibility
          minBounds = context.minBounds;

      if (resizeConstraints !== undefined) {
        return;
      }

      if (minBounds === undefined) {
        minBounds = self.computeMinResizeBox(context);
      }

      context.resizeConstraints = {
        min: asTRBL(minBounds)
      };
    }

    /**
     * Handle resize end.
     *
     * @param  {Object} context
     */
    function handleEnd(context) {
      var shape = context.shape,
          canExecute = context.canExecute,
          newBounds = context.newBounds;

      if (canExecute) {

        // ensure we have actual pixel values for new bounds
        // (important when zoom level was > 1 during move)
        newBounds = roundBounds(newBounds);

        if (!boundsChanged(shape, newBounds)) {

          // no resize necessary
          return;
        }

        // perform the actual resize
        modeling.resizeShape(shape, newBounds);
      }
    }


    eventBus.on('resize.start', function(event) {
      handleStart(event.context);
    });

    eventBus.on('resize.move', function(event) {
      var delta = {
        x: event.dx,
        y: event.dy
      };

      handleMove(event.context, delta);
    });

    eventBus.on('resize.end', function(event) {
      handleEnd(event.context);
    });

  }


  Resize.prototype.canResize = function(context) {
    var rules = this._rules;

    var ctx = pick(context, [ 'newBounds', 'shape', 'delta', 'direction' ]);

    return rules.allowed('shape.resize', ctx);
  };

  /**
   * Activate a resize operation.
   *
   * You may specify additional contextual information and must specify a
   * resize direction during activation of the resize event.
   *
   * @param {MouseEvent} event
   * @param {djs.model.Shape} shape
   * @param {Object|string} contextOrDirection
   */
  Resize.prototype.activate = function(event, shape, contextOrDirection) {
    var dragging = this._dragging,
        context,
        direction;

    if (typeof contextOrDirection === 'string') {
      contextOrDirection = {
        direction: contextOrDirection
      };
    }

    context = assign({ shape: shape }, contextOrDirection);

    direction = context.direction;

    if (!direction) {
      throw new Error('must provide a direction (n|w|s|e|nw|se|ne|sw)');
    }

    dragging.init(event, getReferencePoint$1(shape, direction), 'resize', {
      autoActivate: true,
      cursor: getCursor(direction),
      data: {
        shape: shape,
        context: context
      }
    });
  };

  Resize.prototype.computeMinResizeBox = function(context) {
    var shape = context.shape,
        direction = context.direction,
        minDimensions,
        childrenBounds;

    minDimensions = context.minDimensions || {
      width: DEFAULT_MIN_WIDTH,
      height: DEFAULT_MIN_WIDTH
    };

    // get children bounds
    childrenBounds = computeChildrenBBox(shape, context.childrenBoxPadding);

    // get correct minimum bounds from given resize direction
    // basically ensures that the minBounds is max(childrenBounds, minDimensions)
    return getMinResizeBounds(direction, shape, minDimensions, childrenBounds);
  };


  Resize.$inject = [
    'eventBus',
    'rules',
    'modeling',
    'dragging'
  ];

  // helpers //////////

  function boundsChanged(shape, newBounds) {
    return shape.x !== newBounds.x ||
      shape.y !== newBounds.y ||
      shape.width !== newBounds.width ||
      shape.height !== newBounds.height;
  }

  function getReferencePoint$1(shape, direction) {
    var mid = getMid(shape),
        trbl = asTRBL(shape);

    var referencePoint = {
      x: mid.x,
      y: mid.y
    };

    if (direction.indexOf('n') !== -1) {
      referencePoint.y = trbl.top;
    } else if (direction.indexOf('s') !== -1) {
      referencePoint.y = trbl.bottom;
    }

    if (direction.indexOf('e') !== -1) {
      referencePoint.x = trbl.right;
    } else if (direction.indexOf('w') !== -1) {
      referencePoint.x = trbl.left;
    }

    return referencePoint;
  }

  function getCursor(direction) {
    var prefix = 'resize-';

    if (direction === 'n' || direction === 's') {
      return prefix + 'ns';
    } else if (direction === 'e' || direction === 'w') {
      return prefix + 'ew';
    } else if (direction === 'nw' || direction === 'se') {
      return prefix + 'nwse';
    } else {
      return prefix + 'nesw';
    }
  }

  var MARKER_RESIZING$1 = 'djs-resizing',
      MARKER_RESIZE_NOT_OK = 'resize-not-ok';

  var LOW_PRIORITY$e = 500;


  /**
   * Provides previews for resizing shapes when resizing.
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   * @param {PreviewSupport} previewSupport
   */
  function ResizePreview(eventBus, canvas, previewSupport) {

    /**
     * Update resizer frame.
     *
     * @param {Object} context
     */
    function updateFrame(context) {

      var shape = context.shape,
          bounds = context.newBounds,
          frame = context.frame;

      if (!frame) {
        frame = context.frame = previewSupport.addFrame(shape, canvas.getActiveLayer());

        canvas.addMarker(shape, MARKER_RESIZING$1);
      }

      if (bounds.width > 5) {
        attr(frame, { x: bounds.x, width: bounds.width });
      }

      if (bounds.height > 5) {
        attr(frame, { y: bounds.y, height: bounds.height });
      }

      if (context.canExecute) {
        classes(frame).remove(MARKER_RESIZE_NOT_OK);
      } else {
        classes(frame).add(MARKER_RESIZE_NOT_OK);
      }
    }

    /**
     * Remove resizer frame.
     *
     * @param {Object} context
     */
    function removeFrame(context) {
      var shape = context.shape,
          frame = context.frame;

      if (frame) {
        remove$1(context.frame);
      }

      canvas.removeMarker(shape, MARKER_RESIZING$1);
    }

    // add and update previews
    eventBus.on('resize.move', LOW_PRIORITY$e, function(event) {
      updateFrame(event.context);
    });

    // remove previews
    eventBus.on('resize.cleanup', function(event) {
      removeFrame(event.context);
    });

  }

  ResizePreview.$inject = [
    'eventBus',
    'canvas',
    'previewSupport'
  ];

  var HANDLE_OFFSET = -6,
      HANDLE_SIZE = 8,
      HANDLE_HIT_SIZE = 20;

  var CLS_RESIZER = 'djs-resizer';

  var directions = [ 'n', 'w', 's', 'e', 'nw', 'ne', 'se', 'sw' ];


  /**
   * This component is responsible for adding resize handles.
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   * @param {Selection} selection
   * @param {Resize} resize
   */
  function ResizeHandles(eventBus, canvas, selection, resize) {

    this._resize = resize;
    this._canvas = canvas;

    var self = this;

    eventBus.on('selection.changed', function(e) {
      var newSelection = e.newSelection;

      // remove old selection markers
      self.removeResizers();

      // add new selection markers ONLY if single selection
      if (newSelection.length === 1) {
        forEach$1(newSelection, bind(self.addResizer, self));
      }
    });

    eventBus.on('shape.changed', function(e) {
      var shape = e.element;

      if (selection.isSelected(shape)) {
        self.removeResizers();

        self.addResizer(shape);
      }
    });
  }


  ResizeHandles.prototype.makeDraggable = function(element, gfx, direction) {
    var resize = this._resize;

    function startResize(event) {

      // only trigger on left mouse button
      if (isPrimaryButton(event)) {
        resize.activate(event, element, direction);
      }
    }

    componentEvent.bind(gfx, 'mousedown', startResize);
    componentEvent.bind(gfx, 'touchstart', startResize);
  };


  ResizeHandles.prototype._createResizer = function(element, x, y, direction) {
    var resizersParent = this._getResizersParent();

    var offset = getHandleOffset(direction);

    var group = create$1('g');

    classes(group).add(CLS_RESIZER);
    classes(group).add(CLS_RESIZER + '-' + element.id);
    classes(group).add(CLS_RESIZER + '-' + direction);

    append(resizersParent, group);

    var visual = create$1('rect');

    attr(visual, {
      x: -HANDLE_SIZE / 2 + offset.x,
      y: -HANDLE_SIZE / 2 + offset.y,
      width: HANDLE_SIZE,
      height: HANDLE_SIZE
    });

    classes(visual).add(CLS_RESIZER + '-visual');

    append(group, visual);

    var hit = create$1('rect');

    attr(hit, {
      x: -HANDLE_HIT_SIZE / 2 + offset.x,
      y: -HANDLE_HIT_SIZE / 2 + offset.y,
      width: HANDLE_HIT_SIZE,
      height: HANDLE_HIT_SIZE
    });

    classes(hit).add(CLS_RESIZER + '-hit');

    append(group, hit);

    transform(group, x, y);

    return group;
  };

  ResizeHandles.prototype.createResizer = function(element, direction) {
    var point = getReferencePoint$1(element, direction);

    var resizer = this._createResizer(element, point.x, point.y, direction);

    this.makeDraggable(element, resizer, direction);
  };

  // resize handles implementation ///////////////////////////////

  /**
   * Add resizers for a given element.
   *
   * @param {djs.model.Element} element
   */
  ResizeHandles.prototype.addResizer = function(element) {
    var self = this;

    if (isConnection$a(element) || !this._resize.canResize({ shape: element })) {
      return;
    }

    forEach$1(directions, function(direction) {
      self.createResizer(element, direction);
    });
  };

  /**
   * Remove all resizers
   */
  ResizeHandles.prototype.removeResizers = function() {
    var resizersParent = this._getResizersParent();

    clear(resizersParent);
  };

  ResizeHandles.prototype._getResizersParent = function() {
    return this._canvas.getLayer('resizers');
  };

  ResizeHandles.$inject = [
    'eventBus',
    'canvas',
    'selection',
    'resize'
  ];

  // helpers //////////

  function getHandleOffset(direction) {
    var offset = {
      x: 0,
      y: 0
    };

    if (direction.indexOf('e') !== -1) {
      offset.x = -HANDLE_OFFSET;
    } else if (direction.indexOf('w') !== -1) {
      offset.x = HANDLE_OFFSET;
    }

    if (direction.indexOf('s') !== -1) {
      offset.y = -HANDLE_OFFSET;
    } else if (direction.indexOf('n') !== -1) {
      offset.y = HANDLE_OFFSET;
    }

    return offset;
  }

  function isConnection$a(element) {
    return !!element.waypoints;
  }

  var ResizeModule = {
    __depends__: [
      RulesModule$1,
      DraggingModule,
      PreviewSupportModule
    ],
    __init__: [
      'resize',
      'resizePreview',
      'resizeHandles'
    ],
    resize: [ 'type', Resize ],
    resizePreview: [ 'type', ResizePreview ],
    resizeHandles: [ 'type', ResizeHandles ]
  };

  var HIGH_PRIORITY$c = 2000;


  function LabelEditingProvider(
      eventBus, bpmnFactory, canvas, directEditing,
      modeling, resizeHandles, textRenderer) {

    this._bpmnFactory = bpmnFactory;
    this._canvas = canvas;
    this._modeling = modeling;
    this._textRenderer = textRenderer;

    directEditing.registerProvider(this);

    // listen to dblclick on non-root elements
    eventBus.on('element.dblclick', function(event) {
      activateDirectEdit(event.element, true);
    });

    // complete on followup canvas operation
    eventBus.on([
      'autoPlace.start',
      'canvas.viewbox.changing',
      'drag.init',
      'element.mousedown',
      'popupMenu.open',
      'root.set',
      'selection.changed'
    ], function(event) {

      if (directEditing.isActive()) {
        directEditing.complete();
      }
    });

    eventBus.on([
      'shape.remove',
      'connection.remove'
    ], HIGH_PRIORITY$c, function(event) {

      if (directEditing.isActive(event.element)) {
        directEditing.cancel();
      }
    });

    // cancel on command stack changes
    eventBus.on([ 'commandStack.changed' ], function(e) {
      if (directEditing.isActive()) {
        directEditing.cancel();
      }
    });


    eventBus.on('directEditing.activate', function(event) {
      resizeHandles.removeResizers();
    });

    eventBus.on('create.end', 500, function(event) {

      var context = event.context,
          element = context.shape,
          canExecute = event.context.canExecute,
          isTouch = event.isTouch;

      // TODO(nikku): we need to find a way to support the
      // direct editing on mobile devices; right now this will
      // break for desworkflowediting on mobile devices
      // as it breaks the user interaction workflow

      // TODO(nre): we should temporarily focus the edited element
      // here and release the focused viewport after the direct edit
      // operation is finished
      if (isTouch) {
        return;
      }

      if (!canExecute) {
        return;
      }

      if (context.hints && context.hints.createElementsBehavior === false) {
        return;
      }

      activateDirectEdit(element);
    });

    eventBus.on('autoPlace.end', 500, function(event) {
      activateDirectEdit(event.shape);
    });


    function activateDirectEdit(element, force) {
      if (force ||
          isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
          isCollapsedSubProcess(element)) {

        directEditing.activate(element);
      }
    }

  }

  LabelEditingProvider.$inject = [
    'eventBus',
    'bpmnFactory',
    'canvas',
    'directEditing',
    'modeling',
    'resizeHandles',
    'textRenderer'
  ];


  /**
   * Activate direct editing for activities and text annotations.
   *
   * @param  {djs.model.Base} element
   *
   * @return {Object} an object with properties bounds (position and size), text and options
   */
  LabelEditingProvider.prototype.activate = function(element) {

    // text
    var text = getLabel(element);

    if (text === undefined) {
      return;
    }

    var context = {
      text: text
    };

    // bounds
    var bounds = this.getEditingBBox(element);

    assign(context, bounds);

    var options = {};

    // tasks
    if (
      isAny(element, [
        'bpmn:Task',
        'bpmn:Participant',
        'bpmn:Lane',
        'bpmn:CallActivity'
      ]) ||
      isCollapsedSubProcess(element)
    ) {
      assign(options, {
        centerVertically: true
      });
    }

    // external labels
    if (isLabelExternal(element)) {
      assign(options, {
        autoResize: true
      });
    }

    // text annotations
    if (is$1(element, 'bpmn:TextAnnotation')) {
      assign(options, {
        resizable: true,
        autoResize: true
      });
    }

    assign(context, {
      options: options
    });

    return context;
  };


  /**
   * Get the editing bounding box based on the element's size and position
   *
   * @param  {djs.model.Base} element
   *
   * @return {Object} an object containing information about position
   *                  and size (fixed or minimum and/or maximum)
   */
  LabelEditingProvider.prototype.getEditingBBox = function(element) {
    var canvas = this._canvas;

    var target = element.label || element;

    var bbox = canvas.getAbsoluteBBox(target);

    var mid = {
      x: bbox.x + bbox.width / 2,
      y: bbox.y + bbox.height / 2
    };

    // default position
    var bounds = { x: bbox.x, y: bbox.y };

    var zoom = canvas.zoom();

    var defaultStyle = this._textRenderer.getDefaultStyle(),
        externalStyle = this._textRenderer.getExternalStyle();

    // take zoom into account
    var externalFontSize = externalStyle.fontSize * zoom,
        externalLineHeight = externalStyle.lineHeight,
        defaultFontSize = defaultStyle.fontSize * zoom,
        defaultLineHeight = defaultStyle.lineHeight;

    var style = {
      fontFamily: this._textRenderer.getDefaultStyle().fontFamily,
      fontWeight: this._textRenderer.getDefaultStyle().fontWeight
    };

    // adjust for expanded pools AND lanes
    if (is$1(element, 'bpmn:Lane') || isExpandedPool(element)) {

      assign(bounds, {
        width: bbox.height,
        height: 30 * zoom,
        x: bbox.x - bbox.height / 2 + (15 * zoom),
        y: mid.y - (30 * zoom) / 2
      });

      assign(style, {
        fontSize: defaultFontSize + 'px',
        lineHeight: defaultLineHeight,
        paddingTop: (7 * zoom) + 'px',
        paddingBottom: (7 * zoom) + 'px',
        paddingLeft: (5 * zoom) + 'px',
        paddingRight: (5 * zoom) + 'px',
        transform: 'rotate(-90deg)'
      });
    }


    // internal labels for tasks and collapsed call activities,
    // sub processes and participants
    if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity' ]) ||
        isCollapsedPool(element) ||
        isCollapsedSubProcess(element)) {

      assign(bounds, {
        width: bbox.width,
        height: bbox.height
      });

      assign(style, {
        fontSize: defaultFontSize + 'px',
        lineHeight: defaultLineHeight,
        paddingTop: (7 * zoom) + 'px',
        paddingBottom: (7 * zoom) + 'px',
        paddingLeft: (5 * zoom) + 'px',
        paddingRight: (5 * zoom) + 'px'
      });
    }


    // internal labels for expanded sub processes
    if (isExpandedSubProcess$1(element)) {
      assign(bounds, {
        width: bbox.width,
        x: bbox.x
      });

      assign(style, {
        fontSize: defaultFontSize + 'px',
        lineHeight: defaultLineHeight,
        paddingTop: (7 * zoom) + 'px',
        paddingBottom: (7 * zoom) + 'px',
        paddingLeft: (5 * zoom) + 'px',
        paddingRight: (5 * zoom) + 'px'
      });
    }

    var width = 90 * zoom,
        paddingTop = 7 * zoom,
        paddingBottom = 4 * zoom;

    // external labels for events, data elements, gateways, groups and connections
    if (target.labelTarget) {
      assign(bounds, {
        width: width,
        height: bbox.height + paddingTop + paddingBottom,
        x: mid.x - width / 2,
        y: bbox.y - paddingTop
      });

      assign(style, {
        fontSize: externalFontSize + 'px',
        lineHeight: externalLineHeight,
        paddingTop: paddingTop + 'px',
        paddingBottom: paddingBottom + 'px'
      });
    }

    // external label not yet created
    if (isLabelExternal(target)
        && !hasExternalLabel(target)
        && !isLabel$6(target)) {

      var externalLabelMid = getExternalLabelMid(element);

      var absoluteBBox = canvas.getAbsoluteBBox({
        x: externalLabelMid.x,
        y: externalLabelMid.y,
        width: 0,
        height: 0
      });

      var height = externalFontSize + paddingTop + paddingBottom;

      assign(bounds, {
        width: width,
        height: height,
        x: absoluteBBox.x - width / 2,
        y: absoluteBBox.y - height / 2
      });

      assign(style, {
        fontSize: externalFontSize + 'px',
        lineHeight: externalLineHeight,
        paddingTop: paddingTop + 'px',
        paddingBottom: paddingBottom + 'px'
      });
    }

    // text annotations
    if (is$1(element, 'bpmn:TextAnnotation')) {
      assign(bounds, {
        width: bbox.width,
        height: bbox.height,
        minWidth: 30 * zoom,
        minHeight: 10 * zoom
      });

      assign(style, {
        textAlign: 'left',
        paddingTop: (5 * zoom) + 'px',
        paddingBottom: (7 * zoom) + 'px',
        paddingLeft: (7 * zoom) + 'px',
        paddingRight: (5 * zoom) + 'px',
        fontSize: defaultFontSize + 'px',
        lineHeight: defaultLineHeight
      });
    }

    return { bounds: bounds, style: style };
  };


  LabelEditingProvider.prototype.update = function(
      element, newLabel,
      activeContextText, bounds) {

    var newBounds,
        bbox;

    if (is$1(element, 'bpmn:TextAnnotation')) {

      bbox = this._canvas.getAbsoluteBBox(element);

      newBounds = {
        x: element.x,
        y: element.y,
        width: element.width / bbox.width * bounds.width,
        height: element.height / bbox.height * bounds.height
      };
    }

    if (isEmptyText$1(newLabel)) {
      newLabel = null;
    }

    this._modeling.updateLabel(element, newLabel, newBounds);
  };



  // helpers //////////////////////

  function isCollapsedSubProcess(element) {
    return is$1(element, 'bpmn:SubProcess') && !isExpanded(element);
  }

  function isExpandedSubProcess$1(element) {
    return is$1(element, 'bpmn:SubProcess') && isExpanded(element);
  }

  function isCollapsedPool(element) {
    return is$1(element, 'bpmn:Participant') && !isExpanded(element);
  }

  function isExpandedPool(element) {
    return is$1(element, 'bpmn:Participant') && isExpanded(element);
  }

  function isEmptyText$1(label) {
    return !label || !label.trim();
  }

  var MARKER_HIDDEN = 'djs-element-hidden',
      MARKER_LABEL_HIDDEN = 'djs-label-hidden';


  function LabelEditingPreview(
      eventBus, canvas, elementRegistry,
      pathMap) {

    var self = this;

    var defaultLayer = canvas.getDefaultLayer();

    var element, absoluteElementBBox, gfx;

    eventBus.on('directEditing.activate', function(context) {
      var activeProvider = context.active;

      element = activeProvider.element.label || activeProvider.element;

      // text annotation
      if (is$1(element, 'bpmn:TextAnnotation')) {
        absoluteElementBBox = canvas.getAbsoluteBBox(element);

        gfx = create$1('g');

        var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: element.height,
          position: {
            mx: 0.0,
            my: 0.0
          }
        });

        var path = self.path = create$1('path');

        attr(path, {
          d: textPathData,
          strokeWidth: 2,
          stroke: getStrokeColor(element)
        });

        append(gfx, path);

        append(defaultLayer, gfx);

        translate$2(gfx, element.x, element.y);
      }

      if (is$1(element, 'bpmn:TextAnnotation') ||
          element.labelTarget) {
        canvas.addMarker(element, MARKER_HIDDEN);
      } else if (is$1(element, 'bpmn:Task') ||
                 is$1(element, 'bpmn:CallActivity') ||
                 is$1(element, 'bpmn:SubProcess') ||
                 is$1(element, 'bpmn:Participant')) {
        canvas.addMarker(element, MARKER_LABEL_HIDDEN);
      }
    });

    eventBus.on('directEditing.resize', function(context) {

      // text annotation
      if (is$1(element, 'bpmn:TextAnnotation')) {
        var height = context.height,
            dy = context.dy;

        var newElementHeight = Math.max(element.height / absoluteElementBBox.height * (height + dy), 0);

        var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
          xScaleFactor: 1,
          yScaleFactor: 1,
          containerWidth: element.width,
          containerHeight: newElementHeight,
          position: {
            mx: 0.0,
            my: 0.0
          }
        });

        attr(self.path, {
          d: textPathData
        });
      }
    });

    eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {
      var activeProvider = context.active;

      if (activeProvider) {
        canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);
        canvas.removeMarker(element, MARKER_LABEL_HIDDEN);
      }

      element = undefined;
      absoluteElementBBox = undefined;

      if (gfx) {
        remove$1(gfx);

        gfx = undefined;
      }
    });
  }

  LabelEditingPreview.$inject = [
    'eventBus',
    'canvas',
    'elementRegistry',
    'pathMap'
  ];


  // helpers ///////////////////

  function getStrokeColor(element, defaultColor) {
    var di = getDi(element);

    return di.get('stroke') || defaultColor || 'black';
  }

  var LabelEditingModule = {
    __depends__: [
      ChangeSupportModule,
      ResizeModule,
      DirectEditingModule
    ],
    __init__: [
      'labelEditingProvider',
      'labelEditingPreview'
    ],
    labelEditingProvider: [ 'type', LabelEditingProvider ],
    labelEditingPreview: [ 'type', LabelEditingPreview ]
  };

  var ALIGNMENTS = [
    'top',
    'bottom',
    'left',
    'right'
  ];

  var ELEMENT_LABEL_DISTANCE = 10;

  /**
   * A component that makes sure that external labels are added
   * together with respective elements and properly updated (DI wise)
   * during move.
   *
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   */
  function AdaptiveLabelPositioningBehavior(eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);

    this.postExecuted([
      'connection.create',
      'connection.layout',
      'connection.updateWaypoints'
    ], function(event) {
      var context = event.context,
          connection = context.connection,
          source = connection.source,
          target = connection.target,
          hints = context.hints || {};

      if (hints.createElementsBehavior !== false) {
        checkLabelAdjustment(source);
        checkLabelAdjustment(target);
      }
    });


    this.postExecuted([
      'label.create'
    ], function(event) {
      var context = event.context,
          shape = context.shape,
          hints = context.hints || {};

      if (hints.createElementsBehavior !== false) {
        checkLabelAdjustment(shape.labelTarget);
      }
    });


    this.postExecuted([
      'elements.create'
    ], function(event) {
      var context = event.context,
          elements = context.elements,
          hints = context.hints || {};

      if (hints.createElementsBehavior !== false) {
        elements.forEach(function(element) {
          checkLabelAdjustment(element);
        });
      }
    });

    function checkLabelAdjustment(element) {

      // skip non-existing labels
      if (!hasExternalLabel(element)) {
        return;
      }

      var optimalPosition = getOptimalPosition(element);

      // no optimal position found
      if (!optimalPosition) {
        return;
      }

      adjustLabelPosition(element, optimalPosition);
    }

    function adjustLabelPosition(element, orientation) {

      var elementMid = getMid(element),
          label = element.label,
          labelMid = getMid(label);

      // ignore labels that are being created
      if (!label.parent) {
        return;
      }

      var elementTrbl = asTRBL(element);

      var newLabelMid;

      switch (orientation) {
      case 'top':
        newLabelMid = {
          x: elementMid.x,
          y: elementTrbl.top - ELEMENT_LABEL_DISTANCE - label.height / 2
        };

        break;

      case 'left':

        newLabelMid = {
          x: elementTrbl.left - ELEMENT_LABEL_DISTANCE - label.width / 2,
          y: elementMid.y
        };

        break;

      case 'bottom':

        newLabelMid = {
          x: elementMid.x,
          y: elementTrbl.bottom + ELEMENT_LABEL_DISTANCE + label.height / 2
        };

        break;

      case 'right':

        newLabelMid = {
          x: elementTrbl.right + ELEMENT_LABEL_DISTANCE + label.width / 2,
          y: elementMid.y
        };

        break;
      }

      var delta$1 = delta(newLabelMid, labelMid);

      modeling.moveShape(label, delta$1);
    }

  }

  e(AdaptiveLabelPositioningBehavior, CommandInterceptor);

  AdaptiveLabelPositioningBehavior.$inject = [
    'eventBus',
    'modeling'
  ];


  // helpers //////////////////////

  /**
   * Return alignments which are taken by a boundary's host element
   *
   * @param {Shape} element
   *
   * @return {Array<string>}
   */
  function getTakenHostAlignments(element) {

    var hostElement = element.host,
        elementMid = getMid(element),
        hostOrientation = getOrientation(elementMid, hostElement);

    var freeAlignments;

    // check whether there is a multi-orientation, e.g. 'top-left'
    if (hostOrientation.indexOf('-') >= 0) {
      freeAlignments = hostOrientation.split('-');
    } else {
      freeAlignments = [ hostOrientation ];
    }

    var takenAlignments = ALIGNMENTS.filter(function(alignment) {

      return freeAlignments.indexOf(alignment) === -1;
    });

    return takenAlignments;

  }

  /**
   * Return alignments which are taken by related connections
   *
   * @param {Shape} element
   *
   * @return {Array<string>}
   */
  function getTakenConnectionAlignments(element) {

    var elementMid = getMid(element);

    var takenAlignments = [].concat(
      element.incoming.map(function(c) {
        return c.waypoints[c.waypoints.length - 2 ];
      }),
      element.outgoing.map(function(c) {
        return c.waypoints[1];
      })
    ).map(function(point) {
      return getApproximateOrientation(elementMid, point);
    });

    return takenAlignments;
  }

  /**
   * Return the optimal label position around an element
   * or _undefined_, if none was found.
   *
   * @param  {Shape} element
   *
   * @return {string} positioning identifier
   */
  function getOptimalPosition(element) {

    var labelMid = getMid(element.label);

    var elementMid = getMid(element);

    var labelOrientation = getApproximateOrientation(elementMid, labelMid);

    if (!isAligned(labelOrientation)) {
      return;
    }

    var takenAlignments = getTakenConnectionAlignments(element);

    if (element.host) {
      var takenHostAlignments = getTakenHostAlignments(element);

      takenAlignments = takenAlignments.concat(takenHostAlignments);
    }

    var freeAlignments = ALIGNMENTS.filter(function(alignment) {

      return takenAlignments.indexOf(alignment) === -1;
    });

    // NOTHING TO DO; label already aligned a.O.K.
    if (freeAlignments.indexOf(labelOrientation) !== -1) {
      return;
    }

    return freeAlignments[0];
  }

  function getApproximateOrientation(p0, p1) {
    return getOrientation(p1, p0, 5);
  }

  function isAligned(orientation) {
    return ALIGNMENTS.indexOf(orientation) !== -1;
  }

  function AppendBehavior(eventBus, elementFactory, bpmnRules) {

    CommandInterceptor.call(this, eventBus);

    // assign correct shape position unless already set

    this.preExecute('shape.append', function(context) {

      var source = context.source,
          shape = context.shape;

      if (!context.position) {

        if (is$1(shape, 'bpmn:TextAnnotation')) {
          context.position = {
            x: source.x + source.width / 2 + 75,
            y: source.y - (50) - shape.height / 2
          };
        } else {
          context.position = {
            x: source.x + source.width + 80 + shape.width / 2,
            y: source.y + source.height / 2
          };
        }
      }
    }, true);
  }

  e(AppendBehavior, CommandInterceptor);

  AppendBehavior.$inject = [
    'eventBus',
    'elementFactory',
    'bpmnRules'
  ];

  function AssociationBehavior(injector, modeling) {
    injector.invoke(CommandInterceptor, this);

    this.postExecute('shape.move', function(context) {
      var newParent = context.newParent,
          shape = context.shape;

      var associations = filter(shape.incoming.concat(shape.outgoing), function(connection) {
        return is$1(connection, 'bpmn:Association');
      });

      forEach$1(associations, function(association) {
        modeling.moveConnection(association, { x: 0, y: 0 }, newParent);
      });
    }, true);
  }

  e(AssociationBehavior, CommandInterceptor);

  AssociationBehavior.$inject = [
    'injector',
    'modeling'
  ];

  var LOW_PRIORITY$d = 500;


  /**
   * Replace intermediate event with boundary event when creating or moving results in attached event.
   */
  function AttachEventBehavior(bpmnReplace, injector) {
    injector.invoke(CommandInterceptor, this);

    this._bpmnReplace = bpmnReplace;

    var self = this;

    this.postExecuted('elements.create', LOW_PRIORITY$d, function(context) {
      var elements = context.elements;

      elements = elements.filter(function(shape) {
        var host = shape.host;

        return shouldReplace$1(shape, host);
      });

      if (elements.length !== 1) {
        return;
      }

      elements.map(function(element) {
        return elements.indexOf(element);
      }).forEach(function(index) {
        var host = elements[ index ];

        context.elements[ index ] = self.replaceShape(elements[ index ], host);
      });
    }, true);


    this.preExecute('elements.move', LOW_PRIORITY$d, function(context) {
      var shapes = context.shapes,
          host = context.newHost;

      if (shapes.length !== 1) {
        return;
      }

      var shape = shapes[0];

      if (shouldReplace$1(shape, host)) {
        context.shapes = [ self.replaceShape(shape, host) ];
      }
    }, true);
  }

  AttachEventBehavior.$inject = [
    'bpmnReplace',
    'injector'
  ];

  e(AttachEventBehavior, CommandInterceptor);

  AttachEventBehavior.prototype.replaceShape = function(shape, host) {
    var eventDefinition = getEventDefinition$1(shape);

    var boundaryEvent = {
      type: 'bpmn:BoundaryEvent',
      host: host
    };

    if (eventDefinition) {
      boundaryEvent.eventDefinitionType = eventDefinition.$type;
    }

    return this._bpmnReplace.replaceElement(shape, boundaryEvent, { layoutConnection: false });
  };


  // helpers //////////

  function getEventDefinition$1(element) {
    var businessObject = getBusinessObject(element),
        eventDefinitions = businessObject.eventDefinitions;

    return eventDefinitions && eventDefinitions[0];
  }

  function shouldReplace$1(shape, host) {
    return !isLabel$6(shape) &&
      isAny(shape, [ 'bpmn:IntermediateThrowEvent', 'bpmn:IntermediateCatchEvent' ]) && !!host;
  }

  /**
   * BPMN specific boundary event behavior
   */
  function BoundaryEventBehavior(eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);

    function getBoundaryEvents(element) {
      return filter(element.attachers, function(attacher) {
        return is$1(attacher, 'bpmn:BoundaryEvent');
      });
    }

    // remove after connecting to event-based gateway
    this.postExecute('connection.create', function(event) {
      var source = event.context.source,
          target = event.context.target,
          boundaryEvents = getBoundaryEvents(target);

      if (
        is$1(source, 'bpmn:EventBasedGateway') &&
        is$1(target, 'bpmn:ReceiveTask') &&
        boundaryEvents.length > 0
      ) {
        modeling.removeElements(boundaryEvents);
      }

    });

    // remove after replacing connected gateway with event-based gateway
    this.postExecute('connection.reconnect', function(event) {
      var oldSource = event.context.oldSource,
          newSource = event.context.newSource;

      if (is$1(oldSource, 'bpmn:Gateway') &&
          is$1(newSource, 'bpmn:EventBasedGateway')) {
        forEach$1(newSource.outgoing, function(connection) {
          var target = connection.target,
              attachedboundaryEvents = getBoundaryEvents(target);

          if (is$1(target, 'bpmn:ReceiveTask') &&
              attachedboundaryEvents.length > 0) {
            modeling.removeElements(attachedboundaryEvents);
          }
        });
      }
    });

  }

  BoundaryEventBehavior.$inject = [
    'eventBus',
    'modeling'
  ];

  e(BoundaryEventBehavior, CommandInterceptor);

  function CreateBehavior(injector) {
    injector.invoke(CommandInterceptor, this);

    this.preExecute('shape.create', 1500, function(event) {
      var context = event.context,
          parent = context.parent,
          shape = context.shape;

      if (is$1(parent, 'bpmn:Lane') && !is$1(shape, 'bpmn:Lane')) {
        context.parent = getParent(parent, 'bpmn:Participant');
      }
    });

  }


  CreateBehavior.$inject = [ 'injector' ];

  e(CreateBehavior, CommandInterceptor);

  /**
   * BPMN specific create data object behavior
   */
  function CreateDataObjectBehavior(eventBus, bpmnFactory, moddle) {

    CommandInterceptor.call(this, eventBus);

    this.preExecute('shape.create', function(event) {

      var context = event.context,
          shape = context.shape;

      if (is$1(shape, 'bpmn:DataObjectReference') && shape.type !== 'label') {

        // create a DataObject every time a DataObjectReference is created
        var dataObject = bpmnFactory.create('bpmn:DataObject');

        // set the reference to the DataObject
        shape.businessObject.dataObjectRef = dataObject;
      }
    });

  }

  CreateDataObjectBehavior.$inject = [
    'eventBus',
    'bpmnFactory',
    'moddle'
  ];

  e(CreateDataObjectBehavior, CommandInterceptor);

  var HORIZONTAL_PARTICIPANT_PADDING = 20,
      VERTICAL_PARTICIPANT_PADDING = 20;

  var PARTICIPANT_BORDER_WIDTH = 30;

  var HIGH_PRIORITY$b = 2000;


  /**
   * BPMN-specific behavior for creating participants.
   */
  function CreateParticipantBehavior(canvas, eventBus, modeling) {
    CommandInterceptor.call(this, eventBus);

    // fit participant
    eventBus.on([
      'create.start',
      'shape.move.start'
    ], HIGH_PRIORITY$b, function(event) {
      var context = event.context,
          shape = context.shape,
          rootElement = canvas.getRootElement();

      if (!is$1(shape, 'bpmn:Participant') ||
        !is$1(rootElement, 'bpmn:Process') ||
        !rootElement.children.length) {
        return;
      }

      // ignore connections, groups and labels
      var children = rootElement.children.filter(function(element) {
        return !is$1(element, 'bpmn:Group') &&
          !isLabel$6(element) &&
          !isConnection$9(element);
      });

      // ensure for available children to calculate bounds
      if (!children.length) {
        return;
      }

      var childrenBBox = getBBox(children);

      var participantBounds = getParticipantBounds(shape, childrenBBox);

      // assign width and height
      assign(shape, participantBounds);

      // assign create constraints
      context.createConstraints = getParticipantCreateConstraints(shape, childrenBBox);
    });

    // force hovering process when creating first participant
    eventBus.on('create.start', HIGH_PRIORITY$b, function(event) {
      var context = event.context,
          shape = context.shape,
          rootElement = canvas.getRootElement(),
          rootElementGfx = canvas.getGraphics(rootElement);

      function ensureHoveringProcess(event) {
        event.element = rootElement;
        event.gfx = rootElementGfx;
      }

      if (is$1(shape, 'bpmn:Participant') && is$1(rootElement, 'bpmn:Process')) {
        eventBus.on('element.hover', HIGH_PRIORITY$b, ensureHoveringProcess);

        eventBus.once('create.cleanup', function() {
          eventBus.off('element.hover', ensureHoveringProcess);
        });
      }
    });

    // turn process into collaboration when creating first participant
    function getOrCreateCollaboration() {
      var rootElement = canvas.getRootElement();

      if (is$1(rootElement, 'bpmn:Collaboration')) {
        return rootElement;
      }

      return modeling.makeCollaboration();
    }

    // when creating mutliple elements through `elements.create` parent must be set to collaboration
    // and passed to `shape.create` as hint
    this.preExecute('elements.create', HIGH_PRIORITY$b, function(context) {
      var elements = context.elements,
          parent = context.parent,
          participant = findParticipant(elements),
          hints;

      if (participant && is$1(parent, 'bpmn:Process')) {
        context.parent = getOrCreateCollaboration();

        hints = context.hints = context.hints || {};

        hints.participant = participant;
        hints.process = parent;
        hints.processRef = getBusinessObject(participant).get('processRef');
      }
    }, true);

    // when creating single shape through `shape.create` parent must be set to collaboration
    // unless it was already set through `elements.create`
    this.preExecute('shape.create', function(context) {
      var parent = context.parent,
          shape = context.shape;

      if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
        context.parent = getOrCreateCollaboration();

        context.process = parent;
        context.processRef = getBusinessObject(shape).get('processRef');
      }
    }, true);

    // #execute necessary because #preExecute not called on CommandStack#redo
    this.execute('shape.create', function(context) {
      var hints = context.hints || {},
          process = context.process || hints.process,
          shape = context.shape,
          participant = hints.participant;

      // both shape.create and elements.create must be handled
      if (process && (!participant || shape === participant)) {

        // monkey-patch process ref
        getBusinessObject(shape).set('processRef', getBusinessObject(process));
      }
    }, true);

    this.revert('shape.create', function(context) {
      var hints = context.hints || {},
          process = context.process || hints.process,
          processRef = context.processRef || hints.processRef,
          shape = context.shape,
          participant = hints.participant;

      // both shape.create and elements.create must be handled
      if (process && (!participant || shape === participant)) {

        // monkey-patch process ref
        getBusinessObject(shape).set('processRef', processRef);
      }
    }, true);

    this.postExecute('shape.create', function(context) {
      var hints = context.hints || {},
          process = context.process || context.hints.process,
          shape = context.shape,
          participant = hints.participant;

      if (process) {
        var children = process.children.slice();

        // both shape.create and elements.create must be handled
        if (!participant) {
          modeling.moveElements(children, { x: 0, y: 0 }, shape);
        } else if (shape === participant) {
          modeling.moveElements(children, { x: 0, y: 0 }, participant);
        }
      }
    }, true);
  }

  CreateParticipantBehavior.$inject = [
    'canvas',
    'eventBus',
    'modeling'
  ];

  e(CreateParticipantBehavior, CommandInterceptor);

  // helpers //////////

  function getParticipantBounds(shape, childrenBBox) {
    childrenBBox = {
      width: childrenBBox.width + HORIZONTAL_PARTICIPANT_PADDING * 2 + PARTICIPANT_BORDER_WIDTH,
      height: childrenBBox.height + VERTICAL_PARTICIPANT_PADDING * 2
    };

    var width = Math.max(shape.width, childrenBBox.width),
        height = Math.max(shape.height, childrenBBox.height);

    return {
      x: -width / 2,
      y: -height / 2,
      width: width,
      height: height
    };
  }

  function getParticipantCreateConstraints(shape, childrenBBox) {
    childrenBBox = asTRBL(childrenBBox);

    return {
      bottom: childrenBBox.top + shape.height / 2 - VERTICAL_PARTICIPANT_PADDING,
      left: childrenBBox.right - shape.width / 2 + HORIZONTAL_PARTICIPANT_PADDING,
      top: childrenBBox.bottom - shape.height / 2 + VERTICAL_PARTICIPANT_PADDING,
      right: childrenBBox.left + shape.width / 2 - HORIZONTAL_PARTICIPANT_PADDING - PARTICIPANT_BORDER_WIDTH
    };
  }

  function isConnection$9(element) {
    return !!element.waypoints;
  }

  function findParticipant(elements) {
    return find(elements, function(element) {
      return is$1(element, 'bpmn:Participant');
    });
  }

  var TARGET_REF_PLACEHOLDER_NAME = '__targetRef_placeholder';


  /**
   * This behavior makes sure we always set a fake
   * DataInputAssociation#targetRef as demanded by the BPMN 2.0
   * XSD schema.
   *
   * The reference is set to a bpmn:Property{ name: '__targetRef_placeholder' }
   * which is created on the fly and cleaned up afterwards if not needed
   * anymore.
   *
   * @param {EventBus} eventBus
   * @param {BpmnFactory} bpmnFactory
   */
  function DataInputAssociationBehavior(eventBus, bpmnFactory) {

    CommandInterceptor.call(this, eventBus);


    this.executed([
      'connection.create',
      'connection.delete',
      'connection.move',
      'connection.reconnect'
    ], ifDataInputAssociation(fixTargetRef));

    this.reverted([
      'connection.create',
      'connection.delete',
      'connection.move',
      'connection.reconnect'
    ], ifDataInputAssociation(fixTargetRef));


    function usesTargetRef(element, targetRef, removedConnection) {

      var inputAssociations = element.get('dataInputAssociations');

      return find(inputAssociations, function(association) {
        return association !== removedConnection &&
               association.targetRef === targetRef;
      });
    }

    function getTargetRef(element, create) {

      var properties = element.get('properties');

      var targetRefProp = find(properties, function(p) {
        return p.name === TARGET_REF_PLACEHOLDER_NAME;
      });

      if (!targetRefProp && create) {
        targetRefProp = bpmnFactory.create('bpmn:Property', {
          name: TARGET_REF_PLACEHOLDER_NAME
        });

        add(properties, targetRefProp);
      }

      return targetRefProp;
    }

    function cleanupTargetRef(element, connection) {

      var targetRefProp = getTargetRef(element);

      if (!targetRefProp) {
        return;
      }

      if (!usesTargetRef(element, targetRefProp, connection)) {
        remove(element.get('properties'), targetRefProp);
      }
    }

    /**
     * Make sure targetRef is set to a valid property or
     * `null` if the connection is detached.
     *
     * @param {Event} event
     */
    function fixTargetRef(event) {

      var context = event.context,
          connection = context.connection,
          connectionBo = connection.businessObject,
          target = connection.target,
          targetBo = target && target.businessObject,
          newTarget = context.newTarget,
          newTargetBo = newTarget && newTarget.businessObject,
          oldTarget = context.oldTarget || context.target,
          oldTargetBo = oldTarget && oldTarget.businessObject;

      var dataAssociation = connection.businessObject,
          targetRefProp;

      if (oldTargetBo && oldTargetBo !== targetBo) {
        cleanupTargetRef(oldTargetBo, connectionBo);
      }

      if (newTargetBo && newTargetBo !== targetBo) {
        cleanupTargetRef(newTargetBo, connectionBo);
      }

      if (targetBo) {
        targetRefProp = getTargetRef(targetBo, true);
        dataAssociation.targetRef = targetRefProp;
      } else {
        dataAssociation.targetRef = null;
      }
    }
  }

  DataInputAssociationBehavior.$inject = [
    'eventBus',
    'bpmnFactory'
  ];

  e(DataInputAssociationBehavior, CommandInterceptor);


  /**
   * Only call the given function when the event
   * touches a bpmn:DataInputAssociation.
   *
   * @param {Function} fn
   * @return {Function}
   */
  function ifDataInputAssociation(fn) {

    return function(event) {
      var context = event.context,
          connection = context.connection;

      if (is$1(connection, 'bpmn:DataInputAssociation')) {
        return fn(event);
      }
    };
  }

  function UpdateSemanticParentHandler(bpmnUpdater) {
    this._bpmnUpdater = bpmnUpdater;
  }

  UpdateSemanticParentHandler.$inject = [ 'bpmnUpdater' ];


  UpdateSemanticParentHandler.prototype.execute = function(context) {
    var dataStoreBo = context.dataStoreBo,
        dataStoreDi = context.dataStoreDi,
        newSemanticParent = context.newSemanticParent,
        newDiParent = context.newDiParent;

    context.oldSemanticParent = dataStoreBo.$parent;
    context.oldDiParent = dataStoreDi.$parent;

    // update semantic parent
    this._bpmnUpdater.updateSemanticParent(dataStoreBo, newSemanticParent);

    // update DI parent
    this._bpmnUpdater.updateDiParent(dataStoreDi, newDiParent);
  };

  UpdateSemanticParentHandler.prototype.revert = function(context) {
    var dataStoreBo = context.dataStoreBo,
        dataStoreDi = context.dataStoreDi,
        oldSemanticParent = context.oldSemanticParent,
        oldDiParent = context.oldDiParent;

    // update semantic parent
    this._bpmnUpdater.updateSemanticParent(dataStoreBo, oldSemanticParent);

    // update DI parent
    this._bpmnUpdater.updateDiParent(dataStoreDi, oldDiParent);
  };

  /**
   * BPMN specific data store behavior
   */
  function DataStoreBehavior(
      canvas, commandStack, elementRegistry,
      eventBus) {

    CommandInterceptor.call(this, eventBus);

    commandStack.registerHandler('dataStore.updateContainment', UpdateSemanticParentHandler);

    function getFirstParticipantWithProcessRef() {
      return elementRegistry.filter(function(element) {
        return is$1(element, 'bpmn:Participant') && getBusinessObject(element).processRef;
      })[0];
    }

    function getDataStores(element) {
      return element.children.filter(function(child) {
        return is$1(child, 'bpmn:DataStoreReference') && !child.labelTarget;
      });
    }

    function updateDataStoreParent(dataStore, newDataStoreParent) {
      var dataStoreBo = dataStore.businessObject || dataStore;

      newDataStoreParent = newDataStoreParent || getFirstParticipantWithProcessRef();

      if (newDataStoreParent) {
        var newDataStoreParentBo = newDataStoreParent.businessObject || newDataStoreParent;

        commandStack.execute('dataStore.updateContainment', {
          dataStoreBo: dataStoreBo,
          dataStoreDi: getDi(dataStore),
          newSemanticParent: newDataStoreParentBo.processRef || newDataStoreParentBo,
          newDiParent: getDi(newDataStoreParent)
        });
      }
    }


    // disable auto-resize for data stores
    this.preExecute('shape.create', function(event) {

      var context = event.context,
          shape = context.shape;

      if (is$1(shape, 'bpmn:DataStoreReference') &&
          shape.type !== 'label') {

        if (!context.hints) {
          context.hints = {};
        }

        // prevent auto resizing
        context.hints.autoResize = false;
      }
    });


    // disable auto-resize for data stores
    this.preExecute('elements.move', function(event) {
      var context = event.context,
          shapes = context.shapes;

      var dataStoreReferences = shapes.filter(function(shape) {
        return is$1(shape, 'bpmn:DataStoreReference');
      });

      if (dataStoreReferences.length) {
        if (!context.hints) {
          context.hints = {};
        }

        // prevent auto resizing for data store references
        context.hints.autoResize = shapes.filter(function(shape) {
          return !is$1(shape, 'bpmn:DataStoreReference');
        });
      }
    });


    // update parent on data store created
    this.postExecute('shape.create', function(event) {
      var context = event.context,
          shape = context.shape,
          parent = shape.parent;


      if (is$1(shape, 'bpmn:DataStoreReference') &&
          shape.type !== 'label' &&
          is$1(parent, 'bpmn:Collaboration')) {

        updateDataStoreParent(shape);
      }
    });


    // update parent on data store moved
    this.postExecute('shape.move', function(event) {
      var context = event.context,
          shape = context.shape,
          oldParent = context.oldParent,
          parent = shape.parent;

      if (is$1(oldParent, 'bpmn:Collaboration')) {

        // do nothing if not necessary
        return;
      }

      if (is$1(shape, 'bpmn:DataStoreReference') &&
          shape.type !== 'label' &&
          is$1(parent, 'bpmn:Collaboration')) {

        var participant = is$1(oldParent, 'bpmn:Participant') ?
          oldParent :
          getAncestor(oldParent, 'bpmn:Participant');

        updateDataStoreParent(shape, participant);
      }
    });


    // update data store parents on participant or subprocess deleted
    this.postExecute('shape.delete', function(event) {
      var context = event.context,
          shape = context.shape,
          rootElement = canvas.getRootElement();

      if (isAny(shape, [ 'bpmn:Participant', 'bpmn:SubProcess' ])
          && is$1(rootElement, 'bpmn:Collaboration')) {
        getDataStores(rootElement)
          .filter(function(dataStore) {
            return isDescendant(dataStore, shape);
          })
          .forEach(function(dataStore) {
            updateDataStoreParent(dataStore);
          });
      }
    });

    // update data store parents on collaboration -> process
    this.postExecute('canvas.updateRoot', function(event) {
      var context = event.context,
          oldRoot = context.oldRoot,
          newRoot = context.newRoot;

      var dataStores = getDataStores(oldRoot);

      dataStores.forEach(function(dataStore) {

        if (is$1(newRoot, 'bpmn:Process')) {
          updateDataStoreParent(dataStore, newRoot);
        }

      });
    });
  }

  DataStoreBehavior.$inject = [
    'canvas',
    'commandStack',
    'elementRegistry',
    'eventBus',
  ];

  e(DataStoreBehavior, CommandInterceptor);


  // helpers //////////

  function isDescendant(descendant, ancestor) {
    var descendantBo = descendant.businessObject || descendant,
        ancestorBo = ancestor.businessObject || ancestor;

    while (descendantBo.$parent) {
      if (descendantBo.$parent === ancestorBo.processRef || ancestorBo) {
        return true;
      }

      descendantBo = descendantBo.$parent;
    }

    return false;
  }

  function getAncestor(element, type) {

    while (element.parent) {
      if (is$1(element.parent, type)) {
        return element.parent;
      }

      element = element.parent;
    }
  }

  var LOW_PRIORITY$c = 500;


  /**
   * BPMN specific delete lane behavior
   */
  function DeleteLaneBehavior(eventBus, modeling, spaceTool) {

    CommandInterceptor.call(this, eventBus);


    function compensateLaneDelete(shape, oldParent) {

      var siblings = getChildLanes(oldParent);

      var topAffected = [];
      var bottomAffected = [];

      eachElement(siblings, function(element) {

        if (element.y > shape.y) {
          bottomAffected.push(element);
        } else {
          topAffected.push(element);
        }

        return element.children;
      });

      if (!siblings.length) {
        return;
      }

      var offset;

      if (bottomAffected.length && topAffected.length) {
        offset = shape.height / 2;
      } else {
        offset = shape.height;
      }

      var topAdjustments,
          bottomAdjustments;

      if (topAffected.length) {
        topAdjustments = spaceTool.calculateAdjustments(
          topAffected, 'y', offset, shape.y - 10);

        spaceTool.makeSpace(
          topAdjustments.movingShapes,
          topAdjustments.resizingShapes,
          { x: 0, y: offset }, 's');
      }

      if (bottomAffected.length) {
        bottomAdjustments = spaceTool.calculateAdjustments(
          bottomAffected, 'y', -offset, shape.y + shape.height + 10);

        spaceTool.makeSpace(
          bottomAdjustments.movingShapes,
          bottomAdjustments.resizingShapes,
          { x: 0, y: -offset }, 'n');
      }
    }


    /**
     * Adjust sizes of other lanes after lane deletion
     */
    this.postExecuted('shape.delete', LOW_PRIORITY$c, function(event) {

      var context = event.context,
          hints = context.hints,
          shape = context.shape,
          oldParent = context.oldParent;

      // only compensate lane deletes
      if (!is$1(shape, 'bpmn:Lane')) {
        return;
      }

      // compensate root deletes only
      if (hints && hints.nested) {
        return;
      }

      compensateLaneDelete(shape, oldParent);
    });
  }

  DeleteLaneBehavior.$inject = [
    'eventBus',
    'modeling',
    'spaceTool'
  ];

  e(DeleteLaneBehavior, CommandInterceptor);

  var LOW_PRIORITY$b = 500;


  /**
   * Replace boundary event with intermediate event when creating or moving results in detached event.
   */
  function DetachEventBehavior(bpmnReplace, injector) {
    injector.invoke(CommandInterceptor, this);

    this._bpmnReplace = bpmnReplace;

    var self = this;

    this.postExecuted('elements.create', LOW_PRIORITY$b, function(context) {
      var elements = context.elements;

      elements.filter(function(shape) {
        var host = shape.host;

        return shouldReplace(shape, host);
      }).map(function(shape) {
        return elements.indexOf(shape);
      }).forEach(function(index) {
        context.elements[ index ] = self.replaceShape(elements[ index ]);
      });
    }, true);

    this.preExecute('elements.move', LOW_PRIORITY$b, function(context) {
      var shapes = context.shapes,
          newHost = context.newHost;

      shapes.forEach(function(shape, index) {
        var host = shape.host;

        if (shouldReplace(shape, includes$6(shapes, host) ? host : newHost)) {
          shapes[ index ] = self.replaceShape(shape);
        }
      });
    }, true);
  }

  DetachEventBehavior.$inject = [
    'bpmnReplace',
    'injector'
  ];

  e(DetachEventBehavior, CommandInterceptor);

  DetachEventBehavior.prototype.replaceShape = function(shape) {
    var eventDefinition = getEventDefinition(shape),
        intermediateEvent;

    if (eventDefinition) {
      intermediateEvent = {
        type: 'bpmn:IntermediateCatchEvent',
        eventDefinitionType: eventDefinition.$type
      };
    } else {
      intermediateEvent = {
        type: 'bpmn:IntermediateThrowEvent'
      };
    }

    return this._bpmnReplace.replaceElement(shape, intermediateEvent, { layoutConnection: false });
  };


  // helpers //////////

  function getEventDefinition(element) {
    var businessObject = getBusinessObject(element),
        eventDefinitions = businessObject.eventDefinitions;

    return eventDefinitions && eventDefinitions[0];
  }

  function shouldReplace(shape, host) {
    return !isLabel$6(shape) && is$1(shape, 'bpmn:BoundaryEvent') && !host;
  }

  function includes$6(array, item) {
    return array.indexOf(item) !== -1;
  }

  function DropOnFlowBehavior(eventBus, bpmnRules, modeling) {

    CommandInterceptor.call(this, eventBus);

    /**
     * Reconnect start / end of a connection after
     * dropping an element on a flow.
     */

    function insertShape(shape, targetFlow, positionOrBounds) {
      var waypoints = targetFlow.waypoints,
          waypointsBefore,
          waypointsAfter,
          dockingPoint,
          source,
          target,
          incomingConnection,
          outgoingConnection,
          oldOutgoing = shape.outgoing.slice(),
          oldIncoming = shape.incoming.slice();

      var mid;

      if (isNumber(positionOrBounds.width)) {
        mid = getMid(positionOrBounds);
      } else {
        mid = positionOrBounds;
      }

      var intersection = getApproxIntersection(waypoints, mid);

      if (intersection) {
        waypointsBefore = waypoints.slice(0, intersection.index);
        waypointsAfter = waypoints.slice(intersection.index + (intersection.bendpoint ? 1 : 0));

        // due to inaccuracy intersection might have been found
        if (!waypointsBefore.length || !waypointsAfter.length) {
          return;
        }

        dockingPoint = intersection.bendpoint ? waypoints[intersection.index] : mid;

        // if last waypointBefore is inside shape's bounds, ignore docking point
        if (waypointsBefore.length === 1 || !isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length - 1])) {
          waypointsBefore.push(copy(dockingPoint));
        }

        // if first waypointAfter is inside shape's bounds, ignore docking point
        if (waypointsAfter.length === 1 || !isPointInsideBBox(shape, waypointsAfter[0])) {
          waypointsAfter.unshift(copy(dockingPoint));
        }
      }

      source = targetFlow.source;
      target = targetFlow.target;

      if (bpmnRules.canConnect(source, shape, targetFlow)) {

        // reconnect source -> inserted shape
        modeling.reconnectEnd(targetFlow, shape, waypointsBefore || mid);

        incomingConnection = targetFlow;
      }

      if (bpmnRules.canConnect(shape, target, targetFlow)) {

        if (!incomingConnection) {

          // reconnect inserted shape -> end
          modeling.reconnectStart(targetFlow, shape, waypointsAfter || mid);

          outgoingConnection = targetFlow;
        } else {
          outgoingConnection = modeling.connect(
            shape, target, { type: targetFlow.type, waypoints: waypointsAfter }
          );
        }
      }

      var duplicateConnections = [].concat(

        incomingConnection && filter(oldIncoming, function(connection) {
          return connection.source === incomingConnection.source;
        }) || [],

        outgoingConnection && filter(oldOutgoing, function(connection) {
          return connection.target === outgoingConnection.target;
        }) || []
      );

      if (duplicateConnections.length) {
        modeling.removeElements(duplicateConnections);
      }
    }

    this.preExecute('elements.move', function(context) {

      var newParent = context.newParent,
          shapes = context.shapes,
          delta = context.delta,
          shape = shapes[0];

      if (!shape || !newParent) {
        return;
      }

      // if the new parent is a connection,
      // change it to the new parent's parent
      if (newParent && newParent.waypoints) {
        context.newParent = newParent = newParent.parent;
      }

      var shapeMid = getMid(shape);
      var newShapeMid = {
        x: shapeMid.x + delta.x,
        y: shapeMid.y + delta.y
      };

      // find a connection which intersects with the
      // element's mid point
      var connection = find(newParent.children, function(element) {
        var canInsert = bpmnRules.canInsert(shapes, element);

        return canInsert && getApproxIntersection(element.waypoints, newShapeMid);
      });

      if (connection) {
        context.targetFlow = connection;
        context.position = newShapeMid;
      }

    }, true);

    this.postExecuted('elements.move', function(context) {

      var shapes = context.shapes,
          targetFlow = context.targetFlow,
          position = context.position;

      if (targetFlow) {
        insertShape(shapes[0], targetFlow, position);
      }

    }, true);

    this.preExecute('shape.create', function(context) {

      var parent = context.parent,
          shape = context.shape;

      if (bpmnRules.canInsert(shape, parent)) {
        context.targetFlow = parent;
        context.parent = parent.parent;
      }
    }, true);

    this.postExecuted('shape.create', function(context) {

      var shape = context.shape,
          targetFlow = context.targetFlow,
          positionOrBounds = context.position;

      if (targetFlow) {
        insertShape(shape, targetFlow, positionOrBounds);
      }
    }, true);
  }

  e(DropOnFlowBehavior, CommandInterceptor);

  DropOnFlowBehavior.$inject = [
    'eventBus',
    'bpmnRules',
    'modeling'
  ];


  // helpers /////////////////////

  function isPointInsideBBox(bbox, point) {
    var x = point.x,
        y = point.y;

    return x >= bbox.x &&
      x <= bbox.x + bbox.width &&
      y >= bbox.y &&
      y <= bbox.y + bbox.height;
  }

  function copy(obj) {
    return assign({}, obj);
  }

  function EventBasedGatewayBehavior(eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);

    /**
     * Remove existing sequence flows of event-based target before connecting
     * from event-based gateway.
     */
    this.preExecuted('connection.create', function(event) {

      var context = event.context,
          source = context.source,
          target = context.target,
          existingIncomingConnections = target.incoming.slice();

      if (context.hints && context.hints.createElementsBehavior === false) {
        return;
      }

      if (
        is$1(source, 'bpmn:EventBasedGateway') &&
        target.incoming.length
      ) {

        existingIncomingConnections.filter(isSequenceFlow)
          .forEach(function(sequenceFlow) {
            modeling.removeConnection(sequenceFlow);
          });
      }
    });

    /**
     *  After replacing shape with event-based gateway, remove incoming sequence
     *  flows of event-based targets which do not belong to event-based gateway
     *  source.
     */
    this.preExecuted('shape.replace', function(event) {

      var newShape = event.context.newShape,
          newShapeTargets,
          newShapeTargetsIncomingSequenceFlows;

      if (!is$1(newShape, 'bpmn:EventBasedGateway')) {
        return;
      }

      newShapeTargets = newShape.outgoing.filter(isSequenceFlow)
        .map(function(sequenceFlow) {
          return sequenceFlow.target;
        });

      newShapeTargetsIncomingSequenceFlows = newShapeTargets.reduce(function(sequenceFlows, target) {
        var incomingSequenceFlows = target.incoming.filter(isSequenceFlow);

        return sequenceFlows.concat(incomingSequenceFlows);
      }, []);

      newShapeTargetsIncomingSequenceFlows.forEach(function(sequenceFlow) {
        if (sequenceFlow.source !== newShape) {
          modeling.removeConnection(sequenceFlow);
        }
      });
    });
  }

  EventBasedGatewayBehavior.$inject = [
    'eventBus',
    'modeling'
  ];

  e(EventBasedGatewayBehavior, CommandInterceptor);



  // helpers //////////////////////

  function isSequenceFlow(connection) {
    return is$1(connection, 'bpmn:SequenceFlow');
  }

  var HIGH_PRIORITY$a = 1500;
  var HIGHEST_PRIORITY = 2000;


  /**
   * Correct hover targets in certain situations to improve diagram interaction.
   *
   * @param {ElementRegistry} elementRegistry
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   */
  function FixHoverBehavior(elementRegistry, eventBus, canvas) {

    eventBus.on([
      'create.hover',
      'create.move',
      'create.out',
      'create.end',
      'shape.move.hover',
      'shape.move.move',
      'shape.move.out',
      'shape.move.end'
    ], HIGH_PRIORITY$a, function(event) {
      var context = event.context,
          shape = context.shape || event.shape,
          hover = event.hover;

      // ensure elements are not dropped onto a bpmn:Lane but onto
      // the underlying bpmn:Participant
      if (is$1(hover, 'bpmn:Lane') && !isAny(shape, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
        event.hover = getLanesRoot(hover);
        event.hoverGfx = elementRegistry.getGraphics(event.hover);
      }

      var rootElement = canvas.getRootElement();

      // ensure bpmn:Group and label elements are dropped
      // always onto the root
      if (hover !== rootElement && (shape.labelTarget || is$1(shape, 'bpmn:Group'))) {
        event.hover = rootElement;
        event.hoverGfx = elementRegistry.getGraphics(event.hover);
      }
    });

    eventBus.on([
      'connect.hover',
      'connect.out',
      'connect.end',
      'connect.cleanup',
      'global-connect.hover',
      'global-connect.out',
      'global-connect.end',
      'global-connect.cleanup'
    ], HIGH_PRIORITY$a, function(event) {
      var hover = event.hover;

      // ensure connections start/end on bpmn:Participant,
      // not the underlying bpmn:Lane
      if (is$1(hover, 'bpmn:Lane')) {
        event.hover = getLanesRoot(hover) || hover;
        event.hoverGfx = elementRegistry.getGraphics(event.hover);
      }
    });


    eventBus.on([
      'bendpoint.move.hover'
    ], HIGH_PRIORITY$a, function(event) {
      var context = event.context,
          hover = event.hover,
          type = context.type;

      // ensure reconnect start/end on bpmn:Participant,
      // not the underlying bpmn:Lane
      if (is$1(hover, 'bpmn:Lane') && /reconnect/.test(type)) {
        event.hover = getLanesRoot(hover) || hover;
        event.hoverGfx = elementRegistry.getGraphics(event.hover);
      }
    });


    eventBus.on([
      'connect.start'
    ], HIGH_PRIORITY$a, function(event) {
      var context = event.context,
          start = context.start;

      // ensure connect start on bpmn:Participant,
      // not the underlying bpmn:Lane
      if (is$1(start, 'bpmn:Lane')) {
        context.start = getLanesRoot(start) || start;
      }
    });


    // allow movement of participants from lanes
    eventBus.on('shape.move.start', HIGHEST_PRIORITY, function(event) {
      var shape = event.shape;

      if (is$1(shape, 'bpmn:Lane')) {
        event.shape = getLanesRoot(shape) || shape;
      }
    });

  }

  FixHoverBehavior.$inject = [
    'elementRegistry',
    'eventBus',
    'canvas'
  ];

  /**
   * Creates a new bpmn:CategoryValue inside a new bpmn:Category
   *
   * @param {BpmnFactory} bpmnFactory
   *
   * @return {ModdleElement} categoryValue.
   */
  function createCategory(bpmnFactory) {
    return bpmnFactory.create('bpmn:Category');
  }

  /**
   * Creates a new bpmn:CategoryValue inside a new bpmn:Category
   *
   * @param {BpmnFactory} bpmnFactory
   *
   * @return {ModdleElement} categoryValue.
   */
  function createCategoryValue(bpmnFactory) {
    return bpmnFactory.create('bpmn:CategoryValue');
  }

  /**
   * Adds category value to definitions
   *
   * @param {ModdleElement} categoryValue
   * @param {ModdleElement} category
   * @param {ModdleElement} definitions
   *
   * @return {ModdleElement} categoryValue
   */
  function linkCategoryValue(categoryValue, category, definitions) {
    add(category.get('categoryValue'), categoryValue);
    categoryValue.$parent = category;

    add(definitions.get('rootElements'), category);
    category.$parent = definitions;

    return categoryValue;
  }

  /**
   * Unlink category value from parent
   *
   * @param {ModdleElement} categoryValue
   *
   * @return {ModdleElement} categoryValue
   */
  function unlinkCategoryValue(categoryValue) {
    var category = categoryValue.$parent;

    if (category) {
      remove(category.get('categoryValue'), categoryValue);
      categoryValue.$parent = null;
    }

    return categoryValue;
  }

  /**
   * Unlink category from parent
   *
   * @param {ModdleElement} category
   * @param {ModdleElement} definitions
   *
   * @return {ModdleElement} categoryValue
   */
  function unlinkCategory(category) {
    var definitions = category.$parent;

    if (definitions) {
      remove(definitions.get('rootElements'), category);
      category.$parent = null;
    }

    return category;
  }

  var LOWER_PRIORITY = 770;


  /**
   * BPMN specific Group behavior
   */
  function GroupBehavior(
      bpmnFactory,
      bpmnjs,
      elementRegistry,
      eventBus,
      injector,
      moddleCopy
  ) {
    injector.invoke(CommandInterceptor, this);

    /**
     * Returns all group element in the current registry
     *
     * @return {Array<djs.model.shape>} a list of group shapes
     */
    function getGroupElements() {
      return elementRegistry.filter(function(e) {
        return is$1(e, 'bpmn:Group');
      });
    }

    /**
     * Returns true if given category is referenced in one of the given elements
     *
     * @param { djs.model.Element[] } elements
     * @param { ModdleElement } category
     *
     * @return { boolean }
     */
    function isReferencedCategory(elements, category) {
      return elements.some(function(element) {
        var businessObject = getBusinessObject(element);

        var _category = businessObject.categoryValueRef && businessObject.categoryValueRef.$parent;

        return _category === category;
      });
    }

    /**
     * Returns true if given categoryValue is referenced in one of the given elements
     *
     * @param { djs.model.Element[] } elements
     * @param { ModdleElement } categoryValue
     *
     * @return { boolean }
     */
    function isReferencedCategoryValue(elements, categoryValue) {
      return elements.some(function(element) {
        var businessObject = getBusinessObject(element);

        return businessObject.categoryValueRef === categoryValue;
      });
    }

    /**
     * Remove category value unless it is still referenced
     *
     * @param {ModdleElement} categoryValue
     * @param {ModdleElement} category
     * @param {ModdleElement} businessObject
     */
    function removeCategoryValue(categoryValue, category, businessObject) {

      var groups = getGroupElements().filter(function(element) {
        return element.businessObject !== businessObject;
      });

      if (category && !isReferencedCategory(groups, category)) {
        unlinkCategory(category);
      }

      if (categoryValue && !isReferencedCategoryValue(groups, categoryValue)) {
        unlinkCategoryValue(categoryValue);
      }
    }

    /**
     * Add category value
     *
     * @param {ModdleElement} categoryValue
     * @param {ModdleElement} category
     */
    function addCategoryValue(categoryValue, category) {
      return linkCategoryValue(categoryValue, category, bpmnjs.getDefinitions());
    }

    function setCategoryValue(element, context) {
      var businessObject = getBusinessObject(element),
          categoryValue = businessObject.categoryValueRef;

      if (!categoryValue) {
        categoryValue =
        businessObject.categoryValueRef =
        context.categoryValue = (
          context.categoryValue || createCategoryValue(bpmnFactory)
        );
      }

      var category = categoryValue.$parent;

      if (!category) {
        category =
        categoryValue.$parent =
        context.category = (
          context.category || createCategory(bpmnFactory)
        );
      }

      addCategoryValue(categoryValue, category, bpmnjs.getDefinitions());
    }

    function unsetCategoryValue(element, context) {
      var category = context.category,
          categoryValue = context.categoryValue,
          businessObject = getBusinessObject(element);

      if (categoryValue) {
        businessObject.categoryValueRef = null;

        removeCategoryValue(categoryValue, category, businessObject);
      } else {
        removeCategoryValue(null, businessObject.categoryValueRef.$parent, businessObject);
      }
    }


    // ensure category + value exist before label editing

    this.execute('label.create', function(event) {
      var context = event.context,
          labelTarget = context.labelTarget;

      if (!is$1(labelTarget, 'bpmn:Group')) {
        return;
      }

      setCategoryValue(labelTarget, context);
    });

    this.revert('label.create', function(event) {
      var context = event.context,
          labelTarget = context.labelTarget;

      if (!is$1(labelTarget, 'bpmn:Group')) {
        return;
      }

      unsetCategoryValue(labelTarget, context);
    });


    // remove referenced category + value when group was deleted

    this.execute('shape.delete', function(event) {

      var context = event.context,
          shape = context.shape,
          businessObject = getBusinessObject(shape);

      if (!is$1(shape, 'bpmn:Group') || shape.labelTarget) {
        return;
      }

      var categoryValue = context.categoryValue = businessObject.categoryValueRef,
          category;

      if (categoryValue) {
        category = context.category = categoryValue.$parent;

        removeCategoryValue(categoryValue, category, businessObject);

        businessObject.categoryValueRef = null;
      }
    });

    this.reverted('shape.delete', function(event) {

      var context = event.context,
          shape = context.shape;

      if (!is$1(shape, 'bpmn:Group') || shape.labelTarget) {
        return;
      }

      var category = context.category,
          categoryValue = context.categoryValue,
          businessObject = getBusinessObject(shape);

      if (categoryValue) {
        businessObject.categoryValueRef = categoryValue;

        addCategoryValue(categoryValue, category);
      }
    });


    // create new category + value when group was created

    this.execute('shape.create', function(event) {
      var context = event.context,
          shape = context.shape;

      if (!is$1(shape, 'bpmn:Group') || shape.labelTarget) {
        return;
      }

      if (getBusinessObject(shape).categoryValueRef) {
        setCategoryValue(shape, context);
      }
    });

    this.reverted('shape.create', function(event) {

      var context = event.context,
          shape = context.shape;

      if (!is$1(shape, 'bpmn:Group') || shape.labelTarget) {
        return;
      }

      if (getBusinessObject(shape).categoryValueRef) {
        unsetCategoryValue(shape, context);
      }
    });


    // copy + paste categoryValueRef with group

    function copy(bo, clone) {
      var targetBo = bpmnFactory.create(bo.$type);

      return moddleCopy.copyElement(bo, targetBo, null, clone);
    }

    eventBus.on('copyPaste.copyElement', LOWER_PRIORITY, function(context) {
      var descriptor = context.descriptor,
          element = context.element;

      if (!is$1(element, 'bpmn:Group') || element.labelTarget) {
        return;
      }

      var groupBo = getBusinessObject(element);

      if (groupBo.categoryValueRef) {

        var categoryValue = groupBo.categoryValueRef;

        descriptor.categoryValue = copy(categoryValue, true);

        if (categoryValue.$parent) {
          descriptor.category = copy(categoryValue.$parent, true);
        }
      }
    });

    eventBus.on('copyPaste.pasteElement', LOWER_PRIORITY, function(context) {
      var descriptor = context.descriptor,
          businessObject = descriptor.businessObject,
          categoryValue = descriptor.categoryValue,
          category = descriptor.category;

      if (categoryValue) {
        categoryValue = businessObject.categoryValueRef = copy(categoryValue);
      }

      if (category) {
        categoryValue.$parent = copy(category);
      }

      delete descriptor.category;
      delete descriptor.categoryValue;
    });

  }

  GroupBehavior.$inject = [
    'bpmnFactory',
    'bpmnjs',
    'elementRegistry',
    'eventBus',
    'injector',
    'moddleCopy'
  ];

  e(GroupBehavior, CommandInterceptor);

  /**
   * Returns the intersection between two line segments a and b.
   *
   * @param {Point} l1s
   * @param {Point} l1e
   * @param {Point} l2s
   * @param {Point} l2e
   *
   * @return {Point}
   */
  function lineIntersect(l1s, l1e, l2s, l2e) {

    // if the lines intersect, the result contains the x and y of the
    // intersection (treating the lines as infinite) and booleans for
    // whether line segment 1 or line segment 2 contain the point
    var denominator, a, b, c, numerator;

    denominator = ((l2e.y - l2s.y) * (l1e.x - l1s.x)) - ((l2e.x - l2s.x) * (l1e.y - l1s.y));

    if (denominator == 0) {
      return null;
    }

    a = l1s.y - l2s.y;
    b = l1s.x - l2s.x;
    numerator = ((l2e.x - l2s.x) * a) - ((l2e.y - l2s.y) * b);

    c = numerator / denominator;

    // if we cast these lines infinitely in
    // both directions, they intersect here
    return {
      x: Math.round(l1s.x + (c * (l1e.x - l1s.x))),
      y: Math.round(l1s.y + (c * (l1e.y - l1s.y)))
    };
  }

  /**
   * Fix broken dockings after DI imports.
   *
   * @param {EventBus} eventBus
   */
  function ImportDockingFix(eventBus) {

    function adjustDocking(startPoint, nextPoint, elementMid) {

      var elementTop = {
        x: elementMid.x,
        y: elementMid.y - 50
      };

      var elementLeft = {
        x: elementMid.x - 50,
        y: elementMid.y
      };

      var verticalIntersect = lineIntersect(startPoint, nextPoint, elementMid, elementTop),
          horizontalIntersect = lineIntersect(startPoint, nextPoint, elementMid, elementLeft);

      // original is horizontal or vertical center cross intersection
      var centerIntersect;

      if (verticalIntersect && horizontalIntersect) {
        if (getDistance$1(verticalIntersect, elementMid) > getDistance$1(horizontalIntersect, elementMid)) {
          centerIntersect = horizontalIntersect;
        } else {
          centerIntersect = verticalIntersect;
        }
      } else {
        centerIntersect = verticalIntersect || horizontalIntersect;
      }

      startPoint.original = centerIntersect;
    }

    function fixDockings(connection) {
      var waypoints = connection.waypoints;

      adjustDocking(
        waypoints[0],
        waypoints[1],
        getMid(connection.source)
      );

      adjustDocking(
        waypoints[waypoints.length - 1],
        waypoints[waypoints.length - 2],
        getMid(connection.target)
      );
    }

    eventBus.on('bpmnElement.added', function(e) {

      var element = e.element;

      if (element.waypoints) {
        fixDockings(element);
      }
    });
  }

  ImportDockingFix.$inject = [
    'eventBus'
  ];


  // helpers //////////////////////

  function getDistance$1(p1, p2) {
    return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
  }

  /**
   * A component that makes sure that each created or updated
   * Pool and Lane is assigned an isHorizontal property set to true.
   *
   * @param {EventBus} eventBus
   */
  function IsHorizontalFix(eventBus) {

    CommandInterceptor.call(this, eventBus);

    var elementTypesToUpdate = [
      'bpmn:Participant',
      'bpmn:Lane'
    ];

    this.executed([ 'shape.move', 'shape.create', 'shape.resize' ], function(event) {
      var shape = event.context.shape,
          bo = getBusinessObject(shape),
          di = getDi(shape);

      if (isAny(bo, elementTypesToUpdate) && !di.get('isHorizontal')) {

        // set attribute directly to avoid modeling#updateProperty side effects
        di.set('isHorizontal', true);
      }
    });

  }

  IsHorizontalFix.$inject = [ 'eventBus' ];

  e(IsHorizontalFix, CommandInterceptor);

  var sqrt = Math.sqrt,
      min$1 = Math.min,
      max$3 = Math.max,
      abs$3 = Math.abs;

  /**
   * Calculate the square (power to two) of a number.
   *
   * @param {number} n
   *
   * @return {number}
   */
  function sq(n) {
    return Math.pow(n, 2);
  }

  /**
   * Get distance between two points.
   *
   * @param {Point} p1
   * @param {Point} p2
   *
   * @return {number}
   */
  function getDistance(p1, p2) {
    return sqrt(sq(p1.x - p2.x) + sq(p1.y - p2.y));
  }

  /**
   * Return the attachment of the given point on the specified line.
   *
   * The attachment is either a bendpoint (attached to the given point)
   * or segment (attached to a location on a line segment) attachment:
   *
   * ```javascript
   * var pointAttachment = {
   *   type: 'bendpoint',
   *   bendpointIndex: 3,
   *   position: { x: 10, y: 10 } // the attach point on the line
   * };
   *
   * var segmentAttachment = {
   *   type: 'segment',
   *   segmentIndex: 2,
   *   relativeLocation: 0.31, // attach point location between 0 (at start) and 1 (at end)
   *   position: { x: 10, y: 10 } // the attach point on the line
   * };
   * ```
   *
   * @param {Point} point
   * @param {Array<Point>} line
   *
   * @return {Object} attachment
   */
  function getAttachment(point, line) {

    var idx = 0,
        segmentStart,
        segmentEnd,
        segmentStartDistance,
        segmentEndDistance,
        attachmentPosition,
        minDistance,
        intersections,
        attachment,
        attachmentDistance,
        closestAttachmentDistance,
        closestAttachment;

    for (idx = 0; idx < line.length - 1; idx++) {

      segmentStart = line[idx];
      segmentEnd = line[idx + 1];

      if (pointsEqual(segmentStart, segmentEnd)) {
        intersections = [ segmentStart ];
      } else {
        segmentStartDistance = getDistance(point, segmentStart);
        segmentEndDistance = getDistance(point, segmentEnd);

        minDistance = min$1(segmentStartDistance, segmentEndDistance);

        intersections = getCircleSegmentIntersections(segmentStart, segmentEnd, point, minDistance);
      }

      if (intersections.length < 1) {
        throw new Error('expected between [1, 2] circle -> line intersections');
      }

      // one intersection -> bendpoint attachment
      if (intersections.length === 1) {
        attachment = {
          type: 'bendpoint',
          position: intersections[0],
          segmentIndex: idx,
          bendpointIndex: pointsEqual(segmentStart, intersections[0]) ? idx : idx + 1
        };
      }

      // two intersections -> segment attachment
      if (intersections.length === 2) {

        attachmentPosition = mid$1(intersections[0], intersections[1]);

        attachment = {
          type: 'segment',
          position: attachmentPosition,
          segmentIndex: idx,
          relativeLocation: getDistance(segmentStart, attachmentPosition) / getDistance(segmentStart, segmentEnd)
        };
      }

      attachmentDistance = getDistance(attachment.position, point);

      if (!closestAttachment || closestAttachmentDistance > attachmentDistance) {
        closestAttachment = attachment;
        closestAttachmentDistance = attachmentDistance;
      }
    }

    return closestAttachment;
  }

  /**
   * Gets the intersection between a circle and a line segment.
   *
   * @param {Point} s1 segment start
   * @param {Point} s2 segment end
   * @param {Point} cc circle center
   * @param {number} cr circle radius
   *
   * @return {Array<Point>} intersections
   */
  function getCircleSegmentIntersections(s1, s2, cc, cr) {

    var baX = s2.x - s1.x;
    var baY = s2.y - s1.y;
    var caX = cc.x - s1.x;
    var caY = cc.y - s1.y;

    var a = baX * baX + baY * baY;
    var bBy2 = baX * caX + baY * caY;
    var c = caX * caX + caY * caY - cr * cr;

    var pBy2 = bBy2 / a;
    var q = c / a;

    var disc = pBy2 * pBy2 - q;

    // check against negative value to work around
    // negative, very close to zero results (-4e-15)
    // being produced in some environments
    if (disc < 0 && disc > -0.000001) {
      disc = 0;
    }

    if (disc < 0) {
      return [];
    }

    // if disc == 0 ... dealt with later
    var tmpSqrt = sqrt(disc);
    var abScalingFactor1 = -pBy2 + tmpSqrt;
    var abScalingFactor2 = -pBy2 - tmpSqrt;

    var i1 = {
      x: s1.x - baX * abScalingFactor1,
      y: s1.y - baY * abScalingFactor1
    };

    if (disc === 0) { // abScalingFactor1 == abScalingFactor2
      return [ i1 ];
    }

    var i2 = {
      x: s1.x - baX * abScalingFactor2,
      y: s1.y - baY * abScalingFactor2
    };

    // return only points on line segment
    return [ i1, i2 ].filter(function(p) {
      return isPointInSegment(p, s1, s2);
    });
  }


  function isPointInSegment(p, segmentStart, segmentEnd) {
    return (
      fenced(p.x, segmentStart.x, segmentEnd.x) &&
      fenced(p.y, segmentStart.y, segmentEnd.y)
    );
  }

  function fenced(n, rangeStart, rangeEnd) {

    // use matching threshold to work around
    // precision errors in intersection computation

    return (
      n >= min$1(rangeStart, rangeEnd) - EQUAL_THRESHOLD &&
      n <= max$3(rangeStart, rangeEnd) + EQUAL_THRESHOLD
    );
  }

  /**
   * Calculate mid of two points.
   *
   * @param {Point} p1
   * @param {Point} p2
   *
   * @return {Point}
   */
  function mid$1(p1, p2) {

    return {
      x: (p1.x + p2.x) / 2,
      y: (p1.y + p2.y) / 2
    };
  }

  var EQUAL_THRESHOLD = 0.1;

  function pointsEqual(p1, p2) {

    return (
      abs$3(p1.x - p2.x) <= EQUAL_THRESHOLD &&
      abs$3(p1.y - p2.y) <= EQUAL_THRESHOLD
    );
  }

  function findNewLineStartIndex(oldWaypoints, newWaypoints, attachment, hints) {

    var index = attachment.segmentIndex;

    var offset = newWaypoints.length - oldWaypoints.length;

    // segmentMove happened
    if (hints.segmentMove) {

      var oldSegmentStartIndex = hints.segmentMove.segmentStartIndex,
          newSegmentStartIndex = hints.segmentMove.newSegmentStartIndex;

      // if point was on moved segment return new segment index
      if (index === oldSegmentStartIndex) {
        return newSegmentStartIndex;
      }

      // point is after new segment index
      if (index >= newSegmentStartIndex) {
        return (index + offset < newSegmentStartIndex) ? newSegmentStartIndex : index + offset;
      }

      // if point is before new segment index
      return index;
    }

    // bendpointMove happened
    if (hints.bendpointMove) {

      var insert = hints.bendpointMove.insert,
          bendpointIndex = hints.bendpointMove.bendpointIndex,
          newIndex;

      // waypoints length didnt change
      if (offset === 0) {
        return index;
      }

      // point behind new/removed bendpoint
      if (index >= bendpointIndex) {
        newIndex = insert ? index + 1 : index - 1;
      }

      // point before new/removed bendpoint
      if (index < bendpointIndex) {

        newIndex = index;

        // decide point should take right or left segment
        if (insert && attachment.type !== 'bendpoint' && bendpointIndex - 1 === index) {

          var rel = relativePositionMidWaypoint(newWaypoints, bendpointIndex);

          if (rel < attachment.relativeLocation) {
            newIndex++;
          }
        }
      }

      return newIndex;
    }

    // start/end changed
    if (offset === 0) {
      return index;
    }

    if (hints.connectionStart && index === 0) {
      return 0;
    }

    if (hints.connectionEnd && index === oldWaypoints.length - 2) {
      return newWaypoints.length - 2;
    }

    // if nothing fits, take the middle segment
    return Math.floor((newWaypoints.length - 2) / 2);
  }


  /**
   * Calculate the required adjustment (move delta) for the given point
   * after the connection waypoints got updated.
   *
   * @param {Point} position
   * @param {Array<Point>} newWaypoints
   * @param {Array<Point>} oldWaypoints
   * @param {Object} hints
   *
   * @return {Object} result
   * @return {Point} result.point
   * @return {Point} result.delta
   */
  function getAnchorPointAdjustment(position, newWaypoints, oldWaypoints, hints) {

    var dx = 0,
        dy = 0;

    var oldPosition = {
      point: position,
      delta: { x: 0, y: 0 }
    };

    // get closest attachment
    var attachment = getAttachment(position, oldWaypoints),
        oldLabelLineIndex = attachment.segmentIndex,
        newLabelLineIndex = findNewLineStartIndex(oldWaypoints, newWaypoints, attachment, hints);


    // should never happen
    // TODO(@janstuemmel): throw an error here when connectionSegmentMove is refactored
    if (newLabelLineIndex < 0 ||
        newLabelLineIndex > newWaypoints.length - 2 ||
        newLabelLineIndex === null) {
      return oldPosition;
    }

    var oldLabelLine = getLine(oldWaypoints, oldLabelLineIndex),
        newLabelLine = getLine(newWaypoints, newLabelLineIndex),
        oldFoot = attachment.position;

    var relativeFootPosition = getRelativeFootPosition(oldLabelLine, oldFoot),
        angleDelta = getAngleDelta(oldLabelLine, newLabelLine);

    // special rule if label on bendpoint
    if (attachment.type === 'bendpoint') {

      var offset = newWaypoints.length - oldWaypoints.length,
          oldBendpointIndex = attachment.bendpointIndex,
          oldBendpoint = oldWaypoints[oldBendpointIndex];

      // bendpoint position hasn't changed, return same position
      if (newWaypoints.indexOf(oldBendpoint) !== -1) {
        return oldPosition;
      }

      // new bendpoint and old bendpoint have same index, then just return the offset
      if (offset === 0) {
        var newBendpoint = newWaypoints[oldBendpointIndex];

        dx = newBendpoint.x - attachment.position.x,
        dy = newBendpoint.y - attachment.position.y;

        return {
          delta: {
            x: dx,
            y: dy
          },
          point: {
            x: position.x + dx,
            y: position.y + dy
          }
        };
      }

      // if bendpoints get removed
      if (offset < 0 && oldBendpointIndex !== 0 && oldBendpointIndex < oldWaypoints.length - 1) {
        relativeFootPosition = relativePositionMidWaypoint(oldWaypoints, oldBendpointIndex);
      }
    }

    var newFoot = {
      x: (newLabelLine[1].x - newLabelLine[0].x) * relativeFootPosition + newLabelLine[0].x,
      y: (newLabelLine[1].y - newLabelLine[0].y) * relativeFootPosition + newLabelLine[0].y
    };

    // the rotated vector to label
    var newLabelVector = rotateVector({
      x: position.x - oldFoot.x,
      y: position.y - oldFoot.y
    }, angleDelta);

    // the new relative position
    dx = newFoot.x + newLabelVector.x - position.x;
    dy = newFoot.y + newLabelVector.y - position.y;

    return {
      point: roundPoint(newFoot),
      delta: roundPoint({
        x: dx,
        y: dy
      })
    };
  }


  // HELPERS //////////////////////

  function relativePositionMidWaypoint(waypoints, idx) {

    var distanceSegment1 = getDistancePointPoint(waypoints[idx - 1], waypoints[idx]),
        distanceSegment2 = getDistancePointPoint(waypoints[idx], waypoints[idx + 1]);

    var relativePosition = distanceSegment1 / (distanceSegment1 + distanceSegment2);

    return relativePosition;
  }

  function getAngleDelta(l1, l2) {
    var a1 = getAngle(l1),
        a2 = getAngle(l2);
    return a2 - a1;
  }

  function getLine(waypoints, idx) {
    return [ waypoints[idx], waypoints[idx + 1] ];
  }

  function getRelativeFootPosition(line, foot) {

    var length = getDistancePointPoint(line[0], line[1]),
        lengthToFoot = getDistancePointPoint(line[0], foot);

    return length === 0 ? 0 : lengthToFoot / length;
  }

  /**
   * Calculate the required adjustment (move delta) for the given label
   * after the connection waypoints got updated.
   *
   * @param {djs.model.Label} label
   * @param {Array<Point>} newWaypoints
   * @param {Array<Point>} oldWaypoints
   * @param {Object} hints
   *
   * @return {Point} delta
   */
  function getLabelAdjustment(label, newWaypoints, oldWaypoints, hints) {
    var labelPosition = getLabelMid(label);

    return getAnchorPointAdjustment(labelPosition, newWaypoints, oldWaypoints, hints).delta;
  }


  // HELPERS //////////////////////

  function getLabelMid(label) {
    return {
      x: label.x + label.width / 2,
      y: label.y + label.height / 2
    };
  }

  /**
   * Calculates the absolute point relative to the new element's position
   *
   * @param {point} point [absolute]
   * @param {bounds} oldBounds
   * @param {bounds} newBounds
   *
   * @return {point} point [absolute]
   */
  function getNewAttachPoint(point, oldBounds, newBounds) {
    var oldCenter = center(oldBounds),
        newCenter = center(newBounds),
        oldDelta = delta(point, oldCenter);

    var newDelta = {
      x: oldDelta.x * (newBounds.width / oldBounds.width),
      y: oldDelta.y * (newBounds.height / oldBounds.height)
    };

    return roundPoint({
      x: newCenter.x + newDelta.x,
      y: newCenter.y + newDelta.y
    });
  }


  /**
   * Calculates the shape's delta relative to a new position
   * of a certain element's bounds
   *
   * @param {djs.model.Shape} point [absolute]
   * @param {bounds} oldBounds
   * @param {bounds} newBounds
   *
   * @return {delta} delta
   */
  function getNewAttachShapeDelta(shape, oldBounds, newBounds) {
    var shapeCenter = center(shape),
        oldCenter = center(oldBounds),
        newCenter = center(newBounds),
        shapeDelta = delta(shape, shapeCenter),
        oldCenterDelta = delta(shapeCenter, oldCenter),
        stickyPositionDelta = getStickyPositionDelta(shapeCenter, oldBounds, newBounds);

    if (stickyPositionDelta) {
      return stickyPositionDelta;
    }

    var newCenterDelta = {
      x: oldCenterDelta.x * (newBounds.width / oldBounds.width),
      y: oldCenterDelta.y * (newBounds.height / oldBounds.height)
    };

    var newShapeCenter = {
      x: newCenter.x + newCenterDelta.x,
      y: newCenter.y + newCenterDelta.y
    };

    return roundPoint({
      x: newShapeCenter.x + shapeDelta.x - shape.x,
      y: newShapeCenter.y + shapeDelta.y - shape.y
    });
  }

  function getStickyPositionDelta(oldShapeCenter, oldBounds, newBounds) {
    var oldTRBL = asTRBL(oldBounds),
        newTRBL = asTRBL(newBounds);

    if (isMoved(oldTRBL, newTRBL)) {
      return null;
    }

    var oldOrientation = getOrientation(oldBounds, oldShapeCenter),
        stickyPositionDelta,
        newShapeCenter,
        newOrientation;

    if (oldOrientation === 'top') {
      stickyPositionDelta = {
        x: 0,
        y: newTRBL.bottom - oldTRBL.bottom
      };
    } else if (oldOrientation === 'bottom') {
      stickyPositionDelta = {
        x: 0,
        y: newTRBL.top - oldTRBL.top
      };
    } else if (oldOrientation === 'right') {
      stickyPositionDelta = {
        x: newTRBL.left - oldTRBL.left,
        y: 0
      };
    } else if (oldOrientation === 'left') {
      stickyPositionDelta = {
        x: newTRBL.right - oldTRBL.right,
        y: 0
      };
    } else {

      // fallback to proportional movement for corner-placed attachments
      return null;
    }

    newShapeCenter = {
      x: oldShapeCenter.x + stickyPositionDelta.x,
      y: oldShapeCenter.y + stickyPositionDelta.y
    };

    newOrientation = getOrientation(newBounds, newShapeCenter);

    if (newOrientation !== oldOrientation) {

      // fallback to proportional movement if orientation would otherwise change
      return null;
    }

    return stickyPositionDelta;
  }

  function isMoved(oldTRBL, newTRBL) {
    return isHorizontallyMoved(oldTRBL, newTRBL) || isVerticallyMoved(oldTRBL, newTRBL);
  }

  function isHorizontallyMoved(oldTRBL, newTRBL) {
    return oldTRBL.right !== newTRBL.right && oldTRBL.left !== newTRBL.left;
  }

  function isVerticallyMoved(oldTRBL, newTRBL) {
    return oldTRBL.top !== newTRBL.top && oldTRBL.bottom !== newTRBL.bottom;
  }

  var DEFAULT_LABEL_DIMENSIONS = {
    width: 90,
    height: 20
  };

  var NAME_PROPERTY = 'name';
  var TEXT_PROPERTY = 'text';

  /**
   * A component that makes sure that external labels are added
   * together with respective elements and properly updated (DI wise)
   * during move.
   *
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   * @param {BpmnFactory} bpmnFactory
   * @param {TextRenderer} textRenderer
   */
  function LabelBehavior(
      eventBus, modeling, bpmnFactory,
      textRenderer) {

    CommandInterceptor.call(this, eventBus);

    // update label if name property was updated
    this.postExecute('element.updateProperties', function(e) {
      var context = e.context,
          element = context.element,
          properties = context.properties;

      if (NAME_PROPERTY in properties) {
        modeling.updateLabel(element, properties[NAME_PROPERTY]);
      }

      if (TEXT_PROPERTY in properties
          && is$1(element, 'bpmn:TextAnnotation')) {

        var newBounds = textRenderer.getTextAnnotationBounds(
          {
            x: element.x,
            y: element.y,
            width: element.width,
            height: element.height
          },
          properties[TEXT_PROPERTY] || ''
        );

        modeling.updateLabel(element, properties.text, newBounds);
      }
    });

    // create label shape after shape/connection was created
    this.postExecute([ 'shape.create', 'connection.create' ], function(e) {
      var context = e.context,
          hints = context.hints || {};

      if (hints.createElementsBehavior === false) {
        return;
      }

      var element = context.shape || context.connection,
          businessObject = element.businessObject;

      if (isLabel$6(element) || !isLabelExternal(element)) {
        return;
      }

      // only create label if attribute available
      if (!getLabel(element)) {
        return;
      }

      var labelCenter = getExternalLabelMid(element);

      // we don't care about x and y
      var labelDimensions = textRenderer.getExternalLabelBounds(
        DEFAULT_LABEL_DIMENSIONS,
        getLabel(element)
      );

      modeling.createLabel(element, labelCenter, {
        id: businessObject.id + '_label',
        businessObject: businessObject,
        width: labelDimensions.width,
        height: labelDimensions.height
      });
    });

    // update label after label shape was deleted
    this.postExecute('shape.delete', function(event) {
      var context = event.context,
          labelTarget = context.labelTarget,
          hints = context.hints || {};

      // check if label
      if (labelTarget && hints.unsetLabel !== false) {
        modeling.updateLabel(labelTarget, null, null, { removeShape: false });
      }
    });

    // update di information on label creation
    this.postExecute([ 'label.create' ], function(event) {

      var context = event.context,
          element = context.shape,
          labelTarget = context.labelTarget,
          di;

      // we want to trigger on real labels only
      if (!labelTarget) {
        return;
      }

      // we want to trigger on BPMN elements only
      if (!is$1(labelTarget, 'bpmn:BaseElement')) {
        return;
      }

      di = getDi(labelTarget);

      if (!di.label) {
        di.label = bpmnFactory.create('bpmndi:BPMNLabel', {
          bounds: bpmnFactory.create('dc:Bounds')
        });

        element.di = di;
      }

      assign(di.label.bounds, {
        x: element.x,
        y: element.y,
        width: element.width,
        height: element.height
      });
    });

    function getVisibleLabelAdjustment(event) {

      var context = event.context,
          connection = context.connection,
          label = connection.label,
          hints = assign({}, context.hints),
          newWaypoints = context.newWaypoints || connection.waypoints,
          oldWaypoints = context.oldWaypoints;


      if (typeof hints.startChanged === 'undefined') {
        hints.startChanged = !!hints.connectionStart;
      }

      if (typeof hints.endChanged === 'undefined') {
        hints.endChanged = !!hints.connectionEnd;
      }

      return getLabelAdjustment(label, newWaypoints, oldWaypoints, hints);
    }

    this.postExecute([
      'connection.layout',
      'connection.updateWaypoints'
    ], function(event) {
      var context = event.context,
          hints = context.hints || {};

      if (hints.labelBehavior === false) {
        return;
      }

      var connection = context.connection,
          label = connection.label,
          labelAdjustment;

      // handle missing label as well as the case
      // that the label parent does not exist (yet),
      // because it is being pasted / created via multi element create
      //
      // Cf. https://github.com/bpmn-io/bpmn-js/pull/1227
      if (!label || !label.parent) {
        return;
      }

      labelAdjustment = getVisibleLabelAdjustment(event);

      modeling.moveShape(label, labelAdjustment);
    });


    // keep label position on shape replace
    this.postExecute([ 'shape.replace' ], function(event) {
      var context = event.context,
          newShape = context.newShape,
          oldShape = context.oldShape;

      var businessObject = getBusinessObject(newShape);

      if (businessObject
        && isLabelExternal(businessObject)
        && oldShape.label
        && newShape.label) {
        newShape.label.x = oldShape.label.x;
        newShape.label.y = oldShape.label.y;
      }
    });


    // move external label after resizing
    this.postExecute('shape.resize', function(event) {

      var context = event.context,
          shape = context.shape,
          newBounds = context.newBounds,
          oldBounds = context.oldBounds;

      if (hasExternalLabel(shape)) {

        var label = shape.label,
            labelMid = getMid(label),
            edges = asEdges(oldBounds);

        // get nearest border point to label as reference point
        var referencePoint = getReferencePoint(labelMid, edges);

        var delta = getReferencePointDelta(referencePoint, oldBounds, newBounds);

        modeling.moveShape(label, delta);

      }

    });

  }

  e(LabelBehavior, CommandInterceptor);

  LabelBehavior.$inject = [
    'eventBus',
    'modeling',
    'bpmnFactory',
    'textRenderer'
  ];

  // helpers //////////////////////

  /**
   * Calculates a reference point delta relative to a new position
   * of a certain element's bounds
   *
   * @param {Point} point
   * @param {Bounds} oldBounds
   * @param {Bounds} newBounds
   *
   * @return {Delta} delta
   */
  function getReferencePointDelta(referencePoint, oldBounds, newBounds) {

    var newReferencePoint = getNewAttachPoint(referencePoint, oldBounds, newBounds);

    return roundPoint(delta(newReferencePoint, referencePoint));
  }

  /**
   * Generates the nearest point (reference point) for a given point
   * onto given set of lines
   *
   * @param {Array<Point, Point>} lines
   * @param {Point} point
   *
   * @param {Point}
   */
  function getReferencePoint(point, lines) {

    if (!lines.length) {
      return;
    }

    var nearestLine = getNearestLine(point, lines);

    return perpendicularFoot(point, nearestLine);
  }

  /**
   * Convert the given bounds to a lines array containing all edges
   *
   * @param {Bounds|Point} bounds
   *
   * @return Array<Point>
   */
  function asEdges(bounds) {
    return [
      [ // top
        {
          x: bounds.x,
          y: bounds.y
        },
        {
          x: bounds.x + (bounds.width || 0),
          y: bounds.y
        }
      ],
      [ // right
        {
          x: bounds.x + (bounds.width || 0),
          y: bounds.y
        },
        {
          x: bounds.x + (bounds.width || 0),
          y: bounds.y + (bounds.height || 0)
        }
      ],
      [ // bottom
        {
          x: bounds.x,
          y: bounds.y + (bounds.height || 0)
        },
        {
          x: bounds.x + (bounds.width || 0),
          y: bounds.y + (bounds.height || 0)
        }
      ],
      [ // left
        {
          x: bounds.x,
          y: bounds.y
        },
        {
          x: bounds.x,
          y: bounds.y + (bounds.height || 0)
        }
      ]
    ];
  }

  /**
   * Returns the nearest line for a given point by distance
   * @param {Point} point
   * @param Array<Point> lines
   *
   * @return Array<Point>
   */
  function getNearestLine(point, lines) {

    var distances = lines.map(function(l) {
      return {
        line: l,
        distance: getDistancePointLine(point, l)
      };
    });

    var sorted = sortBy(distances, 'distance');

    return sorted[0].line;
  }

  /**
   * Calculate the new point after the connection waypoints got updated.
   *
   * @param {djs.model.Label} label
   * @param {Array<Point>} newWaypoints
   * @param {Array<Point>} oldWaypoints
   * @param {Object} hints
   *
   * @return {Point} point
   */
  function getConnectionAdjustment(position, newWaypoints, oldWaypoints, hints) {
    return getAnchorPointAdjustment(position, newWaypoints, oldWaypoints, hints).point;
  }

  /**
   * A component that makes sure that Associations connected to Connections
   * are updated together with the Connection.
   *
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   */
  function LayoutConnectionBehavior(
      eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);

    function getnewAnchorPoint(event, point) {

      var context = event.context,
          connection = context.connection,
          hints = assign({}, context.hints),
          newWaypoints = context.newWaypoints || connection.waypoints,
          oldWaypoints = context.oldWaypoints;


      if (typeof hints.startChanged === 'undefined') {
        hints.startChanged = !!hints.connectionStart;
      }

      if (typeof hints.endChanged === 'undefined') {
        hints.endChanged = !!hints.connectionEnd;
      }

      return getConnectionAdjustment(point, newWaypoints, oldWaypoints, hints);
    }

    this.postExecute([
      'connection.layout',
      'connection.updateWaypoints'
    ], function(event) {
      var context = event.context;

      var connection = context.connection,
          outgoing = connection.outgoing,
          incoming = connection.incoming;

      incoming.forEach(function(connection) {
        var endPoint = connection.waypoints[connection.waypoints.length - 1];
        var newEndpoint = getnewAnchorPoint(event, endPoint);

        var newWaypoints = [].concat(connection.waypoints.slice(0, -1), [ newEndpoint ]);

        modeling.updateWaypoints(connection, newWaypoints);
      });

      outgoing.forEach(function(connection) {
        var startpoint = connection.waypoints[0];
        var newStartpoint = getnewAnchorPoint(event, startpoint);

        var newWaypoints = [].concat([ newStartpoint ], connection.waypoints.slice(1));

        modeling.updateWaypoints(connection, newWaypoints);
      });

    });


    this.postExecute([
      'connection.move'
    ], function(event) {
      var context = event.context;

      var connection = context.connection,
          outgoing = connection.outgoing,
          incoming = connection.incoming,
          delta = context.delta;

      incoming.forEach(function(connection) {
        var endPoint = connection.waypoints[connection.waypoints.length - 1];
        var newEndpoint = {
          x: endPoint.x + delta.x,
          y: endPoint.y + delta.y
        };

        var newWaypoints = [].concat(connection.waypoints.slice(0, -1), [ newEndpoint ]);

        modeling.updateWaypoints(connection, newWaypoints);
      });

      outgoing.forEach(function(connection) {
        var startpoint = connection.waypoints[0];
        var newStartpoint = {
          x: startpoint.x + delta.x,
          y: startpoint.y + delta.y
        };

        var newWaypoints = [].concat([ newStartpoint ], connection.waypoints.slice(1));

        modeling.updateWaypoints(connection, newWaypoints);
      });

    });

  }

  e(LayoutConnectionBehavior, CommandInterceptor);

  LayoutConnectionBehavior.$inject = [
    'eventBus',
    'modeling'
  ];

  function getResizedSourceAnchor(connection, shape, oldBounds) {

    var waypoints = safeGetWaypoints(connection),
        waypointsInsideNewBounds = getWaypointsInsideBounds(waypoints, shape),
        oldAnchor = waypoints[0];

    // new anchor is the last waypoint enclosed be resized source
    if (waypointsInsideNewBounds.length) {
      return waypointsInsideNewBounds[ waypointsInsideNewBounds.length - 1 ];
    }

    return getNewAttachPoint(oldAnchor.original || oldAnchor, oldBounds, shape);
  }


  function getResizedTargetAnchor(connection, shape, oldBounds) {

    var waypoints = safeGetWaypoints(connection),
        waypointsInsideNewBounds = getWaypointsInsideBounds(waypoints, shape),
        oldAnchor = waypoints[waypoints.length - 1];

    // new anchor is the first waypoint enclosed be resized target
    if (waypointsInsideNewBounds.length) {
      return waypointsInsideNewBounds[ 0 ];
    }

    return getNewAttachPoint(oldAnchor.original || oldAnchor, oldBounds, shape);
  }


  function getMovedSourceAnchor(connection, source, moveDelta) {

    var waypoints = safeGetWaypoints(connection),
        oldBounds = subtract(source, moveDelta),
        oldAnchor = waypoints[ 0 ];

    return getNewAttachPoint(oldAnchor.original || oldAnchor, oldBounds, source);
  }


  function getMovedTargetAnchor(connection, target, moveDelta) {

    var waypoints = safeGetWaypoints(connection),
        oldBounds = subtract(target, moveDelta),
        oldAnchor = waypoints[ waypoints.length - 1 ];

    return getNewAttachPoint(oldAnchor.original || oldAnchor, oldBounds, target);
  }


  // helpers //////////////////////

  function subtract(bounds, delta) {
    return {
      x: bounds.x - delta.x,
      y: bounds.y - delta.y,
      width: bounds.width,
      height: bounds.height
    };
  }


  /**
   * Return waypoints of given connection; throw if non exists (should not happen!!).
   *
   * @param {Connection} connection
   *
   * @return {Array<Point>}
   */
  function safeGetWaypoints(connection) {

    var waypoints = connection.waypoints;

    if (!waypoints.length) {
      throw new Error('connection#' + connection.id + ': no waypoints');
    }

    return waypoints;
  }

  function getWaypointsInsideBounds(waypoints, bounds) {
    var originalWaypoints = map(waypoints, getOriginal);

    return filter(originalWaypoints, function(waypoint) {
      return isInsideBounds(waypoint, bounds);
    });
  }

  /**
   * Checks if point is inside bounds, incl. edges.
   *
   * @param {Point} point
   * @param {Bounds} bounds
   */
  function isInsideBounds(point, bounds) {
    return getOrientation(bounds, point, 1) === 'intersect';
  }

  function getOriginal(point) {
    return point.original || point;
  }

  /**
   * BPMN-specific message flow behavior.
   */
  function MessageFlowBehavior(eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);

    this.postExecute('shape.replace', function(context) {
      var oldShape = context.oldShape,
          newShape = context.newShape;

      if (!isParticipantCollapse(oldShape, newShape)) {
        return;
      }

      var messageFlows = getMessageFlows(oldShape);

      messageFlows.incoming.forEach(function(incoming) {
        var anchor = getResizedTargetAnchor(incoming, newShape, oldShape);

        modeling.reconnectEnd(incoming, newShape, anchor);
      });

      messageFlows.outgoing.forEach(function(outgoing) {
        var anchor = getResizedSourceAnchor(outgoing, newShape, oldShape);

        modeling.reconnectStart(outgoing, newShape, anchor);
      });
    }, true);

  }

  MessageFlowBehavior.$inject = [ 'eventBus', 'modeling' ];

  e(MessageFlowBehavior, CommandInterceptor);

  // helpers //////////

  function isParticipantCollapse(oldShape, newShape) {
    return is$1(oldShape, 'bpmn:Participant')
      && isExpanded(oldShape)
      && is$1(newShape, 'bpmn:Participant')
      && !isExpanded(newShape);
  }

  function getMessageFlows(parent) {
    var elements = selfAndAllChildren([ parent ], false);

    var incoming = [],
        outgoing = [];

    elements.forEach(function(element) {
      if (element === parent) {
        return;
      }

      element.incoming.forEach(function(connection) {
        if (is$1(connection, 'bpmn:MessageFlow')) {
          incoming.push(connection);
        }
      });

      element.outgoing.forEach(function(connection) {
        if (is$1(connection, 'bpmn:MessageFlow')) {
          outgoing.push(connection);
        }
      });
    }, []);

    return {
      incoming: incoming,
      outgoing: outgoing
    };
  }

  var COLLAB_ERR_MSG = 'flow elements must be children of pools/participants';

  function ModelingFeedback(eventBus, tooltips, translate) {

    function showError(position, message, timeout) {
      tooltips.add({
        position: {
          x: position.x + 5,
          y: position.y + 5
        },
        type: 'error',
        timeout: timeout || 2000,
        html: '<div>' + message + '</div>'
      });
    }

    eventBus.on([ 'shape.move.rejected', 'create.rejected' ], function(event) {
      var context = event.context,
          shape = context.shape,
          target = context.target;

      if (is$1(target, 'bpmn:Collaboration') && is$1(shape, 'bpmn:FlowNode')) {
        showError(event, translate(COLLAB_ERR_MSG));
      }
    });

  }

  ModelingFeedback.$inject = [
    'eventBus',
    'tooltips',
    'translate'
  ];

  /**
   * BPMN specific behavior ensuring that bpmndi:Label's dc:Bounds are removed
   * when shape is resized.
   */
  function RemoveEmbeddedLabelBoundsBehavior(eventBus, modeling) {
    CommandInterceptor.call(this, eventBus);

    this.preExecute('shape.resize', function(context) {
      var shape = context.shape;

      var di = getDi(shape),
          label = di && di.get('label'),
          bounds = label && label.get('bounds');

      if (bounds) {
        modeling.updateModdleProperties(shape, label, {
          bounds: undefined
        });
      }
    }, true);
  }

  e(RemoveEmbeddedLabelBoundsBehavior, CommandInterceptor);

  RemoveEmbeddedLabelBoundsBehavior.$inject = [
    'eventBus',
    'modeling'
  ];

  function RemoveElementBehavior(eventBus, bpmnRules, modeling) {

    CommandInterceptor.call(this, eventBus);

    /**
     * Combine sequence flows when deleting an element
     * if there is one incoming and one outgoing
     * sequence flow
     */
    this.preExecute('shape.delete', function(e) {

      var shape = e.context.shape;

      // only handle [a] -> [shape] -> [b] patterns
      if (shape.incoming.length !== 1 || shape.outgoing.length !== 1) {
        return;
      }

      var inConnection = shape.incoming[0],
          outConnection = shape.outgoing[0];

      // only handle sequence flows
      if (!is$1(inConnection, 'bpmn:SequenceFlow') || !is$1(outConnection, 'bpmn:SequenceFlow')) {
        return;
      }

      if (bpmnRules.canConnect(inConnection.source, outConnection.target, inConnection)) {

        // compute new, combined waypoints
        var newWaypoints = getNewWaypoints(inConnection.waypoints, outConnection.waypoints);

        modeling.reconnectEnd(inConnection, outConnection.target, newWaypoints);
      }
    });

  }

  e(RemoveElementBehavior, CommandInterceptor);

  RemoveElementBehavior.$inject = [
    'eventBus',
    'bpmnRules',
    'modeling'
  ];


  // helpers //////////////////////

  function getDocking$1(point) {
    return point.original || point;
  }


  function getNewWaypoints(inWaypoints, outWaypoints) {

    var intersection = lineIntersect(
      getDocking$1(inWaypoints[inWaypoints.length - 2]),
      getDocking$1(inWaypoints[inWaypoints.length - 1]),
      getDocking$1(outWaypoints[1]),
      getDocking$1(outWaypoints[0]));

    if (intersection) {
      return [].concat(
        inWaypoints.slice(0, inWaypoints.length - 1),
        [ intersection ],
        outWaypoints.slice(1));
    } else {
      return [
        getDocking$1(inWaypoints[0]),
        getDocking$1(outWaypoints[outWaypoints.length - 1])
      ];
    }
  }

  /**
   * BPMN specific remove behavior
   */
  function RemoveParticipantBehavior(eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);


    /**
     * morph collaboration diagram into process diagram
     * after the last participant has been removed
     */

    this.preExecute('shape.delete', function(context) {

      var shape = context.shape,
          parent = shape.parent;

      // activate the behavior if the shape to be removed
      // is a participant
      if (is$1(shape, 'bpmn:Participant')) {
        context.collaborationRoot = parent;
      }
    }, true);

    this.postExecute('shape.delete', function(context) {

      var collaborationRoot = context.collaborationRoot;

      if (collaborationRoot && !collaborationRoot.businessObject.participants.length) {

        // replace empty collaboration with process diagram
        modeling.makeProcess();
      }
    }, true);

  }

  RemoveParticipantBehavior.$inject = [ 'eventBus', 'modeling' ];

  e(RemoveParticipantBehavior, CommandInterceptor);

  function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules, injector) {

    CommandInterceptor.call(this, eventBus);

    var dragging = injector.get('dragging', false);

    function fixConnection(connection) {

      var source = connection.source,
          target = connection.target,
          parent = connection.parent;

      // do not do anything if connection
      // is already deleted (may happen due to other
      // behaviors plugged-in before)
      if (!parent) {
        return;
      }

      var replacementType,
          remove;

      /**
       * Check if incoming or outgoing connections
       * can stay or could be substituted with an
       * appropriate replacement.
       *
       * This holds true for SequenceFlow <> MessageFlow.
       */

      if (is$1(connection, 'bpmn:SequenceFlow')) {
        if (!bpmnRules.canConnectSequenceFlow(source, target)) {
          remove = true;
        }

        if (bpmnRules.canConnectMessageFlow(source, target)) {
          replacementType = 'bpmn:MessageFlow';
        }
      }

      // transform message flows into sequence flows, if possible

      if (is$1(connection, 'bpmn:MessageFlow')) {

        if (!bpmnRules.canConnectMessageFlow(source, target)) {
          remove = true;
        }

        if (bpmnRules.canConnectSequenceFlow(source, target)) {
          replacementType = 'bpmn:SequenceFlow';
        }
      }

      if (is$1(connection, 'bpmn:Association') && !bpmnRules.canConnectAssociation(source, target)) {
        remove = true;
      }


      // remove invalid connection,
      // unless it has been removed already
      if (remove) {
        modeling.removeConnection(connection);
      }

      // replace SequenceFlow <> MessageFlow

      if (replacementType) {
        modeling.connect(source, target, {
          type: replacementType,
          waypoints: connection.waypoints.slice()
        });
      }
    }

    function replaceReconnectedConnection(event) {

      var context = event.context,
          connection = context.connection,
          source = context.newSource || connection.source,
          target = context.newTarget || connection.target,
          allowed,
          replacement;

      allowed = bpmnRules.canConnect(source, target);

      if (!allowed || allowed.type === connection.type) {
        return;
      }

      replacement = modeling.connect(source, target, {
        type: allowed.type,
        waypoints: connection.waypoints.slice()
      });

      // remove old connection
      modeling.removeConnection(connection);

      // replace connection in context to reconnect end/start
      context.connection = replacement;

      if (dragging) {
        cleanDraggingSelection(connection, replacement);
      }
    }

    // monkey-patch selection saved in dragging in order to re-select it when operation is finished
    function cleanDraggingSelection(oldConnection, newConnection) {
      var context = dragging.context(),
          previousSelection = context && context.payload.previousSelection,
          index;

      // do nothing if not dragging or no selection was present
      if (!previousSelection || !previousSelection.length) {
        return;
      }

      index = previousSelection.indexOf(oldConnection);

      if (index === -1) {
        return;
      }

      previousSelection.splice(index, 1, newConnection);
    }

    // lifecycle hooks

    this.postExecuted('elements.move', function(context) {

      var closure = context.closure,
          allConnections = closure.allConnections;

      forEach$1(allConnections, fixConnection);
    }, true);

    this.preExecute('connection.reconnect', replaceReconnectedConnection);

    this.postExecuted('element.updateProperties', function(event) {
      var context = event.context,
          properties = context.properties,
          element = context.element,
          businessObject = element.businessObject,
          connection;

      // remove condition on change to default
      if (properties.default) {
        connection = find(
          element.outgoing,
          matchPattern({ id: element.businessObject.default.id })
        );

        if (connection) {
          modeling.updateProperties(connection, { conditionExpression: undefined });
        }
      }

      // remove default from source on change to conditional
      if (properties.conditionExpression && businessObject.sourceRef.default === businessObject) {
        modeling.updateProperties(element.source, { default: undefined });
      }
    });
  }

  e(ReplaceConnectionBehavior, CommandInterceptor);

  ReplaceConnectionBehavior.$inject = [
    'eventBus',
    'modeling',
    'bpmnRules',
    'injector'
  ];

  /**
   * BPMN-specific replace behavior.
   */
  function ReplaceElementBehaviour(
      bpmnReplace,
      bpmnRules,
      elementRegistry,
      injector,
      modeling,
      selection
  ) {
    injector.invoke(CommandInterceptor, this);

    this._bpmnReplace = bpmnReplace;
    this._elementRegistry = elementRegistry;
    this._selection = selection;

    // replace elements on create, e.g. during copy-paste
    this.postExecuted([ 'elements.create' ], 500, function(event) {
      var context = event.context,
          target = context.parent,
          elements = context.elements;

      var elementReplacements = reduce(elements, function(replacements, element) {
        var canReplace = bpmnRules.canReplace([ element ], element.host || element.parent || target);

        return canReplace ? replacements.concat(canReplace.replacements) : replacements;
      }, []);

      if (elementReplacements.length) {
        this.replaceElements(elements, elementReplacements);
      }
    }, this);

    // replace elements on move
    this.postExecuted([ 'elements.move' ], 500, function(event) {
      var context = event.context,
          target = context.newParent,
          newHost = context.newHost,
          elements = [];

      forEach$1(context.closure.topLevel, function(topLevelElements) {
        if (isEventSubProcess(topLevelElements)) {
          elements = elements.concat(topLevelElements.children);
        } else {
          elements = elements.concat(topLevelElements);
        }
      });

      // set target to host if attaching
      if (elements.length === 1 && newHost) {
        target = newHost;
      }

      var canReplace = bpmnRules.canReplace(elements, target);

      if (canReplace) {
        this.replaceElements(elements, canReplace.replacements, newHost);
      }
    }, this);

    // update attachments on host replace
    this.postExecute([ 'shape.replace' ], 1500, function(e) {
      var context = e.context,
          oldShape = context.oldShape,
          newShape = context.newShape,
          attachers = oldShape.attachers,
          canReplace;

      if (attachers && attachers.length) {
        canReplace = bpmnRules.canReplace(attachers, newShape);

        this.replaceElements(attachers, canReplace.replacements);
      }

    }, this);

    // keep ID on shape replace
    this.postExecuted([ 'shape.replace' ], 1500, function(e) {
      var context = e.context,
          oldShape = context.oldShape,
          newShape = context.newShape;

      modeling.unclaimId(oldShape.businessObject.id, oldShape.businessObject);
      modeling.updateProperties(newShape, { id: oldShape.id });
    });
  }

  e(ReplaceElementBehaviour, CommandInterceptor);

  ReplaceElementBehaviour.prototype.replaceElements = function(elements, newElements) {
    var elementRegistry = this._elementRegistry,
        bpmnReplace = this._bpmnReplace,
        selection = this._selection;

    forEach$1(newElements, function(replacement) {
      var newElement = {
        type: replacement.newElementType
      };

      var oldElement = elementRegistry.get(replacement.oldElementId);

      var idx = elements.indexOf(oldElement);

      elements[idx] = bpmnReplace.replaceElement(oldElement, newElement, { select: false });
    });

    if (newElements) {
      selection.select(elements);
    }
  };

  ReplaceElementBehaviour.$inject = [
    'bpmnReplace',
    'bpmnRules',
    'elementRegistry',
    'injector',
    'modeling',
    'selection'
  ];

  var HIGH_PRIORITY$9 = 1500;

  var GROUP_MIN_DIMENSIONS = { width: 140, height: 120 };

  var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };

  var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };

  var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };

  var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };

  /**
   * Set minimum bounds/resize constraints on resize.
   *
   * @param {EventBus} eventBus
   */
  function ResizeBehavior(eventBus) {
    eventBus.on('resize.start', HIGH_PRIORITY$9, function(event) {
      var context = event.context,
          shape = context.shape,
          direction = context.direction,
          balanced = context.balanced;

      if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
        context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
      }

      if (is$1(shape, 'bpmn:Participant')) {
        context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
      }

      if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
        context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
      }

      if (is$1(shape, 'bpmn:TextAnnotation')) {
        context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
      }
    });
  }

  ResizeBehavior.$inject = [ 'eventBus' ];


  var abs$2 = Math.abs,
      min = Math.min,
      max$2 = Math.max;


  function addToTrbl(trbl, attr, value, choice) {
    var current = trbl[attr];

    // make sure to set the value if it does not exist
    // or apply the correct value by comparing against
    // choice(value, currentValue)
    trbl[attr] = current === undefined ? value : choice(value, current);
  }

  function addMin(trbl, attr, value) {
    return addToTrbl(trbl, attr, value, min);
  }

  function addMax(trbl, attr, value) {
    return addToTrbl(trbl, attr, value, max$2);
  }

  var LANE_RIGHT_PADDING = 20,
      LANE_LEFT_PADDING = 50,
      LANE_TOP_PADDING = 20,
      LANE_BOTTOM_PADDING = 20;

  function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
    var lanesRoot = getLanesRoot(laneShape);

    var isFirst = true,
        isLast = true;

    // max top/bottom size for lanes
    var allLanes = collectLanes(lanesRoot, [ lanesRoot ]);

    var laneTrbl = asTRBL(laneShape);

    var maxTrbl = {},
        minTrbl = {};

    if (/e/.test(resizeDirection)) {
      minTrbl.right = laneTrbl.left + LANE_MIN_DIMENSIONS.width;
    } else
    if (/w/.test(resizeDirection)) {
      minTrbl.left = laneTrbl.right - LANE_MIN_DIMENSIONS.width;
    }

    allLanes.forEach(function(other) {

      var otherTrbl = asTRBL(other);

      if (/n/.test(resizeDirection)) {

        if (otherTrbl.top < (laneTrbl.top - 10)) {
          isFirst = false;
        }

        // max top size (based on next element)
        if (balanced && abs$2(laneTrbl.top - otherTrbl.bottom) < 10) {
          addMax(maxTrbl, 'top', otherTrbl.top + LANE_MIN_DIMENSIONS.height);
        }

        // min top size (based on self or nested element)
        if (abs$2(laneTrbl.top - otherTrbl.top) < 5) {
          addMin(minTrbl, 'top', otherTrbl.bottom - LANE_MIN_DIMENSIONS.height);
        }
      }

      if (/s/.test(resizeDirection)) {

        if (otherTrbl.bottom > (laneTrbl.bottom + 10)) {
          isLast = false;
        }

        // max bottom size (based on previous element)
        if (balanced && abs$2(laneTrbl.bottom - otherTrbl.top) < 10) {
          addMin(maxTrbl, 'bottom', otherTrbl.bottom - LANE_MIN_DIMENSIONS.height);
        }

        // min bottom size (based on self or nested element)
        if (abs$2(laneTrbl.bottom - otherTrbl.bottom) < 5) {
          addMax(minTrbl, 'bottom', otherTrbl.top + LANE_MIN_DIMENSIONS.height);
        }
      }
    });

    // max top/bottom/left/right size based on flow nodes
    var flowElements = lanesRoot.children.filter(function(s) {
      return !s.hidden && !s.waypoints && (is$1(s, 'bpmn:FlowElement') || is$1(s, 'bpmn:Artifact'));
    });

    flowElements.forEach(function(flowElement) {

      var flowElementTrbl = asTRBL(flowElement);

      if (isFirst && /n/.test(resizeDirection)) {
        addMin(minTrbl, 'top', flowElementTrbl.top - LANE_TOP_PADDING);
      }

      if (/e/.test(resizeDirection)) {
        addMax(minTrbl, 'right', flowElementTrbl.right + LANE_RIGHT_PADDING);
      }

      if (isLast && /s/.test(resizeDirection)) {
        addMax(minTrbl, 'bottom', flowElementTrbl.bottom + LANE_BOTTOM_PADDING);
      }

      if (/w/.test(resizeDirection)) {
        addMin(minTrbl, 'left', flowElementTrbl.left - LANE_LEFT_PADDING);
      }
    });

    return {
      min: minTrbl,
      max: maxTrbl
    };
  }

  var SLIGHTLY_HIGHER_PRIORITY = 1001;


  /**
   * Invoke {@link Modeling#resizeLane} instead of
   * {@link Modeling#resizeShape} when resizing a Lane
   * or Participant shape.
   */
  function ResizeLaneBehavior(eventBus, modeling) {

    eventBus.on('resize.start', SLIGHTLY_HIGHER_PRIORITY + 500, function(event) {
      var context = event.context,
          shape = context.shape;

      if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {

        // should we resize the opposite lane(s) in
        // order to compensate for the resize operation?
        context.balanced = !hasPrimaryModifier(event);
      }
    });

    /**
     * Intercept resize end and call resize lane function instead.
     */
    eventBus.on('resize.end', SLIGHTLY_HIGHER_PRIORITY, function(event) {
      var context = event.context,
          shape = context.shape,
          canExecute = context.canExecute,
          newBounds = context.newBounds;

      if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {

        if (canExecute) {

          // ensure we have actual pixel values for new bounds
          // (important when zoom level was > 1 during move)
          newBounds = roundBounds(newBounds);

          // perform the actual resize
          modeling.resizeLane(shape, newBounds, context.balanced);
        }

        // stop propagation
        return false;
      }
    });
  }

  ResizeLaneBehavior.$inject = [
    'eventBus',
    'modeling'
  ];

  var LOW_PRIORITY$a = 500;


  /**
   * Add referenced root elements (error, escalation, message, signal) if they don't exist.
   * Copy referenced root elements on copy & paste.
   */
  function RootElementReferenceBehavior(
      bpmnjs, eventBus, injector, moddleCopy, bpmnFactory
  ) {
    injector.invoke(CommandInterceptor, this);

    function canHaveRootElementReference(element) {
      return isAny(element, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ]) ||
        hasAnyEventDefinition(element, [
          'bpmn:ErrorEventDefinition',
          'bpmn:EscalationEventDefinition',
          'bpmn:MessageEventDefinition',
          'bpmn:SignalEventDefinition'
        ]);
    }

    function hasRootElement(rootElement) {
      var definitions = bpmnjs.getDefinitions(),
          rootElements = definitions.get('rootElements');

      return !!find(rootElements, matchPattern({ id: rootElement.id }));
    }

    function getRootElementReferencePropertyName(eventDefinition) {
      if (is$1(eventDefinition, 'bpmn:ErrorEventDefinition')) {
        return 'errorRef';
      } else if (is$1(eventDefinition, 'bpmn:EscalationEventDefinition')) {
        return 'escalationRef';
      } else if (is$1(eventDefinition, 'bpmn:MessageEventDefinition')) {
        return 'messageRef';
      } else if (is$1(eventDefinition, 'bpmn:SignalEventDefinition')) {
        return 'signalRef';
      }
    }

    function getRootElement(businessObject) {
      if (isAny(businessObject, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ])) {
        return businessObject.get('messageRef');
      }

      var eventDefinitions = businessObject.get('eventDefinitions'),
          eventDefinition = eventDefinitions[ 0 ];

      return eventDefinition.get(getRootElementReferencePropertyName(eventDefinition));
    }

    function setRootElement(businessObject, rootElement) {
      if (isAny(businessObject, [ 'bpmn:ReceiveTask', 'bpmn:SendTask' ])) {
        return businessObject.set('messageRef', rootElement);
      }

      var eventDefinitions = businessObject.get('eventDefinitions'),
          eventDefinition = eventDefinitions[ 0 ];

      return eventDefinition.set(getRootElementReferencePropertyName(eventDefinition), rootElement);
    }

    // create shape
    this.executed('shape.create', function(context) {
      var shape = context.shape;

      if (!canHaveRootElementReference(shape)) {
        return;
      }

      var businessObject = getBusinessObject(shape),
          rootElement = getRootElement(businessObject),
          rootElements;

      if (rootElement && !hasRootElement(rootElement)) {
        rootElements = bpmnjs.getDefinitions().get('rootElements');

        // add root element
        add(rootElements, rootElement);

        context.addedRootElement = rootElement;
      }
    }, true);

    this.reverted('shape.create', function(context) {
      var addedRootElement = context.addedRootElement;

      if (!addedRootElement) {
        return;
      }

      var rootElements = bpmnjs.getDefinitions().get('rootElements');

      // remove root element
      remove(rootElements, addedRootElement);
    }, true);

    eventBus.on('copyPaste.copyElement', function(context) {
      var descriptor = context.descriptor,
          element = context.element;

      if (element.labelTarget || !canHaveRootElementReference(element)) {
        return;
      }

      var businessObject = getBusinessObject(element),
          rootElement = getRootElement(businessObject);

      if (rootElement) {

        // TODO(nikku): clone on copy
        descriptor.referencedRootElement = rootElement;
      }
    });

    eventBus.on('copyPaste.pasteElement', LOW_PRIORITY$a, function(context) {
      var descriptor = context.descriptor,
          businessObject = descriptor.businessObject,
          referencedRootElement = descriptor.referencedRootElement;

      if (!referencedRootElement) {
        return;
      }

      if (!hasRootElement(referencedRootElement)) {
        referencedRootElement = moddleCopy.copyElement(
          referencedRootElement,
          bpmnFactory.create(referencedRootElement.$type)
        );
      }

      setRootElement(businessObject, referencedRootElement);

      delete descriptor.referencedRootElement;
    });
  }

  RootElementReferenceBehavior.$inject = [
    'bpmnjs',
    'eventBus',
    'injector',
    'moddleCopy',
    'bpmnFactory'
  ];

  e(RootElementReferenceBehavior, CommandInterceptor);

  // helpers //////////

  function hasAnyEventDefinition(element, types) {
    if (!isArray$3(types)) {
      types = [ types ];
    }

    return some(types, function(type) {
      return hasEventDefinition$2(element, type);
    });
  }

  var max$1 = Math.max;


  function SpaceToolBehavior(eventBus) {
    eventBus.on('spaceTool.getMinDimensions', function(context) {
      var shapes = context.shapes,
          axis = context.axis,
          start = context.start,
          minDimensions = {};

      forEach$1(shapes, function(shape) {
        var id = shape.id;

        if (is$1(shape, 'bpmn:Participant')) {

          if (isHorizontal$1(axis)) {
            minDimensions[ id ] = PARTICIPANT_MIN_DIMENSIONS;
          } else {
            minDimensions[ id ] = {
              width: PARTICIPANT_MIN_DIMENSIONS.width,
              height: getParticipantMinHeight(shape, start)
            };
          }

        }

        if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
          minDimensions[ id ] = SUB_PROCESS_MIN_DIMENSIONS;
        }

        if (is$1(shape, 'bpmn:TextAnnotation')) {
          minDimensions[ id ] = TEXT_ANNOTATION_MIN_DIMENSIONS;
        }

        if (is$1(shape, 'bpmn:Group')) {
          minDimensions[ id ] = GROUP_MIN_DIMENSIONS;
        }
      });

      return minDimensions;
    });
  }

  SpaceToolBehavior.$inject = [ 'eventBus' ];


  // helpers //////////
  function isHorizontal$1(axis) {
    return axis === 'x';
  }

  /**
   * Get minimum height for participant taking lanes into account.
   *
   * @param {<djs.model.Shape>} participant
   * @param {number} start
   *
   * @returns {Object}
   */
  function getParticipantMinHeight(participant, start) {
    var lanesMinHeight;

    if (!hasChildLanes(participant)) {
      return PARTICIPANT_MIN_DIMENSIONS.height;
    }

    lanesMinHeight = getLanesMinHeight(participant, start);

    return max$1(PARTICIPANT_MIN_DIMENSIONS.height, lanesMinHeight);
  }

  function hasChildLanes(element) {
    return !!getChildLanes(element).length;
  }

  function getLanesMinHeight(participant, resizeStart) {
    var lanes = getChildLanes(participant),
        resizedLane;

    // find the nested lane which is currently resized
    resizedLane = findResizedLane(lanes, resizeStart);

    // resized lane cannot shrink below the minimum height
    // but remaining lanes' dimensions are kept intact
    return participant.height - resizedLane.height + LANE_MIN_DIMENSIONS.height;
  }

  /**
   * Find nested lane which is currently resized.
   *
   * @param {Array<djs.model.Shape>} lanes
   * @param {number} resizeStart
   */
  function findResizedLane(lanes, resizeStart) {
    var i, lane, childLanes;

    for (i = 0; i < lanes.length; i++) {
      lane = lanes[i];

      // resizing current lane or a lane nested
      if (resizeStart >= lane.y && resizeStart <= lane.y + lane.height) {
        childLanes = getChildLanes(lane);

        // a nested lane is resized
        if (childLanes.length) {
          return findResizedLane(childLanes, resizeStart);
        }

        // current lane is the resized one
        return lane;
      }
    }
  }

  var LOW_PRIORITY$9 = 400;
  var HIGH_PRIORITY$8 = 600;

  var DEFAULT_POSITION = {
    x: 180,
    y: 160
  };


  /**
   * Creates bpmndi:BPMNPlane elements and canvas planes when collapsed subprocesses are created.
   *
   *
   * @param {Canvas} canvas
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   * @param {ElementFactory} elementFactory
   * @param {BpmnFactory} bpmnFactory
   * @param {Bpmnjs} bpmnjs
   * @param {ElementRegistry} elementRegistry
   */
  function SubProcessPlaneBehavior(
      canvas, eventBus, modeling,
      elementFactory, bpmnFactory, bpmnjs, elementRegistry) {

    CommandInterceptor.call(this, eventBus);

    this._canvas = canvas;
    this._eventBus = eventBus;
    this._modeling = modeling;
    this._elementFactory = elementFactory;
    this._bpmnFactory = bpmnFactory;
    this._bpmnjs = bpmnjs;
    this._elementRegistry = elementRegistry;

    var self = this;

    function isCollapsedSubProcess(element) {
      return is$1(element, 'bpmn:SubProcess') && !isExpanded(element);
    }

    function createRoot(context) {
      var shape = context.shape,
          rootElement = context.newRootElement;

      var businessObject = getBusinessObject(shape);

      rootElement = self._addDiagram(rootElement || businessObject);

      context.newRootElement = canvas.addRootElement(rootElement);
    }

    function removeRoot(context) {
      var shape = context.shape;

      var businessObject = getBusinessObject(shape);
      self._removeDiagram(businessObject);

      var rootElement = context.newRootElement = elementRegistry.get(getPlaneIdFromShape(businessObject));

      canvas.removeRootElement(rootElement);
    }

    // add plane elements for newly created sub-processes
    // this ensures we can actually drill down into the element
    this.executed('shape.create', function(context) {
      var shape = context.shape;
      if (!isCollapsedSubProcess(shape)) {
        return;
      }

      createRoot(context);
    }, true);


    this.postExecuted('shape.create', function(context) {
      var shape = context.shape,
          rootElement = context.newRootElement;

      if (!rootElement || !shape.children) {
        return;
      }

      self._showRecursively(shape.children);

      self._moveChildrenToShape(shape, rootElement);
    }, true);


    this.reverted('shape.create', function(context) {
      var shape = context.shape;
      if (!isCollapsedSubProcess(shape)) {
        return;
      }

      removeRoot(context);
    }, true);


    this.preExecuted('shape.delete', function(context) {
      var shape = context.shape;
      if (!isCollapsedSubProcess(shape)) {
        return;
      }

      var attachedRoot = elementRegistry.get(getPlaneIdFromShape(shape));

      if (!attachedRoot) {
        return;
      }

      modeling.removeElements(attachedRoot.children.slice());
    }, true);


    this.executed('shape.delete', function(context) {
      var shape = context.shape;
      if (!isCollapsedSubProcess(shape)) {
        return;
      }
      removeRoot(context);
    }, true);


    this.reverted('shape.delete', function(context) {
      var shape = context.shape;
      if (!isCollapsedSubProcess(shape)) {
        return;
      }

      createRoot(context);
    }, true);


    this.preExecuted('shape.replace', function(context) {
      var oldShape = context.oldShape;
      var newShape = context.newShape;

      if (!isCollapsedSubProcess(oldShape) || !isCollapsedSubProcess(newShape)) {
        return;
      }

      // old plane could have content,
      // we remove it so it is not recursively deleted from 'shape.delete'
      context.oldRoot = canvas.removeRootElement(getPlaneIdFromShape(oldShape));
    }, true);


    this.postExecuted('shape.replace', function(context) {
      var newShape = context.newShape,
          source = context.oldRoot,
          target = canvas.findRoot(getPlaneIdFromShape(newShape));

      if (!source || !target) {
        return;
      }
      var elements = source.children;

      modeling.moveElements(elements, { x: 0, y: 0 }, target);
    }, true);


    // rename primary elements when the secondary element changes
    // this ensures rootElement.id = element.id + '_plane'
    this.executed('element.updateProperties', function(context) {
      var shape = context.element;

      if (!is$1(shape, 'bpmn:SubProcess')) {
        return;
      }

      var properties = context.properties;
      var oldProperties = context.oldProperties;

      var oldId = oldProperties.id,
          newId = properties.id;

      if (oldId === newId) {
        return;
      }

      if (isPlane(shape)) {
        elementRegistry.updateId(shape, toPlaneId(newId));
        elementRegistry.updateId(oldId, newId);

        return;
      }

      var planeElement = elementRegistry.get(toPlaneId(oldId));

      if (!planeElement) {
        return;
      }

      elementRegistry.updateId(toPlaneId(oldId), toPlaneId(newId));
    }, true);


    this.reverted('element.updateProperties', function(context) {
      var shape = context.element;

      if (!is$1(shape, 'bpmn:SubProcess')) {
        return;
      }

      var properties = context.properties;
      var oldProperties = context.oldProperties;

      var oldId = oldProperties.id,
          newId = properties.id;

      if (oldId === newId) {
        return;
      }

      if (isPlane(shape)) {
        elementRegistry.updateId(shape, toPlaneId(oldId));
        elementRegistry.updateId(newId, oldId);

        return;
      }

      var planeElement = elementRegistry.get(toPlaneId(newId));

      if (!planeElement) {
        return;
      }

      elementRegistry.updateId(planeElement, toPlaneId(oldId));
    }, true);

    // re-throw element.changed to re-render primary shape if associated plane has
    // changed (e.g. bpmn:name property has changed)
    eventBus.on('element.changed', function(context) {
      var element = context.element;

      if (!isPlane(element)) {
        return;
      }

      var plane = element;

      var primaryShape = elementRegistry.get(getShapeIdFromPlane(plane));

      // do not re-throw if no associated primary shape (e.g. bpmn:Process)
      if (!primaryShape || primaryShape === plane) {
        return;
      }

      eventBus.fire('element.changed', { element: primaryShape });
    });


    // create/remove plane for the subprocess
    this.executed('shape.toggleCollapse', LOW_PRIORITY$9, function(context) {
      var shape = context.shape;

      if (!is$1(shape, 'bpmn:SubProcess')) {
        return;
      }

      if (!isExpanded(shape)) {
        createRoot(context);
        self._showRecursively(shape.children);
      } else {
        removeRoot(context);
      }

    }, true);


    // create/remove plane for the subprocess
    this.reverted('shape.toggleCollapse', LOW_PRIORITY$9, function(context) {
      var shape = context.shape;

      if (!is$1(shape, 'bpmn:SubProcess')) {
        return;
      }

      if (!isExpanded(shape)) {
        createRoot(context);
        self._showRecursively(shape.children);
      } else {
        removeRoot(context);
      }

    }, true);

    // move elements between planes
    this.postExecuted('shape.toggleCollapse', HIGH_PRIORITY$8, function(context) {
      var shape = context.shape;

      if (!is$1(shape, 'bpmn:SubProcess')) {
        return;
      }

      var rootElement = context.newRootElement;

      if (!rootElement) {
        return;
      }

      if (!isExpanded(shape)) {

        // collapsed
        self._moveChildrenToShape(shape, rootElement);

      } else {
        self._moveChildrenToShape(rootElement, shape);
      }
    }, true);


    // copy-paste ///////////

    // add elements in plane to tree
    eventBus.on('copyPaste.createTree', function(context) {
      var element = context.element,
          children = context.children;

      if (!isCollapsedSubProcess(element)) {
        return;
      }

      var id = getPlaneIdFromShape(element);
      var parent = elementRegistry.get(id);

      if (parent) {

        // do not copy invisible root element
        children.push.apply(children, parent.children);
      }
    });

    // set plane children as direct children of collapsed shape
    eventBus.on('copyPaste.copyElement', function(context) {
      var descriptor = context.descriptor,
          element = context.element,
          elements = context.elements;

      var parent = element.parent;

      var isPlane = is$1(getDi(parent), 'bpmndi:BPMNPlane');
      if (!isPlane) {
        return;
      }

      var parentId = getShapeIdFromPlane(parent);

      var referencedShape = find(elements, function(element) {
        return element.id === parentId;
      });

      if (!referencedShape) {
        return;
      }

      descriptor.parent = referencedShape.id;
    });

    // hide children during pasting
    eventBus.on('copyPaste.pasteElement', function(context) {
      var descriptor = context.descriptor;

      if (!descriptor.parent) {
        return;
      }

      if (isCollapsedSubProcess(descriptor.parent) || descriptor.parent.hidden) {
        descriptor.hidden = true;
      }
    });

  }

  e(SubProcessPlaneBehavior, CommandInterceptor);

  /**
   * Moves the child elements from source to target.
   *
   * If the target is a plane, the children are moved to the top left corner.
   * Otherwise, the center of the target is used.
   *
   * @param {Object|djs.model.Base} source
   * @param {Object|djs.model.Base} target
   */
  SubProcessPlaneBehavior.prototype._moveChildrenToShape = function(source, target) {
    var modeling = this._modeling;

    var children = source.children;
    var offset;

    if (!children) {
      return;
    }

    // add external labels that weren't children of sub process
    children = children.concat(children.reduce(function(labels, child) {
      if (child.label && child.label.parent !== source) {
        return labels.concat(child.label);
      }

      return labels;
    }, []));

    // only change plane if there are no visible children, but don't move them
    var visibleChildren = children.filter(function(child) {
      return !child.hidden;
    });

    if (!visibleChildren.length) {
      modeling.moveElements(children, { x: 0, y: 0 }, target, { autoResize: false });
      return;
    }

    var childrenBounds = getBBox(visibleChildren);

    // target is a plane
    if (!target.x) {
      offset = {
        x: DEFAULT_POSITION.x - childrenBounds.x,
        y: DEFAULT_POSITION.y - childrenBounds.y
      };
    }

    // source is a plane
    else {

      // move relative to the center of the shape
      var targetMid = getMid(target);
      var childrenMid = getMid(childrenBounds);

      offset = {
        x: targetMid.x - childrenMid.x,
        y: targetMid.y - childrenMid.y
      };
    }

    modeling.moveElements(children, offset, target, { autoResize: false });
  };

  /**
   * Sets `hidden` property on all children of the given shape.
   *
   * @param {Array} elements
   * @param {Boolean} [hidden]
   * @returns {Array} all child elements
   */
  SubProcessPlaneBehavior.prototype._showRecursively = function(elements, hidden) {
    var self = this;

    var result = [];
    elements.forEach(function(element) {
      element.hidden = !!hidden;

      result = result.concat(element);

      if (element.children) {
        result = result.concat(
          self._showRecursively(element.children, element.collapsed || hidden)
        );
      }
    });

    return result;
  };

  /**
  * Adds a given rootElement to the bpmnDi diagrams.
  *
  * @param {Object} rootElement
  * @returns {Object} planeElement
  */
  SubProcessPlaneBehavior.prototype._addDiagram = function(planeElement) {
    var bpmnjs = this._bpmnjs;
    var diagrams = bpmnjs.getDefinitions().diagrams;

    if (!planeElement.businessObject) {
      planeElement = this._createNewDiagram(planeElement);
    }

    diagrams.push(planeElement.di.$parent);

    return planeElement;
  };


  /**
  * Creates a new plane element for the given sub process.
  *
  * @param {Object} bpmnElement
  *
  * @return {Object} new diagram element
  */
  SubProcessPlaneBehavior.prototype._createNewDiagram = function(bpmnElement) {
    var bpmnFactory = this._bpmnFactory;
    var elementFactory = this._elementFactory;

    var diPlane = bpmnFactory.create('bpmndi:BPMNPlane', {
      bpmnElement: bpmnElement
    });
    var diDiagram = bpmnFactory.create('bpmndi:BPMNDiagram', {
      plane: diPlane
    });
    diPlane.$parent = diDiagram;

    // add a virtual element (not being drawn),
    // a copy cat of our BpmnImporter code
    var planeElement = elementFactory.createRoot({
      id: getPlaneIdFromShape(bpmnElement),
      type: bpmnElement.$type,
      di: diPlane,
      businessObject: bpmnElement,
      collapsed: true
    });

    return planeElement;
  };

  /**
   * Removes the diagram for a given root element
   *
   * @param {Object} rootElement
   * @returns {Object} removed bpmndi:BPMNDiagram
   */
  SubProcessPlaneBehavior.prototype._removeDiagram = function(rootElement) {
    var bpmnjs = this._bpmnjs;

    var diagrams = bpmnjs.getDefinitions().diagrams;

    var removedDiagram = find(diagrams, function(diagram) {
      return diagram.plane.bpmnElement.id === rootElement.id;
    });

    diagrams.splice(diagrams.indexOf(removedDiagram), 1);

    return removedDiagram;
  };


  SubProcessPlaneBehavior.$inject = [
    'canvas',
    'eventBus',
    'modeling',
    'elementFactory',
    'bpmnFactory',
    'bpmnjs',
    'elementRegistry'
  ];

  /**
   * Add start event replacing element with expanded sub process.
   *
   * @param {Injector} injector
   * @param {Modeling} modeling
   */
  function SubProcessStartEventBehavior(injector, modeling) {
    injector.invoke(CommandInterceptor, this);

    this.postExecuted('shape.replace', function(event) {
      var oldShape = event.context.oldShape,
          newShape = event.context.newShape;

      if (
        !is$1(newShape, 'bpmn:SubProcess') ||
        ! (is$1(oldShape, 'bpmn:Task') || is$1(oldShape, 'bpmn:CallActivity')) ||
        !isExpanded(newShape)
      ) {
        return;
      }

      var position = getStartEventPosition(newShape);

      modeling.createShape({ type: 'bpmn:StartEvent' }, position, newShape);
    });
  }

  SubProcessStartEventBehavior.$inject = [
    'injector',
    'modeling'
  ];

  e(SubProcessStartEventBehavior, CommandInterceptor);

  // helpers //////////

  function getStartEventPosition(shape) {
    return {
      x: shape.x + shape.width / 6,
      y: shape.y + shape.height / 2
    };
  }

  function ToggleCollapseConnectionBehaviour(
      eventBus, modeling
  ) {

    CommandInterceptor.call(this, eventBus);

    this.postExecuted('shape.toggleCollapse', 1500, function(context) {

      // var shape = context.shape;
      var shape = context.shape;

      // only change connections when collapsing
      if (isExpanded(shape)) {
        return;
      }

      var allChildren = selfAndAllChildren(shape);

      allChildren.forEach(function(child) {

        // Ensure that the connection array is not modified during iteration
        var incomingConnections = child.incoming.slice(),
            outgoingConnections = child.outgoing.slice();

        forEach$1(incomingConnections, function(c) {
          handleConnection(c, true);
        });

        forEach$1(outgoingConnections, function(c) {
          handleConnection(c, false);
        });
      });


      function handleConnection(c, incoming) {
        if (allChildren.indexOf(c.source) !== -1 && allChildren.indexOf(c.target) !== -1) {
          return;
        }

        if (incoming) {
          modeling.reconnectEnd(c, shape, getMid(shape));
        } else {
          modeling.reconnectStart(c, shape, getMid(shape));
        }

      }

    }, true);

  }

  e(ToggleCollapseConnectionBehaviour, CommandInterceptor);

  ToggleCollapseConnectionBehaviour.$inject = [
    'eventBus',
    'modeling',
  ];

  var LOW_PRIORITY$8 = 500;


  function ToggleElementCollapseBehaviour(
      eventBus, elementFactory, modeling,
      resize) {

    CommandInterceptor.call(this, eventBus);


    function hideEmptyLabels(children) {
      if (children.length) {
        children.forEach(function(child) {
          if (child.type === 'label' && !child.businessObject.name) {
            child.hidden = true;
          }
        });
      }
    }

    function expandedBounds(shape, defaultSize) {
      var children = shape.children,
          newBounds = defaultSize,
          visibleElements,
          visibleBBox;

      visibleElements = filterVisible(children).concat([ shape ]);

      visibleBBox = computeChildrenBBox(visibleElements);

      if (visibleBBox) {

        // center to visibleBBox with max(defaultSize, childrenBounds)
        newBounds.width = Math.max(visibleBBox.width, newBounds.width);
        newBounds.height = Math.max(visibleBBox.height, newBounds.height);

        newBounds.x = visibleBBox.x + (visibleBBox.width - newBounds.width) / 2;
        newBounds.y = visibleBBox.y + (visibleBBox.height - newBounds.height) / 2;
      } else {

        // center to collapsed shape with defaultSize
        newBounds.x = shape.x + (shape.width - newBounds.width) / 2;
        newBounds.y = shape.y + (shape.height - newBounds.height) / 2;
      }

      return newBounds;
    }

    function collapsedBounds(shape, defaultSize) {

      return {
        x: shape.x + (shape.width - defaultSize.width) / 2,
        y: shape.y + (shape.height - defaultSize.height) / 2,
        width: defaultSize.width,
        height: defaultSize.height
      };
    }

    this.executed([ 'shape.toggleCollapse' ], LOW_PRIORITY$8, function(e) {

      var context = e.context,
          shape = context.shape;

      if (!is$1(shape, 'bpmn:SubProcess')) {
        return;
      }

      if (!shape.collapsed) {

        // all children got made visible through djs, hide empty labels
        hideEmptyLabels(shape.children);

        // remove collapsed marker
        getDi(shape).isExpanded = true;
      } else {

        // place collapsed marker
        getDi(shape).isExpanded = false;
      }
    });

    this.reverted([ 'shape.toggleCollapse' ], LOW_PRIORITY$8, function(e) {

      var context = e.context;
      var shape = context.shape;


      // revert removing/placing collapsed marker
      if (!shape.collapsed) {
        getDi(shape).isExpanded = true;

      } else {
        getDi(shape).isExpanded = false;
      }
    });

    this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$8, function(e) {
      var shape = e.context.shape,
          defaultSize = elementFactory.getDefaultSize(shape),
          newBounds;

      if (shape.collapsed) {

        // resize to default size of collapsed shapes
        newBounds = collapsedBounds(shape, defaultSize);
      } else {

        // resize to bounds of max(visible children, defaultSize)
        newBounds = expandedBounds(shape, defaultSize);
      }

      modeling.resizeShape(shape, newBounds, null, {
        autoResize: shape.collapsed ? false : 'nwse'
      });
    });

  }


  e(ToggleElementCollapseBehaviour, CommandInterceptor);

  ToggleElementCollapseBehaviour.$inject = [
    'eventBus',
    'elementFactory',
    'modeling'
  ];


  // helpers //////////////////////

  function filterVisible(elements) {
    return elements.filter(function(e) {
      return !e.hidden;
    });
  }

  /**
   * Unclaims model IDs on element deletion.
   *
   * @param {Canvas} canvas
   * @param {Injector} injector
   * @param {Moddle} moddle
   * @param {Modeling} modeling
   */
  function UnclaimIdBehavior(canvas, injector, moddle, modeling) {
    injector.invoke(CommandInterceptor, this);

    this.preExecute('shape.delete', function(event) {
      var context = event.context,
          shape = context.shape,
          shapeBo = shape.businessObject;

      if (isLabel$6(shape)) {
        return;
      }

      if (is$1(shape, 'bpmn:Participant') && isExpanded(shape)) {
        moddle.ids.unclaim(shapeBo.processRef.id);
      }

      modeling.unclaimId(shapeBo.id, shapeBo);
    });


    this.preExecute('connection.delete', function(event) {
      var context = event.context,
          connection = context.connection,
          connectionBo = connection.businessObject;

      modeling.unclaimId(connectionBo.id, connectionBo);
    });

    this.preExecute('canvas.updateRoot', function() {
      var rootElement = canvas.getRootElement(),
          rootElementBo = rootElement.businessObject;

      if (is$1(rootElement, 'bpmn:Collaboration')) {
        moddle.ids.unclaim(rootElementBo.id);
      }
    });
  }

  e(UnclaimIdBehavior, CommandInterceptor);

  UnclaimIdBehavior.$inject = [ 'canvas', 'injector', 'moddle', 'modeling' ];

  /**
   * A behavior that unsets the Default property of
   * sequence flow source on element delete, if the
   * removed element is the Gateway or Task's default flow.
   *
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   */
  function DeleteSequenceFlowBehavior(eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);


    this.preExecute('connection.delete', function(event) {
      var context = event.context,
          connection = context.connection,
          source = connection.source;

      if (isDefaultFlow(connection, source)) {
        modeling.updateProperties(source, {
          'default': null
        });
      }
    });
  }

  e(DeleteSequenceFlowBehavior, CommandInterceptor);

  DeleteSequenceFlowBehavior.$inject = [
    'eventBus',
    'modeling'
  ];


  // helpers //////////////////////

  function isDefaultFlow(connection, source) {

    if (!is$1(connection, 'bpmn:SequenceFlow')) {
      return false;
    }

    var sourceBo = getBusinessObject(source),
        sequenceFlow = getBusinessObject(connection);

    return sourceBo.get('default') === sequenceFlow;
  }

  var LOW_PRIORITY$7 = 500,
      HIGH_PRIORITY$7 = 5000;


  /**
   * BPMN specific delete lane behavior
   */
  function UpdateFlowNodeRefsBehavior(eventBus, modeling, translate) {

    CommandInterceptor.call(this, eventBus);

    /**
     * Ok, this is it:
     *
     * We have to update the Lane#flowNodeRefs _and_
     * FlowNode#lanes with every FlowNode move/resize and
     * Lane move/resize.
     *
     * We want to group that stuff to recompute containments
     * as efficient as possible.
     *
     * Yea!
     */

    // the update context
    var context;


    function initContext() {
      context = context || new UpdateContext();
      context.enter();

      return context;
    }

    function getContext() {
      if (!context) {
        throw new Error(translate('out of bounds release'));
      }

      return context;
    }

    function releaseContext() {

      if (!context) {
        throw new Error(translate('out of bounds release'));
      }

      var triggerUpdate = context.leave();

      if (triggerUpdate) {
        modeling.updateLaneRefs(context.flowNodes, context.lanes);

        context = null;
      }

      return triggerUpdate;
    }


    var laneRefUpdateEvents = [
      'spaceTool',
      'lane.add',
      'lane.resize',
      'lane.split',
      'elements.create',
      'elements.delete',
      'elements.move',
      'shape.create',
      'shape.delete',
      'shape.move',
      'shape.resize'
    ];


    // listen to a lot of stuff to group lane updates

    this.preExecute(laneRefUpdateEvents, HIGH_PRIORITY$7, function(event) {
      initContext();
    });

    this.postExecuted(laneRefUpdateEvents, LOW_PRIORITY$7, function(event) {
      releaseContext();
    });


    // Mark flow nodes + lanes that need an update

    this.preExecute([
      'shape.create',
      'shape.move',
      'shape.delete',
      'shape.resize'
    ], function(event) {

      var context = event.context,
          shape = context.shape;

      var updateContext = getContext();

      // no need to update labels
      if (shape.labelTarget) {
        return;
      }

      if (is$1(shape, 'bpmn:Lane')) {
        updateContext.addLane(shape);
      }

      if (is$1(shape, 'bpmn:FlowNode')) {
        updateContext.addFlowNode(shape);
      }
    });
  }

  UpdateFlowNodeRefsBehavior.$inject = [
    'eventBus',
    'modeling' ,
    'translate'
  ];

  e(UpdateFlowNodeRefsBehavior, CommandInterceptor);


  function UpdateContext() {

    this.flowNodes = [];
    this.lanes = [];

    this.counter = 0;

    this.addLane = function(lane) {
      this.lanes.push(lane);
    };

    this.addFlowNode = function(flowNode) {
      this.flowNodes.push(flowNode);
    };

    this.enter = function() {
      this.counter++;
    };

    this.leave = function() {
      this.counter--;

      return !this.counter;
    };
  }

  var BehaviorModule = {
    __init__: [
      'adaptiveLabelPositioningBehavior',
      'appendBehavior',
      'associationBehavior',
      'attachEventBehavior',
      'boundaryEventBehavior',
      'createBehavior',
      'createDataObjectBehavior',
      'createParticipantBehavior',
      'dataInputAssociationBehavior',
      'dataStoreBehavior',
      'deleteLaneBehavior',
      'detachEventBehavior',
      'dropOnFlowBehavior',
      'eventBasedGatewayBehavior',
      'fixHoverBehavior',
      'groupBehavior',
      'importDockingFix',
      'isHorizontalFix',
      'labelBehavior',
      'layoutConnectionBehavior',
      'messageFlowBehavior',
      'modelingFeedback',
      'removeElementBehavior',
      'removeEmbeddedLabelBoundsBehavior',
      'removeParticipantBehavior',
      'replaceConnectionBehavior',
      'replaceElementBehaviour',
      'resizeBehavior',
      'resizeLaneBehavior',
      'rootElementReferenceBehavior',
      'spaceToolBehavior',
      'subProcessPlaneBehavior',
      'subProcessStartEventBehavior',
      'toggleCollapseConnectionBehaviour',
      'toggleElementCollapseBehaviour',
      'unclaimIdBehavior',
      'updateFlowNodeRefsBehavior',
      'unsetDefaultFlowBehavior'
    ],
    adaptiveLabelPositioningBehavior: [ 'type', AdaptiveLabelPositioningBehavior ],
    appendBehavior: [ 'type', AppendBehavior ],
    associationBehavior: [ 'type', AssociationBehavior ],
    attachEventBehavior: [ 'type', AttachEventBehavior ],
    boundaryEventBehavior: [ 'type', BoundaryEventBehavior ],
    createBehavior: [ 'type', CreateBehavior ],
    createDataObjectBehavior: [ 'type', CreateDataObjectBehavior ],
    createParticipantBehavior: [ 'type', CreateParticipantBehavior ],
    dataInputAssociationBehavior: [ 'type', DataInputAssociationBehavior ],
    dataStoreBehavior: [ 'type', DataStoreBehavior ],
    deleteLaneBehavior: [ 'type', DeleteLaneBehavior ],
    detachEventBehavior: [ 'type', DetachEventBehavior ],
    dropOnFlowBehavior: [ 'type', DropOnFlowBehavior ],
    eventBasedGatewayBehavior: [ 'type', EventBasedGatewayBehavior ],
    fixHoverBehavior: [ 'type', FixHoverBehavior ],
    groupBehavior: [ 'type', GroupBehavior ],
    importDockingFix: [ 'type', ImportDockingFix ],
    isHorizontalFix: [ 'type', IsHorizontalFix ],
    labelBehavior: [ 'type', LabelBehavior ],
    layoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ],
    messageFlowBehavior: [ 'type', MessageFlowBehavior ],
    modelingFeedback: [ 'type', ModelingFeedback ],
    removeElementBehavior: [ 'type', RemoveElementBehavior ],
    removeEmbeddedLabelBoundsBehavior: [ 'type', RemoveEmbeddedLabelBoundsBehavior ],
    removeParticipantBehavior: [ 'type', RemoveParticipantBehavior ],
    replaceConnectionBehavior: [ 'type', ReplaceConnectionBehavior ],
    replaceElementBehaviour: [ 'type', ReplaceElementBehaviour ],
    resizeBehavior: [ 'type', ResizeBehavior ],
    resizeLaneBehavior: [ 'type', ResizeLaneBehavior ],
    rootElementReferenceBehavior: [ 'type', RootElementReferenceBehavior ],
    spaceToolBehavior: [ 'type', SpaceToolBehavior ],
    subProcessPlaneBehavior: [ 'type', SubProcessPlaneBehavior ],
    subProcessStartEventBehavior: [ 'type', SubProcessStartEventBehavior ],
    toggleCollapseConnectionBehaviour: [ 'type', ToggleCollapseConnectionBehaviour ],
    toggleElementCollapseBehaviour : [ 'type', ToggleElementCollapseBehaviour ],
    unclaimIdBehavior: [ 'type', UnclaimIdBehavior ],
    unsetDefaultFlowBehavior: [ 'type', DeleteSequenceFlowBehavior ],
    updateFlowNodeRefsBehavior: [ 'type', UpdateFlowNodeRefsBehavior ]
  };

  function getBoundaryAttachment(position, targetBounds) {

    var orientation = getOrientation(position, targetBounds, -15);

    if (orientation !== 'intersect') {
      return orientation;
    } else {
      return null;
    }
  }

  /**
   * BPMN specific modeling rule
   */
  function BpmnRules(eventBus) {
    RuleProvider.call(this, eventBus);
  }

  e(BpmnRules, RuleProvider);

  BpmnRules.$inject = [ 'eventBus' ];

  BpmnRules.prototype.init = function() {

    this.addRule('connection.start', function(context) {
      var source = context.source;

      return canStartConnection(source);
    });

    this.addRule('connection.create', function(context) {
      var source = context.source,
          target = context.target,
          hints = context.hints || {},
          targetParent = hints.targetParent,
          targetAttach = hints.targetAttach;

      // don't allow incoming connections on
      // newly created boundary events
      // to boundary events
      if (targetAttach) {
        return false;
      }

      // temporarily set target parent for scoping
      // checks to work
      if (targetParent) {
        target.parent = targetParent;
      }

      try {
        return canConnect(source, target);
      } finally {

        // unset temporary target parent
        if (targetParent) {
          target.parent = null;
        }
      }
    });

    this.addRule('connection.reconnect', function(context) {

      var connection = context.connection,
          source = context.source,
          target = context.target;

      return canConnect(source, target, connection);
    });

    this.addRule('connection.updateWaypoints', function(context) {
      return {
        type: context.connection.type
      };
    });

    this.addRule('shape.resize', function(context) {

      var shape = context.shape,
          newBounds = context.newBounds;

      return canResize(shape, newBounds);
    });

    this.addRule('elements.create', function(context) {
      var elements = context.elements,
          position = context.position,
          target = context.target;

      if (isConnection$8(target) && !canInsert(elements, target)) {
        return false;
      }

      return every(elements, function(element) {
        if (isConnection$8(element)) {
          return canConnect(element.source, element.target, element);
        }

        if (element.host) {
          return canAttach(element, element.host, null, position);
        }

        return canCreate(element, target, null);
      });
    });

    this.addRule('elements.move', function(context) {

      var target = context.target,
          shapes = context.shapes,
          position = context.position;

      return canAttach(shapes, target, null, position) ||
             canReplace(shapes, target, position) ||
             canMove(shapes, target) ||
             canInsert(shapes, target);
    });

    this.addRule('shape.create', function(context) {
      return canCreate(
        context.shape,
        context.target,
        context.source,
        context.position
      );
    });

    this.addRule('shape.attach', function(context) {

      return canAttach(
        context.shape,
        context.target,
        null,
        context.position
      );
    });

    this.addRule('element.copy', function(context) {
      var element = context.element,
          elements = context.elements;

      return canCopy(elements, element);
    });
  };

  BpmnRules.prototype.canConnectMessageFlow = canConnectMessageFlow;

  BpmnRules.prototype.canConnectSequenceFlow = canConnectSequenceFlow;

  BpmnRules.prototype.canConnectDataAssociation = canConnectDataAssociation;

  BpmnRules.prototype.canConnectAssociation = canConnectAssociation;

  BpmnRules.prototype.canMove = canMove;

  BpmnRules.prototype.canAttach = canAttach;

  BpmnRules.prototype.canReplace = canReplace;

  BpmnRules.prototype.canDrop = canDrop;

  BpmnRules.prototype.canInsert = canInsert;

  BpmnRules.prototype.canCreate = canCreate;

  BpmnRules.prototype.canConnect = canConnect;

  BpmnRules.prototype.canResize = canResize;

  BpmnRules.prototype.canCopy = canCopy;

  /**
   * Utility functions for rule checking
   */

  /**
   * Checks if given element can be used for starting connection.
   *
   * @param  {Element} source
   * @return {boolean}
   */
  function canStartConnection(element) {
    if (nonExistingOrLabel(element)) {
      return null;
    }

    return isAny(element, [
      'bpmn:FlowNode',
      'bpmn:InteractionNode',
      'bpmn:DataObjectReference',
      'bpmn:DataStoreReference',
      'bpmn:Group',
      'bpmn:TextAnnotation'
    ]);
  }

  function nonExistingOrLabel(element) {
    return !element || isLabel$6(element);
  }

  function isSame$1(a, b) {
    return a === b;
  }

  function getOrganizationalParent(element) {

    do {
      if (is$1(element, 'bpmn:Process')) {
        return getBusinessObject(element);
      }

      if (is$1(element, 'bpmn:Participant')) {
        return (
          getBusinessObject(element).processRef ||
          getBusinessObject(element)
        );
      }
    } while ((element = element.parent));

  }

  function isTextAnnotation(element) {
    return is$1(element, 'bpmn:TextAnnotation');
  }

  function isGroup(element) {
    return is$1(element, 'bpmn:Group') && !element.labelTarget;
  }

  function isCompensationBoundary(element) {
    return is$1(element, 'bpmn:BoundaryEvent') &&
           hasEventDefinition(element, 'bpmn:CompensateEventDefinition');
  }

  function isForCompensation(e) {
    return getBusinessObject(e).isForCompensation;
  }

  function isSameOrganization(a, b) {
    var parentA = getOrganizationalParent(a),
        parentB = getOrganizationalParent(b);

    return parentA === parentB;
  }

  function isMessageFlowSource(element) {
    return (
      is$1(element, 'bpmn:InteractionNode') &&
      !is$1(element, 'bpmn:BoundaryEvent') && (
        !is$1(element, 'bpmn:Event') || (
          is$1(element, 'bpmn:ThrowEvent') &&
          hasEventDefinitionOrNone(element, 'bpmn:MessageEventDefinition')
        )
      )
    );
  }

  function isMessageFlowTarget(element) {
    return (
      is$1(element, 'bpmn:InteractionNode') &&
      !isForCompensation(element) && (
        !is$1(element, 'bpmn:Event') || (
          is$1(element, 'bpmn:CatchEvent') &&
          hasEventDefinitionOrNone(element, 'bpmn:MessageEventDefinition')
        )
      ) && !(
        is$1(element, 'bpmn:BoundaryEvent') &&
        !hasEventDefinition(element, 'bpmn:MessageEventDefinition')
      )
    );
  }

  function getScopeParent(element) {

    var parent = element;

    while ((parent = parent.parent)) {

      if (is$1(parent, 'bpmn:FlowElementsContainer')) {
        return getBusinessObject(parent);
      }

      if (is$1(parent, 'bpmn:Participant')) {
        return getBusinessObject(parent).processRef;
      }
    }

    return null;
  }

  function isSameScope(a, b) {
    var scopeParentA = getScopeParent(a),
        scopeParentB = getScopeParent(b);

    return scopeParentA === scopeParentB;
  }

  function hasEventDefinition(element, eventDefinition) {
    var bo = getBusinessObject(element);

    return !!find(bo.eventDefinitions || [], function(definition) {
      return is$1(definition, eventDefinition);
    });
  }

  function hasEventDefinitionOrNone(element, eventDefinition) {
    var bo = getBusinessObject(element);

    return (bo.eventDefinitions || []).every(function(definition) {
      return is$1(definition, eventDefinition);
    });
  }

  function isSequenceFlowSource(element) {
    return (
      is$1(element, 'bpmn:FlowNode') &&
      !is$1(element, 'bpmn:EndEvent') &&
      !isEventSubProcess(element) &&
      !(is$1(element, 'bpmn:IntermediateThrowEvent') &&
        hasEventDefinition(element, 'bpmn:LinkEventDefinition')
      ) &&
      !isCompensationBoundary(element) &&
      !isForCompensation(element)
    );
  }

  function isSequenceFlowTarget(element) {
    return (
      is$1(element, 'bpmn:FlowNode') &&
      !is$1(element, 'bpmn:StartEvent') &&
      !is$1(element, 'bpmn:BoundaryEvent') &&
      !isEventSubProcess(element) &&
      !(is$1(element, 'bpmn:IntermediateCatchEvent') &&
        hasEventDefinition(element, 'bpmn:LinkEventDefinition')
      ) &&
      !isForCompensation(element)
    );
  }

  function isEventBasedTarget(element) {
    return (
      is$1(element, 'bpmn:ReceiveTask') || (
        is$1(element, 'bpmn:IntermediateCatchEvent') && (
          hasEventDefinition(element, 'bpmn:MessageEventDefinition') ||
          hasEventDefinition(element, 'bpmn:TimerEventDefinition') ||
          hasEventDefinition(element, 'bpmn:ConditionalEventDefinition') ||
          hasEventDefinition(element, 'bpmn:SignalEventDefinition')
        )
      )
    );
  }

  function isConnection$8(element) {
    return element.waypoints;
  }

  function getParents(element) {

    var parents = [];

    while (element) {
      element = element.parent;

      if (element) {
        parents.push(element);
      }
    }

    return parents;
  }

  function isParent(possibleParent, element) {
    var allParents = getParents(element);
    return allParents.indexOf(possibleParent) !== -1;
  }

  function canConnect(source, target, connection) {

    if (nonExistingOrLabel(source) || nonExistingOrLabel(target)) {
      return null;
    }

    if (!is$1(connection, 'bpmn:DataAssociation')) {

      if (canConnectMessageFlow(source, target)) {
        return { type: 'bpmn:MessageFlow' };
      }

      if (canConnectSequenceFlow(source, target)) {
        return { type: 'bpmn:SequenceFlow' };
      }
    }

    var connectDataAssociation = canConnectDataAssociation(source, target);

    if (connectDataAssociation) {
      return connectDataAssociation;
    }

    if (isCompensationBoundary(source) && isForCompensation(target)) {
      return {
        type: 'bpmn:Association',
        associationDirection: 'One'
      };
    }

    if (canConnectAssociation(source, target)) {

      return {
        type: 'bpmn:Association'
      };
    }

    return false;
  }

  /**
   * Can an element be dropped into the target element
   *
   * @return {boolean}
   */
  function canDrop(element, target, position) {

    // can move labels and groups everywhere
    if (isLabel$6(element) || isGroup(element)) {
      return true;
    }


    // disallow to create elements on collapsed pools
    if (is$1(target, 'bpmn:Participant') && !isExpanded(target)) {
      return false;
    }

    // allow to create new participants on
    // existing collaboration and process diagrams
    if (is$1(element, 'bpmn:Participant')) {
      return is$1(target, 'bpmn:Process') || is$1(target, 'bpmn:Collaboration');
    }

    // allow moving DataInput / DataOutput within its original container only
    if (isAny(element, [ 'bpmn:DataInput', 'bpmn:DataOutput' ])) {

      if (element.parent) {
        return target === element.parent;
      }
    }

    // allow creating lanes on participants and other lanes only
    if (is$1(element, 'bpmn:Lane')) {
      return is$1(target, 'bpmn:Participant') || is$1(target, 'bpmn:Lane');
    }

    // disallow dropping boundary events which cannot replace with intermediate event
    if (is$1(element, 'bpmn:BoundaryEvent') && !isDroppableBoundaryEvent(element)) {
      return false;
    }

    // drop flow elements onto flow element containers
    // and participants
    if (is$1(element, 'bpmn:FlowElement') && !is$1(element, 'bpmn:DataStoreReference')) {
      if (is$1(target, 'bpmn:FlowElementsContainer')) {
        return isExpanded(target);
      }

      return isAny(target, [ 'bpmn:Participant', 'bpmn:Lane' ]);
    }

    // disallow dropping data store reference if there is no process to append to
    if (is$1(element, 'bpmn:DataStoreReference') && is$1(target, 'bpmn:Collaboration')) {
      return some(getBusinessObject(target).get('participants'), function(participant) {
        return !!participant.get('processRef');
      });
    }

    // account for the fact that data associations are always
    // rendered and moved to top (Process or Collaboration level)
    //
    // artifacts may be placed wherever, too
    if (isAny(element, [ 'bpmn:Artifact', 'bpmn:DataAssociation', 'bpmn:DataStoreReference' ])) {
      return isAny(target, [
        'bpmn:Collaboration',
        'bpmn:Lane',
        'bpmn:Participant',
        'bpmn:Process',
        'bpmn:SubProcess' ]);
    }

    if (is$1(element, 'bpmn:MessageFlow')) {
      return is$1(target, 'bpmn:Collaboration')
        || element.source.parent == target
        || element.target.parent == target;
    }

    return false;
  }

  function isDroppableBoundaryEvent(event) {
    return getBusinessObject(event).cancelActivity && (
      hasNoEventDefinition(event) || hasCommonBoundaryIntermediateEventDefinition(event)
    );
  }

  function isBoundaryEvent(element) {
    return !isLabel$6(element) && is$1(element, 'bpmn:BoundaryEvent');
  }

  function isLane(element) {
    return is$1(element, 'bpmn:Lane');
  }

  /**
   * We treat IntermediateThrowEvents as boundary events during create,
   * this must be reflected in the rules.
   */
  function isBoundaryCandidate(element) {
    if (isBoundaryEvent(element)) {
      return true;
    }

    if (is$1(element, 'bpmn:IntermediateThrowEvent') && hasNoEventDefinition(element)) {
      return true;
    }

    return (
      is$1(element, 'bpmn:IntermediateCatchEvent') &&
      hasCommonBoundaryIntermediateEventDefinition(element)
    );
  }

  function hasNoEventDefinition(element) {
    var bo = getBusinessObject(element);

    return bo && !(bo.eventDefinitions && bo.eventDefinitions.length);
  }

  function hasCommonBoundaryIntermediateEventDefinition(element) {
    return hasOneOfEventDefinitions(element, [
      'bpmn:MessageEventDefinition',
      'bpmn:TimerEventDefinition',
      'bpmn:SignalEventDefinition',
      'bpmn:ConditionalEventDefinition'
    ]);
  }

  function hasOneOfEventDefinitions(element, eventDefinitions) {
    return eventDefinitions.some(function(definition) {
      return hasEventDefinition(element, definition);
    });
  }

  function isReceiveTaskAfterEventBasedGateway(element) {
    return (
      is$1(element, 'bpmn:ReceiveTask') &&
      find(element.incoming, function(incoming) {
        return is$1(incoming.source, 'bpmn:EventBasedGateway');
      })
    );
  }


  function canAttach(elements, target, source, position) {

    if (!Array.isArray(elements)) {
      elements = [ elements ];
    }

    // only (re-)attach one element at a time
    if (elements.length !== 1) {
      return false;
    }

    var element = elements[0];

    // do not attach labels
    if (isLabel$6(element)) {
      return false;
    }

    // only handle boundary events
    if (!isBoundaryCandidate(element)) {
      return false;
    }

    // disallow drop on event sub processes
    if (isEventSubProcess(target)) {
      return false;
    }

    // only allow drop on non compensation activities
    if (!is$1(target, 'bpmn:Activity') || isForCompensation(target)) {
      return false;
    }

    // only attach to subprocess border
    if (position && !getBoundaryAttachment(position, target)) {
      return false;
    }

    // do not attach on receive tasks after event based gateways
    if (isReceiveTaskAfterEventBasedGateway(target)) {
      return false;
    }

    return 'attach';
  }


  /**
   * Defines how to replace elements for a given target.
   *
   * Returns an array containing all elements which will be replaced.
   *
   * @example
   *
   *  [{ id: 'IntermediateEvent_2',
   *     type: 'bpmn:StartEvent'
   *   },
   *   { id: 'IntermediateEvent_5',
   *     type: 'bpmn:EndEvent'
   *   }]
   *
   * @param  {Array} elements
   * @param  {Object} target
   *
   * @return {Object} an object containing all elements which have to be replaced
   */
  function canReplace(elements, target, position) {

    if (!target) {
      return false;
    }

    var canExecute = {
      replacements: []
    };

    forEach$1(elements, function(element) {

      if (!isEventSubProcess(target)) {

        if (is$1(element, 'bpmn:StartEvent') &&
            element.type !== 'label' &&
            canDrop(element, target)) {

          // replace a non-interrupting start event by a blank interrupting start event
          // when the target is not an event sub process
          if (!isInterrupting(element)) {
            canExecute.replacements.push({
              oldElementId: element.id,
              newElementType: 'bpmn:StartEvent'
            });
          }

          // replace an error/escalation/compensate start event by a blank interrupting start event
          // when the target is not an event sub process
          if (hasErrorEventDefinition(element) ||
              hasEscalationEventDefinition(element) ||
              hasCompensateEventDefinition(element)) {
            canExecute.replacements.push({
              oldElementId: element.id,
              newElementType: 'bpmn:StartEvent'
            });
          }

          // replace a typed start event by a blank interrupting start event
          // when the target is a sub process but not an event sub process
          if (hasOneOfEventDefinitions(element,
            [
              'bpmn:MessageEventDefinition',
              'bpmn:TimerEventDefinition',
              'bpmn:SignalEventDefinition',
              'bpmn:ConditionalEventDefinition'
            ]) &&
              is$1(target, 'bpmn:SubProcess')) {
            canExecute.replacements.push({
              oldElementId: element.id,
              newElementType: 'bpmn:StartEvent'
            });
          }
        }
      }

      if (!is$1(target, 'bpmn:Transaction')) {
        if (hasEventDefinition(element, 'bpmn:CancelEventDefinition') &&
            element.type !== 'label') {

          if (is$1(element, 'bpmn:EndEvent') && canDrop(element, target)) {
            canExecute.replacements.push({
              oldElementId: element.id,
              newElementType: 'bpmn:EndEvent'
            });
          }

          if (is$1(element, 'bpmn:BoundaryEvent') && canAttach(element, target, null, position)) {
            canExecute.replacements.push({
              oldElementId: element.id,
              newElementType: 'bpmn:BoundaryEvent'
            });
          }
        }
      }
    });

    return canExecute.replacements.length ? canExecute : false;
  }

  function canMove(elements, target) {

    // do not move selection containing lanes
    if (some(elements, isLane)) {
      return false;
    }

    // allow default move check to start move operation
    if (!target) {
      return true;
    }

    return elements.every(function(element) {
      return canDrop(element, target);
    });
  }

  function canCreate(shape, target, source, position) {

    if (!target) {
      return false;
    }

    if (isLabel$6(shape) || isGroup(shape)) {
      return true;
    }

    if (isSame$1(source, target)) {
      return false;
    }

    // ensure we do not drop the element
    // into source
    if (source && isParent(source, target)) {
      return false;
    }

    return canDrop(shape, target) || canInsert(shape, target);
  }

  function canResize(shape, newBounds) {
    if (is$1(shape, 'bpmn:SubProcess')) {
      return (
        isExpanded(shape) && (
          !newBounds || (newBounds.width >= 100 && newBounds.height >= 80)
        )
      );
    }

    if (is$1(shape, 'bpmn:Lane')) {
      return !newBounds || (newBounds.width >= 130 && newBounds.height >= 60);
    }

    if (is$1(shape, 'bpmn:Participant')) {
      return !newBounds || (newBounds.width >= 250 && newBounds.height >= 50);
    }

    if (isTextAnnotation(shape)) {
      return true;
    }

    if (isGroup(shape)) {
      return true;
    }

    return false;
  }

  /**
   * Check, whether one side of the relationship
   * is a text annotation.
   */
  function isOneTextAnnotation(source, target) {

    var sourceTextAnnotation = isTextAnnotation(source),
        targetTextAnnotation = isTextAnnotation(target);

    return (
      (sourceTextAnnotation || targetTextAnnotation) &&
      (sourceTextAnnotation !== targetTextAnnotation)
    );
  }


  function canConnectAssociation(source, target) {

    // compensation boundary events are exception
    if (isCompensationBoundary(source) && isForCompensation(target)) {
      return true;
    }

    // don't connect parent <-> child
    if (isParent(target, source) || isParent(source, target)) {
      return false;
    }

    // allow connection of associations between <!TextAnnotation> and <TextAnnotation>
    if (isOneTextAnnotation(source, target)) {
      return true;
    }

    // can connect associations where we can connect
    // data associations, too (!)
    return !!canConnectDataAssociation(source, target);
  }

  function canConnectMessageFlow(source, target) {

    // during connect user might move mouse out of canvas
    // https://github.com/bpmn-io/bpmn-js/issues/1033
    if (getRootElement(source) && !getRootElement(target)) {
      return false;
    }

    return (
      isMessageFlowSource(source) &&
      isMessageFlowTarget(target) &&
      !isSameOrganization(source, target)
    );
  }

  function canConnectSequenceFlow(source, target) {

    if (
      isEventBasedTarget(target) &&
      target.incoming.length > 0 &&
      areOutgoingEventBasedGatewayConnections(target.incoming) &&
      !is$1(source, 'bpmn:EventBasedGateway')
    ) {
      return false;
    }

    return isSequenceFlowSource(source) &&
           isSequenceFlowTarget(target) &&
           isSameScope(source, target) &&
           !(is$1(source, 'bpmn:EventBasedGateway') && !isEventBasedTarget(target));
  }


  function canConnectDataAssociation(source, target) {

    if (isAny(source, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ]) &&
        isAny(target, [ 'bpmn:Activity', 'bpmn:ThrowEvent' ])) {
      return { type: 'bpmn:DataInputAssociation' };
    }

    if (isAny(target, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ]) &&
        isAny(source, [ 'bpmn:Activity', 'bpmn:CatchEvent' ])) {
      return { type: 'bpmn:DataOutputAssociation' };
    }

    return false;
  }

  function canInsert(shape, flow, position) {

    if (!flow) {
      return false;
    }

    if (Array.isArray(shape)) {
      if (shape.length !== 1) {
        return false;
      }

      shape = shape[0];
    }

    if (flow.source === shape ||
        flow.target === shape) {
      return false;
    }

    // return true if we can drop on the
    // underlying flow parent
    //
    // at this point we are not really able to talk
    // about connection rules (yet)

    return (
      isAny(flow, [ 'bpmn:SequenceFlow', 'bpmn:MessageFlow' ]) &&
      !isLabel$6(flow) &&
      is$1(shape, 'bpmn:FlowNode') &&
      !is$1(shape, 'bpmn:BoundaryEvent') &&
      canDrop(shape, flow.parent));
  }

  function includes$5(elements, element) {
    return (elements && element) && elements.indexOf(element) !== -1;
  }

  function canCopy(elements, element) {
    if (isLabel$6(element)) {
      return true;
    }

    if (is$1(element, 'bpmn:Lane') && !includes$5(elements, element.parent)) {
      return false;
    }

    return true;
  }

  function isOutgoingEventBasedGatewayConnection(connection) {

    if (connection && connection.source) {
      return is$1(connection.source, 'bpmn:EventBasedGateway');
    }
  }

  function areOutgoingEventBasedGatewayConnections(connections) {
    connections = connections || [];

    return connections.some(isOutgoingEventBasedGatewayConnection);
  }

  function getRootElement(element) {
    return getParent(element, 'bpmn:Process') || getParent(element, 'bpmn:Collaboration');
  }

  var RulesModule = {
    __depends__: [
      RulesModule$1
    ],
    __init__: [ 'bpmnRules' ],
    bpmnRules: [ 'type', BpmnRules ]
  };

  var HIGH_PRIORITY$6 = 2000;

  function BpmnDiOrdering(eventBus, canvas) {

    eventBus.on('saveXML.start', HIGH_PRIORITY$6, orderDi);

    function orderDi() {
      var rootElements = canvas.getRootElements();

      forEach$1(rootElements, function(root) {
        var rootDi = getDi(root),
            elements,
            diElements;

        elements = selfAndAllChildren([ root ], false);

        // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
        elements = filter(elements, function(element) {
          return element !== root && !element.labelTarget;
        });

        diElements = map(elements, getDi);

        rootDi.set('planeElement', diElements);
      });
    }
  }

  BpmnDiOrdering.$inject = [ 'eventBus', 'canvas' ];

  var DiOrderingModule = {
    __init__: [
      'bpmnDiOrdering'
    ],
    bpmnDiOrdering: [ 'type', BpmnDiOrdering ]
  };

  /**
   * An abstract provider that allows modelers to implement a custom
   * ordering of diagram elements on the canvas.
   *
   * It makes sure that the order is always preserved during element
   * creation and move operations.
   *
   * In order to use this behavior, inherit from it and override
   * the method {@link OrderingProvider#getOrdering}.
   *
   * @example
   *
   * ```javascript
   * function CustomOrderingProvider(eventBus) {
   *   OrderingProvider.call(this, eventBus);
   *
   *   this.getOrdering = function(element, newParent) {
   *     // always insert elements at the front
   *     // when moving
   *     return {
   *       index: 0,
   *       parent: newParent
   *     };
   *   };
   * }
   * ```
   *
   * @param {EventBus} eventBus
   */
  function OrderingProvider(eventBus) {

    CommandInterceptor.call(this, eventBus);


    var self = this;

    this.preExecute([ 'shape.create', 'connection.create' ], function(event) {

      var context = event.context,
          element = context.shape || context.connection,
          parent = context.parent;

      var ordering = self.getOrdering(element, parent);

      if (ordering) {

        if (ordering.parent !== undefined) {
          context.parent = ordering.parent;
        }

        context.parentIndex = ordering.index;
      }
    });

    this.preExecute([ 'shape.move', 'connection.move' ], function(event) {

      var context = event.context,
          element = context.shape || context.connection,
          parent = context.newParent || element.parent;

      var ordering = self.getOrdering(element, parent);

      if (ordering) {

        if (ordering.parent !== undefined) {
          context.newParent = ordering.parent;
        }

        context.newParentIndex = ordering.index;
      }
    });
  }

  /**
   * Return a custom ordering of the element, both in terms
   * of parent element and index in the new parent.
   *
   * Implementors of this method must return an object with
   * `parent` _and_ `index` in it.
   *
   * @param {djs.model.Base} element
   * @param {djs.model.Shape} newParent
   *
   * @return {Object} ordering descriptor
   */
  OrderingProvider.prototype.getOrdering = function(element, newParent) {
    return null;
  };

  e(OrderingProvider, CommandInterceptor);

  /**
   * a simple ordering provider that makes sure:
   *
   * (0) labels and groups are rendered always on top
   * (1) elements are ordered by a {level} property
   */
  function BpmnOrderingProvider(eventBus, canvas, translate) {

    OrderingProvider.call(this, eventBus);

    var orders = [
      { type: 'bpmn:SubProcess', order: { level: 6 } },

      // handle SequenceFlow(s) like message flows and render them always on top
      {
        type: 'bpmn:SequenceFlow',
        order: {
          level: 9,
          containers: [
            'bpmn:Participant',
            'bpmn:FlowElementsContainer'
          ]
        }
      },

      // handle DataAssociation(s) like message flows and render them always on top
      {
        type: 'bpmn:DataAssociation',
        order: {
          level: 9,
          containers: [
            'bpmn:Collaboration',
            'bpmn:FlowElementsContainer'
          ]
        }
      },
      {
        type: 'bpmn:MessageFlow', order: {
          level: 9,
          containers: [ 'bpmn:Collaboration' ]
        }
      },
      {
        type: 'bpmn:Association',
        order: {
          level: 6,
          containers: [
            'bpmn:Participant',
            'bpmn:FlowElementsContainer',
            'bpmn:Collaboration'
          ]
        }
      },
      { type: 'bpmn:BoundaryEvent', order: { level: 8 } },
      {
        type: 'bpmn:Group',
        order: {
          level: 10,
          containers: [
            'bpmn:Collaboration',
            'bpmn:FlowElementsContainer'
          ]
        }
      },
      { type: 'bpmn:FlowElement', order: { level: 5 } },
      { type: 'bpmn:Participant', order: { level: -2 } },
      { type: 'bpmn:Lane', order: { level: -1 } }
    ];

    function computeOrder(element) {
      if (element.labelTarget) {
        return { level: 10 };
      }

      var entry = find(orders, function(o) {
        return isAny(element, [ o.type ]);
      });

      return entry && entry.order || { level: 1 };
    }

    function getOrder(element) {

      var order = element.order;

      if (!order) {
        element.order = order = computeOrder(element);
      }

      if (!order) {
        throw new Error('no order for <' + element.id + '>');
      }

      return order;
    }

    function findActualParent(element, newParent, containers) {

      var actualParent = newParent;

      while (actualParent) {

        if (isAny(actualParent, containers)) {
          break;
        }

        actualParent = actualParent.parent;
      }

      if (!actualParent) {
        throw new Error('no parent for <' + element.id + '> in <' + (newParent && newParent.id) + '>');
      }

      return actualParent;
    }

    this.getOrdering = function(element, newParent) {

      // render labels always on top
      if (element.labelTarget) {
        return {
          parent: canvas.findRoot(newParent) || canvas.getRootElement(),
          index: -1
        };
      }

      var elementOrder = getOrder(element);

      if (elementOrder.containers) {
        newParent = findActualParent(element, newParent, elementOrder.containers);
      }

      var currentIndex = newParent.children.indexOf(element);

      var insertIndex = findIndex(newParent.children, function(child) {

        // do not compare with labels, they are created
        // in the wrong order (right after elements) during import and
        // mess up the positioning.
        if (!element.labelTarget && child.labelTarget) {
          return false;
        }

        return elementOrder.level < getOrder(child).level;
      });


      // if the element is already in the child list at
      // a smaller index, we need to adjust the insert index.
      // this takes into account that the element is being removed
      // before being re-inserted
      if (insertIndex !== -1) {
        if (currentIndex !== -1 && currentIndex < insertIndex) {
          insertIndex -= 1;
        }
      }

      return {
        index: insertIndex,
        parent: newParent
      };
    };
  }

  BpmnOrderingProvider.$inject = [ 'eventBus', 'canvas', 'translate' ];

  e(BpmnOrderingProvider, OrderingProvider);

  var OrderingModule = {
    __depends__: [
      translate
    ],
    __init__: [ 'bpmnOrderingProvider' ],
    bpmnOrderingProvider: [ 'type', BpmnOrderingProvider ]
  };

  /**
   * A service that offers un- and redoable execution of commands.
   *
   * The command stack is responsible for executing modeling actions
   * in a un- and redoable manner. To do this it delegates the actual
   * command execution to {@link CommandHandler}s.
   *
   * Command handlers provide {@link CommandHandler#execute(ctx)} and
   * {@link CommandHandler#revert(ctx)} methods to un- and redo a command
   * identified by a command context.
   *
   *
   * ## Life-Cycle events
   *
   * In the process the command stack fires a number of life-cycle events
   * that other components to participate in the command execution.
   *
   *    * preExecute
   *    * preExecuted
   *    * execute
   *    * executed
   *    * postExecute
   *    * postExecuted
   *    * revert
   *    * reverted
   *
   * A special event is used for validating, whether a command can be
   * performed prior to its execution.
   *
   *    * canExecute
   *
   * Each of the events is fired as `commandStack.{eventName}` and
   * `commandStack.{commandName}.{eventName}`, respectively. This gives
   * components fine grained control on where to hook into.
   *
   * The event object fired transports `command`, the name of the
   * command and `context`, the command context.
   *
   *
   * ## Creating Command Handlers
   *
   * Command handlers should provide the {@link CommandHandler#execute(ctx)}
   * and {@link CommandHandler#revert(ctx)} methods to implement
   * redoing and undoing of a command.
   *
   * A command handler _must_ ensure undo is performed properly in order
   * not to break the undo chain. It must also return the shapes that
   * got changed during the `execute` and `revert` operations.
   *
   * Command handlers may execute other modeling operations (and thus
   * commands) in their `preExecute` and `postExecute` phases. The command
   * stack will properly group all commands together into a logical unit
   * that may be re- and undone atomically.
   *
   * Command handlers must not execute other commands from within their
   * core implementation (`execute`, `revert`).
   *
   *
   * ## Change Tracking
   *
   * During the execution of the CommandStack it will keep track of all
   * elements that have been touched during the command's execution.
   *
   * At the end of the CommandStack execution it will notify interested
   * components via an 'elements.changed' event with all the dirty
   * elements.
   *
   * The event can be picked up by components that are interested in the fact
   * that elements have been changed. One use case for this is updating
   * their graphical representation after moving / resizing or deletion.
   *
   * @see CommandHandler
   *
   * @param {EventBus} eventBus
   * @param {Injector} injector
   */
  function CommandStack(eventBus, injector) {

    /**
     * A map of all registered command handlers.
     *
     * @type {Object}
     */
    this._handlerMap = {};

    /**
     * A stack containing all re/undoable actions on the diagram
     *
     * @type {Array<Object>}
     */
    this._stack = [];

    /**
     * The current index on the stack
     *
     * @type {number}
     */
    this._stackIdx = -1;

    /**
     * Current active commandStack execution
     *
     * @type {Object}
     * @property {Object[]} actions
     * @property {Object[]} dirty
     * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
     */
    this._currentExecution = {
      actions: [],
      dirty: [],
      trigger: null
    };


    this._injector = injector;
    this._eventBus = eventBus;

    this._uid = 1;

    eventBus.on([
      'diagram.destroy',
      'diagram.clear'
    ], function() {
      this.clear(false);
    }, this);
  }

  CommandStack.$inject = [ 'eventBus', 'injector' ];


  /**
   * Execute a command
   *
   * @param {string} command the command to execute
   * @param {Object} context the environment to execute the command in
   */
  CommandStack.prototype.execute = function(command, context) {
    if (!command) {
      throw new Error('command required');
    }

    this._currentExecution.trigger = 'execute';

    var action = { command: command, context: context };

    this._pushAction(action);
    this._internalExecute(action);
    this._popAction(action);
  };


  /**
   * Ask whether a given command can be executed.
   *
   * Implementors may hook into the mechanism on two ways:
   *
   *   * in event listeners:
   *
   *     Users may prevent the execution via an event listener.
   *     It must prevent the default action for `commandStack.(<command>.)canExecute` events.
   *
   *   * in command handlers:
   *
   *     If the method {@link CommandHandler#canExecute} is implemented in a handler
   *     it will be called to figure out whether the execution is allowed.
   *
   * @param  {string} command the command to execute
   * @param  {Object} context the environment to execute the command in
   *
   * @return {boolean} true if the command can be executed
   */
  CommandStack.prototype.canExecute = function(command, context) {

    var action = { command: command, context: context };

    var handler = this._getHandler(command);

    var result = this._fire(command, 'canExecute', action);

    // handler#canExecute will only be called if no listener
    // decided on a result already
    if (result === undefined) {
      if (!handler) {
        return false;
      }

      if (handler.canExecute) {
        result = handler.canExecute(context);
      }
    }

    return result;
  };


  /**
   * Clear the command stack, erasing all undo / redo history
   */
  CommandStack.prototype.clear = function(emit) {
    this._stack.length = 0;
    this._stackIdx = -1;

    if (emit !== false) {
      this._fire('changed', { trigger: 'clear' });
    }
  };


  /**
   * Undo last command(s)
   */
  CommandStack.prototype.undo = function() {
    var action = this._getUndoAction(),
        next;

    if (action) {
      this._currentExecution.trigger = 'undo';

      this._pushAction(action);

      while (action) {
        this._internalUndo(action);
        next = this._getUndoAction();

        if (!next || next.id !== action.id) {
          break;
        }

        action = next;
      }

      this._popAction();
    }
  };


  /**
   * Redo last command(s)
   */
  CommandStack.prototype.redo = function() {
    var action = this._getRedoAction(),
        next;

    if (action) {
      this._currentExecution.trigger = 'redo';

      this._pushAction(action);

      while (action) {
        this._internalExecute(action, true);
        next = this._getRedoAction();

        if (!next || next.id !== action.id) {
          break;
        }

        action = next;
      }

      this._popAction();
    }
  };


  /**
   * Register a handler instance with the command stack
   *
   * @param {string} command
   * @param {CommandHandler} handler
   */
  CommandStack.prototype.register = function(command, handler) {
    this._setHandler(command, handler);
  };


  /**
   * Register a handler type with the command stack
   * by instantiating it and injecting its dependencies.
   *
   * @param {string} command
   * @param {Function} a constructor for a {@link CommandHandler}
   */
  CommandStack.prototype.registerHandler = function(command, handlerCls) {

    if (!command || !handlerCls) {
      throw new Error('command and handlerCls must be defined');
    }

    var handler = this._injector.instantiate(handlerCls);
    this.register(command, handler);
  };

  CommandStack.prototype.canUndo = function() {
    return !!this._getUndoAction();
  };

  CommandStack.prototype.canRedo = function() {
    return !!this._getRedoAction();
  };

  // stack access  //////////////////////

  CommandStack.prototype._getRedoAction = function() {
    return this._stack[this._stackIdx + 1];
  };


  CommandStack.prototype._getUndoAction = function() {
    return this._stack[this._stackIdx];
  };


  // internal functionality //////////////////////

  CommandStack.prototype._internalUndo = function(action) {
    var self = this;

    var command = action.command,
        context = action.context;

    var handler = this._getHandler(command);

    // guard against illegal nested command stack invocations
    this._atomicDo(function() {
      self._fire(command, 'revert', action);

      if (handler.revert) {
        self._markDirty(handler.revert(context));
      }

      self._revertedAction(action);

      self._fire(command, 'reverted', action);
    });
  };


  CommandStack.prototype._fire = function(command, qualifier, event) {
    if (arguments.length < 3) {
      event = qualifier;
      qualifier = null;
    }

    var names = qualifier ? [ command + '.' + qualifier, qualifier ] : [ command ],
        i, name, result;

    event = this._eventBus.createEvent(event);

    for (i = 0; (name = names[i]); i++) {
      result = this._eventBus.fire('commandStack.' + name, event);

      if (event.cancelBubble) {
        break;
      }
    }

    return result;
  };

  CommandStack.prototype._createId = function() {
    return this._uid++;
  };

  CommandStack.prototype._atomicDo = function(fn) {

    var execution = this._currentExecution;

    execution.atomic = true;

    try {
      fn();
    } finally {
      execution.atomic = false;
    }
  };

  CommandStack.prototype._internalExecute = function(action, redo) {
    var self = this;

    var command = action.command,
        context = action.context;

    var handler = this._getHandler(command);

    if (!handler) {
      throw new Error('no command handler registered for <' + command + '>');
    }

    this._pushAction(action);

    if (!redo) {
      this._fire(command, 'preExecute', action);

      if (handler.preExecute) {
        handler.preExecute(context);
      }

      this._fire(command, 'preExecuted', action);
    }

    // guard against illegal nested command stack invocations
    this._atomicDo(function() {

      self._fire(command, 'execute', action);

      if (handler.execute) {

        // actual execute + mark return results as dirty
        self._markDirty(handler.execute(context));
      }

      // log to stack
      self._executedAction(action, redo);

      self._fire(command, 'executed', action);
    });

    if (!redo) {
      this._fire(command, 'postExecute', action);

      if (handler.postExecute) {
        handler.postExecute(context);
      }

      this._fire(command, 'postExecuted', action);
    }

    this._popAction(action);
  };


  CommandStack.prototype._pushAction = function(action) {

    var execution = this._currentExecution,
        actions = execution.actions;

    var baseAction = actions[0];

    if (execution.atomic) {
      throw new Error('illegal invocation in <execute> or <revert> phase (action: ' + action.command + ')');
    }

    if (!action.id) {
      action.id = (baseAction && baseAction.id) || this._createId();
    }

    actions.push(action);
  };


  CommandStack.prototype._popAction = function() {
    var execution = this._currentExecution,
        trigger = execution.trigger,
        actions = execution.actions,
        dirty = execution.dirty;

    actions.pop();

    if (!actions.length) {
      this._eventBus.fire('elements.changed', { elements: uniqueBy('id', dirty.reverse()) });

      dirty.length = 0;

      this._fire('changed', { trigger: trigger });

      execution.trigger = null;
    }
  };


  CommandStack.prototype._markDirty = function(elements) {
    var execution = this._currentExecution;

    if (!elements) {
      return;
    }

    elements = isArray$3(elements) ? elements : [ elements ];

    execution.dirty = execution.dirty.concat(elements);
  };


  CommandStack.prototype._executedAction = function(action, redo) {
    var stackIdx = ++this._stackIdx;

    if (!redo) {
      this._stack.splice(stackIdx, this._stack.length, action);
    }
  };


  CommandStack.prototype._revertedAction = function(action) {
    this._stackIdx--;
  };


  CommandStack.prototype._getHandler = function(command) {
    return this._handlerMap[command];
  };

  CommandStack.prototype._setHandler = function(command, handler) {
    if (!command || !handler) {
      throw new Error('command and handler required');
    }

    if (this._handlerMap[command]) {
      throw new Error('overriding handler for command <' + command + '>');
    }

    this._handlerMap[command] = handler;
  };

  var CommandModule = {
    commandStack: [ 'type', CommandStack ]
  };

  // document wide unique tooltip ids
  var ids = new IdGenerator('tt');


  function createRoot(parentNode) {
    var root = domify(
      '<div class="djs-tooltip-container" />'
    );

    assign$1(root, {
      position: 'absolute',
      width: '0',
      height: '0'
    });

    parentNode.insertBefore(root, parentNode.firstChild);

    return root;
  }


  function setPosition(el, x, y) {
    assign$1(el, { left: x + 'px', top: y + 'px' });
  }

  function setVisible(el, visible) {
    el.style.display = visible === false ? 'none' : '';
  }


  var tooltipClass = 'djs-tooltip',
      tooltipSelector = '.' + tooltipClass;

  /**
   * A service that allows users to render tool tips on the diagram.
   *
   * The tooltip service will take care of updating the tooltip positioning
   * during navigation + zooming.
   *
   * @example
   *
   * ```javascript
   *
   * // add a pink badge on the top left of the shape
   * tooltips.add({
   *   position: {
   *     x: 50,
   *     y: 100
   *   },
   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
   * });
   *
   * // or with optional life span
   * tooltips.add({
   *   position: {
   *     top: -5,
   *     left: -5
   *   },
   *   html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>',
   *   ttl: 2000
   * });
   *
   * // remove a tool tip
   * var id = tooltips.add(...);
   * tooltips.remove(id);
   * ```
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   */
  function Tooltips(eventBus, canvas) {

    this._eventBus = eventBus;
    this._canvas = canvas;

    this._ids = ids;

    this._tooltipDefaults = {
      show: {
        minZoom: 0.7,
        maxZoom: 5.0
      }
    };

    /**
     * Mapping tooltipId -> tooltip
     */
    this._tooltips = {};

    // root html element for all tooltips
    this._tooltipRoot = createRoot(canvas.getContainer());


    var self = this;

    delegate.bind(this._tooltipRoot, tooltipSelector, 'mousedown', function(event) {
      event.stopPropagation();
    });

    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseover', function(event) {
      self.trigger('mouseover', event);
    });

    delegate.bind(this._tooltipRoot, tooltipSelector, 'mouseout', function(event) {
      self.trigger('mouseout', event);
    });

    this._init();
  }


  Tooltips.$inject = [ 'eventBus', 'canvas' ];


  /**
   * Adds a HTML tooltip to the diagram
   *
   * @param {Object}               tooltip   the tooltip configuration
   *
   * @param {string|DOMElement}    tooltip.html                 html element to use as an tooltip
   * @param {Object}               [tooltip.show]               show configuration
   * @param {number}               [tooltip.show.minZoom]       minimal zoom level to show the tooltip
   * @param {number}               [tooltip.show.maxZoom]       maximum zoom level to show the tooltip
   * @param {Object}               tooltip.position             where to attach the tooltip
   * @param {number}               [tooltip.position.left]      relative to element bbox left attachment
   * @param {number}               [tooltip.position.top]       relative to element bbox top attachment
   * @param {number}               [tooltip.position.bottom]    relative to element bbox bottom attachment
   * @param {number}               [tooltip.position.right]     relative to element bbox right attachment
   * @param {number}               [tooltip.timeout=-1]
   *
   * @return {string}              id that may be used to reference the tooltip for update or removal
   */
  Tooltips.prototype.add = function(tooltip) {

    if (!tooltip.position) {
      throw new Error('must specifiy tooltip position');
    }

    if (!tooltip.html) {
      throw new Error('must specifiy tooltip html');
    }

    var id = this._ids.next();

    tooltip = assign({}, this._tooltipDefaults, tooltip, {
      id: id
    });

    this._addTooltip(tooltip);

    if (tooltip.timeout) {
      this.setTimeout(tooltip);
    }

    return id;
  };

  Tooltips.prototype.trigger = function(action, event) {

    var node = event.delegateTarget || event.target;

    var tooltip = this.get(attr$1(node, 'data-tooltip-id'));

    if (!tooltip) {
      return;
    }

    if (action === 'mouseover' && tooltip.timeout) {
      this.clearTimeout(tooltip);
    }

    if (action === 'mouseout' && tooltip.timeout) {

      // cut timeout after mouse out
      tooltip.timeout = 1000;

      this.setTimeout(tooltip);
    }
  };

  /**
   * Get a tooltip with the given id
   *
   * @param {string} id
   */
  Tooltips.prototype.get = function(id) {

    if (typeof id !== 'string') {
      id = id.id;
    }

    return this._tooltips[id];
  };

  Tooltips.prototype.clearTimeout = function(tooltip) {

    tooltip = this.get(tooltip);

    if (!tooltip) {
      return;
    }

    var removeTimer = tooltip.removeTimer;

    if (removeTimer) {
      clearTimeout(removeTimer);
      tooltip.removeTimer = null;
    }
  };

  Tooltips.prototype.setTimeout = function(tooltip) {

    tooltip = this.get(tooltip);

    if (!tooltip) {
      return;
    }

    this.clearTimeout(tooltip);

    var self = this;

    tooltip.removeTimer = setTimeout(function() {
      self.remove(tooltip);
    }, tooltip.timeout);
  };

  /**
   * Remove an tooltip with the given id
   *
   * @param {string} id
   */
  Tooltips.prototype.remove = function(id) {

    var tooltip = this.get(id);

    if (tooltip) {
      remove$2(tooltip.html);
      remove$2(tooltip.htmlContainer);

      delete tooltip.htmlContainer;

      delete this._tooltips[tooltip.id];
    }
  };


  Tooltips.prototype.show = function() {
    setVisible(this._tooltipRoot);
  };


  Tooltips.prototype.hide = function() {
    setVisible(this._tooltipRoot, false);
  };


  Tooltips.prototype._updateRoot = function(viewbox) {
    var a = viewbox.scale || 1;
    var d = viewbox.scale || 1;

    var matrix = 'matrix(' + a + ',0,0,' + d + ',' + (-1 * viewbox.x * a) + ',' + (-1 * viewbox.y * d) + ')';

    this._tooltipRoot.style.transform = matrix;
    this._tooltipRoot.style['-ms-transform'] = matrix;
  };


  Tooltips.prototype._addTooltip = function(tooltip) {

    var id = tooltip.id,
        html = tooltip.html,
        htmlContainer,
        tooltipRoot = this._tooltipRoot;

    // unwrap jquery (for those who need it)
    if (html.get && html.constructor.prototype.jquery) {
      html = html.get(0);
    }

    // create proper html elements from
    // tooltip HTML strings
    if (isString(html)) {
      html = domify(html);
    }

    htmlContainer = domify('<div data-tooltip-id="' + id + '" class="' + tooltipClass + '">');
    assign$1(htmlContainer, { position: 'absolute' });

    htmlContainer.appendChild(html);

    if (tooltip.type) {
      classes$1(htmlContainer).add('djs-tooltip-' + tooltip.type);
    }

    if (tooltip.className) {
      classes$1(htmlContainer).add(tooltip.className);
    }

    tooltip.htmlContainer = htmlContainer;

    tooltipRoot.appendChild(htmlContainer);

    this._tooltips[id] = tooltip;

    this._updateTooltip(tooltip);
  };


  Tooltips.prototype._updateTooltip = function(tooltip) {

    var position = tooltip.position,
        htmlContainer = tooltip.htmlContainer;

    // update overlay html based on tooltip x, y

    setPosition(htmlContainer, position.x, position.y);
  };


  Tooltips.prototype._updateTooltipVisibilty = function(viewbox) {

    forEach$1(this._tooltips, function(tooltip) {
      var show = tooltip.show,
          htmlContainer = tooltip.htmlContainer,
          visible = true;

      if (show) {
        if (show.minZoom > viewbox.scale ||
            show.maxZoom < viewbox.scale) {
          visible = false;
        }

        setVisible(htmlContainer, visible);
      }
    });
  };

  Tooltips.prototype._init = function() {

    var self = this;

    // scroll/zoom integration

    function updateViewbox(viewbox) {
      self._updateRoot(viewbox);
      self._updateTooltipVisibilty(viewbox);

      self.show();
    }

    this._eventBus.on('canvas.viewbox.changing', function(event) {
      self.hide();
    });

    this._eventBus.on('canvas.viewbox.changed', function(event) {
      updateViewbox(event.viewbox);
    });
  };

  var TooltipsModule = {
    __init__: [ 'tooltips' ],
    tooltips: [ 'type', Tooltips ]
  };

  /**
   * Remove from the beginning of a collection until it is empty.
   *
   * This is a null-safe operation that ensures elements
   * are being removed from the given collection until the
   * collection is empty.
   *
   * The implementation deals with the fact that a remove operation
   * may touch, i.e. remove multiple elements in the collection
   * at a time.
   *
   * @param {Array<Object>} [collection]
   * @param {Function} removeFn
   *
   * @return {Array<Object>} the cleared collection
   */
  function saveClear(collection, removeFn) {

    if (typeof removeFn !== 'function') {
      throw new Error('removeFn iterator must be a function');
    }

    if (!collection) {
      return;
    }

    var e;

    while ((e = collection[0])) {
      removeFn(e);
    }

    return collection;
  }

  var LOW_PRIORITY$6 = 250,
      HIGH_PRIORITY$5 = 1400;


  /**
   * A handler that makes sure labels are properly moved with
   * their label targets.
   *
   * @param {didi.Injector} injector
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   */
  function LabelSupport(injector, eventBus, modeling) {

    CommandInterceptor.call(this, eventBus);

    var movePreview = injector.get('movePreview', false);

    // remove labels from the collection that are being
    // moved with other elements anyway
    eventBus.on('shape.move.start', HIGH_PRIORITY$5, function(e) {

      var context = e.context,
          shapes = context.shapes,
          validatedShapes = context.validatedShapes;

      context.shapes = removeLabels(shapes);
      context.validatedShapes = removeLabels(validatedShapes);
    });

    // add labels to visual's group
    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$6, function(e) {

      var context = e.context,
          shapes = context.shapes;

      var labels = [];

      forEach$1(shapes, function(element) {

        forEach$1(element.labels, function(label) {

          if (!label.hidden && context.shapes.indexOf(label) === -1) {
            labels.push(label);
          }

          if (element.labelTarget) {
            labels.push(element);
          }
        });
      });

      forEach$1(labels, function(label) {
        movePreview.makeDraggable(context, label, true);
      });

    });

    // add all labels to move closure
    this.preExecuted('elements.move', HIGH_PRIORITY$5, function(e) {
      var context = e.context,
          closure = context.closure,
          enclosedElements = closure.enclosedElements;

      var enclosedLabels = [];

      // find labels that are not part of
      // move closure yet and add them
      forEach$1(enclosedElements, function(element) {
        forEach$1(element.labels, function(label) {

          if (!enclosedElements[label.id]) {
            enclosedLabels.push(label);
          }
        });
      });

      closure.addAll(enclosedLabels);
    });


    this.preExecute([
      'connection.delete',
      'shape.delete'
    ], function(e) {

      var context = e.context,
          element = context.connection || context.shape;

      saveClear(element.labels, function(label) {
        modeling.removeShape(label, { nested: true });
      });
    });


    this.execute('shape.delete', function(e) {

      var context = e.context,
          shape = context.shape,
          labelTarget = shape.labelTarget;

      // unset labelTarget
      if (labelTarget) {
        context.labelTargetIndex = indexOf(labelTarget.labels, shape);
        context.labelTarget = labelTarget;

        shape.labelTarget = null;
      }
    });

    this.revert('shape.delete', function(e) {

      var context = e.context,
          shape = context.shape,
          labelTarget = context.labelTarget,
          labelTargetIndex = context.labelTargetIndex;

      // restore labelTarget
      if (labelTarget) {
        add(labelTarget.labels, shape, labelTargetIndex);

        shape.labelTarget = labelTarget;
      }
    });

  }

  e(LabelSupport, CommandInterceptor);

  LabelSupport.$inject = [
    'injector',
    'eventBus',
    'modeling'
  ];


  /**
   * Return a filtered list of elements that do not
   * contain attached elements with hosts being part
   * of the selection.
   *
   * @param  {Array<djs.model.Base>} elements
   *
   * @return {Array<djs.model.Base>} filtered
   */
  function removeLabels(elements) {

    return filter(elements, function(element) {

      // filter out labels that are move together
      // with their label targets
      return elements.indexOf(element.labelTarget) === -1;
    });
  }

  var LabelSupportModule = {
    __init__: [ 'labelSupport' ],
    labelSupport: [ 'type', LabelSupport ]
  };

  var LOW_PRIORITY$5 = 251,
      HIGH_PRIORITY$4 = 1401;

  var MARKER_ATTACH$1 = 'attach-ok';


  /**
   * Adds the notion of attached elements to the modeler.
   *
   * Optionally depends on `diagram-js/lib/features/move` to render
   * the attached elements during move preview.
   *
   * Optionally depends on `diagram-js/lib/features/label-support`
   * to render attached labels during move preview.
   *
   * @param {didi.Injector} injector
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   * @param {Rules} rules
   * @param {Modeling} modeling
   */
  function AttachSupport(injector, eventBus, canvas, rules, modeling) {

    CommandInterceptor.call(this, eventBus);

    var movePreview = injector.get('movePreview', false);


    // remove all the attached elements from the shapes to be validated
    // add all the attached shapes to the overall list of moved shapes
    eventBus.on('shape.move.start', HIGH_PRIORITY$4, function(e) {

      var context = e.context,
          shapes = context.shapes,
          validatedShapes = context.validatedShapes;

      context.shapes = addAttached(shapes);

      context.validatedShapes = removeAttached(validatedShapes);
    });

    // add attachers to the visual's group
    movePreview && eventBus.on('shape.move.start', LOW_PRIORITY$5, function(e) {

      var context = e.context,
          shapes = context.shapes,
          attachers = getAttachers(shapes);

      forEach$1(attachers, function(attacher) {
        movePreview.makeDraggable(context, attacher, true);

        forEach$1(attacher.labels, function(label) {
          movePreview.makeDraggable(context, label, true);
        });
      });
    });

    // add attach-ok marker to current host
    movePreview && eventBus.on('shape.move.start', function(event) {
      var context = event.context,
          shapes = context.shapes;

      if (shapes.length !== 1) {
        return;
      }

      var shape = shapes[0];

      var host = shape.host;

      if (host) {
        canvas.addMarker(host, MARKER_ATTACH$1);

        eventBus.once([
          'shape.move.out',
          'shape.move.cleanup'
        ], function() {
          canvas.removeMarker(host, MARKER_ATTACH$1);
        });
      }
    });

    // add all attachers to move closure
    this.preExecuted('elements.move', HIGH_PRIORITY$4, function(e) {
      var context = e.context,
          closure = context.closure,
          shapes = context.shapes,
          attachers = getAttachers(shapes);

      forEach$1(attachers, function(attacher) {
        closure.add(attacher, closure.topLevel[attacher.host.id]);
      });
    });

    // perform the attaching after shapes are done moving
    this.postExecuted('elements.move', function(e) {

      var context = e.context,
          shapes = context.shapes,
          newHost = context.newHost,
          attachers;

      // only single elements can be attached
      // multiply elements can be detached
      if (newHost && shapes.length !== 1) {
        return;
      }

      if (newHost) {
        attachers = shapes;
      } else {

        // find attachers moved without host
        attachers = filter(shapes, function(shape) {
          var host = shape.host;

          return isAttacher(shape) && !includes$4(shapes, host);
        });
      }

      forEach$1(attachers, function(attacher) {
        modeling.updateAttachment(attacher, newHost);
      });
    });

    // ensure invalid attachment connections are removed
    this.postExecuted('elements.move', function(e) {

      var shapes = e.context.shapes;

      forEach$1(shapes, function(shape) {

        forEach$1(shape.attachers, function(attacher) {

          // remove invalid outgoing connections
          forEach$1(attacher.outgoing.slice(), function(connection) {
            var allowed = rules.allowed('connection.reconnect', {
              connection: connection,
              source: connection.source,
              target: connection.target
            });

            if (!allowed) {
              modeling.removeConnection(connection);
            }
          });

          // remove invalid incoming connections
          forEach$1(attacher.incoming.slice(), function(connection) {
            var allowed = rules.allowed('connection.reconnect', {
              connection: connection,
              source: connection.source,
              target: connection.target
            });

            if (!allowed) {
              modeling.removeConnection(connection);
            }
          });
        });
      });
    });

    this.postExecute('shape.create', function(e) {
      var context = e.context,
          shape = context.shape,
          host = context.host;

      if (host) {
        modeling.updateAttachment(shape, host);
      }
    });

    // update attachments if the host is replaced
    this.postExecute('shape.replace', function(e) {

      var context = e.context,
          oldShape = context.oldShape,
          newShape = context.newShape;

      // move the attachers to the new host
      saveClear(oldShape.attachers, function(attacher) {
        var allowed = rules.allowed('elements.move', {
          target: newShape,
          shapes: [ attacher ]
        });

        if (allowed === 'attach') {
          modeling.updateAttachment(attacher, newShape);
        } else {
          modeling.removeShape(attacher);
        }
      });

      // move attachers if new host has different size
      if (newShape.attachers.length) {

        forEach$1(newShape.attachers, function(attacher) {
          var delta = getNewAttachShapeDelta(attacher, oldShape, newShape);
          modeling.moveShape(attacher, delta, attacher.parent);
        });
      }

    });

    // move shape on host resize
    this.postExecute('shape.resize', function(event) {
      var context = event.context,
          shape = context.shape,
          oldBounds = context.oldBounds,
          newBounds = context.newBounds,
          attachers = shape.attachers,
          hints = context.hints || {};

      if (hints.attachSupport === false) {
        return;
      }

      forEach$1(attachers, function(attacher) {
        var delta = getNewAttachShapeDelta(attacher, oldBounds, newBounds);

        modeling.moveShape(attacher, delta, attacher.parent);

        forEach$1(attacher.labels, function(label) {
          modeling.moveShape(label, delta, label.parent);
        });
      });
    });

    // remove attachments
    this.preExecute('shape.delete', function(event) {

      var shape = event.context.shape;

      saveClear(shape.attachers, function(attacher) {
        modeling.removeShape(attacher);
      });

      if (shape.host) {
        modeling.updateAttachment(shape, null);
      }
    });
  }

  e(AttachSupport, CommandInterceptor);

  AttachSupport.$inject = [
    'injector',
    'eventBus',
    'canvas',
    'rules',
    'modeling'
  ];


  /**
   * Return attachers of the given shapes
   *
   * @param {Array<djs.model.Base>} shapes
   * @return {Array<djs.model.Base>}
   */
  function getAttachers(shapes) {
    return flatten(map(shapes, function(s) {
      return s.attachers || [];
    }));
  }

  /**
   * Return a combined list of elements and
   * attachers.
   *
   * @param {Array<djs.model.Base>} elements
   * @return {Array<djs.model.Base>} filtered
   */
  function addAttached(elements) {
    var attachers = getAttachers(elements);

    return unionBy('id', elements, attachers);
  }

  /**
   * Return a filtered list of elements that do not
   * contain attached elements with hosts being part
   * of the selection.
   *
   * @param  {Array<djs.model.Base>} elements
   *
   * @return {Array<djs.model.Base>} filtered
   */
  function removeAttached(elements) {

    var ids = groupBy(elements, 'id');

    return filter(elements, function(element) {
      while (element) {

        // host in selection
        if (element.host && ids[element.host.id]) {
          return false;
        }

        element = element.parent;
      }

      return true;
    });
  }

  function isAttacher(shape) {
    return !!shape.host;
  }

  function includes$4(array, item) {
    return array.indexOf(item) !== -1;
  }

  var AttachSupportModule = {
    __depends__: [
      RulesModule$1
    ],
    __init__: [ 'attachSupport' ],
    attachSupport: [ 'type', AttachSupport ]
  };

  var LOW_PRIORITY$4 = 250;

  /**
   * The tool manager acts as middle-man between the available tool's and the Palette,
   * it takes care of making sure that the correct active state is set.
   *
   * @param  {Object}    eventBus
   * @param  {Object}    dragging
   */
  function ToolManager(eventBus, dragging) {
    this._eventBus = eventBus;
    this._dragging = dragging;

    this._tools = [];
    this._active = null;
  }

  ToolManager.$inject = [ 'eventBus', 'dragging' ];

  ToolManager.prototype.registerTool = function(name, events) {
    var tools = this._tools;

    if (!events) {
      throw new Error('A tool has to be registered with it\'s "events"');
    }

    tools.push(name);

    this.bindEvents(name, events);
  };

  ToolManager.prototype.isActive = function(tool) {
    return tool && this._active === tool;
  };

  ToolManager.prototype.length = function(tool) {
    return this._tools.length;
  };

  ToolManager.prototype.setActive = function(tool) {
    var eventBus = this._eventBus;

    if (this._active !== tool) {
      this._active = tool;

      eventBus.fire('tool-manager.update', { tool: tool });
    }
  };

  ToolManager.prototype.bindEvents = function(name, events) {
    var eventBus = this._eventBus,
        dragging = this._dragging;

    var eventsToRegister = [];

    eventBus.on(events.tool + '.init', function(event) {
      var context = event.context;

      // Active tools that want to reactivate themselves must do this explicitly
      if (!context.reactivate && this.isActive(name)) {
        this.setActive(null);

        dragging.cancel();
        return;
      }

      this.setActive(name);

    }, this);

    // Todo[ricardo]: add test cases
    forEach$1(events, function(event) {
      eventsToRegister.push(event + '.ended');
      eventsToRegister.push(event + '.canceled');
    });

    eventBus.on(eventsToRegister, LOW_PRIORITY$4, function(event) {

      // We defer the de-activation of the tool to the .activate phase,
      // so we're able to check if we want to toggle off the current
      // active tool or switch to a new one
      if (!this._active) {
        return;
      }

      if (isPaletteClick(event)) {
        return;
      }

      this.setActive(null);
    }, this);

  };


  // helpers ///////////////

  /**
   * Check if a given event is a palette click event.
   *
   * @param {EventBus.Event} event
   *
   * @return {boolean}
   */
  function isPaletteClick(event) {
    var target = event.originalEvent && event.originalEvent.target;

    return target && closest(target, '.group[data-group="tools"]');
  }

  var ToolManagerModule = {
    __depends__: [
      DraggingModule
    ],
    __init__: [ 'toolManager' ],
    toolManager: [ 'type', ToolManager ]
  };

  /**
   * Return direction given axis and delta.
   *
   * @param {string} axis
   * @param {number} delta
   *
   * @return {string}
   */
  function getDirection(axis, delta) {

    if (axis === 'x') {
      if (delta > 0) {
        return 'e';
      }

      if (delta < 0) {
        return 'w';
      }
    }

    if (axis === 'y') {
      if (delta > 0) {
        return 's';
      }

      if (delta < 0) {
        return 'n';
      }
    }

    return null;
  }

  /**
   * Returns connections whose waypoints are to be updated. Waypoints are to be updated if start
   * or end is to be moved or resized.
   *
   * @param {Array<djs.model.Shape} movingShapes
   * @param {Array<djs.model.Shape} resizingShapes
   *
   * @returns {Array<djs.model.Connection>}
   */
  function getWaypointsUpdatingConnections(movingShapes, resizingShapes) {
    var waypointsUpdatingConnections = [];

    forEach$1(movingShapes.concat(resizingShapes), function(shape) {
      var incoming = shape.incoming,
          outgoing = shape.outgoing;

      forEach$1(incoming.concat(outgoing), function(connection) {
        var source = connection.source,
            target = connection.target;

        if (includes$3(movingShapes, source) ||
          includes$3(movingShapes, target) ||
          includes$3(resizingShapes, source) ||
          includes$3(resizingShapes, target)) {

          if (!includes$3(waypointsUpdatingConnections, connection)) {
            waypointsUpdatingConnections.push(connection);
          }
        }
      });
    });

    return waypointsUpdatingConnections;
  }

  function includes$3(array, item) {
    return array.indexOf(item) !== -1;
  }

  /**
   * Resize bounds.
   *
   * @param {Object} bounds
   * @param {number} bounds.x
   * @param {number} bounds.y
   * @param {number} bounds.width
   * @param {number} bounds.height
   * @param {string} direction
   * @param {Object} delta
   * @param {number} delta.x
   * @param {number} delta.y
   *
   * @return {Object}
   */
  function resizeBounds(bounds, direction, delta) {
    var x = bounds.x,
        y = bounds.y,
        width = bounds.width,
        height = bounds.height,
        dx = delta.x,
        dy = delta.y;

    switch (direction) {
    case 'n':
      return {
        x: x,
        y: y + dy,
        width: width,
        height: height - dy
      };
    case 's':
      return {
        x: x,
        y: y,
        width: width,
        height: height + dy
      };
    case 'w':
      return {
        x: x + dx,
        y: y,
        width: width - dx,
        height: height
      };
    case 'e':
      return {
        x: x,
        y: y,
        width: width + dx,
        height: height
      };
    default:
      throw new Error('unknown direction: ' + direction);
    }
  }

  var abs$1 = Math.abs,
      round$4 = Math.round;

  var AXIS_TO_DIMENSION = {
    x: 'width',
    y: 'height'
  };

  var CURSOR_CROSSHAIR = 'crosshair';

  var DIRECTION_TO_TRBL = {
    n: 'top',
    w: 'left',
    s: 'bottom',
    e: 'right'
  };

  var HIGH_PRIORITY$3 = 1500;

  var DIRECTION_TO_OPPOSITE = {
    n: 's',
    w: 'e',
    s: 'n',
    e: 'w'
  };

  var PADDING = 20;


  /**
   * Add or remove space by moving and resizing elements.
   *
   * @param {Canvas} canvas
   * @param {Dragging} dragging
   * @param {EventBus} eventBus
   * @param {Modeling} modeling
   * @param {Rules} rules
   * @param {ToolManager} toolManager
   * @param {Mouse} mouse
   */
  function SpaceTool(
      canvas, dragging, eventBus,
      modeling, rules, toolManager,
      mouse) {

    this._canvas = canvas;
    this._dragging = dragging;
    this._eventBus = eventBus;
    this._modeling = modeling;
    this._rules = rules;
    this._toolManager = toolManager;
    this._mouse = mouse;

    var self = this;

    toolManager.registerTool('space', {
      tool: 'spaceTool.selection',
      dragging: 'spaceTool'
    });

    eventBus.on('spaceTool.selection.end', function(event) {
      eventBus.once('spaceTool.selection.ended', function() {
        self.activateMakeSpace(event.originalEvent);
      });
    });

    eventBus.on('spaceTool.move', HIGH_PRIORITY$3 , function(event) {
      var context = event.context,
          initialized = context.initialized;

      if (!initialized) {
        initialized = context.initialized = self.init(event, context);
      }

      if (initialized) {
        ensureConstraints(event);
      }
    });

    eventBus.on('spaceTool.end', function(event) {
      var context = event.context,
          axis = context.axis,
          direction = context.direction,
          movingShapes = context.movingShapes,
          resizingShapes = context.resizingShapes,
          start = context.start;

      if (!context.initialized) {
        return;
      }

      ensureConstraints(event);

      var delta = {
        x: 0,
        y: 0
      };

      delta[ axis ] = round$4(event[ 'd' + axis ]);

      self.makeSpace(movingShapes, resizingShapes, delta, direction, start);

      eventBus.once('spaceTool.ended', function(event) {

        // activate space tool selection after make space
        self.activateSelection(event.originalEvent, true, true);
      });
    });
  }

  SpaceTool.$inject = [
    'canvas',
    'dragging',
    'eventBus',
    'modeling',
    'rules',
    'toolManager',
    'mouse'
  ];

  /**
   * Activate space tool selection.
   *
   * @param {Object} event
   * @param {boolean} autoActivate
   */
  SpaceTool.prototype.activateSelection = function(event, autoActivate, reactivate) {
    this._dragging.init(event, 'spaceTool.selection', {
      autoActivate: autoActivate,
      cursor: CURSOR_CROSSHAIR,
      data: {
        context: {
          reactivate: reactivate
        }
      },
      trapClick: false
    });
  };

  /**
   * Activate space tool make space.
   *
   * @param  {MouseEvent} event
   */
  SpaceTool.prototype.activateMakeSpace = function(event) {
    this._dragging.init(event, 'spaceTool', {
      autoActivate: true,
      cursor: CURSOR_CROSSHAIR,
      data: {
        context: {}
      }
    });
  };

  /**
   * Make space.
   *
   * @param  {Array<djs.model.Shape>} movingShapes
   * @param  {Array<djs.model.Shape>} resizingShapes
   * @param  {Object} delta
   * @param  {number} delta.x
   * @param  {number} delta.y
   * @param  {string} direction
   * @param  {number} start
   */
  SpaceTool.prototype.makeSpace = function(movingShapes, resizingShapes, delta, direction, start) {
    return this._modeling.createSpace(movingShapes, resizingShapes, delta, direction, start);
  };

  /**
   * Initialize make space and return true if that was successful.
   *
   * @param {Object} event
   * @param {Object} context
   *
   * @return {boolean}
   */
  SpaceTool.prototype.init = function(event, context) {
    var axis = abs$1(event.dx) > abs$1(event.dy) ? 'x' : 'y',
        delta = event[ 'd' + axis ],
        start = event[ axis ] - delta;

    if (abs$1(delta) < 5) {
      return false;
    }

    // invert delta to remove space when moving left
    if (delta < 0) {
      delta *= -1;
    }

    // invert delta to add/remove space when removing/adding space if modifier key is pressed
    if (hasPrimaryModifier(event)) {
      delta *= -1;
    }

    var direction = getDirection(axis, delta);

    var root = this._canvas.getRootElement();

    var children = selfAndAllChildren(root, true);

    var elements = this.calculateAdjustments(children, axis, delta, start);

    var minDimensions = this._eventBus.fire('spaceTool.getMinDimensions', {
      axis: axis,
      direction: direction,
      shapes: elements.resizingShapes,
      start: start
    });

    var spaceToolConstraints = getSpaceToolConstraints(elements, axis, direction, start, minDimensions);

    assign(
      context,
      elements,
      {
        axis: axis,
        direction: direction,
        spaceToolConstraints: spaceToolConstraints,
        start: start
      }
    );

    set('resize-' + (axis === 'x' ? 'ew' : 'ns'));

    return true;
  };

  /**
   * Get elements to be moved and resized.
   *
   * @param  {Array<djs.model.Shape>} elements
   * @param  {string} axis
   * @param  {number} delta
   * @param  {number} start
   *
   * @return {Object}
   */
  SpaceTool.prototype.calculateAdjustments = function(elements, axis, delta, start) {
    var rules = this._rules;

    var movingShapes = [],
        resizingShapes = [];

    forEach$1(elements, function(element) {
      if (!element.parent || isConnection$7(element)) {
        return;
      }

      var shapeStart = element[ axis ],
          shapeEnd = shapeStart + element[ AXIS_TO_DIMENSION[ axis ] ];

      // shape to be moved
      if ((delta > 0 && shapeStart > start) || (delta < 0 && shapeEnd < start)) {
        return movingShapes.push(element);
      }

      // shape to be resized
      if (shapeStart < start &&
        shapeEnd > start &&
        rules.allowed('shape.resize', { shape: element })
      ) {

        return resizingShapes.push(element);
      }
    });

    return {
      movingShapes: movingShapes,
      resizingShapes: resizingShapes
    };
  };

  SpaceTool.prototype.toggle = function() {

    if (this.isActive()) {
      return this._dragging.cancel();
    }

    var mouseEvent = this._mouse.getLastMoveEvent();

    this.activateSelection(mouseEvent, !!mouseEvent);
  };

  SpaceTool.prototype.isActive = function() {
    var context = this._dragging.context();

    return context && /^spaceTool/.test(context.prefix);
  };

  // helpers //////////

  function addPadding(trbl) {
    return {
      top: trbl.top - PADDING,
      right: trbl.right + PADDING,
      bottom: trbl.bottom + PADDING,
      left: trbl.left - PADDING
    };
  }

  function ensureConstraints(event) {
    var context = event.context,
        spaceToolConstraints = context.spaceToolConstraints;

    if (!spaceToolConstraints) {
      return;
    }

    var x, y;

    if (isNumber(spaceToolConstraints.left)) {
      x = Math.max(event.x, spaceToolConstraints.left);

      event.dx = event.dx + x - event.x;
      event.x = x;
    }

    if (isNumber(spaceToolConstraints.right)) {
      x = Math.min(event.x, spaceToolConstraints.right);

      event.dx = event.dx + x - event.x;
      event.x = x;
    }

    if (isNumber(spaceToolConstraints.top)) {
      y = Math.max(event.y, spaceToolConstraints.top);

      event.dy = event.dy + y - event.y;
      event.y = y;
    }

    if (isNumber(spaceToolConstraints.bottom)) {
      y = Math.min(event.y, spaceToolConstraints.bottom);

      event.dy = event.dy + y - event.y;
      event.y = y;
    }
  }

  function getSpaceToolConstraints(elements, axis, direction, start, minDimensions) {
    var movingShapes = elements.movingShapes,
        resizingShapes = elements.resizingShapes;

    if (!resizingShapes.length) {
      return;
    }

    var spaceToolConstraints = {},
        min,
        max;

    forEach$1(resizingShapes, function(resizingShape) {
      var resizingShapeBBox = asTRBL(resizingShape);

      // find children that are not moving or resizing
      var nonMovingResizingChildren = filter(resizingShape.children, function(child) {
        return !isConnection$7(child) &&
          !isLabel$2(child) &&
          !includes$2(movingShapes, child) &&
          !includes$2(resizingShapes, child);
      });

      // find children that are moving
      var movingChildren = filter(resizingShape.children, function(child) {
        return !isConnection$7(child) && !isLabel$2(child) && includes$2(movingShapes, child);
      });

      var minOrMax,
          nonMovingResizingChildrenBBox,
          movingChildrenBBox;

      if (nonMovingResizingChildren.length) {
        nonMovingResizingChildrenBBox = addPadding(asTRBL(getBBox(nonMovingResizingChildren)));

        minOrMax = start -
          resizingShapeBBox[ DIRECTION_TO_TRBL[ direction ] ] +
          nonMovingResizingChildrenBBox[ DIRECTION_TO_TRBL[ direction ] ];

        if (direction === 'n') {
          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
        } else if (direction === 'w') {
          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
        } else if (direction === 's') {
          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
        } else if (direction === 'e') {
          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
        }
      }

      if (movingChildren.length) {
        movingChildrenBBox = addPadding(asTRBL(getBBox(movingChildren)));

        minOrMax = start -
          movingChildrenBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ] +
          resizingShapeBBox[ DIRECTION_TO_TRBL[ DIRECTION_TO_OPPOSITE[ direction ] ] ];

        if (direction === 'n') {
          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
        } else if (direction === 'w') {
          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
        } else if (direction === 's') {
          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
        } else if (direction === 'e') {
          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
        }
      }

      var resizingShapeMinDimensions = minDimensions && minDimensions[ resizingShape.id ];

      if (resizingShapeMinDimensions) {
        if (direction === 'n') {
          minOrMax = start +
            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] -
            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];

          spaceToolConstraints.bottom = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
        } else if (direction === 'w') {
          minOrMax = start +
            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] -
            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];

          spaceToolConstraints.right = max = isNumber(max) ? Math.min(max, minOrMax) : minOrMax;
        } else if (direction === 's') {
          minOrMax = start -
            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] +
            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];

          spaceToolConstraints.top = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
        } else if (direction === 'e') {
          minOrMax = start -
            resizingShape[ AXIS_TO_DIMENSION [ axis ] ] +
            resizingShapeMinDimensions[ AXIS_TO_DIMENSION[ axis ] ];

          spaceToolConstraints.left = min = isNumber(min) ? Math.max(min, minOrMax) : minOrMax;
        }
      }
    });

    return spaceToolConstraints;
  }

  function includes$2(array, item) {
    return array.indexOf(item) !== -1;
  }

  function isConnection$7(element) {
    return !!element.waypoints;
  }

  function isLabel$2(element) {
    return !!element.labelTarget;
  }

  var MARKER_DRAGGING$1 = 'djs-dragging',
      MARKER_RESIZING = 'djs-resizing';

  var LOW_PRIORITY$3 = 250;

  var max = Math.max;


  /**
   * Provides previews for selecting/moving/resizing shapes when creating/removing space.
   *
   * @param {EventBus} eventBus
   * @param {ElementRegistry} elementRegistry
   * @param {Canvas} canvas
   * @param {Styles} styles
   */
  function SpaceToolPreview(
      eventBus, elementRegistry, canvas,
      styles, previewSupport) {

    function addPreviewGfx(collection, dragGroup) {
      forEach$1(collection, function(element) {
        previewSupport.addDragger(element, dragGroup);

        canvas.addMarker(element, MARKER_DRAGGING$1);
      });
    }

    // add crosshair
    eventBus.on('spaceTool.selection.start', function(event) {
      var space = canvas.getLayer('space'),
          context = event.context;

      var orientation = {
        x: 'M 0,-10000 L 0,10000',
        y: 'M -10000,0 L 10000,0'
      };

      var crosshairGroup = create$1('g');
      attr(crosshairGroup, styles.cls('djs-crosshair-group', [ 'no-events' ]));

      append(space, crosshairGroup);

      // horizontal path
      var pathX = create$1('path');
      attr(pathX, 'd', orientation.x);
      classes(pathX).add('djs-crosshair');

      append(crosshairGroup, pathX);

      // vertical path
      var pathY = create$1('path');
      attr(pathY, 'd', orientation.y);
      classes(pathY).add('djs-crosshair');

      append(crosshairGroup, pathY);

      context.crosshairGroup = crosshairGroup;
    });

    // update crosshair
    eventBus.on('spaceTool.selection.move', function(event) {
      var crosshairGroup = event.context.crosshairGroup;

      translate$2(crosshairGroup, event.x, event.y);
    });

    // remove crosshair
    eventBus.on('spaceTool.selection.cleanup', function(event) {
      var context = event.context,
          crosshairGroup = context.crosshairGroup;

      if (crosshairGroup) {
        remove$1(crosshairGroup);
      }
    });

    // add and update move/resize previews
    eventBus.on('spaceTool.move', LOW_PRIORITY$3, function(event) {

      var context = event.context,
          line = context.line,
          axis = context.axis,
          movingShapes = context.movingShapes,
          resizingShapes = context.resizingShapes;

      if (!context.initialized) {
        return;
      }

      if (!context.dragGroup) {
        var spaceLayer = canvas.getLayer('space');

        line = create$1('path');
        attr(line, 'd', 'M0,0 L0,0');
        classes(line).add('djs-crosshair');

        append(spaceLayer, line);

        context.line = line;

        var dragGroup = create$1('g');
        attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));

        append(canvas.getActiveLayer(), dragGroup);

        // shapes
        addPreviewGfx(movingShapes, dragGroup);

        // connections
        var movingConnections = context.movingConnections = elementRegistry.filter(function(element) {
          var sourceIsMoving = false;

          forEach$1(movingShapes, function(shape) {
            forEach$1(shape.outgoing, function(connection) {
              if (element === connection) {
                sourceIsMoving = true;
              }
            });
          });

          var targetIsMoving = false;

          forEach$1(movingShapes, function(shape) {
            forEach$1(shape.incoming, function(connection) {
              if (element === connection) {
                targetIsMoving = true;
              }
            });
          });

          var sourceIsResizing = false;

          forEach$1(resizingShapes, function(shape) {
            forEach$1(shape.outgoing, function(connection) {
              if (element === connection) {
                sourceIsResizing = true;
              }
            });
          });

          var targetIsResizing = false;

          forEach$1(resizingShapes, function(shape) {
            forEach$1(shape.incoming, function(connection) {
              if (element === connection) {
                targetIsResizing = true;
              }
            });
          });

          return isConnection$6(element)
            && (sourceIsMoving || sourceIsResizing)
            && (targetIsMoving || targetIsResizing);
        });


        addPreviewGfx(movingConnections, dragGroup);

        context.dragGroup = dragGroup;
      }

      if (!context.frameGroup) {
        var frameGroup = create$1('g');
        attr(frameGroup, styles.cls('djs-frame-group', [ 'no-events' ]));

        append(canvas.getActiveLayer(), frameGroup);

        var frames = [];

        forEach$1(resizingShapes, function(shape) {
          var frame = previewSupport.addFrame(shape, frameGroup);

          var initialBounds = frame.getBBox();

          frames.push({
            element: frame,
            initialBounds: initialBounds
          });

          canvas.addMarker(shape, MARKER_RESIZING);
        });

        context.frameGroup = frameGroup;
        context.frames = frames;
      }

      var orientation = {
        x: 'M' + event.x + ', -10000 L' + event.x + ', 10000',
        y: 'M -10000, ' + event.y + ' L 10000, ' + event.y
      };

      attr(line, { d: orientation[ axis ] });

      var opposite = { x: 'y', y: 'x' };
      var delta = { x: event.dx, y: event.dy };
      delta[ opposite[ context.axis ] ] = 0;

      // update move previews
      translate$2(context.dragGroup, delta.x, delta.y);

      // update resize previews
      forEach$1(context.frames, function(frame) {
        var element = frame.element,
            initialBounds = frame.initialBounds,
            width,
            height;

        if (context.direction === 'e') {
          attr(element, {
            width: max(initialBounds.width + delta.x, 5)
          });
        } else {
          width = max(initialBounds.width - delta.x, 5);

          attr(element, {
            width: width,
            x: initialBounds.x + initialBounds.width - width
          });
        }

        if (context.direction === 's') {
          attr(element, {
            height: max(initialBounds.height + delta.y, 5)
          });
        } else {
          height = max(initialBounds.height - delta.y, 5);

          attr(element, {
            height: height,
            y: initialBounds.y + initialBounds.height - height
          });
        }
      });

    });

    // remove move/resize previews
    eventBus.on('spaceTool.cleanup', function(event) {

      var context = event.context,
          movingShapes = context.movingShapes,
          movingConnections = context.movingConnections,
          resizingShapes = context.resizingShapes,
          line = context.line,
          dragGroup = context.dragGroup,
          frameGroup = context.frameGroup;

      // moving shapes
      forEach$1(movingShapes, function(shape) {
        canvas.removeMarker(shape, MARKER_DRAGGING$1);
      });

      // moving connections
      forEach$1(movingConnections, function(connection) {
        canvas.removeMarker(connection, MARKER_DRAGGING$1);
      });

      if (dragGroup) {
        remove$1(line);
        remove$1(dragGroup);
      }

      forEach$1(resizingShapes, function(shape) {
        canvas.removeMarker(shape, MARKER_RESIZING);
      });

      if (frameGroup) {
        remove$1(frameGroup);
      }
    });
  }

  SpaceToolPreview.$inject = [
    'eventBus',
    'elementRegistry',
    'canvas',
    'styles',
    'previewSupport'
  ];


  // helpers //////////////////////

  /**
   * Checks if an element is a connection.
   */
  function isConnection$6(element) {
    return element.waypoints;
  }

  var SpaceToolModule = {
    __init__: [ 'spaceToolPreview' ],
    __depends__: [
      DraggingModule,
      RulesModule$1,
      ToolManagerModule,
      PreviewSupportModule,
      MouseModule
    ],
    spaceTool: [ 'type', SpaceTool ],
    spaceToolPreview: [ 'type', SpaceToolPreview ]
  };

  function BpmnFactory(moddle) {
    this._model = moddle;
  }

  BpmnFactory.$inject = [ 'moddle' ];


  BpmnFactory.prototype._needsId = function(element) {
    return isAny(element, [
      'bpmn:RootElement',
      'bpmn:FlowElement',
      'bpmn:MessageFlow',
      'bpmn:DataAssociation',
      'bpmn:Artifact',
      'bpmn:Participant',
      'bpmn:Lane',
      'bpmn:LaneSet',
      'bpmn:Process',
      'bpmn:Collaboration',
      'bpmndi:BPMNShape',
      'bpmndi:BPMNEdge',
      'bpmndi:BPMNDiagram',
      'bpmndi:BPMNPlane',
      'bpmn:Property',
      'bpmn:CategoryValue'
    ]);
  };

  BpmnFactory.prototype._ensureId = function(element) {
    if (element.id) {
      this._model.ids.claim(element.id, element);
      return;
    }

    // generate semantic ids for elements
    // bpmn:SequenceFlow -> SequenceFlow_ID
    var prefix;

    if (is$1(element, 'bpmn:Activity')) {
      prefix = 'Activity';
    } else if (is$1(element, 'bpmn:Event')) {
      prefix = 'Event';
    } else if (is$1(element, 'bpmn:Gateway')) {
      prefix = 'Gateway';
    } else if (isAny(element, [ 'bpmn:SequenceFlow', 'bpmn:MessageFlow' ])) {
      prefix = 'Flow';
    } else {
      prefix = (element.$type || '').replace(/^[^:]*:/g, '');
    }

    prefix += '_';

    if (!element.id && this._needsId(element)) {
      element.id = this._model.ids.nextPrefixed(prefix, element);
    }
  };


  BpmnFactory.prototype.create = function(type, attrs) {
    var element = this._model.create(type, attrs || {});

    this._ensureId(element);

    return element;
  };


  BpmnFactory.prototype.createDiLabel = function() {
    return this.create('bpmndi:BPMNLabel', {
      bounds: this.createDiBounds()
    });
  };


  BpmnFactory.prototype.createDiShape = function(semantic, attrs) {
    return this.create('bpmndi:BPMNShape', assign({
      bpmnElement: semantic,
      bounds: this.createDiBounds()
    }, attrs));
  };


  BpmnFactory.prototype.createDiBounds = function(bounds) {
    return this.create('dc:Bounds', bounds);
  };


  BpmnFactory.prototype.createDiWaypoints = function(waypoints) {
    var self = this;

    return map(waypoints, function(pos) {
      return self.createDiWaypoint(pos);
    });
  };

  BpmnFactory.prototype.createDiWaypoint = function(point) {
    return this.create('dc:Point', pick(point, [ 'x', 'y' ]));
  };


  BpmnFactory.prototype.createDiEdge = function(semantic, attrs) {
    return this.create('bpmndi:BPMNEdge', assign({
      bpmnElement: semantic,
      waypoint: this.createDiWaypoints([])
    }, attrs));
  };

  BpmnFactory.prototype.createDiPlane = function(semantic, attrs) {
    return this.create('bpmndi:BPMNPlane', assign({
      bpmnElement: semantic
    }, attrs));
  };

  /**
   * A handler responsible for updating the underlying BPMN 2.0 XML + DI
   * once changes on the diagram happen
   */
  function BpmnUpdater(
      eventBus, bpmnFactory, connectionDocking,
      translate) {

    CommandInterceptor.call(this, eventBus);

    this._bpmnFactory = bpmnFactory;
    this._translate = translate;

    var self = this;



    // connection cropping //////////////////////

    // crop connection ends during create/update
    function cropConnection(e) {
      var context = e.context,
          hints = context.hints || {},
          connection;

      if (!context.cropped && hints.createElementsBehavior !== false) {
        connection = context.connection;
        connection.waypoints = connectionDocking.getCroppedWaypoints(connection);
        context.cropped = true;
      }
    }

    this.executed([
      'connection.layout',
      'connection.create'
    ], cropConnection);

    this.reverted([ 'connection.layout' ], function(e) {
      delete e.context.cropped;
    });



    // BPMN + DI update //////////////////////


    // update parent
    function updateParent(e) {
      var context = e.context;

      self.updateParent(context.shape || context.connection, context.oldParent);
    }

    function reverseUpdateParent(e) {
      var context = e.context;

      var element = context.shape || context.connection,

          // oldParent is the (old) new parent, because we are undoing
          oldParent = context.parent || context.newParent;

      self.updateParent(element, oldParent);
    }

    this.executed([
      'shape.move',
      'shape.create',
      'shape.delete',
      'connection.create',
      'connection.move',
      'connection.delete'
    ], ifBpmn(updateParent));

    this.reverted([
      'shape.move',
      'shape.create',
      'shape.delete',
      'connection.create',
      'connection.move',
      'connection.delete'
    ], ifBpmn(reverseUpdateParent));

    /*
     * ## Updating Parent
     *
     * When morphing a Process into a Collaboration or vice-versa,
     * make sure that both the *semantic* and *di* parent of each element
     * is updated.
     *
     */
    function updateRoot(event) {
      var context = event.context,
          oldRoot = context.oldRoot,
          children = oldRoot.children;

      forEach$1(children, function(child) {
        if (is$1(child, 'bpmn:BaseElement')) {
          self.updateParent(child);
        }
      });
    }

    this.executed([ 'canvas.updateRoot' ], updateRoot);
    this.reverted([ 'canvas.updateRoot' ], updateRoot);


    // update bounds
    function updateBounds(e) {
      var shape = e.context.shape;

      if (!is$1(shape, 'bpmn:BaseElement')) {
        return;
      }

      self.updateBounds(shape);
    }

    this.executed([ 'shape.move', 'shape.create', 'shape.resize' ], ifBpmn(function(event) {

      // exclude labels because they're handled separately during shape.changed
      if (event.context.shape.type === 'label') {
        return;
      }

      updateBounds(event);
    }));

    this.reverted([ 'shape.move', 'shape.create', 'shape.resize' ], ifBpmn(function(event) {

      // exclude labels because they're handled separately during shape.changed
      if (event.context.shape.type === 'label') {
        return;
      }

      updateBounds(event);
    }));

    // Handle labels separately. This is necessary, because the label bounds have to be updated
    // every time its shape changes, not only on move, create and resize.
    eventBus.on('shape.changed', function(event) {
      if (event.element.type === 'label') {
        updateBounds({ context: { shape: event.element } });
      }
    });

    // attach / detach connection
    function updateConnection(e) {
      self.updateConnection(e.context);
    }

    this.executed([
      'connection.create',
      'connection.move',
      'connection.delete',
      'connection.reconnect'
    ], ifBpmn(updateConnection));

    this.reverted([
      'connection.create',
      'connection.move',
      'connection.delete',
      'connection.reconnect'
    ], ifBpmn(updateConnection));


    // update waypoints
    function updateConnectionWaypoints(e) {
      self.updateConnectionWaypoints(e.context.connection);
    }

    this.executed([
      'connection.layout',
      'connection.move',
      'connection.updateWaypoints',
    ], ifBpmn(updateConnectionWaypoints));

    this.reverted([
      'connection.layout',
      'connection.move',
      'connection.updateWaypoints',
    ], ifBpmn(updateConnectionWaypoints));

    // update conditional/default flows
    this.executed('connection.reconnect', ifBpmn(function(event) {
      var context = event.context,
          connection = context.connection,
          oldSource = context.oldSource,
          newSource = context.newSource,
          connectionBo = getBusinessObject(connection),
          oldSourceBo = getBusinessObject(oldSource),
          newSourceBo = getBusinessObject(newSource);

      // remove condition from connection on reconnect to new source
      // if new source can NOT have condional sequence flow
      if (connectionBo.conditionExpression && !isAny(newSourceBo, [
        'bpmn:Activity',
        'bpmn:ExclusiveGateway',
        'bpmn:InclusiveGateway'
      ])) {
        context.oldConditionExpression = connectionBo.conditionExpression;

        delete connectionBo.conditionExpression;
      }

      // remove default from old source flow on reconnect to new source
      // if source changed
      if (oldSource !== newSource && oldSourceBo.default === connectionBo) {
        context.oldDefault = oldSourceBo.default;

        delete oldSourceBo.default;
      }
    }));

    this.reverted('connection.reconnect', ifBpmn(function(event) {
      var context = event.context,
          connection = context.connection,
          oldSource = context.oldSource,
          newSource = context.newSource,
          connectionBo = getBusinessObject(connection),
          oldSourceBo = getBusinessObject(oldSource),
          newSourceBo = getBusinessObject(newSource);

      // add condition to connection on revert reconnect to new source
      if (context.oldConditionExpression) {
        connectionBo.conditionExpression = context.oldConditionExpression;
      }

      // add default to old source on revert reconnect to new source
      if (context.oldDefault) {
        oldSourceBo.default = context.oldDefault;

        delete newSourceBo.default;
      }
    }));

    // update attachments
    function updateAttachment(e) {
      self.updateAttachment(e.context);
    }

    this.executed([ 'element.updateAttachment' ], ifBpmn(updateAttachment));
    this.reverted([ 'element.updateAttachment' ], ifBpmn(updateAttachment));
  }

  e(BpmnUpdater, CommandInterceptor);

  BpmnUpdater.$inject = [
    'eventBus',
    'bpmnFactory',
    'connectionDocking',
    'translate'
  ];


  // implementation //////////////////////

  BpmnUpdater.prototype.updateAttachment = function(context) {

    var shape = context.shape,
        businessObject = shape.businessObject,
        host = shape.host;

    businessObject.attachedToRef = host && host.businessObject;
  };

  BpmnUpdater.prototype.updateParent = function(element, oldParent) {

    // do not update BPMN 2.0 label parent
    if (element instanceof Label) {
      return;
    }

    // data stores in collaborations are handled separately by DataStoreBehavior
    if (is$1(element, 'bpmn:DataStoreReference') &&
        element.parent &&
        is$1(element.parent, 'bpmn:Collaboration')) {
      return;
    }

    var parentShape = element.parent;

    var businessObject = element.businessObject,
        di = getDi(element),
        parentBusinessObject = parentShape && parentShape.businessObject,
        parentDi = getDi(parentShape);

    if (is$1(element, 'bpmn:FlowNode')) {
      this.updateFlowNodeRefs(businessObject, parentBusinessObject, oldParent && oldParent.businessObject);
    }

    if (is$1(element, 'bpmn:DataOutputAssociation')) {
      if (element.source) {
        parentBusinessObject = element.source.businessObject;
      } else {
        parentBusinessObject = null;
      }
    }

    if (is$1(element, 'bpmn:DataInputAssociation')) {
      if (element.target) {
        parentBusinessObject = element.target.businessObject;
      } else {
        parentBusinessObject = null;
      }
    }

    this.updateSemanticParent(businessObject, parentBusinessObject);

    if (is$1(element, 'bpmn:DataObjectReference') && businessObject.dataObjectRef) {
      this.updateSemanticParent(businessObject.dataObjectRef, parentBusinessObject);
    }

    this.updateDiParent(di, parentDi);
  };


  BpmnUpdater.prototype.updateBounds = function(shape) {

    var di = getDi(shape),
        embeddedLabelBounds = getEmbeddedLabelBounds(shape);

    // update embedded label bounds if possible
    if (embeddedLabelBounds) {
      var embeddedLabelBoundsDelta = delta(embeddedLabelBounds, di.get('bounds'));

      assign(embeddedLabelBounds, {
        x: shape.x + embeddedLabelBoundsDelta.x,
        y: shape.y + embeddedLabelBoundsDelta.y
      });
    }

    var target = (shape instanceof Label) ? this._getLabel(di) : di;

    var bounds = target.bounds;

    if (!bounds) {
      bounds = this._bpmnFactory.createDiBounds();
      target.set('bounds', bounds);
    }

    assign(bounds, {
      x: shape.x,
      y: shape.y,
      width: shape.width,
      height: shape.height
    });
  };

  BpmnUpdater.prototype.updateFlowNodeRefs = function(businessObject, newContainment, oldContainment) {

    if (oldContainment === newContainment) {
      return;
    }

    var oldRefs, newRefs;

    if (is$1 (oldContainment, 'bpmn:Lane')) {
      oldRefs = oldContainment.get('flowNodeRef');
      remove(oldRefs, businessObject);
    }

    if (is$1(newContainment, 'bpmn:Lane')) {
      newRefs = newContainment.get('flowNodeRef');
      add(newRefs, businessObject);
    }
  };


  // update existing sourceElement and targetElement di information
  BpmnUpdater.prototype.updateDiConnection = function(connection, newSource, newTarget) {
    var connectionDi = getDi(connection),
        newSourceDi = getDi(newSource),
        newTargetDi = getDi(newTarget);

    if (connectionDi.sourceElement && connectionDi.sourceElement.bpmnElement !== getBusinessObject(newSource)) {
      connectionDi.sourceElement = newSource && newSourceDi;
    }

    if (connectionDi.targetElement && connectionDi.targetElement.bpmnElement !== getBusinessObject(newTarget)) {
      connectionDi.targetElement = newTarget && newTargetDi;
    }

  };


  BpmnUpdater.prototype.updateDiParent = function(di, parentDi) {

    if (parentDi && !is$1(parentDi, 'bpmndi:BPMNPlane')) {
      parentDi = parentDi.$parent;
    }

    if (di.$parent === parentDi) {
      return;
    }

    var planeElements = (parentDi || di.$parent).get('planeElement');

    if (parentDi) {
      planeElements.push(di);
      di.$parent = parentDi;
    } else {
      remove(planeElements, di);
      di.$parent = null;
    }
  };

  function getDefinitions(element) {
    while (element && !is$1(element, 'bpmn:Definitions')) {
      element = element.$parent;
    }

    return element;
  }

  BpmnUpdater.prototype.getLaneSet = function(container) {

    var laneSet, laneSets;

    // bpmn:Lane
    if (is$1(container, 'bpmn:Lane')) {
      laneSet = container.childLaneSet;

      if (!laneSet) {
        laneSet = this._bpmnFactory.create('bpmn:LaneSet');
        container.childLaneSet = laneSet;
        laneSet.$parent = container;
      }

      return laneSet;
    }

    // bpmn:Participant
    if (is$1(container, 'bpmn:Participant')) {
      container = container.processRef;
    }

    // bpmn:FlowElementsContainer
    laneSets = container.get('laneSets');
    laneSet = laneSets[0];

    if (!laneSet) {
      laneSet = this._bpmnFactory.create('bpmn:LaneSet');
      laneSet.$parent = container;
      laneSets.push(laneSet);
    }

    return laneSet;
  };

  BpmnUpdater.prototype.updateSemanticParent = function(businessObject, newParent, visualParent) {

    var containment,
        translate = this._translate;

    if (businessObject.$parent === newParent) {
      return;
    }

    if (is$1(businessObject, 'bpmn:DataInput') || is$1(businessObject, 'bpmn:DataOutput')) {

      if (is$1(newParent, 'bpmn:Participant') && 'processRef' in newParent) {
        newParent = newParent.processRef;
      }

      // already in correct ioSpecification
      if ('ioSpecification' in newParent && newParent.ioSpecification === businessObject.$parent) {
        return;
      }
    }

    if (is$1(businessObject, 'bpmn:Lane')) {

      if (newParent) {
        newParent = this.getLaneSet(newParent);
      }

      containment = 'lanes';
    } else

    if (is$1(businessObject, 'bpmn:FlowElement')) {

      if (newParent) {

        if (is$1(newParent, 'bpmn:Participant')) {
          newParent = newParent.processRef;
        } else

        if (is$1(newParent, 'bpmn:Lane')) {
          do {

            // unwrap Lane -> LaneSet -> (Lane | FlowElementsContainer)
            newParent = newParent.$parent.$parent;
          } while (is$1(newParent, 'bpmn:Lane'));

        }
      }

      containment = 'flowElements';

    } else

    if (is$1(businessObject, 'bpmn:Artifact')) {

      while (newParent &&
             !is$1(newParent, 'bpmn:Process') &&
             !is$1(newParent, 'bpmn:SubProcess') &&
             !is$1(newParent, 'bpmn:Collaboration')) {

        if (is$1(newParent, 'bpmn:Participant')) {
          newParent = newParent.processRef;
          break;
        } else {
          newParent = newParent.$parent;
        }
      }

      containment = 'artifacts';
    } else

    if (is$1(businessObject, 'bpmn:MessageFlow')) {
      containment = 'messageFlows';

    } else

    if (is$1(businessObject, 'bpmn:Participant')) {
      containment = 'participants';

      // make sure the participants process is properly attached / detached
      // from the XML document

      var process = businessObject.processRef,
          definitions;

      if (process) {
        definitions = getDefinitions(businessObject.$parent || newParent);

        if (businessObject.$parent) {
          remove(definitions.get('rootElements'), process);
          process.$parent = null;
        }

        if (newParent) {
          add(definitions.get('rootElements'), process);
          process.$parent = definitions;
        }
      }
    } else

    if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
      containment = 'dataOutputAssociations';
    } else

    if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
      containment = 'dataInputAssociations';
    }

    if (!containment) {
      throw new Error(translate(
        'no parent for {element} in {parent}',
        {
          element: businessObject.id,
          parent: newParent.id
        }
      ));
    }

    var children;

    if (businessObject.$parent) {

      // remove from old parent
      children = businessObject.$parent.get(containment);
      remove(children, businessObject);
    }

    if (!newParent) {
      businessObject.$parent = null;
    } else {

      // add to new parent
      children = newParent.get(containment);
      children.push(businessObject);
      businessObject.$parent = newParent;
    }

    if (visualParent) {
      var diChildren = visualParent.get(containment);

      remove(children, businessObject);

      if (newParent) {

        if (!diChildren) {
          diChildren = [];
          newParent.set(containment, diChildren);
        }

        diChildren.push(businessObject);
      }
    }
  };


  BpmnUpdater.prototype.updateConnectionWaypoints = function(connection) {
    var di = getDi(connection);

    di.set('waypoint', this._bpmnFactory.createDiWaypoints(connection.waypoints));
  };


  BpmnUpdater.prototype.updateConnection = function(context) {
    var connection = context.connection,
        businessObject = getBusinessObject(connection),
        newSource = connection.source,
        newSourceBo = getBusinessObject(newSource),
        newTarget = connection.target,
        newTargetBo = getBusinessObject(connection.target),
        visualParent;

    if (!is$1(businessObject, 'bpmn:DataAssociation')) {

      var inverseSet = is$1(businessObject, 'bpmn:SequenceFlow');

      if (businessObject.sourceRef !== newSourceBo) {
        if (inverseSet) {
          remove(businessObject.sourceRef && businessObject.sourceRef.get('outgoing'), businessObject);

          if (newSourceBo && newSourceBo.get('outgoing')) {
            newSourceBo.get('outgoing').push(businessObject);
          }
        }

        businessObject.sourceRef = newSourceBo;
      }

      if (businessObject.targetRef !== newTargetBo) {
        if (inverseSet) {
          remove(businessObject.targetRef && businessObject.targetRef.get('incoming'), businessObject);

          if (newTargetBo && newTargetBo.get('incoming')) {
            newTargetBo.get('incoming').push(businessObject);
          }
        }

        businessObject.targetRef = newTargetBo;
      }
    } else

    if (is$1(businessObject, 'bpmn:DataInputAssociation')) {

      // handle obnoxious isMsome sourceRef
      businessObject.get('sourceRef')[0] = newSourceBo;

      visualParent = context.parent || context.newParent || newTargetBo;

      this.updateSemanticParent(businessObject, newTargetBo, visualParent);
    } else

    if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
      visualParent = context.parent || context.newParent || newSourceBo;

      this.updateSemanticParent(businessObject, newSourceBo, visualParent);

      // targetRef = new target
      businessObject.targetRef = newTargetBo;
    }

    this.updateConnectionWaypoints(connection);

    this.updateDiConnection(connection, newSource, newTarget);
  };


  // helpers //////////////////////

  BpmnUpdater.prototype._getLabel = function(di) {
    if (!di.label) {
      di.label = this._bpmnFactory.createDiLabel();
    }

    return di.label;
  };


  /**
   * Make sure the event listener is only called
   * if the touched element is a BPMN element.
   *
   * @param  {Function} fn
   * @return {Function} guarded function
   */
  function ifBpmn(fn) {

    return function(event) {

      var context = event.context,
          element = context.shape || context.connection;

      if (is$1(element, 'bpmn:BaseElement')) {
        fn(event);
      }
    };
  }

  /**
   * Return dc:Bounds of bpmndi:BPMNLabel if exists.
   *
   * @param {djs.model.shape} shape
   *
   * @returns {Object|undefined}
   */
  function getEmbeddedLabelBounds(shape) {
    if (!is$1(shape, 'bpmn:Activity')) {
      return;
    }

    var di = getDi(shape);

    if (!di) {
      return;
    }

    var label = di.get('label');

    if (!label) {
      return;
    }

    return label.get('bounds');
  }

  /**
   * A bpmn-aware factory for diagram-js shapes
   */
  function ElementFactory(bpmnFactory, moddle, translate) {
    ElementFactory$1.call(this);

    this._bpmnFactory = bpmnFactory;
    this._moddle = moddle;
    this._translate = translate;
  }

  e(ElementFactory, ElementFactory$1);

  ElementFactory.$inject = [
    'bpmnFactory',
    'moddle',
    'translate'
  ];

  ElementFactory.prototype.baseCreate = ElementFactory$1.prototype.create;

  ElementFactory.prototype.create = function(elementType, attrs) {

    // no special magic for labels,
    // we assume their businessObjects have already been created
    // and wired via attrs
    if (elementType === 'label') {
      var di = attrs.di || this._bpmnFactory.createDiLabel();
      return this.baseCreate(elementType, assign({ type: 'label', di: di }, DEFAULT_LABEL_SIZE, attrs));
    }

    return this.createBpmnElement(elementType, attrs);
  };

  ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
    var size,
        translate = this._translate;

    attrs = assign({}, attrs || {});

    var businessObject = attrs.businessObject,
        di = attrs.di;

    if (!businessObject) {
      if (!attrs.type) {
        throw new Error(translate('no shape type specified'));
      }

      businessObject = this._bpmnFactory.create(attrs.type);

      ensureCompatDiRef(businessObject);
    }

    if (!isModdleDi(di)) {
      var diAttrs = assign(
        {},
        di || {},
        { id: businessObject.id + '_di' }
      );

      if (elementType === 'root') {
        di = this._bpmnFactory.createDiPlane(businessObject, diAttrs);
      } else
      if (elementType === 'connection') {
        di = this._bpmnFactory.createDiEdge(businessObject, diAttrs);
      } else {
        di = this._bpmnFactory.createDiShape(businessObject, diAttrs);
      }
    }

    if (is$1(businessObject, 'bpmn:Group')) {
      attrs = assign({
        isFrame: true
      }, attrs);
    }

    attrs = applyAttributes(businessObject, attrs, [
      'processRef',
      'isInterrupting',
      'associationDirection',
      'isForCompensation'
    ]);

    if (attrs.isExpanded) {
      attrs = applyAttribute(di, attrs, 'isExpanded');
    }

    if (is$1(businessObject, 'bpmn:SubProcess')) {
      attrs.collapsed = !isExpanded(businessObject, di);
    }

    if (is$1(businessObject, 'bpmn:ExclusiveGateway')) {
      di.isMarkerVisible = true;
    }

    var eventDefinitions,
        newEventDefinition;

    if (attrs.eventDefinitionType) {
      eventDefinitions = businessObject.get('eventDefinitions') || [];
      newEventDefinition = this._bpmnFactory.create(attrs.eventDefinitionType, attrs.eventDefinitionAttrs);

      if (attrs.eventDefinitionType === 'bpmn:ConditionalEventDefinition') {
        newEventDefinition.condition = this._bpmnFactory.create('bpmn:FormalExpression');
      }

      eventDefinitions.push(newEventDefinition);

      newEventDefinition.$parent = businessObject;
      businessObject.eventDefinitions = eventDefinitions;

      delete attrs.eventDefinitionType;
    }

    size = this.getDefaultSize(businessObject, di);

    attrs = assign({
      id: businessObject.id
    }, size, attrs, {
      businessObject: businessObject,
      di: di
    });

    return this.baseCreate(elementType, attrs);
  };


  ElementFactory.prototype.getDefaultSize = function(element, di) {

    var bo = getBusinessObject(element);
    di = di || getDi(element);

    if (is$1(bo, 'bpmn:SubProcess')) {
      if (isExpanded(bo, di)) {
        return { width: 350, height: 200 };
      } else {
        return { width: 100, height: 80 };
      }
    }

    if (is$1(bo, 'bpmn:Task')) {
      return { width: 100, height: 80 };
    }

    if (is$1(bo, 'bpmn:Gateway')) {
      return { width: 50, height: 50 };
    }

    if (is$1(bo, 'bpmn:Event')) {
      return { width: 36, height: 36 };
    }

    if (is$1(bo, 'bpmn:Participant')) {
      if (isExpanded(bo, di)) {
        return { width: 600, height: 250 };
      } else {
        return { width: 400, height: 60 };
      }
    }

    if (is$1(bo, 'bpmn:Lane')) {
      return { width: 400, height: 100 };
    }

    if (is$1(bo, 'bpmn:DataObjectReference')) {
      return { width: 36, height: 50 };
    }

    if (is$1(bo, 'bpmn:DataStoreReference')) {
      return { width: 50, height: 50 };
    }

    if (is$1(bo, 'bpmn:TextAnnotation')) {
      return { width: 100, height: 30 };
    }

    if (is$1(bo, 'bpmn:Group')) {
      return { width: 300, height: 300 };
    }

    return { width: 100, height: 80 };
  };


  /**
   * Create participant.
   *
   * @param {boolean|Object} [attrs] attrs
   *
   * @returns {djs.model.Shape}
   */
  ElementFactory.prototype.createParticipantShape = function(attrs) {

    if (!isObject(attrs)) {
      attrs = { isExpanded: attrs };
    }

    attrs = assign({ type: 'bpmn:Participant' }, attrs || {});

    // participants are expanded by default
    if (attrs.isExpanded !== false) {
      attrs.processRef = this._bpmnFactory.create('bpmn:Process');
    }

    return this.createShape(attrs);
  };


  // helpers //////////////////////

  /**
   * Apply attributes from a map to the given element,
   * remove attribute from the map on application.
   *
   * @param {Base} element
   * @param {Object} attrs (in/out map of attributes)
   * @param {Array<string>} attributeNames name of attributes to apply
   *
   * @return {Object} changed attrs
   */
  function applyAttributes(element, attrs, attributeNames) {

    forEach$1(attributeNames, function(property) {
      attrs = applyAttribute(element, attrs, property);
    });

    return attrs;
  }

  /**
   * Apply named property to element and drain it from the attrs
   * collection.
   *
   * @param {Base} element
   * @param {Object} attrs (in/out map of attributes)
   * @param {string} attributeName to apply
   *
   * @return {Object} changed attrs
   */
  function applyAttribute(element, attrs, attributeName) {
    if (attrs[attributeName] === undefined) {
      return attrs;
    }

    element[attributeName] = attrs[attributeName];

    return omit(attrs, [ attributeName ]);
  }


  function isModdleDi(element) {
    return isAny(element, [
      'bpmndi:BPMNShape',
      'bpmndi:BPMNEdge',
      'bpmndi:BPMNDiagram',
      'bpmndi:BPMNPlane',
    ]);
  }

  /**
   * A handler that align elements in a certain way.
   *
   */
  function AlignElements(modeling, canvas) {
    this._modeling = modeling;
    this._canvas = canvas;
  }

  AlignElements.$inject = [ 'modeling', 'canvas' ];


  AlignElements.prototype.preExecute = function(context) {
    var modeling = this._modeling;

    var elements = context.elements,
        alignment = context.alignment;


    forEach$1(elements, function(element) {
      var delta = {
        x: 0,
        y: 0
      };

      if (alignment.left) {
        delta.x = alignment.left - element.x;

      } else if (alignment.right) {
        delta.x = (alignment.right - element.width) - element.x;

      } else if (alignment.center) {
        delta.x = (alignment.center - Math.round(element.width / 2)) - element.x;

      } else if (alignment.top) {
        delta.y = alignment.top - element.y;

      } else if (alignment.bottom) {
        delta.y = (alignment.bottom - element.height) - element.y;

      } else if (alignment.middle) {
        delta.y = (alignment.middle - Math.round(element.height / 2)) - element.y;
      }

      modeling.moveElements([ element ], delta, element.parent);
    });
  };

  AlignElements.prototype.postExecute = function(context) {

  };

  /**
   * A handler that implements reversible appending of shapes
   * to a source shape.
   *
   * @param {canvas} Canvas
   * @param {elementFactory} ElementFactory
   * @param {modeling} Modeling
   */
  function AppendShapeHandler(modeling) {
    this._modeling = modeling;
  }

  AppendShapeHandler.$inject = [ 'modeling' ];


  // api //////////////////////


  /**
   * Creates a new shape
   *
   * @param {Object} context
   * @param {ElementDescriptor} context.shape the new shape
   * @param {ElementDescriptor} context.source the source object
   * @param {ElementDescriptor} context.parent the parent object
   * @param {Point} context.position position of the new element
   */
  AppendShapeHandler.prototype.preExecute = function(context) {

    var source = context.source;

    if (!source) {
      throw new Error('source required');
    }

    var target = context.target || source.parent,
        shape = context.shape,
        hints = context.hints || {};

    shape = context.shape =
      this._modeling.createShape(
        shape,
        context.position,
        target, { attach: hints.attach });

    context.shape = shape;
  };

  AppendShapeHandler.prototype.postExecute = function(context) {
    var hints = context.hints || {};

    if (!existsConnection(context.source, context.shape)) {

      // create connection
      if (hints.connectionTarget === context.source) {
        this._modeling.connect(context.shape, context.source, context.connection);
      } else {
        this._modeling.connect(context.source, context.shape, context.connection);
      }
    }
  };


  function existsConnection(source, target) {
    return some(source.outgoing, function(c) {
      return c.target === target;
    });
  }

  function CreateConnectionHandler(canvas, layouter) {
    this._canvas = canvas;
    this._layouter = layouter;
  }

  CreateConnectionHandler.$inject = [ 'canvas', 'layouter' ];


  // api //////////////////////


  /**
   * Appends a shape to a target shape
   *
   * @param {Object} context
   * @param {djs.element.Base} context.source the source object
   * @param {djs.element.Base} context.target the parent object
   * @param {Point} context.position position of the new element
   */
  CreateConnectionHandler.prototype.execute = function(context) {

    var connection = context.connection,
        source = context.source,
        target = context.target,
        parent = context.parent,
        parentIndex = context.parentIndex,
        hints = context.hints;

    if (!source || !target) {
      throw new Error('source and target required');
    }

    if (!parent) {
      throw new Error('parent required');
    }

    connection.source = source;
    connection.target = target;

    if (!connection.waypoints) {
      connection.waypoints = this._layouter.layoutConnection(connection, hints);
    }

    // add connection
    this._canvas.addConnection(connection, parent, parentIndex);

    return connection;
  };

  CreateConnectionHandler.prototype.revert = function(context) {
    var connection = context.connection;

    this._canvas.removeConnection(connection);

    connection.source = null;
    connection.target = null;

    return connection;
  };

  var round$3 = Math.round;

  function CreateElementsHandler(modeling) {
    this._modeling = modeling;
  }

  CreateElementsHandler.$inject = [
    'modeling'
  ];

  CreateElementsHandler.prototype.preExecute = function(context) {
    var elements = context.elements,
        parent = context.parent,
        parentIndex = context.parentIndex,
        position = context.position,
        hints = context.hints;

    var modeling = this._modeling;

    // make sure each element has x and y
    forEach$1(elements, function(element) {
      if (!isNumber(element.x)) {
        element.x = 0;
      }

      if (!isNumber(element.y)) {
        element.y = 0;
      }
    });

    var visibleElements = filter(elements, function(element) {
      return !element.hidden;
    });

    var bbox = getBBox(visibleElements);

    // center elements around position
    forEach$1(elements, function(element) {
      if (isConnection$5(element)) {
        element.waypoints = map(element.waypoints, function(waypoint) {
          return {
            x: round$3(waypoint.x - bbox.x - bbox.width / 2 + position.x),
            y: round$3(waypoint.y - bbox.y - bbox.height / 2 + position.y)
          };
        });
      }

      assign(element, {
        x: round$3(element.x - bbox.x - bbox.width / 2 + position.x),
        y: round$3(element.y - bbox.y - bbox.height / 2 + position.y)
      });
    });

    var parents = getParents$1(elements);

    var cache = {};

    forEach$1(elements, function(element) {
      if (isConnection$5(element)) {
        cache[ element.id ] = isNumber(parentIndex) ?
          modeling.createConnection(
            cache[ element.source.id ],
            cache[ element.target.id ],
            parentIndex,
            element,
            element.parent || parent,
            hints
          ) :
          modeling.createConnection(
            cache[ element.source.id ],
            cache[ element.target.id ],
            element,
            element.parent || parent,
            hints
          );

        return;
      }

      var createShapeHints = assign({}, hints);

      if (parents.indexOf(element) === -1) {
        createShapeHints.autoResize = false;
      }

      cache[ element.id ] = isNumber(parentIndex) ?
        modeling.createShape(
          element,
          pick(element, [ 'x', 'y', 'width', 'height' ]),
          element.parent || parent,
          parentIndex,
          createShapeHints
        ) :
        modeling.createShape(
          element,
          pick(element, [ 'x', 'y', 'width', 'height' ]),
          element.parent || parent,
          createShapeHints
        );
    });

    context.elements = values(cache);
  };

  // helpers //////////

  function isConnection$5(element) {
    return !!element.waypoints;
  }

  var round$2 = Math.round;


  /**
   * A handler that implements reversible addition of shapes.
   *
   * @param {canvas} Canvas
   */
  function CreateShapeHandler(canvas) {
    this._canvas = canvas;
  }

  CreateShapeHandler.$inject = [ 'canvas' ];


  // api //////////////////////


  /**
   * Appends a shape to a target shape
   *
   * @param {Object} context
   * @param {djs.model.Base} context.parent the parent object
   * @param {Point} context.position position of the new element
   */
  CreateShapeHandler.prototype.execute = function(context) {

    var shape = context.shape,
        positionOrBounds = context.position,
        parent = context.parent,
        parentIndex = context.parentIndex;

    if (!parent) {
      throw new Error('parent required');
    }

    if (!positionOrBounds) {
      throw new Error('position required');
    }

    // (1) add at event center position _or_ at given bounds
    if (positionOrBounds.width !== undefined) {
      assign(shape, positionOrBounds);
    } else {
      assign(shape, {
        x: positionOrBounds.x - round$2(shape.width / 2),
        y: positionOrBounds.y - round$2(shape.height / 2)
      });
    }

    // (2) add to canvas
    this._canvas.addShape(shape, parent, parentIndex);

    return shape;
  };


  /**
   * Undo append by removing the shape
   */
  CreateShapeHandler.prototype.revert = function(context) {

    var shape = context.shape;

    // (3) remove form canvas
    this._canvas.removeShape(shape);

    return shape;
  };

  /**
   * A handler that attaches a label to a given target shape.
   *
   * @param {Canvas} canvas
   */
  function CreateLabelHandler(canvas) {
    CreateShapeHandler.call(this, canvas);
  }

  e(CreateLabelHandler, CreateShapeHandler);

  CreateLabelHandler.$inject = [ 'canvas' ];


  // api //////////////////////


  var originalExecute = CreateShapeHandler.prototype.execute;

  /**
   * Appends a label to a target shape.
   *
   * @method CreateLabelHandler#execute
   *
   * @param {Object} context
   * @param {ElementDescriptor} context.target the element the label is attached to
   * @param {ElementDescriptor} context.parent the parent object
   * @param {Point} context.position position of the new element
   */
  CreateLabelHandler.prototype.execute = function(context) {

    var label = context.shape;

    ensureValidDimensions(label);

    label.labelTarget = context.labelTarget;

    return originalExecute.call(this, context);
  };

  var originalRevert = CreateShapeHandler.prototype.revert;

  /**
   * Undo append by removing the shape
   */
  CreateLabelHandler.prototype.revert = function(context) {
    context.shape.labelTarget = null;

    return originalRevert.call(this, context);
  };


  // helpers //////////////////////

  function ensureValidDimensions(label) {

    // make sure a label has valid { width, height } dimensions
    [ 'width', 'height' ].forEach(function(prop) {
      if (typeof label[prop] === 'undefined') {
        label[prop] = 0;
      }
    });
  }

  /**
   * A handler that implements reversible deletion of Connections.
   */
  function DeleteConnectionHandler(canvas, modeling) {
    this._canvas = canvas;
    this._modeling = modeling;
  }

  DeleteConnectionHandler.$inject = [
    'canvas',
    'modeling'
  ];


  /**
   * - Remove connections
   */
  DeleteConnectionHandler.prototype.preExecute = function(context) {

    var modeling = this._modeling;

    var connection = context.connection;

    // remove connections
    saveClear(connection.incoming, function(connection) {

      // To make sure that the connection isn't removed twice
      // For example if a container is removed
      modeling.removeConnection(connection, { nested: true });
    });

    saveClear(connection.outgoing, function(connection) {
      modeling.removeConnection(connection, { nested: true });
    });

  };


  DeleteConnectionHandler.prototype.execute = function(context) {

    var connection = context.connection,
        parent = connection.parent;

    context.parent = parent;

    // remember containment
    context.parentIndex = indexOf(parent.children, connection);

    context.source = connection.source;
    context.target = connection.target;

    this._canvas.removeConnection(connection);

    connection.source = null;
    connection.target = null;

    return connection;
  };

  /**
   * Command revert implementation.
   */
  DeleteConnectionHandler.prototype.revert = function(context) {

    var connection = context.connection,
        parent = context.parent,
        parentIndex = context.parentIndex;

    connection.source = context.source;
    connection.target = context.target;

    // restore containment
    add(parent.children, connection, parentIndex);

    this._canvas.addConnection(connection, parent);

    return connection;
  };

  function DeleteElementsHandler(modeling, elementRegistry) {
    this._modeling = modeling;
    this._elementRegistry = elementRegistry;
  }

  DeleteElementsHandler.$inject = [
    'modeling',
    'elementRegistry'
  ];


  DeleteElementsHandler.prototype.postExecute = function(context) {

    var modeling = this._modeling,
        elementRegistry = this._elementRegistry,
        elements = context.elements;

    forEach$1(elements, function(element) {

      // element may have been removed with previous
      // remove operations already (e.g. in case of nesting)
      if (!elementRegistry.get(element.id)) {
        return;
      }

      if (element.waypoints) {
        modeling.removeConnection(element);
      } else {
        modeling.removeShape(element);
      }
    });
  };

  /**
   * A handler that implements reversible deletion of shapes.
   *
   */
  function DeleteShapeHandler(canvas, modeling) {
    this._canvas = canvas;
    this._modeling = modeling;
  }

  DeleteShapeHandler.$inject = [ 'canvas', 'modeling' ];


  /**
   * - Remove connections
   * - Remove all direct children
   */
  DeleteShapeHandler.prototype.preExecute = function(context) {

    var modeling = this._modeling;

    var shape = context.shape;

    // remove connections
    saveClear(shape.incoming, function(connection) {

      // To make sure that the connection isn't removed twice
      // For example if a container is removed
      modeling.removeConnection(connection, { nested: true });
    });

    saveClear(shape.outgoing, function(connection) {
      modeling.removeConnection(connection, { nested: true });
    });

    // remove child shapes and connections
    saveClear(shape.children, function(child) {
      if (isConnection$4(child)) {
        modeling.removeConnection(child, { nested: true });
      } else {
        modeling.removeShape(child, { nested: true });
      }
    });
  };

  /**
   * Remove shape and remember the parent
   */
  DeleteShapeHandler.prototype.execute = function(context) {
    var canvas = this._canvas;

    var shape = context.shape,
        oldParent = shape.parent;

    context.oldParent = oldParent;

    // remove containment
    context.oldParentIndex = indexOf(oldParent.children, shape);

    // remove shape
    canvas.removeShape(shape);

    return shape;
  };


  /**
   * Command revert implementation
   */
  DeleteShapeHandler.prototype.revert = function(context) {

    var canvas = this._canvas;

    var shape = context.shape,
        oldParent = context.oldParent,
        oldParentIndex = context.oldParentIndex;

    // restore containment
    add(oldParent.children, shape, oldParentIndex);

    canvas.addShape(shape, oldParent);

    return shape;
  };

  function isConnection$4(element) {
    return element.waypoints;
  }

  /**
   * A handler that distributes elements evenly.
   */
  function DistributeElements(modeling) {
    this._modeling = modeling;
  }

  DistributeElements.$inject = [ 'modeling' ];

  var OFF_AXIS = {
    x: 'y',
    y: 'x'
  };

  DistributeElements.prototype.preExecute = function(context) {
    var modeling = this._modeling;

    var groups = context.groups,
        axis = context.axis,
        dimension = context.dimension;

    function updateRange(group, element) {
      group.range.min = Math.min(element[axis], group.range.min);
      group.range.max = Math.max(element[axis] + element[dimension], group.range.max);
    }

    function center(element) {
      return element[axis] + element[dimension] / 2;
    }

    function lastIdx(arr) {
      return arr.length - 1;
    }

    function rangeDiff(range) {
      return range.max - range.min;
    }

    function centerElement(refCenter, element) {
      var delta = { y: 0 };

      delta[axis] = refCenter - center(element);

      if (delta[axis]) {

        delta[OFF_AXIS[axis]] = 0;

        modeling.moveElements([ element ], delta, element.parent);
      }
    }

    var firstGroup = groups[0],
        lastGroupIdx = lastIdx(groups),
        lastGroup = groups[ lastGroupIdx ];

    var margin,
        spaceInBetween,
        groupsSize = 0; // the size of each range

    forEach$1(groups, function(group, idx) {
      var sortedElements,
          refElem,
          refCenter;

      if (group.elements.length < 2) {
        if (idx && idx !== groups.length - 1) {
          updateRange(group, group.elements[0]);

          groupsSize += rangeDiff(group.range);
        }
        return;
      }

      sortedElements = sortBy(group.elements, axis);

      refElem = sortedElements[0];

      if (idx === lastGroupIdx) {
        refElem = sortedElements[lastIdx(sortedElements)];
      }

      refCenter = center(refElem);

      // wanna update the ranges after the shapes have been centered
      group.range = null;

      forEach$1(sortedElements, function(element) {

        centerElement(refCenter, element);

        if (group.range === null) {
          group.range = {
            min: element[axis],
            max: element[axis] + element[dimension]
          };

          return;
        }

        // update group's range after centering the range elements
        updateRange(group, element);
      });

      if (idx && idx !== groups.length - 1) {
        groupsSize += rangeDiff(group.range);
      }
    });

    spaceInBetween = Math.abs(lastGroup.range.min - firstGroup.range.max);

    margin = Math.round((spaceInBetween - groupsSize) / (groups.length - 1));

    if (margin < groups.length - 1) {
      return;
    }

    forEach$1(groups, function(group, groupIdx) {
      var delta = {},
          prevGroup;

      if (group === firstGroup || group === lastGroup) {
        return;
      }

      prevGroup = groups[groupIdx - 1];

      group.range.max = 0;

      forEach$1(group.elements, function(element, idx) {
        delta[OFF_AXIS[axis]] = 0;
        delta[axis] = (prevGroup.range.max - element[axis]) + margin;

        if (group.range.min !== element[axis]) {
          delta[axis] += element[axis] - group.range.min;
        }

        if (delta[axis]) {
          modeling.moveElements([ element ], delta, element.parent);
        }

        group.range.max = Math.max(element[axis] + element[dimension], idx ? group.range.max : 0);
      });
    });
  };

  DistributeElements.prototype.postExecute = function(context) {

  };

  /**
   * A handler that implements reversible moving of shapes.
   */
  function LayoutConnectionHandler(layouter, canvas) {
    this._layouter = layouter;
    this._canvas = canvas;
  }

  LayoutConnectionHandler.$inject = [ 'layouter', 'canvas' ];

  LayoutConnectionHandler.prototype.execute = function(context) {

    var connection = context.connection;

    var oldWaypoints = connection.waypoints;

    assign(context, {
      oldWaypoints: oldWaypoints
    });

    connection.waypoints = this._layouter.layoutConnection(connection, context.hints);

    return connection;
  };

  LayoutConnectionHandler.prototype.revert = function(context) {

    var connection = context.connection;

    connection.waypoints = context.oldWaypoints;

    return connection;
  };

  /**
   * A handler that implements reversible moving of connections.
   *
   * The handler differs from the layout connection handler in a sense
   * that it preserves the connection layout.
   */
  function MoveConnectionHandler() { }


  MoveConnectionHandler.prototype.execute = function(context) {

    var connection = context.connection,
        delta = context.delta;

    var newParent = context.newParent || connection.parent,
        newParentIndex = context.newParentIndex,
        oldParent = connection.parent;

    // save old parent in context
    context.oldParent = oldParent;
    context.oldParentIndex = remove(oldParent.children, connection);

    // add to new parent at position
    add(newParent.children, connection, newParentIndex);

    // update parent
    connection.parent = newParent;

    // update waypoint positions
    forEach$1(connection.waypoints, function(p) {
      p.x += delta.x;
      p.y += delta.y;

      if (p.original) {
        p.original.x += delta.x;
        p.original.y += delta.y;
      }
    });

    return connection;
  };

  MoveConnectionHandler.prototype.revert = function(context) {

    var connection = context.connection,
        newParent = connection.parent,
        oldParent = context.oldParent,
        oldParentIndex = context.oldParentIndex,
        delta = context.delta;

    // remove from newParent
    remove(newParent.children, connection);

    // restore previous location in old parent
    add(oldParent.children, connection, oldParentIndex);

    // restore parent
    connection.parent = oldParent;

    // revert to old waypoint positions
    forEach$1(connection.waypoints, function(p) {
      p.x -= delta.x;
      p.y -= delta.y;

      if (p.original) {
        p.original.x -= delta.x;
        p.original.y -= delta.y;
      }
    });

    return connection;
  };

  function MoveClosure() {

    this.allShapes = {};
    this.allConnections = {};

    this.enclosedElements = {};
    this.enclosedConnections = {};

    this.topLevel = {};
  }


  MoveClosure.prototype.add = function(element, isTopLevel) {
    return this.addAll([ element ], isTopLevel);
  };


  MoveClosure.prototype.addAll = function(elements, isTopLevel) {

    var newClosure = getClosure(elements, !!isTopLevel, this);

    assign(this, newClosure);

    return this;
  };

  /**
   * A helper that is able to carry out serialized move
   * operations on multiple elements.
   *
   * @param {Modeling} modeling
   */
  function MoveHelper(modeling) {
    this._modeling = modeling;
  }

  /**
   * Move the specified elements and all children by the given delta.
   *
   * This moves all enclosed connections, too and layouts all affected
   * external connections.
   *
   * @param  {Array<djs.model.Base>} elements
   * @param  {Point} delta
   * @param  {djs.model.Base} newParent applied to the first level of shapes
   *
   * @return {Array<djs.model.Base>} list of touched elements
   */
  MoveHelper.prototype.moveRecursive = function(elements, delta, newParent) {
    if (!elements) {
      return [];
    } else {
      return this.moveClosure(this.getClosure(elements), delta, newParent);
    }
  };

  /**
   * Move the given closure of elmements.
   *
   * @param {Object} closure
   * @param {Point} delta
   * @param {djs.model.Base} [newParent]
   * @param {djs.model.Base} [newHost]
   */
  MoveHelper.prototype.moveClosure = function(closure, delta, newParent, newHost, primaryShape) {
    var modeling = this._modeling;

    var allShapes = closure.allShapes,
        allConnections = closure.allConnections,
        enclosedConnections = closure.enclosedConnections,
        topLevel = closure.topLevel,
        keepParent = false;

    if (primaryShape && primaryShape.parent === newParent) {
      keepParent = true;
    }

    // move all shapes
    forEach$1(allShapes, function(shape) {

      // move the element according to the given delta
      modeling.moveShape(shape, delta, topLevel[shape.id] && !keepParent && newParent, {
        recurse: false,
        layout: false
      });
    });

    // move all child connections / layout external connections
    forEach$1(allConnections, function(c) {

      var sourceMoved = !!allShapes[c.source.id],
          targetMoved = !!allShapes[c.target.id];

      if (enclosedConnections[c.id] && sourceMoved && targetMoved) {
        modeling.moveConnection(c, delta, topLevel[c.id] && !keepParent && newParent);
      } else {
        modeling.layoutConnection(c, {
          connectionStart: sourceMoved && getMovedSourceAnchor(c, c.source, delta),
          connectionEnd: targetMoved && getMovedTargetAnchor(c, c.target, delta)
        });
      }
    });
  };

  /**
   * Returns the closure for the selected elements
   *
   * @param  {Array<djs.model.Base>} elements
   * @return {MoveClosure} closure
   */
  MoveHelper.prototype.getClosure = function(elements) {
    return new MoveClosure().addAll(elements, true);
  };

  /**
   * A handler that implements reversible moving of shapes.
   */
  function MoveElementsHandler(modeling) {
    this._helper = new MoveHelper(modeling);
  }

  MoveElementsHandler.$inject = [ 'modeling' ];

  MoveElementsHandler.prototype.preExecute = function(context) {
    context.closure = this._helper.getClosure(context.shapes);
  };

  MoveElementsHandler.prototype.postExecute = function(context) {

    var hints = context.hints,
        primaryShape;

    if (hints && hints.primaryShape) {
      primaryShape = hints.primaryShape;
      hints.oldParent = primaryShape.parent;
    }

    this._helper.moveClosure(
      context.closure,
      context.delta,
      context.newParent,
      context.newHost,
      primaryShape
    );
  };

  /**
   * A handler that implements reversible moving of shapes.
   */
  function MoveShapeHandler(modeling) {
    this._modeling = modeling;

    this._helper = new MoveHelper(modeling);
  }

  MoveShapeHandler.$inject = [ 'modeling' ];


  MoveShapeHandler.prototype.execute = function(context) {

    var shape = context.shape,
        delta = context.delta,
        newParent = context.newParent || shape.parent,
        newParentIndex = context.newParentIndex,
        oldParent = shape.parent;

    context.oldBounds = pick(shape, [ 'x', 'y', 'width', 'height' ]);

    // save old parent in context
    context.oldParent = oldParent;
    context.oldParentIndex = remove(oldParent.children, shape);

    // add to new parent at position
    add(newParent.children, shape, newParentIndex);

    // update shape parent + position
    assign(shape, {
      parent: newParent,
      x: shape.x + delta.x,
      y: shape.y + delta.y
    });

    return shape;
  };

  MoveShapeHandler.prototype.postExecute = function(context) {

    var shape = context.shape,
        delta = context.delta,
        hints = context.hints;

    var modeling = this._modeling;

    if (hints.layout !== false) {

      forEach$1(shape.incoming, function(c) {
        modeling.layoutConnection(c, {
          connectionEnd: getMovedTargetAnchor(c, shape, delta)
        });
      });

      forEach$1(shape.outgoing, function(c) {
        modeling.layoutConnection(c, {
          connectionStart: getMovedSourceAnchor(c, shape, delta)
        });
      });
    }

    if (hints.recurse !== false) {
      this.moveChildren(context);
    }
  };

  MoveShapeHandler.prototype.revert = function(context) {

    var shape = context.shape,
        oldParent = context.oldParent,
        oldParentIndex = context.oldParentIndex,
        delta = context.delta;

    // restore previous location in old parent
    add(oldParent.children, shape, oldParentIndex);

    // revert to old position and parent
    assign(shape, {
      parent: oldParent,
      x: shape.x - delta.x,
      y: shape.y - delta.y
    });

    return shape;
  };

  MoveShapeHandler.prototype.moveChildren = function(context) {

    var delta = context.delta,
        shape = context.shape;

    this._helper.moveRecursive(shape.children, delta, null);
  };

  MoveShapeHandler.prototype.getNewParent = function(context) {
    return context.newParent || context.shape.parent;
  };

  /**
   * Reconnect connection handler
   */
  function ReconnectConnectionHandler(modeling) {
    this._modeling = modeling;
  }

  ReconnectConnectionHandler.$inject = [ 'modeling' ];

  ReconnectConnectionHandler.prototype.execute = function(context) {
    var newSource = context.newSource,
        newTarget = context.newTarget,
        connection = context.connection,
        dockingOrPoints = context.dockingOrPoints;

    if (!newSource && !newTarget) {
      throw new Error('newSource or newTarget required');
    }

    if (isArray$3(dockingOrPoints)) {
      context.oldWaypoints = connection.waypoints;
      connection.waypoints = dockingOrPoints;
    }

    if (newSource) {
      context.oldSource = connection.source;
      connection.source = newSource;
    }

    if (newTarget) {
      context.oldTarget = connection.target;
      connection.target = newTarget;
    }

    return connection;
  };

  ReconnectConnectionHandler.prototype.postExecute = function(context) {
    var connection = context.connection,
        newSource = context.newSource,
        newTarget = context.newTarget,
        dockingOrPoints = context.dockingOrPoints,
        hints = context.hints || {};

    var layoutConnectionHints = {};

    if (hints.connectionStart) {
      layoutConnectionHints.connectionStart = hints.connectionStart;
    }

    if (hints.connectionEnd) {
      layoutConnectionHints.connectionEnd = hints.connectionEnd;
    }

    if (hints.layoutConnection === false) {
      return;
    }

    if (newSource && (!newTarget || hints.docking === 'source')) {
      layoutConnectionHints.connectionStart = layoutConnectionHints.connectionStart
        || getDocking(isArray$3(dockingOrPoints) ? dockingOrPoints[ 0 ] : dockingOrPoints);
    }

    if (newTarget && (!newSource || hints.docking === 'target')) {
      layoutConnectionHints.connectionEnd = layoutConnectionHints.connectionEnd
        || getDocking(isArray$3(dockingOrPoints) ? dockingOrPoints[ dockingOrPoints.length - 1 ] : dockingOrPoints);
    }

    if (hints.newWaypoints) {
      layoutConnectionHints.waypoints = hints.newWaypoints;
    }

    this._modeling.layoutConnection(connection, layoutConnectionHints);
  };

  ReconnectConnectionHandler.prototype.revert = function(context) {
    var oldSource = context.oldSource,
        oldTarget = context.oldTarget,
        oldWaypoints = context.oldWaypoints,
        connection = context.connection;

    if (oldSource) {
      connection.source = oldSource;
    }

    if (oldTarget) {
      connection.target = oldTarget;
    }

    if (oldWaypoints) {
      connection.waypoints = oldWaypoints;
    }

    return connection;
  };



  // helpers //////////

  function getDocking(point) {
    return point.original || point;
  }

  /**
   * Replace shape by adding new shape and removing old shape. Incoming and outgoing connections will
   * be kept if possible.
   *
   * @class
   * @constructor
   *
   * @param {Modeling} modeling
   * @param {Rules} rules
   */
  function ReplaceShapeHandler(modeling, rules) {
    this._modeling = modeling;
    this._rules = rules;
  }

  ReplaceShapeHandler.$inject = [ 'modeling', 'rules' ];


  /**
   * Add new shape.
   *
   * @param {Object} context
   * @param {djs.model.Shape} context.oldShape
   * @param {Object} context.newData
   * @param {string} context.newData.type
   * @param {number} context.newData.x
   * @param {number} context.newData.y
   * @param {Object} [hints]
   */
  ReplaceShapeHandler.prototype.preExecute = function(context) {
    var self = this,
        modeling = this._modeling,
        rules = this._rules;

    var oldShape = context.oldShape,
        newData = context.newData,
        hints = context.hints || {},
        newShape;

    function canReconnect(source, target, connection) {
      return rules.allowed('connection.reconnect', {
        connection: connection,
        source: source,
        target: target
      });
    }

    // (1) add new shape at given position
    var position = {
      x: newData.x,
      y: newData.y
    };

    var oldBounds = {
      x: oldShape.x,
      y: oldShape.y,
      width: oldShape.width,
      height: oldShape.height
    };

    newShape = context.newShape =
      context.newShape ||
      self.createShape(newData, position, oldShape.parent, hints);

    // (2) update host
    if (oldShape.host) {
      modeling.updateAttachment(newShape, oldShape.host);
    }

    // (3) adopt all children from old shape
    var children;

    if (hints.moveChildren !== false) {
      children = oldShape.children.slice();

      modeling.moveElements(children, { x: 0, y: 0 }, newShape, hints);
    }

    // (4) reconnect connections to new shape if possible
    var incoming = oldShape.incoming.slice(),
        outgoing = oldShape.outgoing.slice();

    forEach$1(incoming, function(connection) {
      var source = connection.source,
          allowed = canReconnect(source, newShape, connection);

      if (allowed) {
        self.reconnectEnd(
          connection, newShape,
          getResizedTargetAnchor(connection, newShape, oldBounds),
          hints
        );
      }
    });

    forEach$1(outgoing, function(connection) {
      var target = connection.target,
          allowed = canReconnect(newShape, target, connection);

      if (allowed) {
        self.reconnectStart(
          connection, newShape,
          getResizedSourceAnchor(connection, newShape, oldBounds),
          hints
        );
      }
    });
  };


  /**
   * Remove old shape.
   */
  ReplaceShapeHandler.prototype.postExecute = function(context) {
    var oldShape = context.oldShape;

    this._modeling.removeShape(oldShape);
  };


  ReplaceShapeHandler.prototype.execute = function(context) {};


  ReplaceShapeHandler.prototype.revert = function(context) {};


  ReplaceShapeHandler.prototype.createShape = function(shape, position, target, hints) {
    return this._modeling.createShape(shape, position, target, hints);
  };


  ReplaceShapeHandler.prototype.reconnectStart = function(connection, newSource, dockingPoint, hints) {
    this._modeling.reconnectStart(connection, newSource, dockingPoint, hints);
  };


  ReplaceShapeHandler.prototype.reconnectEnd = function(connection, newTarget, dockingPoint, hints) {
    this._modeling.reconnectEnd(connection, newTarget, dockingPoint, hints);
  };

  /**
   * A handler that implements reversible resizing of shapes.
   *
   * @param {Modeling} modeling
   */
  function ResizeShapeHandler(modeling) {
    this._modeling = modeling;
  }

  ResizeShapeHandler.$inject = [ 'modeling' ];

  /**
   * {
   *   shape: {....}
   *   newBounds: {
   *     width:  20,
   *     height: 40,
   *     x:       5,
   *     y:      10
   *   }
   *
   * }
   */
  ResizeShapeHandler.prototype.execute = function(context) {
    var shape = context.shape,
        newBounds = context.newBounds,
        minBounds = context.minBounds;

    if (newBounds.x === undefined || newBounds.y === undefined ||
        newBounds.width === undefined || newBounds.height === undefined) {
      throw new Error('newBounds must have {x, y, width, height} properties');
    }

    if (minBounds && (newBounds.width < minBounds.width
      || newBounds.height < minBounds.height)) {
      throw new Error('width and height cannot be less than minimum height and width');
    } else if (!minBounds
      && newBounds.width < 10 || newBounds.height < 10) {
      throw new Error('width and height cannot be less than 10px');
    }

    // save old bbox in context
    context.oldBounds = {
      width:  shape.width,
      height: shape.height,
      x:      shape.x,
      y:      shape.y
    };

    // update shape
    assign(shape, {
      width:  newBounds.width,
      height: newBounds.height,
      x:      newBounds.x,
      y:      newBounds.y
    });

    return shape;
  };

  ResizeShapeHandler.prototype.postExecute = function(context) {
    var modeling = this._modeling;

    var shape = context.shape,
        oldBounds = context.oldBounds,
        hints = context.hints || {};

    if (hints.layout === false) {
      return;
    }

    forEach$1(shape.incoming, function(c) {
      modeling.layoutConnection(c, {
        connectionEnd: getResizedTargetAnchor(c, shape, oldBounds)
      });
    });

    forEach$1(shape.outgoing, function(c) {
      modeling.layoutConnection(c, {
        connectionStart: getResizedSourceAnchor(c, shape, oldBounds)
      });
    });

  };

  ResizeShapeHandler.prototype.revert = function(context) {

    var shape = context.shape,
        oldBounds = context.oldBounds;

    // restore previous bbox
    assign(shape, {
      width:  oldBounds.width,
      height: oldBounds.height,
      x:      oldBounds.x,
      y:      oldBounds.y
    });

    return shape;
  };

  /**
   * Add or remove space by moving and resizing shapes and updating connection waypoints.
   */
  function SpaceToolHandler(modeling) {
    this._modeling = modeling;
  }

  SpaceToolHandler.$inject = [ 'modeling' ];

  SpaceToolHandler.prototype.preExecute = function(context) {
    var delta = context.delta,
        direction = context.direction,
        movingShapes = context.movingShapes,
        resizingShapes = context.resizingShapes,
        start = context.start,
        oldBounds = {};

    // (1) move shapes
    this.moveShapes(movingShapes, delta);

    // (2a) save old bounds of resized shapes
    forEach$1(resizingShapes, function(shape) {
      oldBounds[shape.id] = getBounds(shape);
    });

    // (2b) resize shapes
    this.resizeShapes(resizingShapes, delta, direction);

    // (3) update connection waypoints
    this.updateConnectionWaypoints(
      getWaypointsUpdatingConnections(movingShapes, resizingShapes),
      delta,
      direction,
      start,
      movingShapes,
      resizingShapes,
      oldBounds
    );
  };

  SpaceToolHandler.prototype.execute = function() {};
  SpaceToolHandler.prototype.revert = function() {};

  SpaceToolHandler.prototype.moveShapes = function(shapes, delta) {
    var self = this;

    forEach$1(shapes, function(element) {
      self._modeling.moveShape(element, delta, null, {
        autoResize: false,
        layout: false,
        recurse: false
      });
    });
  };

  SpaceToolHandler.prototype.resizeShapes = function(shapes, delta, direction) {
    var self = this;

    forEach$1(shapes, function(shape) {
      var newBounds = resizeBounds(shape, direction, delta);

      self._modeling.resizeShape(shape, newBounds, null, {
        attachSupport: false,
        autoResize: false,
        layout: false
      });
    });
  };

  /**
   * Update connections waypoints according to the rules:
   *   1. Both source and target are moved/resized => move waypoints by the delta
   *   2. Only one of source and target is moved/resized => re-layout connection with moved start/end
   */
  SpaceToolHandler.prototype.updateConnectionWaypoints = function(
      connections,
      delta,
      direction,
      start,
      movingShapes,
      resizingShapes,
      oldBounds
  ) {
    var self = this,
        affectedShapes = movingShapes.concat(resizingShapes);

    forEach$1(connections, function(connection) {
      var source = connection.source,
          target = connection.target,
          waypoints = copyWaypoints(connection),
          axis = getAxisFromDirection(direction),
          layoutHints = {
            labelBehavior: false
          };

      if (includes$1(affectedShapes, source) && includes$1(affectedShapes, target)) {

        // move waypoints
        waypoints = map(waypoints, function(waypoint) {
          if (shouldMoveWaypoint(waypoint, start, direction)) {

            // move waypoint
            waypoint[ axis ] = waypoint[ axis ] + delta[ axis ];
          }

          if (waypoint.original && shouldMoveWaypoint(waypoint.original, start, direction)) {

            // move waypoint original
            waypoint.original[ axis ] = waypoint.original[ axis ] + delta[ axis ];
          }

          return waypoint;
        });

        self._modeling.updateWaypoints(connection, waypoints, {
          labelBehavior: false
        });
      } else if (includes$1(affectedShapes, source) || includes$1(affectedShapes, target)) {

        // re-layout connection with moved start/end
        if (includes$1(movingShapes, source)) {
          layoutHints.connectionStart = getMovedSourceAnchor(connection, source, delta);
        } else if (includes$1(movingShapes, target)) {
          layoutHints.connectionEnd = getMovedTargetAnchor(connection, target, delta);
        } else if (includes$1(resizingShapes, source)) {
          layoutHints.connectionStart = getResizedSourceAnchor(
            connection, source, oldBounds[source.id]
          );
        } else if (includes$1(resizingShapes, target)) {
          layoutHints.connectionEnd = getResizedTargetAnchor(
            connection, target, oldBounds[target.id]
          );
        }

        self._modeling.layoutConnection(connection, layoutHints);
      }
    });
  };


  // helpers //////////

  function copyWaypoint(waypoint) {
    return assign({}, waypoint);
  }

  function copyWaypoints(connection) {
    return map(connection.waypoints, function(waypoint) {

      waypoint = copyWaypoint(waypoint);

      if (waypoint.original) {
        waypoint.original = copyWaypoint(waypoint.original);
      }

      return waypoint;
    });
  }

  function getAxisFromDirection(direction) {
    switch (direction) {
    case 'n':
      return 'y';
    case 'w':
      return 'x';
    case 's':
      return 'y';
    case 'e':
      return 'x';
    }
  }

  function shouldMoveWaypoint(waypoint, start, direction) {
    var relevantAxis = getAxisFromDirection(direction);

    if (/e|s/.test(direction)) {
      return waypoint[ relevantAxis ] > start;
    } else if (/n|w/.test(direction)) {
      return waypoint[ relevantAxis ] < start;
    }
  }

  function includes$1(array, item) {
    return array.indexOf(item) !== -1;
  }

  function getBounds(shape) {
    return {
      x: shape.x,
      y: shape.y,
      height: shape.height,
      width: shape.width
    };
  }

  /**
   * A handler that toggles the collapsed state of an element
   * and the visibility of all its children.
   *
   * @param {Modeling} modeling
   */
  function ToggleShapeCollapseHandler(modeling) {
    this._modeling = modeling;
  }

  ToggleShapeCollapseHandler.$inject = [ 'modeling' ];


  ToggleShapeCollapseHandler.prototype.execute = function(context) {

    var shape = context.shape,
        children = shape.children;

    // recursively remember previous visibility of children
    context.oldChildrenVisibility = getElementsVisibilityRecursive(children);

    // toggle state
    shape.collapsed = !shape.collapsed;

    // recursively hide/show children
    var result = setHiddenRecursive(children, shape.collapsed);

    return [ shape ].concat(result);
  };


  ToggleShapeCollapseHandler.prototype.revert = function(context) {

    var shape = context.shape,
        oldChildrenVisibility = context.oldChildrenVisibility;

    var children = shape.children;

    // recursively set old visability of children
    var result = restoreVisibilityRecursive(children, oldChildrenVisibility);

    // retoggle state
    shape.collapsed = !shape.collapsed;

    return [ shape ].concat(result);
  };


  // helpers //////////////////////

  /**
   * Return a map { elementId -> hiddenState}.
   *
   * @param {Array<djs.model.Shape>} elements
   *
   * @return {Object}
   */
  function getElementsVisibilityRecursive(elements) {

    var result = {};

    forEach$1(elements, function(element) {
      result[element.id] = element.hidden;

      if (element.children) {
        result = assign({}, result, getElementsVisibilityRecursive(element.children));
      }
    });

    return result;
  }


  function setHiddenRecursive(elements, newHidden) {
    var result = [];
    forEach$1(elements, function(element) {
      element.hidden = newHidden;

      result = result.concat(element);

      if (element.children) {
        result = result.concat(setHiddenRecursive(element.children, element.collapsed || newHidden));
      }
    });

    return result;
  }

  function restoreVisibilityRecursive(elements, lastState) {
    var result = [];
    forEach$1(elements, function(element) {
      element.hidden = lastState[element.id];

      result = result.concat(element);

      if (element.children) {
        result = result.concat(restoreVisibilityRecursive(element.children, lastState));
      }
    });

    return result;
  }

  /**
   * A handler that implements reversible attaching/detaching of shapes.
   */
  function UpdateAttachmentHandler(modeling) {
    this._modeling = modeling;
  }

  UpdateAttachmentHandler.$inject = [ 'modeling' ];


  UpdateAttachmentHandler.prototype.execute = function(context) {
    var shape = context.shape,
        newHost = context.newHost,
        oldHost = shape.host;

    // (0) detach from old host
    context.oldHost = oldHost;
    context.attacherIdx = removeAttacher(oldHost, shape);

    // (1) attach to new host
    addAttacher(newHost, shape);

    // (2) update host
    shape.host = newHost;

    return shape;
  };

  UpdateAttachmentHandler.prototype.revert = function(context) {
    var shape = context.shape,
        newHost = context.newHost,
        oldHost = context.oldHost,
        attacherIdx = context.attacherIdx;

    // (2) update host
    shape.host = oldHost;

    // (1) attach to new host
    removeAttacher(newHost, shape);

    // (0) detach from old host
    addAttacher(oldHost, shape, attacherIdx);

    return shape;
  };


  function removeAttacher(host, attacher) {

    // remove attacher from host
    return remove(host && host.attachers, attacher);
  }

  function addAttacher(host, attacher, idx) {

    if (!host) {
      return;
    }

    var attachers = host.attachers;

    if (!attachers) {
      host.attachers = attachers = [];
    }

    add(attachers, attacher, idx);
  }

  function UpdateWaypointsHandler() { }

  UpdateWaypointsHandler.prototype.execute = function(context) {

    var connection = context.connection,
        newWaypoints = context.newWaypoints;

    context.oldWaypoints = connection.waypoints;

    connection.waypoints = newWaypoints;

    return connection;
  };

  UpdateWaypointsHandler.prototype.revert = function(context) {

    var connection = context.connection,
        oldWaypoints = context.oldWaypoints;

    connection.waypoints = oldWaypoints;

    return connection;
  };

  /**
   * The basic modeling entry point.
   *
   * @param {EventBus} eventBus
   * @param {ElementFactory} elementFactory
   * @param {CommandStack} commandStack
   */
  function Modeling$1(eventBus, elementFactory, commandStack) {
    this._eventBus = eventBus;
    this._elementFactory = elementFactory;
    this._commandStack = commandStack;

    var self = this;

    eventBus.on('diagram.init', function() {

      // register modeling handlers
      self.registerHandlers(commandStack);
    });
  }

  Modeling$1.$inject = [ 'eventBus', 'elementFactory', 'commandStack' ];


  Modeling$1.prototype.getHandlers = function() {
    return {
      'shape.append': AppendShapeHandler,
      'shape.create': CreateShapeHandler,
      'shape.delete': DeleteShapeHandler,
      'shape.move': MoveShapeHandler,
      'shape.resize': ResizeShapeHandler,
      'shape.replace': ReplaceShapeHandler,
      'shape.toggleCollapse': ToggleShapeCollapseHandler,

      'spaceTool': SpaceToolHandler,

      'label.create': CreateLabelHandler,

      'connection.create': CreateConnectionHandler,
      'connection.delete': DeleteConnectionHandler,
      'connection.move': MoveConnectionHandler,
      'connection.layout': LayoutConnectionHandler,

      'connection.updateWaypoints': UpdateWaypointsHandler,

      'connection.reconnect': ReconnectConnectionHandler,

      'elements.create': CreateElementsHandler,
      'elements.move': MoveElementsHandler,
      'elements.delete': DeleteElementsHandler,

      'elements.distribute': DistributeElements,
      'elements.align': AlignElements,

      'element.updateAttachment': UpdateAttachmentHandler
    };
  };

  /**
   * Register handlers with the command stack
   *
   * @param {CommandStack} commandStack
   */
  Modeling$1.prototype.registerHandlers = function(commandStack) {
    forEach$1(this.getHandlers(), function(handler, id) {
      commandStack.registerHandler(id, handler);
    });
  };


  // modeling helpers //////////////////////

  Modeling$1.prototype.moveShape = function(shape, delta, newParent, newParentIndex, hints) {

    if (typeof newParentIndex === 'object') {
      hints = newParentIndex;
      newParentIndex = null;
    }

    var context = {
      shape: shape,
      delta:  delta,
      newParent: newParent,
      newParentIndex: newParentIndex,
      hints: hints || {}
    };

    this._commandStack.execute('shape.move', context);
  };


  /**
   * Update the attachment of the given shape.
   *
   * @param {djs.mode.Base} shape
   * @param {djs.model.Base} [newHost]
   */
  Modeling$1.prototype.updateAttachment = function(shape, newHost) {
    var context = {
      shape: shape,
      newHost: newHost
    };

    this._commandStack.execute('element.updateAttachment', context);
  };


  /**
   * Move a number of shapes to a new target, either setting it as
   * the new parent or attaching it.
   *
   * @param {Array<djs.mode.Base>} shapes
   * @param {Point} delta
   * @param {djs.model.Base} [target]
   * @param {Object} [hints]
   * @param {boolean} [hints.attach=false]
   */
  Modeling$1.prototype.moveElements = function(shapes, delta, target, hints) {

    hints = hints || {};

    var attach = hints.attach;

    var newParent = target,
        newHost;

    if (attach === true) {
      newHost = target;
      newParent = target.parent;
    } else

    if (attach === false) {
      newHost = null;
    }

    var context = {
      shapes: shapes,
      delta: delta,
      newParent: newParent,
      newHost: newHost,
      hints: hints
    };

    this._commandStack.execute('elements.move', context);
  };


  Modeling$1.prototype.moveConnection = function(connection, delta, newParent, newParentIndex, hints) {

    if (typeof newParentIndex === 'object') {
      hints = newParentIndex;
      newParentIndex = undefined;
    }

    var context = {
      connection: connection,
      delta: delta,
      newParent: newParent,
      newParentIndex: newParentIndex,
      hints: hints || {}
    };

    this._commandStack.execute('connection.move', context);
  };


  Modeling$1.prototype.layoutConnection = function(connection, hints) {
    var context = {
      connection: connection,
      hints: hints || {}
    };

    this._commandStack.execute('connection.layout', context);
  };


  /**
   * Create connection.
   *
   * @param {djs.model.Base} source
   * @param {djs.model.Base} target
   * @param {number} [parentIndex]
   * @param {Object|djs.model.Connection} connection
   * @param {djs.model.Base} parent
   * @param {Object} hints
   *
   * @return {djs.model.Connection} the created connection.
   */
  Modeling$1.prototype.createConnection = function(source, target, parentIndex, connection, parent, hints) {

    if (typeof parentIndex === 'object') {
      hints = parent;
      parent = connection;
      connection = parentIndex;
      parentIndex = undefined;
    }

    connection = this._create('connection', connection);

    var context = {
      source: source,
      target: target,
      parent: parent,
      parentIndex: parentIndex,
      connection: connection,
      hints: hints
    };

    this._commandStack.execute('connection.create', context);

    return context.connection;
  };


  /**
   * Create a shape at the specified position.
   *
   * @param {djs.model.Shape|Object} shape
   * @param {Point} position
   * @param {djs.model.Shape|djs.model.Root} target
   * @param {number} [parentIndex] position in parents children list
   * @param {Object} [hints]
   * @param {boolean} [hints.attach] whether to attach to target or become a child
   *
   * @return {djs.model.Shape} the created shape
   */
  Modeling$1.prototype.createShape = function(shape, position, target, parentIndex, hints) {

    if (typeof parentIndex !== 'number') {
      hints = parentIndex;
      parentIndex = undefined;
    }

    hints = hints || {};

    var attach = hints.attach,
        parent,
        host;

    shape = this._create('shape', shape);

    if (attach) {
      parent = target.parent;
      host = target;
    } else {
      parent = target;
    }

    var context = {
      position: position,
      shape: shape,
      parent: parent,
      parentIndex: parentIndex,
      host: host,
      hints: hints
    };

    this._commandStack.execute('shape.create', context);

    return context.shape;
  };


  Modeling$1.prototype.createElements = function(elements, position, parent, parentIndex, hints) {
    if (!isArray$3(elements)) {
      elements = [ elements ];
    }

    if (typeof parentIndex !== 'number') {
      hints = parentIndex;
      parentIndex = undefined;
    }

    hints = hints || {};

    var context = {
      position: position,
      elements: elements,
      parent: parent,
      parentIndex: parentIndex,
      hints: hints
    };

    this._commandStack.execute('elements.create', context);

    return context.elements;
  };


  Modeling$1.prototype.createLabel = function(labelTarget, position, label, parent) {

    label = this._create('label', label);

    var context = {
      labelTarget: labelTarget,
      position: position,
      parent: parent || labelTarget.parent,
      shape: label
    };

    this._commandStack.execute('label.create', context);

    return context.shape;
  };


  /**
   * Append shape to given source, drawing a connection
   * between source and the newly created shape.
   *
   * @param {djs.model.Shape} source
   * @param {djs.model.Shape|Object} shape
   * @param {Point} position
   * @param {djs.model.Shape} target
   * @param {Object} [hints]
   * @param {boolean} [hints.attach]
   * @param {djs.model.Connection|Object} [hints.connection]
   * @param {djs.model.Base} [hints.connectionParent]
   *
   * @return {djs.model.Shape} the newly created shape
   */
  Modeling$1.prototype.appendShape = function(source, shape, position, target, hints) {

    hints = hints || {};

    shape = this._create('shape', shape);

    var context = {
      source: source,
      position: position,
      target: target,
      shape: shape,
      connection: hints.connection,
      connectionParent: hints.connectionParent,
      hints: hints
    };

    this._commandStack.execute('shape.append', context);

    return context.shape;
  };


  Modeling$1.prototype.removeElements = function(elements) {
    var context = {
      elements: elements
    };

    this._commandStack.execute('elements.delete', context);
  };


  Modeling$1.prototype.distributeElements = function(groups, axis, dimension) {
    var context = {
      groups: groups,
      axis: axis,
      dimension: dimension
    };

    this._commandStack.execute('elements.distribute', context);
  };


  Modeling$1.prototype.removeShape = function(shape, hints) {
    var context = {
      shape: shape,
      hints: hints || {}
    };

    this._commandStack.execute('shape.delete', context);
  };


  Modeling$1.prototype.removeConnection = function(connection, hints) {
    var context = {
      connection: connection,
      hints: hints || {}
    };

    this._commandStack.execute('connection.delete', context);
  };

  Modeling$1.prototype.replaceShape = function(oldShape, newShape, hints) {
    var context = {
      oldShape: oldShape,
      newData: newShape,
      hints: hints || {}
    };

    this._commandStack.execute('shape.replace', context);

    return context.newShape;
  };

  Modeling$1.prototype.alignElements = function(elements, alignment) {
    var context = {
      elements: elements,
      alignment: alignment
    };

    this._commandStack.execute('elements.align', context);
  };

  Modeling$1.prototype.resizeShape = function(shape, newBounds, minBounds, hints) {
    var context = {
      shape: shape,
      newBounds: newBounds,
      minBounds: minBounds,
      hints: hints
    };

    this._commandStack.execute('shape.resize', context);
  };

  Modeling$1.prototype.createSpace = function(movingShapes, resizingShapes, delta, direction, start) {
    var context = {
      delta: delta,
      direction: direction,
      movingShapes: movingShapes,
      resizingShapes: resizingShapes,
      start: start
    };

    this._commandStack.execute('spaceTool', context);
  };

  Modeling$1.prototype.updateWaypoints = function(connection, newWaypoints, hints) {
    var context = {
      connection: connection,
      newWaypoints: newWaypoints,
      hints: hints || {}
    };

    this._commandStack.execute('connection.updateWaypoints', context);
  };

  Modeling$1.prototype.reconnect = function(connection, source, target, dockingOrPoints, hints) {
    var context = {
      connection: connection,
      newSource: source,
      newTarget: target,
      dockingOrPoints: dockingOrPoints,
      hints: hints || {}
    };

    this._commandStack.execute('connection.reconnect', context);
  };

  Modeling$1.prototype.reconnectStart = function(connection, newSource, dockingOrPoints, hints) {
    if (!hints) {
      hints = {};
    }

    this.reconnect(connection, newSource, connection.target, dockingOrPoints, assign(hints, {
      docking: 'source'
    }));
  };

  Modeling$1.prototype.reconnectEnd = function(connection, newTarget, dockingOrPoints, hints) {
    if (!hints) {
      hints = {};
    }

    this.reconnect(connection, connection.source, newTarget, dockingOrPoints, assign(hints, {
      docking: 'target'
    }));
  };

  Modeling$1.prototype.connect = function(source, target, attrs, hints) {
    return this.createConnection(source, target, attrs || {}, source.parent, hints);
  };

  Modeling$1.prototype._create = function(type, attrs) {
    if (attrs instanceof Base$1) {
      return attrs;
    } else {
      return this._elementFactory.create(type, attrs);
    }
  };

  Modeling$1.prototype.toggleCollapse = function(shape, hints) {
    var context = {
      shape: shape,
      hints: hints || {}
    };

    this._commandStack.execute('shape.toggleCollapse', context);
  };

  function UpdateModdlePropertiesHandler(elementRegistry) {
    this._elementRegistry = elementRegistry;
  }

  UpdateModdlePropertiesHandler.$inject = [ 'elementRegistry' ];

  UpdateModdlePropertiesHandler.prototype.execute = function(context) {

    var element = context.element,
        moddleElement = context.moddleElement,
        properties = context.properties;

    if (!moddleElement) {
      throw new Error('<moddleElement> required');
    }

    // TODO(nikku): we need to ensure that ID properties
    // are properly registered / unregistered via
    // this._moddle.ids.assigned(id)
    var changed = context.changed || this.getVisualReferences(moddleElement).concat(element);
    var oldProperties = context.oldProperties || getModdleProperties(moddleElement, keys(properties));

    setModdleProperties(moddleElement, properties);

    context.oldProperties = oldProperties;
    context.changed = changed;

    return changed;
  };

  UpdateModdlePropertiesHandler.prototype.revert = function(context) {
    var oldProperties = context.oldProperties,
        moddleElement = context.moddleElement,
        changed = context.changed;

    setModdleProperties(moddleElement, oldProperties);

    return changed;
  };

  /**
   * Return visual references of given moddle element within the diagram.
   *
   * @param {ModdleElement} moddleElement
   *
   * @return {Array<djs.model.Element>}
   */
  UpdateModdlePropertiesHandler.prototype.getVisualReferences = function(moddleElement) {

    var elementRegistry = this._elementRegistry;

    if (is$1(moddleElement, 'bpmn:DataObject')) {
      return getAllDataObjectReferences(moddleElement, elementRegistry);
    }

    return [];
  };


  // helpers /////////////////

  function getModdleProperties(moddleElement, propertyNames) {
    return reduce(propertyNames, function(result, key) {
      result[key] = moddleElement.get(key);
      return result;
    }, {});
  }

  function setModdleProperties(moddleElement, properties) {
    forEach$1(properties, function(value, key) {
      moddleElement.set(key, value);
    });
  }

  function getAllDataObjectReferences(dataObject, elementRegistry) {
    return elementRegistry.filter(function(element) {
      return (
        is$1(element, 'bpmn:DataObjectReference') &&
            getBusinessObject(element).dataObjectRef === dataObject
      );
    });
  }

  var DEFAULT_FLOW = 'default',
      ID = 'id',
      DI = 'di';

  var NULL_DIMENSIONS$1 = {
    width: 0,
    height: 0
  };

  /**
   * A handler that implements a BPMN 2.0 property update.
   *
   * This should be used to set simple properties on elements with
   * an underlying BPMN business object.
   *
   * Use respective diagram-js provided handlers if you would
   * like to perform automated modeling.
   */
  function UpdatePropertiesHandler(
      elementRegistry, moddle, translate,
      modeling, textRenderer) {

    this._elementRegistry = elementRegistry;
    this._moddle = moddle;
    this._translate = translate;
    this._modeling = modeling;
    this._textRenderer = textRenderer;
  }

  UpdatePropertiesHandler.$inject = [
    'elementRegistry',
    'moddle',
    'translate',
    'modeling',
    'textRenderer'
  ];


  // api //////////////////////

  /**
   * Updates a BPMN element with a list of new properties
   *
   * @param {Object} context
   * @param {djs.model.Base} context.element the element to update
   * @param {Object} context.properties a list of properties to set on the element's
   *                                    businessObject (the BPMN model element)
   *
   * @return {Array<djs.model.Base>} the updated element
   */
  UpdatePropertiesHandler.prototype.execute = function(context) {

    var element = context.element,
        changed = [ element ],
        translate = this._translate;

    if (!element) {
      throw new Error(translate('element required'));
    }

    var elementRegistry = this._elementRegistry,
        ids = this._moddle.ids;

    var businessObject = element.businessObject,
        properties = unwrapBusinessObjects(context.properties),
        oldProperties = context.oldProperties || getProperties(element, properties);

    if (isIdChange(properties, businessObject)) {
      ids.unclaim(businessObject[ID]);

      elementRegistry.updateId(element, properties[ID]);

      ids.claim(properties[ID], businessObject);
    }

    // correctly indicate visual changes on default flow updates
    if (DEFAULT_FLOW in properties) {

      if (properties[DEFAULT_FLOW]) {
        changed.push(elementRegistry.get(properties[DEFAULT_FLOW].id));
      }

      if (businessObject[DEFAULT_FLOW]) {
        changed.push(elementRegistry.get(businessObject[DEFAULT_FLOW].id));
      }
    }

    // update properties
    setProperties(element, properties);

    // store old values
    context.oldProperties = oldProperties;
    context.changed = changed;

    // indicate changed on objects affected by the update
    return changed;
  };


  UpdatePropertiesHandler.prototype.postExecute = function(context) {
    var element = context.element,
        label = element.label;

    var text = label && getBusinessObject(label).name;

    if (!text) {
      return;
    }

    // get layouted text bounds and resize external
    // external label accordingly
    var newLabelBounds = this._textRenderer.getExternalLabelBounds(label, text);

    this._modeling.resizeShape(label, newLabelBounds, NULL_DIMENSIONS$1);
  };

  /**
   * Reverts the update on a BPMN elements properties.
   *
   * @param  {Object} context
   *
   * @return {djs.model.Base} the updated element
   */
  UpdatePropertiesHandler.prototype.revert = function(context) {

    var element = context.element,
        properties = context.properties,
        oldProperties = context.oldProperties,
        businessObject = element.businessObject,
        elementRegistry = this._elementRegistry,
        ids = this._moddle.ids;

    // update properties
    setProperties(element, oldProperties);

    if (isIdChange(properties, businessObject)) {
      ids.unclaim(properties[ID]);

      elementRegistry.updateId(element, oldProperties[ID]);

      ids.claim(oldProperties[ID], businessObject);
    }

    return context.changed;
  };


  function isIdChange(properties, businessObject) {
    return ID in properties && properties[ID] !== businessObject[ID];
  }


  function getProperties(element, properties) {
    var propertyNames = keys(properties),
        businessObject = element.businessObject,
        di = getDi(element);

    return reduce(propertyNames, function(result, key) {

      // handle DI separately
      if (key !== DI) {
        result[key] = businessObject.get(key);

      } else {
        result[key] = getDiProperties(di, keys(properties.di));
      }

      return result;
    }, {});
  }


  function getDiProperties(di, propertyNames) {
    return reduce(propertyNames, function(result, key) {
      result[key] = di && di.get(key);

      return result;
    }, {});
  }


  function setProperties(element, properties) {
    var businessObject = element.businessObject,
        di = getDi(element);

    forEach$1(properties, function(value, key) {

      if (key !== DI) {
        businessObject.set(key, value);
      } else {

        // only update, if di exists
        if (di) {
          setDiProperties(di, value);
        }
      }
    });
  }


  function setDiProperties(di, properties) {
    forEach$1(properties, function(value, key) {
      di.set(key, value);
    });
  }


  var referencePropertyNames = [ 'default' ];

  /**
   * Make sure we unwrap the actual business object
   * behind diagram element that may have been
   * passed as arguments.
   *
   * @param  {Object} properties
   *
   * @return {Object} unwrappedProps
   */
  function unwrapBusinessObjects(properties) {

    var unwrappedProps = assign({}, properties);

    referencePropertyNames.forEach(function(name) {
      if (name in properties) {
        unwrappedProps[name] = getBusinessObject(unwrappedProps[name]);
      }
    });

    return unwrappedProps;
  }

  function UpdateCanvasRootHandler(canvas, modeling) {
    this._canvas = canvas;
    this._modeling = modeling;
  }

  UpdateCanvasRootHandler.$inject = [
    'canvas',
    'modeling'
  ];


  UpdateCanvasRootHandler.prototype.execute = function(context) {

    var canvas = this._canvas;

    var newRoot = context.newRoot,
        newRootBusinessObject = newRoot.businessObject,
        oldRoot = canvas.getRootElement(),
        oldRootBusinessObject = oldRoot.businessObject,
        bpmnDefinitions = oldRootBusinessObject.$parent,
        diPlane = getDi(oldRoot);

    // (1) replace process old <> new root
    canvas.setRootElement(newRoot);
    canvas.removeRootElement(oldRoot);

    // (2) update root elements
    add(bpmnDefinitions.rootElements, newRootBusinessObject);
    newRootBusinessObject.$parent = bpmnDefinitions;

    remove(bpmnDefinitions.rootElements, oldRootBusinessObject);
    oldRootBusinessObject.$parent = null;

    // (3) wire di
    oldRoot.di = null;

    diPlane.bpmnElement = newRootBusinessObject;
    newRoot.di = diPlane;

    context.oldRoot = oldRoot;

    // TODO(nikku): return changed elements?
    // return [ newRoot, oldRoot ];
  };


  UpdateCanvasRootHandler.prototype.revert = function(context) {

    var canvas = this._canvas;

    var newRoot = context.newRoot,
        newRootBusinessObject = newRoot.businessObject,
        oldRoot = context.oldRoot,
        oldRootBusinessObject = oldRoot.businessObject,
        bpmnDefinitions = newRootBusinessObject.$parent,
        diPlane = getDi(newRoot);

    // (1) replace process old <> new root
    canvas.setRootElement(oldRoot);
    canvas.removeRootElement(newRoot);

    // (2) update root elements
    remove(bpmnDefinitions.rootElements, newRootBusinessObject);
    newRootBusinessObject.$parent = null;

    add(bpmnDefinitions.rootElements, oldRootBusinessObject);
    oldRootBusinessObject.$parent = bpmnDefinitions;

    // (3) wire di
    newRoot.di = null;

    diPlane.bpmnElement = oldRootBusinessObject;
    oldRoot.di = diPlane;

    // TODO(nikku): return changed elements?
    // return [ newRoot, oldRoot ];
  };

  /**
   * A handler that allows us to add a new lane
   * above or below an existing one.
   *
   * @param {Modeling} modeling
   * @param {SpaceTool} spaceTool
   */
  function AddLaneHandler(modeling, spaceTool) {
    this._modeling = modeling;
    this._spaceTool = spaceTool;
  }

  AddLaneHandler.$inject = [
    'modeling',
    'spaceTool'
  ];


  AddLaneHandler.prototype.preExecute = function(context) {

    var spaceTool = this._spaceTool,
        modeling = this._modeling;

    var shape = context.shape,
        location = context.location;

    var lanesRoot = getLanesRoot(shape);

    var isRoot = lanesRoot === shape,
        laneParent = isRoot ? shape : shape.parent;

    var existingChildLanes = getChildLanes(laneParent);

    // (0) add a lane if we currently got none and are adding to root
    if (!existingChildLanes.length) {
      modeling.createShape({ type: 'bpmn:Lane' }, {
        x: shape.x + LANE_INDENTATION,
        y: shape.y,
        width: shape.width - LANE_INDENTATION,
        height: shape.height
      }, laneParent);
    }

    // (1) collect affected elements to create necessary space
    var allAffected = [];

    eachElement(lanesRoot, function(element) {
      allAffected.push(element);

      // handle element labels in the diagram root
      if (element.label) {
        allAffected.push(element.label);
      }

      if (element === shape) {
        return [];
      }

      return filter(element.children, function(c) {
        return c !== shape;
      });
    });

    var offset = location === 'top' ? -120 : 120,
        lanePosition = location === 'top' ? shape.y : shape.y + shape.height,
        spacePos = lanePosition + (location === 'top' ? 10 : -10),
        direction = location === 'top' ? 'n' : 's';

    var adjustments = spaceTool.calculateAdjustments(allAffected, 'y', offset, spacePos);

    spaceTool.makeSpace(
      adjustments.movingShapes,
      adjustments.resizingShapes,
      { x: 0, y: offset },
      direction,
      spacePos
    );

    // (2) create new lane at open space
    context.newLane = modeling.createShape({ type: 'bpmn:Lane' }, {
      x: shape.x + (isRoot ? LANE_INDENTATION : 0),
      y: lanePosition - (location === 'top' ? 120 : 0),
      width: shape.width - (isRoot ? LANE_INDENTATION : 0),
      height: 120
    }, laneParent);
  };

  /**
   * A handler that splits a lane into a number of sub-lanes,
   * creating new sub lanes, if necessary.
   *
   * @param {Modeling} modeling
   */
  function SplitLaneHandler(modeling, translate) {
    this._modeling = modeling;
    this._translate = translate;
  }

  SplitLaneHandler.$inject = [
    'modeling',
    'translate'
  ];


  SplitLaneHandler.prototype.preExecute = function(context) {

    var modeling = this._modeling,
        translate = this._translate;

    var shape = context.shape,
        newLanesCount = context.count;

    var childLanes = getChildLanes(shape),
        existingLanesCount = childLanes.length;

    if (existingLanesCount > newLanesCount) {
      throw new Error(translate('more than {count} child lanes', { count: newLanesCount }));
    }

    var newLanesHeight = Math.round(shape.height / newLanesCount);

    // Iterate from top to bottom in child lane order,
    // resizing existing lanes and creating new ones
    // so that they split the parent proportionally.
    //
    // Due to rounding related errors, the bottom lane
    // needs to take up all the remaining space.
    var laneY,
        laneHeight,
        laneBounds,
        newLaneAttrs,
        idx;

    for (idx = 0; idx < newLanesCount; idx++) {

      laneY = shape.y + idx * newLanesHeight;

      // if bottom lane
      if (idx === newLanesCount - 1) {
        laneHeight = shape.height - (newLanesHeight * idx);
      } else {
        laneHeight = newLanesHeight;
      }

      laneBounds = {
        x: shape.x + LANE_INDENTATION,
        y: laneY,
        width: shape.width - LANE_INDENTATION,
        height: laneHeight
      };

      if (idx < existingLanesCount) {

        // resize existing lane
        modeling.resizeShape(childLanes[idx], laneBounds);
      } else {

        // create a new lane at position
        newLaneAttrs = {
          type: 'bpmn:Lane'
        };

        modeling.createShape(newLaneAttrs, laneBounds, shape);
      }
    }
  };

  /**
   * A handler that resizes a lane.
   *
   * @param {Modeling} modeling
   */
  function ResizeLaneHandler(modeling, spaceTool) {
    this._modeling = modeling;
    this._spaceTool = spaceTool;
  }

  ResizeLaneHandler.$inject = [
    'modeling',
    'spaceTool'
  ];


  ResizeLaneHandler.prototype.preExecute = function(context) {

    var shape = context.shape,
        newBounds = context.newBounds,
        balanced = context.balanced;

    if (balanced !== false) {
      this.resizeBalanced(shape, newBounds);
    } else {
      this.resizeSpace(shape, newBounds);
    }
  };


  /**
   * Resize balanced, adjusting next / previous lane sizes.
   *
   * @param {djs.model.Shape} shape
   * @param {Bounds} newBounds
   */
  ResizeLaneHandler.prototype.resizeBalanced = function(shape, newBounds) {

    var modeling = this._modeling;

    var resizeNeeded = computeLanesResize(shape, newBounds);

    // resize the lane
    modeling.resizeShape(shape, newBounds);

    // resize other lanes as needed
    resizeNeeded.forEach(function(r) {
      modeling.resizeShape(r.shape, r.newBounds);
    });
  };


  /**
   * Resize, making actual space and moving below / above elements.
   *
   * @param {djs.model.Shape} shape
   * @param {Bounds} newBounds
   */
  ResizeLaneHandler.prototype.resizeSpace = function(shape, newBounds) {
    var spaceTool = this._spaceTool;

    var shapeTrbl = asTRBL(shape),
        newTrbl = asTRBL(newBounds);

    var trblDiff = substractTRBL(newTrbl, shapeTrbl);

    var lanesRoot = getLanesRoot(shape);

    var allAffected = [],
        allLanes = [];

    eachElement(lanesRoot, function(element) {
      allAffected.push(element);

      if (is$1(element, 'bpmn:Lane') || is$1(element, 'bpmn:Participant')) {
        allLanes.push(element);
      }

      return element.children;
    });

    var change,
        spacePos,
        direction,
        offset,
        adjustments;

    if (trblDiff.bottom || trblDiff.top) {

      change = trblDiff.bottom || trblDiff.top;
      spacePos = shape.y + (trblDiff.bottom ? shape.height : 0) + (trblDiff.bottom ? -10 : 10);
      direction = trblDiff.bottom ? 's' : 'n';

      offset = trblDiff.top > 0 || trblDiff.bottom < 0 ? -change : change;

      adjustments = spaceTool.calculateAdjustments(allAffected, 'y', offset, spacePos);

      spaceTool.makeSpace(adjustments.movingShapes, adjustments.resizingShapes, { x: 0, y: change }, direction);
    }


    if (trblDiff.left || trblDiff.right) {

      change = trblDiff.right || trblDiff.left;
      spacePos = shape.x + (trblDiff.right ? shape.width : 0) + (trblDiff.right ? -10 : 100);
      direction = trblDiff.right ? 'e' : 'w';

      offset = trblDiff.left > 0 || trblDiff.right < 0 ? -change : change;

      adjustments = spaceTool.calculateAdjustments(allLanes, 'x', offset, spacePos);

      spaceTool.makeSpace(adjustments.movingShapes, adjustments.resizingShapes, { x: change, y: 0 }, direction);
    }
  };

  var FLOW_NODE_REFS_ATTR = 'flowNodeRef',
      LANES_ATTR = 'lanes';


  /**
   * A handler that updates lane refs on changed elements
   */
  function UpdateFlowNodeRefsHandler(elementRegistry) {
    this._elementRegistry = elementRegistry;
  }

  UpdateFlowNodeRefsHandler.$inject = [
    'elementRegistry'
  ];


  UpdateFlowNodeRefsHandler.prototype.computeUpdates = function(flowNodeShapes, laneShapes) {

    var handledNodes = [];

    var updates = [];

    var participantCache = {};

    var allFlowNodeShapes = [];

    function isInLaneShape(element, laneShape) {

      var laneTrbl = asTRBL(laneShape);

      var elementMid = {
        x: element.x + element.width / 2,
        y: element.y + element.height / 2
      };

      return elementMid.x > laneTrbl.left &&
             elementMid.x < laneTrbl.right &&
             elementMid.y > laneTrbl.top &&
             elementMid.y < laneTrbl.bottom;
    }

    function addFlowNodeShape(flowNodeShape) {
      if (handledNodes.indexOf(flowNodeShape) === -1) {
        allFlowNodeShapes.push(flowNodeShape);
        handledNodes.push(flowNodeShape);
      }
    }

    function getAllLaneShapes(flowNodeShape) {

      var root = getLanesRoot(flowNodeShape);

      if (!participantCache[root.id]) {
        participantCache[root.id] = collectLanes(root);
      }

      return participantCache[root.id];
    }

    function getNewLanes(flowNodeShape) {
      if (!flowNodeShape.parent) {
        return [];
      }

      var allLaneShapes = getAllLaneShapes(flowNodeShape);

      return allLaneShapes.filter(function(l) {
        return isInLaneShape(flowNodeShape, l);
      }).map(function(shape) {
        return shape.businessObject;
      });
    }

    laneShapes.forEach(function(laneShape) {
      var root = getLanesRoot(laneShape);

      if (!root || handledNodes.indexOf(root) !== -1) {
        return;
      }

      var children = root.children.filter(function(c) {
        return is$1(c, 'bpmn:FlowNode');
      });

      children.forEach(addFlowNodeShape);

      handledNodes.push(root);
    });

    flowNodeShapes.forEach(addFlowNodeShape);


    allFlowNodeShapes.forEach(function(flowNodeShape) {

      var flowNode = flowNodeShape.businessObject;

      var lanes = flowNode.get(LANES_ATTR),
          remove = lanes.slice(),
          add = getNewLanes(flowNodeShape);

      updates.push({ flowNode: flowNode, remove: remove, add: add });
    });

    laneShapes.forEach(function(laneShape) {

      var lane = laneShape.businessObject;

      // lane got removed XX-)
      if (!laneShape.parent) {
        lane.get(FLOW_NODE_REFS_ATTR).forEach(function(flowNode) {
          updates.push({ flowNode: flowNode, remove: [ lane ], add: [] });
        });
      }
    });

    return updates;
  };

  UpdateFlowNodeRefsHandler.prototype.execute = function(context) {

    var updates = context.updates;

    if (!updates) {
      updates = context.updates = this.computeUpdates(context.flowNodeShapes, context.laneShapes);
    }


    updates.forEach(function(update) {

      var flowNode = update.flowNode,
          lanes = flowNode.get(LANES_ATTR);

      // unwire old
      update.remove.forEach(function(oldLane) {
        remove(lanes, oldLane);
        remove(oldLane.get(FLOW_NODE_REFS_ATTR), flowNode);
      });

      // wire new
      update.add.forEach(function(newLane) {
        add(lanes, newLane);
        add(newLane.get(FLOW_NODE_REFS_ATTR), flowNode);
      });
    });

    // TODO(nikku): return changed elements
    // return [ ... ];
  };


  UpdateFlowNodeRefsHandler.prototype.revert = function(context) {

    var updates = context.updates;

    updates.forEach(function(update) {

      var flowNode = update.flowNode,
          lanes = flowNode.get(LANES_ATTR);

      // unwire new
      update.add.forEach(function(newLane) {
        remove(lanes, newLane);
        remove(newLane.get(FLOW_NODE_REFS_ATTR), flowNode);
      });

      // wire old
      update.remove.forEach(function(oldLane) {
        add(lanes, oldLane);
        add(oldLane.get(FLOW_NODE_REFS_ATTR), flowNode);
      });
    });

    // TODO(nikku): return changed elements
    // return [ ... ];
  };

  function IdClaimHandler(moddle) {
    this._moddle = moddle;
  }

  IdClaimHandler.$inject = [ 'moddle' ];


  IdClaimHandler.prototype.execute = function(context) {
    var ids = this._moddle.ids,
        id = context.id,
        element = context.element,
        claiming = context.claiming;

    if (claiming) {
      ids.claim(id, element);
    } else {
      ids.unclaim(id);
    }
  };

  /**
   * Command revert implementation.
   */
  IdClaimHandler.prototype.revert = function(context) {
    var ids = this._moddle.ids,
        id = context.id,
        element = context.element,
        claiming = context.claiming;

    if (claiming) {
      ids.unclaim(id);
    } else {
      ids.claim(id, element);
    }
  };

  var DEFAULT_COLORS = {
    fill: undefined,
    stroke: undefined
  };


  function SetColorHandler(commandStack) {
    this._commandStack = commandStack;

    this._normalizeColor = function(color) {

      // Remove color for falsy values.
      if (!color) {
        return undefined;
      }

      if (isString(color)) {
        var hexColor = colorToHex(color);

        if (hexColor) {
          return hexColor;
        }
      }

      throw new Error('invalid color value: ' + color);
    };
  }

  SetColorHandler.$inject = [
    'commandStack'
  ];


  SetColorHandler.prototype.postExecute = function(context) {
    var elements = context.elements,
        colors = context.colors || DEFAULT_COLORS;

    var self = this;

    var di = {};

    if ('fill' in colors) {
      assign(di, {
        'background-color': this._normalizeColor(colors.fill) });
    }

    if ('stroke' in colors) {
      assign(di, {
        'border-color': this._normalizeColor(colors.stroke) });
    }

    forEach$1(elements, function(element) {
      var assignedDi = isConnection$3(element) ? pick(di, [ 'border-color' ]) : di;

      // TODO @barmac: remove once we drop bpmn.io properties
      ensureLegacySupport(assignedDi);

      if (isLabel$6(element)) {

        // set label colors as bpmndi:BPMNLabel#color
        self._commandStack.execute('element.updateModdleProperties', {
          element: element,
          moddleElement: getDi(element).label,
          properties: {
            color: di['border-color']
          }
        });
      } else {

        // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
        self._commandStack.execute('element.updateProperties', {
          element: element,
          properties: {
            di: assignedDi
          }
        });
      }
    });

  };

  /**
   * Convert color from rgb(a)/hsl to hex. Returns `null` for unknown color names and for colors
   * with alpha less than 1.0. This depends on `<canvas>` serialization of the `context.fillStyle`.
   * Cf. https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle
   *
   * @example
   * ```js
   * var color = 'fuchsia';
   * console.log(colorToHex(color));
   * // "#ff00ff"
   * color = 'rgba(1,2,3,0.4)';
   * console.log(colorToHex(color));
   * // null
   * ```
   *
   * @param {string} color
   * @returns {string|null}
   */
  function colorToHex(color) {
    var context = document.createElement('canvas').getContext('2d');

    // (0) Start with transparent to account for browser default values.
    context.fillStyle = 'transparent';

    // (1) Assign color so that it's serialized.
    context.fillStyle = color;

    // (2) Return null for non-hex serialization result.
    return /^#[0-9a-fA-F]{6}$/.test(context.fillStyle) ? context.fillStyle : null;
  }

  function isConnection$3(element) {
    return !!element.waypoints;
  }

  /**
   * Add legacy properties if required.
   * @param {{ 'border-color': string?, 'background-color': string? }} di
   */
  function ensureLegacySupport(di) {
    if ('border-color' in di) {
      di.stroke = di['border-color'];
    }

    if ('background-color' in di) {
      di.fill = di['background-color'];
    }
  }

  var NULL_DIMENSIONS = {
    width: 0,
    height: 0
  };


  /**
   * A handler that updates the text of a BPMN element.
   */
  function UpdateLabelHandler(modeling, textRenderer, bpmnFactory) {

    /**
     * Creates an empty `diLabel` attribute for embedded labels.
     *
     * @param {djs.model.Base} element
     * @param {string} text
     */
    function ensureInternalLabelDi(element, text) {
      if (isLabelExternal(element)) {
        return;
      }

      var di = getDi(element);

      if (text && !di.label) {
        di.label = bpmnFactory.create('bpmndi:BPMNLabel');
      }

      if (!text && di.label) {
        delete di.label;
      }
    }


    /**
     * Set the label and return the changed elements.
     *
     * Element parameter can be label itself or connection (i.e. sequence flow).
     *
     * @param {djs.model.Base} element
     * @param {string} text
     */
    function setText(element, text) {

      // external label if present
      var label = element.label || element;

      var labelTarget = element.labelTarget || element;

      setLabel(label, text);

      ensureInternalLabelDi(element, text);

      return [ label, labelTarget ];
    }

    function preExecute(ctx) {
      var element = ctx.element,
          businessObject = element.businessObject,
          newLabel = ctx.newLabel;

      if (!isLabel$6(element)
          && isLabelExternal(element)
          && !hasExternalLabel(element)
          && !isEmptyText(newLabel)) {

        // create label
        var paddingTop = 7;

        var labelCenter = getExternalLabelMid(element);

        labelCenter = {
          x: labelCenter.x,
          y: labelCenter.y + paddingTop
        };

        modeling.createLabel(element, labelCenter, {
          id: businessObject.id + '_label',
          businessObject: businessObject,
          di: element.di
        });
      }
    }

    function execute(ctx) {
      ctx.oldLabel = getLabel(ctx.element);
      return setText(ctx.element, ctx.newLabel);
    }

    function revert(ctx) {
      return setText(ctx.element, ctx.oldLabel);
    }

    function postExecute(ctx) {
      var element = ctx.element,
          label = element.label || element,
          newLabel = ctx.newLabel,
          newBounds = ctx.newBounds,
          hints = ctx.hints || {};

      // ignore internal labels for elements except text annotations
      if (!isLabel$6(label) && !is$1(label, 'bpmn:TextAnnotation')) {
        return;
      }

      if (isLabel$6(label) && isEmptyText(newLabel)) {

        if (hints.removeShape !== false) {
          modeling.removeShape(label, { unsetLabel: false });
        }

        return;
      }

      var text = getLabel(label);

      // resize element based on label _or_ pre-defined bounds
      if (typeof newBounds === 'undefined') {
        newBounds = textRenderer.getExternalLabelBounds(label, text);
      }

      // setting newBounds to false or _null_ will
      // disable the postExecute resize operation
      if (newBounds) {
        modeling.resizeShape(label, newBounds, NULL_DIMENSIONS);
      }
    }

    // API

    this.preExecute = preExecute;
    this.execute = execute;
    this.revert = revert;
    this.postExecute = postExecute;
  }

  UpdateLabelHandler.$inject = [
    'modeling',
    'textRenderer',
    'bpmnFactory'
  ];


  // helpers ///////////////////////

  function isEmptyText(label) {
    return !label || !label.trim();
  }

  /**
   * BPMN 2.0 modeling features activator
   *
   * @param {EventBus} eventBus
   * @param {ElementFactory} elementFactory
   * @param {CommandStack} commandStack
   * @param {BpmnRules} bpmnRules
   */
  function Modeling(
      eventBus, elementFactory, commandStack,
      bpmnRules) {

    Modeling$1.call(this, eventBus, elementFactory, commandStack);

    this._bpmnRules = bpmnRules;
  }

  e(Modeling, Modeling$1);

  Modeling.$inject = [
    'eventBus',
    'elementFactory',
    'commandStack',
    'bpmnRules'
  ];


  Modeling.prototype.getHandlers = function() {
    var handlers = Modeling$1.prototype.getHandlers.call(this);

    handlers['element.updateModdleProperties'] = UpdateModdlePropertiesHandler;
    handlers['element.updateProperties'] = UpdatePropertiesHandler;
    handlers['canvas.updateRoot'] = UpdateCanvasRootHandler;
    handlers['lane.add'] = AddLaneHandler;
    handlers['lane.resize'] = ResizeLaneHandler;
    handlers['lane.split'] = SplitLaneHandler;
    handlers['lane.updateRefs'] = UpdateFlowNodeRefsHandler;
    handlers['id.updateClaim'] = IdClaimHandler;
    handlers['element.setColor'] = SetColorHandler;
    handlers['element.updateLabel'] = UpdateLabelHandler;

    return handlers;
  };


  Modeling.prototype.updateLabel = function(element, newLabel, newBounds, hints) {
    this._commandStack.execute('element.updateLabel', {
      element: element,
      newLabel: newLabel,
      newBounds: newBounds,
      hints: hints || {}
    });
  };


  Modeling.prototype.connect = function(source, target, attrs, hints) {

    var bpmnRules = this._bpmnRules;

    if (!attrs) {
      attrs = bpmnRules.canConnect(source, target);
    }

    if (!attrs) {
      return;
    }

    return this.createConnection(source, target, attrs, source.parent, hints);
  };


  Modeling.prototype.updateModdleProperties = function(element, moddleElement, properties) {
    this._commandStack.execute('element.updateModdleProperties', {
      element: element,
      moddleElement: moddleElement,
      properties: properties
    });
  };

  Modeling.prototype.updateProperties = function(element, properties) {
    this._commandStack.execute('element.updateProperties', {
      element: element,
      properties: properties
    });
  };

  Modeling.prototype.resizeLane = function(laneShape, newBounds, balanced) {
    this._commandStack.execute('lane.resize', {
      shape: laneShape,
      newBounds: newBounds,
      balanced: balanced
    });
  };

  Modeling.prototype.addLane = function(targetLaneShape, location) {
    var context = {
      shape: targetLaneShape,
      location: location
    };

    this._commandStack.execute('lane.add', context);

    return context.newLane;
  };

  Modeling.prototype.splitLane = function(targetLane, count) {
    this._commandStack.execute('lane.split', {
      shape: targetLane,
      count: count
    });
  };

  /**
   * Transform the current diagram into a collaboration.
   *
   * @return {djs.model.Root} the new root element
   */
  Modeling.prototype.makeCollaboration = function() {

    var collaborationElement = this._create('root', {
      type: 'bpmn:Collaboration'
    });

    var context = {
      newRoot: collaborationElement
    };

    this._commandStack.execute('canvas.updateRoot', context);

    return collaborationElement;
  };

  Modeling.prototype.updateLaneRefs = function(flowNodeShapes, laneShapes) {

    this._commandStack.execute('lane.updateRefs', {
      flowNodeShapes: flowNodeShapes,
      laneShapes: laneShapes
    });
  };

  /**
   * Transform the current diagram into a process.
   *
   * @return {djs.model.Root} the new root element
   */
  Modeling.prototype.makeProcess = function() {

    var processElement = this._create('root', {
      type: 'bpmn:Process'
    });

    var context = {
      newRoot: processElement
    };

    this._commandStack.execute('canvas.updateRoot', context);
  };


  Modeling.prototype.claimId = function(id, moddleElement) {
    this._commandStack.execute('id.updateClaim', {
      id: id,
      element: moddleElement,
      claiming: true
    });
  };


  Modeling.prototype.unclaimId = function(id, moddleElement) {
    this._commandStack.execute('id.updateClaim', {
      id: id,
      element: moddleElement
    });
  };

  Modeling.prototype.setColor = function(elements, colors) {
    if (!elements.length) {
      elements = [ elements ];
    }

    this._commandStack.execute('element.setColor', {
      elements: elements,
      colors: colors
    });
  };

  /**
   * A base connection layouter implementation
   * that layouts the connection by directly connecting
   * mid(source) + mid(target).
   */
  function BaseLayouter() {}


  /**
   * Return the new layouted waypoints for the given connection.
   *
   * The connection passed is still unchanged; you may figure out about
   * the new connection start / end via the layout hints provided.
   *
   * @param {djs.model.Connection} connection
   * @param {Object} [hints]
   * @param {Point} [hints.connectionStart]
   * @param {Point} [hints.connectionEnd]
   * @param {Point} [hints.source]
   * @param {Point} [hints.target]
   *
   * @return {Array<Point>} the layouted connection waypoints
   */
  BaseLayouter.prototype.layoutConnection = function(connection, hints) {

    hints = hints || {};

    return [
      hints.connectionStart || getMid(hints.source || connection.source),
      hints.connectionEnd || getMid(hints.target || connection.target)
    ];
  };

  var MIN_SEGMENT_LENGTH = 20,
      POINT_ORIENTATION_PADDING = 5;

  var round$1 = Math.round;

  var INTERSECTION_THRESHOLD = 20,
      ORIENTATION_THRESHOLD = {
        'h:h': 20,
        'v:v': 20,
        'h:v': -10,
        'v:h': -10
      };

  function needsTurn(orientation, startDirection) {
    return !{
      t: /top/,
      r: /right/,
      b: /bottom/,
      l: /left/,
      h: /./,
      v: /./
    }[startDirection].test(orientation);
  }

  function canLayoutStraight(direction, targetOrientation) {
    return {
      t: /top/,
      r: /right/,
      b: /bottom/,
      l: /left/,
      h: /left|right/,
      v: /top|bottom/
    }[direction].test(targetOrientation);
  }

  function getSegmentBendpoints(a, b, directions) {
    var orientation = getOrientation(b, a, POINT_ORIENTATION_PADDING);

    var startDirection = directions.split(':')[0];

    var xmid = round$1((b.x - a.x) / 2 + a.x),
        ymid = round$1((b.y - a.y) / 2 + a.y);

    var segmentEnd, segmentDirections;

    var layoutStraight = canLayoutStraight(startDirection, orientation),
        layoutHorizontal = /h|r|l/.test(startDirection),
        layoutTurn = false;

    var turnNextDirections = false;

    if (layoutStraight) {
      segmentEnd = layoutHorizontal ? { x: xmid, y: a.y } : { x: a.x, y: ymid };

      segmentDirections = layoutHorizontal ? 'h:h' : 'v:v';
    } else {
      layoutTurn = needsTurn(orientation, startDirection);

      segmentDirections = layoutHorizontal ? 'h:v' : 'v:h';

      if (layoutTurn) {

        if (layoutHorizontal) {
          turnNextDirections = ymid === a.y;

          segmentEnd = {
            x: a.x + MIN_SEGMENT_LENGTH * (/l/.test(startDirection) ? -1 : 1),
            y: turnNextDirections ? ymid + MIN_SEGMENT_LENGTH : ymid
          };
        } else {
          turnNextDirections = xmid === a.x;

          segmentEnd = {
            x: turnNextDirections ? xmid + MIN_SEGMENT_LENGTH : xmid,
            y: a.y + MIN_SEGMENT_LENGTH * (/t/.test(startDirection) ? -1 : 1)
          };
        }

      } else {
        segmentEnd = {
          x: xmid,
          y: ymid
        };
      }
    }

    return {
      waypoints: getBendpoints(a, segmentEnd, segmentDirections).concat(segmentEnd),
      directions:  segmentDirections,
      turnNextDirections: turnNextDirections
    };
  }

  function getStartSegment(a, b, directions) {
    return getSegmentBendpoints(a, b, directions);
  }

  function getEndSegment(a, b, directions) {
    var invertedSegment = getSegmentBendpoints(b, a, invertDirections(directions));

    return {
      waypoints: invertedSegment.waypoints.slice().reverse(),
      directions: invertDirections(invertedSegment.directions),
      turnNextDirections: invertedSegment.turnNextDirections
    };
  }

  function getMidSegment(startSegment, endSegment) {

    var startDirection = startSegment.directions.split(':')[1],
        endDirection = endSegment.directions.split(':')[0];

    if (startSegment.turnNextDirections) {
      startDirection = startDirection == 'h' ? 'v' : 'h';
    }

    if (endSegment.turnNextDirections) {
      endDirection = endDirection == 'h' ? 'v' : 'h';
    }

    var directions = startDirection + ':' + endDirection;

    var bendpoints = getBendpoints(
      startSegment.waypoints[startSegment.waypoints.length - 1],
      endSegment.waypoints[0],
      directions
    );

    return {
      waypoints: bendpoints,
      directions: directions
    };
  }

  function invertDirections(directions) {
    return directions.split(':').reverse().join(':');
  }

  /**
   * Handle simple layouts with maximum two bendpoints.
   */
  function getSimpleBendpoints(a, b, directions) {

    var xmid = round$1((b.x - a.x) / 2 + a.x),
        ymid = round$1((b.y - a.y) / 2 + a.y);

    // one point, right or left from a
    if (directions === 'h:v') {
      return [ { x: b.x, y: a.y } ];
    }

    // one point, above or below a
    if (directions === 'v:h') {
      return [ { x: a.x, y: b.y } ];
    }

    // vertical segment between a and b
    if (directions === 'h:h') {
      return [
        { x: xmid, y: a.y },
        { x: xmid, y: b.y }
      ];
    }

    // horizontal segment between a and b
    if (directions === 'v:v') {
      return [
        { x: a.x, y: ymid },
        { x: b.x, y: ymid }
      ];
    }

    throw new Error('invalid directions: can only handle varians of [hv]:[hv]');
  }


  /**
   * Returns the mid points for a manhattan connection between two points.
   *
   * @example h:h (horizontal:horizontal)
   *
   * [a]----[x]
   *         |
   *        [x]----[b]
   *
   * @example h:v (horizontal:vertical)
   *
   * [a]----[x]
   *         |
   *        [b]
   *
   * @example h:r (horizontal:right)
   *
   * [a]----[x]
   *         |
   *    [b]-[x]
   *
   * @param  {Point} a
   * @param  {Point} b
   * @param  {string} directions
   *
   * @return {Array<Point>}
   */
  function getBendpoints(a, b, directions) {
    directions = directions || 'h:h';

    if (!isValidDirections(directions)) {
      throw new Error(
        'unknown directions: <' + directions + '>: ' +
        'must be specified as <start>:<end> ' +
        'with start/end in { h,v,t,r,b,l }'
      );
    }

    // compute explicit directions, involving trbl dockings
    // using a three segmented layouting algorithm
    if (isExplicitDirections(directions)) {
      var startSegment = getStartSegment(a, b, directions),
          endSegment = getEndSegment(a, b, directions),
          midSegment = getMidSegment(startSegment, endSegment);

      return [].concat(
        startSegment.waypoints,
        midSegment.waypoints,
        endSegment.waypoints
      );
    }

    // handle simple [hv]:[hv] cases that can be easily computed
    return getSimpleBendpoints(a, b, directions);
  }

  /**
   * Create a connection between the two points according
   * to the manhattan layout (only horizontal and vertical) edges.
   *
   * @param {Point} a
   * @param {Point} b
   *
   * @param {string} [directions='h:h'] specifies manhattan directions for each point as {adirection}:{bdirection}.
                     A directionfor a point is either `h` (horizontal) or `v` (vertical)
   *
   * @return {Array<Point>}
   */
  function connectPoints(a, b, directions) {

    var points = getBendpoints(a, b, directions);

    points.unshift(a);
    points.push(b);

    return withoutRedundantPoints(points);
  }


  /**
   * Connect two rectangles using a manhattan layouted connection.
   *
   * @param {Bounds} source source rectangle
   * @param {Bounds} target target rectangle
   * @param {Point} [start] source docking
   * @param {Point} [end] target docking
   *
   * @param {Object} [hints]
   * @param {string} [hints.preserveDocking=source] preserve docking on selected side
   * @param {Array<string>} [hints.preferredLayouts]
   * @param {Point|boolean} [hints.connectionStart] whether the start changed
   * @param {Point|boolean} [hints.connectionEnd] whether the end changed
   *
   * @return {Array<Point>} connection points
   */
  function connectRectangles(source, target, start, end, hints) {

    var preferredLayouts = hints && hints.preferredLayouts || [];

    var preferredLayout = without(preferredLayouts, 'straight')[0] || 'h:h';

    var threshold = ORIENTATION_THRESHOLD[preferredLayout] || 0;

    var orientation = getOrientation(source, target, threshold);

    var directions = getDirections(orientation, preferredLayout);

    start = start || getMid(source);
    end = end || getMid(target);

    var directionSplit = directions.split(':');

    // compute actual docking points for start / end
    // this ensures we properly layout only parts of the
    // connection that lies in between the two rectangles
    var startDocking = getDockingPoint(start, source, directionSplit[0], invertOrientation(orientation)),
        endDocking = getDockingPoint(end, target, directionSplit[1], orientation);

    return connectPoints(startDocking, endDocking, directions);
  }


  /**
   * Repair the connection between two rectangles, of which one has been updated.
   *
   * @param {Bounds} source
   * @param {Bounds} target
   * @param {Point} [start]
   * @param {Point} [end]
   * @param {Array<Point>} [waypoints]
   * @param {Object} [hints]
   * @param {Array<string>} [hints.preferredLayouts] list of preferred layouts
   * @param {boolean} [hints.connectionStart]
   * @param {boolean} [hints.connectionEnd]
   *
   * @return {Array<Point>} repaired waypoints
   */
  function repairConnection(source, target, start, end, waypoints, hints) {

    if (isArray$3(start)) {
      waypoints = start;
      hints = end;

      start = getMid(source);
      end = getMid(target);
    }

    hints = assign({ preferredLayouts: [] }, hints);
    waypoints = waypoints || [];

    var preferredLayouts = hints.preferredLayouts,
        preferStraight = preferredLayouts.indexOf('straight') !== -1,
        repairedWaypoints;

    // just layout non-existing or simple connections
    // attempt to render straight lines, if required

    // attempt to layout a straight line
    repairedWaypoints = preferStraight && tryLayoutStraight(source, target, start, end, hints);

    if (repairedWaypoints) {
      return repairedWaypoints;
    }

    // try to layout from end
    repairedWaypoints = hints.connectionEnd && tryRepairConnectionEnd(target, source, end, waypoints);

    if (repairedWaypoints) {
      return repairedWaypoints;
    }

    // try to layout from start
    repairedWaypoints = hints.connectionStart && tryRepairConnectionStart(source, target, start, waypoints);

    if (repairedWaypoints) {
      return repairedWaypoints;
    }

    // or whether nothing seems to have changed
    if (!hints.connectionStart && !hints.connectionEnd && waypoints && waypoints.length) {
      return waypoints;
    }

    // simply reconnect if nothing else worked
    return connectRectangles(source, target, start, end, hints);
  }


  function inRange(a, start, end) {
    return a >= start && a <= end;
  }

  function isInRange(axis, a, b) {
    var size = {
      x: 'width',
      y: 'height'
    };

    return inRange(a[axis], b[axis], b[axis] + b[size[axis]]);
  }

  /**
   * Layout a straight connection
   *
   * @param {Bounds} source
   * @param {Bounds} target
   * @param {Point} start
   * @param {Point} end
   * @param {Object} [hints]
   *
   * @return {Array<Point>|null} waypoints if straight layout worked
   */
  function tryLayoutStraight(source, target, start, end, hints) {
    var axis = {},
        primaryAxis,
        orientation;

    orientation = getOrientation(source, target);

    // only layout a straight connection if shapes are
    // horizontally or vertically aligned
    if (!/^(top|bottom|left|right)$/.test(orientation)) {
      return null;
    }

    if (/top|bottom/.test(orientation)) {
      primaryAxis = 'x';
    }

    if (/left|right/.test(orientation)) {
      primaryAxis = 'y';
    }

    if (hints.preserveDocking === 'target') {

      if (!isInRange(primaryAxis, end, source)) {
        return null;
      }

      axis[primaryAxis] = end[primaryAxis];

      return [
        {
          x: axis.x !== undefined ? axis.x : start.x,
          y: axis.y !== undefined ? axis.y : start.y,
          original: {
            x: axis.x !== undefined ? axis.x : start.x,
            y: axis.y !== undefined ? axis.y : start.y
          }
        },
        {
          x: end.x,
          y: end.y
        }
      ];

    } else {

      if (!isInRange(primaryAxis, start, target)) {
        return null;
      }

      axis[primaryAxis] = start[primaryAxis];

      return [
        {
          x: start.x,
          y: start.y
        },
        {
          x: axis.x !== undefined ? axis.x : end.x,
          y: axis.y !== undefined ? axis.y : end.y,
          original: {
            x: axis.x !== undefined ? axis.x : end.x,
            y: axis.y !== undefined ? axis.y : end.y
          }
        }
      ];
    }

  }

  /**
   * Repair a connection from start.
   *
   * @param {Bounds} moved
   * @param {Bounds} other
   * @param {Point} newDocking
   * @param {Array<Point>} points originalPoints from moved to other
   *
   * @return {Array<Point>|null} the repaired points between the two rectangles
   */
  function tryRepairConnectionStart(moved, other, newDocking, points) {
    return _tryRepairConnectionSide(moved, other, newDocking, points);
  }

  /**
   * Repair a connection from end.
   *
   * @param {Bounds} moved
   * @param {Bounds} other
   * @param {Point} newDocking
   * @param {Array<Point>} points originalPoints from moved to other
   *
   * @return {Array<Point>|null} the repaired points between the two rectangles
   */
  function tryRepairConnectionEnd(moved, other, newDocking, points) {
    var waypoints = points.slice().reverse();

    waypoints = _tryRepairConnectionSide(moved, other, newDocking, waypoints);

    return waypoints ? waypoints.reverse() : null;
  }

  /**
   * Repair a connection from one side that moved.
   *
   * @param {Bounds} moved
   * @param {Bounds} other
   * @param {Point} newDocking
   * @param {Array<Point>} points originalPoints from moved to other
   *
   * @return {Array<Point>} the repaired points between the two rectangles
   */
  function _tryRepairConnectionSide(moved, other, newDocking, points) {

    function needsRelayout(points) {
      if (points.length < 3) {
        return true;
      }

      if (points.length > 4) {
        return false;
      }

      // relayout if two points overlap
      // this is most likely due to
      return !!find(points, function(p, idx) {
        var q = points[idx - 1];

        return q && pointDistance(p, q) < 3;
      });
    }

    function repairBendpoint(candidate, oldPeer, newPeer) {

      var alignment = pointsAligned(oldPeer, candidate);

      switch (alignment) {
      case 'v':

        // repair horizontal alignment
        return { x: newPeer.x, y: candidate.y };
      case 'h':

        // repair vertical alignment
        return { x: candidate.x, y: newPeer.y };
      }

      return { x: candidate.x, y: candidate. y };
    }

    function removeOverlapping(points, a, b) {
      var i;

      for (i = points.length - 2; i !== 0; i--) {

        // intersects (?) break, remove all bendpoints up to this one and relayout
        if (pointInRect(points[i], a, INTERSECTION_THRESHOLD) ||
            pointInRect(points[i], b, INTERSECTION_THRESHOLD)) {

          // return sliced old connection
          return points.slice(i);
        }
      }

      return points;
    }

    // (0) only repair what has layoutable bendpoints

    // (1) if only one bendpoint and on shape moved onto other shapes axis
    //     (horizontally / vertically), relayout

    if (needsRelayout(points)) {
      return null;
    }

    var oldDocking = points[0],
        newPoints = points.slice(),
        slicedPoints;

    // (2) repair only last line segment and only if it was layouted before

    newPoints[0] = newDocking;
    newPoints[1] = repairBendpoint(newPoints[1], oldDocking, newDocking);


    // (3) if shape intersects with any bendpoint after repair,
    //     remove all segments up to this bendpoint and repair from there
    slicedPoints = removeOverlapping(newPoints, moved, other);

    if (slicedPoints !== newPoints) {
      newPoints = _tryRepairConnectionSide(moved, other, newDocking, slicedPoints);
    }

    // (4) do NOT repair if repaired bendpoints are aligned
    if (newPoints && pointsAligned(newPoints)) {
      return null;
    }

    return newPoints;
  }


  /**
   * Returns the manhattan directions connecting two rectangles
   * with the given orientation.
   *
   * Will always return the default layout, if it is specific
   * regarding sides already (trbl).
   *
   * @example
   *
   * getDirections('top'); // -> 'v:v'
   * getDirections('intersect'); // -> 't:t'
   *
   * getDirections('top-right', 'v:h'); // -> 'v:h'
   * getDirections('top-right', 'h:h'); // -> 'h:h'
   *
   *
   * @param {string} orientation
   * @param {string} defaultLayout
   *
   * @return {string}
   */
  function getDirections(orientation, defaultLayout) {

    // don't override specific trbl directions
    if (isExplicitDirections(defaultLayout)) {
      return defaultLayout;
    }

    switch (orientation) {
    case 'intersect':
      return 't:t';

    case 'top':
    case 'bottom':
      return 'v:v';

    case 'left':
    case 'right':
      return 'h:h';

    // 'top-left'
    // 'top-right'
    // 'bottom-left'
    // 'bottom-right'
    default:
      return defaultLayout;
    }
  }

  function isValidDirections(directions) {
    return directions && /^h|v|t|r|b|l:h|v|t|r|b|l$/.test(directions);
  }

  function isExplicitDirections(directions) {
    return directions && /t|r|b|l/.test(directions);
  }

  function invertOrientation(orientation) {
    return {
      'top': 'bottom',
      'bottom': 'top',
      'left': 'right',
      'right': 'left',
      'top-left': 'bottom-right',
      'bottom-right': 'top-left',
      'top-right': 'bottom-left',
      'bottom-left': 'top-right',
    }[orientation];
  }

  function getDockingPoint(point, rectangle, dockingDirection, targetOrientation) {

    // ensure we end up with a specific docking direction
    // based on the targetOrientation, if <h|v> is being passed

    if (dockingDirection === 'h') {
      dockingDirection = /left/.test(targetOrientation) ? 'l' : 'r';
    }

    if (dockingDirection === 'v') {
      dockingDirection = /top/.test(targetOrientation) ? 't' : 'b';
    }

    if (dockingDirection === 't') {
      return { original: point, x: point.x, y: rectangle.y };
    }

    if (dockingDirection === 'r') {
      return { original: point, x: rectangle.x + rectangle.width, y: point.y };
    }

    if (dockingDirection === 'b') {
      return { original: point, x: point.x, y: rectangle.y + rectangle.height };
    }

    if (dockingDirection === 'l') {
      return { original: point, x: rectangle.x, y: point.y };
    }

    throw new Error('unexpected dockingDirection: <' + dockingDirection + '>');
  }


  /**
   * Return list of waypoints with redundant ones filtered out.
   *
   * @example
   *
   * Original points:
   *
   *   [x] ----- [x] ------ [x]
   *                         |
   *                        [x] ----- [x] - [x]
   *
   * Filtered:
   *
   *   [x] ---------------- [x]
   *                         |
   *                        [x] ----------- [x]
   *
   * @param  {Array<Point>} waypoints
   *
   * @return {Array<Point>}
   */
  function withoutRedundantPoints(waypoints) {
    return waypoints.reduce(function(points, p, idx) {

      var previous = points[points.length - 1],
          next = waypoints[idx + 1];

      if (!pointsOnLine(previous, next, p, 0)) {
        points.push(p);
      }

      return points;
    }, []);
  }

  var ATTACH_ORIENTATION_PADDING = -10,
      BOUNDARY_TO_HOST_THRESHOLD$1 = 40;

  var oppositeOrientationMapping = {
    'top': 'bottom',
    'top-right': 'bottom-left',
    'top-left': 'bottom-right',
    'right': 'left',
    'bottom': 'top',
    'bottom-right': 'top-left',
    'bottom-left': 'top-right',
    'left': 'right'
  };

  var orientationDirectionMapping = {
    top: 't',
    right: 'r',
    bottom: 'b',
    left: 'l'
  };


  function BpmnLayouter() {}

  e(BpmnLayouter, BaseLayouter);


  BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
    if (!hints) {
      hints = {};
    }

    var source = hints.source || connection.source,
        target = hints.target || connection.target,
        waypoints = hints.waypoints || connection.waypoints,
        connectionStart = hints.connectionStart,
        connectionEnd = hints.connectionEnd;

    var manhattanOptions,
        updatedWaypoints;

    if (!connectionStart) {
      connectionStart = getConnectionDocking(waypoints && waypoints[ 0 ], source);
    }

    if (!connectionEnd) {
      connectionEnd = getConnectionDocking(waypoints && waypoints[ waypoints.length - 1 ], target);
    }

    // TODO(nikku): support vertical modeling
    // and invert preferredLayouts accordingly

    if (is$1(connection, 'bpmn:Association') ||
        is$1(connection, 'bpmn:DataAssociation')) {

      if (waypoints && !isCompensationAssociation(source, target)) {
        return [].concat([ connectionStart ], waypoints.slice(1, -1), [ connectionEnd ]);
      }
    }

    if (is$1(connection, 'bpmn:MessageFlow')) {
      manhattanOptions = getMessageFlowManhattanOptions(source, target);
    } else if (is$1(connection, 'bpmn:SequenceFlow') || isCompensationAssociation(source, target)) {

      // layout all connection between flow elements h:h, except for
      // (1) outgoing of boundary events -> layout based on attach orientation and target orientation
      // (2) incoming/outgoing of gateways -> v:h for outgoing, h:v for incoming
      // (3) loops
      if (source === target) {
        manhattanOptions = {
          preferredLayouts: getLoopPreferredLayout(source, connection)
        };
      } else if (is$1(source, 'bpmn:BoundaryEvent')) {
        manhattanOptions = {
          preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd)
        };
      } else if (isExpandedSubProcess(source) || isExpandedSubProcess(target)) {
        manhattanOptions = getSubProcessManhattanOptions(source);
      } else if (is$1(source, 'bpmn:Gateway')) {
        manhattanOptions = {
          preferredLayouts: [ 'v:h' ]
        };
      } else if (is$1(target, 'bpmn:Gateway')) {
        manhattanOptions = {
          preferredLayouts: [ 'h:v' ]
        };
      } else {
        manhattanOptions = {
          preferredLayouts: [ 'h:h' ]
        };
      }
    }

    if (manhattanOptions) {
      manhattanOptions = assign(manhattanOptions, hints);

      updatedWaypoints = withoutRedundantPoints(repairConnection(
        source,
        target,
        connectionStart,
        connectionEnd,
        waypoints,
        manhattanOptions
      ));
    }

    return updatedWaypoints || [ connectionStart, connectionEnd ];
  };


  // helpers //////////

  function getAttachOrientation(attachedElement) {
    var hostElement = attachedElement.host;

    return getOrientation(getMid(attachedElement), hostElement, ATTACH_ORIENTATION_PADDING);
  }

  function getMessageFlowManhattanOptions(source, target) {
    return {
      preferredLayouts: [ 'straight', 'v:v' ],
      preserveDocking: getMessageFlowPreserveDocking(source, target)
    };
  }

  function getMessageFlowPreserveDocking(source, target) {

    // (1) docking element connected to participant has precedence
    if (is$1(target, 'bpmn:Participant')) {
      return 'source';
    }

    if (is$1(source, 'bpmn:Participant')) {
      return 'target';
    }

    // (2) docking element connected to expanded sub-process has precedence
    if (isExpandedSubProcess(target)) {
      return 'source';
    }

    if (isExpandedSubProcess(source)) {
      return 'target';
    }

    // (3) docking event has precedence
    if (is$1(target, 'bpmn:Event')) {
      return 'target';
    }

    if (is$1(source, 'bpmn:Event')) {
      return 'source';
    }

    return null;
  }

  function getSubProcessManhattanOptions(source) {
    return {
      preferredLayouts: [ 'straight', 'h:h' ],
      preserveDocking: getSubProcessPreserveDocking(source)
    };
  }

  function getSubProcessPreserveDocking(source) {
    return isExpandedSubProcess(source) ? 'target' : 'source';
  }

  function getConnectionDocking(point, shape) {
    return point ? (point.original || point) : getMid(shape);
  }

  function isCompensationAssociation(source, target) {
    return is$1(target, 'bpmn:Activity') &&
      is$1(source, 'bpmn:BoundaryEvent') &&
      target.businessObject.isForCompensation;
  }

  function isExpandedSubProcess(element) {
    return is$1(element, 'bpmn:SubProcess') && isExpanded(element);
  }

  function isSame(a, b) {
    return a === b;
  }

  function isAnyOrientation(orientation, orientations) {
    return orientations.indexOf(orientation) !== -1;
  }

  function getHorizontalOrientation(orientation) {
    var matches = /right|left/.exec(orientation);

    return matches && matches[0];
  }

  function getVerticalOrientation(orientation) {
    var matches = /top|bottom/.exec(orientation);

    return matches && matches[0];
  }

  function isOppositeOrientation(a, b) {
    return oppositeOrientationMapping[a] === b;
  }

  function isOppositeHorizontalOrientation(a, b) {
    var horizontalOrientation = getHorizontalOrientation(a);

    var oppositeHorizontalOrientation = oppositeOrientationMapping[horizontalOrientation];

    return b.indexOf(oppositeHorizontalOrientation) !== -1;
  }

  function isOppositeVerticalOrientation(a, b) {
    var verticalOrientation = getVerticalOrientation(a);

    var oppositeVerticalOrientation = oppositeOrientationMapping[verticalOrientation];

    return b.indexOf(oppositeVerticalOrientation) !== -1;
  }

  function isHorizontalOrientation(orientation) {
    return orientation === 'right' || orientation === 'left';
  }

  function getLoopPreferredLayout(source, connection) {
    var waypoints = connection.waypoints;

    var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);

    if (orientation === 'top') {
      return [ 't:r' ];
    } else if (orientation === 'right') {
      return [ 'r:b' ];
    } else if (orientation === 'left') {
      return [ 'l:t' ];
    }

    return [ 'b:l' ];
  }

  function getBoundaryEventPreferredLayouts(source, target, end) {
    var sourceMid = getMid(source),
        targetMid = getMid(target),
        attachOrientation = getAttachOrientation(source),
        sourceLayout,
        targetLayout;

    var isLoop = isSame(source.host, target);

    var attachedToSide = isAnyOrientation(attachOrientation, [ 'top', 'right', 'bottom', 'left' ]);

    var targetOrientation = getOrientation(targetMid, sourceMid, {
      x: source.width / 2 + target.width / 2,
      y: source.height / 2 + target.height / 2
    });

    if (isLoop) {
      return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end);
    }

    // source layout
    sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide);

    // target layout
    targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide);

    return [ sourceLayout + ':' + targetLayout ];
  }

  function getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end) {
    var orientation = attachedToSide ? attachOrientation : getVerticalOrientation(attachOrientation),
        sourceLayout = orientationDirectionMapping[ orientation ],
        targetLayout;

    if (attachedToSide) {
      if (isHorizontalOrientation(attachOrientation)) {
        targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : 'b';
      } else {
        targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : 'l';
      }
    } else {
      targetLayout = 'v';
    }

    return [ sourceLayout + ':' + targetLayout ];
  }

  function shouldConnectToSameSide(axis, source, target, end) {
    var threshold = BOUNDARY_TO_HOST_THRESHOLD$1;

    return !(
      areCloseOnAxis(axis, end, target, threshold) ||
      areCloseOnAxis(axis, end, {
        x: target.x + target.width,
        y: target.y + target.height
      }, threshold) ||
      areCloseOnAxis(axis, end, getMid(source), threshold)
    );
  }

  function areCloseOnAxis(axis, a, b, threshold) {
    return Math.abs(a[ axis ] - b[ axis ]) < threshold;
  }

  function getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide) {

    // attached to either top, right, bottom or left side
    if (attachedToSide) {
      return orientationDirectionMapping[ attachOrientation ];
    }

    // attached to either top-right, top-left, bottom-right or bottom-left corner

    // same vertical or opposite horizontal orientation
    if (isSame(
      getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)
    ) || isOppositeOrientation(
      getHorizontalOrientation(attachOrientation), getHorizontalOrientation(targetOrientation)
    )) {
      return orientationDirectionMapping[ getVerticalOrientation(attachOrientation) ];
    }

    // fallback
    return orientationDirectionMapping[ getHorizontalOrientation(attachOrientation) ];
  }

  function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide) {

    // attached to either top, right, bottom or left side
    if (attachedToSide) {
      if (isHorizontalOrientation(attachOrientation)) {

        // orientation is right or left

        // opposite horizontal orientation or same orientation
        if (
          isOppositeHorizontalOrientation(attachOrientation, targetOrientation) ||
          isSame(attachOrientation, targetOrientation)
        ) {
          return 'h';
        }

        // fallback
        return 'v';
      } else {

        // orientation is top or bottom

        // opposite vertical orientation or same orientation
        if (
          isOppositeVerticalOrientation(attachOrientation, targetOrientation) ||
          isSame(attachOrientation, targetOrientation)
        ) {
          return 'v';
        }

        // fallback
        return 'h';
      }
    }

    // attached to either top-right, top-left, bottom-right or bottom-left corner

    // orientation is right, left
    // or same vertical orientation but also right or left
    if (isHorizontalOrientation(targetOrientation) ||
      (isSame(getVerticalOrientation(attachOrientation), getVerticalOrientation(targetOrientation)) &&
        getHorizontalOrientation(targetOrientation))) {
      return 'h';
    } else {
      return 'v';
    }
  }

  function dockingToPoint(docking) {

    // use the dockings actual point and
    // retain the original docking
    return assign({ original: docking.point.original || docking.point }, docking.actual);
  }


  /**
   * A {@link ConnectionDocking} that crops connection waypoints based on
   * the path(s) of the connection source and target.
   *
   * @param {djs.core.ElementRegistry} elementRegistry
   */
  function CroppingConnectionDocking(elementRegistry, graphicsFactory) {
    this._elementRegistry = elementRegistry;
    this._graphicsFactory = graphicsFactory;
  }

  CroppingConnectionDocking.$inject = [ 'elementRegistry', 'graphicsFactory' ];


  /**
   * @inheritDoc ConnectionDocking#getCroppedWaypoints
   */
  CroppingConnectionDocking.prototype.getCroppedWaypoints = function(connection, source, target) {

    source = source || connection.source;
    target = target || connection.target;

    var sourceDocking = this.getDockingPoint(connection, source, true),
        targetDocking = this.getDockingPoint(connection, target);

    var croppedWaypoints = connection.waypoints.slice(sourceDocking.idx + 1, targetDocking.idx);

    croppedWaypoints.unshift(dockingToPoint(sourceDocking));
    croppedWaypoints.push(dockingToPoint(targetDocking));

    return croppedWaypoints;
  };

  /**
   * Return the connection docking point on the specified shape
   *
   * @inheritDoc ConnectionDocking#getDockingPoint
   */
  CroppingConnectionDocking.prototype.getDockingPoint = function(connection, shape, dockStart) {

    var waypoints = connection.waypoints,
        dockingIdx,
        dockingPoint,
        croppedPoint;

    dockingIdx = dockStart ? 0 : waypoints.length - 1;
    dockingPoint = waypoints[dockingIdx];

    croppedPoint = this._getIntersection(shape, connection, dockStart);

    return {
      point: dockingPoint,
      actual: croppedPoint || dockingPoint,
      idx: dockingIdx
    };
  };


  // helpers //////////////////////

  CroppingConnectionDocking.prototype._getIntersection = function(shape, connection, takeFirst) {

    var shapePath = this._getShapePath(shape),
        connectionPath = this._getConnectionPath(connection);

    return getElementLineIntersection(shapePath, connectionPath, takeFirst);
  };

  CroppingConnectionDocking.prototype._getConnectionPath = function(connection) {
    return this._graphicsFactory.getConnectionPath(connection);
  };

  CroppingConnectionDocking.prototype._getShapePath = function(shape) {
    return this._graphicsFactory.getShapePath(shape);
  };

  CroppingConnectionDocking.prototype._getGfx = function(element) {
    return this._elementRegistry.getGraphics(element);
  };

  var ModelingModule = {
    __init__: [
      'modeling',
      'bpmnUpdater'
    ],
    __depends__: [
      BehaviorModule,
      RulesModule,
      DiOrderingModule,
      OrderingModule,
      ReplaceModule,
      CommandModule,
      TooltipsModule,
      LabelSupportModule,
      AttachSupportModule,
      SelectionModule,
      ChangeSupportModule,
      SpaceToolModule
    ],
    bpmnFactory: [ 'type', BpmnFactory ],
    bpmnUpdater: [ 'type', BpmnUpdater ],
    elementFactory: [ 'type', ElementFactory ],
    modeling: [ 'type', Modeling ],
    layouter: [ 'type', BpmnLayouter ],
    connectionDocking: [ 'type', CroppingConnectionDocking ]
  };

  var LOW_PRIORITY$2 = 500,
      MEDIUM_PRIORITY = 1250,
      HIGH_PRIORITY$2 = 1500;

  var round = Math.round;

  function mid(element) {
    return {
      x: element.x + round(element.width / 2),
      y: element.y + round(element.height / 2)
    };
  }

  /**
   * A plugin that makes shapes draggable / droppable.
   *
   * @param {EventBus} eventBus
   * @param {Dragging} dragging
   * @param {Modeling} modeling
   * @param {Selection} selection
   * @param {Rules} rules
   */
  function MoveEvents(
      eventBus, dragging, modeling,
      selection, rules) {

    // rules

    function canMove(shapes, delta, position, target) {

      return rules.allowed('elements.move', {
        shapes: shapes,
        delta: delta,
        position: position,
        target: target
      });
    }


    // move events

    // assign a high priority to this handler to setup the environment
    // others may hook up later, e.g. at default priority and modify
    // the move environment.
    //
    // This sets up the context with
    //
    // * shape: the primary shape being moved
    // * shapes: a list of shapes to be moved
    // * validatedShapes: a list of shapes that are being checked
    //                    against the rules before and during move
    //
    eventBus.on('shape.move.start', HIGH_PRIORITY$2, function(event) {

      var context = event.context,
          shape = event.shape,
          shapes = selection.get().slice();

      // move only single shape if the dragged element
      // is not part of the current selection
      if (shapes.indexOf(shape) === -1) {
        shapes = [ shape ];
      }

      // ensure we remove nested elements in the collection
      // and add attachers for a proper dragger
      shapes = removeNested(shapes);

      // attach shapes to drag context
      assign(context, {
        shapes: shapes,
        validatedShapes: shapes,
        shape: shape
      });
    });


    // assign a high priority to this handler to setup the environment
    // others may hook up later, e.g. at default priority and modify
    // the move environment
    //
    eventBus.on('shape.move.start', MEDIUM_PRIORITY, function(event) {

      var context = event.context,
          validatedShapes = context.validatedShapes,
          canExecute;

      canExecute = context.canExecute = canMove(validatedShapes);

      // check if we can move the elements
      if (!canExecute) {
        return false;
      }
    });

    // assign a low priority to this handler
    // to let others modify the move event before we update
    // the context
    //
    eventBus.on('shape.move.move', LOW_PRIORITY$2, function(event) {

      var context = event.context,
          validatedShapes = context.validatedShapes,
          hover = event.hover,
          delta = { x: event.dx, y: event.dy },
          position = { x: event.x, y: event.y },
          canExecute;

      // check if we can move the elements
      canExecute = canMove(validatedShapes, delta, position, hover);

      context.delta = delta;
      context.canExecute = canExecute;

      // simply ignore move over
      if (canExecute === null) {
        context.target = null;

        return;
      }

      context.target = hover;
    });

    eventBus.on('shape.move.end', function(event) {

      var context = event.context;

      var delta = context.delta,
          canExecute = context.canExecute,
          isAttach = canExecute === 'attach',
          shapes = context.shapes;

      if (canExecute === false) {
        return false;
      }

      // ensure we have actual pixel values deltas
      // (important when zoom level was > 1 during move)
      delta.x = round(delta.x);
      delta.y = round(delta.y);

      if (delta.x === 0 && delta.y === 0) {

        // didn't move
        return;
      }

      modeling.moveElements(shapes, delta, context.target, {
        primaryShape: context.shape,
        attach: isAttach
      });
    });


    // move activation

    eventBus.on('element.mousedown', function(event) {

      if (!isPrimaryButton(event)) {
        return;
      }

      var originalEvent = getOriginal$1(event);

      if (!originalEvent) {
        throw new Error('must supply DOM mousedown event');
      }

      return start(originalEvent, event.element);
    });

    /**
     * Start move.
     *
     * @param {MouseEvent} event
     * @param {djs.model.Shape} shape
     * @param {boolean} [activate]
     * @param {Object} [context]
     */
    function start(event, element, activate, context) {
      if (isObject(activate)) {
        context = activate;
        activate = false;
      }

      // do not move connections or the root element
      if (element.waypoints || !element.parent) {
        return;
      }

      // ignore non-draggable hits
      if (classes(event.target).has('djs-hit-no-move')) {
        return;
      }

      var referencePoint = mid(element);

      dragging.init(event, referencePoint, 'shape.move', {
        cursor: 'grabbing',
        autoActivate: activate,
        data: {
          shape: element,
          context: context || {}
        }
      });

      // we've handled the event
      return true;
    }

    // API

    this.start = start;
  }

  MoveEvents.$inject = [
    'eventBus',
    'dragging',
    'modeling',
    'selection',
    'rules'
  ];


  /**
   * Return a filtered list of elements that do not contain
   * those nested into others.
   *
   * @param  {Array<djs.model.Base>} elements
   *
   * @return {Array<djs.model.Base>} filtered
   */
  function removeNested(elements) {

    var ids = groupBy(elements, 'id');

    return filter(elements, function(element) {
      while ((element = element.parent)) {

        // parent in selection
        if (ids[element.id]) {
          return false;
        }
      }

      return true;
    });
  }

  var LOW_PRIORITY$1 = 499;

  var MARKER_DRAGGING = 'djs-dragging',
      MARKER_OK$1 = 'drop-ok',
      MARKER_NOT_OK$1 = 'drop-not-ok',
      MARKER_NEW_PARENT = 'new-parent',
      MARKER_ATTACH = 'attach-ok';


  /**
   * Provides previews for moving shapes when moving.
   *
   * @param {EventBus} eventBus
   * @param {ElementRegistry} elementRegistry
   * @param {Canvas} canvas
   * @param {Styles} styles
   */
  function MovePreview(
      eventBus, canvas, styles, previewSupport) {

    function getVisualDragShapes(shapes) {
      var elements = getAllDraggedElements(shapes);

      var filteredElements = removeEdges(elements);

      return filteredElements;
    }

    function getAllDraggedElements(shapes) {
      var allShapes = selfAndAllChildren(shapes, true);

      var allConnections = map(allShapes, function(shape) {
        return (shape.incoming || []).concat(shape.outgoing || []);
      });

      return flatten(allShapes.concat(allConnections));
    }

    /**
     * Sets drop marker on an element.
     */
    function setMarker(element, marker) {

      [ MARKER_ATTACH, MARKER_OK$1, MARKER_NOT_OK$1, MARKER_NEW_PARENT ].forEach(function(m) {

        if (m === marker) {
          canvas.addMarker(element, m);
        } else {
          canvas.removeMarker(element, m);
        }
      });
    }

    /**
     * Make an element draggable.
     *
     * @param {Object} context
     * @param {djs.model.Base} element
     * @param {boolean} addMarker
     */
    function makeDraggable(context, element, addMarker) {

      previewSupport.addDragger(element, context.dragGroup);

      if (addMarker) {
        canvas.addMarker(element, MARKER_DRAGGING);
      }

      if (context.allDraggedElements) {
        context.allDraggedElements.push(element);
      } else {
        context.allDraggedElements = [ element ];
      }
    }

    // assign a low priority to this handler
    // to let others modify the move context before
    // we draw things
    eventBus.on('shape.move.start', LOW_PRIORITY$1, function(event) {
      var context = event.context,
          dragShapes = context.shapes,
          allDraggedElements = context.allDraggedElements;

      var visuallyDraggedShapes = getVisualDragShapes(dragShapes);

      if (!context.dragGroup) {
        var dragGroup = create$1('g');

        attr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));

        var activeLayer = canvas.getActiveLayer();

        append(activeLayer, dragGroup);

        context.dragGroup = dragGroup;
      }

      // add previews
      visuallyDraggedShapes.forEach(function(shape) {
        previewSupport.addDragger(shape, context.dragGroup);
      });

      // cache all dragged elements / gfx
      // so that we can quickly undo their state changes later
      if (!allDraggedElements) {
        allDraggedElements = getAllDraggedElements(dragShapes);
      } else {
        allDraggedElements = flatten([
          allDraggedElements,
          getAllDraggedElements(dragShapes)
        ]);
      }

      // add dragging marker
      forEach$1(allDraggedElements, function(e) {
        canvas.addMarker(e, MARKER_DRAGGING);
      });

      context.allDraggedElements = allDraggedElements;

      // determine, if any of the dragged elements have different parents
      context.differentParents = haveDifferentParents(dragShapes);
    });

    // update previews
    eventBus.on('shape.move.move', LOW_PRIORITY$1, function(event) {

      var context = event.context,
          dragGroup = context.dragGroup,
          target = context.target,
          parent = context.shape.parent,
          canExecute = context.canExecute;

      if (target) {
        if (canExecute === 'attach') {
          setMarker(target, MARKER_ATTACH);
        } else if (context.canExecute && target && target.id !== parent.id) {
          setMarker(target, MARKER_NEW_PARENT);
        } else {
          setMarker(target, context.canExecute ? MARKER_OK$1 : MARKER_NOT_OK$1);
        }
      }

      translate$2(dragGroup, event.dx, event.dy);
    });

    eventBus.on([ 'shape.move.out', 'shape.move.cleanup' ], function(event) {
      var context = event.context,
          target = context.target;

      if (target) {
        setMarker(target, null);
      }
    });

    // remove previews
    eventBus.on('shape.move.cleanup', function(event) {

      var context = event.context,
          allDraggedElements = context.allDraggedElements,
          dragGroup = context.dragGroup;


      // remove dragging marker
      forEach$1(allDraggedElements, function(e) {
        canvas.removeMarker(e, MARKER_DRAGGING);
      });

      if (dragGroup) {
        remove$1(dragGroup);
      }
    });


    // API //////////////////////

    /**
     * Make an element draggable.
     *
     * @param {Object} context
     * @param {djs.model.Base} element
     * @param {boolean} addMarker
     */
    this.makeDraggable = makeDraggable;
  }

  MovePreview.$inject = [
    'eventBus',
    'canvas',
    'styles',
    'previewSupport'
  ];


  // helpers //////////////////////

  /**
   * returns elements minus all connections
   * where source or target is not elements
   */
  function removeEdges(elements) {

    var filteredElements = filter(elements, function(element) {

      if (!isConnection$2(element)) {
        return true;
      } else {

        return (
          find(elements, matchPattern({ id: element.source.id })) &&
          find(elements, matchPattern({ id: element.target.id }))
        );
      }
    });

    return filteredElements;
  }

  function haveDifferentParents(elements) {
    return size(groupBy(elements, function(e) { return e.parent && e.parent.id; })) !== 1;
  }

  /**
   * Checks if an element is a connection.
   */
  function isConnection$2(element) {
    return element.waypoints;
  }

  var MoveModule = {
    __depends__: [
      InteractionEventsModule$1,
      SelectionModule,
      OutlineModule,
      RulesModule$1,
      DraggingModule,
      PreviewSupportModule
    ],
    __init__: [
      'move',
      'movePreview'
    ],
    move: [ 'type', MoveEvents ],
    movePreview: [ 'type', MovePreview ]
  };

  var TOGGLE_SELECTOR = '.djs-palette-toggle',
      ENTRY_SELECTOR = '.entry',
      ELEMENT_SELECTOR = TOGGLE_SELECTOR + ', ' + ENTRY_SELECTOR;

  var PALETTE_PREFIX = 'djs-palette-',
      PALETTE_SHOWN_CLS = 'shown',
      PALETTE_OPEN_CLS = 'open',
      PALETTE_TWO_COLUMN_CLS = 'two-column';

  var DEFAULT_PRIORITY = 1000;


  /**
   * A palette containing modeling elements.
   */
  function Palette(eventBus, canvas) {

    this._eventBus = eventBus;
    this._canvas = canvas;

    var self = this;

    eventBus.on('tool-manager.update', function(event) {
      var tool = event.tool;

      self.updateToolHighlight(tool);
    });

    eventBus.on('i18n.changed', function() {
      self._update();
    });

    eventBus.on('diagram.init', function() {

      self._diagramInitialized = true;

      self._rebuild();
    });
  }

  Palette.$inject = [ 'eventBus', 'canvas' ];


  /**
   * Register a provider with the palette
   *
   * @param  {number} [priority=1000]
   * @param  {PaletteProvider} provider
   *
   * @example
   * const paletteProvider = {
   *   getPaletteEntries: function() {
   *     return function(entries) {
   *       return {
   *         ...entries,
   *         'entry-1': {
   *           label: 'My Entry',
   *           action: function() { alert("I have been clicked!"); }
   *         }
   *       };
   *     }
   *   }
   * };
   *
   * palette.registerProvider(800, paletteProvider);
   */
  Palette.prototype.registerProvider = function(priority, provider) {
    if (!provider) {
      provider = priority;
      priority = DEFAULT_PRIORITY;
    }

    this._eventBus.on('palette.getProviders', priority, function(event) {
      event.providers.push(provider);
    });

    this._rebuild();
  };


  /**
   * Returns the palette entries
   *
   * @return {Object<string, PaletteEntryDescriptor>} map of entries
   */
  Palette.prototype.getEntries = function() {
    var providers = this._getProviders();

    return providers.reduce(addPaletteEntries, {});
  };

  Palette.prototype._rebuild = function() {

    if (!this._diagramInitialized) {
      return;
    }

    var providers = this._getProviders();

    if (!providers.length) {
      return;
    }

    if (!this._container) {
      this._init();
    }

    this._update();
  };

  /**
   * Initialize
   */
  Palette.prototype._init = function() {

    var self = this;

    var eventBus = this._eventBus;

    var parentContainer = this._getParentContainer();

    var container = this._container = domify(Palette.HTML_MARKUP);

    parentContainer.appendChild(container);
    classes$1(parentContainer).add(PALETTE_PREFIX + PALETTE_SHOWN_CLS);

    delegate.bind(container, ELEMENT_SELECTOR, 'click', function(event) {

      var target = event.delegateTarget;

      if (matchesSelector(target, TOGGLE_SELECTOR)) {
        return self.toggle();
      }

      self.trigger('click', event);
    });

    // prevent drag propagation
    componentEvent.bind(container, 'mousedown', function(event) {
      event.stopPropagation();
    });

    // prevent drag propagation
    delegate.bind(container, ENTRY_SELECTOR, 'dragstart', function(event) {
      self.trigger('dragstart', event);
    });

    eventBus.on('canvas.resized', this._layoutChanged, this);

    eventBus.fire('palette.create', {
      container: container
    });
  };

  Palette.prototype._getProviders = function(id) {

    var event = this._eventBus.createEvent({
      type: 'palette.getProviders',
      providers: []
    });

    this._eventBus.fire(event);

    return event.providers;
  };

  /**
   * Update palette state.
   *
   * @param  {Object} [state] { open, twoColumn }
   */
  Palette.prototype._toggleState = function(state) {

    state = state || {};

    var parent = this._getParentContainer(),
        container = this._container;

    var eventBus = this._eventBus;

    var twoColumn;

    var cls = classes$1(container),
        parentCls = classes$1(parent);

    if ('twoColumn' in state) {
      twoColumn = state.twoColumn;
    } else {
      twoColumn = this._needsCollapse(parent.clientHeight, this._entries || {});
    }

    // always update two column
    cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn);
    parentCls.toggle(PALETTE_PREFIX + PALETTE_TWO_COLUMN_CLS, twoColumn);

    if ('open' in state) {
      cls.toggle(PALETTE_OPEN_CLS, state.open);
      parentCls.toggle(PALETTE_PREFIX + PALETTE_OPEN_CLS, state.open);
    }

    eventBus.fire('palette.changed', {
      twoColumn: twoColumn,
      open: this.isOpen()
    });
  };

  Palette.prototype._update = function() {

    var entriesContainer = query('.djs-palette-entries', this._container),
        entries = this._entries = this.getEntries();

    clear$1(entriesContainer);

    forEach$1(entries, function(entry, id) {

      var grouping = entry.group || 'default';

      var container = query('[data-group=' + cssEscape(grouping) + ']', entriesContainer);
      if (!container) {
        container = domify('<div class="group"></div>');
        attr$1(container, 'data-group', grouping);

        entriesContainer.appendChild(container);
      }

      var html = entry.html || (
        entry.separator ?
          '<hr class="separator" />' :
          '<div class="entry" draggable="true"></div>');


      var control = domify(html);
      container.appendChild(control);

      if (!entry.separator) {
        attr$1(control, 'data-action', id);

        if (entry.title) {
          attr$1(control, 'title', entry.title);
        }

        if (entry.className) {
          addClasses(control, entry.className);
        }

        if (entry.imageUrl) {
          var image = domify('<img>');
          attr$1(image, 'src', entry.imageUrl);

          control.appendChild(image);
        }
      }
    });

    // open after update
    this.open();
  };


  /**
   * Trigger an action available on the palette
   *
   * @param  {string} action
   * @param  {Event} event
   */
  Palette.prototype.trigger = function(action, event, autoActivate) {
    var entries = this._entries,
        entry,
        handler,
        originalEvent,
        button = event.delegateTarget || event.target;

    if (!button) {
      return event.preventDefault();
    }

    entry = entries[attr$1(button, 'data-action')];

    // when user clicks on the palette and not on an action
    if (!entry) {
      return;
    }

    handler = entry.action;

    originalEvent = event.originalEvent || event;

    // simple action (via callback function)
    if (isFunction(handler)) {
      if (action === 'click') {
        handler(originalEvent, autoActivate);
      }
    } else {
      if (handler[action]) {
        handler[action](originalEvent, autoActivate);
      }
    }

    // silence other actions
    event.preventDefault();
  };

  Palette.prototype._layoutChanged = function() {
    this._toggleState({});
  };

  /**
   * Do we need to collapse to two columns?
   *
   * @param {number} availableHeight
   * @param {Object} entries
   *
   * @return {boolean}
   */
  Palette.prototype._needsCollapse = function(availableHeight, entries) {

    // top margin + bottom toggle + bottom margin
    // implementors must override this method if they
    // change the palette styles
    var margin = 20 + 10 + 20;

    var entriesHeight = Object.keys(entries).length * 46;

    return availableHeight < entriesHeight + margin;
  };

  /**
   * Close the palette
   */
  Palette.prototype.close = function() {

    this._toggleState({
      open: false,
      twoColumn: false
    });
  };


  /**
   * Open the palette
   */
  Palette.prototype.open = function() {
    this._toggleState({ open: true });
  };


  Palette.prototype.toggle = function(open) {
    if (this.isOpen()) {
      this.close();
    } else {
      this.open();
    }
  };

  Palette.prototype.isActiveTool = function(tool) {
    return tool && this._activeTool === tool;
  };

  Palette.prototype.updateToolHighlight = function(name) {
    var entriesContainer,
        toolsContainer;

    if (!this._toolsContainer) {
      entriesContainer = query('.djs-palette-entries', this._container);

      this._toolsContainer = query('[data-group=tools]', entriesContainer);
    }

    toolsContainer = this._toolsContainer;

    forEach$1(toolsContainer.children, function(tool) {
      var actionName = tool.getAttribute('data-action');

      if (!actionName) {
        return;
      }

      var toolClasses = classes$1(tool);

      actionName = actionName.replace('-tool', '');

      if (toolClasses.contains('entry') && actionName === name) {
        toolClasses.add('highlighted-entry');
      } else {
        toolClasses.remove('highlighted-entry');
      }
    });
  };


  /**
   * Return true if the palette is opened.
   *
   * @example
   *
   * palette.open();
   *
   * if (palette.isOpen()) {
   *   // yes, we are open
   * }
   *
   * @return {boolean} true if palette is opened
   */
  Palette.prototype.isOpen = function() {
    return classes$1(this._container).has(PALETTE_OPEN_CLS);
  };

  /**
   * Get container the palette lives in.
   *
   * @return {Element}
   */
  Palette.prototype._getParentContainer = function() {
    return this._canvas.getContainer();
  };


  /* markup definition */

  Palette.HTML_MARKUP =
    '<div class="djs-palette">' +
      '<div class="djs-palette-entries"></div>' +
      '<div class="djs-palette-toggle"></div>' +
    '</div>';


  // helpers //////////////////////

  function addClasses(element, classNames) {

    var classes = classes$1(element);

    var actualClassNames = isArray$3(classNames) ? classNames : classNames.split(/\s+/g);
    actualClassNames.forEach(function(cls) {
      classes.add(cls);
    });
  }

  function addPaletteEntries(entries, provider) {

    var entriesOrUpdater = provider.getPaletteEntries();

    if (isFunction(entriesOrUpdater)) {
      return entriesOrUpdater(entries);
    }

    forEach$1(entriesOrUpdater, function(entry, id) {
      entries[id] = entry;
    });

    return entries;
  }

  var PaletteModule$1 = {
    __init__: [ 'palette' ],
    palette: [ 'type', Palette ]
  };

  var LASSO_TOOL_CURSOR = 'crosshair';


  function LassoTool(
      eventBus, canvas, dragging,
      elementRegistry, selection, toolManager,
      mouse) {

    this._selection = selection;
    this._dragging = dragging;
    this._mouse = mouse;

    var self = this;

    // lasso visuals implementation

    /**
    * A helper that realizes the selection box visual
    */
    var visuals = {

      create: function(context) {
        var container = canvas.getActiveLayer(),
            frame;

        frame = context.frame = create$1('rect');
        attr(frame, {
          class: 'djs-lasso-overlay',
          width:  1,
          height: 1,
          x: 0,
          y: 0
        });

        append(container, frame);
      },

      update: function(context) {
        var frame = context.frame,
            bbox = context.bbox;

        attr(frame, {
          x: bbox.x,
          y: bbox.y,
          width: bbox.width,
          height: bbox.height
        });
      },

      remove: function(context) {

        if (context.frame) {
          remove$1(context.frame);
        }
      }
    };

    toolManager.registerTool('lasso', {
      tool: 'lasso.selection',
      dragging: 'lasso'
    });

    eventBus.on('lasso.selection.end', function(event) {
      var target = event.originalEvent.target;

      // only reactive on diagram click
      // on some occasions, event.hover is not set and we have to check if the target is an svg
      if (!event.hover && !(target instanceof SVGElement)) {
        return;
      }

      eventBus.once('lasso.selection.ended', function() {
        self.activateLasso(event.originalEvent, true);
      });
    });

    // lasso interaction implementation

    eventBus.on('lasso.end', function(event) {

      var bbox = toBBox(event);

      var elements = elementRegistry.filter(function(element) {
        return element;
      });

      self.select(elements, bbox);
    });

    eventBus.on('lasso.start', function(event) {

      var context = event.context;

      context.bbox = toBBox(event);
      visuals.create(context);
    });

    eventBus.on('lasso.move', function(event) {

      var context = event.context;

      context.bbox = toBBox(event);
      visuals.update(context);
    });

    eventBus.on('lasso.cleanup', function(event) {

      var context = event.context;

      visuals.remove(context);
    });


    // event integration

    eventBus.on('element.mousedown', 1500, function(event) {

      if (!hasSecondaryModifier(event)) {
        return;
      }

      self.activateLasso(event.originalEvent);

      // we've handled the event
      return true;
    });
  }

  LassoTool.$inject = [
    'eventBus',
    'canvas',
    'dragging',
    'elementRegistry',
    'selection',
    'toolManager',
    'mouse'
  ];


  LassoTool.prototype.activateLasso = function(event, autoActivate) {

    this._dragging.init(event, 'lasso', {
      autoActivate: autoActivate,
      cursor: LASSO_TOOL_CURSOR,
      data: {
        context: {}
      }
    });
  };

  LassoTool.prototype.activateSelection = function(event, autoActivate) {

    this._dragging.init(event, 'lasso.selection', {
      trapClick: false,
      autoActivate: autoActivate,
      cursor: LASSO_TOOL_CURSOR,
      data: {
        context: {}
      }
    });
  };

  LassoTool.prototype.select = function(elements, bbox) {
    var selectedElements = getEnclosedElements(elements, bbox);

    this._selection.select(values(selectedElements));
  };

  LassoTool.prototype.toggle = function() {
    if (this.isActive()) {
      return this._dragging.cancel();
    }

    var mouseEvent = this._mouse.getLastMoveEvent();

    this.activateSelection(mouseEvent, !!mouseEvent);
  };

  LassoTool.prototype.isActive = function() {
    var context = this._dragging.context();

    return context && /^lasso/.test(context.prefix);
  };



  function toBBox(event) {

    var start = {

      x: event.x - event.dx,
      y: event.y - event.dy
    };

    var end = {
      x: event.x,
      y: event.y
    };

    var bbox;

    if ((start.x <= end.x && start.y < end.y) ||
        (start.x < end.x && start.y <= end.y)) {

      bbox = {
        x: start.x,
        y: start.y,
        width:  end.x - start.x,
        height: end.y - start.y
      };
    } else if ((start.x >= end.x && start.y < end.y) ||
               (start.x > end.x && start.y <= end.y)) {

      bbox = {
        x: end.x,
        y: start.y,
        width:  start.x - end.x,
        height: end.y - start.y
      };
    } else if ((start.x <= end.x && start.y > end.y) ||
               (start.x < end.x && start.y >= end.y)) {

      bbox = {
        x: start.x,
        y: end.y,
        width:  end.x - start.x,
        height: start.y - end.y
      };
    } else if ((start.x >= end.x && start.y > end.y) ||
               (start.x > end.x && start.y >= end.y)) {

      bbox = {
        x: end.x,
        y: end.y,
        width:  start.x - end.x,
        height: start.y - end.y
      };
    } else {

      bbox = {
        x: end.x,
        y: end.y,
        width:  0,
        height: 0
      };
    }
    return bbox;
  }

  var LassoToolModule = {
    __depends__: [
      ToolManagerModule,
      MouseModule
    ],
    __init__: [ 'lassoTool' ],
    lassoTool: [ 'type', LassoTool ]
  };

  var HIGH_PRIORITY$1 = 1500;
  var HAND_CURSOR = 'grab';


  function HandTool(
      eventBus, canvas, dragging,
      injector, toolManager, mouse) {

    this._dragging = dragging;
    this._mouse = mouse;

    var self = this,
        keyboard = injector.get('keyboard', false);

    toolManager.registerTool('hand', {
      tool: 'hand',
      dragging: 'hand.move'
    });

    eventBus.on('element.mousedown', HIGH_PRIORITY$1, function(event) {

      if (!hasPrimaryModifier(event)) {
        return;
      }

      self.activateMove(event.originalEvent, true);

      return false;
    });

    keyboard && keyboard.addListener(HIGH_PRIORITY$1, function(e) {
      if (!isSpace(e.keyEvent) || self.isActive()) {
        return;
      }

      var mouseEvent = self._mouse.getLastMoveEvent();

      self.activateMove(mouseEvent, !!mouseEvent);
    }, 'keyboard.keydown');

    keyboard && keyboard.addListener(HIGH_PRIORITY$1, function(e) {
      if (!isSpace(e.keyEvent) || !self.isActive()) {
        return;
      }

      self.toggle();
    }, 'keyboard.keyup');

    eventBus.on('hand.end', function(event) {
      var target = event.originalEvent.target;

      // only reactive on diagram click
      // on some occasions, event.hover is not set and we have to check if the target is an svg
      if (!event.hover && !(target instanceof SVGElement)) {
        return false;
      }

      eventBus.once('hand.ended', function() {
        self.activateMove(event.originalEvent, { reactivate: true });
      });

    });

    eventBus.on('hand.move.move', function(event) {
      var scale = canvas.viewbox().scale;

      canvas.scroll({
        dx: event.dx * scale,
        dy: event.dy * scale
      });
    });

    eventBus.on('hand.move.end', function(event) {
      var context = event.context,
          reactivate = context.reactivate;

      // Don't reactivate if the user is using the keyboard keybinding
      if (!hasPrimaryModifier(event) && reactivate) {

        eventBus.once('hand.move.ended', function(event) {
          self.activateHand(event.originalEvent, true, true);
        });

      }

      return false;
    });

  }

  HandTool.$inject = [
    'eventBus',
    'canvas',
    'dragging',
    'injector',
    'toolManager',
    'mouse'
  ];


  HandTool.prototype.activateMove = function(event, autoActivate, context) {
    if (typeof autoActivate === 'object') {
      context = autoActivate;
      autoActivate = false;
    }

    this._dragging.init(event, 'hand.move', {
      autoActivate: autoActivate,
      cursor: HAND_CURSOR,
      data: {
        context: context || {}
      }
    });
  };

  HandTool.prototype.activateHand = function(event, autoActivate, reactivate) {
    this._dragging.init(event, 'hand', {
      trapClick: false,
      autoActivate: autoActivate,
      cursor: HAND_CURSOR,
      data: {
        context: {
          reactivate: reactivate
        }
      }
    });
  };

  HandTool.prototype.toggle = function() {
    if (this.isActive()) {
      return this._dragging.cancel();
    }

    var mouseEvent = this._mouse.getLastMoveEvent();

    this.activateHand(mouseEvent, !!mouseEvent);
  };

  HandTool.prototype.isActive = function() {
    var context = this._dragging.context();

    if (context) {
      return /^(hand|hand\.move)$/.test(context.prefix);
    }

    return false;
  };

  // helpers //////////

  function isSpace(keyEvent) {
    return isKey(' ', keyEvent);
  }

  var HandToolModule = {
    __depends__: [
      ToolManagerModule,
      MouseModule
    ],
    __init__: [ 'handTool' ],
    handTool: [ 'type', HandTool ]
  };

  var MARKER_OK = 'connect-ok',
      MARKER_NOT_OK = 'connect-not-ok';

  /**
   * @class
   * @constructor
   *
   * @param {EventBus} eventBus
   * @param {Dragging} dragging
   * @param {Connect} connect
   * @param {Canvas} canvas
   * @param {ToolManager} toolManager
   * @param {Rules} rules
   * @param {Mouse} mouse
   */
  function GlobalConnect(
      eventBus, dragging, connect,
      canvas, toolManager, rules,
      mouse) {

    var self = this;

    this._dragging = dragging;
    this._rules = rules;
    this._mouse = mouse;

    toolManager.registerTool('global-connect', {
      tool: 'global-connect',
      dragging: 'global-connect.drag'
    });

    eventBus.on('global-connect.hover', function(event) {
      var context = event.context,
          startTarget = event.hover;

      var canStartConnect = context.canStartConnect = self.canStartConnect(startTarget);

      // simply ignore hover
      if (canStartConnect === null) {
        return;
      }

      context.startTarget = startTarget;

      canvas.addMarker(startTarget, canStartConnect ? MARKER_OK : MARKER_NOT_OK);
    });


    eventBus.on([ 'global-connect.out', 'global-connect.cleanup' ], function(event) {
      var startTarget = event.context.startTarget,
          canStartConnect = event.context.canStartConnect;

      if (startTarget) {
        canvas.removeMarker(startTarget, canStartConnect ? MARKER_OK : MARKER_NOT_OK);
      }
    });


    eventBus.on([ 'global-connect.ended' ], function(event) {
      var context = event.context,
          startTarget = context.startTarget,
          startPosition = {
            x: event.x,
            y: event.y
          };

      var canStartConnect = self.canStartConnect(startTarget);

      if (!canStartConnect) {
        return;
      }

      eventBus.once('element.out', function() {
        eventBus.once([ 'connect.ended', 'connect.canceled' ], function() {
          eventBus.fire('global-connect.drag.ended');
        });

        connect.start(null, startTarget, startPosition);
      });

      return false;
    });
  }

  GlobalConnect.$inject = [
    'eventBus',
    'dragging',
    'connect',
    'canvas',
    'toolManager',
    'rules',
    'mouse'
  ];

  /**
   * Initiates tool activity.
   */
  GlobalConnect.prototype.start = function(event, autoActivate) {
    this._dragging.init(event, 'global-connect', {
      autoActivate: autoActivate,
      trapClick: false,
      data: {
        context: {}
      }
    });
  };

  GlobalConnect.prototype.toggle = function() {

    if (this.isActive()) {
      return this._dragging.cancel();
    }

    var mouseEvent = this._mouse.getLastMoveEvent();

    return this.start(mouseEvent, !!mouseEvent);
  };

  GlobalConnect.prototype.isActive = function() {
    var context = this._dragging.context();

    return context && /^global-connect/.test(context.prefix);
  };

  /**
   * Check if source shape can initiate connection.
   *
   * @param  {Shape} startTarget
   * @return {boolean}
   */
  GlobalConnect.prototype.canStartConnect = function(startTarget) {
    return this._rules.allowed('connection.start', { source: startTarget });
  };

  var GlobalConnectModule = {
    __depends__: [
      ConnectModule,
      RulesModule$1,
      DraggingModule,
      ToolManagerModule,
      MouseModule
    ],
    globalConnect: [ 'type', GlobalConnect ]
  };

  /**
   * A palette provider for BPMN 2.0 elements.
   */
  function PaletteProvider(
      palette, create, elementFactory,
      spaceTool, lassoTool, handTool,
      globalConnect, translate) {

    this._palette = palette;
    this._create = create;
    this._elementFactory = elementFactory;
    this._spaceTool = spaceTool;
    this._lassoTool = lassoTool;
    this._handTool = handTool;
    this._globalConnect = globalConnect;
    this._translate = translate;

    palette.registerProvider(this);
  }

  PaletteProvider.$inject = [
    'palette',
    'create',
    'elementFactory',
    'spaceTool',
    'lassoTool',
    'handTool',
    'globalConnect',
    'translate'
  ];


  PaletteProvider.prototype.getPaletteEntries = function(element) {

    var actions = {},
        create = this._create,
        elementFactory = this._elementFactory,
        spaceTool = this._spaceTool,
        lassoTool = this._lassoTool,
        handTool = this._handTool,
        globalConnect = this._globalConnect,
        translate = this._translate;

    function createAction(type, group, className, title, options) {

      function createListener(event) {
        var shape = elementFactory.createShape(assign({ type: type }, options));

        if (options) {
          var di = getDi(shape);
          di.isExpanded = options.isExpanded;
        }

        create.start(event, shape);
      }

      var shortType = type.replace(/^bpmn:/, '');

      return {
        group: group,
        className: className,
        title: title || translate('Create {type}', { type: shortType }),
        action: {
          dragstart: createListener,
          click: createListener
        }
      };
    }

    function createSubprocess(event) {
      var subProcess = elementFactory.createShape({
        type: 'bpmn:SubProcess',
        x: 0,
        y: 0,
        isExpanded: true
      });

      var startEvent = elementFactory.createShape({
        type: 'bpmn:StartEvent',
        x: 40,
        y: 82,
        parent: subProcess
      });

      create.start(event, [ subProcess, startEvent ], {
        hints: {
          autoSelect: [ subProcess ]
        }
      });
    }

    function createParticipant(event) {
      create.start(event, elementFactory.createParticipantShape());
    }

    assign(actions, {
      'hand-tool': {
        group: 'tools',
        className: 'bpmn-icon-hand-tool',
        title: translate('Activate the hand tool'),
        action: {
          click: function(event) {
            handTool.activateHand(event);
          }
        }
      },
      'lasso-tool': {
        group: 'tools',
        className: 'bpmn-icon-lasso-tool',
        title: translate('Activate the lasso tool'),
        action: {
          click: function(event) {
            lassoTool.activateSelection(event);
          }
        }
      },
      'space-tool': {
        group: 'tools',
        className: 'bpmn-icon-space-tool',
        title: translate('Activate the create/remove space tool'),
        action: {
          click: function(event) {
            spaceTool.activateSelection(event);
          }
        }
      },
      'global-connect-tool': {
        group: 'tools',
        className: 'bpmn-icon-connection-multi',
        title: translate('Activate the global connect tool'),
        action: {
          click: function(event) {
            globalConnect.start(event);
          }
        }
      },
      'tool-separator': {
        group: 'tools',
        separator: true
      },
      'create.start-event': createAction(
        'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none',
        translate('Create StartEvent')
      ),
      'create.intermediate-event': createAction(
        'bpmn:IntermediateThrowEvent', 'event', 'bpmn-icon-intermediate-event-none',
        translate('Create Intermediate/Boundary Event')
      ),
      'create.end-event': createAction(
        'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none',
        translate('Create EndEvent')
      ),
      'create.exclusive-gateway': createAction(
        'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
        translate('Create Gateway')
      ),
      'create.task': createAction(
        'bpmn:Task', 'activity', 'bpmn-icon-task',
        translate('Create Task')
      ),
      'create.data-object': createAction(
        'bpmn:DataObjectReference', 'data-object', 'bpmn-icon-data-object',
        translate('Create DataObjectReference')
      ),
      'create.data-store': createAction(
        'bpmn:DataStoreReference', 'data-store', 'bpmn-icon-data-store',
        translate('Create DataStoreReference')
      ),
      'create.subprocess-expanded': {
        group: 'activity',
        className: 'bpmn-icon-subprocess-expanded',
        title: translate('Create expanded SubProcess'),
        action: {
          dragstart: createSubprocess,
          click: createSubprocess
        }
      },
      'create.participant-expanded': {
        group: 'collaboration',
        className: 'bpmn-icon-participant',
        title: translate('Create Pool/Participant'),
        action: {
          dragstart: createParticipant,
          click: createParticipant
        }
      },
      'create.group': createAction(
        'bpmn:Group', 'artifact', 'bpmn-icon-group',
        translate('Create Group')
      ),
    });

    return actions;
  };

  var PaletteModule = {
    __depends__: [
      PaletteModule$1,
      CreateModule,
      SpaceToolModule,
      LassoToolModule,
      HandToolModule,
      GlobalConnectModule,
      translate
    ],
    __init__: [ 'paletteProvider' ],
    paletteProvider: [ 'type', PaletteProvider ]
  };

  var LOW_PRIORITY = 250;


  function BpmnReplacePreview(
      eventBus, elementRegistry, elementFactory,
      canvas, previewSupport) {

    CommandInterceptor.call(this, eventBus);

    /**
     * Replace the visuals of all elements in the context which can be replaced
     *
     * @param  {Object} context
     */
    function replaceVisual(context) {

      var replacements = context.canExecute.replacements;

      forEach$1(replacements, function(replacement) {

        var id = replacement.oldElementId;

        var newElement = {
          type: replacement.newElementType
        };

        // if the visual of the element is already replaced
        if (context.visualReplacements[id]) {
          return;
        }

        var element = elementRegistry.get(id);

        assign(newElement, { x: element.x, y: element.y });

        // create a temporary shape
        var tempShape = elementFactory.createShape(newElement);

        canvas.addShape(tempShape, element.parent);

        // select the original SVG element related to the element and hide it
        var gfx = query('[data-element-id="' + cssEscape(element.id) + '"]', context.dragGroup);

        if (gfx) {
          attr(gfx, { display: 'none' });
        }

        // clone the gfx of the temporary shape and add it to the drag group
        var dragger = previewSupport.addDragger(tempShape, context.dragGroup);

        context.visualReplacements[id] = dragger;

        canvas.removeShape(tempShape);
      });
    }

    /**
     * Restore the original visuals of the previously replaced elements
     *
     * @param  {Object} context
     */
    function restoreVisual(context) {

      var visualReplacements = context.visualReplacements;

      forEach$1(visualReplacements, function(dragger, id) {

        var originalGfx = query('[data-element-id="' + cssEscape(id) + '"]', context.dragGroup);

        if (originalGfx) {
          attr(originalGfx, { display: 'inline' });
        }

        dragger.remove();

        if (visualReplacements[id]) {
          delete visualReplacements[id];
        }
      });
    }

    eventBus.on('shape.move.move', LOW_PRIORITY, function(event) {

      var context = event.context,
          canExecute = context.canExecute;

      if (!context.visualReplacements) {
        context.visualReplacements = {};
      }

      if (canExecute && canExecute.replacements) {
        replaceVisual(context);
      } else {
        restoreVisual(context);
      }
    });
  }

  BpmnReplacePreview.$inject = [
    'eventBus',
    'elementRegistry',
    'elementFactory',
    'canvas',
    'previewSupport'
  ];

  e(BpmnReplacePreview, CommandInterceptor);

  var ReplacePreviewModule = {
    __depends__: [
      PreviewSupportModule
    ],
    __init__: [ 'bpmnReplacePreview' ],
    bpmnReplacePreview: [ 'type', BpmnReplacePreview ]
  };

  var HIGHER_PRIORITY$2 = 1250;

  var BOUNDARY_TO_HOST_THRESHOLD = 40;

  var TARGET_BOUNDS_PADDING = 20,
      TASK_BOUNDS_PADDING = 10;

  var TARGET_CENTER_PADDING = 20;

  var AXES = [ 'x', 'y' ];

  var abs = Math.abs;

  /**
   * Snap during connect.
   *
   * @param {EventBus} eventBus
   */
  function BpmnConnectSnapping(eventBus) {
    eventBus.on([
      'connect.hover',
      'connect.move',
      'connect.end',
    ], HIGHER_PRIORITY$2, function(event) {
      var context = event.context,
          canExecute = context.canExecute,
          start = context.start,
          hover = context.hover,
          source = context.source,
          target = context.target;

      // do NOT snap on CMD
      if (event.originalEvent && isCmd(event.originalEvent)) {
        return;
      }

      if (!context.initialConnectionStart) {
        context.initialConnectionStart = context.connectionStart;
      }

      // snap hover
      if (canExecute && hover) {
        snapToShape(event, hover, getTargetBoundsPadding(hover));
      }

      if (hover && isAnyType(canExecute, [
        'bpmn:Association',
        'bpmn:DataInputAssociation',
        'bpmn:DataOutputAssociation',
        'bpmn:SequenceFlow'
      ])) {
        context.connectionStart = mid$2(start);

        // snap hover
        if (isAny(hover, [ 'bpmn:Event', 'bpmn:Gateway' ])) {
          snapToPosition(event, mid$2(hover));
        }

        // snap hover
        if (isAny(hover, [ 'bpmn:Task', 'bpmn:SubProcess' ])) {
          snapToTargetMid(event, hover);
        }

        // snap source and target
        if (is$1(source, 'bpmn:BoundaryEvent') && target === source.host) {
          snapBoundaryEventLoop(event);
        }

      } else if (isType(canExecute, 'bpmn:MessageFlow')) {

        if (is$1(start, 'bpmn:Event')) {

          // snap start
          context.connectionStart = mid$2(start);
        }

        if (is$1(hover, 'bpmn:Event')) {

          // snap hover
          snapToPosition(event, mid$2(hover));
        }

      } else {

        // un-snap source
        context.connectionStart = context.initialConnectionStart;
      }
    });
  }

  BpmnConnectSnapping.$inject = [ 'eventBus' ];


  // helpers //////////

  // snap to target if event in target
  function snapToShape(event, target, padding) {
    AXES.forEach(function(axis) {
      var dimensionForAxis = getDimensionForAxis(axis, target);

      if (event[ axis ] < target[ axis ] + padding) {
        setSnapped(event, axis, target[ axis ] + padding);
      } else if (event[ axis ] > target[ axis ] + dimensionForAxis - padding) {
        setSnapped(event, axis, target[ axis ] + dimensionForAxis - padding);
      }
    });
  }

  // snap to target mid if event in target mid
  function snapToTargetMid(event, target) {
    var targetMid = mid$2(target);

    AXES.forEach(function(axis) {
      if (isMid(event, target, axis)) {
        setSnapped(event, axis, targetMid[ axis ]);
      }
    });
  }

  // snap to prevent loop overlapping boundary event
  function snapBoundaryEventLoop(event) {
    var context = event.context,
        source = context.source,
        target = context.target;

    if (isReverse(context)) {
      return;
    }

    var sourceMid = mid$2(source),
        orientation = getOrientation(sourceMid, target, -10),
        axes = [];

    if (/top|bottom/.test(orientation)) {
      axes.push('x');
    }

    if (/left|right/.test(orientation)) {
      axes.push('y');
    }

    axes.forEach(function(axis) {
      var coordinate = event[ axis ], newCoordinate;

      if (abs(coordinate - sourceMid[ axis ]) < BOUNDARY_TO_HOST_THRESHOLD) {
        if (coordinate > sourceMid[ axis ]) {
          newCoordinate = sourceMid[ axis ] + BOUNDARY_TO_HOST_THRESHOLD;
        }
        else {
          newCoordinate = sourceMid[ axis ] - BOUNDARY_TO_HOST_THRESHOLD;
        }

        setSnapped(event, axis, newCoordinate);
      }
    });
  }

  function snapToPosition(event, position) {
    setSnapped(event, 'x', position.x);
    setSnapped(event, 'y', position.y);
  }

  function isType(attrs, type) {
    return attrs && attrs.type === type;
  }

  function isAnyType(attrs, types) {
    return some(types, function(type) {
      return isType(attrs, type);
    });
  }

  function getDimensionForAxis(axis, element) {
    return axis === 'x' ? element.width : element.height;
  }

  function getTargetBoundsPadding(target) {
    if (is$1(target, 'bpmn:Task')) {
      return TASK_BOUNDS_PADDING;
    } else {
      return TARGET_BOUNDS_PADDING;
    }
  }

  function isMid(event, target, axis) {
    return event[ axis ] > target[ axis ] + TARGET_CENTER_PADDING
      && event[ axis ] < target[ axis ] + getDimensionForAxis(axis, target) - TARGET_CENTER_PADDING;
  }

  function isReverse(context) {
    var hover = context.hover,
        source = context.source;

    return hover && source && hover === source;
  }

  /**
   * A snap context, containing the (possibly incomplete)
   * mappings of drop targets (to identify the snapping)
   * to computed snap points.
   */
  function SnapContext() {

    /**
     * Map<String, SnapPoints> mapping drop targets to
     * a list of possible snappings.
     *
     * @type {Object}
     */
    this._targets = {};

    /**
     * Map<String, Point> initial positioning of element
     * regarding various snap directions.
     *
     * @type {Object}
     */
    this._snapOrigins = {};

    /**
     * List of snap locations
     *
     * @type {Array<string>}
     */
    this._snapLocations = [];

    /**
     * Map<String, Array<Point>> of default snapping locations
     *
     * @type {Object}
     */
    this._defaultSnaps = {};
  }


  SnapContext.prototype.getSnapOrigin = function(snapLocation) {
    return this._snapOrigins[snapLocation];
  };


  SnapContext.prototype.setSnapOrigin = function(snapLocation, initialValue) {
    this._snapOrigins[snapLocation] = initialValue;

    if (this._snapLocations.indexOf(snapLocation) === -1) {
      this._snapLocations.push(snapLocation);
    }
  };


  SnapContext.prototype.addDefaultSnap = function(type, point) {

    var snapValues = this._defaultSnaps[type];

    if (!snapValues) {
      snapValues = this._defaultSnaps[type] = [];
    }

    snapValues.push(point);
  };

  /**
   * Return a number of initialized snaps, i.e. snap locations such as
   * top-left, mid, bottom-right and so forth.
   *
   * @return {Array<string>} snapLocations
   */
  SnapContext.prototype.getSnapLocations = function() {
    return this._snapLocations;
  };

  /**
   * Set the snap locations for this context.
   *
   * The order of locations determines precedence.
   *
   * @param {Array<string>} snapLocations
   */
  SnapContext.prototype.setSnapLocations = function(snapLocations) {
    this._snapLocations = snapLocations;
  };

  /**
   * Get snap points for a given target
   *
   * @param {Element|string} target
   */
  SnapContext.prototype.pointsForTarget = function(target) {

    var targetId = target.id || target;

    var snapPoints = this._targets[targetId];

    if (!snapPoints) {
      snapPoints = this._targets[targetId] = new SnapPoints();
      snapPoints.initDefaults(this._defaultSnaps);
    }

    return snapPoints;
  };


  /**
   * Creates the snap points and initializes them with the
   * given default values.
   *
   * @param {Object<string, Array<Point>>} [defaultPoints]
   */
  function SnapPoints(defaultSnaps) {

    /**
     * Map<String, Map<(x|y), Array<number>>> mapping snap locations,
     * i.e. top-left, bottom-right, center to actual snap values.
     *
     * @type {Object}
     */
    this._snapValues = {};
  }

  SnapPoints.prototype.add = function(snapLocation, point) {

    var snapValues = this._snapValues[snapLocation];

    if (!snapValues) {
      snapValues = this._snapValues[snapLocation] = { x: [], y: [] };
    }

    if (snapValues.x.indexOf(point.x) === -1) {
      snapValues.x.push(point.x);
    }

    if (snapValues.y.indexOf(point.y) === -1) {
      snapValues.y.push(point.y);
    }
  };


  SnapPoints.prototype.snap = function(point, snapLocation, axis, tolerance) {
    var snappingValues = this._snapValues[snapLocation];

    return snappingValues && snapTo(point[axis], snappingValues[axis], tolerance);
  };

  /**
   * Initialize a number of default snapping points.
   *
   * @param  {Object} defaultSnaps
   */
  SnapPoints.prototype.initDefaults = function(defaultSnaps) {

    var self = this;

    forEach$1(defaultSnaps || {}, function(snapPoints, snapLocation) {
      forEach$1(snapPoints, function(point) {
        self.add(snapLocation, point);
      });
    });
  };

  var HIGHER_PRIORITY$1 = 1250;


  /**
   * Snap during create and move.
   *
   * @param {EventBus} elementRegistry
   * @param {EventBus} eventBus
   * @param {Snapping} snapping
   */
  function CreateMoveSnapping(elementRegistry, eventBus, snapping) {
    var self = this;

    this._elementRegistry = elementRegistry;

    eventBus.on([
      'create.start',
      'shape.move.start'
    ], function(event) {
      self.initSnap(event);
    });

    eventBus.on([
      'create.move',
      'create.end',
      'shape.move.move',
      'shape.move.end'
    ], HIGHER_PRIORITY$1, function(event) {
      var context = event.context,
          shape = context.shape,
          snapContext = context.snapContext,
          target = context.target;

      if (event.originalEvent && isCmd(event.originalEvent)) {
        return;
      }

      if (isSnapped(event) || !target) {
        return;
      }

      var snapPoints = snapContext.pointsForTarget(target);

      if (!snapPoints.initialized) {
        snapPoints = self.addSnapTargetPoints(snapPoints, shape, target);

        snapPoints.initialized = true;
      }

      snapping.snap(event, snapPoints);
    });

    eventBus.on([
      'create.cleanup',
      'shape.move.cleanup'
    ], function() {
      snapping.hide();
    });
  }

  CreateMoveSnapping.$inject = [
    'elementRegistry',
    'eventBus',
    'snapping'
  ];

  CreateMoveSnapping.prototype.initSnap = function(event) {
    var elementRegistry = this._elementRegistry;

    var context = event.context,
        shape = context.shape,
        snapContext = context.snapContext;

    if (!snapContext) {
      snapContext = context.snapContext = new SnapContext();
    }

    var shapeMid;

    if (elementRegistry.get(shape.id)) {

      // move
      shapeMid = mid$2(shape, event);
    } else {

      // create
      shapeMid = {
        x: event.x + mid$2(shape).x,
        y: event.y + mid$2(shape).y
      };
    }

    var shapeTopLeft = {
          x: shapeMid.x - shape.width / 2,
          y: shapeMid.y - shape.height / 2
        },
        shapeBottomRight = {
          x: shapeMid.x + shape.width / 2,
          y: shapeMid.y + shape.height / 2
        };

    snapContext.setSnapOrigin('mid', {
      x: shapeMid.x - event.x,
      y: shapeMid.y - event.y
    });

    // snap labels to mid only
    if (isLabel$1(shape)) {
      return snapContext;
    }

    snapContext.setSnapOrigin('top-left', {
      x: shapeTopLeft.x - event.x,
      y: shapeTopLeft.y - event.y
    });

    snapContext.setSnapOrigin('bottom-right', {
      x: shapeBottomRight.x - event.x,
      y: shapeBottomRight.y - event.y
    });

    return snapContext;
  };

  CreateMoveSnapping.prototype.addSnapTargetPoints = function(snapPoints, shape, target) {
    var snapTargets = this.getSnapTargets(shape, target);

    forEach$1(snapTargets, function(snapTarget) {

      // handle labels
      if (isLabel$1(snapTarget)) {

        if (isLabel$1(shape)) {
          snapPoints.add('mid', mid$2(snapTarget));
        }

        return;
      }

      // handle connections
      if (isConnection$1(snapTarget)) {

        // ignore single segment connections
        if (snapTarget.waypoints.length < 3) {
          return;
        }

        // ignore first and last waypoint
        var waypoints = snapTarget.waypoints.slice(1, -1);

        forEach$1(waypoints, function(waypoint) {
          snapPoints.add('mid', waypoint);
        });

        return;
      }

      // handle shapes
      snapPoints.add('mid', mid$2(snapTarget));
    });

    if (!isNumber(shape.x) || !isNumber(shape.y)) {
      return snapPoints;
    }

    // snap to original position when moving
    if (this._elementRegistry.get(shape.id)) {
      snapPoints.add('mid', mid$2(shape));
    }

    return snapPoints;
  };

  CreateMoveSnapping.prototype.getSnapTargets = function(shape, target) {
    return getChildren(target).filter(function(child) {
      return !isHidden$1(child);
    });
  };

  // helpers //////////

  function isConnection$1(element) {
    return !!element.waypoints;
  }

  function isHidden$1(element) {
    return !!element.hidden;
  }

  function isLabel$1(element) {
    return !!element.labelTarget;
  }

  var HIGH_PRIORITY = 1500;


  /**
   * Snap during create and move.
   *
   * @param {EventBus} eventBus
   * @param {Injector} injector
   */
  function BpmnCreateMoveSnapping(eventBus, injector) {
    injector.invoke(CreateMoveSnapping, this);

    // creating first participant
    eventBus.on([ 'create.move', 'create.end' ], HIGH_PRIORITY, setSnappedIfConstrained);

    // snap boundary events
    eventBus.on([
      'create.move',
      'create.end',
      'shape.move.move',
      'shape.move.end'
    ], HIGH_PRIORITY, function(event) {
      var context = event.context,
          canExecute = context.canExecute,
          target = context.target;

      var canAttach = canExecute && (canExecute === 'attach' || canExecute.attach);

      if (canAttach && !isSnapped(event)) {
        snapBoundaryEvent(event, target);
      }
    });
  }

  e(BpmnCreateMoveSnapping, CreateMoveSnapping);

  BpmnCreateMoveSnapping.$inject = [
    'eventBus',
    'injector'
  ];

  BpmnCreateMoveSnapping.prototype.initSnap = function(event) {
    var snapContext = CreateMoveSnapping.prototype.initSnap.call(this, event);

    var shape = event.shape;

    var isMove = !!this._elementRegistry.get(shape.id);

    // snap to docking points
    forEach$1(shape.outgoing, function(connection) {
      var docking = connection.waypoints[0];

      docking = docking.original || docking;

      snapContext.setSnapOrigin(connection.id + '-docking', getDockingSnapOrigin(docking, isMove, event));
    });

    forEach$1(shape.incoming, function(connection) {
      var docking = connection.waypoints[connection.waypoints.length - 1];

      docking = docking.original || docking;

      snapContext.setSnapOrigin(connection.id + '-docking', getDockingSnapOrigin(docking, isMove, event));
    });

    if (is$1(shape, 'bpmn:Participant')) {

      // snap to borders with higher priority
      snapContext.setSnapLocations([ 'top-left', 'bottom-right', 'mid' ]);
    }

    return snapContext;
  };

  BpmnCreateMoveSnapping.prototype.addSnapTargetPoints = function(snapPoints, shape, target) {
    CreateMoveSnapping.prototype.addSnapTargetPoints.call(this, snapPoints, shape, target);

    var snapTargets = this.getSnapTargets(shape, target);

    forEach$1(snapTargets, function(snapTarget) {

      // handle TRBL alignment
      //
      // * with container elements
      // * with text annotations
      if (isContainer(snapTarget) || areAll([ shape, snapTarget ], 'bpmn:TextAnnotation')) {
        snapPoints.add('top-left', topLeft(snapTarget));
        snapPoints.add('bottom-right', bottomRight(snapTarget));
      }
    });

    var elementRegistry = this._elementRegistry;

    // snap to docking points if not create mode
    forEach$1(shape.incoming, function(connection) {
      if (elementRegistry.get(shape.id)) {

        if (!includes(snapTargets, connection.source)) {
          snapPoints.add('mid', getMid(connection.source));
        }

        var docking = connection.waypoints[0];
        snapPoints.add(connection.id + '-docking', docking.original || docking);
      }
    });

    forEach$1(shape.outgoing, function(connection) {
      if (elementRegistry.get(shape.id)) {

        if (!includes(snapTargets, connection.target)) {
          snapPoints.add('mid', getMid(connection.target));
        }

        var docking = connection.waypoints[ connection.waypoints.length - 1 ];

        snapPoints.add(connection.id + '-docking', docking.original || docking);
      }
    });

    // add sequence flow parents as snap targets
    if (is$1(target, 'bpmn:SequenceFlow')) {
      snapPoints = this.addSnapTargetPoints(snapPoints, shape, target.parent);
    }

    return snapPoints;
  };

  BpmnCreateMoveSnapping.prototype.getSnapTargets = function(shape, target) {
    return CreateMoveSnapping.prototype.getSnapTargets.call(this, shape, target)
      .filter(function(snapTarget) {

        // do not snap to lanes
        return !is$1(snapTarget, 'bpmn:Lane');
      });
  };

  // helpers //////////

  function snapBoundaryEvent(event, target) {
    var targetTRBL = asTRBL(target);

    var direction = getBoundaryAttachment(event, target);

    var context = event.context,
        shape = context.shape;

    var offset;

    if (shape.parent) {
      offset = { x: 0, y: 0 };
    } else {
      offset = getMid(shape);
    }

    if (/top/.test(direction)) {
      setSnapped(event, 'y', targetTRBL.top - offset.y);
    } else if (/bottom/.test(direction)) {
      setSnapped(event, 'y', targetTRBL.bottom - offset.y);
    }

    if (/left/.test(direction)) {
      setSnapped(event, 'x', targetTRBL.left - offset.x);
    } else if (/right/.test(direction)) {
      setSnapped(event, 'x', targetTRBL.right - offset.x);
    }
  }

  function areAll(elements, type) {
    return elements.every(function(el) {
      return is$1(el, type);
    });
  }

  function isContainer(element) {
    if (is$1(element, 'bpmn:SubProcess') && isExpanded(element)) {
      return true;
    }

    return is$1(element, 'bpmn:Participant');
  }


  function setSnappedIfConstrained(event) {
    var context = event.context,
        createConstraints = context.createConstraints;

    if (!createConstraints) {
      return;
    }

    var top = createConstraints.top,
        right = createConstraints.right,
        bottom = createConstraints.bottom,
        left = createConstraints.left;

    if ((left && left >= event.x) || (right && right <= event.x)) {
      setSnapped(event, 'x', event.x);
    }

    if ((top && top >= event.y) || (bottom && bottom <= event.y)) {
      setSnapped(event, 'y', event.y);
    }
  }

  function includes(array, value) {
    return array.indexOf(value) !== -1;
  }

  function getDockingSnapOrigin(docking, isMove, event) {
    return isMove ? (
      {
        x: docking.x - event.x,
        y: docking.y - event.y
      }
    ) : {
      x: docking.x,
      y: docking.y
    };
  }

  var HIGHER_PRIORITY = 1250;


  /**
   * Snap during resize.
   *
   * @param {EventBus} eventBus
   * @param {Snapping} snapping
   */
  function ResizeSnapping(eventBus, snapping) {
    var self = this;

    eventBus.on([ 'resize.start' ], function(event) {
      self.initSnap(event);
    });

    eventBus.on([
      'resize.move',
      'resize.end',
    ], HIGHER_PRIORITY, function(event) {
      var context = event.context,
          shape = context.shape,
          parent = shape.parent,
          direction = context.direction,
          snapContext = context.snapContext;

      if (event.originalEvent && isCmd(event.originalEvent)) {
        return;
      }

      if (isSnapped(event)) {
        return;
      }

      var snapPoints = snapContext.pointsForTarget(parent);

      if (!snapPoints.initialized) {
        snapPoints = self.addSnapTargetPoints(snapPoints, shape, parent, direction);

        snapPoints.initialized = true;
      }

      if (isHorizontal(direction)) {
        setSnapped(event, 'x', event.x);
      }

      if (isVertical(direction)) {
        setSnapped(event, 'y', event.y);
      }

      snapping.snap(event, snapPoints);
    });

    eventBus.on([ 'resize.cleanup' ], function() {
      snapping.hide();
    });
  }

  ResizeSnapping.prototype.initSnap = function(event) {
    var context = event.context,
        shape = context.shape,
        direction = context.direction,
        snapContext = context.snapContext;

    if (!snapContext) {
      snapContext = context.snapContext = new SnapContext();
    }

    var snapOrigin = getSnapOrigin(shape, direction);

    snapContext.setSnapOrigin('corner', {
      x: snapOrigin.x - event.x,
      y: snapOrigin.y - event.y
    });

    return snapContext;
  };

  ResizeSnapping.prototype.addSnapTargetPoints = function(snapPoints, shape, target, direction) {
    var snapTargets = this.getSnapTargets(shape, target);

    forEach$1(snapTargets, function(snapTarget) {
      snapPoints.add('corner', bottomRight(snapTarget));
      snapPoints.add('corner', topLeft(snapTarget));
    });

    snapPoints.add('corner', getSnapOrigin(shape, direction));

    return snapPoints;
  };

  ResizeSnapping.$inject = [
    'eventBus',
    'snapping'
  ];

  ResizeSnapping.prototype.getSnapTargets = function(shape, target) {
    return getChildren(target).filter(function(child) {
      return !isAttached(child, shape)
        && !isConnection(child)
        && !isHidden(child)
        && !isLabel(child);
    });
  };

  // helpers //////////

  function getSnapOrigin(shape, direction) {
    var mid = getMid(shape),
        trbl = asTRBL(shape);

    var snapOrigin = {
      x: mid.x,
      y: mid.y
    };

    if (direction.indexOf('n') !== -1) {
      snapOrigin.y = trbl.top;
    } else if (direction.indexOf('s') !== -1) {
      snapOrigin.y = trbl.bottom;
    }

    if (direction.indexOf('e') !== -1) {
      snapOrigin.x = trbl.right;
    } else if (direction.indexOf('w') !== -1) {
      snapOrigin.x = trbl.left;
    }

    return snapOrigin;
  }

  function isAttached(element, host) {
    return element.host === host;
  }

  function isConnection(element) {
    return !!element.waypoints;
  }

  function isHidden(element) {
    return !!element.hidden;
  }

  function isLabel(element) {
    return !!element.labelTarget;
  }

  function isHorizontal(direction) {
    return direction === 'n' || direction === 's';
  }

  function isVertical(direction) {
    return direction === 'e' || direction === 'w';
  }

  var SNAP_TOLERANCE = 7;

  var SNAP_LINE_HIDE_DELAY = 1000;


  /**
   * Generic snapping feature.
   *
   * @param {EventBus} eventBus
   * @param {Canvas} canvas
   */
  function Snapping(canvas) {
    this._canvas = canvas;

    // delay hide by 1000 seconds since last snap
    this._asyncHide = debounce(bind(this.hide, this), SNAP_LINE_HIDE_DELAY);
  }

  Snapping.$inject = [ 'canvas' ];

  /**
   * Snap an event to given snap points.
   *
   * @param {Event} event
   * @param {SnapPoints} snapPoints
   */
  Snapping.prototype.snap = function(event, snapPoints) {
    var context = event.context,
        snapContext = context.snapContext,
        snapLocations = snapContext.getSnapLocations();

    var snapping = {
      x: isSnapped(event, 'x'),
      y: isSnapped(event, 'y')
    };

    forEach$1(snapLocations, function(location) {
      var snapOrigin = snapContext.getSnapOrigin(location);

      var snapCurrent = {
        x: event.x + snapOrigin.x,
        y: event.y + snapOrigin.y
      };

      // snap both axis if not snapped already
      forEach$1([ 'x', 'y' ], function(axis) {
        var locationSnapping;

        if (!snapping[axis]) {
          locationSnapping = snapPoints.snap(snapCurrent, location, axis, SNAP_TOLERANCE);

          if (locationSnapping !== undefined) {
            snapping[axis] = {
              value: locationSnapping,
              originValue: locationSnapping - snapOrigin[axis]
            };
          }
        }
      });

      // no need to continue snapping
      if (snapping.x && snapping.y) {
        return false;
      }
    });

    // show snap lines
    this.showSnapLine('vertical', snapping.x && snapping.x.value);
    this.showSnapLine('horizontal', snapping.y && snapping.y.value);

    // snap event
    forEach$1([ 'x', 'y' ], function(axis) {
      var axisSnapping = snapping[axis];

      if (isObject(axisSnapping)) {
        setSnapped(event, axis, axisSnapping.originValue);
      }
    });
  };

  Snapping.prototype._createLine = function(orientation) {
    var root = this._canvas.getLayer('snap');

    var line = create$1('path');

    attr(line, { d: 'M0,0 L0,0' });

    classes(line).add('djs-snap-line');

    append(root, line);

    return {
      update: function(position) {

        if (!isNumber(position)) {
          attr(line, { display: 'none' });
        } else {
          if (orientation === 'horizontal') {
            attr(line, {
              d: 'M-100000,' + position + ' L+100000,' + position,
              display: ''
            });
          } else {
            attr(line, {
              d: 'M ' + position + ',-100000 L ' + position + ', +100000',
              display: ''
            });
          }
        }
      }
    };
  };

  Snapping.prototype._createSnapLines = function() {
    this._snapLines = {
      horizontal: this._createLine('horizontal'),
      vertical: this._createLine('vertical')
    };
  };

  Snapping.prototype.showSnapLine = function(orientation, position) {

    var line = this.getSnapLine(orientation);

    if (line) {
      line.update(position);
    }

    this._asyncHide();
  };

  Snapping.prototype.getSnapLine = function(orientation) {
    if (!this._snapLines) {
      this._createSnapLines();
    }

    return this._snapLines[orientation];
  };

  Snapping.prototype.hide = function() {
    forEach$1(this._snapLines, function(snapLine) {
      snapLine.update();
    });
  };

  var SnappingModule$1 = {
    __init__: [
      'createMoveSnapping',
      'resizeSnapping',
      'snapping'
    ],
    createMoveSnapping: [ 'type', CreateMoveSnapping ],
    resizeSnapping: [ 'type', ResizeSnapping ],
    snapping: [ 'type', Snapping ]
  };

  var SnappingModule = {
    __depends__: [ SnappingModule$1 ],
    __init__: [
      'connectSnapping',
      'createMoveSnapping'
    ],
    connectSnapping: [ 'type', BpmnConnectSnapping ],
    createMoveSnapping: [ 'type', BpmnCreateMoveSnapping ]
  };

  /**
   * Provides searching infrastructure
   */
  function SearchPad(canvas, eventBus, overlays, selection) {
    this._open = false;
    this._results = [];
    this._eventMaps = [];

    this._canvas = canvas;
    this._eventBus = eventBus;
    this._overlays = overlays;
    this._selection = selection;

    // setup elements
    this._container = domify(SearchPad.BOX_HTML);
    this._searchInput = query(SearchPad.INPUT_SELECTOR, this._container);
    this._resultsContainer = query(SearchPad.RESULTS_CONTAINER_SELECTOR, this._container);

    // attach search pad
    this._canvas.getContainer().appendChild(this._container);

    // cleanup on destroy
    eventBus.on([ 'canvas.destroy', 'diagram.destroy' ], this.close, this);
  }


  SearchPad.$inject = [
    'canvas',
    'eventBus',
    'overlays',
    'selection'
  ];


  /**
   * Binds and keeps track of all event listereners
   */
  SearchPad.prototype._bindEvents = function() {
    var self = this;

    function listen(el, selector, type, fn) {
      self._eventMaps.push({
        el: el,
        type: type,
        listener: delegate.bind(el, selector, type, fn)
      });
    }

    // close search on clicking anywhere outside
    listen(document, 'html', 'click', function(e) {
      self.close();
    });

    // stop event from propagating and closing search
    // focus on input
    listen(this._container, SearchPad.INPUT_SELECTOR, 'click', function(e) {
      e.stopPropagation();
      e.delegateTarget.focus();
    });

    // preselect result on hover
    listen(this._container, SearchPad.RESULT_SELECTOR, 'mouseover', function(e) {
      e.stopPropagation();
      self._scrollToNode(e.delegateTarget);
      self._preselect(e.delegateTarget);
    });

    // selects desired result on mouse click
    listen(this._container, SearchPad.RESULT_SELECTOR, 'click', function(e) {
      e.stopPropagation();
      self._select(e.delegateTarget);
    });

    // prevent cursor in input from going left and right when using up/down to
    // navigate results
    listen(this._container, SearchPad.INPUT_SELECTOR, 'keydown', function(e) {

      // up
      if (e.keyCode === 38) {
        e.preventDefault();
      }

      // down
      if (e.keyCode === 40) {
        e.preventDefault();
      }
    });

    // handle keyboard input
    listen(this._container, SearchPad.INPUT_SELECTOR, 'keyup', function(e) {

      // escape
      if (e.keyCode === 27) {
        return self.close();
      }

      // enter
      if (e.keyCode === 13) {
        var selected = self._getCurrentResult();

        return selected ? self._select(selected) : self.close();
      }

      // up
      if (e.keyCode === 38) {
        return self._scrollToDirection(true);
      }

      // down
      if (e.keyCode === 40) {
        return self._scrollToDirection();
      }

      // left && right
      // do not search while navigating text input
      if (e.keyCode === 37 || e.keyCode === 39) {
        return;
      }

      // anything else
      self._search(e.delegateTarget.value);
    });
  };


  /**
   * Unbinds all previously established listeners
   */
  SearchPad.prototype._unbindEvents = function() {
    this._eventMaps.forEach(function(m) {
      delegate.unbind(m.el, m.type, m.listener);
    });
  };


  /**
   * Performs a search for the given pattern.
   *
   * @param  {string} pattern
   */
  SearchPad.prototype._search = function(pattern) {
    var self = this;

    this._clearResults();

    // do not search on empty query
    if (!pattern || pattern === '') {
      return;
    }

    var searchResults = this._searchProvider.find(pattern);

    if (!searchResults.length) {
      return;
    }

    // append new results
    searchResults.forEach(function(result) {
      var id = result.element.id;
      var node = self._createResultNode(result, id);
      self._results[id] = {
        element: result.element,
        node: node
      };
    });

    // preselect first result
    var node = query(SearchPad.RESULT_SELECTOR, this._resultsContainer);
    this._scrollToNode(node);
    this._preselect(node);
  };


  /**
   * Navigate to the previous/next result. Defaults to next result.
   * @param  {boolean} previous
   */
  SearchPad.prototype._scrollToDirection = function(previous) {
    var selected = this._getCurrentResult();
    if (!selected) {
      return;
    }

    var node = previous ? selected.previousElementSibling : selected.nextElementSibling;
    if (node) {
      this._scrollToNode(node);
      this._preselect(node);
    }
  };


  /**
   * Scroll to the node if it is not visible.
   *
   * @param  {Element} node
   */
  SearchPad.prototype._scrollToNode = function(node) {
    if (!node || node === this._getCurrentResult()) {
      return;
    }

    var nodeOffset = node.offsetTop;
    var containerScroll = this._resultsContainer.scrollTop;

    var bottomScroll = nodeOffset - this._resultsContainer.clientHeight + node.clientHeight;

    if (nodeOffset < containerScroll) {
      this._resultsContainer.scrollTop = nodeOffset;
    } else if (containerScroll < bottomScroll) {
      this._resultsContainer.scrollTop = bottomScroll;
    }
  };


  /**
   * Clears all results data.
   */
  SearchPad.prototype._clearResults = function() {
    clear$1(this._resultsContainer);

    this._results = [];

    this._resetOverlay();

    this._eventBus.fire('searchPad.cleared');
  };


  /**
   * Get currently selected result.
   *
   * @return {Element}
   */
  SearchPad.prototype._getCurrentResult = function() {
    return query(SearchPad.RESULT_SELECTED_SELECTOR, this._resultsContainer);
  };


  /**
   * Create result DOM element within results container
   * that corresponds to a search result.
   *
   * 'result' : one of the elements returned by SearchProvider
   * 'id' : id attribute value to assign to the new DOM node
   * return : created DOM element
   *
   * @param  {SearchResult} result
   * @param  {string} id
   * @return {Element}
   */
  SearchPad.prototype._createResultNode = function(result, id) {
    var node = domify(SearchPad.RESULT_HTML);

    // create only if available
    if (result.primaryTokens.length > 0) {
      createInnerTextNode(node, result.primaryTokens, SearchPad.RESULT_PRIMARY_HTML);
    }

    // secondary tokens (represent element ID) are allways available
    createInnerTextNode(node, result.secondaryTokens, SearchPad.RESULT_SECONDARY_HTML);

    attr$1(node, SearchPad.RESULT_ID_ATTRIBUTE, id);

    this._resultsContainer.appendChild(node);

    return node;
  };


  /**
   * Register search element provider.
   *
   * SearchProvider.find - provides search function over own elements
   *  (pattern) => [{ text: <String>, element: <Element>}, ...]
   *
   * @param  {SearchProvider} provider
   */
  SearchPad.prototype.registerProvider = function(provider) {
    this._searchProvider = provider;
  };


  /**
   * Open search pad.
   */
  SearchPad.prototype.open = function() {
    if (!this._searchProvider) {
      throw new Error('no search provider registered');
    }

    if (this.isOpen()) {
      return;
    }

    this._bindEvents();

    this._open = true;

    classes$1(this._container).add('open');

    this._searchInput.focus();

    this._eventBus.fire('searchPad.opened');
  };


  /**
   * Close search pad.
   */
  SearchPad.prototype.close = function() {
    if (!this.isOpen()) {
      return;
    }

    this._unbindEvents();

    this._open = false;

    classes$1(this._container).remove('open');

    this._clearResults();

    this._searchInput.value = '';
    this._searchInput.blur();

    this._resetOverlay();

    this._eventBus.fire('searchPad.closed');
  };


  /**
   * Toggles search pad on/off.
   */
  SearchPad.prototype.toggle = function() {
    this.isOpen() ? this.close() : this.open();
  };


  /**
   * Report state of search pad.
   */
  SearchPad.prototype.isOpen = function() {
    return this._open;
  };


  /**
   * Preselect result entry.
   *
   * @param  {Element} element
   */
  SearchPad.prototype._preselect = function(node) {
    var selectedNode = this._getCurrentResult();

    // already selected
    if (node === selectedNode) {
      return;
    }

    // removing preselection from current node
    if (selectedNode) {
      classes$1(selectedNode).remove(SearchPad.RESULT_SELECTED_CLASS);
    }

    var id = attr$1(node, SearchPad.RESULT_ID_ATTRIBUTE);
    var element = this._results[id].element;

    classes$1(node).add(SearchPad.RESULT_SELECTED_CLASS);

    this._resetOverlay(element);

    this._canvas.scrollToElement(element, { top: 400 });

    this._selection.select(element);

    this._eventBus.fire('searchPad.preselected', element);
  };


  /**
   * Select result node.
   *
   * @param  {Element} element
   */
  SearchPad.prototype._select = function(node) {
    var id = attr$1(node, SearchPad.RESULT_ID_ATTRIBUTE);
    var element = this._results[id].element;

    this.close();

    this._resetOverlay();

    this._canvas.scrollToElement(element, { top: 400 });

    this._selection.select(element);

    this._eventBus.fire('searchPad.selected', element);
  };


  /**
   * Reset overlay removes and, optionally, set
   * overlay to a new element.
   *
   * @param  {Element} element
   */
  SearchPad.prototype._resetOverlay = function(element) {
    if (this._overlayId) {
      this._overlays.remove(this._overlayId);
    }

    if (element) {
      var box = getBBox(element);
      var overlay = constructOverlay(box);
      this._overlayId = this._overlays.add(element, overlay);
    }
  };


  /**
   * Construct overlay object for the given bounding box.
   *
   * @param  {BoundingBox} box
   * @return {Object}
   */
  function constructOverlay(box) {

    var offset = 6;
    var w = box.width + offset * 2;
    var h = box.height + offset * 2;

    var styles = {
      width: w + 'px',
      height: h + 'px'
    };

    var html = domify('<div class="' + SearchPad.OVERLAY_CLASS + '"></div>');

    assign$1(html, styles);

    return {
      position: {
        bottom: h - offset,
        right: w - offset
      },
      show: true,
      html: html
    };
  }


  /**
   * Creates and appends child node from result tokens and HTML template.
   *
   * @param  {Element} node
   * @param  {Array<Object>} tokens
   * @param  {string} template
   */
  function createInnerTextNode(parentNode, tokens, template) {
    var text = createHtmlText(tokens);
    var childNode = domify(template);
    childNode.innerHTML = text;
    parentNode.appendChild(childNode);
  }

  /**
   * Create internal HTML markup from result tokens.
   * Caters for highlighting pattern matched tokens.
   *
   * @param  {Array<Object>} tokens
   * @return {string}
   */
  function createHtmlText(tokens) {
    var htmlText = '';

    tokens.forEach(function(t) {
      if (t.matched) {
        htmlText += '<strong class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</strong>';
      } else {
        htmlText += escapeHTML(t.normal);
      }
    });

    return htmlText !== '' ? htmlText : null;
  }


  /**
   * CONSTANTS
   */
  SearchPad.CONTAINER_SELECTOR = '.djs-search-container';
  SearchPad.INPUT_SELECTOR = '.djs-search-input input';
  SearchPad.RESULTS_CONTAINER_SELECTOR = '.djs-search-results';
  SearchPad.RESULT_SELECTOR = '.djs-search-result';
  SearchPad.RESULT_SELECTED_CLASS = 'djs-search-result-selected';
  SearchPad.RESULT_SELECTED_SELECTOR = '.' + SearchPad.RESULT_SELECTED_CLASS;
  SearchPad.RESULT_ID_ATTRIBUTE = 'data-result-id';
  SearchPad.RESULT_HIGHLIGHT_CLASS = 'djs-search-highlight';
  SearchPad.OVERLAY_CLASS = 'djs-search-overlay';

  SearchPad.BOX_HTML =
    '<div class="djs-search-container djs-draggable djs-scrollable">' +
      '<div class="djs-search-input">' +
        '<input type="text"/>' +
      '</div>' +
      '<div class="djs-search-results"></div>' +
    '</div>';

  SearchPad.RESULT_HTML =
    '<div class="djs-search-result"></div>';

  SearchPad.RESULT_PRIMARY_HTML =
    '<div class="djs-search-result-primary"></div>';

  SearchPad.RESULT_SECONDARY_HTML =
    '<p class="djs-search-result-secondary"></p>';

  var SearchPadModule = {
    __depends__: [
      OverlaysModule,
      SelectionModule
    ],
    searchPad: [ 'type', SearchPad ]
  };

  /**
   * Provides ability to search through BPMN elements
   */
  function BpmnSearchProvider(elementRegistry, searchPad, canvas) {

    this._elementRegistry = elementRegistry;
    this._canvas = canvas;

    searchPad.registerProvider(this);
  }

  BpmnSearchProvider.$inject = [
    'elementRegistry',
    'searchPad',
    'canvas'
  ];


  /**
   * Finds all elements that match given pattern
   *
   * <Result> :
   *  {
   *    primaryTokens: <Array<Token>>,
   *    secondaryTokens: <Array<Token>>,
   *    element: <Element>
   *  }
   *
   * <Token> :
   *  {
   *    normal|matched: <string>
   *  }
   *
   * @param  {string} pattern
   * @return {Array<Result>}
   */
  BpmnSearchProvider.prototype.find = function(pattern) {
    var rootElement = this._canvas.getRootElement();

    var elements = this._elementRegistry.filter(function(element) {
      if (element.labelTarget) {
        return false;
      }
      return true;
    });

    // do not include root element
    elements = filter(elements, function(element) {
      return element !== rootElement;
    });

    elements = map(elements, function(element) {
      return {
        primaryTokens: matchAndSplit(getLabel(element), pattern),
        secondaryTokens: matchAndSplit(element.id, pattern),
        element: element
      };
    });

    // exclude non-matched elements
    elements = filter(elements, function(element) {
      return hasMatched(element.primaryTokens) || hasMatched(element.secondaryTokens);
    });

    elements = sortBy(elements, function(element) {
      return getLabel(element.element) + element.element.id;
    });

    return elements;
  };


  function hasMatched(tokens) {
    var matched = filter(tokens, function(t) {
      return !!t.matched;
    });

    return matched.length > 0;
  }


  function matchAndSplit(text, pattern) {
    var tokens = [],
        originalText = text;

    if (!text) {
      return tokens;
    }

    text = text.toLowerCase();
    pattern = pattern.toLowerCase();

    var i = text.indexOf(pattern);

    if (i > -1) {
      if (i !== 0) {
        tokens.push({
          normal: originalText.substr(0, i)
        });
      }

      tokens.push({
        matched: originalText.substr(i, pattern.length)
      });

      if (pattern.length + i < text.length) {
        tokens.push({
          normal: originalText.substr(pattern.length + i, text.length)
        });
      }
    } else {
      tokens.push({
        normal: originalText
      });
    }

    return tokens;
  }

  var SearchModule = {
    __depends__: [
      SearchPadModule
    ],
    __init__: [ 'bpmnSearch' ],
    bpmnSearch: [ 'type', BpmnSearchProvider ]
  };

  var initialDiagram =
    '<?xml version="1.0" encoding="UTF-8"?>' +
    '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
                      'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
                      'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
                      'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
                      'targetNamespace="http://bpmn.io/schema/bpmn" ' +
                      'id="Definitions_1">' +
      '<bpmn:process id="Process_1" isExecutable="false">' +
        '<bpmn:startEvent id="StartEvent_1"/>' +
      '</bpmn:process>' +
      '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
        '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
          '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
            '<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
          '</bpmndi:BPMNShape>' +
        '</bpmndi:BPMNPlane>' +
      '</bpmndi:BPMNDiagram>' +
    '</bpmn:definitions>';


  /**
   * A modeler for BPMN 2.0 diagrams.
   *
   *
   * ## Extending the Modeler
   *
   * In order to extend the viewer pass extension modules to bootstrap via the
   * `additionalModules` option. An extension module is an object that exposes
   * named services.
   *
   * The following example depicts the integration of a simple
   * logging component that integrates with interaction events:
   *
   *
   * ```javascript
   *
   * // logging component
   * function InteractionLogger(eventBus) {
   *   eventBus.on('element.hover', function(event) {
   *     console.log()
   *   })
   * }
   *
   * InteractionLogger.$inject = [ 'eventBus' ]; // minification save
   *
   * // extension module
   * var extensionModule = {
   *   __init__: [ 'interactionLogger' ],
   *   interactionLogger: [ 'type', InteractionLogger ]
   * };
   *
   * // extend the viewer
   * var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });
   * bpmnModeler.importXML(...);
   * ```
   *
   *
   * ## Customizing / Replacing Components
   *
   * You can replace individual diagram components by redefining them in override modules.
   * This works for all components, including those defined in the core.
   *
   * Pass in override modules via the `options.additionalModules` flag like this:
   *
   * ```javascript
   * function CustomContextPadProvider(contextPad) {
   *
   *   contextPad.registerProvider(this);
   *
   *   this.getContextPadEntries = function(element) {
   *     // no entries, effectively disable the context pad
   *     return {};
   *   };
   * }
   *
   * CustomContextPadProvider.$inject = [ 'contextPad' ];
   *
   * var overrideModule = {
   *   contextPadProvider: [ 'type', CustomContextPadProvider ]
   * };
   *
   * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});
   * ```
   *
   * @param {Object} [options] configuration options to pass to the viewer
   * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
   * @param {string|number} [options.width] the width of the viewer
   * @param {string|number} [options.height] the height of the viewer
   * @param {Object} [options.moddleExtensions] extension packages to provide
   * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
   * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
   */
  function Modeler(options) {
    BaseModeler.call(this, options);
  }

  e(Modeler, BaseModeler);


  Modeler.Viewer = Viewer;
  Modeler.NavigatedViewer = NavigatedViewer;

  /**
  * The createDiagram result.
  *
  * @typedef {Object} CreateDiagramResult
  *
  * @property {Array<string>} warnings
  */

  /**
  * The createDiagram error.
  *
  * @typedef {Error} CreateDiagramError
  *
  * @property {Array<string>} warnings
  */

  /**
   * Create a new diagram to start modeling.
   *
   * Returns {Promise<CreateDiagramResult, CreateDiagramError>}
   */
  Modeler.prototype.createDiagram = wrapForCompatibility(function createDiagram() {
    return this.importXML(initialDiagram);
  });


  Modeler.prototype._interactionModules = [

    // non-modeling components
    KeyboardMoveModule,
    MoveCanvasModule,
    TouchModule,
    ZoomScrollModule
  ];

  Modeler.prototype._modelingModules = [

    // modeling components
    AlignElementsModule,
    AutoPlaceModule,
    AutoScrollModule,
    AutoResizeModule,
    BendpointsModule,
    ConnectModule,
    ConnectionPreviewModule,
    ContextPadModule,
    CopyPasteModule,
    CreateModule,
    DistributeElementsModule,
    EditorActionsModule,
    GridSnappingModule,
    InteractionEventsModule,
    KeyboardModule,
    KeyboardMoveSelectionModule,
    LabelEditingModule,
    ModelingModule,
    MoveModule,
    PaletteModule,
    ReplacePreviewModule,
    ResizeModule,
    SnappingModule,
    SearchModule
  ];


  // modules the modeler is composed of
  //
  // - viewer modules
  // - interaction modules
  // - modeling modules

  Modeler.prototype._modules = [].concat(
    Viewer.prototype._modules,
    Modeler.prototype._interactionModules,
    Modeler.prototype._modelingModules
  );

  return Modeler;

}));