(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.DiagramJSMinimap = factory());
})(this, (function () { 'use strict';

  function _mergeNamespaces$1(n, m) {
    m.forEach(function (e) {
      e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
        if (k !== 'default' && !(k in n)) {
          var d = Object.getOwnPropertyDescriptor(e, k);
          Object.defineProperty(n, k, d.get ? d : {
            enumerable: true,
            get: function () { return e[k]; }
          });
        }
      });
    });
    return Object.freeze(n);
  }

  /**
   * 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;
  }

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

  /**
   * toString reference.
   */

  const 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) {
    this.list.add(name);
    return this;
  };

  /**
   * Remove class `name` when present, or
   * pass a regular expression to remove
   * any which match.
   *
   * @param {String|RegExp} name
   * @return {ClassList}
   * @api public
   */

  ClassList$1.prototype.remove = function(name) {
    if ('[object RegExp]' == toString$1.call(name)) {
      return this.removeMatching(name);
    }

    this.list.remove(name);
    return this;
  };

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

  ClassList$1.prototype.removeMatching = function(re) {
    const arr = this.array();
    for (let i = 0; i < arr.length; i++) {
      if (re.test(arr[i])) {
        this.remove(arr[i]);
      }
    }
    return this;
  };

  /**
   * Toggle class `name`, can force state via `force`.
   *
   * For browsers that support classList, but do not support `force` yet,
   * the mistake will be detected and corrected.
   *
   * @param {String} name
   * @param {Boolean} force
   * @return {ClassList}
   * @api public
   */

  ClassList$1.prototype.toggle = function(name, force) {
    if ('undefined' !== typeof force) {
      if (force !== this.list.toggle(name, force)) {
        this.list.toggle(name); // toggle again to correct
      }
    } else {
      this.list.toggle(name);
    }
    return this;
  };

  /**
   * Return an array of classes.
   *
   * @return {Array}
   * @api public
   */

  ClassList$1.prototype.array = function() {
    return Array.from(this.list);
  };

  /**
   * 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.contains(name);
  };

  var componentEvent = {};

  var bind$1, unbind$1, prefix;

  function detect () {
    bind$1 = window.addEventListener ? 'addEventListener' : 'attachEvent';
    unbind$1 = window.removeEventListener ? 'removeEventListener' : 'detachEvent';
    prefix = 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 = componentEvent.bind = function(el, type, fn, capture){
    if (!bind$1) detect();
    el[bind$1](prefix + 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 = componentEvent.unbind = function(el, type, fn, capture){
    if (!unbind$1) detect();
    el[unbind$1](prefix + type, fn, capture || false);
    return fn;
  };

  var event = /*#__PURE__*/_mergeNamespaces$1({
    __proto__: null,
    bind: bind_1,
    unbind: unbind_1,
    'default': componentEvent
  }, [componentEvent]);
  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
    !bugTestDiv.getElementsByTagName('link').length;
    bugTestDiv = undefined;
  }

  function query(selector, el) {
    el = el || document;

    return el.querySelector(selector);
  }

  function ensureImported(element, target) {

    if (element.ownerDocument !== target.ownerDocument) {
      try {

        // may fail on webkit
        return target.ownerDocument.importNode(element, true);
      } catch (e) {

        // ignore
      }
    }

    return element;
  }

  /**
   * appendTo utility
   */

  /**
   * Append a node to a target element and return the appended node.
   *
   * @param  {SVGElement} element
   * @param  {SVGElement} target
   *
   * @return {SVGElement} the appended node
   */
  function appendTo(element, target) {
    return target.appendChild(ensureImported(element, target));
  }

  /**
   * append utility
   */

  /**
   * Append a node to an element
   *
   * @param  {SVGElement} element
   * @param  {SVGElement} node
   *
   * @return {SVGElement} the element
   */
  function append(target, node) {
    appendTo(node, target);
    return target;
  }

  /**
   * attribute accessor utility
   */

  var LENGTH_ATTR = 2;

  var CSS_PROPERTIES = {
    'alignment-baseline': 1,
    'baseline-shift': 1,
    'clip': 1,
    'clip-path': 1,
    'clip-rule': 1,
    'color': 1,
    'color-interpolation': 1,
    'color-interpolation-filters': 1,
    'color-profile': 1,
    'color-rendering': 1,
    'cursor': 1,
    'direction': 1,
    'display': 1,
    'dominant-baseline': 1,
    'enable-background': 1,
    'fill': 1,
    'fill-opacity': 1,
    'fill-rule': 1,
    'filter': 1,
    'flood-color': 1,
    'flood-opacity': 1,
    'font': 1,
    'font-family': 1,
    'font-size': LENGTH_ATTR,
    'font-size-adjust': 1,
    'font-stretch': 1,
    'font-style': 1,
    'font-variant': 1,
    'font-weight': 1,
    'glyph-orientation-horizontal': 1,
    'glyph-orientation-vertical': 1,
    'image-rendering': 1,
    'kerning': 1,
    'letter-spacing': 1,
    'lighting-color': 1,
    'marker': 1,
    'marker-end': 1,
    'marker-mid': 1,
    'marker-start': 1,
    'mask': 1,
    'opacity': 1,
    'overflow': 1,
    'pointer-events': 1,
    'shape-rendering': 1,
    'stop-color': 1,
    'stop-opacity': 1,
    'stroke': 1,
    'stroke-dasharray': 1,
    'stroke-dashoffset': 1,
    'stroke-linecap': 1,
    'stroke-linejoin': 1,
    'stroke-miterlimit': 1,
    'stroke-opacity': 1,
    'stroke-width': LENGTH_ATTR,
    'text-anchor': 1,
    'text-decoration': 1,
    'text-rendering': 1,
    'unicode-bidi': 1,
    'visibility': 1,
    'word-spacing': 1,
    'writing-mode': 1
  };


  function getAttribute(node, name) {
    if (CSS_PROPERTIES[name]) {
      return node.style[name];
    } else {
      return node.getAttributeNS(null, name);
    }
  }

  function setAttribute(node, name, value) {
    var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

    var type = CSS_PROPERTIES[hyphenated];

    if (type) {

      // append pixel unit, unless present
      if (type === LENGTH_ATTR && typeof value === 'number') {
        value = String(value) + 'px';
      }

      node.style[hyphenated] = value;
    } else {
      node.setAttributeNS(null, name, value);
    }
  }

  function setAttributes(node, attrs) {

    var names = Object.keys(attrs), i, name;

    for (i = 0, name; (name = names[i]); i++) {
      setAttribute(node, name, attrs[name]);
    }
  }

  /**
   * Gets or sets raw attributes on a node.
   *
   * @param  {SVGElement} node
   * @param  {Object} [attrs]
   * @param  {String} [name]
   * @param  {String} [value]
   *
   * @return {String}
   */
  function attr(node, name, value) {
    if (typeof name === 'string') {
      if (value !== undefined) {
        setAttribute(node, name, value);
      } else {
        return getAttribute(node, name);
      }
    } else {
      setAttributes(node, name);
    }

    return node;
  }

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

  /**
   * toString reference.
   */

  const toString = Object.prototype.toString;

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

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

  function ClassList(el) {
    if (!el || !el.nodeType) {
      throw new Error('A DOM element reference is required');
    }
    this.el = el;
    this.list = el.classList;
  }

  /**
    * Add class `name` if not already present.
    *
    * @param {String} name
    * @return {ClassList}
    * @api public
    */

  ClassList.prototype.add = function(name) {
    this.list.add(name);
    return this;
  };

  /**
    * Remove class `name` when present, or
    * pass a regular expression to remove
    * any which match.
    *
    * @param {String|RegExp} name
    * @return {ClassList}
    * @api public
    */

  ClassList.prototype.remove = function(name) {
    if ('[object RegExp]' == toString.call(name)) {
      return this.removeMatching(name);
    }

    this.list.remove(name);
    return this;
  };

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

  ClassList.prototype.removeMatching = function(re) {
    const arr = this.array();
    for (let i = 0; i < arr.length; i++) {
      if (re.test(arr[i])) {
        this.remove(arr[i]);
      }
    }
    return this;
  };

  /**
    * Toggle class `name`, can force state via `force`.
    *
    * For browsers that support classList, but do not support `force` yet,
    * the mistake will be detected and corrected.
    *
    * @param {String} name
    * @param {Boolean} force
    * @return {ClassList}
    * @api public
    */

  ClassList.prototype.toggle = function(name, force) {
    if ('undefined' !== typeof force) {
      if (force !== this.list.toggle(name, force)) {
        this.list.toggle(name); // toggle again to correct
      }
    } else {
      this.list.toggle(name);
    }
    return this;
  };

  /**
    * Return an array of classes.
    *
    * @return {Array}
    * @api public
    */

  ClassList.prototype.array = function() {
    return Array.from(this.list);
  };

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

  ClassList.prototype.has =
   ClassList.prototype.contains = function(name) {
     return this.list.contains(name);
   };

  function remove(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(child);
    }

    return element;
  }

  function clone(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(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;
  }

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

  const nativeToString = Object.prototype.toString;
  const nativeHasOwnProperty = Object.prototype.hasOwnProperty;

  function isUndefined(obj) {
    return obj === undefined;
  }

  function isArray(obj) {
    return nativeToString.call(obj) === '[object Array]';
  }

  function isObject(obj) {
    return nativeToString.call(obj) === '[object Object]';
  }

  function isNumber(obj) {
    return nativeToString.call(obj) === '[object Number]';
  }

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

    let val,
        result;

    if (isUndefined(collection)) {
      return;
    }

    const convertKey = isArray(collection) ? toNum : identity;

    for (let key in collection) {

      if (has(collection, key)) {
        val = collection[key];

        result = iterator(val, convertKey(key));

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


  /**
   * 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(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);
  }


  function identity(arg) {
    return arg;
  }

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

  /**
   * Convenience wrapper for `Object.assign`.
   *
   * @param {Object} target
   * @param {...Object} others
   *
   * @return {Object} the target
   */
  function assign(target, ...others) {
    return Object.assign(target, ...others);
  }

  var hammerExports = {};
  var hammer = {
    get exports(){ return hammerExports; },
    set exports(v){ hammerExports = v; },
  };

  /*! 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 = hammerExports;

  /**
   * @param {string} str
   * @returns {string}
   */
  function escapeCSS(str) {
    return CSS.escape(str);
  }

  /**
   * 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 {SVGElement} gfx
   *
   * @return {SVGElement}
   */
  function getVisual(gfx) {
    return gfx.childNodes[0];
  }

  var MINIMAP_VIEWBOX_PADDING = 50;

  var RANGE = { min: 0.2, max: 4 },
      NUM_STEPS = 10;

  var DELTA_THRESHOLD = 0.1;

  var LOW_PRIORITY = 250;


  /**
   * A minimap that reflects and lets you navigate the diagram.
   */
  function Minimap(
      config, injector, eventBus,
      canvas, elementRegistry) {

    var self = this;

    this._canvas = canvas;
    this._elementRegistry = elementRegistry;
    this._eventBus = eventBus;
    this._injector = injector;

    this._state = {
      isOpen: undefined,
      isDragging: false,
      initialDragPosition: null,
      offsetViewport: null,
      cachedViewbox: null,
      dragger: null,
      svgClientRect: null,
      parentClientRect: null,
      zoomDelta: 0
    };

    this._init();

    var documentManager = new Hammer.Manager(document);

    documentManager.add(new Hammer.Pan());
    documentManager.on('panmove', onMousemove);
    documentManager.on('panend', onMouseup);

    var svgManager = new Hammer.Manager(this._svg);

    svgManager.add(new Hammer.Pan());
    svgManager.on('panstart', mousedown(true));

    svgManager.add(new Hammer.Tap());
    svgManager.on('tap', function(event) {
      centerViewbox(getPoint(event));
    });

    var viewportDomManager = new Hammer.Manager(this._viewportDom);

    viewportDomManager.add(new Hammer.Pan());
    viewportDomManager.on('panstart', mousedown(false));

    this.toggle((config && config.open) || false);

    function centerViewbox(point) {

      // getBoundingClientRect might return zero-dimensional when called for the first time
      if (!self._state._svgClientRect || isZeroDimensional(self._state._svgClientRect)) {
        self._state._svgClientRect = self._svg.getBoundingClientRect();
      }

      var diagramPoint = mapMousePositionToDiagramPoint({
        x: point.x - self._state._svgClientRect.left,
        y: point.y - self._state._svgClientRect.top
      }, self._svg, self._lastViewbox);

      setViewboxCenteredAroundPoint(diagramPoint, self._canvas);

      self._update();
    }

    function mousedown(center) {

      return function onMousedown(event$1) {
        var point = getPoint(event$1);

        // getBoundingClientRect might return zero-dimensional when called for the first time
        if (!self._state._svgClientRect || isZeroDimensional(self._state._svgClientRect)) {
          self._state._svgClientRect = self._svg.getBoundingClientRect();
        }

        if (center) {
          centerViewbox(point);
        }

        var diagramPoint = mapMousePositionToDiagramPoint({
          x: point.x - self._state._svgClientRect.left,
          y: point.y - self._state._svgClientRect.top
        }, self._svg, self._lastViewbox);

        var viewbox = canvas.viewbox();

        var offsetViewport = getOffsetViewport(diagramPoint, viewbox);

        var initialViewportDomRect = self._viewportDom.getBoundingClientRect();

        // take border into account (regardless of width)
        var offsetViewportDom = {
          x: point.x - initialViewportDomRect.left + 1,
          y: point.y - initialViewportDomRect.top + 1
        };

        // init dragging
        assign(self._state, {
          cachedViewbox: viewbox,
          initialDragPosition: {
            x: point.x,
            y: point.y
          },
          isDragging: true,
          offsetViewport: offsetViewport,
          offsetViewportDom: offsetViewportDom,
          viewportClientRect: self._viewport.getBoundingClientRect(),
          parentClientRect: self._parent.getBoundingClientRect()
        });

        event.bind(document, 'mousemove', onMousemove);
        event.bind(document, 'mouseup', onMouseup);
      };
    }

    function onMousemove(event) {
      var point = getPoint(event);

      // set viewbox if dragging active
      if (self._state.isDragging) {

        // getBoundingClientRect might return zero-dimensional when called for the first time
        if (!self._state._svgClientRect || isZeroDimensional(self._state._svgClientRect)) {
          self._state._svgClientRect = self._svg.getBoundingClientRect();
        }

        // update viewport DOM
        var offsetViewportDom = self._state.offsetViewportDom,
            viewportClientRect = self._state.viewportClientRect,
            parentClientRect = self._state.parentClientRect;

        assign(self._viewportDom.style, {
          top: (point.y - offsetViewportDom.y - parentClientRect.top) + 'px',
          left: (point.x - offsetViewportDom.x - parentClientRect.left) + 'px'
        });

        // update overlay
        var clipPath = getOverlayClipPath(parentClientRect, {
          top: point.y - offsetViewportDom.y - parentClientRect.top,
          left: point.x - offsetViewportDom.x - parentClientRect.left,
          width: viewportClientRect.width,
          height: viewportClientRect.height
        });

        assign(self._overlay.style, {
          clipPath: clipPath
        });

        var diagramPoint = mapMousePositionToDiagramPoint({
          x: point.x - self._state._svgClientRect.left,
          y: point.y - self._state._svgClientRect.top
        }, self._svg, self._lastViewbox);

        setViewboxCenteredAroundPoint({
          x: diagramPoint.x - self._state.offsetViewport.x,
          y: diagramPoint.y - self._state.offsetViewport.y
        }, self._canvas);
      }
    }

    function onMouseup(event$1) {
      var point = getPoint(event$1);

      if (self._state.isDragging) {

        // treat event as click
        if (self._state.initialDragPosition.x === point.x
            && self._state.initialDragPosition.y === point.y) {
          centerViewbox(event$1);
        }

        self._update();

        // end dragging
        assign(self._state, {
          cachedViewbox: null,
          initialDragPosition: null,
          isDragging: false,
          offsetViewport: null,
          offsetViewportDom: null
        });

        event.unbind(document, 'mousemove', onMousemove);
        event.unbind(document, 'mouseup', onMouseup);
      }
    }

    // dragging viewport scrolls canvas
    event.bind(this._viewportDom, 'mousedown', mousedown(false));
    event.bind(this._svg, 'mousedown', mousedown(true));

    event.bind(this._parent, 'wheel', function(event) {

      // stop propagation and handle scroll differently
      event.preventDefault();
      event.stopPropagation();

      // only zoom in on ctrl; this aligns with diagram-js navigation behavior
      if (!event.ctrlKey) {
        return;
      }

      // getBoundingClientRect might return zero-dimensional when called for the first time
      if (!self._state._svgClientRect || isZeroDimensional(self._state._svgClientRect)) {
        self._state._svgClientRect = self._svg.getBoundingClientRect();
      }

      // disallow zooming through viewport outside of minimap as it is very confusing
      if (!isPointInside(event, self._state._svgClientRect)) {
        return;
      }

      var factor = event.deltaMode === 0 ? 0.020 : 0.32;

      var delta = (
        Math.sqrt(
          Math.pow(event.deltaY, 2) +
          Math.pow(event.deltaX, 2)
        ) * sign(event.deltaY) * -factor
      );

      // add until threshold reached
      self._state.zoomDelta += delta;

      if (Math.abs(self._state.zoomDelta) > DELTA_THRESHOLD) {
        var direction = delta > 0 ? 1 : -1;

        var currentLinearZoomLevel = Math.log(canvas.zoom()) / Math.log(10);

        // zoom with half the step size of stepZoom
        var stepSize = getStepSize(RANGE, NUM_STEPS * 2);

        // 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), diagramPoint);

        // reset
        self._state.zoomDelta = 0;

        var diagramPoint = mapMousePositionToDiagramPoint({
          x: event.clientX - self._state._svgClientRect.left,
          y: event.clientY - self._state._svgClientRect.top
        }, self._svg, self._lastViewbox);

        setViewboxCenteredAroundPoint(diagramPoint, self._canvas);

        self._update();
      }
    });

    event.bind(this._toggle, 'click', function(event) {
      event.preventDefault();
      event.stopPropagation();

      self.toggle();
    });

    // add shape on shape/connection added
    eventBus.on([ 'shape.added', 'connection.added' ], function(context) {
      var element = context.element;

      self._addElement(element);

      self._update();
    });

    // remove shape on shape/connection removed
    eventBus.on([ 'shape.removed', 'connection.removed' ], function(context) {
      var element = context.element;

      self._removeElement(element);

      self._update();
    });

    // update on elements changed
    eventBus.on('elements.changed', LOW_PRIORITY, function(context) {
      var elements = context.elements;

      elements.forEach(function(element) {
        self._updateElement(element);
      });

      self._update();
    });

    // update on element ID update
    eventBus.on('element.updateId', function(context) {
      var element = context.element,
          newId = context.newId;

      self._updateElementId(element, newId);
    });

    // update on viewbox changed
    eventBus.on('canvas.viewbox.changed', function() {
      if (!self._state.isDragging) {
        self._update();
      }
    });

    eventBus.on('canvas.resized', function() {

      // only update if present in DOM
      if (document.body.contains(self._parent)) {
        if (!self._state.isDragging) {
          self._update();
        }

        self._state._svgClientRect = self._svg.getBoundingClientRect();
      }

    });

    eventBus.on([ 'root.set', 'plane.set' ], function(event) {
      self._clear();

      var element = event.element || event.plane.rootElement;

      element.children.forEach(function(el) {
        self._addElement(el);
      });

      self._update();
    });

  }

  Minimap.$inject = [
    'config.minimap',
    'injector',
    'eventBus',
    'canvas',
    'elementRegistry'
  ];

  Minimap.prototype._init = function() {
    var canvas = this._canvas,
        container = canvas.getContainer();

    // create parent div
    var parent = this._parent = document.createElement('div');

    classes$1(parent).add('djs-minimap');

    container.appendChild(parent);

    // create toggle
    var toggle = this._toggle = document.createElement('div');

    classes$1(toggle).add('toggle');

    parent.appendChild(toggle);

    // create map
    var map = this._map = document.createElement('div');

    classes$1(map).add('map');

    parent.appendChild(map);

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

    // add groups
    var elementsGroup = this._elementsGroup = create('g');
    append(svg, elementsGroup);

    var viewportGroup = this._viewportGroup = create('g');
    append(svg, viewportGroup);

    // add viewport SVG
    var viewport = this._viewport = create('rect');

    classes(viewport).add('viewport');

    append(viewportGroup, viewport);

    // prevent drag propagation
    event.bind(parent, 'mousedown', function(event) {
      event.stopPropagation();
    });

    // add viewport DOM
    var viewportDom = this._viewportDom = document.createElement('div');

    classes$1(viewportDom).add('viewport-dom');

    this._parent.appendChild(viewportDom);

    // add overlay
    var overlay = this._overlay = document.createElement('div');

    classes$1(overlay).add('overlay');

    this._parent.appendChild(overlay);
  };

  Minimap.prototype._update = function() {
    var viewbox = this._canvas.viewbox(),
        innerViewbox = viewbox.inner,
        outerViewbox = viewbox.outer;

    if (!validViewbox(viewbox)) {
      return;
    }

    var x, y, width, height;

    var widthDifference = outerViewbox.width - innerViewbox.width,
        heightDifference = outerViewbox.height - innerViewbox.height;

    // update viewbox
    // x
    if (innerViewbox.width < outerViewbox.width) {
      x = innerViewbox.x - widthDifference / 2;
      width = outerViewbox.width;

      if (innerViewbox.x + innerViewbox.width < outerViewbox.width) {
        x = Math.min(0, innerViewbox.x);
      }
    } else {
      x = innerViewbox.x;
      width = innerViewbox.width;
    }

    // y
    if (innerViewbox.height < outerViewbox.height) {
      y = innerViewbox.y - heightDifference / 2;
      height = outerViewbox.height;

      if (innerViewbox.y + innerViewbox.height < outerViewbox.height) {
        y = Math.min(0, innerViewbox.y);
      }
    } else {
      y = innerViewbox.y;
      height = innerViewbox.height;
    }

    // apply some padding
    x = x - MINIMAP_VIEWBOX_PADDING;
    y = y - MINIMAP_VIEWBOX_PADDING;
    width = width + MINIMAP_VIEWBOX_PADDING * 2;
    height = height + MINIMAP_VIEWBOX_PADDING * 2;

    this._lastViewbox = {
      x: x,
      y: y,
      width: width,
      height: height
    };

    attr(this._svg, {
      viewBox: x + ', ' + y + ', ' + width + ', ' + height
    });

    // update viewport SVG
    attr(this._viewport, {
      x: viewbox.x,
      y: viewbox.y,
      width: viewbox.width,
      height: viewbox.height
    });

    // update viewport DOM
    var parentClientRect = this._state._parentClientRect = this._parent.getBoundingClientRect();
    var viewportClientRect = this._viewport.getBoundingClientRect();

    var withoutParentOffset = {
      top: viewportClientRect.top - parentClientRect.top,
      left: viewportClientRect.left - parentClientRect.left,
      width: viewportClientRect.width,
      height: viewportClientRect.height
    };

    assign(this._viewportDom.style, {
      top: withoutParentOffset.top + 'px',
      left: withoutParentOffset.left + 'px',
      width: withoutParentOffset.width + 'px',
      height: withoutParentOffset.height + 'px'
    });

    // update overlay
    var clipPath = getOverlayClipPath(parentClientRect, withoutParentOffset);

    assign(this._overlay.style, {
      clipPath: clipPath
    });
  };

  Minimap.prototype.open = function() {
    assign(this._state, { isOpen: true });

    classes$1(this._parent).add('open');

    var translate = this._injector.get('translate', false) || function(s) { return s; };

    attr$1(this._toggle, 'title', translate('Close minimap'));

    this._update();

    this._eventBus.fire('minimap.toggle', { open: true });
  };

  Minimap.prototype.close = function() {
    assign(this._state, { isOpen: false });

    classes$1(this._parent).remove('open');

    var translate = this._injector.get('translate', false) || function(s) { return s; };

    attr$1(this._toggle, 'title', translate('Open minimap'));

    this._eventBus.fire('minimap.toggle', { open: false });
  };

  Minimap.prototype.toggle = function(open) {

    var currentOpen = this.isOpen();

    if (typeof open === 'undefined') {
      open = !currentOpen;
    }

    if (open == currentOpen) {
      return;
    }

    if (open) {
      this.open();
    } else {
      this.close();
    }
  };

  Minimap.prototype.isOpen = function() {
    return this._state.isOpen;
  };

  Minimap.prototype._updateElement = function(element) {

    try {

      // if parent is null element has been removed, if parent is undefined parent is root
      if (element.parent !== undefined && element.parent !== null) {
        this._removeElement(element);
        this._addElement(element);
      }
    } catch (error) {
      console.warn('Minimap#_updateElement errored', error);
    }

  };

  Minimap.prototype._updateElementId = function(element, newId) {

    try {
      var elementGfx = query('#' + escapeCSS(element.id), this._elementsGroup);

      if (elementGfx) {
        elementGfx.id = newId;
      }
    } catch (error) {
      console.warn('Minimap#_updateElementId errored', error);
    }

  };

  /**
   * Checks if an element is on the currently active plane.
   */
  Minimap.prototype.isOnActivePlane = function(element) {
    var canvas = this._canvas;

    // diagram-js@8
    if (canvas.findRoot) {
      return canvas.findRoot(element) === canvas.getRootElement();
    }

    // diagram-js>=7.4.0
    if (canvas.findPlane) {
      return canvas.findPlane(element) === canvas.getActivePlane();
    }

    // diagram-js<7.4.0
    return true;
  };


  /**
   * Adds an element to the minimap.
   */
  Minimap.prototype._addElement = function(element) {
    var self = this;

    this._removeElement(element);

    if (!this.isOnActivePlane(element)) {
      return;
    }

    var parent,
        x, y;

    var newElementGfx = this._createElement(element);
    var newElementParentGfx = query('#' + escapeCSS(element.parent.id), this._elementsGroup);

    if (newElementGfx) {

      var elementGfx = this._elementRegistry.getGraphics(element);
      var parentGfx = this._elementRegistry.getGraphics(element.parent);

      var index = getIndexOfChildInParentChildren(elementGfx, parentGfx);

      // index can be 0
      if (index !== 'undefined') {
        if (newElementParentGfx) {

          // in cases of doubt add as last child
          if (newElementParentGfx.childNodes.length > index) {
            insertChildAtIndex(newElementGfx, newElementParentGfx, index);
          } else {
            insertChildAtIndex(newElementGfx, newElementParentGfx, newElementParentGfx.childNodes.length - 1);
          }

        } else {
          this._elementsGroup.appendChild(newElementGfx);
        }

      } else {

        // index undefined
        this._elementsGroup.appendChild(newElementGfx);
      }

      if (isConnection(element)) {
        parent = element.parent;
        x = 0;
        y = 0;

        if (typeof parent.x !== 'undefined' && typeof parent.y !== 'undefined') {
          x = -parent.x;
          y = -parent.y;
        }

        attr(newElementGfx, { transform: 'translate(' + x + ' ' + y + ')' });
      } else {
        x = element.x;
        y = element.y;

        if (newElementParentGfx) {
          parent = element.parent;

          x -= parent.x;
          y -= parent.y;
        }

        attr(newElementGfx, { transform: 'translate(' + x + ' ' + y + ')' });
      }

      if (element.children && element.children.length) {
        element.children.forEach(function(child) {
          self._addElement(child);
        });
      }

      return newElementGfx;
    }
  };

  Minimap.prototype._removeElement = function(element) {
    var elementGfx = this._svg.getElementById(element.id);

    if (elementGfx) {
      remove(elementGfx);
    }
  };

  Minimap.prototype._createElement = function(element) {
    var gfx = this._elementRegistry.getGraphics(element),
        visual;

    if (gfx) {
      visual = getVisual(gfx);

      if (visual) {
        var elementGfx = clone(visual);
        attr(elementGfx, { id: element.id });

        return elementGfx;
      }
    }
  };

  Minimap.prototype._clear = function() {
    clear(this._elementsGroup);
  };

  function isConnection(element) {
    return element.waypoints;
  }

  function getOffsetViewport(diagramPoint, viewbox) {
    var viewboxCenter = {
      x: viewbox.x + (viewbox.width / 2),
      y: viewbox.y + (viewbox.height / 2)
    };

    return {
      x: diagramPoint.x - viewboxCenter.x,
      y: diagramPoint.y - viewboxCenter.y
    };
  }

  function mapMousePositionToDiagramPoint(position, svg, lastViewbox) {

    // firefox returns 0 for clientWidth and clientHeight
    var boundingClientRect = svg.getBoundingClientRect();

    // take different aspect ratios of default layers bounding box and minimap into account
    var bBox =
      fitAspectRatio(lastViewbox, boundingClientRect.width / boundingClientRect.height);

    // map click position to diagram position
    var diagramX = map(position.x, 0, boundingClientRect.width, bBox.x, bBox.x + bBox.width),
        diagramY = map(position.y, 0, boundingClientRect.height, bBox.y, bBox.y + bBox.height);

    return {
      x: diagramX,
      y: diagramY
    };
  }

  function setViewboxCenteredAroundPoint(point, canvas) {

    // get cached viewbox to preserve zoom
    var cachedViewbox = canvas.viewbox(),
        cachedViewboxWidth = cachedViewbox.width,
        cachedViewboxHeight = cachedViewbox.height;

    canvas.viewbox({
      x: point.x - cachedViewboxWidth / 2,
      y: point.y - cachedViewboxHeight / 2,
      width: cachedViewboxWidth,
      height: cachedViewboxHeight
    });
  }

  function fitAspectRatio(bounds, targetAspectRatio) {
    var aspectRatio = bounds.width / bounds.height;

    // assigning to bounds throws exception in IE11
    var newBounds = assign({}, {
      x: bounds.x,
      y: bounds.y,
      width: bounds.width,
      height: bounds.height
    });

    if (aspectRatio > targetAspectRatio) {

      // height needs to be fitted
      var height = newBounds.width * (1 / targetAspectRatio),
          y = newBounds.y - ((height - newBounds.height) / 2);

      assign(newBounds, {
        y: y,
        height: height
      });
    } else if (aspectRatio < targetAspectRatio) {

      // width needs to be fitted
      var width = newBounds.height * targetAspectRatio,
          x = newBounds.x - ((width - newBounds.width) / 2);

      assign(newBounds, {
        x: x,
        width: width
      });
    }

    return newBounds;
  }

  function map(x, inMin, inMax, outMin, outMax) {
    var inRange = inMax - inMin,
        outRange = outMax - outMin;

    return (x - inMin) * outRange / inRange + outMin;
  }

  /**
   * Returns index of child in children of parent.
   *
   * g
   * '- g.djs-element // parentGfx
   * '- g.djs-children
   *    '- g
   *       '-g.djs-element // childGfx
   */
  function getIndexOfChildInParentChildren(childGfx, parentGfx) {
    var childrenGroup = query('.djs-children', parentGfx.parentNode);

    if (!childrenGroup) {
      return;
    }

    var childrenArray = [].slice.call(childrenGroup.childNodes);

    var indexOfChild = -1;

    childrenArray.forEach(function(childGroup, index) {
      if (query('.djs-element', childGroup) === childGfx) {
        indexOfChild = index;
      }
    });

    return indexOfChild;
  }

  function insertChildAtIndex(childGfx, parentGfx, index) {
    var childContainer = getChildContainer(parentGfx);

    var childrenArray = [].slice.call(childContainer.childNodes);

    var childAtIndex = childrenArray[index];

    if (childAtIndex) {
      parentGfx.insertBefore(childGfx, childAtIndex.nextSibling);
    } else {
      parentGfx.appendChild(childGfx);
    }
  }

  function getChildContainer(parentGfx) {
    var container = query('.children', parentGfx);

    if (!container) {
      container = create('g', { class: 'children' });
      append(parentGfx, container);
    }

    return container;
  }

  function isZeroDimensional(clientRect) {
    return clientRect.width === 0 && clientRect.height === 0;
  }

  function isPointInside(point, rect) {
    return point.x > rect.left
      && point.x < rect.left + rect.width
      && point.y > rect.top
      && point.y < rect.top + rect.height;
  }

  var sign = Math.sign || function(n) {
    return n >= 0 ? 1 : -1;
  };

  /**
   * Get step size for given range and number of steps.
   *
   * @param {Object} range - Range.
   * @param {number} range.min - Range minimum.
   * @param {number} range.max - Range maximum.
   */
  function getStepSize(range, steps) {

    var minLinearRange = Math.log(range.min) / Math.log(10),
        maxLinearRange = Math.log(range.max) / Math.log(10);

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

  function getOverlayClipPath(outer, inner) {
    var coordinates = [
      toCoordinatesString(inner.left, inner.top),
      toCoordinatesString(inner.left + inner.width, inner.top),
      toCoordinatesString(inner.left + inner.width, inner.top + inner.height),
      toCoordinatesString(inner.left, inner.top + inner.height),
      toCoordinatesString(inner.left, outer.height),
      toCoordinatesString(outer.width, outer.height),
      toCoordinatesString(outer.width, 0),
      toCoordinatesString(0, 0),
      toCoordinatesString(0, outer.height),
      toCoordinatesString(inner.left, outer.height)
    ].join(', ');

    return 'polygon(' + coordinates + ')';
  }

  function toCoordinatesString(x, y) {
    return x + 'px ' + y + 'px';
  }

  function validViewbox(viewBox) {

    return every(viewBox, function(value) {

      // check deeper structures like inner or outer viewbox
      if (isObject(value)) {
        return validViewbox(value);
      }

      return isNumber(value) && isFinite(value);
    });
  }

  function getPoint(event) {
    if (event.center) {
      return event.center;
    }

    return {
      x: event.clientX,
      y: event.clientY
    };
  }

  var index = {
    __init__: [ 'minimap' ],
    minimap: [ 'type', Minimap ]
  };

  return index;

}));