@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/dist/PanoMeasurePlugin/index.js

@@ -0,0 +1,4789 @@
+'use strict';
+
+var three = require('three');
+var line = require('@realsee/five/line');
+var five = require('@realsee/five');
+var TWEEN = require('@tweenjs/tween.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _mergeNamespaces(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);
+}
+
+var TWEEN__default = /*#__PURE__*/_interopDefaultLegacy(TWEEN);
+
+/** 交换数组元素 */
+function exchange(array, index1, index2) {
+    const value = array[index1];
+    array[index1] = array[index2];
+    array[index2] = value;
+}
+class Magnifier {
+    five;
+    scale;
+    width;
+    height;
+    pixelRatio;
+    originWidth;
+    originHeight;
+    context;
+    canvas = document.createElement('canvas');
+    container;
+    constructor(five, options) {
+        if (!five.renderer)
+            throw new Error('Five Render 未初始化');
+        this.five = five;
+        const scale = options.scale;
+        const pixelRatio = five.renderer.getPixelRatio();
+        const originWidth = options.width;
+        const originHeight = options.height;
+        const width = originWidth * pixelRatio;
+        const height = originHeight * pixelRatio;
+        const magnifier = this.canvas;
+        const context = this.canvas.getContext('2d');
+        if (!context)
+            throw new Error('CANNOT CREATE CONTEXT2D');
+        this.scale = scale;
+        this.context = context;
+        this.width = width;
+        this.height = height;
+        this.originWidth = originWidth;
+        this.originHeight = originHeight;
+        this.pixelRatio = pixelRatio;
+        magnifier.classList.add('plugin-measure-magnifier');
+        magnifier.style.position = 'absolute';
+        magnifier.style.pointerEvents = 'none';
+        magnifier.style.borderRadius = '50%';
+        magnifier.style.left = -width / 2 + 'px';
+        magnifier.style.top = -height - 90 + 'px';
+        magnifier.setAttribute('width', width.toString());
+        magnifier.setAttribute('height', height.toString());
+        this.canvas.style.width = originWidth + 'px';
+        this.canvas.style.height = originHeight + 'px';
+    }
+    dispose() {
+        this.clear();
+        this.canvas.remove();
+    }
+    clear() {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    appendTo(element) {
+        this.container = element;
+        element.append(this.canvas);
+    }
+    updateWithPoint(point) {
+        if (!this.five.renderer || !this.container)
+            return;
+        const { scale, pixelRatio, context, originWidth, originHeight, width, height } = this;
+        const position2d = point.clone().project(this.five.camera);
+        const left = ((position2d.x + 1) / 2) * this.container.clientWidth;
+        const right = (-(position2d.x - 1) / 2) * this.container.clientWidth;
+        const top = (-(position2d.y - 1) / 2) * this.container.clientHeight;
+        if (left < 183) {
+            this.canvas.style.top = -originHeight / 2 + 'px';
+            this.canvas.style.left = 90 + 'px';
+        }
+        else if (top < 183) {
+            this.canvas.style.top = 90 + 'px';
+            this.canvas.style.left = -originWidth / 2 + 'px';
+        }
+        else if (right < 183) {
+            this.canvas.style.top = -originHeight / 2 + 'px';
+            this.canvas.style.left = -originWidth - 90 + 'px';
+        }
+        else {
+            this.canvas.style.left = -originWidth / 2 + 'px';
+            this.canvas.style.top = -originHeight - 90 + 'px';
+        }
+        this.canvas.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
+        const renderSize = this.five.renderer.getSize(new three.Vector2());
+        const x = ((position2d.x + 1) / 2) * renderSize.x;
+        const y = ((position2d.y + 1) / 2) * renderSize.y;
+        const pixels = this.five.getPixels(x - originWidth / scale / 2, y - originHeight / scale / 2, originWidth / scale, originHeight / scale, pixelRatio * scale);
+        const length = (width * height) / 2;
+        for (let index = 0; index < length; index++) {
+            const targetIndex = (height - Math.floor(index / width) - 1) * width + (index % width);
+            exchange(pixels, index * 4 + 0, targetIndex * 4 + 0);
+            exchange(pixels, index * 4 + 1, targetIndex * 4 + 1);
+            exchange(pixels, index * 4 + 2, targetIndex * 4 + 2);
+            exchange(pixels, index * 4 + 3, targetIndex * 4 + 3);
+        }
+        const imageData = context.createImageData(width, height);
+        imageData.data.set(pixels);
+        context.putImageData(imageData, 0, 0);
+    }
+}
+
+class FiveHelper {
+    edges = [];
+    five;
+    constructor(five) {
+        this.five = five;
+        this.five.model.loaded ? this.onModelLoaded() : this.five.on('modelLoaded', this.onModelLoaded);
+    }
+    dispose() { }
+    getAdsorbentPoint(intersection) {
+        if (this.edges.length === 0)
+            return null;
+        let distance = Infinity;
+        let closestPoint;
+        this.edges.forEach((line) => {
+            const _closestPoint = line.closestPointToPoint(intersection.point, true, new three.Vector3());
+            const _distance = _closestPoint.distanceTo(intersection.point);
+            if (_distance < distance) {
+                closestPoint = _closestPoint;
+                distance = _distance;
+            }
+        });
+        if (distance > 0.1)
+            return null;
+        return closestPoint || null;
+    }
+    /** 模型加载后获取折线 */
+    onModelLoaded = () => {
+        if (!this.five.model)
+            return;
+        this.edges = this.five.model.getEdges();
+    };
+}
+
+var hammer = {exports: {}};
+
+/*! Hammer.JS - v2.0.7 - 2016-04-22
+ * http://hammerjs.github.io/
+ *
+ * Copyright (c) 2016 Jorik Tangelder;
+ * Licensed under the MIT license */
+
+(function (module) {
+(function(window, document, exportName, undefined$1) {
+
+var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
+var TEST_ELEMENT = document.createElement('div');
+
+var TYPE_FUNCTION = 'function';
+
+var round = Math.round;
+var abs = Math.abs;
+var now = Date.now;
+
+/**
+ * set a timeout with a given scope
+ * @param {Function} fn
+ * @param {Number} timeout
+ * @param {Object} context
+ * @returns {number}
+ */
+function setTimeoutContext(fn, timeout, context) {
+    return setTimeout(bindFn(fn, context), timeout);
+}
+
+/**
+ * if the argument is an array, we want to execute the fn on each entry
+ * if it aint an array we don't want to do a thing.
+ * this is used by all the methods that accept a single and array argument.
+ * @param {*|Array} arg
+ * @param {String} fn
+ * @param {Object} [context]
+ * @returns {Boolean}
+ */
+function invokeArrayArg(arg, fn, context) {
+    if (Array.isArray(arg)) {
+        each(arg, context[fn], context);
+        return true;
+    }
+    return false;
+}
+
+/**
+ * walk objects and arrays
+ * @param {Object} obj
+ * @param {Function} iterator
+ * @param {Object} context
+ */
+function each(obj, iterator, context) {
+    var i;
+
+    if (!obj) {
+        return;
+    }
+
+    if (obj.forEach) {
+        obj.forEach(iterator, context);
+    } else if (obj.length !== undefined$1) {
+        i = 0;
+        while (i < obj.length) {
+            iterator.call(context, obj[i], i, obj);
+            i++;
+        }
+    } else {
+        for (i in obj) {
+            obj.hasOwnProperty(i) && iterator.call(context, obj[i], i, obj);
+        }
+    }
+}
+
+/**
+ * wrap a method with a deprecation warning and stack trace
+ * @param {Function} method
+ * @param {String} name
+ * @param {String} message
+ * @returns {Function} A new function wrapping the supplied method.
+ */
+function deprecate(method, name, message) {
+    var deprecationMessage = 'DEPRECATED METHOD: ' + name + '\n' + message + ' AT \n';
+    return function() {
+        var e = new Error('get-stack-trace');
+        var stack = e && e.stack ? e.stack.replace(/^[^\(]+?[\n$]/gm, '')
+            .replace(/^\s+at\s+/gm, '')
+            .replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@') : 'Unknown Stack Trace';
+
+        var log = window.console && (window.console.warn || window.console.log);
+        if (log) {
+            log.call(window.console, deprecationMessage, stack);
+        }
+        return method.apply(this, arguments);
+    };
+}
+
+/**
+ * extend object.
+ * means that properties in dest will be overwritten by the ones in src.
+ * @param {Object} target
+ * @param {...Object} objects_to_assign
+ * @returns {Object} target
+ */
+var assign;
+if (typeof Object.assign !== 'function') {
+    assign = function assign(target) {
+        if (target === undefined$1 || target === null) {
+            throw new TypeError('Cannot convert undefined or null to object');
+        }
+
+        var output = Object(target);
+        for (var index = 1; index < arguments.length; index++) {
+            var source = arguments[index];
+            if (source !== undefined$1 && source !== null) {
+                for (var nextKey in source) {
+                    if (source.hasOwnProperty(nextKey)) {
+                        output[nextKey] = source[nextKey];
+                    }
+                }
+            }
+        }
+        return output;
+    };
+} else {
+    assign = Object.assign;
+}
+
+/**
+ * extend object.
+ * means that properties in dest will be overwritten by the ones in src.
+ * @param {Object} dest
+ * @param {Object} src
+ * @param {Boolean} [merge=false]
+ * @returns {Object} dest
+ */
+var extend = deprecate(function extend(dest, src, merge) {
+    var keys = Object.keys(src);
+    var i = 0;
+    while (i < keys.length) {
+        if (!merge || (merge && dest[keys[i]] === undefined$1)) {
+            dest[keys[i]] = src[keys[i]];
+        }
+        i++;
+    }
+    return dest;
+}, 'extend', 'Use `assign`.');
+
+/**
+ * merge the values from src in the dest.
+ * means that properties that exist in dest will not be overwritten by src
+ * @param {Object} dest
+ * @param {Object} src
+ * @returns {Object} dest
+ */
+var merge = deprecate(function merge(dest, src) {
+    return extend(dest, src, true);
+}, 'merge', 'Use `assign`.');
+
+/**
+ * simple class inheritance
+ * @param {Function} child
+ * @param {Function} base
+ * @param {Object} [properties]
+ */
+function inherit(child, base, properties) {
+    var baseP = base.prototype,
+        childP;
+
+    childP = child.prototype = Object.create(baseP);
+    childP.constructor = child;
+    childP._super = baseP;
+
+    if (properties) {
+        assign(childP, properties);
+    }
+}
+
+/**
+ * simple function bind
+ * @param {Function} fn
+ * @param {Object} context
+ * @returns {Function}
+ */
+function bindFn(fn, context) {
+    return function boundFn() {
+        return fn.apply(context, arguments);
+    };
+}
+
+/**
+ * let a boolean value also be a function that must return a boolean
+ * this first item in args will be used as the context
+ * @param {Boolean|Function} val
+ * @param {Array} [args]
+ * @returns {Boolean}
+ */
+function boolOrFn(val, args) {
+    if (typeof val == TYPE_FUNCTION) {
+        return val.apply(args ? args[0] || undefined$1 : undefined$1, args);
+    }
+    return val;
+}
+
+/**
+ * use the val2 when val1 is undefined
+ * @param {*} val1
+ * @param {*} val2
+ * @returns {*}
+ */
+function ifUndefined(val1, val2) {
+    return (val1 === undefined$1) ? val2 : val1;
+}
+
+/**
+ * addEventListener with multiple events at once
+ * @param {EventTarget} target
+ * @param {String} types
+ * @param {Function} handler
+ */
+function addEventListeners(target, types, handler) {
+    each(splitStr(types), function(type) {
+        target.addEventListener(type, handler, false);
+    });
+}
+
+/**
+ * removeEventListener with multiple events at once
+ * @param {EventTarget} target
+ * @param {String} types
+ * @param {Function} handler
+ */
+function removeEventListeners(target, types, handler) {
+    each(splitStr(types), function(type) {
+        target.removeEventListener(type, handler, false);
+    });
+}
+
+/**
+ * find if a node is in the given parent
+ * @method hasParent
+ * @param {HTMLElement} node
+ * @param {HTMLElement} parent
+ * @return {Boolean} found
+ */
+function hasParent(node, parent) {
+    while (node) {
+        if (node == parent) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+}
+
+/**
+ * small indexOf wrapper
+ * @param {String} str
+ * @param {String} find
+ * @returns {Boolean} found
+ */
+function inStr(str, find) {
+    return str.indexOf(find) > -1;
+}
+
+/**
+ * split string on whitespace
+ * @param {String} str
+ * @returns {Array} words
+ */
+function splitStr(str) {
+    return str.trim().split(/\s+/g);
+}
+
+/**
+ * find if a array contains the object using indexOf or a simple polyFill
+ * @param {Array} src
+ * @param {String} find
+ * @param {String} [findByKey]
+ * @return {Boolean|Number} false when not found, or the index
+ */
+function inArray(src, find, findByKey) {
+    if (src.indexOf && !findByKey) {
+        return src.indexOf(find);
+    } else {
+        var i = 0;
+        while (i < src.length) {
+            if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) {
+                return i;
+            }
+            i++;
+        }
+        return -1;
+    }
+}
+
+/**
+ * convert array-like objects to real arrays
+ * @param {Object} obj
+ * @returns {Array}
+ */
+function toArray(obj) {
+    return Array.prototype.slice.call(obj, 0);
+}
+
+/**
+ * unique array with objects based on a key (like 'id') or just by the array's value
+ * @param {Array} src [{id:1},{id:2},{id:1}]
+ * @param {String} [key]
+ * @param {Boolean} [sort=False]
+ * @returns {Array} [{id:1},{id:2}]
+ */
+function uniqueArray(src, key, sort) {
+    var results = [];
+    var values = [];
+    var i = 0;
+
+    while (i < src.length) {
+        var val = key ? src[i][key] : src[i];
+        if (inArray(values, val) < 0) {
+            results.push(src[i]);
+        }
+        values[i] = val;
+        i++;
+    }
+
+    if (sort) {
+        if (!key) {
+            results = results.sort();
+        } else {
+            results = results.sort(function sortUniqueArray(a, b) {
+                return a[key] > b[key];
+            });
+        }
+    }
+
+    return results;
+}
+
+/**
+ * get the prefixed property
+ * @param {Object} obj
+ * @param {String} property
+ * @returns {String|Undefined} prefixed
+ */
+function prefixed(obj, property) {
+    var prefix, prop;
+    var camelProp = property[0].toUpperCase() + property.slice(1);
+
+    var i = 0;
+    while (i < VENDOR_PREFIXES.length) {
+        prefix = VENDOR_PREFIXES[i];
+        prop = (prefix) ? prefix + camelProp : property;
+
+        if (prop in obj) {
+            return prop;
+        }
+        i++;
+    }
+    return undefined$1;
+}
+
+/**
+ * get a unique id
+ * @returns {number} uniqueId
+ */
+var _uniqueId = 1;
+function uniqueId() {
+    return _uniqueId++;
+}
+
+/**
+ * get the window object of an element
+ * @param {HTMLElement} element
+ * @returns {DocumentView|Window}
+ */
+function getWindowForElement(element) {
+    var doc = element.ownerDocument || element;
+    return (doc.defaultView || doc.parentWindow || window);
+}
+
+var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+
+var SUPPORT_TOUCH = ('ontouchstart' in window);
+var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined$1;
+var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
+
+var INPUT_TYPE_TOUCH = 'touch';
+var INPUT_TYPE_PEN = 'pen';
+var INPUT_TYPE_MOUSE = 'mouse';
+var INPUT_TYPE_KINECT = 'kinect';
+
+var COMPUTE_INTERVAL = 25;
+
+var INPUT_START = 1;
+var INPUT_MOVE = 2;
+var INPUT_END = 4;
+var INPUT_CANCEL = 8;
+
+var DIRECTION_NONE = 1;
+var DIRECTION_LEFT = 2;
+var DIRECTION_RIGHT = 4;
+var DIRECTION_UP = 8;
+var DIRECTION_DOWN = 16;
+
+var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
+var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
+var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;
+
+var PROPS_XY = ['x', 'y'];
+var PROPS_CLIENT_XY = ['clientX', 'clientY'];
+
+/**
+ * create new input type manager
+ * @param {Manager} manager
+ * @param {Function} callback
+ * @returns {Input}
+ * @constructor
+ */
+function Input(manager, callback) {
+    var self = this;
+    this.manager = manager;
+    this.callback = callback;
+    this.element = manager.element;
+    this.target = manager.options.inputTarget;
+
+    // smaller wrapper around the handler, for the scope and the enabled state of the manager,
+    // so when disabled the input events are completely bypassed.
+    this.domHandler = function(ev) {
+        if (boolOrFn(manager.options.enable, [manager])) {
+            self.handler(ev);
+        }
+    };
+
+    this.init();
+
+}
+
+Input.prototype = {
+    /**
+     * should handle the inputEvent data and trigger the callback
+     * @virtual
+     */
+    handler: function() { },
+
+    /**
+     * bind the events
+     */
+    init: function() {
+        this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
+        this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
+        this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
+    },
+
+    /**
+     * unbind the events
+     */
+    destroy: function() {
+        this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler);
+        this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler);
+        this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
+    }
+};
+
+/**
+ * create new input type manager
+ * called by the Manager constructor
+ * @param {Hammer} manager
+ * @returns {Input}
+ */
+function createInputInstance(manager) {
+    var Type;
+    var inputClass = manager.options.inputClass;
+
+    if (inputClass) {
+        Type = inputClass;
+    } else if (SUPPORT_POINTER_EVENTS) {
+        Type = PointerEventInput;
+    } else if (SUPPORT_ONLY_TOUCH) {
+        Type = TouchInput;
+    } else if (!SUPPORT_TOUCH) {
+        Type = MouseInput;
+    } else {
+        Type = TouchMouseInput;
+    }
+    return new (Type)(manager, inputHandler);
+}
+
+/**
+ * handle input events
+ * @param {Manager} manager
+ * @param {String} eventType
+ * @param {Object} input
+ */
+function inputHandler(manager, eventType, input) {
+    var pointersLen = input.pointers.length;
+    var changedPointersLen = input.changedPointers.length;
+    var isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0));
+    var isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0));
+
+    input.isFirst = !!isFirst;
+    input.isFinal = !!isFinal;
+
+    if (isFirst) {
+        manager.session = {};
+    }
+
+    // source event is the normalized value of the domEvents
+    // like 'touchstart, mouseup, pointerdown'
+    input.eventType = eventType;
+
+    // compute scale, rotation etc
+    computeInputData(manager, input);
+
+    // emit secret event
+    manager.emit('hammer.input', input);
+
+    manager.recognize(input);
+    manager.session.prevInput = input;
+}
+
+/**
+ * extend the data with some usable properties like scale, rotate, velocity etc
+ * @param {Object} manager
+ * @param {Object} input
+ */
+function computeInputData(manager, input) {
+    var session = manager.session;
+    var pointers = input.pointers;
+    var pointersLength = pointers.length;
+
+    // store the first input to calculate the distance and direction
+    if (!session.firstInput) {
+        session.firstInput = simpleCloneInputData(input);
+    }
+
+    // to compute scale and rotation we need to store the multiple touches
+    if (pointersLength > 1 && !session.firstMultiple) {
+        session.firstMultiple = simpleCloneInputData(input);
+    } else if (pointersLength === 1) {
+        session.firstMultiple = false;
+    }
+
+    var firstInput = session.firstInput;
+    var firstMultiple = session.firstMultiple;
+    var offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center;
+
+    var center = input.center = getCenter(pointers);
+    input.timeStamp = now();
+    input.deltaTime = input.timeStamp - firstInput.timeStamp;
+
+    input.angle = getAngle(offsetCenter, center);
+    input.distance = getDistance(offsetCenter, center);
+
+    computeDeltaXY(session, input);
+    input.offsetDirection = getDirection(input.deltaX, input.deltaY);
+
+    var overallVelocity = getVelocity(input.deltaTime, input.deltaX, input.deltaY);
+    input.overallVelocityX = overallVelocity.x;
+    input.overallVelocityY = overallVelocity.y;
+    input.overallVelocity = (abs(overallVelocity.x) > abs(overallVelocity.y)) ? overallVelocity.x : overallVelocity.y;
+
+    input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1;
+    input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0;
+
+    input.maxPointers = !session.prevInput ? input.pointers.length : ((input.pointers.length >
+        session.prevInput.maxPointers) ? input.pointers.length : session.prevInput.maxPointers);
+
+    computeIntervalInputData(session, input);
+
+    // find the correct target
+    var target = manager.element;
+    if (hasParent(input.srcEvent.target, target)) {
+        target = input.srcEvent.target;
+    }
+    input.target = target;
+}
+
+function computeDeltaXY(session, input) {
+    var center = input.center;
+    var offset = session.offsetDelta || {};
+    var prevDelta = session.prevDelta || {};
+    var prevInput = session.prevInput || {};
+
+    if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) {
+        prevDelta = session.prevDelta = {
+            x: prevInput.deltaX || 0,
+            y: prevInput.deltaY || 0
+        };
+
+        offset = session.offsetDelta = {
+            x: center.x,
+            y: center.y
+        };
+    }
+
+    input.deltaX = prevDelta.x + (center.x - offset.x);
+    input.deltaY = prevDelta.y + (center.y - offset.y);
+}
+
+/**
+ * velocity is calculated every x ms
+ * @param {Object} session
+ * @param {Object} input
+ */
+function computeIntervalInputData(session, input) {
+    var last = session.lastInterval || input,
+        deltaTime = input.timeStamp - last.timeStamp,
+        velocity, velocityX, velocityY, direction;
+
+    if (input.eventType != INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined$1)) {
+        var deltaX = input.deltaX - last.deltaX;
+        var deltaY = input.deltaY - last.deltaY;
+
+        var v = getVelocity(deltaTime, deltaX, deltaY);
+        velocityX = v.x;
+        velocityY = v.y;
+        velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
+        direction = getDirection(deltaX, deltaY);
+
+        session.lastInterval = input;
+    } else {
+        // use latest velocity info if it doesn't overtake a minimum period
+        velocity = last.velocity;
+        velocityX = last.velocityX;
+        velocityY = last.velocityY;
+        direction = last.direction;
+    }
+
+    input.velocity = velocity;
+    input.velocityX = velocityX;
+    input.velocityY = velocityY;
+    input.direction = direction;
+}
+
+/**
+ * create a simple clone from the input used for storage of firstInput and firstMultiple
+ * @param {Object} input
+ * @returns {Object} clonedInputData
+ */
+function simpleCloneInputData(input) {
+    // make a simple copy of the pointers because we will get a reference if we don't
+    // we only need clientXY for the calculations
+    var pointers = [];
+    var i = 0;
+    while (i < input.pointers.length) {
+        pointers[i] = {
+            clientX: round(input.pointers[i].clientX),
+            clientY: round(input.pointers[i].clientY)
+        };
+        i++;
+    }
+
+    return {
+        timeStamp: now(),
+        pointers: pointers,
+        center: getCenter(pointers),
+        deltaX: input.deltaX,
+        deltaY: input.deltaY
+    };
+}
+
+/**
+ * get the center of all the pointers
+ * @param {Array} pointers
+ * @return {Object} center contains `x` and `y` properties
+ */
+function getCenter(pointers) {
+    var pointersLength = pointers.length;
+
+    // no need to loop when only one touch
+    if (pointersLength === 1) {
+        return {
+            x: round(pointers[0].clientX),
+            y: round(pointers[0].clientY)
+        };
+    }
+
+    var x = 0, y = 0, i = 0;
+    while (i < pointersLength) {
+        x += pointers[i].clientX;
+        y += pointers[i].clientY;
+        i++;
+    }
+
+    return {
+        x: round(x / pointersLength),
+        y: round(y / pointersLength)
+    };
+}
+
+/**
+ * calculate the velocity between two points. unit is in px per ms.
+ * @param {Number} deltaTime
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Object} velocity `x` and `y`
+ */
+function getVelocity(deltaTime, x, y) {
+    return {
+        x: x / deltaTime || 0,
+        y: y / deltaTime || 0
+    };
+}
+
+/**
+ * get the direction between two points
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number} direction
+ */
+function getDirection(x, y) {
+    if (x === y) {
+        return DIRECTION_NONE;
+    }
+
+    if (abs(x) >= abs(y)) {
+        return x < 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
+    }
+    return y < 0 ? DIRECTION_UP : DIRECTION_DOWN;
+}
+
+/**
+ * calculate the absolute distance between two points
+ * @param {Object} p1 {x, y}
+ * @param {Object} p2 {x, y}
+ * @param {Array} [props] containing x and y keys
+ * @return {Number} distance
+ */
+function getDistance(p1, p2, props) {
+    if (!props) {
+        props = PROPS_XY;
+    }
+    var x = p2[props[0]] - p1[props[0]],
+        y = p2[props[1]] - p1[props[1]];
+
+    return Math.sqrt((x * x) + (y * y));
+}
+
+/**
+ * calculate the angle between two coordinates
+ * @param {Object} p1
+ * @param {Object} p2
+ * @param {Array} [props] containing x and y keys
+ * @return {Number} angle
+ */
+function getAngle(p1, p2, props) {
+    if (!props) {
+        props = PROPS_XY;
+    }
+    var x = p2[props[0]] - p1[props[0]],
+        y = p2[props[1]] - p1[props[1]];
+    return Math.atan2(y, x) * 180 / Math.PI;
+}
+
+/**
+ * calculate the rotation degrees between two pointersets
+ * @param {Array} start array of pointers
+ * @param {Array} end array of pointers
+ * @return {Number} rotation
+ */
+function getRotation(start, end) {
+    return getAngle(end[1], end[0], PROPS_CLIENT_XY) + getAngle(start[1], start[0], PROPS_CLIENT_XY);
+}
+
+/**
+ * calculate the scale factor between two pointersets
+ * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+ * @param {Array} start array of pointers
+ * @param {Array} end array of pointers
+ * @return {Number} scale
+ */
+function getScale(start, end) {
+    return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY);
+}
+
+var MOUSE_INPUT_MAP = {
+    mousedown: INPUT_START,
+    mousemove: INPUT_MOVE,
+    mouseup: INPUT_END
+};
+
+var MOUSE_ELEMENT_EVENTS = 'mousedown';
+var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';
+
+/**
+ * Mouse events input
+ * @constructor
+ * @extends Input
+ */
+function MouseInput() {
+    this.evEl = MOUSE_ELEMENT_EVENTS;
+    this.evWin = MOUSE_WINDOW_EVENTS;
+
+    this.pressed = false; // mousedown state
+
+    Input.apply(this, arguments);
+}
+
+inherit(MouseInput, Input, {
+    /**
+     * handle mouse events
+     * @param {Object} ev
+     */
+    handler: function MEhandler(ev) {
+        var eventType = MOUSE_INPUT_MAP[ev.type];
+
+        // on start we want to have the left mouse button down
+        if (eventType & INPUT_START && ev.button === 0) {
+            this.pressed = true;
+        }
+
+        if (eventType & INPUT_MOVE && ev.which !== 1) {
+            eventType = INPUT_END;
+        }
+
+        // mouse must be down
+        if (!this.pressed) {
+            return;
+        }
+
+        if (eventType & INPUT_END) {
+            this.pressed = false;
+        }
+
+        this.callback(this.manager, eventType, {
+            pointers: [ev],
+            changedPointers: [ev],
+            pointerType: INPUT_TYPE_MOUSE,
+            srcEvent: ev
+        });
+    }
+});
+
+var POINTER_INPUT_MAP = {
+    pointerdown: INPUT_START,
+    pointermove: INPUT_MOVE,
+    pointerup: INPUT_END,
+    pointercancel: INPUT_CANCEL,
+    pointerout: INPUT_CANCEL
+};
+
+// in IE10 the pointer types is defined as an enum
+var IE10_POINTER_TYPE_ENUM = {
+    2: INPUT_TYPE_TOUCH,
+    3: INPUT_TYPE_PEN,
+    4: INPUT_TYPE_MOUSE,
+    5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
+};
+
+var POINTER_ELEMENT_EVENTS = 'pointerdown';
+var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';
+
+// IE10 has prefixed support, and case-sensitive
+if (window.MSPointerEvent && !window.PointerEvent) {
+    POINTER_ELEMENT_EVENTS = 'MSPointerDown';
+    POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel';
+}
+
+/**
+ * Pointer events input
+ * @constructor
+ * @extends Input
+ */
+function PointerEventInput() {
+    this.evEl = POINTER_ELEMENT_EVENTS;
+    this.evWin = POINTER_WINDOW_EVENTS;
+
+    Input.apply(this, arguments);
+
+    this.store = (this.manager.session.pointerEvents = []);
+}
+
+inherit(PointerEventInput, Input, {
+    /**
+     * handle mouse events
+     * @param {Object} ev
+     */
+    handler: function PEhandler(ev) {
+        var store = this.store;
+        var removePointer = false;
+
+        var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
+        var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
+        var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;
+
+        var isTouch = (pointerType == INPUT_TYPE_TOUCH);
+
+        // get index of the event in the store
+        var storeIndex = inArray(store, ev.pointerId, 'pointerId');
+
+        // start and mouse must be down
+        if (eventType & INPUT_START && (ev.button === 0 || isTouch)) {
+            if (storeIndex < 0) {
+                store.push(ev);
+                storeIndex = store.length - 1;
+            }
+        } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
+            removePointer = true;
+        }
+
+        // it not found, so the pointer hasn't been down (so it's probably a hover)
+        if (storeIndex < 0) {
+            return;
+        }
+
+        // update the event in the store
+        store[storeIndex] = ev;
+
+        this.callback(this.manager, eventType, {
+            pointers: store,
+            changedPointers: [ev],
+            pointerType: pointerType,
+            srcEvent: ev
+        });
+
+        if (removePointer) {
+            // remove from the store
+            store.splice(storeIndex, 1);
+        }
+    }
+});
+
+var SINGLE_TOUCH_INPUT_MAP = {
+    touchstart: INPUT_START,
+    touchmove: INPUT_MOVE,
+    touchend: INPUT_END,
+    touchcancel: INPUT_CANCEL
+};
+
+var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
+var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';
+
+/**
+ * Touch events input
+ * @constructor
+ * @extends Input
+ */
+function SingleTouchInput() {
+    this.evTarget = SINGLE_TOUCH_TARGET_EVENTS;
+    this.evWin = SINGLE_TOUCH_WINDOW_EVENTS;
+    this.started = false;
+
+    Input.apply(this, arguments);
+}
+
+inherit(SingleTouchInput, Input, {
+    handler: function TEhandler(ev) {
+        var type = SINGLE_TOUCH_INPUT_MAP[ev.type];
+
+        // should we handle the touch events?
+        if (type === INPUT_START) {
+            this.started = true;
+        }
+
+        if (!this.started) {
+            return;
+        }
+
+        var touches = normalizeSingleTouches.call(this, ev, type);
+
+        // when done, reset the started state
+        if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) {
+            this.started = false;
+        }
+
+        this.callback(this.manager, type, {
+            pointers: touches[0],
+            changedPointers: touches[1],
+            pointerType: INPUT_TYPE_TOUCH,
+            srcEvent: ev
+        });
+    }
+});
+
+/**
+ * @this {TouchInput}
+ * @param {Object} ev
+ * @param {Number} type flag
+ * @returns {undefined|Array} [all, changed]
+ */
+function normalizeSingleTouches(ev, type) {
+    var all = toArray(ev.touches);
+    var changed = toArray(ev.changedTouches);
+
+    if (type & (INPUT_END | INPUT_CANCEL)) {
+        all = uniqueArray(all.concat(changed), 'identifier', true);
+    }
+
+    return [all, changed];
+}
+
+var TOUCH_INPUT_MAP = {
+    touchstart: INPUT_START,
+    touchmove: INPUT_MOVE,
+    touchend: INPUT_END,
+    touchcancel: INPUT_CANCEL
+};
+
+var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';
+
+/**
+ * Multi-user touch events input
+ * @constructor
+ * @extends Input
+ */
+function TouchInput() {
+    this.evTarget = TOUCH_TARGET_EVENTS;
+    this.targetIds = {};
+
+    Input.apply(this, arguments);
+}
+
+inherit(TouchInput, Input, {
+    handler: function MTEhandler(ev) {
+        var type = TOUCH_INPUT_MAP[ev.type];
+        var touches = getTouches.call(this, ev, type);
+        if (!touches) {
+            return;
+        }
+
+        this.callback(this.manager, type, {
+            pointers: touches[0],
+            changedPointers: touches[1],
+            pointerType: INPUT_TYPE_TOUCH,
+            srcEvent: ev
+        });
+    }
+});
+
+/**
+ * @this {TouchInput}
+ * @param {Object} ev
+ * @param {Number} type flag
+ * @returns {undefined|Array} [all, changed]
+ */
+function getTouches(ev, type) {
+    var allTouches = toArray(ev.touches);
+    var targetIds = this.targetIds;
+
+    // when there is only one touch, the process can be simplified
+    if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) {
+        targetIds[allTouches[0].identifier] = true;
+        return [allTouches, allTouches];
+    }
+
+    var i,
+        targetTouches,
+        changedTouches = toArray(ev.changedTouches),
+        changedTargetTouches = [],
+        target = this.target;
+
+    // get target touches from touches
+    targetTouches = allTouches.filter(function(touch) {
+        return hasParent(touch.target, target);
+    });
+
+    // collect touches
+    if (type === INPUT_START) {
+        i = 0;
+        while (i < targetTouches.length) {
+            targetIds[targetTouches[i].identifier] = true;
+            i++;
+        }
+    }
+
+    // filter changed touches to only contain touches that exist in the collected target ids
+    i = 0;
+    while (i < changedTouches.length) {
+        if (targetIds[changedTouches[i].identifier]) {
+            changedTargetTouches.push(changedTouches[i]);
+        }
+
+        // cleanup removed touches
+        if (type & (INPUT_END | INPUT_CANCEL)) {
+            delete targetIds[changedTouches[i].identifier];
+        }
+        i++;
+    }
+
+    if (!changedTargetTouches.length) {
+        return;
+    }
+
+    return [
+        // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
+        uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true),
+        changedTargetTouches
+    ];
+}
+
+/**
+ * Combined touch and mouse input
+ *
+ * Touch has a higher priority then mouse, and while touching no mouse events are allowed.
+ * This because touch devices also emit mouse events while doing a touch.
+ *
+ * @constructor
+ * @extends Input
+ */
+
+var DEDUP_TIMEOUT = 2500;
+var DEDUP_DISTANCE = 25;
+
+function TouchMouseInput() {
+    Input.apply(this, arguments);
+
+    var handler = bindFn(this.handler, this);
+    this.touch = new TouchInput(this.manager, handler);
+    this.mouse = new MouseInput(this.manager, handler);
+
+    this.primaryTouch = null;
+    this.lastTouches = [];
+}
+
+inherit(TouchMouseInput, Input, {
+    /**
+     * handle mouse and touch events
+     * @param {Hammer} manager
+     * @param {String} inputEvent
+     * @param {Object} inputData
+     */
+    handler: function TMEhandler(manager, inputEvent, inputData) {
+        var isTouch = (inputData.pointerType == INPUT_TYPE_TOUCH),
+            isMouse = (inputData.pointerType == INPUT_TYPE_MOUSE);
+
+        if (isMouse && inputData.sourceCapabilities && inputData.sourceCapabilities.firesTouchEvents) {
+            return;
+        }
+
+        // when we're in a touch event, record touches to  de-dupe synthetic mouse event
+        if (isTouch) {
+            recordTouches.call(this, inputEvent, inputData);
+        } else if (isMouse && isSyntheticEvent.call(this, inputData)) {
+            return;
+        }
+
+        this.callback(manager, inputEvent, inputData);
+    },
+
+    /**
+     * remove the event listeners
+     */
+    destroy: function destroy() {
+        this.touch.destroy();
+        this.mouse.destroy();
+    }
+});
+
+function recordTouches(eventType, eventData) {
+    if (eventType & INPUT_START) {
+        this.primaryTouch = eventData.changedPointers[0].identifier;
+        setLastTouch.call(this, eventData);
+    } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
+        setLastTouch.call(this, eventData);
+    }
+}
+
+function setLastTouch(eventData) {
+    var touch = eventData.changedPointers[0];
+
+    if (touch.identifier === this.primaryTouch) {
+        var lastTouch = {x: touch.clientX, y: touch.clientY};
+        this.lastTouches.push(lastTouch);
+        var lts = this.lastTouches;
+        var removeLastTouch = function() {
+            var i = lts.indexOf(lastTouch);
+            if (i > -1) {
+                lts.splice(i, 1);
+            }
+        };
+        setTimeout(removeLastTouch, DEDUP_TIMEOUT);
+    }
+}
+
+function isSyntheticEvent(eventData) {
+    var x = eventData.srcEvent.clientX, y = eventData.srcEvent.clientY;
+    for (var i = 0; i < this.lastTouches.length; i++) {
+        var t = this.lastTouches[i];
+        var dx = Math.abs(x - t.x), dy = Math.abs(y - t.y);
+        if (dx <= DEDUP_DISTANCE && dy <= DEDUP_DISTANCE) {
+            return true;
+        }
+    }
+    return false;
+}
+
+var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
+var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined$1;
+
+// magical touchAction value
+var TOUCH_ACTION_COMPUTE = 'compute';
+var TOUCH_ACTION_AUTO = 'auto';
+var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
+var TOUCH_ACTION_NONE = 'none';
+var TOUCH_ACTION_PAN_X = 'pan-x';
+var TOUCH_ACTION_PAN_Y = 'pan-y';
+var TOUCH_ACTION_MAP = getTouchActionProps();
+
+/**
+ * Touch Action
+ * sets the touchAction property or uses the js alternative
+ * @param {Manager} manager
+ * @param {String} value
+ * @constructor
+ */
+function TouchAction(manager, value) {
+    this.manager = manager;
+    this.set(value);
+}
+
+TouchAction.prototype = {
+    /**
+     * set the touchAction value on the element or enable the polyfill
+     * @param {String} value
+     */
+    set: function(value) {
+        // find out the touch-action by the event handlers
+        if (value == TOUCH_ACTION_COMPUTE) {
+            value = this.compute();
+        }
+
+        if (NATIVE_TOUCH_ACTION && this.manager.element.style && TOUCH_ACTION_MAP[value]) {
+            this.manager.element.style[PREFIXED_TOUCH_ACTION] = value;
+        }
+        this.actions = value.toLowerCase().trim();
+    },
+
+    /**
+     * just re-set the touchAction value
+     */
+    update: function() {
+        this.set(this.manager.options.touchAction);
+    },
+
+    /**
+     * compute the value for the touchAction property based on the recognizer's settings
+     * @returns {String} value
+     */
+    compute: function() {
+        var actions = [];
+        each(this.manager.recognizers, function(recognizer) {
+            if (boolOrFn(recognizer.options.enable, [recognizer])) {
+                actions = actions.concat(recognizer.getTouchAction());
+            }
+        });
+        return cleanTouchActions(actions.join(' '));
+    },
+
+    /**
+     * this method is called on each input cycle and provides the preventing of the browser behavior
+     * @param {Object} input
+     */
+    preventDefaults: function(input) {
+        var srcEvent = input.srcEvent;
+        var direction = input.offsetDirection;
+
+        // if the touch action did prevented once this session
+        if (this.manager.session.prevented) {
+            srcEvent.preventDefault();
+            return;
+        }
+
+        var actions = this.actions;
+        var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
+        var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
+        var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];
+
+        if (hasNone) {
+            //do not prevent defaults if this is a tap gesture
+
+            var isTapPointer = input.pointers.length === 1;
+            var isTapMovement = input.distance < 2;
+            var isTapTouchTime = input.deltaTime < 250;
+
+            if (isTapPointer && isTapMovement && isTapTouchTime) {
+                return;
+            }
+        }
+
+        if (hasPanX && hasPanY) {
+            // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent
+            return;
+        }
+
+        if (hasNone ||
+            (hasPanY && direction & DIRECTION_HORIZONTAL) ||
+            (hasPanX && direction & DIRECTION_VERTICAL)) {
+            return this.preventSrc(srcEvent);
+        }
+    },
+
+    /**
+     * call preventDefault to prevent the browser's default behavior (scrolling in most cases)
+     * @param {Object} srcEvent
+     */
+    preventSrc: function(srcEvent) {
+        this.manager.session.prevented = true;
+        srcEvent.preventDefault();
+    }
+};
+
+/**
+ * when the touchActions are collected they are not a valid value, so we need to clean things up. *
+ * @param {String} actions
+ * @returns {*}
+ */
+function cleanTouchActions(actions) {
+    // none
+    if (inStr(actions, TOUCH_ACTION_NONE)) {
+        return TOUCH_ACTION_NONE;
+    }
+
+    var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
+    var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
+
+    // if both pan-x and pan-y are set (different recognizers
+    // for different directions, e.g. horizontal pan but vertical swipe?)
+    // we need none (as otherwise with pan-x pan-y combined none of these
+    // recognizers will work, since the browser would handle all panning
+    if (hasPanX && hasPanY) {
+        return TOUCH_ACTION_NONE;
+    }
+
+    // pan-x OR pan-y
+    if (hasPanX || hasPanY) {
+        return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y;
+    }
+
+    // manipulation
+    if (inStr(actions, TOUCH_ACTION_MANIPULATION)) {
+        return TOUCH_ACTION_MANIPULATION;
+    }
+
+    return TOUCH_ACTION_AUTO;
+}
+
+function getTouchActionProps() {
+    if (!NATIVE_TOUCH_ACTION) {
+        return false;
+    }
+    var touchMap = {};
+    var cssSupports = window.CSS && window.CSS.supports;
+    ['auto', 'manipulation', 'pan-y', 'pan-x', 'pan-x pan-y', 'none'].forEach(function(val) {
+
+        // If css.supports is not supported but there is native touch-action assume it supports
+        // all values. This is the case for IE 10 and 11.
+        touchMap[val] = cssSupports ? window.CSS.supports('touch-action', val) : true;
+    });
+    return touchMap;
+}
+
+/**
+ * Recognizer flow explained; *
+ * All recognizers have the initial state of POSSIBLE when a input session starts.
+ * The definition of a input session is from the first input until the last input, with all it's movement in it. *
+ * Example session for mouse-input: mousedown -> mousemove -> mouseup
+ *
+ * On each recognizing cycle (see Manager.recognize) the .recognize() method is executed
+ * which determines with state it should be.
+ *
+ * If the recognizer has the state FAILED, CANCELLED or RECOGNIZED (equals ENDED), it is reset to
+ * POSSIBLE to give it another change on the next cycle.
+ *
+ *               Possible
+ *                  |
+ *            +-----+---------------+
+ *            |                     |
+ *      +-----+-----+               |
+ *      |           |               |
+ *   Failed      Cancelled          |
+ *                          +-------+------+
+ *                          |              |
+ *                      Recognized       Began
+ *                                         |
+ *                                      Changed
+ *                                         |
+ *                                  Ended/Recognized
+ */
+var STATE_POSSIBLE = 1;
+var STATE_BEGAN = 2;
+var STATE_CHANGED = 4;
+var STATE_ENDED = 8;
+var STATE_RECOGNIZED = STATE_ENDED;
+var STATE_CANCELLED = 16;
+var STATE_FAILED = 32;
+
+/**
+ * Recognizer
+ * Every recognizer needs to extend from this class.
+ * @constructor
+ * @param {Object} options
+ */
+function Recognizer(options) {
+    this.options = assign({}, this.defaults, options || {});
+
+    this.id = uniqueId();
+
+    this.manager = null;
+
+    // default is enable true
+    this.options.enable = ifUndefined(this.options.enable, true);
+
+    this.state = STATE_POSSIBLE;
+
+    this.simultaneous = {};
+    this.requireFail = [];
+}
+
+Recognizer.prototype = {
+    /**
+     * @virtual
+     * @type {Object}
+     */
+    defaults: {},
+
+    /**
+     * set options
+     * @param {Object} options
+     * @return {Recognizer}
+     */
+    set: function(options) {
+        assign(this.options, options);
+
+        // also update the touchAction, in case something changed about the directions/enabled state
+        this.manager && this.manager.touchAction.update();
+        return this;
+    },
+
+    /**
+     * recognize simultaneous with an other recognizer.
+     * @param {Recognizer} otherRecognizer
+     * @returns {Recognizer} this
+     */
+    recognizeWith: function(otherRecognizer) {
+        if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) {
+            return this;
+        }
+
+        var simultaneous = this.simultaneous;
+        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+        if (!simultaneous[otherRecognizer.id]) {
+            simultaneous[otherRecognizer.id] = otherRecognizer;
+            otherRecognizer.recognizeWith(this);
+        }
+        return this;
+    },
+
+    /**
+     * drop the simultaneous link. it doesnt remove the link on the other recognizer.
+     * @param {Recognizer} otherRecognizer
+     * @returns {Recognizer} this
+     */
+    dropRecognizeWith: function(otherRecognizer) {
+        if (invokeArrayArg(otherRecognizer, 'dropRecognizeWith', this)) {
+            return this;
+        }
+
+        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+        delete this.simultaneous[otherRecognizer.id];
+        return this;
+    },
+
+    /**
+     * recognizer can only run when an other is failing
+     * @param {Recognizer} otherRecognizer
+     * @returns {Recognizer} this
+     */
+    requireFailure: function(otherRecognizer) {
+        if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) {
+            return this;
+        }
+
+        var requireFail = this.requireFail;
+        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+        if (inArray(requireFail, otherRecognizer) === -1) {
+            requireFail.push(otherRecognizer);
+            otherRecognizer.requireFailure(this);
+        }
+        return this;
+    },
+
+    /**
+     * drop the requireFailure link. it does not remove the link on the other recognizer.
+     * @param {Recognizer} otherRecognizer
+     * @returns {Recognizer} this
+     */
+    dropRequireFailure: function(otherRecognizer) {
+        if (invokeArrayArg(otherRecognizer, 'dropRequireFailure', this)) {
+            return this;
+        }
+
+        otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+        var index = inArray(this.requireFail, otherRecognizer);
+        if (index > -1) {
+            this.requireFail.splice(index, 1);
+        }
+        return this;
+    },
+
+    /**
+     * has require failures boolean
+     * @returns {boolean}
+     */
+    hasRequireFailures: function() {
+        return this.requireFail.length > 0;
+    },
+
+    /**
+     * if the recognizer can recognize simultaneous with an other recognizer
+     * @param {Recognizer} otherRecognizer
+     * @returns {Boolean}
+     */
+    canRecognizeWith: function(otherRecognizer) {
+        return !!this.simultaneous[otherRecognizer.id];
+    },
+
+    /**
+     * You should use `tryEmit` instead of `emit` directly to check
+     * that all the needed recognizers has failed before emitting.
+     * @param {Object} input
+     */
+    emit: function(input) {
+        var self = this;
+        var state = this.state;
+
+        function emit(event) {
+            self.manager.emit(event, input);
+        }
+
+        // 'panstart' and 'panmove'
+        if (state < STATE_ENDED) {
+            emit(self.options.event + stateStr(state));
+        }
+
+        emit(self.options.event); // simple 'eventName' events
+
+        if (input.additionalEvent) { // additional event(panleft, panright, pinchin, pinchout...)
+            emit(input.additionalEvent);
+        }
+
+        // panend and pancancel
+        if (state >= STATE_ENDED) {
+            emit(self.options.event + stateStr(state));
+        }
+    },
+
+    /**
+     * Check that all the require failure recognizers has failed,
+     * if true, it emits a gesture event,
+     * otherwise, setup the state to FAILED.
+     * @param {Object} input
+     */
+    tryEmit: function(input) {
+        if (this.canEmit()) {
+            return this.emit(input);
+        }
+        // it's failing anyway
+        this.state = STATE_FAILED;
+    },
+
+    /**
+     * can we emit?
+     * @returns {boolean}
+     */
+    canEmit: function() {
+        var i = 0;
+        while (i < this.requireFail.length) {
+            if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) {
+                return false;
+            }
+            i++;
+        }
+        return true;
+    },
+
+    /**
+     * update the recognizer
+     * @param {Object} inputData
+     */
+    recognize: function(inputData) {
+        // make a new copy of the inputData
+        // so we can change the inputData without messing up the other recognizers
+        var inputDataClone = assign({}, inputData);
+
+        // is is enabled and allow recognizing?
+        if (!boolOrFn(this.options.enable, [this, inputDataClone])) {
+            this.reset();
+            this.state = STATE_FAILED;
+            return;
+        }
+
+        // reset when we've reached the end
+        if (this.state & (STATE_RECOGNIZED | STATE_CANCELLED | STATE_FAILED)) {
+            this.state = STATE_POSSIBLE;
+        }
+
+        this.state = this.process(inputDataClone);
+
+        // the recognizer has recognized a gesture
+        // so trigger an event
+        if (this.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED | STATE_CANCELLED)) {
+            this.tryEmit(inputDataClone);
+        }
+    },
+
+    /**
+     * return the state of the recognizer
+     * the actual recognizing happens in this method
+     * @virtual
+     * @param {Object} inputData
+     * @returns {Const} STATE
+     */
+    process: function(inputData) { }, // jshint ignore:line
+
+    /**
+     * return the preferred touch-action
+     * @virtual
+     * @returns {Array}
+     */
+    getTouchAction: function() { },
+
+    /**
+     * called when the gesture isn't allowed to recognize
+     * like when another is being recognized or it is disabled
+     * @virtual
+     */
+    reset: function() { }
+};
+
+/**
+ * get a usable string, used as event postfix
+ * @param {Const} state
+ * @returns {String} state
+ */
+function stateStr(state) {
+    if (state & STATE_CANCELLED) {
+        return 'cancel';
+    } else if (state & STATE_ENDED) {
+        return 'end';
+    } else if (state & STATE_CHANGED) {
+        return 'move';
+    } else if (state & STATE_BEGAN) {
+        return 'start';
+    }
+    return '';
+}
+
+/**
+ * direction cons to string
+ * @param {Const} direction
+ * @returns {String}
+ */
+function directionStr(direction) {
+    if (direction == DIRECTION_DOWN) {
+        return 'down';
+    } else if (direction == DIRECTION_UP) {
+        return 'up';
+    } else if (direction == DIRECTION_LEFT) {
+        return 'left';
+    } else if (direction == DIRECTION_RIGHT) {
+        return 'right';
+    }
+    return '';
+}
+
+/**
+ * get a recognizer by name if it is bound to a manager
+ * @param {Recognizer|String} otherRecognizer
+ * @param {Recognizer} recognizer
+ * @returns {Recognizer}
+ */
+function getRecognizerByNameIfManager(otherRecognizer, recognizer) {
+    var manager = recognizer.manager;
+    if (manager) {
+        return manager.get(otherRecognizer);
+    }
+    return otherRecognizer;
+}
+
+/**
+ * This recognizer is just used as a base for the simple attribute recognizers.
+ * @constructor
+ * @extends Recognizer
+ */
+function AttrRecognizer() {
+    Recognizer.apply(this, arguments);
+}
+
+inherit(AttrRecognizer, Recognizer, {
+    /**
+     * @namespace
+     * @memberof AttrRecognizer
+     */
+    defaults: {
+        /**
+         * @type {Number}
+         * @default 1
+         */
+        pointers: 1
+    },
+
+    /**
+     * Used to check if it the recognizer receives valid input, like input.distance > 10.
+     * @memberof AttrRecognizer
+     * @param {Object} input
+     * @returns {Boolean} recognized
+     */
+    attrTest: function(input) {
+        var optionPointers = this.options.pointers;
+        return optionPointers === 0 || input.pointers.length === optionPointers;
+    },
+
+    /**
+     * Process the input and return the state for the recognizer
+     * @memberof AttrRecognizer
+     * @param {Object} input
+     * @returns {*} State
+     */
+    process: function(input) {
+        var state = this.state;
+        var eventType = input.eventType;
+
+        var isRecognized = state & (STATE_BEGAN | STATE_CHANGED);
+        var isValid = this.attrTest(input);
+
+        // on cancel input and we've recognized before, return STATE_CANCELLED
+        if (isRecognized && (eventType & INPUT_CANCEL || !isValid)) {
+            return state | STATE_CANCELLED;
+        } else if (isRecognized || isValid) {
+            if (eventType & INPUT_END) {
+                return state | STATE_ENDED;
+            } else if (!(state & STATE_BEGAN)) {
+                return STATE_BEGAN;
+            }
+            return state | STATE_CHANGED;
+        }
+        return STATE_FAILED;
+    }
+});
+
+/**
+ * Pan
+ * Recognized when the pointer is down and moved in the allowed direction.
+ * @constructor
+ * @extends AttrRecognizer
+ */
+function PanRecognizer() {
+    AttrRecognizer.apply(this, arguments);
+
+    this.pX = null;
+    this.pY = null;
+}
+
+inherit(PanRecognizer, AttrRecognizer, {
+    /**
+     * @namespace
+     * @memberof PanRecognizer
+     */
+    defaults: {
+        event: 'pan',
+        threshold: 10,
+        pointers: 1,
+        direction: DIRECTION_ALL
+    },
+
+    getTouchAction: function() {
+        var direction = this.options.direction;
+        var actions = [];
+        if (direction & DIRECTION_HORIZONTAL) {
+            actions.push(TOUCH_ACTION_PAN_Y);
+        }
+        if (direction & DIRECTION_VERTICAL) {
+            actions.push(TOUCH_ACTION_PAN_X);
+        }
+        return actions;
+    },
+
+    directionTest: function(input) {
+        var options = this.options;
+        var hasMoved = true;
+        var distance = input.distance;
+        var direction = input.direction;
+        var x = input.deltaX;
+        var y = input.deltaY;
+
+        // lock to axis?
+        if (!(direction & options.direction)) {
+            if (options.direction & DIRECTION_HORIZONTAL) {
+                direction = (x === 0) ? DIRECTION_NONE : (x < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
+                hasMoved = x != this.pX;
+                distance = Math.abs(input.deltaX);
+            } else {
+                direction = (y === 0) ? DIRECTION_NONE : (y < 0) ? DIRECTION_UP : DIRECTION_DOWN;
+                hasMoved = y != this.pY;
+                distance = Math.abs(input.deltaY);
+            }
+        }
+        input.direction = direction;
+        return hasMoved && distance > options.threshold && direction & options.direction;
+    },
+
+    attrTest: function(input) {
+        return AttrRecognizer.prototype.attrTest.call(this, input) &&
+            (this.state & STATE_BEGAN || (!(this.state & STATE_BEGAN) && this.directionTest(input)));
+    },
+
+    emit: function(input) {
+
+        this.pX = input.deltaX;
+        this.pY = input.deltaY;
+
+        var direction = directionStr(input.direction);
+
+        if (direction) {
+            input.additionalEvent = this.options.event + direction;
+        }
+        this._super.emit.call(this, input);
+    }
+});
+
+/**
+ * Pinch
+ * Recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out).
+ * @constructor
+ * @extends AttrRecognizer
+ */
+function PinchRecognizer() {
+    AttrRecognizer.apply(this, arguments);
+}
+
+inherit(PinchRecognizer, AttrRecognizer, {
+    /**
+     * @namespace
+     * @memberof PinchRecognizer
+     */
+    defaults: {
+        event: 'pinch',
+        threshold: 0,
+        pointers: 2
+    },
+
+    getTouchAction: function() {
+        return [TOUCH_ACTION_NONE];
+    },
+
+    attrTest: function(input) {
+        return this._super.attrTest.call(this, input) &&
+            (Math.abs(input.scale - 1) > this.options.threshold || this.state & STATE_BEGAN);
+    },
+
+    emit: function(input) {
+        if (input.scale !== 1) {
+            var inOut = input.scale < 1 ? 'in' : 'out';
+            input.additionalEvent = this.options.event + inOut;
+        }
+        this._super.emit.call(this, input);
+    }
+});
+
+/**
+ * Press
+ * Recognized when the pointer is down for x ms without any movement.
+ * @constructor
+ * @extends Recognizer
+ */
+function PressRecognizer() {
+    Recognizer.apply(this, arguments);
+
+    this._timer = null;
+    this._input = null;
+}
+
+inherit(PressRecognizer, Recognizer, {
+    /**
+     * @namespace
+     * @memberof PressRecognizer
+     */
+    defaults: {
+        event: 'press',
+        pointers: 1,
+        time: 251, // minimal time of the pointer to be pressed
+        threshold: 9 // a minimal movement is ok, but keep it low
+    },
+
+    getTouchAction: function() {
+        return [TOUCH_ACTION_AUTO];
+    },
+
+    process: function(input) {
+        var options = this.options;
+        var validPointers = input.pointers.length === options.pointers;
+        var validMovement = input.distance < options.threshold;
+        var validTime = input.deltaTime > options.time;
+
+        this._input = input;
+
+        // we only allow little movement
+        // and we've reached an end event, so a tap is possible
+        if (!validMovement || !validPointers || (input.eventType & (INPUT_END | INPUT_CANCEL) && !validTime)) {
+            this.reset();
+        } else if (input.eventType & INPUT_START) {
+            this.reset();
+            this._timer = setTimeoutContext(function() {
+                this.state = STATE_RECOGNIZED;
+                this.tryEmit();
+            }, options.time, this);
+        } else if (input.eventType & INPUT_END) {
+            return STATE_RECOGNIZED;
+        }
+        return STATE_FAILED;
+    },
+
+    reset: function() {
+        clearTimeout(this._timer);
+    },
+
+    emit: function(input) {
+        if (this.state !== STATE_RECOGNIZED) {
+            return;
+        }
+
+        if (input && (input.eventType & INPUT_END)) {
+            this.manager.emit(this.options.event + 'up', input);
+        } else {
+            this._input.timeStamp = now();
+            this.manager.emit(this.options.event, this._input);
+        }
+    }
+});
+
+/**
+ * Rotate
+ * Recognized when two or more pointer are moving in a circular motion.
+ * @constructor
+ * @extends AttrRecognizer
+ */
+function RotateRecognizer() {
+    AttrRecognizer.apply(this, arguments);
+}
+
+inherit(RotateRecognizer, AttrRecognizer, {
+    /**
+     * @namespace
+     * @memberof RotateRecognizer
+     */
+    defaults: {
+        event: 'rotate',
+        threshold: 0,
+        pointers: 2
+    },
+
+    getTouchAction: function() {
+        return [TOUCH_ACTION_NONE];
+    },
+
+    attrTest: function(input) {
+        return this._super.attrTest.call(this, input) &&
+            (Math.abs(input.rotation) > this.options.threshold || this.state & STATE_BEGAN);
+    }
+});
+
+/**
+ * Swipe
+ * Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction.
+ * @constructor
+ * @extends AttrRecognizer
+ */
+function SwipeRecognizer() {
+    AttrRecognizer.apply(this, arguments);
+}
+
+inherit(SwipeRecognizer, AttrRecognizer, {
+    /**
+     * @namespace
+     * @memberof SwipeRecognizer
+     */
+    defaults: {
+        event: 'swipe',
+        threshold: 10,
+        velocity: 0.3,
+        direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL,
+        pointers: 1
+    },
+
+    getTouchAction: function() {
+        return PanRecognizer.prototype.getTouchAction.call(this);
+    },
+
+    attrTest: function(input) {
+        var direction = this.options.direction;
+        var velocity;
+
+        if (direction & (DIRECTION_HORIZONTAL | DIRECTION_VERTICAL)) {
+            velocity = input.overallVelocity;
+        } else if (direction & DIRECTION_HORIZONTAL) {
+            velocity = input.overallVelocityX;
+        } else if (direction & DIRECTION_VERTICAL) {
+            velocity = input.overallVelocityY;
+        }
+
+        return this._super.attrTest.call(this, input) &&
+            direction & input.offsetDirection &&
+            input.distance > this.options.threshold &&
+            input.maxPointers == this.options.pointers &&
+            abs(velocity) > this.options.velocity && input.eventType & INPUT_END;
+    },
+
+    emit: function(input) {
+        var direction = directionStr(input.offsetDirection);
+        if (direction) {
+            this.manager.emit(this.options.event + direction, input);
+        }
+
+        this.manager.emit(this.options.event, input);
+    }
+});
+
+/**
+ * A tap is ecognized when the pointer is doing a small tap/click. Multiple taps are recognized if they occur
+ * between the given interval and position. The delay option can be used to recognize multi-taps without firing
+ * a single tap.
+ *
+ * The eventData from the emitted event contains the property `tapCount`, which contains the amount of
+ * multi-taps being recognized.
+ * @constructor
+ * @extends Recognizer
+ */
+function TapRecognizer() {
+    Recognizer.apply(this, arguments);
+
+    // previous time and center,
+    // used for tap counting
+    this.pTime = false;
+    this.pCenter = false;
+
+    this._timer = null;
+    this._input = null;
+    this.count = 0;
+}
+
+inherit(TapRecognizer, Recognizer, {
+    /**
+     * @namespace
+     * @memberof PinchRecognizer
+     */
+    defaults: {
+        event: 'tap',
+        pointers: 1,
+        taps: 1,
+        interval: 300, // max time between the multi-tap taps
+        time: 250, // max time of the pointer to be down (like finger on the screen)
+        threshold: 9, // a minimal movement is ok, but keep it low
+        posThreshold: 10 // a multi-tap can be a bit off the initial position
+    },
+
+    getTouchAction: function() {
+        return [TOUCH_ACTION_MANIPULATION];
+    },
+
+    process: function(input) {
+        var options = this.options;
+
+        var validPointers = input.pointers.length === options.pointers;
+        var validMovement = input.distance < options.threshold;
+        var validTouchTime = input.deltaTime < options.time;
+
+        this.reset();
+
+        if ((input.eventType & INPUT_START) && (this.count === 0)) {
+            return this.failTimeout();
+        }
+
+        // we only allow little movement
+        // and we've reached an end event, so a tap is possible
+        if (validMovement && validTouchTime && validPointers) {
+            if (input.eventType != INPUT_END) {
+                return this.failTimeout();
+            }
+
+            var validInterval = this.pTime ? (input.timeStamp - this.pTime < options.interval) : true;
+            var validMultiTap = !this.pCenter || getDistance(this.pCenter, input.center) < options.posThreshold;
+
+            this.pTime = input.timeStamp;
+            this.pCenter = input.center;
+
+            if (!validMultiTap || !validInterval) {
+                this.count = 1;
+            } else {
+                this.count += 1;
+            }
+
+            this._input = input;
+
+            // if tap count matches we have recognized it,
+            // else it has began recognizing...
+            var tapCount = this.count % options.taps;
+            if (tapCount === 0) {
+                // no failing requirements, immediately trigger the tap event
+                // or wait as long as the multitap interval to trigger
+                if (!this.hasRequireFailures()) {
+                    return STATE_RECOGNIZED;
+                } else {
+                    this._timer = setTimeoutContext(function() {
+                        this.state = STATE_RECOGNIZED;
+                        this.tryEmit();
+                    }, options.interval, this);
+                    return STATE_BEGAN;
+                }
+            }
+        }
+        return STATE_FAILED;
+    },
+
+    failTimeout: function() {
+        this._timer = setTimeoutContext(function() {
+            this.state = STATE_FAILED;
+        }, this.options.interval, this);
+        return STATE_FAILED;
+    },
+
+    reset: function() {
+        clearTimeout(this._timer);
+    },
+
+    emit: function() {
+        if (this.state == STATE_RECOGNIZED) {
+            this._input.tapCount = this.count;
+            this.manager.emit(this.options.event, this._input);
+        }
+    }
+});
+
+/**
+ * Simple way to create a manager with a default set of recognizers.
+ * @param {HTMLElement} element
+ * @param {Object} [options]
+ * @constructor
+ */
+function Hammer(element, options) {
+    options = options || {};
+    options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
+    return new Manager(element, options);
+}
+
+/**
+ * @const {string}
+ */
+Hammer.VERSION = '2.0.7';
+
+/**
+ * default settings
+ * @namespace
+ */
+Hammer.defaults = {
+    /**
+     * set if DOM events are being triggered.
+     * But this is slower and unused by simple implementations, so disabled by default.
+     * @type {Boolean}
+     * @default false
+     */
+    domEvents: false,
+
+    /**
+     * The value for the touchAction property/fallback.
+     * When set to `compute` it will magically set the correct value based on the added recognizers.
+     * @type {String}
+     * @default compute
+     */
+    touchAction: TOUCH_ACTION_COMPUTE,
+
+    /**
+     * @type {Boolean}
+     * @default true
+     */
+    enable: true,
+
+    /**
+     * EXPERIMENTAL FEATURE -- can be removed/changed
+     * Change the parent input target element.
+     * If Null, then it is being set the to main element.
+     * @type {Null|EventTarget}
+     * @default null
+     */
+    inputTarget: null,
+
+    /**
+     * force an input class
+     * @type {Null|Function}
+     * @default null
+     */
+    inputClass: null,
+
+    /**
+     * Default recognizer setup when calling `Hammer()`
+     * When creating a new Manager these will be skipped.
+     * @type {Array}
+     */
+    preset: [
+        // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
+        [RotateRecognizer, {enable: false}],
+        [PinchRecognizer, {enable: false}, ['rotate']],
+        [SwipeRecognizer, {direction: DIRECTION_HORIZONTAL}],
+        [PanRecognizer, {direction: DIRECTION_HORIZONTAL}, ['swipe']],
+        [TapRecognizer],
+        [TapRecognizer, {event: 'doubletap', taps: 2}, ['tap']],
+        [PressRecognizer]
+    ],
+
+    /**
+     * Some CSS properties can be used to improve the working of Hammer.
+     * Add them to this method and they will be set when creating a new Manager.
+     * @namespace
+     */
+    cssProps: {
+        /**
+         * Disables text selection to improve the dragging gesture. Mainly for desktop browsers.
+         * @type {String}
+         * @default 'none'
+         */
+        userSelect: 'none',
+
+        /**
+         * Disable the Windows Phone grippers when pressing an element.
+         * @type {String}
+         * @default 'none'
+         */
+        touchSelect: 'none',
+
+        /**
+         * Disables the default callout shown when you touch and hold a touch target.
+         * On iOS, when you touch and hold a touch target such as a link, Safari displays
+         * a callout containing information about the link. This property allows you to disable that callout.
+         * @type {String}
+         * @default 'none'
+         */
+        touchCallout: 'none',
+
+        /**
+         * Specifies whether zooming is enabled. Used by IE10>
+         * @type {String}
+         * @default 'none'
+         */
+        contentZooming: 'none',
+
+        /**
+         * Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers.
+         * @type {String}
+         * @default 'none'
+         */
+        userDrag: 'none',
+
+        /**
+         * Overrides the highlight color shown when the user taps a link or a JavaScript
+         * clickable element in iOS. This property obeys the alpha value, if specified.
+         * @type {String}
+         * @default 'rgba(0,0,0,0)'
+         */
+        tapHighlightColor: 'rgba(0,0,0,0)'
+    }
+};
+
+var STOP = 1;
+var FORCED_STOP = 2;
+
+/**
+ * Manager
+ * @param {HTMLElement} element
+ * @param {Object} [options]
+ * @constructor
+ */
+function Manager(element, options) {
+    this.options = assign({}, Hammer.defaults, options || {});
+
+    this.options.inputTarget = this.options.inputTarget || element;
+
+    this.handlers = {};
+    this.session = {};
+    this.recognizers = [];
+    this.oldCssProps = {};
+
+    this.element = element;
+    this.input = createInputInstance(this);
+    this.touchAction = new TouchAction(this, this.options.touchAction);
+
+    toggleCssProps(this, true);
+
+    each(this.options.recognizers, function(item) {
+        var recognizer = this.add(new (item[0])(item[1]));
+        item[2] && recognizer.recognizeWith(item[2]);
+        item[3] && recognizer.requireFailure(item[3]);
+    }, this);
+}
+
+Manager.prototype = {
+    /**
+     * set options
+     * @param {Object} options
+     * @returns {Manager}
+     */
+    set: function(options) {
+        assign(this.options, options);
+
+        // Options that need a little more setup
+        if (options.touchAction) {
+            this.touchAction.update();
+        }
+        if (options.inputTarget) {
+            // Clean up existing event listeners and reinitialize
+            this.input.destroy();
+            this.input.target = options.inputTarget;
+            this.input.init();
+        }
+        return this;
+    },
+
+    /**
+     * stop recognizing for this session.
+     * This session will be discarded, when a new [input]start event is fired.
+     * When forced, the recognizer cycle is stopped immediately.
+     * @param {Boolean} [force]
+     */
+    stop: function(force) {
+        this.session.stopped = force ? FORCED_STOP : STOP;
+    },
+
+    /**
+     * run the recognizers!
+     * called by the inputHandler function on every movement of the pointers (touches)
+     * it walks through all the recognizers and tries to detect the gesture that is being made
+     * @param {Object} inputData
+     */
+    recognize: function(inputData) {
+        var session = this.session;
+        if (session.stopped) {
+            return;
+        }
+
+        // run the touch-action polyfill
+        this.touchAction.preventDefaults(inputData);
+
+        var recognizer;
+        var recognizers = this.recognizers;
+
+        // this holds the recognizer that is being recognized.
+        // so the recognizer's state needs to be BEGAN, CHANGED, ENDED or RECOGNIZED
+        // if no recognizer is detecting a thing, it is set to `null`
+        var curRecognizer = session.curRecognizer;
+
+        // reset when the last recognizer is recognized
+        // or when we're in a new session
+        if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
+            curRecognizer = session.curRecognizer = null;
+        }
+
+        var i = 0;
+        while (i < recognizers.length) {
+            recognizer = recognizers[i];
+
+            // find out if we are allowed try to recognize the input for this one.
+            // 1.   allow if the session is NOT forced stopped (see the .stop() method)
+            // 2.   allow if we still haven't recognized a gesture in this session, or the this recognizer is the one
+            //      that is being recognized.
+            // 3.   allow if the recognizer is allowed to run simultaneous with the current recognized recognizer.
+            //      this can be setup with the `recognizeWith()` method on the recognizer.
+            if (session.stopped !== FORCED_STOP && ( // 1
+                    !curRecognizer || recognizer == curRecognizer || // 2
+                    recognizer.canRecognizeWith(curRecognizer))) { // 3
+                recognizer.recognize(inputData);
+            } else {
+                recognizer.reset();
+            }
+
+            // if the recognizer has been recognizing the input as a valid gesture, we want to store this one as the
+            // current active recognizer. but only if we don't already have an active recognizer
+            if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
+                curRecognizer = session.curRecognizer = recognizer;
+            }
+            i++;
+        }
+    },
+
+    /**
+     * get a recognizer by its event name.
+     * @param {Recognizer|String} recognizer
+     * @returns {Recognizer|Null}
+     */
+    get: function(recognizer) {
+        if (recognizer instanceof Recognizer) {
+            return recognizer;
+        }
+
+        var recognizers = this.recognizers;
+        for (var i = 0; i < recognizers.length; i++) {
+            if (recognizers[i].options.event == recognizer) {
+                return recognizers[i];
+            }
+        }
+        return null;
+    },
+
+    /**
+     * add a recognizer to the manager
+     * existing recognizers with the same event name will be removed
+     * @param {Recognizer} recognizer
+     * @returns {Recognizer|Manager}
+     */
+    add: function(recognizer) {
+        if (invokeArrayArg(recognizer, 'add', this)) {
+            return this;
+        }
+
+        // remove existing
+        var existing = this.get(recognizer.options.event);
+        if (existing) {
+            this.remove(existing);
+        }
+
+        this.recognizers.push(recognizer);
+        recognizer.manager = this;
+
+        this.touchAction.update();
+        return recognizer;
+    },
+
+    /**
+     * remove a recognizer by name or instance
+     * @param {Recognizer|String} recognizer
+     * @returns {Manager}
+     */
+    remove: function(recognizer) {
+        if (invokeArrayArg(recognizer, 'remove', this)) {
+            return this;
+        }
+
+        recognizer = this.get(recognizer);
+
+        // let's make sure this recognizer exists
+        if (recognizer) {
+            var recognizers = this.recognizers;
+            var index = inArray(recognizers, recognizer);
+
+            if (index !== -1) {
+                recognizers.splice(index, 1);
+                this.touchAction.update();
+            }
+        }
+
+        return this;
+    },
+
+    /**
+     * bind event
+     * @param {String} events
+     * @param {Function} handler
+     * @returns {EventEmitter} this
+     */
+    on: function(events, handler) {
+        if (events === undefined$1) {
+            return;
+        }
+        if (handler === undefined$1) {
+            return;
+        }
+
+        var handlers = this.handlers;
+        each(splitStr(events), function(event) {
+            handlers[event] = handlers[event] || [];
+            handlers[event].push(handler);
+        });
+        return this;
+    },
+
+    /**
+     * unbind event, leave emit blank to remove all handlers
+     * @param {String} events
+     * @param {Function} [handler]
+     * @returns {EventEmitter} this
+     */
+    off: function(events, handler) {
+        if (events === undefined$1) {
+            return;
+        }
+
+        var handlers = this.handlers;
+        each(splitStr(events), function(event) {
+            if (!handler) {
+                delete handlers[event];
+            } else {
+                handlers[event] && handlers[event].splice(inArray(handlers[event], handler), 1);
+            }
+        });
+        return this;
+    },
+
+    /**
+     * emit event to the listeners
+     * @param {String} event
+     * @param {Object} data
+     */
+    emit: function(event, data) {
+        // we also want to trigger dom events
+        if (this.options.domEvents) {
+            triggerDomEvent(event, data);
+        }
+
+        // no handlers, so skip it all
+        var handlers = this.handlers[event] && this.handlers[event].slice();
+        if (!handlers || !handlers.length) {
+            return;
+        }
+
+        data.type = event;
+        data.preventDefault = function() {
+            data.srcEvent.preventDefault();
+        };
+
+        var i = 0;
+        while (i < handlers.length) {
+            handlers[i](data);
+            i++;
+        }
+    },
+
+    /**
+     * destroy the manager and unbinds all events
+     * it doesn't unbind dom events, that is the user own responsibility
+     */
+    destroy: function() {
+        this.element && toggleCssProps(this, false);
+
+        this.handlers = {};
+        this.session = {};
+        this.input.destroy();
+        this.element = null;
+    }
+};
+
+/**
+ * add/remove the css properties as defined in manager.options.cssProps
+ * @param {Manager} manager
+ * @param {Boolean} add
+ */
+function toggleCssProps(manager, add) {
+    var element = manager.element;
+    if (!element.style) {
+        return;
+    }
+    var prop;
+    each(manager.options.cssProps, function(value, name) {
+        prop = prefixed(element.style, name);
+        if (add) {
+            manager.oldCssProps[prop] = element.style[prop];
+            element.style[prop] = value;
+        } else {
+            element.style[prop] = manager.oldCssProps[prop] || '';
+        }
+    });
+    if (!add) {
+        manager.oldCssProps = {};
+    }
+}
+
+/**
+ * trigger dom event
+ * @param {String} event
+ * @param {Object} data
+ */
+function triggerDomEvent(event, data) {
+    var gestureEvent = document.createEvent('Event');
+    gestureEvent.initEvent(event, true, true);
+    gestureEvent.gesture = data;
+    data.target.dispatchEvent(gestureEvent);
+}
+
+assign(Hammer, {
+    INPUT_START: INPUT_START,
+    INPUT_MOVE: INPUT_MOVE,
+    INPUT_END: INPUT_END,
+    INPUT_CANCEL: INPUT_CANCEL,
+
+    STATE_POSSIBLE: STATE_POSSIBLE,
+    STATE_BEGAN: STATE_BEGAN,
+    STATE_CHANGED: STATE_CHANGED,
+    STATE_ENDED: STATE_ENDED,
+    STATE_RECOGNIZED: STATE_RECOGNIZED,
+    STATE_CANCELLED: STATE_CANCELLED,
+    STATE_FAILED: STATE_FAILED,
+
+    DIRECTION_NONE: DIRECTION_NONE,
+    DIRECTION_LEFT: DIRECTION_LEFT,
+    DIRECTION_RIGHT: DIRECTION_RIGHT,
+    DIRECTION_UP: DIRECTION_UP,
+    DIRECTION_DOWN: DIRECTION_DOWN,
+    DIRECTION_HORIZONTAL: DIRECTION_HORIZONTAL,
+    DIRECTION_VERTICAL: DIRECTION_VERTICAL,
+    DIRECTION_ALL: DIRECTION_ALL,
+
+    Manager: Manager,
+    Input: Input,
+    TouchAction: TouchAction,
+
+    TouchInput: TouchInput,
+    MouseInput: MouseInput,
+    PointerEventInput: PointerEventInput,
+    TouchMouseInput: TouchMouseInput,
+    SingleTouchInput: SingleTouchInput,
+
+    Recognizer: Recognizer,
+    AttrRecognizer: AttrRecognizer,
+    Tap: TapRecognizer,
+    Pan: PanRecognizer,
+    Swipe: SwipeRecognizer,
+    Pinch: PinchRecognizer,
+    Rotate: RotateRecognizer,
+    Press: PressRecognizer,
+
+    on: addEventListeners,
+    off: removeEventListeners,
+    each: each,
+    merge: merge,
+    extend: extend,
+    assign: assign,
+    inherit: inherit,
+    bindFn: bindFn,
+    prefixed: prefixed
+});
+
+// this prevents errors when Hammer is loaded in the presence of an AMD
+//  style loader but by script tag, not by the loader.
+var freeGlobal = (typeof window !== 'undefined' ? window : (typeof self !== 'undefined' ? self : {})); // jshint ignore:line
+freeGlobal.Hammer = Hammer;
+
+if (typeof undefined$1 === 'function' && undefined$1.amd) {
+    undefined$1(function() {
+        return Hammer;
+    });
+} else if (module.exports) {
+    module.exports = Hammer;
+} else {
+    window[exportName] = Hammer;
+}
+
+})(window, document, 'Hammer');
+}(hammer));
+
+var Hammer = hammer.exports;
+
+var Hammer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/_mergeNamespaces({
+    __proto__: null,
+    'default': Hammer
+}, [hammer.exports]));
+
+// uuid
+function S4() {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+}
+/**
+ * 随机生成一个uuid值
+ */
+function uuid() {
+    // then to call it, plus stitch in '4' in the third group
+    return (S4() + S4() + '-' + S4() + '-4' + S4().substr(0, 3) + '-' + S4() + '-' + S4() + S4() + S4()).toLowerCase();
+}
+
+class Polyline {
+    id = uuid();
+    points = [];
+    lines = [];
+    push(line) {
+        const next = this.getNext(line);
+        if (!next)
+            throw new Error('当前线段于上一条线段无法构成折线');
+        this.lines.push(next.line);
+        this.points.push(...next.points);
+        return this.lines.length;
+    }
+    pop() {
+        const lastPoint = this.lines.pop();
+        const polylineLength = this.lines.length;
+        if (polylineLength === 0)
+            this.points.slice(0, this.points.length);
+        else
+            this.points.pop();
+        return lastPoint;
+    }
+    getNext(line) {
+        const lastPoint = this.points.slice(-1)[0];
+        if (!lastPoint)
+            return { line: line, points: line.points };
+        if (!line.points.includes(lastPoint))
+            return null;
+        const nextPoint = line.points.find((point) => point !== lastPoint);
+        if (!nextPoint)
+            return null;
+        return { line: line, points: [nextPoint] };
+    }
+    toJson() {
+        return {
+            id: this.id,
+            lines: this.lines.map((line) => line.id),
+            points: this.points.map((point) => point.id),
+        };
+    }
+    toCompletelyJson() {
+        return {
+            id: this.id,
+            points: this.points.map((point) => point.toJson()),
+            lines: this.lines.map((line) => line.toCompletelyJson()),
+        };
+    }
+}
+
+const lineWidth = 2;
+const lightLineWidth = 4;
+const lineColor = new three.Color(0xffffff);
+const lightLineColor = new three.Color(0x2d7cff);
+const pointColor = new three.Color(0xffffff);
+const lightPointColor = new three.Color(0x2d7cff);
+const pointSize = 8;
+const lightPointSize = 16;
+const pointImage = 'data:image/png;base64,' +
+    'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg==';
+const pointTexture = new three.TextureLoader().load(pointImage);
+const normalLineOpts = {
+    pointTexture,
+    pointSize,
+    lineWidth,
+    lineColor,
+    pointColor,
+    lineRenderOrder: 20,
+    pointsRenderOrder: 20,
+};
+Object.assign({}, normalLineOpts, { dashed: true });
+const lightLineOpts = {
+    pointTexture,
+    pointSize: lightPointSize,
+    lineWidth: lightLineWidth,
+    lineColor: lightLineColor,
+    pointColor: lightPointColor,
+    lineRenderOrder: 10,
+    pointsRenderOrder: 10,
+};
+
+function creatLine(start, end, opts) {
+    const lineWidth = opts?.lineWidth ?? 2;
+    const lineColor = opts?.lineColor ?? new three.Color(0xffffff);
+    const pointSize = opts?.pointSize ?? 5;
+    const lineRenderOrder = opts?.lineRenderOrder ?? 10;
+    const pointsRenderOrder = opts?.lineRenderOrder ?? 20;
+    const line$1 = new line.Line(start, end);
+    // set line
+    line$1.setMaterial({ linewidth: lineWidth, color: lineColor });
+    line$1.line.material.depthTest = false;
+    line$1.line.material.transparent = true;
+    line$1.line.renderOrder = lineRenderOrder;
+    // set point
+    line$1.points.renderOrder = pointsRenderOrder;
+    const pointMaterial = line$1.points.material;
+    pointMaterial.depthTest = false;
+    pointMaterial.size = pointSize;
+    opts?.pointColor && pointMaterial.color.set(opts.pointColor).convertSRGBToLinear();
+    if (opts?.pointTexture)
+        pointMaterial.map = opts.pointTexture;
+    return line$1;
+}
+function creatLineMesh(line, type) {
+    const [point, anotherPoint] = line.points;
+    const opts = type === 'light' ? lightLineOpts : normalLineOpts;
+    const fiveLine = creatLine(point.position, anotherPoint.position, opts);
+    fiveLine.name = 'normalLine_' + line.id;
+    return fiveLine;
+}
+
+function isNDCPointInScreen(ndcPoint) {
+    const { x, y, z } = ndcPoint;
+    if (Math.abs(x) > 1 || Math.abs(y) > 1 || Math.abs(z) > 1)
+        return false;
+    return true;
+}
+
+function creatContentDom() {
+    const contentDom = document.createElement('div');
+    contentDom.style.height = '24px';
+    contentDom.style.width = '62px';
+    contentDom.style.lineHeight = '24px';
+    contentDom.style.textAlign = 'center';
+    contentDom.style.transform = 'translate(-50%, -50%)';
+    contentDom.style.borderRadius = '12px';
+    contentDom.style.fontSize = '14px';
+    contentDom.style.color = '#000000';
+    contentDom.style.background = '#fff';
+    contentDom.style.pointerEvents = 'all';
+    contentDom.style.cursor = 'pointer';
+    return contentDom;
+}
+function createContainerDom(line) {
+    const containerDom = document.createElement('div');
+    containerDom.id = 'distance_' + line.id;
+    containerDom.classList.add('five-plugin-measure__distance');
+    containerDom.style.opacity = '0';
+    containerDom.style.position = 'absolute';
+    containerDom.style.left = '0';
+    containerDom.style.top = '0';
+    containerDom.style.transform = 'translate3d(0, 0, 0)';
+    return containerDom;
+}
+function creatDistanceItem(props) {
+    function handleClick() {
+        highlight();
+        props.clickCallback?.(distanceItem);
+    }
+    function highlight() {
+        if (userDistanceItem)
+            return userDistanceItem.highlight();
+        contentDom.style.border = '1px solid #538FFF';
+        contentDom.style.color = '#538FFF';
+    }
+    function unHighlight() {
+        if (userDistanceItem)
+            return userDistanceItem.unHighlight();
+        contentDom.style.border = 'none';
+        contentDom.style.color = '#000';
+    }
+    function update(five) {
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return;
+        const screenWidth = fiveElement.clientWidth;
+        const screenHeight = fiveElement.clientHeight;
+        if (line.points.length < 2)
+            return;
+        const [startPoint, endPoint] = line.points;
+        const ndcStartPosition = startPoint.position.clone().project(five.camera);
+        const ndcEndPosition = endPoint.position.clone().project(five.camera);
+        const ndcDomPosition = ndcStartPosition.clone().lerp(ndcEndPosition, 0.5);
+        const visible = (() => {
+            // 对于超过近平面和远平面的点，计算会有问题
+            if (Math.abs(ndcStartPosition.z) > 1 || Math.abs(ndcEndPosition.z) > 1)
+                return false;
+            if (!isNDCPointInScreen(ndcStartPosition) && !isNDCPointInScreen(ndcEndPosition))
+                return false;
+            if (!isNDCPointInScreen(ndcDomPosition))
+                return false;
+            const screenStartPosition = new three.Vector2(ndcStartPosition.x * screenWidth, ndcStartPosition.y * screenHeight);
+            const screenEndPosition = new three.Vector2(ndcEndPosition.x * screenWidth, ndcEndPosition.y * screenHeight);
+            if (screenStartPosition.distanceTo(screenEndPosition) < 20)
+                return false;
+            return true;
+        })();
+        if (visible === false) {
+            containerDom.style.opacity = '0';
+            containerDom.style.pointerEvents = 'none';
+            return;
+        }
+        // 更新 UI
+        const left = ((ndcDomPosition.x + 1) / 2) * screenWidth;
+        const top = (-(ndcDomPosition.y - 1) / 2) * screenHeight;
+        containerDom.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
+        containerDom.style.opacity = '1';
+        containerDom.style.pointerEvents = 'all';
+        if (userDistanceItem) {
+            userDistanceItem.update({ line: line.toCompletelyJson(), polyline: line.getPolyline().toCompletelyJson() });
+        }
+        const distanceString = startPoint.position.clone().distanceTo(endPoint.position).toFixed(2) + 'm';
+        contentDom.innerText !== distanceString && (contentDom.innerText = distanceString);
+    }
+    function appendTo(container) {
+        container.appendChild(containerDom);
+        containerDom.addEventListener('click', handleClick);
+    }
+    function remove() {
+        contentDom.removeEventListener('click', handleClick);
+        containerDom.remove();
+    }
+    const { line } = props;
+    const lineID = line.id;
+    const contentDom = creatContentDom();
+    const containerDom = createContainerDom(line);
+    const userDistanceItem = props.userDistanceItem;
+    const ndcPosition = new three.Vector3(0, 0, 0);
+    const distanceItem = {
+        lineID,
+        ndcPosition,
+        update,
+        appendTo,
+        remove,
+        highlight: highlight,
+        unHighlight: unHighlight,
+    };
+    userDistanceItem?.element ? containerDom.appendChild(userDistanceItem.element) : containerDom.appendChild(contentDom);
+    return distanceItem;
+}
+
+class Line {
+    id;
+    selected = false;
+    type = 'line';
+    model;
+    mesh;
+    points;
+    lightMesh;
+    hook;
+    distanceItem;
+    polyline;
+    constructor(point, anotherPoint, model) {
+        this.id = uuid();
+        this.model = model;
+        if (point.id === anotherPoint.id)
+            throw new Error('无效的线段, 一个点无法构成线段');
+        this.hook = new five.Subscribe();
+        this.points = [point, anotherPoint];
+        this.mesh = creatLineMesh(this, 'normal');
+        this.lightMesh = creatLineMesh(this, 'light');
+        this.distanceItem = creatDistanceItem({
+            line: this,
+            clickCallback: () => this.hook.emit('selected', this),
+            userDistanceItem: this.model.params.userDistanceItemCreator
+                ? this.model.params.userDistanceItemCreator()
+                : undefined,
+        });
+        point.lines.push(this);
+        anotherPoint.lines.push(this);
+    }
+    clear() {
+        this.selected = false;
+        this.polyline = undefined;
+    }
+    getPolyline() {
+        if (this.polyline)
+            return this.polyline;
+        const modelPolyline = this.model.polylines.find((polyline) => polyline.lines.includes(this));
+        this.polyline = modelPolyline;
+        if (modelPolyline)
+            return modelPolyline;
+        const polyline = new Polyline();
+        polyline.push(this);
+        return polyline;
+    }
+    findAnotherPoint(point) {
+        return this.points.find(({ id }) => id !== point.id);
+    }
+    toJson() {
+        return { id: this.id, points: this.points.map(({ id }) => id) };
+    }
+    toCompletelyJson() {
+        return { id: this.id, points: this.points.map((point) => point.toJson()) };
+    }
+    clone() {
+        const line = new Line(this.points[0].clone(), this.points[1].clone(), this.model);
+        return line;
+    }
+}
+
+/**
+ * 从数组中删除
+ * @param   item
+ * @param   array
+ * @return  如果删除返回 item
+ */
+function removeArrayItem(item, array) {
+    for (let index = 0, len = array.length; index < len; index++) {
+        if (item === array[index])
+            return array.splice(index, 1)[0];
+    }
+}
+
+class Point {
+    id;
+    lines;
+    position;
+    type = 'point';
+    constructor(position) {
+        this.id = uuid();
+        this.lines = [];
+        this.position = new three.Vector3();
+        position instanceof three.Vector3 ? this.position.copy(position) : this.position.fromArray(position);
+    }
+    toJson() {
+        return { id: this.id, lines: this.lines.map(({ id }) => id), position: this.position.toArray() };
+    }
+    addLine(line) {
+        this.lines.push(line);
+    }
+    removeLine(line) {
+        removeArrayItem(line, this.lines);
+    }
+    clone() {
+        const point = new Point(this.position);
+        return point;
+    }
+}
+
+class Model {
+    lines = [];
+    points = [];
+    params;
+    polylines = [];
+    hook = new five.Subscribe();
+    constructor(params) {
+        this.params = params;
+    }
+    addLine(line) {
+        const [startPoint, endPoint] = line.points;
+        if (!startPoint || !endPoint)
+            return this;
+        if (!this.includes(startPoint))
+            this.points.push(startPoint);
+        if (!this.includes(endPoint))
+            this.points.push(endPoint);
+        this.lines.push(line);
+        const lastPolyline = this.polylines.find((polyline) => !!polyline.getNext(line));
+        if (lastPolyline) {
+            lastPolyline.push(line);
+        }
+        else {
+            const polyline = new Polyline();
+            polyline.push(line);
+            this.polylines.push(polyline);
+        }
+        this.hook.emit('lineAdded', line);
+    }
+    removeLineByID(lineID) {
+        const line = this.getLineByID(lineID);
+        if (line)
+            this.removeLine(line);
+    }
+    removeLine(line) {
+        // handle polyline
+        const polyline = this.polylines.find((polyline) => polyline.lines.includes(line));
+        if (polyline) {
+            if (polyline.lines.slice(-1)[0] !== line)
+                throw new Error('不能从中间删除线段');
+            polyline.pop();
+            if (polyline.lines.length === 0)
+                removeArrayItem(polyline, this.polylines);
+        }
+        const [point, anotherPoint] = line.points;
+        if (point.lines.length === 0)
+            removeArrayItem(point, this.points);
+        if (anotherPoint.lines.length === 0)
+            removeArrayItem(anotherPoint, this.points);
+        removeArrayItem(line, this.lines);
+        line.clear();
+        this.hook.emit('lineRemoved', line);
+        return this;
+    }
+    mergeModel(model) {
+        model.lines.forEach((line) => this.addLine(line));
+    }
+    includes(item) {
+        if (item.type === 'point') {
+            return this.points.find(({ id }) => id === item.id) !== undefined;
+        }
+        else if (item.type === 'line') {
+            return this.lines.find(({ id }) => id === item.id) !== undefined;
+        }
+    }
+    getPointByID(id) {
+        return this.points.find(({ id: _id }) => _id === id);
+    }
+    getLineByID(id) {
+        return this.lines.find(({ id: _id }) => _id === id);
+    }
+    getClosestPoint() { }
+    parse(data) {
+        const points = data.points.map(({ id, position }) => {
+            const point = new Point(position);
+            point.id = id;
+            return point;
+        });
+        const lines = data.lines.map((data) => {
+            const [pointID, anotherPointID] = data.points;
+            const point = this.getPointByID.call({ points }, pointID);
+            const anotherPoint = this.getPointByID.call({ points }, anotherPointID);
+            if (!point || !anotherPoint)
+                throw new Error('线上的点不存在');
+            const line = new Line(point, anotherPoint, this);
+            line.id = data.id;
+            return line;
+        });
+        const polylines = data.polylines.map((polylineJson) => {
+            const polyline = new Polyline();
+            polylineJson.lines.forEach((lineID) => {
+                const line = lines.find(({ id }) => id === lineID);
+                line && polyline.push(line);
+            });
+            return polyline;
+        });
+        this.points.splice(0, this.points.length, ...points);
+        this.lines.splice(0, this.lines.length, ...lines);
+        this.polylines.splice(0, this.polylines.length, ...polylines);
+        return this;
+    }
+    toJson() {
+        return {
+            points: this.points.map((point) => point.toJson()),
+            lines: this.lines.map((line) => line.toJson()),
+            polylines: this.polylines.map((polyline) => polyline.toJson()).filter((polylines) => polylines.lines.length > 0),
+        };
+    }
+}
+
+/**
+ * 创建一个防抖动函数，该函数在高频调用时会每隔 wait 毫秒后调用 func 方法
+ * `throttle` 会在第一次调用时立刻调用一次
+ * @param func - 要防抖动的函数
+ * @param wait - 需要延迟的毫秒数
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function throttle(func, wait = 200) {
+    let last;
+    return function (...args) {
+        if (last)
+            return;
+        func(...args);
+        last = setTimeout(function () {
+            last = null;
+        }, wait);
+    };
+}
+
+const preventDefault = (e) => e.preventDefault();
+
+class BaseController {
+    five;
+    group;
+    model;
+    disposed = false;
+    mouseGroup;
+    container;
+    fiveHelper;
+    hook;
+    magnifier;
+    userDistanceItemCreator;
+    constructor(params) {
+        // ==================== Params ====================
+        this.five = params.five;
+        this.hook = params.hook;
+        this.model = params.model;
+        this.magnifier = params.magnifier;
+        this.container = params.container;
+        this.fiveHelper = params.fiveHelper;
+        this.userDistanceItemCreator = params.userDistanceItemCreator;
+        // ==================== Groups ====================
+        this.group = params.group;
+        this.mouseGroup = params.mouseGroup;
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            fiveElement.addEventListener('touchstart', preventDefault);
+            fiveElement.addEventListener('contextmenu', preventDefault);
+        }
+    }
+    removeLine(line) {
+        this.group.remove(line.mesh, line.lightMesh);
+        line.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    updateDistanceUI = () => {
+        this.model.lines.forEach((line) => line.distanceItem.update(this.five));
+    };
+    updateMouseGroup(intersection, mesh) {
+        if (!intersection)
+            return this.mouseGroup;
+        // ============ update mouseGroup position ============
+        const adsorbentPoint = this.fiveHelper.getAdsorbentPoint(intersection);
+        const viewPosition = adsorbentPoint ? adsorbentPoint : intersection.point;
+        this.mouseGroup.position.copy(viewPosition);
+        // ============ update mouseGroup quaternion ============
+        if (mesh) {
+            this.mouseGroup.quaternion.copy(mesh.quaternion);
+        }
+        else if (intersection.face) {
+            const normal = intersection.face.normal;
+            const positionVector = normal.clone().multiplyScalar(0.05);
+            const position = intersection.point.clone().add(positionVector);
+            const lookAtVector = position.clone().add(positionVector);
+            this.mouseGroup.lookAt(lookAtVector);
+        }
+        return this.mouseGroup;
+    }
+    dispose() {
+        this.disposed = true;
+        this.magnifier.dispose();
+        this.model.lines.forEach((line) => this.removeLine(line));
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            fiveElement.removeEventListener('touchstart', preventDefault);
+            fiveElement.removeEventListener('contextmenu', preventDefault);
+        }
+    }
+}
+
+/**
+ * 从 Hammer 事件中获取操作的点在交互 DOM 中的位置
+ * @ignore TODO: make a suitable name
+ */
+function getPointFromHammerEvent(event) {
+    // clientX 与 clientY 是相对 document 的，需要转换成相对于 target 的坐标
+    const { x: clientX, y: clientY } = event.center;
+    const { clientWidth, clientHeight } = event.target;
+    const clientRect = event.target.getBoundingClientRect();
+    const position = new three.Vector2(clientX, clientY).sub(new three.Vector2(clientRect.left, clientRect.top));
+    const mouse = new three.Vector2((position.x / clientWidth) * 2 - 1, -(position.y / clientHeight) * 2 + 1);
+    return { point: position, ndcPoint: mouse };
+}
+
+/** 通过鼠标事件或者触摸事件，获取当前点击屏幕关联的射线与模型的交点 */
+function getIntersectionFromEvent(five, event) {
+    const mouse = getPointFromHammerEvent(event).ndcPoint;
+    const raycaster = new three.Raycaster();
+    raycaster.setFromCamera(mouse, five.camera);
+    return five.model.intersectRaycaster(raycaster);
+}
+
+class EditController extends BaseController {
+    type = 'edit';
+    model = new Model({ userDistanceItemCreator: this.userDistanceItemCreator });
+    pressPoint;
+    hasAppendDashed = false;
+    hasAppendMouseGroup = false;
+    fiveElement;
+    /** 上一个端点位置 */
+    lastPoint = null;
+    /** 鼠标点到上一个端点连接的虚线 */
+    dashed;
+    hammer;
+    /** 根据 intersection 更新放大镜和吸附点 */
+    onIntersectionUpdate = throttle((intersection, mesh) => {
+        if (this.hasAppendMouseGroup === false) {
+            this.group.add(this.mouseGroup);
+            this.magnifier.appendTo(this.container);
+            this.hasAppendMouseGroup = true;
+        }
+        const position = this.updateMouseGroup(intersection, mesh).position;
+        this.pressPoint?.position.copy(position);
+        this.updateDashed();
+        requestAnimationFrame(() => this.magnifier.updateWithPoint(this.mouseGroup.position));
+        this.five.needsRender = true;
+    }, 20);
+    constructor(params) {
+        super(params);
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        // ==================== 事件监听 ====================
+        // five
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsPanGesture', this.onWantsPanGesture);
+        this.five.on('wantsTapGesture', this.onWantsTapGesture);
+        this.five.on('wantsToMoveToPano', this.onWantsToMoveToPano);
+        this.five.on('intersectionOnModelUpdate', this.onIntersectionUpdate);
+        // model
+        this.model.hook.on('lineAdded', this.onLineChanged);
+        this.model.hook.on('lineRemoved', this.onLineChanged);
+        // hammer
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            this.fiveElement = fiveElement;
+            const hammer = new Hammer$1(fiveElement);
+            this.hammer = hammer;
+            hammer.on('tap', this.onTap);
+            hammer.on('pan', this.onPan);
+            hammer.on('press', this.onPress);
+            hammer.on('panend', this.onPanEnd);
+        }
+        // fiveElement
+        this.fiveElement?.addEventListener('mouseleave', this.onMouseLeave);
+        // ==================== 其他 ====================
+        this.hook.emit('anchorChange', null);
+        this.five.refresh();
+    }
+    dispose() {
+        super.dispose();
+        this.group.remove(this.mouseGroup, this.dashed.mesh);
+        // ==================== 解除事件监听 ====================
+        // five
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsPanGesture', this.onWantsPanGesture);
+        this.five.off('wantsTapGesture', this.onWantsTapGesture);
+        this.five.off('wantsToMoveToPano', this.onWantsToMoveToPano);
+        this.five.off('intersectionOnModelUpdate', this.onIntersectionUpdate);
+        // model
+        this.model.hook.off('lineAdded', this.onLineChanged);
+        this.model.hook.off('lineRemoved', this.onLineChanged);
+        // hammer
+        this.hammer?.destroy();
+        // fiveElement
+        this.fiveElement?.removeEventListener('mouseleave', this.onMouseLeave);
+        this.magnifier.dispose();
+        this.dashed.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    getEditingLines() {
+        return this.model.lines;
+    }
+    /** 撤销编辑 */
+    revoke = () => {
+        // ============ revoke points ============
+        // 如果当前没有虚线，只有起始点，需要删除起始点，重置起始状态。并删除虚线实例
+        if (this.model.lines.length === 0 && this.lastPoint) {
+            this.lastPoint = null;
+            this.hasAppendDashed = false;
+            this.dashed.distanceItem.remove();
+            this.group.remove(this.dashed.mesh);
+            this.hook.emit('anchorChange', null);
+            this.five.needsRender = true;
+            return;
+        }
+        if (this.model.lines.length === 0 && !this.lastPoint)
+            return;
+        if (!this.lastPoint)
+            return;
+        const revokedLine = this.model.lines[this.model.lines.length - 1];
+        const lastPoint = revokedLine.findAnotherPoint(this.lastPoint);
+        if (!lastPoint)
+            return;
+        this.lastPoint = lastPoint;
+        this.hook.emit('anchorChange', lastPoint.position);
+        // ============ revoke lines ============
+        this.group.remove(revokedLine.mesh);
+        this.model.removeLine(revokedLine);
+        // ============ revoke mouse group ============
+        this.hasAppendMouseGroup = false;
+        this.mouseGroup.position.copy(this.lastPoint.position);
+        this.group.remove(this.mouseGroup);
+        // ============ revoke lineDistance ============
+        revokedLine.distanceItem.remove();
+        // ============ revoke dashed ============
+        this.updateDashed();
+        // ============ revoke magnifier ============
+        this.magnifier.dispose();
+        this.five.needsRender = true;
+    };
+    onMouseLeave = () => {
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+        this.hasAppendMouseGroup = false;
+        if (this.lastPoint) {
+            this.mouseGroup.position.copy(this.lastPoint.position);
+            this.updateDashed();
+        }
+    };
+    /** 编辑线条发生改变时通知外部 */
+    onLineChanged = () => {
+        this.hook.emit('editedLineChange', this.model.lines.map((line) => line.toCompletelyJson()));
+    };
+    onPress = (e) => {
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        if (!intersection || !intersection.face)
+            return;
+        const nowPoint = new Point(intersection.point);
+        this.pressPoint = nowPoint;
+        this.onIntersectionUpdate(intersection);
+    };
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    onPan = (e) => {
+        if (!this.pressPoint)
+            return;
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        if (!intersection || !intersection.face)
+            return;
+        this.onIntersectionUpdate(intersection);
+    };
+    onPanEnd = (e) => {
+        if (!this.pressPoint)
+            return;
+        this.onTap(e);
+    };
+    /**
+     * 1. 如果存在上一个点，需要绘制当前点到上一个点的连线
+     * 2. 把上一个点的位置更新为当前点的位置
+     * 3. 清除 mouseGroup 和 magnifier
+     */
+    onTap = (e) => {
+        if (!this.hasAppendDashed) {
+            this.dashed.distanceItem.appendTo(this.container);
+            this.group.add(this.dashed.mesh);
+        }
+        this.hasAppendDashed = true;
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        this.updateMouseGroup(intersection);
+        const nowPoint = new Point(this.mouseGroup.position);
+        const lastPoint = this.lastPoint;
+        if (nowPoint)
+            this.lastPoint = nowPoint;
+        if (nowPoint && lastPoint) {
+            const line = new Line(lastPoint, nowPoint, this.model);
+            line.distanceItem.appendTo(this.container);
+            this.model.addLine(line);
+            this.group.add(line.mesh);
+            line.distanceItem.update(this.five);
+        }
+        this.pressPoint = undefined;
+        this.hasAppendMouseGroup = false;
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+        this.updateDashed();
+        this.five.needsRender = true;
+        this.hook.emit('anchorChange', nowPoint.position);
+    };
+    onWantsTapGesture = () => false;
+    /** 编辑时取消走点 */
+    onWantsToMoveToPano = () => false;
+    /** 存在长按点时不能移动全景 */
+    onWantsPanGesture = () => (this.pressPoint ? false : undefined);
+    /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+    onCameraUpdate = () => {
+        this.updateDistanceUI();
+        this.dashed.distanceItem.update(this.five);
+    };
+    /** 更新虚线 */
+    updateDashed = () => {
+        if (!this.lastPoint)
+            return;
+        this.dashed.points[0].position.copy(this.lastPoint.position);
+        this.dashed.points[1].position.copy(this.mouseGroup.position);
+        this.dashed.mesh.setPoints(this.lastPoint.position, this.mouseGroup.position);
+        this.dashed.distanceItem.update(this.five);
+    };
+}
+
+const svg = `<svg class="fpm__delete-icon" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient x1="21.443%" y1="100%" x2="67.281%" y2="6.672%" id="a">
+      <stop stop-color="#FFFCFC" stop-opacity=".6" offset="0%" />
+      <stop stop-color="#FFF" offset="100%" />
+    </linearGradient>
+  </defs>
+  <path
+    d="M14.932 3.545a.75.75 0 0 1 .102 1.494l-.102.006H13.83l-.979 8.813a2.05 2.05 0 0 1-1.882 1.818l-.155.006H4.868a2.05 2.05 0 0 1-2.037-1.824l-.98-8.813H.75a.75.75 0 0 1-.102-1.493l.102-.007h14.182zm-2.611 1.5H3.36l.961 8.648a.55.55 0 0 0 .369.46l.087.021.091.008h5.946a.55.55 0 0 0 .546-.49l.961-8.647zM10.795 0a.75.75 0 0 1 .102 1.493l-.102.007H4.886A.75.75 0 0 1 4.785.007L4.886 0h5.91z"
+    transform="translate(2.16 2.16)"
+    fill="url(#a)"
+    fill-rule="nonzero"
+  />
+</svg>`;
+
+const image$1 = `data:image/png;base64,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`;
+
+const image = `data:image/png;base64,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`;
+
+class DeleteDom {
+    visible = false;
+    five;
+    lines = [];
+    points = [];
+    onClick;
+    content = document.createElement('div');
+    container = document.createElement('div');
+    constructor(five, opts) {
+        this.five = five;
+        this.onClick = opts?.onClick || (() => void 0);
+        // container
+        this.container.classList.add('fpm__delete');
+        this.container.style.opacity = '0';
+        this.container.style.position = 'absolute';
+        this.container.style.left = '0';
+        this.container.style.top = '0';
+        this.container.style.transform = `translate3d(0, 0, 10px)`;
+        this.container.style.pointerEvents = `none`;
+        // content
+        this.content.classList.add('fpm__delete-content');
+        this.content.style.width = '67px';
+        this.content.style.height = '31px';
+        this.content.style.display = 'flex';
+        this.content.style.alignItems = 'center';
+        this.content.style.justifyContent = 'center';
+        this.content.style.transform = 'translate(-50%, -50%)';
+        this.content.style.color = '#fff';
+        this.content.style.fontSize = '14px';
+        this.content.style.lineHeight = '31px';
+        this.content.style.borderRadius = '15px';
+        this.content.style.backgroundSize = '100% 100%';
+        this.content.style.cursor = 'pointer';
+        this.content.style.userSelect = 'none';
+        this.content.style.backgroundImage = `url(${image$1})`;
+        this.content.innerHTML = `
+      ${svg}
+      <span>删除</span>
+    `;
+        this.container.append(this.content);
+        const deleteSvgDom = this.content.querySelector('.fpm__delete-icon');
+        if (deleteSvgDom) {
+            deleteSvgDom.style.width = '20px';
+            deleteSvgDom.style.height = '20px';
+            deleteSvgDom.style.marginRight = '2px';
+        }
+        this.content.addEventListener('click', this.onClick);
+        this.content.addEventListener('mouseenter', this.onMouseEnter);
+        this.content.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.content.removeEventListener('click', this.onClick);
+        this.content.removeEventListener('mouseenter', this.onMouseEnter);
+        this.content.removeEventListener('mouseleave', this.onMouseLeave);
+        this.container.remove();
+    }
+    appendTo(element) {
+        element.append(this.container);
+        return this;
+    }
+    setLines(lines) {
+        this.lines = lines;
+        this.points = Array.from(new Set(this.lines.map((line) => [line.points[0], line.points[1]]).flat(1)));
+        return this;
+    }
+    updatePosition() {
+        if (this.lines.length === 0)
+            return this;
+        const points = this.points.map((point) => point.position);
+        const ndcPoints = points.map((point) => point.clone().project(this.five.camera));
+        if (ndcPoints.some((ndcPoint) => Math.abs(ndcPoint.z) > 1))
+            return this.hide();
+        const xArray = ndcPoints.map((point) => point.x);
+        const yArray = ndcPoints.map((point) => point.y);
+        const centerX = (Math.min(...xArray) + Math.max(...xArray)) / 2;
+        const maxY = Math.max(...yArray);
+        const wrapper = this.container.parentElement;
+        if (!wrapper)
+            return this;
+        const centerScreenX = ((centerX + 1) / 2) * wrapper.clientWidth;
+        const maxScreenY = (-(maxY - 1) / 2) * wrapper.clientHeight;
+        const x = centerScreenX;
+        const y = maxScreenY - 34;
+        this.container.style.transform = `translate3d(${x}px, ${y}px, 10px)`;
+        return this.show();
+    }
+    hide() {
+        this.visible = false;
+        this.container.style.opacity = '0';
+        this.container.style.pointerEvents = 'none';
+        return this;
+    }
+    show() {
+        this.visible = true;
+        this.container.style.opacity = '1';
+        this.container.style.pointerEvents = 'auto';
+        return this;
+    }
+    onMouseEnter = () => {
+        this.content.style.backgroundImage = `url(${image})`;
+    };
+    onMouseLeave = () => {
+        this.content.style.backgroundImage = `url(${image$1})`;
+    };
+}
+
+/**
+ * 获取一点对于线段上最近的一点，
+ * 如果可以是过直线垂线的垂足，不行的话取线段的两端
+ * @param point
+ * @param linePoints
+ * @return
+ */
+function closestPointOnLine(point, linePoints) {
+    const tA = point.x - linePoints[0].x;
+    const tB = point.y - linePoints[0].y;
+    const tC = linePoints[1].x - linePoints[0].x;
+    const tD = linePoints[1].y - linePoints[0].y;
+    // 设线段为 AB 线段，线段外一点为 P
+    // tDot = AP 向量与 AB 向量乘积，tLenSq 为 |AB|平方。
+    // tParam 是 AP 向量在 AB 向量投影向量 AC 与 AB 向量的比。
+    const tDot = tA * tC + tB * tD;
+    const tLenSq = tC * tC + tD * tD;
+    const tParam = tDot / tLenSq;
+    let tXx, tYy;
+    if (tParam < 0 || samePointAt(linePoints[0], linePoints[1])) {
+        tXx = linePoints[0].x;
+        tYy = linePoints[0].y;
+    }
+    else if (tParam > 1) {
+        tXx = linePoints[1].x;
+        tYy = linePoints[1].y;
+    }
+    else {
+        tXx = linePoints[0].x + tParam * tC;
+        tYy = linePoints[0].y + tParam * tD;
+    }
+    return new three.Vector2(tXx, tYy);
+}
+/**
+ * 检查两个点是否位置相同
+ * point: { x: number, y: number }
+ * @param  point1
+ * @param  point2
+ * @return
+ */
+function samePointAt(point1, point2) {
+    return point1.x === point2.x && point1.y === point2.y;
+}
+
+function ndc2Screen(ndcPosition, containerSize) {
+    const left = ((ndcPosition.x + 1) / 2) * containerSize.width;
+    const top = (-(ndcPosition.y - 1) / 2) * containerSize.height;
+    return new three.Vector2(left, top);
+}
+
+/**
+ * @param tapPoint 注意这里的坐标是相对于 FiveElement 的
+ */
+// eslint-disable-next-line max-params
+function findClosestPoint(five, points, tapPoint, maxDistance) {
+    const container = five.getElement();
+    if (!container)
+        return null;
+    if (points.length === 0)
+        return null;
+    const containerSize = { width: container.clientWidth, height: container.clientHeight };
+    const ndcPoints = points
+        .map((point) => {
+        const ndcPosition = point.position.clone().project(five.camera);
+        if (!isNDCPointInScreen(ndcPosition))
+            return { distance: Infinity, point };
+        const screenPosition = ndc2Screen(ndcPosition, containerSize);
+        const distance = screenPosition.distanceTo(tapPoint);
+        return { distance, point };
+    })
+        .sort((a, b) => a.distance - b.distance);
+    if (typeof maxDistance === 'number' && ndcPoints[0].distance > maxDistance)
+        return null;
+    return ndcPoints[0];
+}
+
+function findAssociatedLines(line) {
+    // 找跟这个线段相邻的线
+    const mergeNextLine = (point, nextIndex, target) => {
+        const nextLine = point.lines.find((line) => {
+            const pointIndex = line.points.findIndex(({ id }) => id === point.id);
+            if (pointIndex === nextIndex)
+                return false;
+            return true;
+        });
+        if (!nextLine)
+            return target;
+        const nextPoint = nextLine.points[nextIndex];
+        if (!nextPoint)
+            return target;
+        return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
+    };
+    const rightLines = mergeNextLine(line.points[0], 1, []);
+    const leftLines = mergeNextLine(line.points[0], 0, []);
+    const lines = rightLines.concat(leftLines);
+    return lines;
+}
+
+class WatchController extends BaseController {
+    type = 'watch';
+    deleteDom;
+    highlightedLines = [];
+    fiveElement;
+    editPointState;
+    hammer;
+    constructor(params) {
+        super(params);
+        this.deleteDom = new DeleteDom(this.five, { onClick: this.deleteDomClickCallback }).appendTo(this.container);
+        this.model.lines.forEach((line) => {
+            line.distanceItem.appendTo(this.container);
+            line.distanceItem.update(this.five);
+            line.hook.on('selected', this.chooseLine);
+            this.group.add(line.mesh);
+        });
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            this.fiveElement = fiveElement;
+            const hammer = new Hammer(fiveElement);
+            this.hammer = hammer;
+            hammer.on('pan', this.onPan);
+            hammer.on('panstart', this.onPanStart);
+            hammer.on('panend', this.onPanEnd);
+        }
+        this.model.hook.on('lineRemoved', this.lineRemoved);
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsTapGesture', this.wantsTapGesture);
+        this.five.on('wantsPanGesture', this.wantsPanGesture);
+        this.five.needsRender = true;
+    }
+    dispose() {
+        super.dispose();
+        this.deleteDom.dispose();
+        this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsPanGesture', this.wantsPanGesture);
+        this.five.off('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', []);
+        this.hammer?.destroy();
+    }
+    highlightLine(line) {
+        if (line.selected)
+            return;
+        line.selected = true;
+        this.group.add(line.lightMesh);
+        line.distanceItem.highlight();
+        this.five.needsRender = true;
+    }
+    clearHighlightLines() {
+        if (this.group.children.length === 0)
+            return;
+        this.deleteDom.setLines([]).hide();
+        this.model.lines.forEach((line) => {
+            line.selected = false;
+            line.distanceItem.unHighlight();
+            this.group.remove(line.lightMesh);
+        });
+        this.highlightedLines = [];
+        this.five.needsRender = true;
+    }
+    onPanStart = (e) => {
+        if (this.model.points.length === 0 || !this.fiveElement)
+            return;
+        const mouse = getPointFromHammerEvent(e).point;
+        const closestPoint = findClosestPoint(this.five, this.model.points, mouse, 20)?.point;
+        if (!closestPoint) {
+            this.editPointState = undefined;
+            return;
+        }
+        const editPointState = {
+            point: closestPoint,
+            associatedLines: findAssociatedLines(closestPoint.lines[0]),
+        };
+        const cancelDragLine = this.hook.emit('wantsDragLine', {
+            point: closestPoint.id,
+            lines: editPointState.associatedLines.map(({ id }) => id),
+        });
+        if (cancelDragLine)
+            return;
+        this.editPointState = editPointState;
+        this.magnifier.appendTo(this.container);
+        this.group.add(this.mouseGroup);
+    };
+    onPanEnd = () => {
+        if (!this.editPointState)
+            return;
+        // 把拖动的线从虚线转换为实线
+        this.editPointState.point.lines.forEach((line) => line.mesh.setMaterial({ dashed: false }));
+        // 还原选中态
+        this.highlightLines(this.editPointState.associatedLines);
+        this.editPointState = undefined;
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+    };
+    onPan = (e) => {
+        if (!this.editPointState || !this.fiveElement)
+            return;
+        const mouse = getPointFromHammerEvent(e).ndcPoint;
+        const raycaster = new three.Raycaster();
+        raycaster.setFromCamera(mouse, this.five.camera);
+        const [intersection] = this.five.model.intersectRaycaster(raycaster);
+        if (!intersection)
+            return;
+        this.onIntersectionUpdate(intersection);
+    };
+    onIntersectionUpdate = (intersection, mesh) => {
+        if (!this.editPointState)
+            return;
+        // 拖动过程中清除选中态
+        this.clearHighlightLines();
+        // 把拖动点相关的线变成虚线 & 改变相关线的位置
+        this.editPointState.point.position.copy(intersection.point);
+        this.editPointState.point.lines.forEach((line) => {
+            line.mesh.setPoints(line.points[0].position.clone(), line.points[1].position.clone());
+            line.lightMesh.setPoints(line.points[0].position.clone(), line.points[1].position.clone());
+            line.mesh.setMaterial({ dashed: true });
+        });
+        this.updateDistanceUI();
+        this.magnifier.updateWithPoint(intersection.point);
+        this.mouseGroup.position.copy(intersection.point);
+        if (mesh) {
+            this.mouseGroup.quaternion.copy(mesh.quaternion);
+        }
+        else if (intersection.face) {
+            const face = intersection.face.normal;
+            const positionVector = face.clone().multiplyScalar(0.05);
+            const position = intersection.point.clone().add(positionVector);
+            const lookAtVector = position.clone().add(positionVector);
+            this.mouseGroup.lookAt(lookAtVector);
+        }
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', this.editPointState.associatedLines.map((line) => line.toCompletelyJson()));
+    };
+    wantsPanGesture = () => {
+        if (this.editPointState)
+            return false;
+    };
+    wantsTapGesture = (raycaster) => {
+        const [target] = this.five.model.intersectRaycaster(raycaster);
+        if (!target)
+            return;
+        const camera = this.five.camera;
+        const ndcTarget = target.point.clone().project(camera);
+        const screenWidth = this.container.clientWidth;
+        const screenHeight = this.container.clientHeight;
+        const targetScreenPosition = new three.Vector2(ndcTarget.x * screenWidth, ndcTarget.y * screenHeight);
+        // 把线的端点全部映射到屏幕上，过滤掉不在视野内的线，同时乘以屏幕宽 & 高
+        const screenLines = this.model.lines
+            .map((line) => {
+            const [startPoint, endPoint] = line.points;
+            const ndcStartPoint = startPoint.position.clone().project(camera);
+            const ndcEndPoint = endPoint.position.clone().project(camera);
+            if (!isNDCPointInScreen(ndcStartPoint) && !isNDCPointInScreen(ndcEndPoint))
+                return null;
+            const startScreenPosition = new three.Vector2(ndcStartPoint.x * screenWidth, ndcStartPoint.y * screenHeight);
+            const endScreenPosition = new three.Vector2(ndcEndPoint.x * screenWidth, ndcEndPoint.y * screenHeight);
+            return { id: line.id, points: [startScreenPosition, endScreenPosition] };
+        })
+            .filter((line) => !!line);
+        if (screenLines.length === 0)
+            return;
+        // 找这些线距离鼠标点击位置最近的线
+        const distanceLines = screenLines
+            .map((line) => {
+            const closestPoint = closestPointOnLine(targetScreenPosition, line.points);
+            return { id: line.id, distance: closestPoint.distanceTo(targetScreenPosition) };
+        })
+            .sort((a, b) => a.distance - b.distance);
+        const closestScreenLine = distanceLines[0];
+        if (closestScreenLine.distance > 20)
+            return;
+        const closestLine = this.model.lines.find(({ id }) => id === closestScreenLine.id);
+        if (!closestLine)
+            return;
+        this.chooseLine(closestLine);
+        return false;
+    };
+    chooseLine = (line) => {
+        const highlightLines = findAssociatedLines(line);
+        this.highlightLines(highlightLines);
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', highlightLines.map((line) => line.toCompletelyJson()));
+    };
+    highlightLines(lines) {
+        this.clearHighlightLines();
+        this.highlightedLines = lines;
+        this.deleteDom.setLines(lines).updatePosition().show();
+        lines.forEach((line) => this.highlightLine(line));
+    }
+    lineRemoved = (line) => {
+        this.removeLine(line);
+        // TODO: 这个逻辑不太好，改进一下
+        this.hook.emit('selectedChange', this.model.lines.filter((line) => line.selected).map((line) => line.toCompletelyJson()));
+    };
+    onCameraUpdate = () => {
+        this.updateDistanceUI();
+        this.highlightedLines.length > 0 && this.deleteDom.updatePosition();
+    };
+    deleteDomClickCallback = () => {
+        const firstLine = this.highlightedLines[0];
+        // TODO: 优化折线的删除逻辑
+        firstLine
+            .getPolyline()
+            .lines.slice()
+            .reverse()
+            .forEach((line) => this.model.removeLine(line));
+        this.highlightedLines = [];
+        // this.clearHighlightLines()
+        // this.highlightedLines.forEach((line) => this.model.removeLine(line))
+        this.deleteDom.setLines([]).hide();
+    };
+}
+
+const planTextureUrl = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjoAAAI6CAMAAAAZlhLyAAACB1BMVEUAAAD+/v6qqqqgoKCLi4t7e3u4uLhvb29MTExZWVlCQkJgYGBqamo4ODi9vb3///9FRUXPz887Ozv///9QUFBWVlZdXV38/Pzj4+Pn5+f8/Pz5+fn9/f329vZoaGje3t78/Pz////x8fH8/Pzs7OyBgYHd3d39/f319fX+/v79/f2Kior6+vr////+/v76+vr+/v7////8/Pz9/f3+/v7m5ub7+/v+/v7+/v7j4+P////+/v79/f3d3d3h4eH4+Pj+/v79/f12dnbc3Nz9/f3w8PD9/f34+Pj9/f3+/v5jY2P8/Pz9/f2ioqJubm7v7+/+/v76+vr5+fnv7+/09PSDg4P////t7e3+/v7+/v7+/v7///+ZmZl7e3v7+/vy8vL+/v7+/v7p6en19fX////s7Oz+/v6lpaX+/v7r6+vg4OD9/f3q6ur///////+UlJTt7e329vbz8/Pg4OD///+wsLCdnZ2QkJDe3t77+/vz8/Pw8PD+/v7c3Nyqqqrw8PD4+Pj+/v7////4+Pj////s7Oyurq7f39/p6en8/Pz////8/Pz19fVycnK0tLT////q6ure3t7o6Oj////s7Oz39/fd3d3h4eH+/v7j4+P////+/v7n5+f///////////////+ysrLe3t7////////8/PzHx8fl5eX////39/fv7+/d3d3///8S/hbOAAAArHRSTlMAzhATFhkNGyEfIx4dJQ/OKwoozS4wMh3Uy4SPbjs34kJ9EAkGP+8Snk1nRRo5JYl2eDQiA88wY3PXRDYN6dyTX0s751SxPJdhPjRdV1M4ti0XFa+pQiq5aShQSE09IKJwWMilWr9SVzLC3wvFwplKvKKY9spfUEjge6yqnexaLpqQakgBtVz1wQe9i4s6ZaG788fGKIXx95TZzKbSuKu1s2LlsJb7dqiu/cSWYhzVwQAALl1JREFUeNrs0jFqalEUheE9C9ugAQloCg0WmuIJIbxHUsQUQhQEQUTINNI463fvqU2xT3G5xfetNYQ/+M3PT7SDfDo/T0/SIe+pCJAOt0mHvrgvAqRDUn061/vrNSDrOhqNpEOFURGQNfqWDlW+i4CadJ6lQ95zESAdbpMOfTEcPg+Hw4CsphvpUGM4bsoZB2SNW9JB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`;
+function getMouseGroup() {
+    const group = new three.Group();
+    const planGeometry = new three.PlaneGeometry(0.3, 0.3);
+    const planTexture = new three.TextureLoader().load(planTextureUrl);
+    planTexture.encoding = three.sRGBEncoding;
+    const planMaterial = new three.MeshBasicMaterial({ map: planTexture, transparent: true, depthTest: false });
+    const planMesh = new three.Mesh(planGeometry, planMaterial);
+    const zPath = new three.CurvePath();
+    zPath.add(new three.LineCurve3(new three.Vector3(0, 0, 0), new three.Vector3(0, 0, 0.1)));
+    const zGeometry = new three.TubeGeometry(zPath, 10, 0.005);
+    const zMaterial = new three.MeshBasicMaterial({ color: 0x33f1ef, depthTest: false, side: three.DoubleSide });
+    const zMesh = new three.Mesh(zGeometry, zMaterial);
+    const ballGeometry = new three.SphereGeometry(0.01, 32, 32);
+    const ballMesh = new three.Mesh(ballGeometry, zMaterial);
+    ballMesh.position.set(0, 0, 0.1);
+    group.name = 'mouse-current';
+    group.add(planMesh, zMesh, ballMesh);
+    return group;
+}
+
+const MAIN_NORMAL_PATH = 'M31.379 15.466a1.045 1.045 0 0 1-.92 1.076l-11.276.607a1.6 1.6 0 0 0-1.512 1.511l-.599 11.113a1.045 1.045 0 0 1-.92 1.075l-.164.008a1.183 1.183 0 0 1-1.123-.975l-.016-.164-.221-10.768a1.6 1.6 0 0 0-1.567-1.567l-11.3-.231-.165-.016a1.187 1.187 0 0 1-.964-.996l-.01-.127.007-.164c.061-.496.455-.876.958-.917l.118-.003 11.112-.599a1.6 1.6 0 0 0 1.498-1.37l.014-.142.607-11.276a1.045 1.045 0 0 1 1.076-.92c.573.015 1.055.46 1.13 1.019l.009.121.221 10.766a1.6 1.6 0 0 0 1.567 1.566l11.3.234a1.181 1.181 0 0 1 1.14 1.139z';
+const MAIN_DONE_PATH = 'M27.1772552,8.15828895 C27.8664561,7.48070421 28.5574369,7.81156875 28.8336646,8.04968716 C29.1098924,8.28780557 29.3990219,9.110014 28.8256559,9.79263351 L28.7110903,9.9165024 L13.9697229,25.1399531 C13.3288458,25.7700285 12.3239388,25.8070917 11.6402346,25.2511429 L11.5159715,25.1399531 L3.7056151,18.0063788 C3.01641417,17.3287941 3.00699739,16.2207954 3.68458213,15.5315945 C4.32230894,14.8829348 5.3413021,14.8364368 6.03356826,15.3981178 L6.15936649,15.5105615 L12.6856594,21.9049888 L27.1772552,8.15828895 Z';
+const MAIN_MOUSE_ENTER_FILL = 'url(#fpm__main-b)';
+const MAIN_MOUSE_LEAVE_FILL = 'url(#fpm__main-c)';
+const revokeSvg = `
+  <svg class="fpm__revoke-icon" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="47.631%" y1="55.183%" x2="2.967%" y2="86.323%" id="fpm__revoke-a">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".5" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="5.297%" y1="43.016%" x2="38.238%" y2="79.932%" id="fpm__revoke-b">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity="0" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M13.388 7.108c.552 0 1.005.42 1.06.957l.006.11v1.224c0 .921.745 1.667 1.666 1.667h7.184c5.804 0 10.509 4.616 10.509 10.309 0 5.595-4.544 10.15-10.21 10.305l-.3.004H8.924c-.917 0-1.66-.729-1.66-1.628 0-.846.658-1.541 1.5-1.62l.16-.008h14.38c3.972 0 7.191-3.158 7.191-7.053 0-3.81-3.08-6.916-6.933-7.049l-.257-.004H10.029l-.109-.005H8.212c-.245 0-.482-.085-.67-.237l-.09-.082a1.066 1.066 0 0 1-.065-1.422l.079-.086 5.175-5.077c.2-.195.468-.305.747-.305z"
+      fill="url(#fpm__revoke-a)"
+      fill-rule="nonzero"
+      stroke="url(#fpm__revoke-b)"
+      stroke-width=".5"
+    />
+  </svg>
+`;
+const exitSvg = `
+  <svg class="fpm__exit-icon width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="36.288%" y1="73.736%" x2="54.242%" y2="97.166%" id="fpm__exit-a">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".5" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="100%" y1="47.234%" x2="24.047%" y2="47.234%" id="fpm__exit-b">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".005" offset="99.535%" />
+        <stop stop-color="#FFF" stop-opacity="0" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M22 7a1.5 1.5 0 0 1 .144 2.993L22 10h-9a1.5 1.5 0 0 0-1.493 1.356l-.007.144v17a1.5 1.5 0 0 0 1.356 1.493L13 30h9a1.5 1.5 0 0 1 .144 2.993L22 33h-9a4.5 4.5 0 0 1-4.495-4.288L8.5 28.5v-17a4.5 4.5 0 0 1 4.288-4.495L13 7h9zm6.317 7.755a1 1 0 0 1 .7.286l4.856 4.764a1 1 0 0 1-.7 1.713h-5.856V21.5h-8.032a1.5 1.5 0 1 1 0-3h6.365c.92 0 1.666-.746 1.667-1.667v-1.078a1 1 0 0 1 1-1z"
+      fill="url(#fpm__exit-a)"
+      fill-rule="nonzero"
+      stroke="url(#fpm__exit-b)"
+      stroke-width=".5"
+    />
+  </svg>
+`;
+const mainSvg = `
+  <svg class="fpm__main-icon" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <mask id="fpm__main-icon-mask">
+        <rect id="fpm__main-icon-mask-black" x="0" y="0" width="30" height="30" fill="black"></rect>
+        <rect id="fpm__main-icon-mask-white" x="0" y="0" width="0" height="30" fill="white"></rect>
+      </mask>
+      <linearGradient id="fpm__main-a" x1="25.371%" y1="0%" x2="109.587%" y2="172.268%">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".77" offset="44.051%" />
+        <stop stop-color="#FFF" stop-opacity=".201" offset="100%" />
+      </linearGradient>
+      <radialGradient id="fpm__main-b" fx="50%" fy="50%" r="50.864%" gradientTransform="matrix(-.98302 0 0 -1 .992 1)">
+        <stop stop-color="#2D7CFF" offset="0%" />
+        <stop stop-color="#2D7CFF" stop-opacity=".3" offset="100%" />
+      </radialGradient>
+      <radialGradient id="fpm__main-c" fx="50%" fy="50%" r="50.864%" gradientTransform="matrix(-.98302 0 0 -1 .992 1)">
+        <stop stop-opacity=".4" offset="0%" />
+        <stop stop-opacity=".12" offset="100%" />
+      </radialGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <circle fill="url(#fpm__main-a)" cx="30" cy="30" r="30" />
+      <path
+        class="fpm__main-icon-path"
+        d="${MAIN_NORMAL_PATH}"
+        fill="${MAIN_MOUSE_LEAVE_FILL}"
+        fill-rule="nonzero"
+        transform="translate(14 14)"
+      />
+    </g>
+  </svg>
+`;
+var htmlString = `
+  <style>
+    .fpm__revoke {
+      opacity: 0.3;
+    }
+    
+    .fpm__revoke.enabled {
+      opacity: 0.7;
+    }
+    
+    .fpm__revoke.enabled:hover {
+      opacity: 1;
+    }
+    
+    .fpm__revoke-icon {
+      width: 40px;
+      height: 40px;
+      margin-top: 10px;
+      cursor: pointer;
+    }  
+  </style>
+  <div class="fpm_ui-bg"></div>
+  <div class="fpm_operating-space">
+    <div class="fpm__ui-item fpm__revoke">
+      ${revokeSvg}
+      <span class="fpm__text fpm__revoke-text">撤销</span>
+    </div>
+    <div class="fpm__ui-item fpm__main">
+      ${mainSvg}
+      <span class="fpm__text fpm__main-text">添加</span>
+    </div>
+    <div class="fpm__ui-item fpm__exit">
+      ${exitSvg}
+      <span class="fpm__text fpm__exit-text">退出</span>
+    </div>
+  </div>
+`;
+
+const uiWrapperStyle = {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    opacity: '0',
+    transform: 'translate(0, 10px)',
+    transition: 'opacity 500ms ease-in-out, transform 500ms ease-in-out',
+};
+const operatingSpaceStyle = {
+    position: 'absolute',
+    left: '50%',
+    bottom: '32px',
+    transform: 'translateX(-50%)',
+    width: '300px',
+    height: '89px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: '16px',
+    pointerEvents: 'all',
+    color: '#fff',
+    zIndex: '10',
+};
+const buttonGroupStyle = {
+    height: '100%',
+    width: 'max-content',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+// 操作区下方的背景
+const controllerBackgroundStyle = {
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    opacity: '0.5',
+    width: '100%',
+    height: '184px',
+    background: `linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%)`,
+    zIndex: '0',
+};
+// item
+const mainItemStyle = {
+    margin: '0 80px',
+    opacity: '0.7',
+};
+const exitItemStyle = {
+    opacity: '0.7',
+};
+// icon
+const mainIconStyle = {
+    width: '60px',
+    height: '60px',
+    backgroundSize: '100%',
+    cursor: 'pointer',
+};
+const exitIconStyle = {
+    width: '40px',
+    height: '40px',
+    marginTop: '10px',
+    backgroundSize: '100%',
+    cursor: 'pointer',
+};
+// text
+const textStyle = {
+    cursor: 'default',
+    userSelect: 'none',
+};
+
+const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16));
+const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+function requestAnimationFrameInterval(callback, frame = 60) {
+    let index = -1;
+    let oldTime = 0;
+    let startTime = -1;
+    const minDeltaTime = 1000 / frame;
+    function loop(time) {
+        startTime === -1 && (startTime = time);
+        index = _requestAnimationFrame(loop);
+        const deltaTime = time - oldTime;
+        if (deltaTime < minDeltaTime)
+            return;
+        oldTime = time;
+        callback && callback(time - startTime);
+    }
+    index = _requestAnimationFrame(loop);
+    return function stop() {
+        _cancelAnimationFrame(index);
+    };
+}
+// export { Easing } from './tween'
+// export { default as tween } from './tween'
+
+class BetterTween extends TWEEN__default["default"].Tween {
+    disposeMethods = [];
+    animationFrameDisposer;
+    onDispose = (callback) => {
+        this.disposeMethods.push(callback);
+        return this;
+    };
+    play = () => {
+        this.start(0);
+        this.animationFrameDisposer = requestAnimationFrameInterval((time) => this.update(time));
+        return this;
+    };
+    dispose = () => {
+        this.stop();
+        this.animationFrameDisposer?.();
+        this.disposeMethods.forEach((fn) => fn());
+        this.disposeMethods = [];
+        TWEEN__default["default"].remove(this);
+    };
+}
+function tweenProgress(duration, easing = TWEEN__default["default"].Easing.Linear.None) {
+    const tween = new BetterTween({ progress: 0 }).to({ progress: 1 });
+    if (duration !== undefined)
+        tween.duration(duration);
+    if (easing !== undefined)
+        tween.easing(easing);
+    return tween;
+}
+
+class MainBtnController {
+    container;
+    measureController;
+    mainIconMaskTween;
+    mainElement;
+    constructor(measureController, container) {
+        this.measureController = measureController;
+        this.container = container;
+        this.mainElement = this.getMainElement();
+        Object.assign(this.mainElement.mainIcon.style, mainIconStyle);
+        Object.assign(this.mainElement.mainItem.style, mainItemStyle);
+        this.change2Add();
+        this.measureController.hook.on('modeChange', this.modeChangeHandler);
+        this.mainElement.mainIcon.addEventListener('click', this.onClick);
+        this.mainElement.mainIcon.addEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.measureController.hook.off('modeChange', this.modeChangeHandler);
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        this.mainElement.mainIcon.removeEventListener('click', this.onClick);
+        this.mainElement.mainIcon.removeEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+    getMainElement() {
+        const mainTextDom = this.container.querySelector('.fpm__main-text');
+        const mainItem = this.container.querySelector('.fpm__main');
+        const mainIcon = this.container.querySelector('.fpm__main-icon');
+        const pathDom = mainItem?.querySelector('.fpm__main-icon-path');
+        const maskWhiteRect = mainIcon?.querySelector('#fpm__main-icon-mask-white');
+        if (!mainItem || !mainTextDom || !mainIcon || !pathDom || !maskWhiteRect)
+            throw new Error('cannot find dom');
+        return { mainTextDom, mainItem, mainIcon, pathDom, maskWhiteRect };
+    }
+    change2Add() {
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        mainIcon.style.transition = mainTextDom.innerText === '完成' ? 'none' : 'transform 300ms ease-in-out';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '添加';
+        pathDom?.setAttribute('d', MAIN_NORMAL_PATH);
+    }
+    change2Cancel(withAnime = true) {
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        pathDom.setAttribute('d', MAIN_NORMAL_PATH);
+        pathDom.setAttribute('mask', '');
+        mainIcon.style.transition = withAnime ? 'transform 300ms ease-in-out' : 'none';
+        mainIcon.style.transform = 'rotate(45deg)';
+        mainTextDom && (mainTextDom.innerText = '取消');
+        this.measureController.hook.on('editedLineChange', this.editedLineChangeHandler);
+    }
+    change2Done() {
+        const { mainTextDom, mainIcon, pathDom, maskWhiteRect } = this.getMainElement();
+        if (mainTextDom.innerText === '完成')
+            return;
+        mainIcon.style.transition = 'none';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '完成';
+        pathDom.setAttribute('d', MAIN_DONE_PATH);
+        pathDom.setAttribute('mask', `url(#fpm__main-icon-mask)`);
+        this.mainIconMaskTween?.dispose();
+        this.mainIconMaskTween = tweenProgress()
+            .easing(TWEEN__default["default"].Easing.Quartic.InOut)
+            .onUpdate(({ progress }) => {
+            maskWhiteRect.setAttribute('width', (progress * 30).toString());
+        })
+            .onComplete(() => this.mainIconMaskTween?.dispose())
+            .play();
+    }
+    /* 鼠标移入时变成蓝色 */
+    onMouseEnter = () => {
+        const { mainItem, pathDom } = this.mainElement;
+        mainItem.style.opacity = '1';
+        pathDom.setAttribute('fill', MAIN_MOUSE_ENTER_FILL);
+    };
+    /* 鼠标移出时变成灰色 */
+    onMouseLeave = () => {
+        const { mainItem, pathDom } = this.mainElement;
+        mainItem.style.opacity = '0.7';
+        pathDom.setAttribute('fill', MAIN_MOUSE_LEAVE_FILL);
+    };
+    onClick = () => {
+        const mode = this.measureController.getCurrentMode();
+        mode === 'Watch' ? this.measureController.changeMode('Edit') : this.measureController.save().changeMode('Watch');
+    };
+    editedLineChangeHandler = (lines) => {
+        // 线的数量大于 1 时，没有状态的变化
+        if (lines.length > 1)
+            return;
+        // 因为撤销导致的状态变更 -> 取消
+        if (lines.length === 0)
+            return this.change2Cancel(false);
+        this.change2Done();
+    };
+    modeChangeHandler = (mode) => {
+        mode === 'Watch' ? this.change2Add() : this.change2Cancel();
+    };
+}
+
+class Revoke {
+    container;
+    revokeIcon;
+    revokeItem;
+    measureController;
+    constructor(measureController, container) {
+        this.measureController = measureController;
+        this.container = container;
+        const revokeIcon = this.container.querySelector('.fpm__revoke-icon');
+        const revokeItem = this.container.querySelector('.fpm__revoke');
+        if (!revokeIcon || !revokeItem)
+            throw new Error('不正确的选择器');
+        this.revokeIcon = revokeIcon;
+        this.revokeItem = revokeItem;
+        this.revokeIcon.addEventListener('click', this.onClick);
+        measureController.hook.on('modeChange', this.onModeChange);
+    }
+    dispose() {
+        this.revokeIcon.removeEventListener('click', this.onClick);
+        this.measureController.hook.off('modeChange', this.onModeChange);
+    }
+    onClick = () => {
+        this.measureController.revoke();
+    };
+    onModeChange = (mode) => {
+        if (mode !== 'Edit') {
+            this.revokeItem.classList.remove('enabled');
+            return;
+        }
+        this.revokeItem.classList.add('enabled');
+    };
+    handleRevoke = () => {
+        return () => { };
+    };
+}
+
+class UIController {
+    revoke;
+    container;
+    mainController;
+    disposers = [];
+    measureController;
+    constructor(measureController, params) {
+        this.measureController = measureController;
+        this.container = document.createElement('div');
+        this.container.innerHTML = htmlString;
+        this.container.classList.add('fpm__ui-controller');
+        params.container.appendChild(this.container);
+        const textDoms = this.container.querySelectorAll('.fpm__text');
+        const UIItems = this.container.querySelectorAll('.fpm__ui-item');
+        const bgDom = this.container.querySelector('.fpm_ui-bg');
+        const operatingSpaceDom = this.container.querySelector('.fpm_operating-space');
+        Object.assign(bgDom?.style, controllerBackgroundStyle);
+        Object.assign(operatingSpaceDom?.style, operatingSpaceStyle);
+        Object.assign(this.container.style, uiWrapperStyle);
+        UIItems.forEach((item) => Object.assign(item.style, buttonGroupStyle));
+        textDoms.forEach((item) => Object.assign(item.style, textStyle));
+    }
+    dispose() {
+        this.hide();
+        this.container.remove();
+    }
+    show() {
+        this.container.style.opacity = '1';
+        this.container.style.transform = 'translate(0, 0)';
+        this.revoke = new Revoke(this.measureController, this.container);
+        this.mainController = new MainBtnController(this.measureController, this.container);
+        this.disposers.push(this.handleExit());
+        return this;
+    }
+    hide() {
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, 10px)';
+        this.revoke?.dispose();
+        this.mainController?.dispose();
+        this.disposers.forEach((disposer) => disposer());
+        this.disposers = [];
+        return this;
+    }
+    handleExit = () => {
+        const exitIcon = this.container.querySelector('.fpm__exit-icon');
+        const exitItem = this.container.querySelector('.fpm__exit');
+        if (!exitItem || !exitIcon)
+            throw new Error('cannot find dom');
+        Object.assign(exitItem.style, exitItemStyle);
+        Object.assign(exitIcon?.style, exitIconStyle);
+        const onMouseEnter = () => (exitItem.style.opacity = '1');
+        const onMouseLeave = () => (exitItem.style.opacity = '0.7');
+        const handleClick = () => {
+            this.measureController.disable();
+        };
+        exitIcon.addEventListener('click', handleClick);
+        exitIcon.addEventListener('mouseenter', onMouseEnter);
+        exitIcon.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            exitIcon.removeEventListener('click', handleClick);
+            exitIcon.removeEventListener('mouseenter', onMouseEnter);
+            exitIcon.removeEventListener('mouseleave', onMouseLeave);
+        };
+    };
+}
+
+class GuideController {
+    measureController;
+    textDom = document.createElement('span');
+    container = document.createElement('div');
+    hasAnchor = false;
+    constructor(measureController, params) {
+        this.initDom();
+        params.container.append(this.container);
+        this.measureController = measureController;
+        measureController.hook.on('modeChange', this.onModelChange);
+        measureController.hook.on('anchorChange', this.anchorChange);
+        measureController.hook.on('editedLineChange', this.onEditedLineChange);
+    }
+    dispose() {
+        this.hide();
+        this.container.remove();
+    }
+    show() {
+        this.container.style.opacity = '1';
+        this.container.style.transform = 'translate(0, 0)';
+        return this;
+    }
+    hide() {
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, -10px)';
+        this.measureController.hook.off('modeChange', this.onModelChange);
+        this.measureController.hook.off('anchorChange', this.anchorChange);
+        this.measureController.hook.off('editedLineChange', this.onEditedLineChange);
+        return this;
+    }
+    initDom() {
+        const container = this.container;
+        const textDom = this.textDom;
+        container.classList.add('fpm__guide-container');
+        container.style.position = 'absolute';
+        container.style.top = '0px';
+        container.style.left = '0px';
+        container.style.width = '100%';
+        container.style.height = '110px';
+        container.style.display = 'flex';
+        container.style.alignItems = 'center';
+        container.style.justifyContent = 'center';
+        container.style.transform = 'translate(0, -10px)';
+        container.style.background = `linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.00) 100%)`;
+        container.style.transition = 'opacity 500ms ease-in-out, transform 500ms ease-in-out';
+        container.style.opacity = '0';
+        textDom.classList.add('fpm__guide-text');
+        textDom.style.color = '#fff';
+        textDom.style.fontSize = '20px';
+        textDom.innerText = `点击下方“添加”开始测距`;
+        container.appendChild(textDom);
+    }
+    onModelChange = (mode) => {
+        if (mode === 'Watch') {
+            this.textDom.innerText = ``;
+            return;
+        }
+        this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
+    };
+    anchorChange = (anchor) => {
+        if (!this.hasAnchor && !!anchor) {
+            this.hasAnchor = true;
+            this.textDom.innerText = `选择下一个测量点，Esc或单击鼠标右键取消选择`;
+        }
+        else if (!anchor) {
+            this.hasAnchor = false;
+            this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
+        }
+    };
+    onEditedLineChange = (lines) => {
+        if (lines.length === 1) {
+            this.textDom.innerText = `可以连续选择测量点，或点击下方“完成”结束测量（Esc取消，Command+S保存）`;
+        }
+    };
+}
+
+/** 快捷键控制器 */
+class ShortcutKeyController {
+    five;
+    measureController;
+    constructor(measureController, five) {
+        this.five = five;
+        this.measureController = measureController;
+        const fiveElement = this.five.getElement();
+        if (!fiveElement)
+            return;
+        document.body.addEventListener('keydown', this.onKeyDown);
+        fiveElement.addEventListener('mousedown', this.onMouseDown);
+    }
+    dispose() {
+        const fiveElement = this.five.getElement();
+        if (!fiveElement)
+            return;
+        document.body.removeEventListener('keydown', this.onKeyDown);
+        fiveElement.removeEventListener('mousedown', this.onMouseDown);
+    }
+    escape() {
+        if (this.measureController.getCurrentMode() === 'Watch')
+            return this.measureController.disable();
+        return this.measureController.changeMode('Watch');
+    }
+    onKeyDown = (e) => {
+        // Command + S -> 保存 & 更改场景
+        if (e.metaKey && e.code === 'KeyS') {
+            this.measureController.save().changeMode('Watch');
+            e.preventDefault();
+            return;
+        }
+        // Escape -> 切换到观察模式 / 如果已经在观察模式，退出功能
+        if (e.code === 'Escape')
+            return this.escape();
+    };
+    onMouseDown = (e) => {
+        // 鼠标右键取消
+        if (e.button !== 2)
+            return;
+        e.preventDefault();
+        this.escape();
+    };
+}
+
+class MeasureController {
+    hasOpen = false;
+    hook = new five.Subscribe();
+    five;
+    model;
+    group;
+    magnifier;
+    fiveHelper;
+    useUIController;
+    params;
+    useGuideController;
+    container = document.createElement('div');
+    shortcutKeyController;
+    controller = null;
+    controllerParams;
+    constructor(five, params) {
+        this.five = five;
+        this.params = params;
+        this.model = new Model({ userDistanceItemCreator: this.params.userDistanceItemCreator });
+        this.fiveHelper = new FiveHelper(five);
+        // magnifier
+        const magnifierSize = 190;
+        const magnifierScale = 2;
+        this.magnifier = new Magnifier(five, { scale: magnifierScale, width: magnifierSize, height: magnifierSize });
+        // ==================== Group ====================
+        this.group = new three.Group();
+        this.group.name = 'plugin-measure-group';
+        this.container.classList.add('five-plugin-measure-container');
+        this.container.style.position = 'relative';
+        this.container.style.pointerEvents = 'none';
+        this.container.style.width = '100%';
+        this.container.style.height = '100%';
+        this.container.style.background = 'rgba(0, 0, 0, 0.15)';
+        this.controllerParams = {
+            five: this.five,
+            hook: this.hook,
+            group: this.group,
+            model: this.model,
+            magnifier: this.magnifier,
+            container: this.container,
+            fiveHelper: this.fiveHelper,
+            mouseGroup: getMouseGroup(),
+            userDistanceItemCreator: this.params.userDistanceItemCreator,
+        };
+        if (this.params.useUIController !== false)
+            this.useUIController = new UIController(this, this.controllerParams);
+        if (this.params.useUIController !== false)
+            this.useGuideController = new GuideController(this, this.controllerParams);
+    }
+    appendTo(parent) {
+        parent.append(this.container);
+    }
+    dispose() {
+        this.disable();
+        this.useUIController?.dispose();
+        this.magnifier?.dispose();
+        this.five.needsRender = true;
+    }
+    /** 加载数据
+     * @description 数据加载时会覆盖当前已保存的数据
+     * @description 如果当前正在编辑中，会自动退出并保存编辑
+     */
+    load(data) {
+        this.model.parse(data);
+        this.save();
+    }
+    /** 插件功能入口
+     * @description 会隐藏鼠标的默认聚焦环
+     * @description 会隐藏当前 VR 内的点位展示
+     */
+    enable() {
+        if (this.hasOpen)
+            return;
+        this.hasOpen = true;
+        this.five.scene.add(this.group);
+        // 隐藏点位和鼠标聚焦环
+        this.five.helperVisible = false;
+        this.controller = new WatchController(this.controllerParams);
+        this.useUIController?.show();
+        this.useGuideController?.show();
+        this.shortcutKeyController = new ShortcutKeyController(this, this.five);
+        this.hook.emit('enable', true);
+    }
+    /** 关闭插件功能
+     * @description 清除标尺线条
+     * @description 还原点位展示和默认鼠标 UI
+     */
+    disable() {
+        this.hasOpen = false;
+        // 展示点位和鼠标聚焦环
+        this.controller?.dispose();
+        this.useUIController?.hide();
+        this.useGuideController?.hide();
+        this.shortcutKeyController?.dispose();
+        this.controller = null;
+        this.five.helperVisible = true;
+        this.five.scene.remove(this.group);
+        this.five.needsRender = true;
+        this.hook.emit('disable', true);
+    }
+    getCurrentMode = () => {
+        if (this.controller instanceof EditController)
+            return 'Edit';
+        if (this.controller instanceof WatchController)
+            return 'Watch';
+        return null;
+    };
+    /** 变更场景
+     * @description 如果从编辑场景改变到观看场景，不会自动保存，默认丢弃所有改动
+     */
+    changeMode = (mode) => {
+        if (!this.hasOpen)
+            return;
+        if (this.getCurrentMode() === mode)
+            return;
+        this.controller?.dispose();
+        const controllerMap = {
+            Watch: WatchController,
+            Edit: EditController,
+        };
+        if (!controllerMap[mode])
+            throw new Error('不存在的 Mode');
+        this.controller = new controllerMap[mode](this.controllerParams);
+        this.hook.emit('modeChange', mode);
+    };
+    /** 撤销编辑 */
+    revoke() {
+        if (!(this.controller instanceof EditController))
+            return;
+        this.controller.revoke();
+        return;
+    }
+    removeLineByID(lineID) {
+        this.model.removeLineByID(lineID);
+    }
+    /**
+     * 高亮当前线段
+     */
+    highlightLine(lineID) {
+        if (this.getCurrentMode() !== 'Watch')
+            return false;
+        const line = this.model.getLineByID(lineID);
+        if (!line)
+            return false;
+        this.controller.highlightLine(line);
+        return true;
+    }
+    clearHighlightLines() {
+        if (this.getCurrentMode() !== 'Watch')
+            return false;
+        this.controller.clearHighlightLines();
+        return true;
+    }
+    /** 保存编辑 */
+    save() {
+        if (!(this.controller instanceof EditController))
+            return this;
+        this.model.mergeModel(this.controller.model);
+        return this;
+    }
+    /** 把当前以保存的数据转换成 JSON 对象 */
+    toJson() {
+        return this.model.toJson();
+    }
+}
+
+const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+    return new MeasureController(five, params);
+};
+
+module.exports = PanoMeasurePlugin;