From aa652406502b0b6bf2d6cc12bd99224831dcc519 Mon Sep 17 00:00:00 2001
From: Daybrush <daybrush@gmail.com>
Date: Fri, 23 Aug 2019 00:11:24 +0900
Subject: [PATCH] chore: Release 0.7.2

---
 .gitignore                                    |    2 +-
 dist/moveable.cjs.js                          | 4715 ++++++++++++
 dist/moveable.cjs.js.map                      |    1 +
 dist/moveable.esm.js                          | 4711 ++++++++++++
 dist/moveable.esm.js.map                      |    1 +
 dist/moveable.js                              | 6486 +++++++++++++++++
 dist/moveable.js.map                          |    1 +
 dist/moveable.min.js                          |   10 +
 dist/moveable.min.js.map                      |    1 +
 package-lock.json                             |   23 +-
 package.json                                  |    2 +-
 packages/preact-moveable/package-lock.json    |   14 +-
 packages/preact-moveable/package.json         |    6 +-
 packages/react-moveable/package.json          |    2 +-
 .../src/react-moveable/matrix.ts              |    5 +
 .../src/react-moveable/utils.ts               |    6 +-
 16 files changed, 15963 insertions(+), 23 deletions(-)
 create mode 100644 dist/moveable.cjs.js
 create mode 100644 dist/moveable.cjs.js.map
 create mode 100644 dist/moveable.esm.js
 create mode 100644 dist/moveable.esm.js.map
 create mode 100644 dist/moveable.js
 create mode 100644 dist/moveable.js.map
 create mode 100644 dist/moveable.min.js
 create mode 100644 dist/moveable.min.js.map

diff --git a/.gitignore b/.gitignore
index 9c0f0c661..cffadfe7b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,7 @@ node_modules/
 *.DS_Store
 .DS_Store
 doc/
-dist/
+
 demo/dist/
 packages/*/dist/
 release/
diff --git a/dist/moveable.cjs.js b/dist/moveable.cjs.js
new file mode 100644
index 000000000..6ddb5c2b3
--- /dev/null
+++ b/dist/moveable.cjs.js
@@ -0,0 +1,4715 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.7.2
+*/
+'use strict';
+
+var EgComponent = require('@egjs/component');
+var frameworkUtils = require('framework-utils');
+var getAgent = require('@egjs/agent');
+var utils = require('@daybrush/utils');
+var Dragger = require('@daybrush/drag');
+var ChildrenDiffer = require('@egjs/children-differ');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+var VNode = function VNode() {};
+
+var options = {};
+
+var stack = [];
+
+var EMPTY_CHILDREN = [];
+
+function h(nodeName, attributes) {
+	var children = EMPTY_CHILDREN,
+	    lastSimple,
+	    child,
+	    simple,
+	    i;
+	for (i = arguments.length; i-- > 2;) {
+		stack.push(arguments[i]);
+	}
+	if (attributes && attributes.children != null) {
+		if (!stack.length) stack.push(attributes.children);
+		delete attributes.children;
+	}
+	while (stack.length) {
+		if ((child = stack.pop()) && child.pop !== undefined) {
+			for (i = child.length; i--;) {
+				stack.push(child[i]);
+			}
+		} else {
+			if (typeof child === 'boolean') child = null;
+
+			if (simple = typeof nodeName !== 'function') {
+				if (child == null) child = '';else if (typeof child === 'number') child = String(child);else if (typeof child !== 'string') simple = false;
+			}
+
+			if (simple && lastSimple) {
+				children[children.length - 1] += child;
+			} else if (children === EMPTY_CHILDREN) {
+				children = [child];
+			} else {
+				children.push(child);
+			}
+
+			lastSimple = simple;
+		}
+	}
+
+	var p = new VNode();
+	p.nodeName = nodeName;
+	p.children = children;
+	p.attributes = attributes == null ? undefined : attributes;
+	p.key = attributes == null ? undefined : attributes.key;
+
+	if (options.vnode !== undefined) options.vnode(p);
+
+	return p;
+}
+
+function extend(obj, props) {
+  for (var i in props) {
+    obj[i] = props[i];
+  }return obj;
+}
+
+function applyRef(ref, value) {
+  if (ref) {
+    if (typeof ref == 'function') ref(value);else ref.current = value;
+  }
+}
+
+var defer = typeof Promise == 'function' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout;
+
+var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
+
+var items = [];
+
+function enqueueRender(component) {
+	if (!component._dirty && (component._dirty = true) && items.push(component) == 1) {
+		( defer)(rerender);
+	}
+}
+
+function rerender() {
+	var p;
+	while (p = items.pop()) {
+		if (p._dirty) renderComponent(p);
+	}
+}
+
+function isSameNodeType(node, vnode, hydrating) {
+	if (typeof vnode === 'string' || typeof vnode === 'number') {
+		return node.splitText !== undefined;
+	}
+	if (typeof vnode.nodeName === 'string') {
+		return !node._componentConstructor && isNamedNode(node, vnode.nodeName);
+	}
+	return hydrating || node._componentConstructor === vnode.nodeName;
+}
+
+function isNamedNode(node, nodeName) {
+	return node.normalizedNodeName === nodeName || node.nodeName.toLowerCase() === nodeName.toLowerCase();
+}
+
+function getNodeProps(vnode) {
+	var props = extend({}, vnode.attributes);
+	props.children = vnode.children;
+
+	var defaultProps = vnode.nodeName.defaultProps;
+	if (defaultProps !== undefined) {
+		for (var i in defaultProps) {
+			if (props[i] === undefined) {
+				props[i] = defaultProps[i];
+			}
+		}
+	}
+
+	return props;
+}
+
+function createNode(nodeName, isSvg) {
+	var node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName);
+	node.normalizedNodeName = nodeName;
+	return node;
+}
+
+function removeNode(node) {
+	var parentNode = node.parentNode;
+	if (parentNode) parentNode.removeChild(node);
+}
+
+function setAccessor(node, name, old, value, isSvg) {
+	if (name === 'className') name = 'class';
+
+	if (name === 'key') ; else if (name === 'ref') {
+		applyRef(old, null);
+		applyRef(value, node);
+	} else if (name === 'class' && !isSvg) {
+		node.className = value || '';
+	} else if (name === 'style') {
+		if (!value || typeof value === 'string' || typeof old === 'string') {
+			node.style.cssText = value || '';
+		}
+		if (value && typeof value === 'object') {
+			if (typeof old !== 'string') {
+				for (var i in old) {
+					if (!(i in value)) node.style[i] = '';
+				}
+			}
+			for (var i in value) {
+				node.style[i] = typeof value[i] === 'number' && IS_NON_DIMENSIONAL.test(i) === false ? value[i] + 'px' : value[i];
+			}
+		}
+	} else if (name === 'dangerouslySetInnerHTML') {
+		if (value) node.innerHTML = value.__html || '';
+	} else if (name[0] == 'o' && name[1] == 'n') {
+		var useCapture = name !== (name = name.replace(/Capture$/, ''));
+		name = name.toLowerCase().substring(2);
+		if (value) {
+			if (!old) node.addEventListener(name, eventProxy, useCapture);
+		} else {
+			node.removeEventListener(name, eventProxy, useCapture);
+		}
+		(node._listeners || (node._listeners = {}))[name] = value;
+	} else if (name !== 'list' && name !== 'type' && !isSvg && name in node) {
+		try {
+			node[name] = value == null ? '' : value;
+		} catch (e) {}
+		if ((value == null || value === false) && name != 'spellcheck') node.removeAttribute(name);
+	} else {
+		var ns = isSvg && name !== (name = name.replace(/^xlink:?/, ''));
+
+		if (value == null || value === false) {
+			if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());else node.removeAttribute(name);
+		} else if (typeof value !== 'function') {
+			if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value);
+		}
+	}
+}
+
+function eventProxy(e) {
+	return this._listeners[e.type](options.event && options.event(e) || e);
+}
+
+var mounts = [];
+
+var diffLevel = 0;
+
+var isSvgMode = false;
+
+var hydrating = false;
+
+function flushMounts() {
+	var c;
+	while (c = mounts.shift()) {
+		if (c.componentDidMount) c.componentDidMount();
+	}
+}
+
+function diff(dom, vnode, context, mountAll, parent, componentRoot) {
+	if (!diffLevel++) {
+		isSvgMode = parent != null && parent.ownerSVGElement !== undefined;
+
+		hydrating = dom != null && !('__preactattr_' in dom);
+	}
+
+	var ret = idiff(dom, vnode, context, mountAll, componentRoot);
+
+	if (parent && ret.parentNode !== parent) parent.appendChild(ret);
+
+	if (! --diffLevel) {
+		hydrating = false;
+
+		if (!componentRoot) flushMounts();
+	}
+
+	return ret;
+}
+
+function idiff(dom, vnode, context, mountAll, componentRoot) {
+	var out = dom,
+	    prevSvgMode = isSvgMode;
+
+	if (vnode == null || typeof vnode === 'boolean') vnode = '';
+
+	if (typeof vnode === 'string' || typeof vnode === 'number') {
+		if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
+			if (dom.nodeValue != vnode) {
+				dom.nodeValue = vnode;
+			}
+		} else {
+			out = document.createTextNode(vnode);
+			if (dom) {
+				if (dom.parentNode) dom.parentNode.replaceChild(out, dom);
+				recollectNodeTree(dom, true);
+			}
+		}
+
+		out['__preactattr_'] = true;
+
+		return out;
+	}
+
+	var vnodeName = vnode.nodeName;
+	if (typeof vnodeName === 'function') {
+		return buildComponentFromVNode(dom, vnode, context, mountAll);
+	}
+
+	isSvgMode = vnodeName === 'svg' ? true : vnodeName === 'foreignObject' ? false : isSvgMode;
+
+	vnodeName = String(vnodeName);
+	if (!dom || !isNamedNode(dom, vnodeName)) {
+		out = createNode(vnodeName, isSvgMode);
+
+		if (dom) {
+			while (dom.firstChild) {
+				out.appendChild(dom.firstChild);
+			}
+			if (dom.parentNode) dom.parentNode.replaceChild(out, dom);
+
+			recollectNodeTree(dom, true);
+		}
+	}
+
+	var fc = out.firstChild,
+	    props = out['__preactattr_'],
+	    vchildren = vnode.children;
+
+	if (props == null) {
+		props = out['__preactattr_'] = {};
+		for (var a = out.attributes, i = a.length; i--;) {
+			props[a[i].name] = a[i].value;
+		}
+	}
+
+	if (!hydrating && vchildren && vchildren.length === 1 && typeof vchildren[0] === 'string' && fc != null && fc.splitText !== undefined && fc.nextSibling == null) {
+		if (fc.nodeValue != vchildren[0]) {
+			fc.nodeValue = vchildren[0];
+		}
+	} else if (vchildren && vchildren.length || fc != null) {
+			innerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML != null);
+		}
+
+	diffAttributes(out, vnode.attributes, props);
+
+	isSvgMode = prevSvgMode;
+
+	return out;
+}
+
+function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {
+	var originalChildren = dom.childNodes,
+	    children = [],
+	    keyed = {},
+	    keyedLen = 0,
+	    min = 0,
+	    len = originalChildren.length,
+	    childrenLen = 0,
+	    vlen = vchildren ? vchildren.length : 0,
+	    j,
+	    c,
+	    f,
+	    vchild,
+	    child;
+
+	if (len !== 0) {
+		for (var i = 0; i < len; i++) {
+			var _child = originalChildren[i],
+			    props = _child['__preactattr_'],
+			    key = vlen && props ? _child._component ? _child._component.__key : props.key : null;
+			if (key != null) {
+				keyedLen++;
+				keyed[key] = _child;
+			} else if (props || (_child.splitText !== undefined ? isHydrating ? _child.nodeValue.trim() : true : isHydrating)) {
+				children[childrenLen++] = _child;
+			}
+		}
+	}
+
+	if (vlen !== 0) {
+		for (var i = 0; i < vlen; i++) {
+			vchild = vchildren[i];
+			child = null;
+
+			var key = vchild.key;
+			if (key != null) {
+				if (keyedLen && keyed[key] !== undefined) {
+					child = keyed[key];
+					keyed[key] = undefined;
+					keyedLen--;
+				}
+			} else if (min < childrenLen) {
+					for (j = min; j < childrenLen; j++) {
+						if (children[j] !== undefined && isSameNodeType(c = children[j], vchild, isHydrating)) {
+							child = c;
+							children[j] = undefined;
+							if (j === childrenLen - 1) childrenLen--;
+							if (j === min) min++;
+							break;
+						}
+					}
+				}
+
+			child = idiff(child, vchild, context, mountAll);
+
+			f = originalChildren[i];
+			if (child && child !== dom && child !== f) {
+				if (f == null) {
+					dom.appendChild(child);
+				} else if (child === f.nextSibling) {
+					removeNode(f);
+				} else {
+					dom.insertBefore(child, f);
+				}
+			}
+		}
+	}
+
+	if (keyedLen) {
+		for (var i in keyed) {
+			if (keyed[i] !== undefined) recollectNodeTree(keyed[i], false);
+		}
+	}
+
+	while (min <= childrenLen) {
+		if ((child = children[childrenLen--]) !== undefined) recollectNodeTree(child, false);
+	}
+}
+
+function recollectNodeTree(node, unmountOnly) {
+	var component = node._component;
+	if (component) {
+		unmountComponent(component);
+	} else {
+		if (node['__preactattr_'] != null) applyRef(node['__preactattr_'].ref, null);
+
+		if (unmountOnly === false || node['__preactattr_'] == null) {
+			removeNode(node);
+		}
+
+		removeChildren(node);
+	}
+}
+
+function removeChildren(node) {
+	node = node.lastChild;
+	while (node) {
+		var next = node.previousSibling;
+		recollectNodeTree(node, true);
+		node = next;
+	}
+}
+
+function diffAttributes(dom, attrs, old) {
+	var name;
+
+	for (name in old) {
+		if (!(attrs && attrs[name] != null) && old[name] != null) {
+			setAccessor(dom, name, old[name], old[name] = undefined, isSvgMode);
+		}
+	}
+
+	for (name in attrs) {
+		if (name !== 'children' && name !== 'innerHTML' && (!(name in old) || attrs[name] !== (name === 'value' || name === 'checked' ? dom[name] : old[name]))) {
+			setAccessor(dom, name, old[name], old[name] = attrs[name], isSvgMode);
+		}
+	}
+}
+
+var recyclerComponents = [];
+
+function createComponent(Ctor, props, context) {
+	var inst,
+	    i = recyclerComponents.length;
+
+	if (Ctor.prototype && Ctor.prototype.render) {
+		inst = new Ctor(props, context);
+		Component.call(inst, props, context);
+	} else {
+		inst = new Component(props, context);
+		inst.constructor = Ctor;
+		inst.render = doRender;
+	}
+
+	while (i--) {
+		if (recyclerComponents[i].constructor === Ctor) {
+			inst.nextBase = recyclerComponents[i].nextBase;
+			recyclerComponents.splice(i, 1);
+			return inst;
+		}
+	}
+
+	return inst;
+}
+
+function doRender(props, state, context) {
+	return this.constructor(props, context);
+}
+
+function setComponentProps(component, props, renderMode, context, mountAll) {
+	if (component._disable) return;
+	component._disable = true;
+
+	component.__ref = props.ref;
+	component.__key = props.key;
+	delete props.ref;
+	delete props.key;
+
+	if (typeof component.constructor.getDerivedStateFromProps === 'undefined') {
+		if (!component.base || mountAll) {
+			if (component.componentWillMount) component.componentWillMount();
+		} else if (component.componentWillReceiveProps) {
+			component.componentWillReceiveProps(props, context);
+		}
+	}
+
+	if (context && context !== component.context) {
+		if (!component.prevContext) component.prevContext = component.context;
+		component.context = context;
+	}
+
+	if (!component.prevProps) component.prevProps = component.props;
+	component.props = props;
+
+	component._disable = false;
+
+	if (renderMode !== 0) {
+		if (renderMode === 1 || options.syncComponentUpdates !== false || !component.base) {
+			renderComponent(component, 1, mountAll);
+		} else {
+			enqueueRender(component);
+		}
+	}
+
+	applyRef(component.__ref, component);
+}
+
+function renderComponent(component, renderMode, mountAll, isChild) {
+	if (component._disable) return;
+
+	var props = component.props,
+	    state = component.state,
+	    context = component.context,
+	    previousProps = component.prevProps || props,
+	    previousState = component.prevState || state,
+	    previousContext = component.prevContext || context,
+	    isUpdate = component.base,
+	    nextBase = component.nextBase,
+	    initialBase = isUpdate || nextBase,
+	    initialChildComponent = component._component,
+	    skip = false,
+	    snapshot = previousContext,
+	    rendered,
+	    inst,
+	    cbase;
+
+	if (component.constructor.getDerivedStateFromProps) {
+		state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
+		component.state = state;
+	}
+
+	if (isUpdate) {
+		component.props = previousProps;
+		component.state = previousState;
+		component.context = previousContext;
+		if (renderMode !== 2 && component.shouldComponentUpdate && component.shouldComponentUpdate(props, state, context) === false) {
+			skip = true;
+		} else if (component.componentWillUpdate) {
+			component.componentWillUpdate(props, state, context);
+		}
+		component.props = props;
+		component.state = state;
+		component.context = context;
+	}
+
+	component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
+	component._dirty = false;
+
+	if (!skip) {
+		rendered = component.render(props, state, context);
+
+		if (component.getChildContext) {
+			context = extend(extend({}, context), component.getChildContext());
+		}
+
+		if (isUpdate && component.getSnapshotBeforeUpdate) {
+			snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
+		}
+
+		var childComponent = rendered && rendered.nodeName,
+		    toUnmount,
+		    base;
+
+		if (typeof childComponent === 'function') {
+
+			var childProps = getNodeProps(rendered);
+			inst = initialChildComponent;
+
+			if (inst && inst.constructor === childComponent && childProps.key == inst.__key) {
+				setComponentProps(inst, childProps, 1, context, false);
+			} else {
+				toUnmount = inst;
+
+				component._component = inst = createComponent(childComponent, childProps, context);
+				inst.nextBase = inst.nextBase || nextBase;
+				inst._parentComponent = component;
+				setComponentProps(inst, childProps, 0, context, false);
+				renderComponent(inst, 1, mountAll, true);
+			}
+
+			base = inst.base;
+		} else {
+			cbase = initialBase;
+
+			toUnmount = initialChildComponent;
+			if (toUnmount) {
+				cbase = component._component = null;
+			}
+
+			if (initialBase || renderMode === 1) {
+				if (cbase) cbase._component = null;
+				base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, true);
+			}
+		}
+
+		if (initialBase && base !== initialBase && inst !== initialChildComponent) {
+			var baseParent = initialBase.parentNode;
+			if (baseParent && base !== baseParent) {
+				baseParent.replaceChild(base, initialBase);
+
+				if (!toUnmount) {
+					initialBase._component = null;
+					recollectNodeTree(initialBase, false);
+				}
+			}
+		}
+
+		if (toUnmount) {
+			unmountComponent(toUnmount);
+		}
+
+		component.base = base;
+		if (base && !isChild) {
+			var componentRef = component,
+			    t = component;
+			while (t = t._parentComponent) {
+				(componentRef = t).base = base;
+			}
+			base._component = componentRef;
+			base._componentConstructor = componentRef.constructor;
+		}
+	}
+
+	if (!isUpdate || mountAll) {
+		mounts.push(component);
+	} else if (!skip) {
+
+		if (component.componentDidUpdate) {
+			component.componentDidUpdate(previousProps, previousState, snapshot);
+		}
+	}
+
+	while (component._renderCallbacks.length) {
+		component._renderCallbacks.pop().call(component);
+	}if (!diffLevel && !isChild) flushMounts();
+}
+
+function buildComponentFromVNode(dom, vnode, context, mountAll) {
+	var c = dom && dom._component,
+	    originalComponent = c,
+	    oldDom = dom,
+	    isDirectOwner = c && dom._componentConstructor === vnode.nodeName,
+	    isOwner = isDirectOwner,
+	    props = getNodeProps(vnode);
+	while (c && !isOwner && (c = c._parentComponent)) {
+		isOwner = c.constructor === vnode.nodeName;
+	}
+
+	if (c && isOwner && (!mountAll || c._component)) {
+		setComponentProps(c, props, 3, context, mountAll);
+		dom = c.base;
+	} else {
+		if (originalComponent && !isDirectOwner) {
+			unmountComponent(originalComponent);
+			dom = oldDom = null;
+		}
+
+		c = createComponent(vnode.nodeName, props, context);
+		if (dom && !c.nextBase) {
+			c.nextBase = dom;
+
+			oldDom = null;
+		}
+		setComponentProps(c, props, 1, context, mountAll);
+		dom = c.base;
+
+		if (oldDom && dom !== oldDom) {
+			oldDom._component = null;
+			recollectNodeTree(oldDom, false);
+		}
+	}
+
+	return dom;
+}
+
+function unmountComponent(component) {
+
+	var base = component.base;
+
+	component._disable = true;
+
+	if (component.componentWillUnmount) component.componentWillUnmount();
+
+	component.base = null;
+
+	var inner = component._component;
+	if (inner) {
+		unmountComponent(inner);
+	} else if (base) {
+		if (base['__preactattr_'] != null) applyRef(base['__preactattr_'].ref, null);
+
+		component.nextBase = base;
+
+		removeNode(base);
+		recyclerComponents.push(component);
+
+		removeChildren(base);
+	}
+
+	applyRef(component.__ref, null);
+}
+
+function Component(props, context) {
+	this._dirty = true;
+
+	this.context = context;
+
+	this.props = props;
+
+	this.state = this.state || {};
+
+	this._renderCallbacks = [];
+}
+
+extend(Component.prototype, {
+	setState: function setState(state, callback) {
+		if (!this.prevState) this.prevState = this.state;
+		this.state = extend(extend({}, this.state), typeof state === 'function' ? state(this.state, this.props) : state);
+		if (callback) this._renderCallbacks.push(callback);
+		enqueueRender(this);
+	},
+	forceUpdate: function forceUpdate(callback) {
+		if (callback) this._renderCallbacks.push(callback);
+		renderComponent(this, 2);
+	},
+	render: function render() {}
+});
+
+function render(vnode, parent, merge) {
+  return diff(merge, vnode, {}, false, parent, false);
+}
+
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+var ELEMENTS = 'a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr circle clipPath defs ellipse g image line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan'.split(
+	' '
+);
+
+var REACT_ELEMENT_TYPE = (typeof Symbol !== 'undefined' && Symbol.for && Symbol.for('react.element')) || 0xeac7;
+
+var COMPONENT_WRAPPER_KEY =
+	typeof Symbol !== 'undefined' && Symbol.for ? Symbol.for('__preactCompatWrapper') : '__preactCompatWrapper';
+
+// don't autobind these methods since they already have guaranteed context.
+var AUTOBIND_BLACKLIST = {
+	constructor: 1,
+	render: 1,
+	shouldComponentUpdate: 1,
+	componentWillReceiveProps: 1,
+	componentWillUpdate: 1,
+	componentDidUpdate: 1,
+	componentWillMount: 1,
+	componentDidMount: 1,
+	componentWillUnmount: 1,
+	componentDidUnmount: 1
+};
+
+var CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/;
+
+var BYPASS_HOOK = {};
+
+/*global process*/
+var DEV = false;
+try {
+	DEV = process.env.NODE_ENV !== 'production';
+}
+catch (e) { }
+
+// make react think we're react.
+var VNode$1 = h('a', null).constructor;
+VNode$1.prototype.$$typeof = REACT_ELEMENT_TYPE;
+VNode$1.prototype.preactCompatUpgraded = false;
+VNode$1.prototype.preactCompatNormalized = false;
+
+Object.defineProperty(VNode$1.prototype, 'type', {
+	get: function() {
+		return this.nodeName;
+	},
+	set: function(v) {
+		this.nodeName = v;
+	},
+	configurable: true
+});
+
+Object.defineProperty(VNode$1.prototype, 'props', {
+	get: function() {
+		return this.attributes;
+	},
+	set: function(v) {
+		this.attributes = v;
+	},
+	configurable: true
+});
+
+var oldEventHook = options.event;
+options.event = function (e) {
+	if (oldEventHook) { e = oldEventHook(e); }
+	e.persist = Object;
+	e.nativeEvent = e;
+	return e;
+};
+
+var oldVnodeHook = options.vnode;
+options.vnode = function (vnode) {
+	if (!vnode.preactCompatUpgraded) {
+		vnode.preactCompatUpgraded = true;
+
+		var tag = vnode.nodeName,
+			attrs = (vnode.attributes = vnode.attributes == null ? {} : extend$1({}, vnode.attributes));
+
+		if (typeof tag === 'function') {
+			if (tag[COMPONENT_WRAPPER_KEY] === true || (tag.prototype && 'isReactComponent' in tag.prototype)) {
+				if (vnode.children && String(vnode.children) === '') { vnode.children = undefined; }
+				if (vnode.children) { attrs.children = vnode.children; }
+
+				if (!vnode.preactCompatNormalized) {
+					normalizeVNode(vnode);
+				}
+				handleComponentVNode(vnode);
+			}
+		}
+		else {
+			if (vnode.children && String(vnode.children) === '') { vnode.children = undefined; }
+			if (vnode.children) { attrs.children = vnode.children; }
+
+			if (attrs.defaultValue) {
+				if (!attrs.value && attrs.value !== 0) {
+					attrs.value = attrs.defaultValue;
+				}
+				delete attrs.defaultValue;
+			}
+
+			handleElementVNode(vnode, attrs);
+		}
+	}
+
+	if (oldVnodeHook) { oldVnodeHook(vnode); }
+};
+
+function handleComponentVNode(vnode) {
+	var tag = vnode.nodeName,
+		a = vnode.attributes;
+
+	vnode.attributes = {};
+	if (tag.defaultProps) { extend$1(vnode.attributes, tag.defaultProps); }
+	if (a) { extend$1(vnode.attributes, a); }
+}
+
+function handleElementVNode(vnode, a) {
+	var shouldSanitize, attrs, i;
+	if (a) {
+		for (i in a) { if ((shouldSanitize = CAMEL_PROPS.test(i))) { break; } }
+		if (shouldSanitize) {
+			attrs = vnode.attributes = {};
+			for (i in a) {
+				if (a.hasOwnProperty(i)) {
+					attrs[CAMEL_PROPS.test(i) ? i.replace(/([A-Z0-9])/, '-$1').toLowerCase() : i] = a[i];
+				}
+			}
+		}
+	}
+}
+
+var ContextProvider = function () {};
+
+ContextProvider.prototype.getChildContext = function () {
+	return this.props.context;
+};
+ContextProvider.prototype.render = function (props) {
+	return props.children[0];
+};
+
+var ARR = [];
+
+/** Track current render() component for ref assignment */
+var currentComponent;
+
+function createFactory(type) {
+	return createElement.bind(null, type);
+}
+
+var DOM = {};
+for (var i = ELEMENTS.length; i--;) {
+	DOM[ELEMENTS[i]] = createFactory(ELEMENTS[i]);
+}
+
+function upgradeToVNodes(arr, offset) {
+	for (var i = offset || 0; i < arr.length; i++) {
+		var obj = arr[i];
+		if (Array.isArray(obj)) {
+			upgradeToVNodes(obj);
+		}
+		else if (
+			obj &&
+			typeof obj === 'object' &&
+			!isValidElement(obj) &&
+			((obj.props && obj.type) || (obj.attributes && obj.nodeName) || obj.children)
+		) {
+			arr[i] = createElement(obj.type || obj.nodeName, obj.props || obj.attributes, obj.children);
+		}
+	}
+}
+
+function isStatelessComponent(c) {
+	return typeof c === 'function' && !(c.prototype && c.prototype.render);
+}
+
+// wraps stateless functional components in a PropTypes validator
+function wrapStatelessComponent(WrappedComponent) {
+	return createClass({
+		displayName: WrappedComponent.displayName || WrappedComponent.name,
+		render: function() {
+			return WrappedComponent(this.props, this.context);
+		}
+	});
+}
+
+function statelessComponentHook(Ctor) {
+	var Wrapped = Ctor[COMPONENT_WRAPPER_KEY];
+	if (Wrapped) { return Wrapped === true ? Ctor : Wrapped; }
+
+	Wrapped = wrapStatelessComponent(Ctor);
+
+	Object.defineProperty(Wrapped, COMPONENT_WRAPPER_KEY, { configurable: true, value: true });
+	Wrapped.displayName = Ctor.displayName;
+	Wrapped.propTypes = Ctor.propTypes;
+	Wrapped.defaultProps = Ctor.defaultProps;
+
+	Object.defineProperty(Ctor, COMPONENT_WRAPPER_KEY, { configurable: true, value: Wrapped });
+
+	return Wrapped;
+}
+
+function createElement() {
+	var args = [], len = arguments.length;
+	while ( len-- ) args[ len ] = arguments[ len ];
+
+	upgradeToVNodes(args, 2);
+	return normalizeVNode(h.apply(void 0, args));
+}
+
+function normalizeVNode(vnode) {
+	vnode.preactCompatNormalized = true;
+
+	applyClassName(vnode);
+
+	if (isStatelessComponent(vnode.nodeName)) {
+		vnode.nodeName = statelessComponentHook(vnode.nodeName);
+	}
+
+	var ref = vnode.attributes.ref,
+		type = ref && typeof ref;
+	if (currentComponent && (type === 'string' || type === 'number')) {
+		vnode.attributes.ref = createStringRefProxy(ref, currentComponent);
+	}
+
+	applyEventNormalization(vnode);
+
+	return vnode;
+}
+
+function isValidElement(element) {
+	return element && (element instanceof VNode$1 || element.$$typeof === REACT_ELEMENT_TYPE);
+}
+
+function createStringRefProxy(name, component) {
+	return (
+		component._refProxies[name] ||
+		(component._refProxies[name] = function (resolved) {
+			if (component && component.refs) {
+				component.refs[name] = resolved;
+				if (resolved === null) {
+					delete component._refProxies[name];
+					component = null;
+				}
+			}
+		})
+	);
+}
+
+function applyEventNormalization(ref) {
+	var nodeName = ref.nodeName;
+	var attributes = ref.attributes;
+
+	if (!attributes || typeof nodeName !== 'string') { return; }
+	var props = {};
+	for (var i in attributes) {
+		props[i.toLowerCase()] = i;
+	}
+	if (props.ondoubleclick) {
+		attributes.ondblclick = attributes[props.ondoubleclick];
+		delete attributes[props.ondoubleclick];
+	}
+	// for *textual inputs* (incl textarea), normalize `onChange` -> `onInput`:
+	if (
+		props.onchange &&
+		(nodeName === 'textarea' || (nodeName.toLowerCase() === 'input' && !/^fil|che|rad/i.test(attributes.type)))
+	) {
+		var normalized = props.oninput || 'oninput';
+		if (!attributes[normalized]) {
+			attributes[normalized] = multihook([attributes[normalized], attributes[props.onchange]]);
+			delete attributes[props.onchange];
+		}
+	}
+}
+
+function applyClassName(vnode) {
+	var a = vnode.attributes || (vnode.attributes = {});
+	classNameDescriptor.enumerable = 'className' in a;
+	if (a.className) { a.class = a.className; }
+	Object.defineProperty(a, 'className', classNameDescriptor);
+}
+
+var classNameDescriptor = {
+	configurable: true,
+	get: function() {
+		return this.class;
+	},
+	set: function(v) {
+		this.class = v;
+	}
+};
+
+function extend$1(base, props) {
+	var arguments$1 = arguments;
+
+	for (var i = 1, obj = (void 0); i < arguments.length; i++) {
+		if ((obj = arguments$1[i])) {
+			for (var key in obj) {
+				if (obj.hasOwnProperty(key)) {
+					base[key] = obj[key];
+				}
+			}
+		}
+	}
+	return base;
+}
+
+function shallowDiffers(a, b) {
+	for (var i in a) { if (!(i in b)) { return true; } }
+	for (var i$1 in b) { if (a[i$1] !== b[i$1]) { return true; } }
+	return false;
+}
+
+function findDOMNode(component) {
+	return (component && (component.base || (component.nodeType === 1 && component))) || null;
+}
+
+function F() { }
+
+function createClass(obj) {
+	function cl(props, context) {
+		bindAll(this);
+		Component$1.call(this, props, context, BYPASS_HOOK);
+		newComponentHook.call(this, props, context);
+	}
+
+	obj = extend$1({ constructor: cl }, obj);
+
+	// We need to apply mixins here so that getDefaultProps is correctly mixed
+	if (obj.mixins) {
+		applyMixins(obj, collateMixins(obj.mixins));
+	}
+	if (obj.statics) {
+		extend$1(cl, obj.statics);
+	}
+	if (obj.propTypes) {
+		cl.propTypes = obj.propTypes;
+	}
+	if (obj.defaultProps) {
+		cl.defaultProps = obj.defaultProps;
+	}
+	if (obj.getDefaultProps) {
+		cl.defaultProps = obj.getDefaultProps.call(cl);
+	}
+
+	F.prototype = Component$1.prototype;
+	cl.prototype = extend$1(new F(), obj);
+
+	cl.displayName = obj.displayName || 'Component';
+
+	return cl;
+}
+
+// Flatten an Array of mixins to a map of method name to mixin implementations
+function collateMixins(mixins) {
+	var keyed = {};
+	for (var i = 0; i < mixins.length; i++) {
+		var mixin = mixins[i];
+		for (var key in mixin) {
+			if (mixin.hasOwnProperty(key) && typeof mixin[key] === 'function') {
+				(keyed[key] || (keyed[key] = [])).push(mixin[key]);
+			}
+		}
+	}
+	return keyed;
+}
+
+// apply a mapping of Arrays of mixin methods to a component prototype
+function applyMixins(proto, mixins) {
+	for (var key in mixins)
+		{ if (mixins.hasOwnProperty(key)) {
+			proto[key] = multihook(
+				mixins[key].concat(proto[key] || ARR),
+				key === 'getDefaultProps' || key === 'getInitialState' || key === 'getChildContext'
+			);
+		} }
+}
+
+function bindAll(ctx) {
+	for (var i in ctx) {
+		var v = ctx[i];
+		if (typeof v === 'function' && !v.__bound && !AUTOBIND_BLACKLIST.hasOwnProperty(i)) {
+			(ctx[i] = v.bind(ctx)).__bound = true;
+		}
+	}
+}
+
+function callMethod(ctx, m, args) {
+	if (typeof m === 'string') {
+		m = ctx.constructor.prototype[m];
+	}
+	if (typeof m === 'function') {
+		return m.apply(ctx, args);
+	}
+}
+
+function multihook(hooks, skipDuplicates) {
+	return function () {
+		var arguments$1 = arguments;
+		var this$1 = this;
+
+		var ret;
+		for (var i = 0; i < hooks.length; i++) {
+			var r = callMethod(this$1, hooks[i], arguments$1);
+
+			if (skipDuplicates && r != null) {
+				if (!ret) { ret = {}; }
+				for (var key in r)
+					{ if (r.hasOwnProperty(key)) {
+						ret[key] = r[key];
+					} }
+			}
+			else if (typeof r !== 'undefined') { ret = r; }
+		}
+		return ret;
+	};
+}
+
+function newComponentHook(props, context) {
+	propsHook.call(this, props, context);
+	this.componentWillReceiveProps = multihook([
+		propsHook,
+		this.componentWillReceiveProps || 'componentWillReceiveProps'
+	]);
+	this.render = multihook([propsHook, beforeRender, this.render || 'render', afterRender]);
+}
+
+function propsHook(props, context) {
+	if (!props) { return; }
+
+	// React annoyingly special-cases single children, and some react components are ridiculously strict about this.
+	var c = props.children;
+	if (
+		c &&
+		Array.isArray(c) &&
+		c.length === 1 &&
+		(typeof c[0] === 'string' || typeof c[0] === 'function' || c[0] instanceof VNode$1)
+	) {
+		props.children = c[0];
+
+		// but its totally still going to be an Array.
+		if (props.children && typeof props.children === 'object') {
+			props.children.length = 1;
+			props.children[0] = props.children;
+		}
+	}
+
+	// add proptype checking
+	if (DEV) {
+		var ctor = typeof this === 'function' ? this : this.constructor,
+			propTypes = this.propTypes || ctor.propTypes;
+		var displayName = this.displayName || ctor.name;
+	}
+}
+
+function beforeRender(props) {
+	currentComponent = this;
+}
+
+function afterRender() {
+	if (currentComponent === this) {
+		currentComponent = null;
+	}
+}
+
+function Component$1(props, context, opts) {
+	Component.call(this, props, context);
+	this.state = this.getInitialState ? this.getInitialState() : {};
+	this.refs = {};
+	this._refProxies = {};
+	if (opts !== BYPASS_HOOK) {
+		newComponentHook.call(this, props, context);
+	}
+}
+extend$1((Component$1.prototype = new Component()), {
+	constructor: Component$1,
+
+	isReactComponent: {},
+
+	replaceState: function(state, callback) {
+		var this$1 = this;
+
+		this.setState(state, callback);
+		for (var i in this$1.state) {
+			if (!(i in state)) {
+				delete this$1.state[i];
+			}
+		}
+	},
+
+	getDOMNode: function() {
+		return this.base;
+	},
+
+	isMounted: function() {
+		return !!this.base;
+	}
+});
+
+function PureComponent(props, context) {
+	Component$1.call(this, props, context);
+}
+F.prototype = Component$1.prototype;
+PureComponent.prototype = new F();
+PureComponent.prototype.isPureReactComponent = true;
+PureComponent.prototype.shouldComponentUpdate = function (props, state) {
+	return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
+};
+
+/*
+Copyright (c) 2019 Daybrush
+name: preact-css-styler
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/css-styler/tree/master/preact-css-styler
+version: 0.4.1
+*/
+
+/*
+Copyright (c) 2018 Daybrush
+@name: @daybrush/utils
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/utils
+@version 0.10.0
+*/
+/**
+* divide text by comma.
+* @memberof Utils
+* @param {string} text - text to divide
+* @return {Array} divided texts
+* @example
+import {splitComma} from "@daybrush/utils";
+
+console.log(splitComma("a,b,c,d,e,f,g"));
+// ["a", "b", "c", "d", "e", "f", "g"]
+console.log(splitComma("'a,b',c,'d,e',f,g"));
+// ["'a,b'", "c", "'d,e'", "f", "g"]
+*/
+
+function splitComma(text) {
+  // divide comma(,)
+  // "[^"]*"|'[^']*'
+  var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
+  return matches ? matches.map(function (str) {
+    return str.trim();
+  }) : [];
+}
+
+/*
+Copyright (c) 2019 Daybrush
+name: react-css-styler
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/css-styler/tree/master/react-css-styler
+version: 0.4.0
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/* global Reflect, Promise */
+var extendStatics$1 = function (d, b) {
+  extendStatics$1 = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+  };
+
+  return extendStatics$1(d, b);
+};
+
+function __extends$2(d, b) {
+  extendStatics$1(d, b);
+
+  function __() {
+    this.constructor = d;
+  }
+
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var __assign$1 = function () {
+  __assign$1 = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign$1.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+
+function hash(str) {
+  var hash = 5381,
+      i    = str.length;
+
+  while(i) {
+    hash = (hash * 33) ^ str.charCodeAt(--i);
+  }
+
+  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+   * integers. Since we want the results to be always positive, convert the
+   * signed int to an unsigned by doing an unsigned bitshift. */
+  return hash >>> 0;
+}
+
+var stringHash = hash;
+
+function getHash(str) {
+  return stringHash(str).toString(36);
+}
+function injectStyle(className, css) {
+  var style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.innerHTML = css.replace(/([^}{]*){/mg, function (all, selector) {
+    return splitComma(selector).map(function (subSelector) {
+      if (subSelector.indexOf(":global") > -1) {
+        return subSelector.replace(/\:global/g, "");
+      } else if (subSelector.indexOf(":host") > -1) {
+        return "" + subSelector.replace(/\:host/g, "." + className);
+      }
+
+      return "." + className + " " + subSelector;
+    }).join(", ") + "{";
+  });
+  (document.head || document.body).appendChild(style);
+  return style;
+}
+
+function styled(Tag, css) {
+  var injectClassName = "rCS" + getHash(css);
+  var injectCount = 0;
+  var injectElement;
+  return (
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(Styler, _super);
+
+      function Styler(props) {
+        return _super.call(this, props) || this;
+      }
+
+      Styler.prototype.render = function () {
+        var _a = this.props,
+            className = _a.className,
+            attributes = __rest(_a, ["className"]);
+
+        return createElement(Tag, __assign$1({
+          className: className + " " + injectClassName
+        }, attributes));
+      };
+
+      Styler.prototype.componentDidMount = function () {
+        if (injectCount === 0) {
+          injectElement = injectStyle(injectClassName, css);
+        }
+
+        ++injectCount;
+      };
+
+      Styler.prototype.componentWillUnmount = function () {
+        --injectCount;
+
+        if (injectCount === 0 && injectElement) {
+          injectElement.parentNode.removeChild(injectElement);
+        }
+      };
+
+      Styler.prototype.getElement = function () {
+        return this.element || (this.element = findDOMNode(this));
+      };
+
+      return Styler;
+    }(Component$1)
+  );
+}
+
+/*
+Copyright (c) 2019 Daybrush
+name: preact-moveable
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable
+version: 0.9.6
+*/
+
+/*
+Copyright (c) 2019 Daybrush
+name: react-moveable
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
+version: 0.10.6
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/* global Reflect, Promise */
+var extendStatics$2 = function (d, b) {
+  extendStatics$2 = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+  };
+
+  return extendStatics$2(d, b);
+};
+
+function __extends$3(d, b) {
+  extendStatics$2(d, b);
+
+  function __() {
+    this.constructor = d;
+  }
+
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var __assign$2 = function () {
+  __assign$2 = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign$2.apply(this, arguments);
+};
+
+function add(matrix, inverseMatrix, startIndex, endIndex, fromStart, k) {
+  for (var i = startIndex; i < endIndex; ++i) {
+    matrix[i] += matrix[fromStart + i - startIndex] * k;
+    inverseMatrix[i] += inverseMatrix[fromStart + i - startIndex] * k;
+  }
+}
+
+function swap(matrix, inverseMatrix, startIndex, endIndex, fromStart) {
+  for (var i = startIndex; i < endIndex; ++i) {
+    var v = matrix[i];
+    var iv = inverseMatrix[i];
+    matrix[i] = matrix[fromStart + i - startIndex];
+    matrix[fromStart + i - startIndex] = v;
+    inverseMatrix[i] = inverseMatrix[fromStart + i - startIndex];
+    inverseMatrix[fromStart + i - startIndex] = iv;
+  }
+}
+
+function divide(matrix, inverseMatrix, startIndex, endIndex, k) {
+  for (var i = startIndex; i < endIndex; ++i) {
+    matrix[i] /= k;
+    inverseMatrix[i] /= k;
+  }
+}
+
+function createIdentityMatrix(n) {
+  var length = n * n;
+  var matrix = [];
+
+  for (var i = 0; i < length; ++i) {
+    matrix[i] = i % (n + 1) ? 0 : 1;
+  }
+
+  return matrix;
+}
+function createScaleMatrix(scale, n) {
+  var m = createIdentityMatrix(n);
+  var length = Math.min(scale.length, n - 1);
+
+  for (var i = 0; i < length; ++i) {
+    m[(n + 1) * i] = scale[i];
+  }
+
+  return m;
+}
+function createOriginMatrix(origin, n) {
+  var m = createIdentityMatrix(n);
+  var length = Math.min(origin.length, n - 1);
+
+  for (var i = 0; i < length; ++i) {
+    m[n * (i + 1) - 1] = origin[i];
+  }
+
+  return m;
+}
+function ignoreDimension(matrix, m, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = matrix.slice();
+
+  for (var i = 0; i < n; ++i) {
+    newMatrix[i * n + m - 1] = 0;
+    newMatrix[(m - 1) * n + i] = 0;
+  }
+
+  newMatrix[(m - 1) * (n + 1)] = 1;
+  return newMatrix;
+}
+function invert(matrix, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = matrix.slice();
+  var inverseMatrix = createIdentityMatrix(n);
+
+  for (var i = 0; i < n; ++i) {
+    var startIndex = n * i;
+    var endIndex = n * (i + 1);
+    var identityIndex = startIndex + i;
+
+    if (newMatrix[identityIndex] === 0) {
+      for (var j = i + 1; j < n; ++j) {
+        if (newMatrix[n * j + i]) {
+          swap(newMatrix, inverseMatrix, startIndex, endIndex, n * j);
+          break;
+        }
+      }
+    }
+
+    if (newMatrix[identityIndex]) {
+      divide(newMatrix, inverseMatrix, startIndex, endIndex, newMatrix[identityIndex]);
+    } else {
+      // no inverse matrix
+      return [];
+    }
+
+    for (var j = 0; j < n; ++j) {
+      var targetStartIndex = n * j;
+      var targetEndIndex = targetStartIndex + n;
+      var targetIndex = targetStartIndex + i;
+      var target = newMatrix[targetIndex];
+
+      if (target === 0 || i === j) {
+        continue;
+      }
+
+      add(newMatrix, inverseMatrix, targetStartIndex, targetEndIndex, startIndex, -target);
+    }
+  }
+
+  return inverseMatrix;
+}
+function transpose(matrix, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = [];
+
+  for (var i = 0; i < n; ++i) {
+    for (var j = 0; j < n; ++j) {
+      newMatrix[j * n + i] = matrix[n * i + j];
+    }
+  }
+
+  return newMatrix;
+}
+function convertPositionMatrix(matrix, n) {
+  var newMatrix = matrix.slice();
+
+  for (var i = matrix.length; i < n - 1; ++i) {
+    newMatrix[i] = 0;
+  }
+
+  newMatrix[n - 1] = 1;
+  return newMatrix;
+}
+function convertDimension(matrix, n, m) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  } // n < m
+
+
+  if (n === m) {
+    return matrix;
+  }
+
+  var newMatrix = createIdentityMatrix(m);
+  var length = Math.min(n, m);
+
+  for (var i = 0; i < length - 1; ++i) {
+    for (var j = 0; j < length - 1; ++j) {
+      newMatrix[i * m + j] = matrix[i * n + j];
+    }
+
+    newMatrix[(i + 1) * m - 1] = matrix[(i + 1) * n - 1];
+    newMatrix[(m - 1) * m + i] = matrix[(n - 1) * n + i];
+  }
+
+  newMatrix[m * m - 1] = matrix[n * n - 1];
+  return newMatrix;
+}
+window.b = convertDimension;
+function multiplies(n) {
+  var matrixes = [];
+
+  for (var _i = 1; _i < arguments.length; _i++) {
+    matrixes[_i - 1] = arguments[_i];
+  }
+
+  var m = createIdentityMatrix(n);
+  matrixes.forEach(function (matrix) {
+    m = multiply(m, matrix, n);
+  });
+  return m;
+}
+function multiply(matrix, matrix2, n) {
+  var newMatrix = []; // n * m X m * k
+
+  var m = matrix.length / n;
+  var k = matrix2.length / m;
+
+  if (!m) {
+    return matrix2;
+  } else if (!k) {
+    return matrix;
+  }
+
+  for (var i = 0; i < n; ++i) {
+    for (var j = 0; j < k; ++j) {
+      newMatrix[i * k + j] = 0;
+
+      for (var l = 0; l < m; ++l) {
+        newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j];
+      }
+    }
+  } // n * k
+
+
+  return newMatrix;
+}
+function multiplyCSS(matrix, matrix2, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = []; // n(y) * m(x) X m(y) * k(x)
+
+  var m = matrix.length / n;
+  var k = matrix2.length / m;
+
+  for (var i = 0; i < n; ++i) {
+    for (var j = 0; j < k; ++j) {
+      newMatrix[i + j * k] = 0;
+
+      for (var l = 0; l < m; ++l) {
+        newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k];
+      }
+    }
+  } // n * k
+
+
+  return newMatrix;
+}
+function sum(pos1, pos2) {
+  var length = Math.min(pos1.length, pos2.length);
+  var nextPos = pos1.slice();
+
+  for (var i = 0; i < length; ++i) {
+    nextPos[i] = nextPos[i] + pos2[i];
+  }
+
+  return nextPos;
+}
+function minus(pos1, pos2) {
+  var length = Math.min(pos1.length, pos2.length);
+  var nextPos = pos1.slice();
+
+  for (var i = 0; i < length; ++i) {
+    nextPos[i] = nextPos[i] - pos2[i];
+  }
+
+  return nextPos;
+}
+function caculate(matrix, matrix2, n) {
+  if (n === void 0) {
+    n = matrix2.length;
+  }
+
+  var result = multiply(matrix, matrix2, n);
+  var k = result[n - 1];
+  return result.map(function (v) {
+    return v / k;
+  });
+}
+function getOrigin(matrix, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var originMatrix = [];
+
+  for (var i = 0; i < n - 1; ++i) {
+    originMatrix[i] = matrix[(i + 1) * n - 1];
+  }
+
+  originMatrix[n - 1] = 0;
+  return originMatrix;
+}
+function convertCSStoMatrix(a) {
+  if (a.length === 6) {
+    return [a[0], a[2], a[4], a[1], a[3], a[5], 0, 0, 1];
+  }
+
+  return transpose(a);
+}
+function convertMatrixtoCSS(a) {
+  if (a.length === 9) {
+    return [a[0], a[3], a[1], a[4], a[2], a[5]];
+  }
+
+  return transpose(a);
+}
+function getRotateMatrix(rad) {
+  var cos = Math.cos(rad);
+  var sin = Math.sin(rad);
+  return [cos, -sin, 0, sin, cos, 0, 0, 0, 1];
+}
+function rotate(pos, deg) {
+  return caculate(getRotateMatrix(deg * Math.PI / 180), convertPositionMatrix(pos, 3));
+}
+
+function prefix() {
+  var classNames = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    classNames[_i] = arguments[_i];
+  }
+
+  return frameworkUtils.prefixNames.apply(void 0, [PREFIX].concat(classNames));
+}
+function createIdentityMatrix3() {
+  return createIdentityMatrix(3);
+}
+function getTransformMatrix(transform) {
+  if (!transform || transform === "none") {
+    return [1, 0, 0, 1, 0, 0];
+  }
+
+  if (utils.isObject(transform)) {
+    return transform;
+  }
+
+  var value = utils.splitBracket(transform).value;
+  return value.split(/s*,\s*/g).map(function (v) {
+    return parseFloat(v);
+  });
+}
+function getAbsoluteMatrix(matrix, n, origin) {
+  return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) {
+    return -a;
+  }), n));
+}
+function measureSVGSize(el, unit, isHorizontal) {
+  if (unit === "%") {
+    var viewBox = el.ownerSVGElement.viewBox.baseVal;
+    return viewBox[isHorizontal ? "width" : "height"] / 100;
+  }
+
+  return 1;
+}
+function getBeforeTransformOrigin(el) {
+  var relativeOrigin = getTransformOrigin(window.getComputedStyle(el, ":before"));
+  return relativeOrigin.map(function (o, i) {
+    var _a = utils.splitUnit(o),
+        value = _a.value,
+        unit = _a.unit;
+
+    return value * measureSVGSize(el, unit, i === 0);
+  });
+}
+function getTransformOrigin(style) {
+  var transformOrigin = style.transformOrigin;
+  return transformOrigin ? transformOrigin.split(" ") : ["0", "0"];
+}
+function caculateMatrixStack(target, container, prevMatrix, prevN) {
+  var _a;
+
+  var el = target;
+  var matrixes = [];
+  var isContainer = !!prevMatrix || target === container;
+  var isSVGGraphicElement = el.tagName.toLowerCase() !== "svg" || "ownerSVGElement" in el;
+  var is3d = false;
+  var n = 3;
+  var transformOrigin;
+  var targetMatrix;
+
+  while (el && (isContainer || el !== container)) {
+    var tagName = el.tagName.toLowerCase();
+    var style = window.getComputedStyle(el);
+    var matrix = convertCSStoMatrix(getTransformMatrix(style.transform));
+
+    if (!is3d && matrix.length === 16) {
+      is3d = true;
+      n = 4;
+      var matrixesLength = matrixes.length;
+
+      for (var i = 0; i < matrixesLength; ++i) {
+        matrixes[i] = convertDimension(matrixes[i], 3, 4);
+      }
+    }
+
+    if (is3d && matrix.length === 9) {
+      matrix = convertDimension(matrix, 3, 4);
+    }
+
+    var offsetLeft = el.offsetLeft;
+    var offsetTop = el.offsetTop; // svg
+
+    var hasNotOffset = utils.isUndefined(offsetLeft);
+    var origin = void 0; // inner svg element
+
+    if (hasNotOffset && tagName !== "svg") {
+      origin = isNotSupportTransformOrigin ? getBeforeTransformOrigin(el) : getTransformOrigin(style).map(function (pos) {
+        return parseFloat(pos);
+      });
+      hasNotOffset = false;
+
+      if (tagName === "g") {
+        offsetLeft = 0;
+        offsetTop = 0;
+      } else {
+        _a = getSVGGraphicsOffset(el, origin), offsetLeft = _a[0], offsetTop = _a[1], origin[0] = _a[2], origin[1] = _a[3];
+      }
+    } else {
+      origin = getTransformOrigin(style).map(function (pos) {
+        return parseFloat(pos);
+      });
+    }
+
+    if (tagName === "svg" && targetMatrix) {
+      matrixes.push(getSVGMatrix(el, n), createIdentityMatrix(n));
+    }
+
+    matrixes.push(getAbsoluteMatrix(matrix, n, origin), createOriginMatrix([hasNotOffset ? el : offsetLeft, hasNotOffset ? origin : offsetTop], n));
+
+    if (!targetMatrix) {
+      targetMatrix = matrix;
+    }
+
+    if (!transformOrigin) {
+      transformOrigin = origin;
+    }
+
+    if (isContainer) {
+      break;
+    }
+
+    el = el.parentElement;
+  }
+
+  var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n);
+  var beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n);
+  var offsetMatrix = createIdentityMatrix(n);
+  var length = matrixes.length;
+  matrixes.reverse();
+  matrixes.forEach(function (matrix, i) {
+    var _a;
+
+    if (length - 2 === i) {
+      beforeMatrix = mat.slice();
+    }
+
+    if (length - 1 === i) {
+      offsetMatrix = mat.slice();
+    }
+
+    if (utils.isObject(matrix[n - 1])) {
+      _a = getSVGOffset(matrix[n - 1], container, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1];
+    }
+
+    mat = multiply(mat, matrix, n);
+  });
+  var isMatrix3d = !isSVGGraphicElement && is3d;
+  var transform = (isMatrix3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(isSVGGraphicElement && targetMatrix.length === 16 ? convertDimension(targetMatrix, 4, 3) : targetMatrix) + ")";
+  return [beforeMatrix, offsetMatrix, mat, targetMatrix, transform, transformOrigin, is3d];
+}
+function getSVGMatrix(el, n) {
+  var clientWidth = el.clientWidth;
+  var clientHeight = el.clientHeight;
+  var viewBox = el.viewBox.baseVal;
+  var viewBoxWidth = viewBox.width || clientWidth;
+  var viewBoxHeight = viewBox.height || clientHeight;
+  var scaleX = clientWidth / viewBoxWidth;
+  var scaleY = clientHeight / viewBoxHeight;
+  var preserveAspectRatio = el.preserveAspectRatio.baseVal; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
+
+  var align = preserveAspectRatio.align; // 1 : meet 2: slice
+
+  var meetOrSlice = preserveAspectRatio.meetOrSlice;
+  var svgOrigin = [0, 0];
+  var scale = [scaleX, scaleY];
+  var translate = [0, 0];
+
+  if (align !== 1) {
+    var xAlign = (align - 2) % 3;
+    var yAlign = Math.floor((align - 2) / 3);
+    svgOrigin[0] = viewBoxWidth * xAlign / 2;
+    svgOrigin[1] = viewBoxHeight * yAlign / 2;
+    var scaleDimension = meetOrSlice === 2 ? Math.max(scaleY, scaleX) : Math.min(scaleX, scaleY);
+    scale[0] = scaleDimension;
+    scale[1] = scaleDimension;
+    translate[0] = (clientWidth - viewBoxWidth) / 2 * xAlign;
+    translate[1] = (clientHeight - viewBoxHeight) / 2 * yAlign;
+  }
+
+  var scaleMatrix = createScaleMatrix(scale, n);
+  scaleMatrix[n - 1] = translate[0], scaleMatrix[2 * n - 1] = translate[1];
+  return getAbsoluteMatrix(scaleMatrix, n, svgOrigin);
+}
+function getSVGGraphicsOffset(el, origin) {
+  if (!el.getBBox) {
+    return [0, 0];
+  }
+
+  var bbox = el.getBBox();
+  var svgElement = el.ownerSVGElement;
+  var viewBox = svgElement.viewBox.baseVal;
+  var left = bbox.x - viewBox.x;
+  var top = bbox.y - viewBox.y;
+  return [left, top, origin[0] - left, origin[1] - top];
+}
+function caculatePosition(matrix, pos, n) {
+  return caculate(matrix, convertPositionMatrix(pos, n), n);
+}
+function caculateRect(matrix, width, height, n) {
+  var pos1 = caculatePosition(matrix, [0, 0], n);
+  var pos2 = caculatePosition(matrix, [width, 0], n);
+  var pos3 = caculatePosition(matrix, [0, height], n);
+  var pos4 = caculatePosition(matrix, [width, height], n);
+  return [pos1, pos2, pos3, pos4];
+}
+function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) {
+  var _a;
+
+  var _b = getSize(el),
+      width = _b[0],
+      height = _b[1];
+
+  var containerRect = (container || document.documentElement).getBoundingClientRect();
+  var rect = el.getBoundingClientRect();
+  var rectLeft = rect.left - containerRect.left;
+  var rectTop = rect.top - containerRect.top;
+  var rectWidth = rect.width;
+  var rectHeight = rect.height;
+  var mat = multiplies(n, beforeMatrix, absoluteMatrix);
+  var poses = caculateRect(mat, width, height, n);
+  var posesX = poses.map(function (pos) {
+    return pos[0];
+  });
+  var posesY = poses.map(function (pos) {
+    return pos[1];
+  });
+  var posOrigin = caculatePosition(mat, origin, n);
+  var prevLeft = Math.min.apply(Math, posesX);
+  var prevTop = Math.min.apply(Math, posesY);
+  var prevOrigin = minus(posOrigin, [prevLeft, prevTop]);
+  var prevWidth = Math.max.apply(Math, posesX) - prevLeft;
+  var prevHeight = Math.max.apply(Math, posesY) - prevTop;
+  var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight];
+  var offset = [0, 0];
+  var count = 0;
+
+  while (++count < 10) {
+    var inverseBeforeMatrix = invert(beforeMatrix, n);
+    _a = minus(caculatePosition(inverseBeforeMatrix, rectOrigin, n), caculatePosition(inverseBeforeMatrix, posOrigin, n)), offset[0] = _a[0], offset[1] = _a[1];
+    var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix);
+    var nextPoses = caculateRect(mat2, width, height, n);
+    var nextLeft = Math.min.apply(Math, nextPoses.map(function (pos) {
+      return pos[0];
+    }));
+    var nextTop = Math.min.apply(Math, nextPoses.map(function (pos) {
+      return pos[1];
+    }));
+    var distLeft = nextLeft - rectLeft;
+    var distTop = nextTop - rectTop;
+
+    if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) {
+      break;
+    }
+
+    rectOrigin[0] -= distLeft;
+    rectOrigin[1] -= distTop;
+  }
+
+  return offset.map(function (p) {
+    return Math.round(p);
+  });
+}
+function caculateMoveablePosition(matrix, origin, width, height) {
+  var is3d = matrix.length === 16;
+  var n = is3d ? 4 : 3;
+
+  var _a = caculateRect(matrix, width, height, n),
+      _b = _a[0],
+      x1 = _b[0],
+      y1 = _b[1],
+      _c = _a[1],
+      x2 = _c[0],
+      y2 = _c[1],
+      _d = _a[2],
+      x3 = _d[0],
+      y3 = _d[1],
+      _e = _a[3],
+      x4 = _e[0],
+      y4 = _e[1];
+
+  var _f = caculatePosition(matrix, origin, n),
+      originX = _f[0],
+      originY = _f[1];
+
+  var minX = Math.min(x1, x2, x3, x4);
+  var minY = Math.min(y1, y2, y3, y4);
+  x1 = x1 - minX || 0;
+  x2 = x2 - minX || 0;
+  x3 = x3 - minX || 0;
+  x4 = x4 - minX || 0;
+  y1 = y1 - minY || 0;
+  y2 = y2 - minY || 0;
+  y3 = y3 - minY || 0;
+  y4 = y4 - minY || 0;
+  originX = originX - minX || 0;
+  originY = originY - minY || 0;
+  var center = [(x1 + x2 + x3 + x4) / 4, (y1 + y2 + y3 + y4) / 4];
+  var pos1Rad = getRad(center, [x1, y1]);
+  var pos2Rad = getRad(center, [x2, y2]);
+  var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1;
+  return [[minX, minY], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4], direction];
+}
+function getRad(pos1, pos2) {
+  var distX = pos2[0] - pos1[0];
+  var distY = pos2[1] - pos1[1];
+  var rad = Math.atan2(distY, distX);
+  return rad > 0 ? rad : rad + Math.PI * 2;
+}
+function getLineStyle(pos1, pos2) {
+  var distX = pos2[0] - pos1[0];
+  var distY = pos2[1] - pos1[1];
+  var width = Math.sqrt(distX * distX + distY * distY);
+  var rad = getRad(pos1, pos2);
+  return {
+    transform: "translate(" + pos1[0] + "px, " + pos1[1] + "px) rotate(" + rad + "rad)",
+    width: width + "px"
+  };
+}
+function getControlTransform() {
+  var poses = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    poses[_i] = arguments[_i];
+  }
+
+  var length = poses.length;
+  var x = poses.reduce(function (prev, pos) {
+    return prev + pos[0];
+  }, 0) / length;
+  var y = poses.reduce(function (prev, pos) {
+    return prev + pos[1];
+  }, 0) / length;
+  return {
+    transform: "translate(" + x + "px, " + y + "px)"
+  };
+}
+function getSize(target, style, isOffset, isBoxSizing) {
+  if (style === void 0) {
+    style = window.getComputedStyle(target);
+  }
+
+  if (isBoxSizing === void 0) {
+    isBoxSizing = isOffset || style.boxSizing === "border-box";
+  }
+
+  var width = target.offsetWidth;
+  var height = target.offsetHeight;
+  var hasOffset = !utils.isUndefined(width);
+
+  if ((isOffset || isBoxSizing) && hasOffset) {
+    return [width, height];
+  }
+
+  width = target.clientWidth;
+  height = target.clientHeight;
+
+  if (!hasOffset && !width && !height) {
+    var bbox = target.getBBox();
+    return [bbox.width, bbox.height];
+  }
+
+  if (isOffset || isBoxSizing) {
+    var borderLeft = parseFloat(style.borderLeftWidth) || 0;
+    var borderRight = parseFloat(style.borderRightWidth) || 0;
+    var borderTop = parseFloat(style.borderTopWidth) || 0;
+    var borderBottom = parseFloat(style.borderBottomWidth) || 0;
+    return [width + borderLeft + borderRight, height + borderTop + borderBottom];
+  } else {
+    var paddingLeft = parseFloat(style.paddingLeft) || 0;
+    var paddingRight = parseFloat(style.paddingRight) || 0;
+    var paddingTop = parseFloat(style.paddingTop) || 0;
+    var paddingBottom = parseFloat(style.paddingBottom) || 0;
+    return [width - paddingLeft - paddingRight, height - paddingTop - paddingBottom];
+  }
+}
+function getRotationInfo(pos1, pos2, direction) {
+  var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+  var relativeRotationPos = multiply(getRotateMatrix(rotationRad), [0, -40, 1], 3);
+  var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]];
+  return [rotationRad, rotationPos];
+}
+function getTargetInfo(target, container, state) {
+  var _a, _b, _c, _d, _e, _f;
+
+  var left = 0;
+  var top = 0;
+  var origin = [0, 0];
+  var pos1 = [0, 0];
+  var pos2 = [0, 0];
+  var pos3 = [0, 0];
+  var pos4 = [0, 0];
+  var beforeMatrix = createIdentityMatrix3();
+  var matrix = createIdentityMatrix3();
+  var targetMatrix = createIdentityMatrix3();
+  var width = 0;
+  var height = 0;
+  var transformOrigin = [0, 0];
+  var direction = 1;
+  var beforeDirection = 1;
+  var rotationPos = [0, 0];
+  var rotationRad = 0;
+  var is3d = false;
+  var targetTransform = "";
+  var beforeOrigin = [0, 0];
+  var prevMatrix = state ? state.beforeMatrix : undefined;
+  var prevN = state ? state.is3d ? 4 : 3 : undefined;
+
+  if (target) {
+    if (state) {
+      width = state.width;
+      height = state.height;
+    } else {
+      var style = window.getComputedStyle(target);
+      width = target.offsetWidth;
+      height = target.offsetHeight;
+
+      if (utils.isUndefined(width)) {
+        _a = getSize(target, style, true), width = _a[0], height = _a[1];
+      }
+    }
+
+    var offsetMatrix = void 0;
+    _b = caculateMatrixStack(target, container, prevMatrix, prevN), beforeMatrix = _b[0], offsetMatrix = _b[1], matrix = _b[2], targetMatrix = _b[3], targetTransform = _b[4], transformOrigin = _b[5], is3d = _b[6];
+    _c = caculateMoveablePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5], direction = _c[6];
+    var n = is3d ? 4 : 3;
+    var beforePos = [0, 0];
+    _e = caculateMoveablePosition(offsetMatrix, sum(transformOrigin, getOrigin(targetMatrix, n)), width, height), beforePos = _e[0], beforeOrigin = _e[1], beforeDirection = _e[6];
+    beforeOrigin = [beforeOrigin[0] + beforePos[0] - left, beforeOrigin[1] + beforePos[1] - top]; // 1 : clockwise
+    // -1 : counterclockwise
+
+    _f = getRotationInfo(pos1, pos2, direction), rotationRad = _f[0], rotationPos = _f[1];
+  }
+
+  return {
+    beforeDirection: beforeDirection,
+    direction: direction,
+    rotationRad: rotationRad,
+    rotationPos: rotationPos,
+    target: target,
+    left: left,
+    top: top,
+    pos1: pos1,
+    pos2: pos2,
+    pos3: pos3,
+    pos4: pos4,
+    width: width,
+    height: height,
+    beforeMatrix: beforeMatrix,
+    matrix: matrix,
+    targetTransform: targetTransform,
+    targetMatrix: targetMatrix,
+    is3d: is3d,
+    beforeOrigin: beforeOrigin,
+    origin: origin,
+    transformOrigin: transformOrigin
+  };
+}
+function getDirection(target) {
+  if (!target) {
+    return;
+  }
+
+  var direciton = target.getAttribute("data-direction");
+
+  if (!direciton) {
+    return;
+  }
+
+  var dir = [0, 0];
+  direciton.indexOf("w") > -1 && (dir[0] = -1);
+  direciton.indexOf("e") > -1 && (dir[0] = 1);
+  direciton.indexOf("n") > -1 && (dir[1] = -1);
+  direciton.indexOf("s") > -1 && (dir[1] = 1);
+  return dir;
+}
+function throttle(num, unit) {
+  if (!unit) {
+    return num;
+  }
+
+  return Math.round(num / unit) * unit;
+}
+function throttleArray(nums, unit) {
+  nums.forEach(function (_, i) {
+    nums[i] = throttle(nums[i], unit);
+  });
+}
+function warp(pos0, pos1, pos2, pos3, nextPos0, nextPos1, nextPos2, nextPos3) {
+  var x0 = pos0[0],
+      y0 = pos0[1];
+  var x1 = pos1[0],
+      y1 = pos1[1];
+  var x2 = pos2[0],
+      y2 = pos2[1];
+  var x3 = pos3[0],
+      y3 = pos3[1];
+  var u0 = nextPos0[0],
+      v0 = nextPos0[1];
+  var u1 = nextPos1[0],
+      v1 = nextPos1[1];
+  var u2 = nextPos2[0],
+      v2 = nextPos2[1];
+  var u3 = nextPos3[0],
+      v3 = nextPos3[1];
+  var matrix = [x0, y0, 1, 0, 0, 0, -u0 * x0, -u0 * y0, 0, 0, 0, x0, y0, 1, -v0 * x0, -v0 * y0, x1, y1, 1, 0, 0, 0, -u1 * x1, -u1 * y1, 0, 0, 0, x1, y1, 1, -v1 * x1, -v1 * y1, x2, y2, 1, 0, 0, 0, -u2 * x2, -u2 * y2, 0, 0, 0, x2, y2, 1, -v2 * x2, -v2 * y2, x3, y3, 1, 0, 0, 0, -u3 * x3, -u3 * y3, 0, 0, 0, x3, y3, 1, -v3 * x3, -v3 * y3];
+  var inverseMatrix = invert(matrix, 8);
+
+  if (!inverseMatrix.length) {
+    return [];
+  }
+
+  var h = multiply(inverseMatrix, [u0, v0, u1, v1, u2, v2, u3, v3], 8);
+  h[8] = 1;
+  return convertDimension(h, 3, 4);
+}
+function unset(self, name) {
+  if (self[name]) {
+    self[name].unset();
+    self[name] = null;
+  }
+}
+function getOrientationDirection(pos, pos1, pos2) {
+  return (pos[0] - pos1[0]) * (pos2[1] - pos1[1]) - (pos[1] - pos1[1]) * (pos2[0] - pos1[0]);
+}
+function isInside(pos, pos1, pos2, pos3, pos4) {
+  var k1 = getOrientationDirection(pos, pos1, pos2);
+  var k2 = getOrientationDirection(pos, pos2, pos4);
+  var k3 = getOrientationDirection(pos, pos4, pos1);
+  var k4 = getOrientationDirection(pos, pos2, pos4);
+  var k5 = getOrientationDirection(pos, pos4, pos3);
+  var k6 = getOrientationDirection(pos, pos3, pos2);
+  var signs1 = [k1, k2, k3];
+  var signs2 = [k4, k5, k6];
+
+  if (signs1.every(function (sign) {
+    return sign >= 0;
+  }) || signs1.every(function (sign) {
+    return sign <= 0;
+  }) || signs2.every(function (sign) {
+    return sign >= 0;
+  }) || signs2.every(function (sign) {
+    return sign <= 0;
+  })) {
+    return true;
+  }
+
+  return false;
+}
+function triggerEvent(moveable, name, e) {
+  return moveable.triggerEvent(name, e);
+}
+
+function getRotatiion(touches) {
+  return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
+}
+
+var Pinchable = {
+  name: "pinchable",
+  updateRect: true,
+  pinchStart: function (moveable, _a) {
+    var _b;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        touches = _a.touches,
+        inputEvent = _a.inputEvent,
+        targets = _a.targets;
+    var _c = moveable.props,
+        pinchable = _c.pinchable,
+        ables = _c.ables;
+
+    if (!pinchable) {
+      return false;
+    }
+
+    var state = moveable.state;
+    var eventName = "onPinch" + (targets ? "Group" : "") + "Start";
+    var controlEventName = "drag" + (targets ? "Group" : "") + "ControlStart";
+    var pinchAbles = (pinchable === true ? moveable.controlAbles : ables.filter(function (able) {
+      return pinchable.indexOf(able.name) > -1;
+    })).filter(function (able) {
+      return able.canPinch && able[controlEventName];
+    });
+    datas.pinchableDatas = {};
+    var result = triggerEvent(moveable, eventName, (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : state.target, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b));
+    datas.isPinch = result !== false;
+    datas.ables = pinchAbles;
+    var isPinch = datas.isPinch;
+
+    if (!isPinch) {
+      return false;
+    }
+
+    var parentRotate = getRotatiion(touches);
+    pinchAbles.forEach(function (able) {
+      datas[able.name + "Datas"] = {};
+      var e = {
+        datas: datas[able.name + "Datas"],
+        clientX: clientX,
+        clientY: clientY,
+        inputEvent: inputEvent,
+        parentRotate: parentRotate,
+        pinchFlag: true
+      };
+      able[controlEventName](moveable, e);
+    });
+    return isPinch;
+  },
+  pinch: function (moveable, _a) {
+    var _b;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        pinchScale = _a.scale,
+        distance = _a.distance,
+        touches = _a.touches,
+        inputEvent = _a.inputEvent,
+        targets = _a.targets;
+
+    if (!datas.isPinch) {
+      return;
+    }
+
+    var parentRotate = getRotatiion(touches);
+    var parentDistance = distance * (1 - 1 / pinchScale);
+    var target = moveable.state.target;
+    inputEvent.preventDefault();
+    inputEvent.stopPropagation();
+    var params = (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : target, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b);
+    var eventName = "onPinch" + (targets ? "Group" : "");
+    triggerEvent(moveable, eventName, params);
+    var ables = datas.ables;
+    var controlEventName = "drag" + (targets ? "Group" : "") + "Control";
+    ables.forEach(function (able) {
+      able[controlEventName](moveable, {
+        clientX: clientX,
+        clientY: clientY,
+        datas: datas[able.name + "Datas"],
+        inputEvent: inputEvent,
+        parentDistance: parentDistance,
+        parentRotate: parentRotate,
+        pinchFlag: true
+      });
+    });
+    return params;
+  },
+  pinchEnd: function (moveable, _a) {
+    var _b;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        isPinch = _a.isPinch,
+        inputEvent = _a.inputEvent,
+        targets = _a.targets;
+
+    if (!datas.isPinch) {
+      return;
+    }
+
+    var target = moveable.state.target;
+    var eventName = "onPinch" + (targets ? "Group" : "") + "End";
+    triggerEvent(moveable, eventName, (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : target, _b.isDrag = isPinch, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b));
+    var ables = datas.ables;
+    var controlEventName = "drag" + (targets ? "Group" : "") + "ControlEnd";
+    ables.forEach(function (able) {
+      able[controlEventName](moveable, {
+        clientX: clientX,
+        clientY: clientY,
+        isDrag: isPinch,
+        datas: datas[able.name + "Datas"],
+        inputEvent: inputEvent,
+        pinchFlag: true
+      });
+    });
+    return isPinch;
+  },
+  pinchGroupStart: function (moveable, e) {
+    return this.pinchStart(moveable, __assign$2({}, e, {
+      targets: moveable.props.targets
+    }));
+  },
+  pinchGroup: function (moveable, e) {
+    return this.pinch(moveable, __assign$2({}, e, {
+      targets: moveable.props.targets
+    }));
+  },
+  pinchGroupEnd: function (moveable, e) {
+    return this.pinchEnd(moveable, __assign$2({}, e, {
+      targets: moveable.props.targets
+    }));
+  }
+};
+
+function setDragStart(moveable, _a) {
+  var datas = _a.datas;
+  var _b = moveable.state,
+      matrix = _b.matrix,
+      beforeMatrix = _b.beforeMatrix,
+      is3d = _b.is3d,
+      left = _b.left,
+      top = _b.top,
+      origin = _b.origin;
+  var n = is3d ? 4 : 3;
+  datas.is3d = is3d;
+  datas.matrix = matrix;
+  datas.inverseMatrix = invert(matrix, n);
+  datas.beforeMatrix = beforeMatrix;
+  datas.inverseBeforeMatrix = invert(beforeMatrix, n);
+  datas.absoluteOrigin = convertPositionMatrix(sum([left, top], origin), n);
+  datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n);
+  datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, n);
+}
+function getDragDist(_a, isBefore) {
+  var datas = _a.datas,
+      distX = _a.distX,
+      distY = _a.distY;
+  var inverseBeforeMatrix = datas.inverseBeforeMatrix,
+      inverseMatrix = datas.inverseMatrix,
+      is3d = datas.is3d,
+      startDragBeforeDist = datas.startDragBeforeDist,
+      startDragDist = datas.startDragDist,
+      absoluteOrigin = datas.absoluteOrigin;
+  var n = is3d ? 4 : 3;
+  return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, sum(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist);
+}
+
+function triggerChildAble(moveable, able, type, e, callback) {
+  var name = able.name;
+  var datas = e.datas;
+  var ableDatas = datas[name] || (datas[name] = []);
+  return moveable.moveables.map(function (child, i) {
+    var childDatas = ableDatas[i] || (ableDatas[i] = {});
+    var result = able[type](child, __assign$2({}, e, {
+      datas: childDatas,
+      parentFlag: true
+    }));
+    result && callback && callback(child, childDatas, result, i);
+    return result;
+  });
+}
+function getCustomEvent(datas) {
+  return datas.custom;
+}
+function setCustomEvent(clientX, clientY, datas, inputEvent) {
+  var e = datas.custom || (datas.custom = {
+    startX: clientX,
+    startY: clientY,
+    prevX: clientX,
+    prevY: clientY,
+    isDrag: false
+  });
+  var prevX = e.prevX,
+      prevY = e.prevY,
+      startX = e.startX,
+      startY = e.startY;
+  e.prevX = clientX;
+  e.prevY = clientY;
+
+  if (clientX !== prevX || clientY !== prevY) {
+    e.isDrag = true;
+  }
+
+  return {
+    clientX: clientX,
+    clientY: clientY,
+    distX: clientX - startX,
+    distY: clientY - startY,
+    deltaX: clientX - prevX,
+    deltaY: clientY - prevY,
+    isDrag: e.isDrag,
+    datas: datas,
+    inputEvent: inputEvent
+  };
+}
+function directionCondition(target) {
+  return utils.hasClass(target, prefix("direction"));
+}
+
+var Draggable = {
+  name: "draggable",
+  dragStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+    var _b = moveable.state,
+        targetTransform = _b.targetTransform,
+        target = _b.target;
+    var style = window.getComputedStyle(target);
+    datas.datas = {};
+    datas.left = parseFloat(style.left || "") || 0;
+    datas.top = parseFloat(style.top || "") || 0;
+    datas.bottom = parseFloat(style.bottom || "") || 0;
+    datas.right = parseFloat(style.right || "") || 0;
+    datas.transform = targetTransform;
+    setDragStart(moveable, {
+      datas: datas
+    });
+    datas.prevDist = [0, 0];
+    datas.prevBeforeDist = [0, 0];
+    var result = triggerEvent(moveable, "onDragStart", {
+      datas: datas.datas,
+      target: target,
+      clientX: clientX,
+      clientY: clientY
+    });
+
+    if (result !== false) {
+      datas.isDrag = true;
+    } else {
+      datas.isPinch = false;
+    }
+
+    return datas.isDrag;
+  },
+  drag: function (moveable, _a) {
+    var datas = _a.datas,
+        distX = _a.distX,
+        distY = _a.distY,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        inputEvent = _a.inputEvent;
+    var isPinch = datas.isPinch,
+        isDrag = datas.isDrag,
+        prevDist = datas.prevDist,
+        prevBeforeDist = datas.prevBeforeDist,
+        transform = datas.transform;
+
+    if (!isDrag) {
+      return;
+    }
+
+    inputEvent.preventDefault();
+    inputEvent.stopPropagation();
+    var _b = moveable.props,
+        _c = _b.throttleDrag,
+        throttleDrag = _c === void 0 ? 0 : _c,
+        parentMoveable = _b.parentMoveable;
+    var target = moveable.state.target;
+    var beforeDist = getDragDist({
+      datas: datas,
+      distX: distX,
+      distY: distY
+    }, true);
+    var dist = getDragDist({
+      datas: datas,
+      distX: distX,
+      distY: distY
+    }, false);
+    throttleArray(dist, throttleDrag);
+    throttleArray(beforeDist, throttleDrag);
+    var delta = minus(dist, prevDist);
+    var beforeDelta = minus(beforeDist, prevBeforeDist);
+    datas.prevDist = dist;
+    datas.prevBeforeDist = beforeDist;
+    var left = datas.left + beforeDist[0];
+    var top = datas.top + beforeDist[1];
+    var right = datas.right - beforeDist[0];
+    var bottom = datas.bottom - beforeDist[1];
+    var nextTransform = transform + " translate(" + dist[0] + "px, " + dist[1] + "px)";
+
+    if (!parentMoveable && delta.every(function (num) {
+      return !num;
+    }) && beforeDelta.some(function (num) {
+      return !num;
+    })) {
+      return;
+    }
+
+    var params = {
+      datas: datas.datas,
+      target: target,
+      transform: nextTransform,
+      dist: dist,
+      delta: delta,
+      beforeDist: beforeDist,
+      beforeDelta: beforeDelta,
+      left: left,
+      top: top,
+      right: right,
+      bottom: bottom,
+      clientX: clientX,
+      clientY: clientY,
+      isPinch: isPinch
+    };
+    triggerEvent(moveable, "onDrag", params);
+    return params;
+  },
+  dragEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isDrag) {
+      return;
+    }
+
+    datas.isDrag = false;
+    triggerEvent(moveable, "onDragEnd", {
+      target: moveable.state.target,
+      isDrag: isDrag,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    return isDrag;
+  },
+  dragGroupCondition: function (target) {
+    return utils.hasClass(target, prefix("group"));
+  },
+  dragGroupStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas;
+    triggerChildAble(moveable, this, "dragStart", e);
+    this.dragStart(moveable, e);
+    var result = triggerEvent(moveable, "onDragGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isDrag = result !== false;
+    return datas.isDrag;
+  },
+  dragGroup: function (moveable, e) {
+    if (!e.datas.isDrag) {
+      return;
+    }
+
+    var events = triggerChildAble(moveable, this, "drag", e);
+    var params = this.drag(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    triggerEvent(moveable, "onDragGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isDrag) {
+      return;
+    }
+
+    triggerChildAble(moveable, this, "dragEnd", e);
+    triggerEvent(moveable, "onDragGroupEnd", {
+      targets: moveable.props.targets,
+      isDrag: isDrag,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    return isDrag;
+  }
+};
+
+function setRotateStartInfo(datas, clientX, clientY, origin, rotationPos) {
+  datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]];
+  datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180;
+  datas.startDeg = datas.prevDeg;
+  datas.loop = 0;
+}
+
+function getDeg(datas, deg, direction, throttleRotate) {
+  var prevDeg = datas.prevDeg,
+      startDeg = datas.startDeg,
+      prevLoop = datas.loop;
+  deg = throttle(deg, throttleRotate);
+
+  if (prevDeg > deg && prevDeg > 270 && deg < 90) {
+    // 360 => 0
+    ++datas.loop;
+  } else if (prevDeg < deg && prevDeg < 90 && deg > 270) {
+    // 0 => 360
+    --datas.loop;
+  }
+
+  var absolutePrevDeg = prevLoop * 360 + prevDeg;
+  var absoluteDeg = datas.loop * 360 + deg;
+  var delta = direction * (absoluteDeg - absolutePrevDeg);
+  var dist = direction * (absoluteDeg - startDeg);
+  datas.prevDeg = deg;
+  return [delta, dist];
+}
+
+function getRotateInfo(datas, direction, clientX, clientY, throttleRotate) {
+  return getDeg(datas, getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, direction, throttleRotate);
+}
+
+function dragControlCondition(target) {
+  return utils.hasClass(target, prefix("rotation"));
+}
+
+var Rotatable = {
+  name: "rotatable",
+  canPinch: true,
+  render: function (moveable) {
+    if (!moveable.props.rotatable) {
+      return null;
+    }
+
+    var _a = moveable.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        rotationRad = _a.rotationRad;
+    return createElement("div", {
+      className: prefix("line rotation-line"),
+      style: {
+        // tslint:disable-next-line: max-line-length
+        transform: "translate(" + (pos1[0] + pos2[0]) / 2 + "px, " + (pos1[1] + pos2[1]) / 2 + "px) translateY(-40px) rotate(" + rotationRad + "rad)"
+      }
+    }, createElement("div", {
+      className: prefix("control", "rotation")
+    }));
+  },
+  dragControlCondition: dragControlCondition,
+  dragControlStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        parentRotate = _a.parentRotate,
+        parentFlag = _a.parentFlag,
+        pinchFlag = _a.pinchFlag;
+    var _b = moveable.state,
+        target = _b.target,
+        left = _b.left,
+        top = _b.top,
+        origin = _b.origin,
+        beforeOrigin = _b.beforeOrigin,
+        rotationPos = _b.rotationPos,
+        direction = _b.direction,
+        beforeDirection = _b.beforeDirection,
+        targetTransform = _b.targetTransform;
+
+    if (!target) {
+      return false;
+    }
+
+    datas.transform = targetTransform;
+    datas.left = left;
+    datas.top = top;
+
+    if (pinchFlag || parentFlag) {
+      datas.beforeInfo = {
+        prevDeg: parentRotate,
+        startDeg: parentRotate,
+        loop: 0
+      };
+      datas.afterInfo = {
+        prevDeg: parentRotate,
+        startDeg: parentRotate,
+        loop: 0
+      };
+    } else {
+      datas.afterInfo = {};
+      datas.beforeInfo = {};
+      setRotateStartInfo(datas.afterInfo, clientX, clientY, origin, rotationPos);
+      setRotateStartInfo(datas.beforeInfo, clientX, clientY, beforeOrigin, rotationPos);
+    }
+
+    datas.direction = direction;
+    datas.beforeDirection = beforeDirection;
+    datas.datas = {};
+    var result = triggerEvent(moveable, "onRotateStart", {
+      datas: datas.datas,
+      target: target,
+      clientX: clientX,
+      clientY: clientY
+    });
+    datas.isRotate = result !== false;
+    return datas.isRotate;
+  },
+  dragControl: function (moveable, _a) {
+    var _b, _c, _d, _e;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        parentRotate = _a.parentRotate,
+        parentFlag = _a.parentFlag,
+        pinchFlag = _a.pinchFlag;
+    var direction = datas.direction,
+        beforeDirection = datas.beforeDirection,
+        beforeInfo = datas.beforeInfo,
+        afterInfo = datas.afterInfo,
+        isRotate = datas.isRotate;
+
+    if (!isRotate) {
+      return;
+    }
+
+    var _f = moveable.props,
+        _g = _f.throttleRotate,
+        throttleRotate = _g === void 0 ? 0 : _g,
+        parentMoveable = _f.parentMoveable;
+    var delta;
+    var dist;
+    var beforeDelta;
+    var beforeDist;
+
+    if (pinchFlag || parentFlag) {
+      _b = getDeg(afterInfo, parentRotate, direction, throttleRotate), delta = _b[0], dist = _b[1];
+      _c = getDeg(beforeInfo, parentRotate, direction, throttleRotate), beforeDelta = _c[0], beforeDist = _c[1];
+    } else {
+      _d = getRotateInfo(afterInfo, direction, clientX, clientY, throttleRotate), delta = _d[0], dist = _d[1];
+      _e = getRotateInfo(beforeInfo, beforeDirection, clientX, clientY, throttleRotate), beforeDelta = _e[0], beforeDist = _e[1];
+    }
+
+    if (!delta && !beforeDelta && !parentMoveable) {
+      return;
+    }
+
+    var params = {
+      target: moveable.props.target,
+      datas: datas.datas,
+      delta: delta,
+      dist: dist,
+      clientX: clientX,
+      clientY: clientY,
+      beforeDist: beforeDist,
+      beforeDelta: beforeDelta,
+      transform: datas.transform + " rotate(" + dist + "deg)",
+      isPinch: !!pinchFlag
+    };
+    triggerEvent(moveable, "onRotate", params);
+    return params;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isRotate) {
+      return false;
+    }
+
+    datas.isRotate = false;
+    triggerEvent(moveable, "onRotateEnd", {
+      datas: datas.datas,
+      clientX: clientX,
+      clientY: clientY,
+      target: moveable.state.target,
+      isDrag: isDrag
+    });
+    return isDrag;
+  },
+  dragGroupControlCondition: dragControlCondition,
+  dragGroupControlStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas,
+        inputEvent = e.inputEvent;
+    var _a = moveable.state,
+        parentLeft = _a.left,
+        parentTop = _a.top,
+        parentBeforeOrigin = _a.beforeOrigin;
+    triggerChildAble(moveable, this, "dragControlStart", __assign$2({}, e, {
+      parentRotate: 0
+    }), function (child, childDatas) {
+      var _a = child.state,
+          left = _a.left,
+          top = _a.top,
+          beforeOrigin = _a.beforeOrigin;
+      var childClient = sum(minus([left, top], [parentLeft, parentTop]), minus(beforeOrigin, parentBeforeOrigin));
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+      Draggable.dragStart(child, setCustomEvent(childClient[0], childClient[1], dragDatas, inputEvent));
+    });
+    this.dragControlStart(moveable, e);
+    var result = triggerEvent(moveable, "onRotateGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isRotate = result !== false;
+    return datas.isDrag;
+  },
+  dragGroupControl: function (moveable, e) {
+    var inputEvent = e.inputEvent,
+        datas = e.datas;
+
+    if (!datas.isRotate) {
+      return;
+    }
+
+    var params = this.dragControl(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var parentRotate = params.beforeDist;
+    var deg = params.beforeDelta;
+    var events = triggerChildAble(moveable, this, "dragControl", __assign$2({}, e, {
+      parentRotate: parentRotate
+    }), function (child, childDatas, result, i) {
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+      var _a = getCustomEvent(dragDatas),
+          prevX = _a.prevX,
+          prevY = _a.prevY;
+
+      var _b = rotate([prevX, prevY], deg),
+          clientX = _b[0],
+          clientY = _b[1];
+
+      var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+      result.drag = dragResult;
+    });
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    moveable.rotation += params.beforeDelta;
+    triggerEvent(moveable, "onRotateGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupControlEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isRotate) {
+      return;
+    }
+
+    this.dragControlEnd(moveable, e);
+    triggerChildAble(moveable, this, "dragControlEnd", e);
+    var nextParams = {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    };
+    triggerEvent(moveable, "onRotateGroupEnd", nextParams);
+    return isDrag;
+  }
+};
+
+function renderAllDirection(moveable) {
+  return renderDiagonalDirection(moveable).concat(renderDirection(moveable));
+}
+function renderDiagonalDirection(moveable) {
+  var _a = moveable.props,
+      resizable = _a.resizable,
+      scalable = _a.scalable,
+      warpable = _a.warpable;
+
+  if (!resizable && !scalable && !warpable) {
+    return [];
+  }
+
+  var _b = moveable.state,
+      pos1 = _b.pos1,
+      pos2 = _b.pos2,
+      pos3 = _b.pos3,
+      pos4 = _b.pos4;
+  return [createElement("div", {
+    className: prefix("control", "direction", "nw"),
+    "data-direction": "nw",
+    key: "nw",
+    style: getControlTransform(pos1)
+  }), createElement("div", {
+    className: prefix("control", "direction", "ne"),
+    "data-direction": "ne",
+    key: "ne",
+    style: getControlTransform(pos2)
+  }), createElement("div", {
+    className: prefix("control", "direction", "sw"),
+    "data-direction": "sw",
+    key: "sw",
+    style: getControlTransform(pos3)
+  }), createElement("div", {
+    className: prefix("control", "direction", "se"),
+    "data-direction": "se",
+    key: "se",
+    style: getControlTransform(pos4)
+  })];
+}
+function renderDirection(moveable) {
+  var _a = moveable.props,
+      resizable = _a.resizable,
+      scalable = _a.scalable;
+
+  if (!resizable && !scalable) {
+    return [];
+  }
+
+  var _b = moveable.state,
+      pos1 = _b.pos1,
+      pos2 = _b.pos2,
+      pos3 = _b.pos3,
+      pos4 = _b.pos4;
+  return [createElement("div", {
+    className: prefix("control", "direction", "n"),
+    "data-direction": "n",
+    key: "n",
+    style: getControlTransform(pos1, pos2)
+  }), createElement("div", {
+    className: prefix("control", "direction", "w"),
+    "data-direction": "w",
+    key: "w",
+    style: getControlTransform(pos1, pos3)
+  }), createElement("div", {
+    className: prefix("control", "direction", "e"),
+    "data-direction": "e",
+    key: "e",
+    style: getControlTransform(pos2, pos4)
+  }), createElement("div", {
+    className: prefix("control", "direction", "s"),
+    "data-direction": "s",
+    key: "s",
+    style: getControlTransform(pos3, pos4)
+  })];
+}
+
+var Resizable = {
+  name: "resizable",
+  dragControlOnly: true,
+  updateRect: true,
+  canPinch: true,
+  render: function (moveable) {
+    var _a = moveable.props,
+        resizable = _a.resizable,
+        edge = _a.edge;
+
+    if (resizable) {
+      if (edge) {
+        return renderDiagonalDirection(moveable);
+      }
+
+      return renderAllDirection(moveable);
+    }
+  },
+  dragControlCondition: directionCondition,
+  dragControlStart: function (moveable, e) {
+    var inputTarget = e.inputEvent.target,
+        pinchFlag = e.pinchFlag;
+    var direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+    var _a = moveable.state,
+        target = _a.target,
+        width = _a.width,
+        height = _a.height;
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas;
+
+    if (!direction || !target) {
+      return false;
+    }
+
+    !pinchFlag && setDragStart(moveable, {
+      datas: datas
+    });
+    datas.datas = {};
+    datas.direction = direction;
+    datas.width = width;
+    datas.height = height;
+    datas.prevWidth = 0;
+    datas.prevHeight = 0;
+    var result = triggerEvent(moveable, "onResizeStart", {
+      datas: datas.datas,
+      target: target,
+      clientX: clientX,
+      clientY: clientY
+    });
+
+    if (result !== false) {
+      datas.isResize = true;
+    }
+
+    return datas.isResize;
+  },
+  dragControl: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        distX = _a.distX,
+        distY = _a.distY,
+        pinchFlag = _a.pinchFlag,
+        parentDistance = _a.parentDistance,
+        parentScale = _a.parentScale;
+    var direction = datas.direction,
+        width = datas.width,
+        height = datas.height,
+        prevWidth = datas.prevWidth,
+        prevHeight = datas.prevHeight,
+        isResize = datas.isResize;
+
+    if (!isResize) {
+      return;
+    }
+
+    var _b = moveable.props,
+        keepRatio = _b.keepRatio,
+        _c = _b.throttleResize,
+        throttleResize = _c === void 0 ? 0 : _c,
+        parentMoveable = _b.parentMoveable;
+    var target = moveable.state.target;
+    var distWidth = 0;
+    var distHeight = 0; // diagonal
+
+    if (parentScale) {
+      distWidth = (parentScale - 1) * width;
+      distHeight = (parentScale - 1) * height;
+    } else if (pinchFlag) {
+      if (parentDistance) {
+        distWidth = parentDistance;
+        distHeight = parentDistance * height / width;
+      }
+    } else {
+      var dist = getDragDist({
+        datas: datas,
+        distX: distX,
+        distY: distY
+      });
+      distWidth = direction[0] * dist[0];
+      distHeight = direction[1] * dist[1];
+
+      if (keepRatio && direction[0] && direction[1] && width && height) {
+        var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+        var rad = getRad([0, 0], dist);
+        var standardRad = getRad([0, 0], direction);
+        var distDiagonal = Math.cos(rad - standardRad) * size;
+        distWidth = distDiagonal;
+        distHeight = distDiagonal * height / width;
+      }
+    }
+
+    distWidth = throttle(distWidth, throttleResize);
+    distHeight = throttle(distHeight, throttleResize);
+    var nextWidth = width + distWidth;
+    var nextHeight = height + distHeight;
+    var delta = [distWidth - prevWidth, distHeight - prevHeight];
+    datas.prevWidth = distWidth;
+    datas.prevHeight = distHeight;
+
+    if (!parentMoveable && delta.every(function (num) {
+      return !num;
+    })) {
+      return;
+    }
+
+    var params = {
+      target: target,
+      width: nextWidth,
+      height: nextHeight,
+      direction: direction,
+      dist: [distWidth, distHeight],
+      datas: datas.datas,
+      delta: delta,
+      clientX: clientX,
+      clientY: clientY,
+      isPinch: !!pinchFlag
+    };
+    triggerEvent(moveable, "onResize", params);
+    return params;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isResize) {
+      return false;
+    }
+
+    datas.isResize = false;
+    triggerEvent(moveable, "onResizeEnd", {
+      target: moveable.state.target,
+      datas: datas.datas,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag
+    });
+    return isDrag;
+  },
+  dragGroupControlCondition: directionCondition,
+  dragGroupControlStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas,
+        inputEvent = e.inputEvent;
+    var _a = moveable.state,
+        parentLeft = _a.left,
+        parentTop = _a.top;
+    var enabledEvents = triggerChildAble(moveable, this, "dragControlStart", __assign$2({}, e, {
+      parentRotate: 0
+    }), function (child, childDatas) {
+      var _a = child.state,
+          left = _a.left,
+          top = _a.top;
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+      Draggable.dragStart(child, setCustomEvent(left - parentLeft, top - parentTop, dragDatas, inputEvent));
+    });
+
+    if (enabledEvents.every(function (ev) {
+      return !ev;
+    })) {
+      return false;
+    }
+
+    this.dragControlStart(moveable, e);
+    var result = triggerEvent(moveable, "onResizeGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isResize = result !== false;
+    return datas.isResize;
+  },
+  dragGroupControl: function (moveable, e) {
+    var inputEvent = e.inputEvent,
+        datas = e.datas;
+
+    if (!datas.isResize) {
+      return;
+    }
+
+    var params = this.dragControl(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var width = params.width,
+        height = params.height,
+        dist = params.dist;
+    var parentScale = [width / (width - dist[0]), height / (height - dist[1])];
+    var events = triggerChildAble(moveable, this, "dragControl", __assign$2({}, e, {
+      parentScale: parentScale
+    }), function (child, childDatas, result) {
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+      var _a = getCustomEvent(dragDatas),
+          startX = _a.startX,
+          startY = _a.startY;
+
+      var clientX = parentScale[0] * startX;
+      var clientY = parentScale[1] * startY;
+      var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+      result.drag = dragResult;
+    });
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    triggerEvent(moveable, "onResizeGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupControlEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isResize) {
+      return;
+    }
+
+    this.dragControlEnd(moveable, e);
+    triggerChildAble(moveable, this, "dragControlEnd", e);
+    var nextParams = {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    };
+    triggerEvent(moveable, "onResizeGroupEnd", nextParams);
+    return isDrag;
+  }
+};
+
+var Scalable = {
+  name: "scalable",
+  dragControlOnly: true,
+  canPinch: true,
+  render: function (moveable) {
+    var _a = moveable.props,
+        resizable = _a.resizable,
+        scalable = _a.scalable,
+        edge = _a.edge;
+
+    if (!resizable && scalable) {
+      if (edge) {
+        return renderDiagonalDirection(moveable);
+      }
+
+      return renderAllDirection(moveable);
+    }
+  },
+  dragControlCondition: directionCondition,
+  dragControlStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        pinchFlag = _a.pinchFlag,
+        inputTarget = _a.inputEvent.target;
+    var direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+    var _b = moveable.state,
+        width = _b.width,
+        height = _b.height,
+        targetTransform = _b.targetTransform,
+        target = _b.target;
+
+    if (!direction || !target) {
+      return false;
+    }
+
+    if (!pinchFlag) {
+      setDragStart(moveable, {
+        datas: datas
+      });
+    }
+
+    datas.datas = {};
+    datas.transform = targetTransform;
+    datas.prevDist = [1, 1];
+    datas.direction = direction;
+    datas.width = width;
+    datas.height = height;
+    var result = triggerEvent(moveable, "onScaleStart", {
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+
+    if (result !== false) {
+      datas.isScale = true;
+    }
+
+    return datas.isScale;
+  },
+  dragControl: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        distX = _a.distX,
+        distY = _a.distY,
+        parentScale = _a.parentScale,
+        parentDistance = _a.parentDistance,
+        pinchFlag = _a.pinchFlag;
+    var prevDist = datas.prevDist,
+        direction = datas.direction,
+        width = datas.width,
+        height = datas.height,
+        transform = datas.transform,
+        isScale = datas.isScale;
+
+    if (!isScale) {
+      return false;
+    }
+
+    var _b = moveable.props,
+        keepRatio = _b.keepRatio,
+        throttleScale = _b.throttleScale,
+        parentMoveable = _b.parentMoveable;
+    var target = moveable.state.target;
+    var scaleX = 1;
+    var scaleY = 1;
+
+    if (parentScale) {
+      scaleX = parentScale[0];
+      scaleY = parentScale[1];
+    } else if (pinchFlag) {
+      if (parentDistance) {
+        scaleX = (width + parentDistance) / width;
+        scaleY = (height + parentDistance * height / width) / height;
+      }
+    } else {
+      var dist = getDragDist({
+        datas: datas,
+        distX: distX,
+        distY: distY
+      });
+      var distWidth = direction[0] * dist[0];
+      var distHeight = direction[1] * dist[1]; // diagonal
+
+      if (keepRatio && direction[0] && direction[1] && width && height) {
+        var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+        var rad = getRad([0, 0], dist);
+        var standardRad = getRad([0, 0], direction);
+        var distDiagonal = Math.cos(rad - standardRad) * size;
+        distWidth = distDiagonal;
+        distHeight = distDiagonal * height / width;
+      }
+
+      var nextWidth = width + distWidth;
+      var nextHeight = height + distHeight;
+      scaleX = nextWidth / width;
+      scaleY = nextHeight / height;
+    }
+
+    scaleX = throttle(scaleX, throttleScale);
+    scaleY = throttle(scaleY, throttleScale);
+
+    if (scaleX === 0) {
+      scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE;
+    }
+
+    if (scaleY === 0) {
+      scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE;
+    }
+
+    var nowScale = [scaleX, scaleY];
+    datas.prevDist = nowScale;
+
+    if (scaleX === prevDist[0] && scaleY === prevDist[1] && !parentMoveable) {
+      return false;
+    }
+
+    var params = {
+      target: target,
+      scale: nowScale,
+      direction: direction,
+      dist: [scaleX - 1, scaleY - 1],
+      delta: [scaleX / prevDist[0], scaleY / prevDist[1]],
+      transform: transform + " scale(" + scaleX + ", " + scaleY + ")",
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas,
+      isPinch: !!pinchFlag
+    };
+    triggerEvent(moveable, "onScale", params);
+    return params;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        pinchFlag = _a.pinchFlag;
+
+    if (!datas.isScale) {
+      return false;
+    }
+
+    datas.isScale = false;
+    triggerEvent(moveable, "onScaleEnd", {
+      target: moveable.state.target,
+      isDrag: isDrag,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    return isDrag;
+  },
+  dragGroupControlCondition: directionCondition,
+  dragGroupControlStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas,
+        inputEvent = e.inputEvent;
+    var _a = moveable.state,
+        parentLeft = _a.left,
+        parentTop = _a.top,
+        parentOrigin = _a.origin;
+    var parentAbsoluteOrigin = [parentLeft + parentOrigin[0], parentTop + parentOrigin[1]];
+    datas.rotation = moveable.rotation;
+    var enabledEvents = triggerChildAble(moveable, this, "dragControlStart", e, function (child, childDatas) {
+      var _a = child.state,
+          left = _a.left,
+          top = _a.top,
+          origin = _a.origin;
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+      Draggable.dragStart(child, setCustomEvent(left + origin[0] - parentAbsoluteOrigin[0], top + origin[1] - parentAbsoluteOrigin[1], dragDatas, inputEvent));
+    });
+
+    if (enabledEvents.every(function (ev) {
+      return !ev;
+    })) {
+      return false;
+    }
+
+    this.dragControlStart(moveable, e);
+    var result = triggerEvent(moveable, "onScaleGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isScale = result !== false;
+    return datas.isScale;
+  },
+  dragGroupControl: function (moveable, e) {
+    var inputEvent = e.inputEvent,
+        datas = e.datas;
+
+    if (!datas.isScale) {
+      return;
+    }
+
+    var params = this.dragControl(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var scale = params.scale;
+    var events = triggerChildAble(moveable, this, "dragControl", __assign$2({}, e, {
+      parentScale: scale
+    }), function (child, childDatas, result) {
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+      var _a = getCustomEvent(dragDatas),
+          startX = _a.startX,
+          startY = _a.startY;
+
+      var startPos = rotate([startX, startY], -datas.rotation);
+
+      var _b = rotate([startPos[0] * scale[0], startPos[1] * scale[1]], moveable.rotation),
+          clientX = _b[0],
+          clientY = _b[1];
+
+      var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+      result.drag = dragResult;
+    });
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    triggerEvent(moveable, "onScaleGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupControlEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isScale) {
+      return;
+    }
+
+    this.dragControlEnd(moveable, e);
+    triggerChildAble(moveable, this, "dragControlEnd", e);
+    var nextParams = {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    };
+    triggerEvent(moveable, "onScaleGroupEnd", nextParams);
+    return isDrag;
+  }
+};
+
+function getMiddleLinePos(pos1, pos2) {
+  return pos1.map(function (pos, i) {
+    return utils.dot(pos, pos2[i], 1, 2);
+  });
+}
+
+function getTriangleRad(pos1, pos2, pos3) {
+  // pos1 Rad
+  var rad1 = getRad(pos1, pos2);
+  var rad2 = getRad(pos1, pos3);
+  var rad = rad2 - rad1;
+  return rad >= 0 ? rad : rad + 2 * Math.PI;
+}
+
+function isValidPos(poses1, poses2) {
+  var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]);
+  var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]);
+  var pi = Math.PI;
+
+  if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) {
+    return false;
+  }
+
+  return true;
+}
+
+var Warpable = {
+  name: "warpable",
+  dragControlOnly: true,
+  render: function (moveable) {
+    var _a = moveable.props,
+        resizable = _a.resizable,
+        scalable = _a.scalable,
+        warpable = _a.warpable;
+
+    if (resizable || scalable || !warpable) {
+      return;
+    }
+
+    var _b = moveable.state,
+        pos1 = _b.pos1,
+        pos2 = _b.pos2,
+        pos3 = _b.pos3,
+        pos4 = _b.pos4;
+    var linePosFrom1 = getMiddleLinePos(pos1, pos2);
+    var linePosFrom2 = getMiddleLinePos(pos2, pos1);
+    var linePosFrom3 = getMiddleLinePos(pos1, pos3);
+    var linePosFrom4 = getMiddleLinePos(pos3, pos1);
+    var linePosTo1 = getMiddleLinePos(pos3, pos4);
+    var linePosTo2 = getMiddleLinePos(pos4, pos3);
+    var linePosTo3 = getMiddleLinePos(pos2, pos4);
+    var linePosTo4 = getMiddleLinePos(pos4, pos2);
+    return [createElement("div", {
+      className: prefix("line"),
+      key: "middeLine1",
+      style: getLineStyle(linePosFrom1, linePosTo1)
+    }), createElement("div", {
+      className: prefix("line"),
+      key: "middeLine2",
+      style: getLineStyle(linePosFrom2, linePosTo2)
+    }), createElement("div", {
+      className: prefix("line"),
+      key: "middeLine3",
+      style: getLineStyle(linePosFrom3, linePosTo3)
+    }), createElement("div", {
+      className: prefix("line"),
+      key: "middeLine4",
+      style: getLineStyle(linePosFrom4, linePosTo4)
+    })].concat(renderDiagonalDirection(moveable));
+  },
+  dragControlCondition: function (target) {
+    return utils.hasClass(target, prefix("direction"));
+  },
+  dragControlStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        inputTarget = _a.inputEvent.target;
+    var _b = moveable.props,
+        target = _b.target,
+        onWarpStart = _b.onWarpStart;
+    var direction = getDirection(inputTarget);
+
+    if (!direction || !target) {
+      return false;
+    }
+
+    var _c = moveable.state,
+        transformOrigin = _c.transformOrigin,
+        is3d = _c.is3d,
+        targetTransform = _c.targetTransform,
+        targetMatrix = _c.targetMatrix,
+        width = _c.width,
+        height = _c.height;
+    datas.datas = {};
+    datas.targetTransform = targetTransform;
+    datas.targetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4);
+    datas.targetInverseMatrix = ignoreDimension(invert(datas.targetMatrix, 4), 3, 4);
+    datas.direction = direction;
+    setDragStart(moveable, {
+      datas: datas
+    });
+    datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) {
+      return minus(p, transformOrigin);
+    });
+    datas.nextPoses = datas.poses.map(function (_a) {
+      var x = _a[0],
+          y = _a[1];
+      return caculate(datas.targetMatrix, [x, y, 0, 1], 4);
+    });
+    datas.posNum = (direction[0] === -1 ? 0 : 1) + (direction[1] === -1 ? 0 : 2);
+    datas.prevMatrix = createIdentityMatrix(4);
+    var result = onWarpStart && onWarpStart({
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+
+    if (result !== false) {
+      datas.isWarp = true;
+    }
+
+    return result;
+  },
+  dragControl: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        distX = _a.distX,
+        distY = _a.distY;
+    var posNum = datas.posNum,
+        poses = datas.poses,
+        targetInverseMatrix = datas.targetInverseMatrix,
+        prevMatrix = datas.prevMatrix,
+        isWarp = datas.isWarp;
+
+    if (!isWarp) {
+      return false;
+    }
+
+    var _b = moveable.props,
+        target = _b.target,
+        onWarp = _b.onWarp;
+    var dist = getDragDist({
+      datas: datas,
+      distX: distX,
+      distY: distY
+    }, true);
+    var nextPoses = datas.nextPoses.slice();
+    nextPoses[posNum] = [nextPoses[posNum][0] + dist[0], nextPoses[posNum][1] + dist[1]];
+
+    if (!NEARBY_POS.every(function (nearByPoses) {
+      return isValidPos(nearByPoses.map(function (i) {
+        return poses[i];
+      }), nearByPoses.map(function (i) {
+        return nextPoses[i];
+      }));
+    })) {
+      return false;
+    }
+
+    var h = warp(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]);
+
+    if (!h.length) {
+      return false;
+    }
+
+    var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4));
+    var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")";
+    var delta = multiply(invert(prevMatrix, 4), matrix, 4);
+    datas.prevMatrix = matrix;
+    onWarp && onWarp({
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      delta: delta,
+      multiply: multiplyCSS,
+      dist: matrix,
+      transform: transform,
+      datas: datas.datas
+    });
+    return true;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isWarp) {
+      return false;
+    }
+
+    datas.isWarp = false;
+    var _b = moveable.props,
+        target = _b.target,
+        onWarpEnd = _b.onWarpEnd;
+    onWarpEnd && onWarpEnd({
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    });
+    return isDrag;
+  }
+};
+
+var agent = getAgent();
+var isNotSupportTransformOrigin = agent.os.name.indexOf("ios") > -1 || agent.browser.name.indexOf("safari") > -1;
+var PREFIX = "moveable-";
+var MOVEABLE_CSS = frameworkUtils.prefixCSS(PREFIX, "\n{\n\tposition: fixed;\n\twidth: 0;\n\theight: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 3000;\n}\n.control-box {\n    z-index: 0;\n}\n.line, .control {\n\tleft: 0;\n\ttop: 0;\n}\n.control {\n\tposition: absolute;\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n\tbackground: #4af;\n\tmargin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n.line {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tbackground: #4af;\n\ttransform-origin: 0px 0.5px;\n}\n.line.rotation-line {\n\theight: 40px;\n\twidth: 1px;\n\ttransform-origin: 0.5px 39.5px;\n}\n.line.rotation-line .control {\n\tborder-color: #4af;\n\tbackground:#fff;\n\tcursor: alias;\n}\n.control.origin {\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n\tmargin-left: -6px;\n\tpointer-events: none;\n}\n.direction.e, .direction.w {\n\tcursor: ew-resize;\n}\n.direction.s, .direction.n {\n\tcursor: ns-resize;\n}\n.direction.nw, .direction.se, :host.reverse .direction.ne, :host.reverse .direction.sw {\n\tcursor: nwse-resize;\n}\n.direction.ne, .direction.sw, :host.reverse .direction.nw, :host.reverse .direction.se {\n\tcursor: nesw-resize;\n}\n.group {\n    z-index: -1;\n}\n" + (isNotSupportTransformOrigin ? ":global svg *:before {\n\tcontent:\"\";\n\ttransform-origin: inherit;\n}" : "") + "\n");
+var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]];
+var MIN_SCALE = 0.000000001;
+var MOVEABLE_ABLES = [Pinchable, Draggable, Rotatable, Resizable, Scalable, Warpable];
+var MAX_NUM = Math.pow(10, 10);
+var MIN_NUM = -MAX_NUM;
+
+var Origin = {
+  name: "origin",
+  render: function (moveable) {
+    if (!moveable.props.origin) {
+      return null;
+    }
+
+    var beforeOrigin = moveable.state.beforeOrigin;
+    return [// <div className={prefix("control", "origin")} style={getControlTransform(origin)} key="origin"></div>,
+    createElement("div", {
+      className: prefix("control", "origin"),
+      style: getControlTransform(beforeOrigin),
+      key: "beforeOrigin"
+    })];
+  }
+};
+
+function triggerAble(moveable, ableType, eventOperation, prefix, eventType, e) {
+  var eventName = "" + eventOperation + prefix + eventType;
+  var conditionName = "" + eventOperation + prefix + "Condition";
+  var isStart = eventType === "Start";
+  var isGroup = prefix.indexOf("Group") > -1;
+  var ables = moveable[ableType];
+  var results = ables.filter(function (able) {
+    var condition = isStart && able[conditionName];
+
+    if (able[eventName] && (!condition || condition(e.inputEvent.target))) {
+      return able[eventName](moveable, e);
+    }
+
+    return false;
+  });
+
+  if (!isStart && results.length) {
+    if (results.some(function (able) {
+      return able.updateRect;
+    }) && !isGroup) {
+      moveable.updateRect(eventType);
+    } else {
+      moveable.updateTarget(eventType);
+    }
+  }
+}
+
+function getAbleDragger(moveable, target, ableType, prefix) {
+  var options = {
+    container: window
+  };
+  ["drag", "pinch"].forEach(function (eventOperation) {
+    ["Start", "", "End"].forEach(function (eventType) {
+      options["" + eventOperation + eventType.toLowerCase()] = function (e) {
+        return triggerAble(moveable, ableType, eventOperation, prefix, eventType, e);
+      };
+    });
+  });
+  return new Dragger(target, options);
+}
+
+var ControlBoxElement = styled("div", MOVEABLE_CSS);
+
+function renderLine(direction, pos1, pos2) {
+  return createElement("div", {
+    className: prefix("line", "direction", direction),
+    "data-direction": direction,
+    style: getLineStyle(pos1, pos2)
+  });
+}
+
+var MoveableManager =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(MoveableManager, _super);
+
+  function MoveableManager() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      target: null,
+      beforeMatrix: createIdentityMatrix3(),
+      matrix: createIdentityMatrix3(),
+      targetMatrix: createIdentityMatrix3(),
+      targetTransform: "",
+      is3d: false,
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+      transformOrigin: [0, 0],
+      direction: 1,
+      beforeDirection: 1,
+      rotationRad: 0,
+      rotationPos: [0, 0],
+      beforeOrigin: [0, 0],
+      origin: [0, 0],
+      pos1: [0, 0],
+      pos2: [0, 0],
+      pos3: [0, 0],
+      pos4: [0, 0]
+    };
+    _this.targetAbles = [];
+    _this.controlAbles = [];
+    return _this;
+  }
+
+  var __proto = MoveableManager.prototype;
+
+  __proto.render = function () {
+    this.update(false);
+    var _a = this.props,
+        edge = _a.edge,
+        parentPosition = _a.parentPosition;
+
+    var _b = parentPosition || {
+      left: 0,
+      top: 0
+    },
+        parentLeft = _b.left,
+        parentTop = _b.top;
+
+    var _c = this.state,
+        left = _c.left,
+        top = _c.top,
+        pos1 = _c.pos1,
+        pos2 = _c.pos2,
+        pos3 = _c.pos3,
+        pos4 = _c.pos4,
+        target = _c.target,
+        direction = _c.direction;
+    return createElement(ControlBoxElement, {
+      ref: frameworkUtils.ref(this, "controlBox"),
+      className: prefix("control-box", direction === -1 ? "reverse" : ""),
+      style: {
+        position: "absolute",
+        display: target ? "block" : "none",
+        transform: "translate(" + (left - parentLeft) + "px, " + (top - parentTop) + "px) translateZ(50px)"
+      }
+    }, this.renderAbles(), renderLine(edge ? "n" : "", pos1, pos2), renderLine(edge ? "e" : "", pos2, pos4), renderLine(edge ? "w" : "", pos1, pos3), renderLine(edge ? "s" : "", pos3, pos4));
+  };
+
+  __proto.componentDidMount = function () {
+    this.controlBox.getElement();
+    this.update(true);
+  };
+
+  __proto.componentWillUnmount = function () {
+    unset(this, "targetDragger");
+    unset(this, "controlDragger");
+  };
+
+  __proto.getContainer = function () {
+    var _a = this.props,
+        parentMoveable = _a.parentMoveable,
+        container = _a.container;
+    return container || parentMoveable && parentMoveable.getContainer() || this.controlBox.getElement().offsetParent;
+  };
+
+  __proto.isMoveableElement = function (target) {
+    return target && (target.getAttribute("class") || "").indexOf(PREFIX) > -1;
+  };
+
+  __proto.dragStart = function (e) {
+    this.targetDragger.onDragStart(e);
+  };
+
+  __proto.isInside = function (clientX, clientY) {
+    var _a = this.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        pos3 = _a.pos3,
+        pos4 = _a.pos4,
+        target = _a.target;
+
+    if (!target) {
+      return false;
+    }
+
+    var _b = target.getBoundingClientRect(),
+        left = _b.left,
+        top = _b.top;
+
+    var pos = [clientX - left, clientY - top];
+    return isInside(pos, pos1, pos2, pos3, pos4);
+  };
+
+  __proto.updateRect = function (type, isTarget, isSetState) {
+    if (isSetState === void 0) {
+      isSetState = true;
+    }
+
+    var parentMoveable = this.props.parentMoveable;
+    var state = this.state;
+    var target = state.target || this.props.target;
+    this.updateState(getTargetInfo(target, this.getContainer(), isTarget ? state : undefined), parentMoveable ? false : isSetState);
+  };
+
+  __proto.updateTarget = function (type) {
+    this.updateRect(type, true);
+  };
+
+  __proto.update = function (isSetState) {
+    var props = this.props;
+    var target = props.target,
+        parentMoveable = props.parentMoveable;
+    var stateTarget = this.state.target;
+    var controlBox = this.controlBox;
+
+    if (!controlBox || !stateTarget && !target) {
+      return;
+    }
+
+    this.updateAbles();
+    var controlBoxElement = controlBox.getElement();
+    var hasTargetAble = this.targetAbles.length;
+    var hasControlAble = this.controlAbles.length;
+    var isTargetChanged = stateTarget !== target;
+
+    if (isTargetChanged) {
+      this.updateState({
+        target: target
+      });
+    }
+
+    if (!hasTargetAble || isTargetChanged) {
+      unset(this, "targetDragger");
+    }
+
+    if (!hasControlAble) {
+      unset(this, "controlDragger");
+    }
+
+    if (target && (!this.targetDragger && hasTargetAble || isTargetChanged)) {
+      this.targetDragger = getAbleDragger(this, target, "targetAbles", "");
+    }
+
+    if (!this.controlDragger && hasControlAble) {
+      this.controlDragger = getAbleDragger(this, controlBoxElement, "controlAbles", "Control");
+    }
+
+    if (isTargetChanged && !parentMoveable) {
+      this.updateRect("End", false, isSetState);
+    }
+
+    return isTargetChanged;
+  };
+
+  __proto.triggerEvent = function (name, e) {
+    var callback = this.props[name];
+    return callback && callback(e);
+  };
+
+  __proto.updateAbles = function () {
+    var props = this.props;
+    var enabledAbles = props.ables.filter(function (able) {
+      return props[able.name];
+    });
+    var controlAbleOnly = false;
+    var targetAbles = enabledAbles.filter(function (able) {
+      return able.dragStart || able.pinchStart;
+    });
+    var controlAbles = enabledAbles.filter(function (_a) {
+      var dragControlStart = _a.dragControlStart,
+          dragControlOnly = _a.dragControlOnly;
+
+      if (!dragControlStart || dragControlOnly && controlAbleOnly) {
+        return false;
+      }
+
+      if (dragControlOnly) {
+        controlAbleOnly = true;
+      }
+
+      return true;
+    });
+    this.targetAbles = targetAbles;
+    this.controlAbles = controlAbles;
+  };
+
+  __proto.updateState = function (nextState, isSetState) {
+    if (isSetState) {
+      this.setState(nextState);
+    } else {
+      var state = this.state;
+
+      for (var name in nextState) {
+        state[name] = nextState[name];
+      }
+    }
+  };
+
+  __proto.renderAbles = function () {
+    var _this = this;
+
+    var ables = this.props.ables.concat([Origin]);
+    return ables.map(function (_a) {
+      var render = _a.render;
+      return render && render(_this);
+    });
+  };
+
+  MoveableManager.defaultProps = {
+    target: null,
+    container: null,
+    origin: true,
+    keepRatio: true,
+    edge: false,
+    parentMoveable: null,
+    parentPosition: null,
+    ables: []
+  };
+  return MoveableManager;
+}(PureComponent);
+
+var Groupable = {
+  name: "groupable",
+  render: function (moveable) {
+    var targets = moveable.props.targets || [];
+    moveable.moveables = [];
+    var _a = moveable.state,
+        left = _a.left,
+        top = _a.top;
+    var position = {
+      left: left,
+      top: top
+    };
+    return targets.map(function (target, i) {
+      return createElement(MoveableManager, {
+        key: i,
+        ref: frameworkUtils.refs(moveable, "moveables", i),
+        target: target,
+        origin: false,
+        parentMoveable: moveable,
+        parentPosition: position
+      });
+    }).concat([createElement("div", {
+      key: "groupTarget",
+      ref: frameworkUtils.ref(moveable, "groupTargetElement"),
+      className: prefix("group")
+    })]);
+  }
+};
+
+function getMaxPos(poses, index) {
+  return Math.max.apply(Math, poses.map(function (_a) {
+    var pos1 = _a[0],
+        pos2 = _a[1],
+        pos3 = _a[2],
+        pos4 = _a[3];
+    return Math.max(pos1[index], pos2[index], pos3[index], pos4[index]);
+  }));
+}
+
+function getMinPos(poses, index) {
+  return Math.min.apply(Math, poses.map(function (_a) {
+    var pos1 = _a[0],
+        pos2 = _a[1],
+        pos3 = _a[2],
+        pos4 = _a[3];
+    return Math.min(pos1[index], pos2[index], pos3[index], pos4[index]);
+  }));
+}
+
+function getGroupRect(moveables, rotation) {
+  if (!moveables.length) {
+    return [0, 0, 0, 0];
+  }
+
+  var moveablePoses = moveables.map(function (_a) {
+    var _b = _a.state,
+        left = _b.left,
+        top = _b.top,
+        pos1 = _b.pos1,
+        pos2 = _b.pos2,
+        pos3 = _b.pos3,
+        pos4 = _b.pos4;
+    var pos = [left, top];
+    return [sum(pos, pos1), sum(pos, pos2), sum(pos, pos3), sum(pos, pos4)];
+  });
+  var minX = MAX_NUM;
+  var minY = MAX_NUM;
+  var groupWidth = 0;
+  var groupHeight = 0;
+
+  if (rotation % 90) {
+    var rad = rotation / 180 * Math.PI;
+    var a1_1 = Math.tan(rad);
+    var a2_1 = -1 / a1_1;
+    var b1s_1 = [MIN_NUM, MAX_NUM];
+    var b2s_1 = [MIN_NUM, MAX_NUM];
+    moveablePoses.forEach(function (poses) {
+      poses.forEach(function (pos) {
+        // ax + b = y
+        // ㅠ = y - ax
+        var b1 = pos[1] - a1_1 * pos[0];
+        var b2 = pos[1] - a2_1 * pos[0];
+        b1s_1[0] = Math.max(b1s_1[0], b1);
+        b1s_1[1] = Math.min(b1s_1[1], b1);
+        b2s_1[0] = Math.max(b2s_1[0], b2);
+        b2s_1[1] = Math.min(b2s_1[1], b2);
+      });
+    });
+    b1s_1.forEach(function (b1) {
+      // a1x + b1 = a2x + b2
+      b2s_1.forEach(function (b2) {
+        // (a1 - a2)x = b2 - b1
+        var x = (b2 - b1) / (a1_1 - a2_1);
+        var y = a1_1 * x + b1;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+      });
+    });
+    var rotatePoses = moveablePoses.map(function (_a) {
+      var pos1 = _a[0],
+          pos2 = _a[1],
+          pos3 = _a[2],
+          pos4 = _a[3];
+      return [rotate(pos1, -rotation), rotate(pos2, -rotation), rotate(pos3, -rotation), rotate(pos4, -rotation)];
+    });
+    groupWidth = getMaxPos(rotatePoses, 0) - getMinPos(rotatePoses, 0);
+    groupHeight = getMaxPos(rotatePoses, 1) - getMinPos(rotatePoses, 1);
+  } else {
+    minX = getMinPos(moveablePoses, 0);
+    minY = getMinPos(moveablePoses, 1);
+    groupWidth = getMaxPos(moveablePoses, 0) - minX;
+    groupHeight = getMaxPos(moveablePoses, 1) - minY;
+  }
+
+  return [minX, minY, groupWidth, groupHeight];
+}
+
+var MoveableGroup =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(MoveableGroup, _super);
+
+  function MoveableGroup() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.differ = new ChildrenDiffer();
+    _this.moveables = [];
+    _this.rotation = 0;
+    return _this;
+  }
+
+  var __proto = MoveableGroup.prototype;
+
+  __proto.componentDidMount = function () {
+    _super.prototype.componentDidMount.call(this);
+  };
+
+  __proto.componentDidUpdate = function () {
+    this.update(true);
+  };
+
+  __proto.update = function (isSetState) {
+    if (!isSetState) {
+      return;
+    }
+
+    var state = this.state;
+
+    if (!state.target) {
+      state.target = this.groupTargetElement;
+      this.controlBox.getElement().style.display = "block";
+      this.targetDragger = getAbleDragger(this, state.target, "targetAbles", "Group");
+      this.controlDragger = getAbleDragger(this, this.controlBox.getElement(), "controlAbles", "GroupControl");
+    }
+
+    this.updateAbles();
+    this.moveables.forEach(function (moveable) {
+      return moveable.update(false);
+    });
+
+    var _a = this.differ.update(this.props.targets),
+        added = _a.added,
+        changed = _a.changed;
+
+    if (added.length || changed.length) {
+      this.updateRect();
+    }
+
+    return true;
+  };
+
+  __proto.updateRect = function (type, isTarget, isSetState) {
+
+    if (!this.controlBox) {
+      return;
+    }
+
+    this.moveables.forEach(function (moveable) {
+      moveable.updateRect(type, false, false);
+    });
+    var state = this.state;
+    var target = state.target || this.props.target;
+
+    if (!isTarget || type !== "" && this.props.updateGroup) {
+      // reset rotataion
+      this.rotation = 0;
+    }
+
+    var rotation = this.rotation;
+
+    var _a = getGroupRect(this.moveables, rotation),
+        left = _a[0],
+        top = _a[1],
+        width = _a[2],
+        height = _a[3];
+
+    target.style.cssText += "width:" + width + "px; height:" + height + "px;transform:rotate(" + rotation + "deg)";
+    state.width = width;
+    state.height = height;
+    var info = getTargetInfo(target, this.controlBox.getElement(), state);
+    target.style.cssText += "transform: translate(" + -info.left + "px, " + -info.top + "px) rotate(" + rotation + "deg)";
+    this.updateState(__assign$2({}, info, {
+      left: left,
+      top: top
+    }), true);
+  };
+
+  __proto.triggerEvent = function (name, e) {
+    if (name.indexOf("Group") > -1) {
+      return _super.prototype.triggerEvent.call(this, name, e);
+    }
+  };
+
+  __proto.renderAbles = function () {
+    var _this = this;
+
+    var ables = this.props.ables.concat([Groupable, Origin]);
+    return ables.map(function (_a) {
+      var render = _a.render;
+      return render && render(_this);
+    });
+  };
+
+  MoveableGroup.defaultProps = __assign$2({}, MoveableManager.defaultProps, {
+    groupable: true,
+    ables: MOVEABLE_ABLES,
+    targets: []
+  });
+  return MoveableGroup;
+}(MoveableManager);
+
+var Moveable =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(Moveable, _super);
+
+  function Moveable() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  var __proto = Moveable.prototype;
+
+  __proto.render = function () {
+    var target = this.props.target || this.props.targets;
+    var isArr = utils.isArray(target);
+    var isGroup = isArr && target.length > 1;
+
+    if (isGroup) {
+      return createElement(MoveableGroup, __assign$2({
+        key: "group",
+        ref: frameworkUtils.ref(this, "moveable")
+      }, __assign$2({}, this.props, {
+        target: null,
+        targets: target
+      })));
+    } else {
+      var moveableTarget = isArr ? target[0] : target;
+      return createElement(MoveableManager, __assign$2({
+        key: "single",
+        ref: frameworkUtils.ref(this, "moveable")
+      }, __assign$2({}, this.props, {
+        target: moveableTarget
+      })));
+    }
+  };
+
+  __proto.isMoveableElement = function (target) {
+    return this.moveable.isMoveableElement(target);
+  };
+
+  __proto.dragStart = function (e) {
+    this.moveable.dragStart(e);
+  };
+
+  __proto.isInside = function (clientX, clientY) {
+    return this.moveable.isInside(clientX, clientY);
+  };
+
+  __proto.updateRect = function () {
+    this.moveable.updateRect();
+  };
+
+  __proto.updateTarget = function () {
+    this.moveable.updateTarget();
+  };
+
+  Moveable.defaultProps = __assign$2({}, MoveableManager.defaultProps, {
+    ables: MOVEABLE_ABLES
+  });
+  return Moveable;
+}(PureComponent);
+
+var InnerMoveable =
+/*#__PURE__*/
+function (_super) {
+  __extends(InnerMoveable, _super);
+
+  function InnerMoveable(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = {};
+    _this.state = _this.props;
+    return _this;
+  }
+
+  var __proto = InnerMoveable.prototype;
+
+  __proto.render = function () {
+    return h(Moveable, __assign({
+      ref: frameworkUtils.ref(this, "preactMoveable")
+    }, this.state));
+  };
+
+  return InnerMoveable;
+}(Component);
+
+var PROPERTIES = ["draggable", "resizable", "scalable", "rotatable", "warpable", "pinchable", "origin", "target", "edge", "throttleDrag", "throttleResize", "throttleScale", "throttleRotate", "keepRatio"];
+var EVENTS = ["dragStart", "drag", "dragEnd", "resizeStart", "resize", "resizeEnd", "scaleStart", "scale", "scaleEnd", "rotateStart", "rotate", "rotateEnd", "warpStart", "warp", "warpEnd", "pinchStart", "pinch", "pinchEnd", "dragGroupStart", "dragGroup", "dragGroupEnd", "resizeGroupStart", "resizeGroup", "resizeGroupEnd", "scaleGroupStart", "scaleGroup", "scaleGroupEnd", "rotateGroupStart", "rotateGroup", "rotateGroupEnd", "pinchGroupStart", "pinchGroup", "pinchGroupEnd"];
+
+/**
+ * Moveable is Draggable! Resizable! Scalable! Rotatable!
+ * @sort 1
+ * @extends eg.Component
+ */
+
+var Moveable$1 =
+/*#__PURE__*/
+function (_super) {
+  __extends(Moveable, _super);
+  /**
+   *
+   */
+
+
+  function Moveable(parentElement, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var _this = _super.call(this) || this;
+
+    var element = document.createElement("div");
+
+    var nextOptions = __assign({
+      container: parentElement
+    }, options);
+
+    var events = {};
+    EVENTS.forEach(function (name) {
+      events[utils.camelize("on " + name)] = function (e) {
+        return _this.trigger(name, e);
+      };
+    });
+    render(h(InnerMoveable, __assign({
+      ref: frameworkUtils.ref(_this, "innerMoveable")
+    }, nextOptions, events)), element);
+    parentElement.appendChild(element.children[0]);
+    var target = nextOptions.target;
+
+    if (utils.isArray(target) && target.length > 1) {
+      _this.updateRect();
+    }
+
+    return _this;
+  }
+  /**
+   * Check if the target is an element included in the moveable.
+   * @param - the target
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * window.addEventListener("click", e => {
+   *     if (!moveable.isMoveableElement(e.target)) {
+   *         moveable.target = e.target;
+   *     }
+   * });
+   */
+
+
+  var __proto = Moveable.prototype;
+
+  __proto.isMoveableElement = function (target) {
+    return this.getMoveable().isMoveableElement(target);
+  };
+  /**
+   * If the width, height, left, and top of all elements change, update the shape of the moveable.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * window.addEventListener("resize", e => {
+   *     moveable.updateRect();
+   * });
+   */
+
+
+  __proto.updateRect = function () {
+    this.getMoveable().updateRect();
+  };
+  /**
+   * If the width, height, left, and top of the only target change, update the shape of the moveable.
+   * @param - the values of x and y to move moveable.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * moveable.updateTarget();
+   */
+
+
+  __proto.updateTarget = function () {
+    this.getMoveable().updateTarget();
+  };
+  /**
+   * Remove the Moveable object and the events.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * moveable.destroy();
+   */
+
+
+  __proto.destroy = function () {
+    var el = this.getMoveable().base;
+    el.remove ? el.remove() : el.parentElement.removeChild(el);
+    this.off();
+    this.getMoveable().componentWillUnmount();
+    this.innerMoveable = null;
+  };
+
+  __proto.getMoveable = function () {
+    return this.innerMoveable.preactMoveable;
+  };
+
+  Moveable = __decorate([frameworkUtils.Properties(PROPERTIES, function (prototype, property) {
+    Object.defineProperty(prototype, property, {
+      get: function () {
+        return this.getMoveable().props[property];
+      },
+      set: function (value) {
+        var _a;
+
+        this.innerMoveable.setState((_a = {}, _a[property] = value, _a));
+      },
+      enumerable: true,
+      configurable: true
+    });
+  })], Moveable);
+  return Moveable;
+}(EgComponent);
+
+Moveable$1.PROPERTIES = PROPERTIES;
+Moveable$1.EVENTS = EVENTS;
+
+module.exports = Moveable$1;
+//# sourceMappingURL=moveable.cjs.js.map
diff --git a/dist/moveable.cjs.js.map b/dist/moveable.cjs.js.map
new file mode 100644
index 000000000..696359c25
--- /dev/null
+++ b/dist/moveable.cjs.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.cjs.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx","../src/index.umd.ts"],"sourcesContent":["import { Component, h } from \"preact\";\nimport Moveable, { MoveableProps, MoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component<MoveableProps> {\n    public state: MoveableProps = {};\n    public preactMoveable: MoveableInterface;\n    constructor(props: MoveableProps) {\n        super(props);\n        this.state = this.props;\n    }\n    public render() {\n        return <Moveable ref={ref(this, \"preactMoveable\")} {...this.state} />;\n    }\n}\n","import { MoveableEvents } from \"./types\";\n\nexport const PROPERTIES = [\n  \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n  \"warpable\", \"pinchable\", \"origin\", \"target\", \"edge\",\n  \"throttleDrag\", \"throttleResize\", \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n];\nexport const EVENTS: Array<keyof MoveableEvents> = [\n  \"dragStart\",\n  \"drag\",\n  \"dragEnd\",\n  \"resizeStart\",\n  \"resize\",\n  \"resizeEnd\",\n  \"scaleStart\",\n  \"scale\",\n  \"scaleEnd\",\n  \"rotateStart\",\n  \"rotate\",\n  \"rotateEnd\",\n  \"warpStart\",\n  \"warp\",\n  \"warpEnd\",\n  \"pinchStart\",\n  \"pinch\",\n  \"pinchEnd\",\n\n  \"dragGroupStart\",\n  \"dragGroup\",\n  \"dragGroupEnd\",\n  \"resizeGroupStart\",\n  \"resizeGroup\",\n  \"resizeGroupEnd\",\n  \"scaleGroupStart\",\n  \"scaleGroup\",\n  \"scaleGroupEnd\",\n  \"rotateGroupStart\",\n  \"rotateGroup\",\n  \"rotateGroupEnd\",\n  \"pinchGroupStart\",\n  \"pinchGroup\",\n  \"pinchGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n    OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n    OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n    OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n    OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n    OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n    OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n    Object.defineProperty(prototype, property, {\n        get() {\n            return this.getMoveable().props[property];\n        },\n        set(value) {\n            this.innerMoveable.setState({\n                [property]: value,\n            });\n        },\n        enumerable: true,\n        configurable: true,\n    });\n})\nclass Moveable extends EgComponent {\n    private innerMoveable!: InnerMoveable;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n        const nextOptions = { container: parentElement, ...options };\n\n        const events: any = {};\n\n        EVENTS.forEach(name => {\n            events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n        });\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...nextOptions}\n                {...events}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n\n        const target = nextOptions.target!;\n        if (isArray(target) && target.length > 1) {\n            this.updateRect();\n        }\n    }\n    /**\n     * Check if the target is an element included in the moveable.\n     * @param - the target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"click\", e => {\n     *     if (!moveable.isMoveableElement(e.target)) {\n     *         moveable.target = e.target;\n     *     }\n     * });\n     */\n    public isMoveableElement(target: HTMLElement | SVGElement) {\n        return this.getMoveable().isMoveableElement(target);\n    }\n    /**\n     * If the width, height, left, and top of all elements change, update the shape of the moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"resize\", e => {\n     *     moveable.updateRect();\n     * });\n     */\n    public updateRect() {\n        this.getMoveable().updateRect();\n    }\n    /**\n     * If the width, height, left, and top of the only target change, update the shape of the moveable.\n     * @param - the values of x and y to move moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.updateTarget();\n     */\n    public updateTarget(): void {\n        this.getMoveable().updateTarget();\n    }\n    /**\n     * Remove the Moveable object and the events.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.destroy();\n     */\n    public destroy() {\n        const el = this.getMoveable().base;\n\n        el.remove ? el.remove() : el.parentElement.removeChild(el);\n        this.off();\n        this.getMoveable().componentWillUnmount();\n        this.innerMoveable = null;\n    }\n    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n}\n/**\n * Whether or not the origin controlbox will be visible or not\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged.\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized.\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled.\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated.\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped.\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height.\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * hrottle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n/**\n * When the drag starts, the dragStart event is called.\n * @memberof Moveable\n * @event dragStart\n * @param {Moveable.OnDragStart} - Parameters for the dragStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When dragging, the drag event is called.\n * @memberof Moveable\n * @event drag\n * @param {Moveable.OnDrag} - Parameters for the drag event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"drag\", ({ target, transform }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the drag finishes, the dragEnd event is called.\n * @memberof Moveable\n * @event dragEnd\n * @param {Moveable.OnDragEnd} - Parameters for the dragEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n *     target.style.width = `${e.width}px`;\n *     target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n*     console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n *  1, 0, 0, 0,\n *  0, 1, 0, 0,\n *  0, 0, 1, 0,\n *  0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n *    // target.style.transform = transform;\n *    matrix = multiply(matrix, delta);\n *    target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n *     console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n *     console.log(\"onDragGroup\", targets);\n *     events.forEach(ev => {\n *          // drag event\n *          console.log(\"onDrag left, top\", ev.left, ev.top);\n *          // ev.target!.style.left = `${ev.left}px`;\n *          // ev.target!.style.top = `${ev.top}px`;\n *          console.log(\"onDrag translate\", ev.dist);\n *          ev.target!.style.transform = ev.transform;)\n *     });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n *     console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n *     console.log(\"onResizeGroup\", targets);\n *     events.forEach(ev => {\n *         const offset = [\n *             direction[0] < 0 ? -ev.delta[0] : 0,\n *             direction[1] < 0 ? -ev.delta[1] : 0,\n *         ];\n *         // ev.drag is a drag event that occurs when the group resize.\n *         const left = offset[0] + ev.drag.beforeDist[0];\n *         const top = offset[1] + ev.drag.beforeDist[1];\n *         const width = ev.width;\n *         const top = ev.top;\n *     });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n *     console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n *     console.log(\"onScaleGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group scale.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[0];\n *         const scaleX = ev.scale[0];\n *         const scaleX = ev.scale[1];\n *     });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n *     console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n *     console.log(\"onRotateGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group rotate.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[1];\n *         const deg = ev.beforeDist;\n *     });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n *     console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n /**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n *     console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\ninterface Moveable extends MoveableGetterSetter {\n    on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n    on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n    on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n\n    on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n    on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n    on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n\n    on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n    on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n    on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n\n    on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n    on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n    on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n\n    on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n    on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n    on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n    on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n    on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n    on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n\n    on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n    on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n    on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n    on(eventName: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n    on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n    on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n    on(eventName: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n    on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n    on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n    on(eventName: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n    on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n    on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n    on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n    on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n    on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n    on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n    on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n","import Moveable from \"./Moveable\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\n\n(Moveable as any).PROPERTIES = PROPERTIES;\n(Moveable as any).EVENTS = EVENTS;\n\nexport default Moveable;\n"],"names":["tslib_1","props","_super","_this","state","h","Moveable","ref","Component","PROPERTIES","EVENTS","parentElement","options","element","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","appendChild","children","target","isArray","length","updateRect","getMoveable","isMoveableElement","updateTarget","el","base","remove","removeChild","off","componentWillUnmount","innerMoveable","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","setState","_a","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;EAA2CA,SAAA,cAAA,QAAA;;wBAGvC,CAAYC,KAAZ;gBACIC,WAAA,KAAA,EAAMD,KAAN,SADJ;;IAFOE,WAAA,GAAuB,EAAvB;IAIHA,KAAI,CAACC,KAAL,GAAaD,KAAI,CAACF,KAAlB;;;;;;gBAEG,GAAP;WACWI,EAACC;MAASC,GAAG,EAAEA,kBAAG,CAAC,IAAD,EAAO,gBAAP;OAA8B,KAAKH,OAA5D;GADG;;sBAGX;EAV2CI,UAA3C;;ACFO,IAAMC,UAAU,GAAG,CACxB,WADwB,EACX,WADW,EACE,UADF,EACc,WADd,EAExB,UAFwB,EAEZ,WAFY,EAEC,QAFD,EAEW,QAFX,EAEqB,MAFrB,EAGxB,cAHwB,EAGR,gBAHQ,EAGU,eAHV,EAG2B,gBAH3B,EAG6C,WAH7C,CAAnB;AAKP,AAAO,IAAMC,MAAM,GAAgC,CACjD,WADiD,EAEjD,MAFiD,EAGjD,SAHiD,EAIjD,aAJiD,EAKjD,QALiD,EAMjD,WANiD,EAOjD,YAPiD,EAQjD,OARiD,EASjD,UATiD,EAUjD,aAViD,EAWjD,QAXiD,EAYjD,WAZiD,EAajD,WAbiD,EAcjD,MAdiD,EAejD,SAfiD,EAgBjD,YAhBiD,EAiBjD,OAjBiD,EAkBjD,UAlBiD,EAoBjD,gBApBiD,EAqBjD,WArBiD,EAsBjD,cAtBiD,EAuBjD,kBAvBiD,EAwBjD,aAxBiD,EAyBjD,gBAzBiD,EA0BjD,iBA1BiD,EA2BjD,YA3BiD,EA4BjD,eA5BiD,EA6BjD,kBA7BiD,EA8BjD,aA9BiD,EA+BjD,gBA/BiD,EAgCjD,iBAhCiD,EAiCjD,YAjCiD,EAkCjD,eAlCiD,CAA5C;;ACYP;;;;;;AAmBA;;;EAAuBV,SAAA,SAAA,QAAA;;;;;;mBAMnB,CAAYW,aAAZ,EAAqDC,OAArD;0BAAqD,EAAA;MAAAA,YAAA;;;gBACjDV,WAAA,KAAA,SADJ;;QAEUW,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;;QACMC,WAAW;MAAKC,SAAS,EAAEN;OAAkBC,QAAnD;;QAEMM,MAAM,GAAQ,EAApB;IAEAR,MAAM,CAACS,OAAP,CAAe,UAAAC,IAAA;MACXF,MAAM,CAACG,cAAQ,CAAC,QAAMD,IAAP,CAAT,CAAN,GAAiC,UAACE,CAAD;eAAYnB,KAAI,CAACoB,OAAL,CAAaH,IAAb,EAAmBE,CAAnB,CAAA;OAA7C;KADJ;IAIAE,MAAM,CACFnB,EAACoB;MACGlB,GAAG,EAAEA,kBAAG,CAACJ,KAAD,EAAO,eAAP;OACJa,aACAE,QAJN,EAMFL,OANE,CAAN;IAQAF,aAAa,CAACe,WAAd,CAA0Bb,OAAO,CAACc,QAAR,CAAiB,CAAjB,CAA1B;QAEMC,MAAM,GAAGZ,WAAW,CAACY,MAA3B;;QACIC,aAAO,CAACD,MAAD,CAAP,IAAmBA,MAAM,CAACE,MAAP,GAAgB,CAAvC,EAA0C;MACtC3B,KAAI,CAAC4B,UAAL;;;;;;;;;;;;;;;;;;;;;;;2BAiBD,GAAP,UAAyBH,MAAzB;WACW,KAAKI,WAAL,GAAmBC,iBAAnB,CAAqCL,MAArC,CAAP;GADG;;;;;;;;;;;;;;oBAcA,GAAP;SACSI,WAAL,GAAmBD,UAAnB;GADG;;;;;;;;;;;;;sBAaA,GAAP;SACSC,WAAL,GAAmBE,YAAnB;GADG;;;;;;;;;;;;iBAYA,GAAP;QACUC,EAAE,GAAG,KAAKH,WAAL,GAAmBI,IAA9B;IAEAD,EAAE,CAACE,MAAH,GAAYF,EAAE,CAACE,MAAH,EAAZ,GAA0BF,EAAE,CAACxB,aAAH,CAAiB2B,WAAjB,CAA6BH,EAA7B,CAA1B;SACKI,GAAL;SACKP,WAAL,GAAmBQ,oBAAnB;SACKC,aAAL,GAAqB,IAArB;GANG;;qBAQC,GAAR;WACW,KAAKA,aAAL,CAAmBC,cAA1B;GADI;;EA7FNpC,QAAQ,eAdbqC,yBAAU,CAAClC,UAAD,EAAa,UAACmC,SAAD,EAAYC,QAAZ;IACpBC,MAAM,CAACC,cAAP,CAAsBH,SAAtB,EAAiCC,QAAjC,EAA2C;MACvCG,GAAG;eACQ,KAAKhB,WAAL,GAAmB/B,KAAnB,CAAyB4C,QAAzB,CAAP;OAFmC;MAIvCI,GAAG,YAACC;;;aACKT,aAAL,CAAmBU,QAAnB,WACIC,GAACP,SAAD,GAAYK,SADhB;OALmC;MASvCG,UAAU,EAAE,IAT2B;MAUvCC,YAAY,EAAE;KAVlB;GADO,IAcLhD,SAAA;iBAgGN;EAhGuBiD,YAAvB;;ACnCCjD,UAAgB,CAACG,UAAjB,GAA8BA,UAA9B;AACAH,UAAgB,CAACI,MAAjB,GAA0BA,MAA1B;;;;"}
\ No newline at end of file
diff --git a/dist/moveable.esm.js b/dist/moveable.esm.js
new file mode 100644
index 000000000..137ec3009
--- /dev/null
+++ b/dist/moveable.esm.js
@@ -0,0 +1,4711 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.7.2
+*/
+import EgComponent from '@egjs/component';
+import { prefixCSS, ref, prefixNames, refs, Properties } from 'framework-utils';
+import getAgent from '@egjs/agent';
+import { isArray, isUndefined, hasClass, dot, splitUnit, isObject, splitBracket, camelize } from '@daybrush/utils';
+import Dragger from '@daybrush/drag';
+import ChildrenDiffer from '@egjs/children-differ';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+var VNode = function VNode() {};
+
+var options = {};
+
+var stack = [];
+
+var EMPTY_CHILDREN = [];
+
+function h(nodeName, attributes) {
+	var children = EMPTY_CHILDREN,
+	    lastSimple,
+	    child,
+	    simple,
+	    i;
+	for (i = arguments.length; i-- > 2;) {
+		stack.push(arguments[i]);
+	}
+	if (attributes && attributes.children != null) {
+		if (!stack.length) stack.push(attributes.children);
+		delete attributes.children;
+	}
+	while (stack.length) {
+		if ((child = stack.pop()) && child.pop !== undefined) {
+			for (i = child.length; i--;) {
+				stack.push(child[i]);
+			}
+		} else {
+			if (typeof child === 'boolean') child = null;
+
+			if (simple = typeof nodeName !== 'function') {
+				if (child == null) child = '';else if (typeof child === 'number') child = String(child);else if (typeof child !== 'string') simple = false;
+			}
+
+			if (simple && lastSimple) {
+				children[children.length - 1] += child;
+			} else if (children === EMPTY_CHILDREN) {
+				children = [child];
+			} else {
+				children.push(child);
+			}
+
+			lastSimple = simple;
+		}
+	}
+
+	var p = new VNode();
+	p.nodeName = nodeName;
+	p.children = children;
+	p.attributes = attributes == null ? undefined : attributes;
+	p.key = attributes == null ? undefined : attributes.key;
+
+	if (options.vnode !== undefined) options.vnode(p);
+
+	return p;
+}
+
+function extend(obj, props) {
+  for (var i in props) {
+    obj[i] = props[i];
+  }return obj;
+}
+
+function applyRef(ref, value) {
+  if (ref) {
+    if (typeof ref == 'function') ref(value);else ref.current = value;
+  }
+}
+
+var defer = typeof Promise == 'function' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout;
+
+var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
+
+var items = [];
+
+function enqueueRender(component) {
+	if (!component._dirty && (component._dirty = true) && items.push(component) == 1) {
+		( defer)(rerender);
+	}
+}
+
+function rerender() {
+	var p;
+	while (p = items.pop()) {
+		if (p._dirty) renderComponent(p);
+	}
+}
+
+function isSameNodeType(node, vnode, hydrating) {
+	if (typeof vnode === 'string' || typeof vnode === 'number') {
+		return node.splitText !== undefined;
+	}
+	if (typeof vnode.nodeName === 'string') {
+		return !node._componentConstructor && isNamedNode(node, vnode.nodeName);
+	}
+	return hydrating || node._componentConstructor === vnode.nodeName;
+}
+
+function isNamedNode(node, nodeName) {
+	return node.normalizedNodeName === nodeName || node.nodeName.toLowerCase() === nodeName.toLowerCase();
+}
+
+function getNodeProps(vnode) {
+	var props = extend({}, vnode.attributes);
+	props.children = vnode.children;
+
+	var defaultProps = vnode.nodeName.defaultProps;
+	if (defaultProps !== undefined) {
+		for (var i in defaultProps) {
+			if (props[i] === undefined) {
+				props[i] = defaultProps[i];
+			}
+		}
+	}
+
+	return props;
+}
+
+function createNode(nodeName, isSvg) {
+	var node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName);
+	node.normalizedNodeName = nodeName;
+	return node;
+}
+
+function removeNode(node) {
+	var parentNode = node.parentNode;
+	if (parentNode) parentNode.removeChild(node);
+}
+
+function setAccessor(node, name, old, value, isSvg) {
+	if (name === 'className') name = 'class';
+
+	if (name === 'key') ; else if (name === 'ref') {
+		applyRef(old, null);
+		applyRef(value, node);
+	} else if (name === 'class' && !isSvg) {
+		node.className = value || '';
+	} else if (name === 'style') {
+		if (!value || typeof value === 'string' || typeof old === 'string') {
+			node.style.cssText = value || '';
+		}
+		if (value && typeof value === 'object') {
+			if (typeof old !== 'string') {
+				for (var i in old) {
+					if (!(i in value)) node.style[i] = '';
+				}
+			}
+			for (var i in value) {
+				node.style[i] = typeof value[i] === 'number' && IS_NON_DIMENSIONAL.test(i) === false ? value[i] + 'px' : value[i];
+			}
+		}
+	} else if (name === 'dangerouslySetInnerHTML') {
+		if (value) node.innerHTML = value.__html || '';
+	} else if (name[0] == 'o' && name[1] == 'n') {
+		var useCapture = name !== (name = name.replace(/Capture$/, ''));
+		name = name.toLowerCase().substring(2);
+		if (value) {
+			if (!old) node.addEventListener(name, eventProxy, useCapture);
+		} else {
+			node.removeEventListener(name, eventProxy, useCapture);
+		}
+		(node._listeners || (node._listeners = {}))[name] = value;
+	} else if (name !== 'list' && name !== 'type' && !isSvg && name in node) {
+		try {
+			node[name] = value == null ? '' : value;
+		} catch (e) {}
+		if ((value == null || value === false) && name != 'spellcheck') node.removeAttribute(name);
+	} else {
+		var ns = isSvg && name !== (name = name.replace(/^xlink:?/, ''));
+
+		if (value == null || value === false) {
+			if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());else node.removeAttribute(name);
+		} else if (typeof value !== 'function') {
+			if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value);
+		}
+	}
+}
+
+function eventProxy(e) {
+	return this._listeners[e.type](options.event && options.event(e) || e);
+}
+
+var mounts = [];
+
+var diffLevel = 0;
+
+var isSvgMode = false;
+
+var hydrating = false;
+
+function flushMounts() {
+	var c;
+	while (c = mounts.shift()) {
+		if (c.componentDidMount) c.componentDidMount();
+	}
+}
+
+function diff(dom, vnode, context, mountAll, parent, componentRoot) {
+	if (!diffLevel++) {
+		isSvgMode = parent != null && parent.ownerSVGElement !== undefined;
+
+		hydrating = dom != null && !('__preactattr_' in dom);
+	}
+
+	var ret = idiff(dom, vnode, context, mountAll, componentRoot);
+
+	if (parent && ret.parentNode !== parent) parent.appendChild(ret);
+
+	if (! --diffLevel) {
+		hydrating = false;
+
+		if (!componentRoot) flushMounts();
+	}
+
+	return ret;
+}
+
+function idiff(dom, vnode, context, mountAll, componentRoot) {
+	var out = dom,
+	    prevSvgMode = isSvgMode;
+
+	if (vnode == null || typeof vnode === 'boolean') vnode = '';
+
+	if (typeof vnode === 'string' || typeof vnode === 'number') {
+		if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
+			if (dom.nodeValue != vnode) {
+				dom.nodeValue = vnode;
+			}
+		} else {
+			out = document.createTextNode(vnode);
+			if (dom) {
+				if (dom.parentNode) dom.parentNode.replaceChild(out, dom);
+				recollectNodeTree(dom, true);
+			}
+		}
+
+		out['__preactattr_'] = true;
+
+		return out;
+	}
+
+	var vnodeName = vnode.nodeName;
+	if (typeof vnodeName === 'function') {
+		return buildComponentFromVNode(dom, vnode, context, mountAll);
+	}
+
+	isSvgMode = vnodeName === 'svg' ? true : vnodeName === 'foreignObject' ? false : isSvgMode;
+
+	vnodeName = String(vnodeName);
+	if (!dom || !isNamedNode(dom, vnodeName)) {
+		out = createNode(vnodeName, isSvgMode);
+
+		if (dom) {
+			while (dom.firstChild) {
+				out.appendChild(dom.firstChild);
+			}
+			if (dom.parentNode) dom.parentNode.replaceChild(out, dom);
+
+			recollectNodeTree(dom, true);
+		}
+	}
+
+	var fc = out.firstChild,
+	    props = out['__preactattr_'],
+	    vchildren = vnode.children;
+
+	if (props == null) {
+		props = out['__preactattr_'] = {};
+		for (var a = out.attributes, i = a.length; i--;) {
+			props[a[i].name] = a[i].value;
+		}
+	}
+
+	if (!hydrating && vchildren && vchildren.length === 1 && typeof vchildren[0] === 'string' && fc != null && fc.splitText !== undefined && fc.nextSibling == null) {
+		if (fc.nodeValue != vchildren[0]) {
+			fc.nodeValue = vchildren[0];
+		}
+	} else if (vchildren && vchildren.length || fc != null) {
+			innerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML != null);
+		}
+
+	diffAttributes(out, vnode.attributes, props);
+
+	isSvgMode = prevSvgMode;
+
+	return out;
+}
+
+function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {
+	var originalChildren = dom.childNodes,
+	    children = [],
+	    keyed = {},
+	    keyedLen = 0,
+	    min = 0,
+	    len = originalChildren.length,
+	    childrenLen = 0,
+	    vlen = vchildren ? vchildren.length : 0,
+	    j,
+	    c,
+	    f,
+	    vchild,
+	    child;
+
+	if (len !== 0) {
+		for (var i = 0; i < len; i++) {
+			var _child = originalChildren[i],
+			    props = _child['__preactattr_'],
+			    key = vlen && props ? _child._component ? _child._component.__key : props.key : null;
+			if (key != null) {
+				keyedLen++;
+				keyed[key] = _child;
+			} else if (props || (_child.splitText !== undefined ? isHydrating ? _child.nodeValue.trim() : true : isHydrating)) {
+				children[childrenLen++] = _child;
+			}
+		}
+	}
+
+	if (vlen !== 0) {
+		for (var i = 0; i < vlen; i++) {
+			vchild = vchildren[i];
+			child = null;
+
+			var key = vchild.key;
+			if (key != null) {
+				if (keyedLen && keyed[key] !== undefined) {
+					child = keyed[key];
+					keyed[key] = undefined;
+					keyedLen--;
+				}
+			} else if (min < childrenLen) {
+					for (j = min; j < childrenLen; j++) {
+						if (children[j] !== undefined && isSameNodeType(c = children[j], vchild, isHydrating)) {
+							child = c;
+							children[j] = undefined;
+							if (j === childrenLen - 1) childrenLen--;
+							if (j === min) min++;
+							break;
+						}
+					}
+				}
+
+			child = idiff(child, vchild, context, mountAll);
+
+			f = originalChildren[i];
+			if (child && child !== dom && child !== f) {
+				if (f == null) {
+					dom.appendChild(child);
+				} else if (child === f.nextSibling) {
+					removeNode(f);
+				} else {
+					dom.insertBefore(child, f);
+				}
+			}
+		}
+	}
+
+	if (keyedLen) {
+		for (var i in keyed) {
+			if (keyed[i] !== undefined) recollectNodeTree(keyed[i], false);
+		}
+	}
+
+	while (min <= childrenLen) {
+		if ((child = children[childrenLen--]) !== undefined) recollectNodeTree(child, false);
+	}
+}
+
+function recollectNodeTree(node, unmountOnly) {
+	var component = node._component;
+	if (component) {
+		unmountComponent(component);
+	} else {
+		if (node['__preactattr_'] != null) applyRef(node['__preactattr_'].ref, null);
+
+		if (unmountOnly === false || node['__preactattr_'] == null) {
+			removeNode(node);
+		}
+
+		removeChildren(node);
+	}
+}
+
+function removeChildren(node) {
+	node = node.lastChild;
+	while (node) {
+		var next = node.previousSibling;
+		recollectNodeTree(node, true);
+		node = next;
+	}
+}
+
+function diffAttributes(dom, attrs, old) {
+	var name;
+
+	for (name in old) {
+		if (!(attrs && attrs[name] != null) && old[name] != null) {
+			setAccessor(dom, name, old[name], old[name] = undefined, isSvgMode);
+		}
+	}
+
+	for (name in attrs) {
+		if (name !== 'children' && name !== 'innerHTML' && (!(name in old) || attrs[name] !== (name === 'value' || name === 'checked' ? dom[name] : old[name]))) {
+			setAccessor(dom, name, old[name], old[name] = attrs[name], isSvgMode);
+		}
+	}
+}
+
+var recyclerComponents = [];
+
+function createComponent(Ctor, props, context) {
+	var inst,
+	    i = recyclerComponents.length;
+
+	if (Ctor.prototype && Ctor.prototype.render) {
+		inst = new Ctor(props, context);
+		Component.call(inst, props, context);
+	} else {
+		inst = new Component(props, context);
+		inst.constructor = Ctor;
+		inst.render = doRender;
+	}
+
+	while (i--) {
+		if (recyclerComponents[i].constructor === Ctor) {
+			inst.nextBase = recyclerComponents[i].nextBase;
+			recyclerComponents.splice(i, 1);
+			return inst;
+		}
+	}
+
+	return inst;
+}
+
+function doRender(props, state, context) {
+	return this.constructor(props, context);
+}
+
+function setComponentProps(component, props, renderMode, context, mountAll) {
+	if (component._disable) return;
+	component._disable = true;
+
+	component.__ref = props.ref;
+	component.__key = props.key;
+	delete props.ref;
+	delete props.key;
+
+	if (typeof component.constructor.getDerivedStateFromProps === 'undefined') {
+		if (!component.base || mountAll) {
+			if (component.componentWillMount) component.componentWillMount();
+		} else if (component.componentWillReceiveProps) {
+			component.componentWillReceiveProps(props, context);
+		}
+	}
+
+	if (context && context !== component.context) {
+		if (!component.prevContext) component.prevContext = component.context;
+		component.context = context;
+	}
+
+	if (!component.prevProps) component.prevProps = component.props;
+	component.props = props;
+
+	component._disable = false;
+
+	if (renderMode !== 0) {
+		if (renderMode === 1 || options.syncComponentUpdates !== false || !component.base) {
+			renderComponent(component, 1, mountAll);
+		} else {
+			enqueueRender(component);
+		}
+	}
+
+	applyRef(component.__ref, component);
+}
+
+function renderComponent(component, renderMode, mountAll, isChild) {
+	if (component._disable) return;
+
+	var props = component.props,
+	    state = component.state,
+	    context = component.context,
+	    previousProps = component.prevProps || props,
+	    previousState = component.prevState || state,
+	    previousContext = component.prevContext || context,
+	    isUpdate = component.base,
+	    nextBase = component.nextBase,
+	    initialBase = isUpdate || nextBase,
+	    initialChildComponent = component._component,
+	    skip = false,
+	    snapshot = previousContext,
+	    rendered,
+	    inst,
+	    cbase;
+
+	if (component.constructor.getDerivedStateFromProps) {
+		state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
+		component.state = state;
+	}
+
+	if (isUpdate) {
+		component.props = previousProps;
+		component.state = previousState;
+		component.context = previousContext;
+		if (renderMode !== 2 && component.shouldComponentUpdate && component.shouldComponentUpdate(props, state, context) === false) {
+			skip = true;
+		} else if (component.componentWillUpdate) {
+			component.componentWillUpdate(props, state, context);
+		}
+		component.props = props;
+		component.state = state;
+		component.context = context;
+	}
+
+	component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
+	component._dirty = false;
+
+	if (!skip) {
+		rendered = component.render(props, state, context);
+
+		if (component.getChildContext) {
+			context = extend(extend({}, context), component.getChildContext());
+		}
+
+		if (isUpdate && component.getSnapshotBeforeUpdate) {
+			snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
+		}
+
+		var childComponent = rendered && rendered.nodeName,
+		    toUnmount,
+		    base;
+
+		if (typeof childComponent === 'function') {
+
+			var childProps = getNodeProps(rendered);
+			inst = initialChildComponent;
+
+			if (inst && inst.constructor === childComponent && childProps.key == inst.__key) {
+				setComponentProps(inst, childProps, 1, context, false);
+			} else {
+				toUnmount = inst;
+
+				component._component = inst = createComponent(childComponent, childProps, context);
+				inst.nextBase = inst.nextBase || nextBase;
+				inst._parentComponent = component;
+				setComponentProps(inst, childProps, 0, context, false);
+				renderComponent(inst, 1, mountAll, true);
+			}
+
+			base = inst.base;
+		} else {
+			cbase = initialBase;
+
+			toUnmount = initialChildComponent;
+			if (toUnmount) {
+				cbase = component._component = null;
+			}
+
+			if (initialBase || renderMode === 1) {
+				if (cbase) cbase._component = null;
+				base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, true);
+			}
+		}
+
+		if (initialBase && base !== initialBase && inst !== initialChildComponent) {
+			var baseParent = initialBase.parentNode;
+			if (baseParent && base !== baseParent) {
+				baseParent.replaceChild(base, initialBase);
+
+				if (!toUnmount) {
+					initialBase._component = null;
+					recollectNodeTree(initialBase, false);
+				}
+			}
+		}
+
+		if (toUnmount) {
+			unmountComponent(toUnmount);
+		}
+
+		component.base = base;
+		if (base && !isChild) {
+			var componentRef = component,
+			    t = component;
+			while (t = t._parentComponent) {
+				(componentRef = t).base = base;
+			}
+			base._component = componentRef;
+			base._componentConstructor = componentRef.constructor;
+		}
+	}
+
+	if (!isUpdate || mountAll) {
+		mounts.push(component);
+	} else if (!skip) {
+
+		if (component.componentDidUpdate) {
+			component.componentDidUpdate(previousProps, previousState, snapshot);
+		}
+	}
+
+	while (component._renderCallbacks.length) {
+		component._renderCallbacks.pop().call(component);
+	}if (!diffLevel && !isChild) flushMounts();
+}
+
+function buildComponentFromVNode(dom, vnode, context, mountAll) {
+	var c = dom && dom._component,
+	    originalComponent = c,
+	    oldDom = dom,
+	    isDirectOwner = c && dom._componentConstructor === vnode.nodeName,
+	    isOwner = isDirectOwner,
+	    props = getNodeProps(vnode);
+	while (c && !isOwner && (c = c._parentComponent)) {
+		isOwner = c.constructor === vnode.nodeName;
+	}
+
+	if (c && isOwner && (!mountAll || c._component)) {
+		setComponentProps(c, props, 3, context, mountAll);
+		dom = c.base;
+	} else {
+		if (originalComponent && !isDirectOwner) {
+			unmountComponent(originalComponent);
+			dom = oldDom = null;
+		}
+
+		c = createComponent(vnode.nodeName, props, context);
+		if (dom && !c.nextBase) {
+			c.nextBase = dom;
+
+			oldDom = null;
+		}
+		setComponentProps(c, props, 1, context, mountAll);
+		dom = c.base;
+
+		if (oldDom && dom !== oldDom) {
+			oldDom._component = null;
+			recollectNodeTree(oldDom, false);
+		}
+	}
+
+	return dom;
+}
+
+function unmountComponent(component) {
+
+	var base = component.base;
+
+	component._disable = true;
+
+	if (component.componentWillUnmount) component.componentWillUnmount();
+
+	component.base = null;
+
+	var inner = component._component;
+	if (inner) {
+		unmountComponent(inner);
+	} else if (base) {
+		if (base['__preactattr_'] != null) applyRef(base['__preactattr_'].ref, null);
+
+		component.nextBase = base;
+
+		removeNode(base);
+		recyclerComponents.push(component);
+
+		removeChildren(base);
+	}
+
+	applyRef(component.__ref, null);
+}
+
+function Component(props, context) {
+	this._dirty = true;
+
+	this.context = context;
+
+	this.props = props;
+
+	this.state = this.state || {};
+
+	this._renderCallbacks = [];
+}
+
+extend(Component.prototype, {
+	setState: function setState(state, callback) {
+		if (!this.prevState) this.prevState = this.state;
+		this.state = extend(extend({}, this.state), typeof state === 'function' ? state(this.state, this.props) : state);
+		if (callback) this._renderCallbacks.push(callback);
+		enqueueRender(this);
+	},
+	forceUpdate: function forceUpdate(callback) {
+		if (callback) this._renderCallbacks.push(callback);
+		renderComponent(this, 2);
+	},
+	render: function render() {}
+});
+
+function render(vnode, parent, merge) {
+  return diff(merge, vnode, {}, false, parent, false);
+}
+
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+var ELEMENTS = 'a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr circle clipPath defs ellipse g image line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan'.split(
+	' '
+);
+
+var REACT_ELEMENT_TYPE = (typeof Symbol !== 'undefined' && Symbol.for && Symbol.for('react.element')) || 0xeac7;
+
+var COMPONENT_WRAPPER_KEY =
+	typeof Symbol !== 'undefined' && Symbol.for ? Symbol.for('__preactCompatWrapper') : '__preactCompatWrapper';
+
+// don't autobind these methods since they already have guaranteed context.
+var AUTOBIND_BLACKLIST = {
+	constructor: 1,
+	render: 1,
+	shouldComponentUpdate: 1,
+	componentWillReceiveProps: 1,
+	componentWillUpdate: 1,
+	componentDidUpdate: 1,
+	componentWillMount: 1,
+	componentDidMount: 1,
+	componentWillUnmount: 1,
+	componentDidUnmount: 1
+};
+
+var CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/;
+
+var BYPASS_HOOK = {};
+
+/*global process*/
+var DEV = false;
+try {
+	DEV = process.env.NODE_ENV !== 'production';
+}
+catch (e) { }
+
+// make react think we're react.
+var VNode$1 = h('a', null).constructor;
+VNode$1.prototype.$$typeof = REACT_ELEMENT_TYPE;
+VNode$1.prototype.preactCompatUpgraded = false;
+VNode$1.prototype.preactCompatNormalized = false;
+
+Object.defineProperty(VNode$1.prototype, 'type', {
+	get: function() {
+		return this.nodeName;
+	},
+	set: function(v) {
+		this.nodeName = v;
+	},
+	configurable: true
+});
+
+Object.defineProperty(VNode$1.prototype, 'props', {
+	get: function() {
+		return this.attributes;
+	},
+	set: function(v) {
+		this.attributes = v;
+	},
+	configurable: true
+});
+
+var oldEventHook = options.event;
+options.event = function (e) {
+	if (oldEventHook) { e = oldEventHook(e); }
+	e.persist = Object;
+	e.nativeEvent = e;
+	return e;
+};
+
+var oldVnodeHook = options.vnode;
+options.vnode = function (vnode) {
+	if (!vnode.preactCompatUpgraded) {
+		vnode.preactCompatUpgraded = true;
+
+		var tag = vnode.nodeName,
+			attrs = (vnode.attributes = vnode.attributes == null ? {} : extend$1({}, vnode.attributes));
+
+		if (typeof tag === 'function') {
+			if (tag[COMPONENT_WRAPPER_KEY] === true || (tag.prototype && 'isReactComponent' in tag.prototype)) {
+				if (vnode.children && String(vnode.children) === '') { vnode.children = undefined; }
+				if (vnode.children) { attrs.children = vnode.children; }
+
+				if (!vnode.preactCompatNormalized) {
+					normalizeVNode(vnode);
+				}
+				handleComponentVNode(vnode);
+			}
+		}
+		else {
+			if (vnode.children && String(vnode.children) === '') { vnode.children = undefined; }
+			if (vnode.children) { attrs.children = vnode.children; }
+
+			if (attrs.defaultValue) {
+				if (!attrs.value && attrs.value !== 0) {
+					attrs.value = attrs.defaultValue;
+				}
+				delete attrs.defaultValue;
+			}
+
+			handleElementVNode(vnode, attrs);
+		}
+	}
+
+	if (oldVnodeHook) { oldVnodeHook(vnode); }
+};
+
+function handleComponentVNode(vnode) {
+	var tag = vnode.nodeName,
+		a = vnode.attributes;
+
+	vnode.attributes = {};
+	if (tag.defaultProps) { extend$1(vnode.attributes, tag.defaultProps); }
+	if (a) { extend$1(vnode.attributes, a); }
+}
+
+function handleElementVNode(vnode, a) {
+	var shouldSanitize, attrs, i;
+	if (a) {
+		for (i in a) { if ((shouldSanitize = CAMEL_PROPS.test(i))) { break; } }
+		if (shouldSanitize) {
+			attrs = vnode.attributes = {};
+			for (i in a) {
+				if (a.hasOwnProperty(i)) {
+					attrs[CAMEL_PROPS.test(i) ? i.replace(/([A-Z0-9])/, '-$1').toLowerCase() : i] = a[i];
+				}
+			}
+		}
+	}
+}
+
+var ContextProvider = function () {};
+
+ContextProvider.prototype.getChildContext = function () {
+	return this.props.context;
+};
+ContextProvider.prototype.render = function (props) {
+	return props.children[0];
+};
+
+var ARR = [];
+
+/** Track current render() component for ref assignment */
+var currentComponent;
+
+function createFactory(type) {
+	return createElement.bind(null, type);
+}
+
+var DOM = {};
+for (var i = ELEMENTS.length; i--;) {
+	DOM[ELEMENTS[i]] = createFactory(ELEMENTS[i]);
+}
+
+function upgradeToVNodes(arr, offset) {
+	for (var i = offset || 0; i < arr.length; i++) {
+		var obj = arr[i];
+		if (Array.isArray(obj)) {
+			upgradeToVNodes(obj);
+		}
+		else if (
+			obj &&
+			typeof obj === 'object' &&
+			!isValidElement(obj) &&
+			((obj.props && obj.type) || (obj.attributes && obj.nodeName) || obj.children)
+		) {
+			arr[i] = createElement(obj.type || obj.nodeName, obj.props || obj.attributes, obj.children);
+		}
+	}
+}
+
+function isStatelessComponent(c) {
+	return typeof c === 'function' && !(c.prototype && c.prototype.render);
+}
+
+// wraps stateless functional components in a PropTypes validator
+function wrapStatelessComponent(WrappedComponent) {
+	return createClass({
+		displayName: WrappedComponent.displayName || WrappedComponent.name,
+		render: function() {
+			return WrappedComponent(this.props, this.context);
+		}
+	});
+}
+
+function statelessComponentHook(Ctor) {
+	var Wrapped = Ctor[COMPONENT_WRAPPER_KEY];
+	if (Wrapped) { return Wrapped === true ? Ctor : Wrapped; }
+
+	Wrapped = wrapStatelessComponent(Ctor);
+
+	Object.defineProperty(Wrapped, COMPONENT_WRAPPER_KEY, { configurable: true, value: true });
+	Wrapped.displayName = Ctor.displayName;
+	Wrapped.propTypes = Ctor.propTypes;
+	Wrapped.defaultProps = Ctor.defaultProps;
+
+	Object.defineProperty(Ctor, COMPONENT_WRAPPER_KEY, { configurable: true, value: Wrapped });
+
+	return Wrapped;
+}
+
+function createElement() {
+	var args = [], len = arguments.length;
+	while ( len-- ) args[ len ] = arguments[ len ];
+
+	upgradeToVNodes(args, 2);
+	return normalizeVNode(h.apply(void 0, args));
+}
+
+function normalizeVNode(vnode) {
+	vnode.preactCompatNormalized = true;
+
+	applyClassName(vnode);
+
+	if (isStatelessComponent(vnode.nodeName)) {
+		vnode.nodeName = statelessComponentHook(vnode.nodeName);
+	}
+
+	var ref = vnode.attributes.ref,
+		type = ref && typeof ref;
+	if (currentComponent && (type === 'string' || type === 'number')) {
+		vnode.attributes.ref = createStringRefProxy(ref, currentComponent);
+	}
+
+	applyEventNormalization(vnode);
+
+	return vnode;
+}
+
+function isValidElement(element) {
+	return element && (element instanceof VNode$1 || element.$$typeof === REACT_ELEMENT_TYPE);
+}
+
+function createStringRefProxy(name, component) {
+	return (
+		component._refProxies[name] ||
+		(component._refProxies[name] = function (resolved) {
+			if (component && component.refs) {
+				component.refs[name] = resolved;
+				if (resolved === null) {
+					delete component._refProxies[name];
+					component = null;
+				}
+			}
+		})
+	);
+}
+
+function applyEventNormalization(ref) {
+	var nodeName = ref.nodeName;
+	var attributes = ref.attributes;
+
+	if (!attributes || typeof nodeName !== 'string') { return; }
+	var props = {};
+	for (var i in attributes) {
+		props[i.toLowerCase()] = i;
+	}
+	if (props.ondoubleclick) {
+		attributes.ondblclick = attributes[props.ondoubleclick];
+		delete attributes[props.ondoubleclick];
+	}
+	// for *textual inputs* (incl textarea), normalize `onChange` -> `onInput`:
+	if (
+		props.onchange &&
+		(nodeName === 'textarea' || (nodeName.toLowerCase() === 'input' && !/^fil|che|rad/i.test(attributes.type)))
+	) {
+		var normalized = props.oninput || 'oninput';
+		if (!attributes[normalized]) {
+			attributes[normalized] = multihook([attributes[normalized], attributes[props.onchange]]);
+			delete attributes[props.onchange];
+		}
+	}
+}
+
+function applyClassName(vnode) {
+	var a = vnode.attributes || (vnode.attributes = {});
+	classNameDescriptor.enumerable = 'className' in a;
+	if (a.className) { a.class = a.className; }
+	Object.defineProperty(a, 'className', classNameDescriptor);
+}
+
+var classNameDescriptor = {
+	configurable: true,
+	get: function() {
+		return this.class;
+	},
+	set: function(v) {
+		this.class = v;
+	}
+};
+
+function extend$1(base, props) {
+	var arguments$1 = arguments;
+
+	for (var i = 1, obj = (void 0); i < arguments.length; i++) {
+		if ((obj = arguments$1[i])) {
+			for (var key in obj) {
+				if (obj.hasOwnProperty(key)) {
+					base[key] = obj[key];
+				}
+			}
+		}
+	}
+	return base;
+}
+
+function shallowDiffers(a, b) {
+	for (var i in a) { if (!(i in b)) { return true; } }
+	for (var i$1 in b) { if (a[i$1] !== b[i$1]) { return true; } }
+	return false;
+}
+
+function findDOMNode(component) {
+	return (component && (component.base || (component.nodeType === 1 && component))) || null;
+}
+
+function F() { }
+
+function createClass(obj) {
+	function cl(props, context) {
+		bindAll(this);
+		Component$1.call(this, props, context, BYPASS_HOOK);
+		newComponentHook.call(this, props, context);
+	}
+
+	obj = extend$1({ constructor: cl }, obj);
+
+	// We need to apply mixins here so that getDefaultProps is correctly mixed
+	if (obj.mixins) {
+		applyMixins(obj, collateMixins(obj.mixins));
+	}
+	if (obj.statics) {
+		extend$1(cl, obj.statics);
+	}
+	if (obj.propTypes) {
+		cl.propTypes = obj.propTypes;
+	}
+	if (obj.defaultProps) {
+		cl.defaultProps = obj.defaultProps;
+	}
+	if (obj.getDefaultProps) {
+		cl.defaultProps = obj.getDefaultProps.call(cl);
+	}
+
+	F.prototype = Component$1.prototype;
+	cl.prototype = extend$1(new F(), obj);
+
+	cl.displayName = obj.displayName || 'Component';
+
+	return cl;
+}
+
+// Flatten an Array of mixins to a map of method name to mixin implementations
+function collateMixins(mixins) {
+	var keyed = {};
+	for (var i = 0; i < mixins.length; i++) {
+		var mixin = mixins[i];
+		for (var key in mixin) {
+			if (mixin.hasOwnProperty(key) && typeof mixin[key] === 'function') {
+				(keyed[key] || (keyed[key] = [])).push(mixin[key]);
+			}
+		}
+	}
+	return keyed;
+}
+
+// apply a mapping of Arrays of mixin methods to a component prototype
+function applyMixins(proto, mixins) {
+	for (var key in mixins)
+		{ if (mixins.hasOwnProperty(key)) {
+			proto[key] = multihook(
+				mixins[key].concat(proto[key] || ARR),
+				key === 'getDefaultProps' || key === 'getInitialState' || key === 'getChildContext'
+			);
+		} }
+}
+
+function bindAll(ctx) {
+	for (var i in ctx) {
+		var v = ctx[i];
+		if (typeof v === 'function' && !v.__bound && !AUTOBIND_BLACKLIST.hasOwnProperty(i)) {
+			(ctx[i] = v.bind(ctx)).__bound = true;
+		}
+	}
+}
+
+function callMethod(ctx, m, args) {
+	if (typeof m === 'string') {
+		m = ctx.constructor.prototype[m];
+	}
+	if (typeof m === 'function') {
+		return m.apply(ctx, args);
+	}
+}
+
+function multihook(hooks, skipDuplicates) {
+	return function () {
+		var arguments$1 = arguments;
+		var this$1 = this;
+
+		var ret;
+		for (var i = 0; i < hooks.length; i++) {
+			var r = callMethod(this$1, hooks[i], arguments$1);
+
+			if (skipDuplicates && r != null) {
+				if (!ret) { ret = {}; }
+				for (var key in r)
+					{ if (r.hasOwnProperty(key)) {
+						ret[key] = r[key];
+					} }
+			}
+			else if (typeof r !== 'undefined') { ret = r; }
+		}
+		return ret;
+	};
+}
+
+function newComponentHook(props, context) {
+	propsHook.call(this, props, context);
+	this.componentWillReceiveProps = multihook([
+		propsHook,
+		this.componentWillReceiveProps || 'componentWillReceiveProps'
+	]);
+	this.render = multihook([propsHook, beforeRender, this.render || 'render', afterRender]);
+}
+
+function propsHook(props, context) {
+	if (!props) { return; }
+
+	// React annoyingly special-cases single children, and some react components are ridiculously strict about this.
+	var c = props.children;
+	if (
+		c &&
+		Array.isArray(c) &&
+		c.length === 1 &&
+		(typeof c[0] === 'string' || typeof c[0] === 'function' || c[0] instanceof VNode$1)
+	) {
+		props.children = c[0];
+
+		// but its totally still going to be an Array.
+		if (props.children && typeof props.children === 'object') {
+			props.children.length = 1;
+			props.children[0] = props.children;
+		}
+	}
+
+	// add proptype checking
+	if (DEV) {
+		var ctor = typeof this === 'function' ? this : this.constructor,
+			propTypes = this.propTypes || ctor.propTypes;
+		var displayName = this.displayName || ctor.name;
+	}
+}
+
+function beforeRender(props) {
+	currentComponent = this;
+}
+
+function afterRender() {
+	if (currentComponent === this) {
+		currentComponent = null;
+	}
+}
+
+function Component$1(props, context, opts) {
+	Component.call(this, props, context);
+	this.state = this.getInitialState ? this.getInitialState() : {};
+	this.refs = {};
+	this._refProxies = {};
+	if (opts !== BYPASS_HOOK) {
+		newComponentHook.call(this, props, context);
+	}
+}
+extend$1((Component$1.prototype = new Component()), {
+	constructor: Component$1,
+
+	isReactComponent: {},
+
+	replaceState: function(state, callback) {
+		var this$1 = this;
+
+		this.setState(state, callback);
+		for (var i in this$1.state) {
+			if (!(i in state)) {
+				delete this$1.state[i];
+			}
+		}
+	},
+
+	getDOMNode: function() {
+		return this.base;
+	},
+
+	isMounted: function() {
+		return !!this.base;
+	}
+});
+
+function PureComponent(props, context) {
+	Component$1.call(this, props, context);
+}
+F.prototype = Component$1.prototype;
+PureComponent.prototype = new F();
+PureComponent.prototype.isPureReactComponent = true;
+PureComponent.prototype.shouldComponentUpdate = function (props, state) {
+	return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
+};
+
+/*
+Copyright (c) 2019 Daybrush
+name: preact-css-styler
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/css-styler/tree/master/preact-css-styler
+version: 0.4.1
+*/
+
+/*
+Copyright (c) 2018 Daybrush
+@name: @daybrush/utils
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/utils
+@version 0.10.0
+*/
+/**
+* divide text by comma.
+* @memberof Utils
+* @param {string} text - text to divide
+* @return {Array} divided texts
+* @example
+import {splitComma} from "@daybrush/utils";
+
+console.log(splitComma("a,b,c,d,e,f,g"));
+// ["a", "b", "c", "d", "e", "f", "g"]
+console.log(splitComma("'a,b',c,'d,e',f,g"));
+// ["'a,b'", "c", "'d,e'", "f", "g"]
+*/
+
+function splitComma(text) {
+  // divide comma(,)
+  // "[^"]*"|'[^']*'
+  var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
+  return matches ? matches.map(function (str) {
+    return str.trim();
+  }) : [];
+}
+
+/*
+Copyright (c) 2019 Daybrush
+name: react-css-styler
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/css-styler/tree/master/react-css-styler
+version: 0.4.0
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/* global Reflect, Promise */
+var extendStatics$1 = function (d, b) {
+  extendStatics$1 = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+  };
+
+  return extendStatics$1(d, b);
+};
+
+function __extends$2(d, b) {
+  extendStatics$1(d, b);
+
+  function __() {
+    this.constructor = d;
+  }
+
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var __assign$1 = function () {
+  __assign$1 = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign$1.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+
+function hash(str) {
+  var hash = 5381,
+      i    = str.length;
+
+  while(i) {
+    hash = (hash * 33) ^ str.charCodeAt(--i);
+  }
+
+  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+   * integers. Since we want the results to be always positive, convert the
+   * signed int to an unsigned by doing an unsigned bitshift. */
+  return hash >>> 0;
+}
+
+var stringHash = hash;
+
+function getHash(str) {
+  return stringHash(str).toString(36);
+}
+function injectStyle(className, css) {
+  var style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.innerHTML = css.replace(/([^}{]*){/mg, function (all, selector) {
+    return splitComma(selector).map(function (subSelector) {
+      if (subSelector.indexOf(":global") > -1) {
+        return subSelector.replace(/\:global/g, "");
+      } else if (subSelector.indexOf(":host") > -1) {
+        return "" + subSelector.replace(/\:host/g, "." + className);
+      }
+
+      return "." + className + " " + subSelector;
+    }).join(", ") + "{";
+  });
+  (document.head || document.body).appendChild(style);
+  return style;
+}
+
+function styled(Tag, css) {
+  var injectClassName = "rCS" + getHash(css);
+  var injectCount = 0;
+  var injectElement;
+  return (
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(Styler, _super);
+
+      function Styler(props) {
+        return _super.call(this, props) || this;
+      }
+
+      Styler.prototype.render = function () {
+        var _a = this.props,
+            className = _a.className,
+            attributes = __rest(_a, ["className"]);
+
+        return createElement(Tag, __assign$1({
+          className: className + " " + injectClassName
+        }, attributes));
+      };
+
+      Styler.prototype.componentDidMount = function () {
+        if (injectCount === 0) {
+          injectElement = injectStyle(injectClassName, css);
+        }
+
+        ++injectCount;
+      };
+
+      Styler.prototype.componentWillUnmount = function () {
+        --injectCount;
+
+        if (injectCount === 0 && injectElement) {
+          injectElement.parentNode.removeChild(injectElement);
+        }
+      };
+
+      Styler.prototype.getElement = function () {
+        return this.element || (this.element = findDOMNode(this));
+      };
+
+      return Styler;
+    }(Component$1)
+  );
+}
+
+/*
+Copyright (c) 2019 Daybrush
+name: preact-moveable
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable
+version: 0.9.6
+*/
+
+/*
+Copyright (c) 2019 Daybrush
+name: react-moveable
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
+version: 0.10.6
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/* global Reflect, Promise */
+var extendStatics$2 = function (d, b) {
+  extendStatics$2 = Object.setPrototypeOf || {
+    __proto__: []
+  } instanceof Array && function (d, b) {
+    d.__proto__ = b;
+  } || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+  };
+
+  return extendStatics$2(d, b);
+};
+
+function __extends$3(d, b) {
+  extendStatics$2(d, b);
+
+  function __() {
+    this.constructor = d;
+  }
+
+  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+var __assign$2 = function () {
+  __assign$2 = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign$2.apply(this, arguments);
+};
+
+function add(matrix, inverseMatrix, startIndex, endIndex, fromStart, k) {
+  for (var i = startIndex; i < endIndex; ++i) {
+    matrix[i] += matrix[fromStart + i - startIndex] * k;
+    inverseMatrix[i] += inverseMatrix[fromStart + i - startIndex] * k;
+  }
+}
+
+function swap(matrix, inverseMatrix, startIndex, endIndex, fromStart) {
+  for (var i = startIndex; i < endIndex; ++i) {
+    var v = matrix[i];
+    var iv = inverseMatrix[i];
+    matrix[i] = matrix[fromStart + i - startIndex];
+    matrix[fromStart + i - startIndex] = v;
+    inverseMatrix[i] = inverseMatrix[fromStart + i - startIndex];
+    inverseMatrix[fromStart + i - startIndex] = iv;
+  }
+}
+
+function divide(matrix, inverseMatrix, startIndex, endIndex, k) {
+  for (var i = startIndex; i < endIndex; ++i) {
+    matrix[i] /= k;
+    inverseMatrix[i] /= k;
+  }
+}
+
+function createIdentityMatrix(n) {
+  var length = n * n;
+  var matrix = [];
+
+  for (var i = 0; i < length; ++i) {
+    matrix[i] = i % (n + 1) ? 0 : 1;
+  }
+
+  return matrix;
+}
+function createScaleMatrix(scale, n) {
+  var m = createIdentityMatrix(n);
+  var length = Math.min(scale.length, n - 1);
+
+  for (var i = 0; i < length; ++i) {
+    m[(n + 1) * i] = scale[i];
+  }
+
+  return m;
+}
+function createOriginMatrix(origin, n) {
+  var m = createIdentityMatrix(n);
+  var length = Math.min(origin.length, n - 1);
+
+  for (var i = 0; i < length; ++i) {
+    m[n * (i + 1) - 1] = origin[i];
+  }
+
+  return m;
+}
+function ignoreDimension(matrix, m, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = matrix.slice();
+
+  for (var i = 0; i < n; ++i) {
+    newMatrix[i * n + m - 1] = 0;
+    newMatrix[(m - 1) * n + i] = 0;
+  }
+
+  newMatrix[(m - 1) * (n + 1)] = 1;
+  return newMatrix;
+}
+function invert(matrix, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = matrix.slice();
+  var inverseMatrix = createIdentityMatrix(n);
+
+  for (var i = 0; i < n; ++i) {
+    var startIndex = n * i;
+    var endIndex = n * (i + 1);
+    var identityIndex = startIndex + i;
+
+    if (newMatrix[identityIndex] === 0) {
+      for (var j = i + 1; j < n; ++j) {
+        if (newMatrix[n * j + i]) {
+          swap(newMatrix, inverseMatrix, startIndex, endIndex, n * j);
+          break;
+        }
+      }
+    }
+
+    if (newMatrix[identityIndex]) {
+      divide(newMatrix, inverseMatrix, startIndex, endIndex, newMatrix[identityIndex]);
+    } else {
+      // no inverse matrix
+      return [];
+    }
+
+    for (var j = 0; j < n; ++j) {
+      var targetStartIndex = n * j;
+      var targetEndIndex = targetStartIndex + n;
+      var targetIndex = targetStartIndex + i;
+      var target = newMatrix[targetIndex];
+
+      if (target === 0 || i === j) {
+        continue;
+      }
+
+      add(newMatrix, inverseMatrix, targetStartIndex, targetEndIndex, startIndex, -target);
+    }
+  }
+
+  return inverseMatrix;
+}
+function transpose(matrix, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = [];
+
+  for (var i = 0; i < n; ++i) {
+    for (var j = 0; j < n; ++j) {
+      newMatrix[j * n + i] = matrix[n * i + j];
+    }
+  }
+
+  return newMatrix;
+}
+function convertPositionMatrix(matrix, n) {
+  var newMatrix = matrix.slice();
+
+  for (var i = matrix.length; i < n - 1; ++i) {
+    newMatrix[i] = 0;
+  }
+
+  newMatrix[n - 1] = 1;
+  return newMatrix;
+}
+function convertDimension(matrix, n, m) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  } // n < m
+
+
+  if (n === m) {
+    return matrix;
+  }
+
+  var newMatrix = createIdentityMatrix(m);
+  var length = Math.min(n, m);
+
+  for (var i = 0; i < length - 1; ++i) {
+    for (var j = 0; j < length - 1; ++j) {
+      newMatrix[i * m + j] = matrix[i * n + j];
+    }
+
+    newMatrix[(i + 1) * m - 1] = matrix[(i + 1) * n - 1];
+    newMatrix[(m - 1) * m + i] = matrix[(n - 1) * n + i];
+  }
+
+  newMatrix[m * m - 1] = matrix[n * n - 1];
+  return newMatrix;
+}
+window.b = convertDimension;
+function multiplies(n) {
+  var matrixes = [];
+
+  for (var _i = 1; _i < arguments.length; _i++) {
+    matrixes[_i - 1] = arguments[_i];
+  }
+
+  var m = createIdentityMatrix(n);
+  matrixes.forEach(function (matrix) {
+    m = multiply(m, matrix, n);
+  });
+  return m;
+}
+function multiply(matrix, matrix2, n) {
+  var newMatrix = []; // n * m X m * k
+
+  var m = matrix.length / n;
+  var k = matrix2.length / m;
+
+  if (!m) {
+    return matrix2;
+  } else if (!k) {
+    return matrix;
+  }
+
+  for (var i = 0; i < n; ++i) {
+    for (var j = 0; j < k; ++j) {
+      newMatrix[i * k + j] = 0;
+
+      for (var l = 0; l < m; ++l) {
+        newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j];
+      }
+    }
+  } // n * k
+
+
+  return newMatrix;
+}
+function multiplyCSS(matrix, matrix2, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var newMatrix = []; // n(y) * m(x) X m(y) * k(x)
+
+  var m = matrix.length / n;
+  var k = matrix2.length / m;
+
+  for (var i = 0; i < n; ++i) {
+    for (var j = 0; j < k; ++j) {
+      newMatrix[i + j * k] = 0;
+
+      for (var l = 0; l < m; ++l) {
+        newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k];
+      }
+    }
+  } // n * k
+
+
+  return newMatrix;
+}
+function sum(pos1, pos2) {
+  var length = Math.min(pos1.length, pos2.length);
+  var nextPos = pos1.slice();
+
+  for (var i = 0; i < length; ++i) {
+    nextPos[i] = nextPos[i] + pos2[i];
+  }
+
+  return nextPos;
+}
+function minus(pos1, pos2) {
+  var length = Math.min(pos1.length, pos2.length);
+  var nextPos = pos1.slice();
+
+  for (var i = 0; i < length; ++i) {
+    nextPos[i] = nextPos[i] - pos2[i];
+  }
+
+  return nextPos;
+}
+function caculate(matrix, matrix2, n) {
+  if (n === void 0) {
+    n = matrix2.length;
+  }
+
+  var result = multiply(matrix, matrix2, n);
+  var k = result[n - 1];
+  return result.map(function (v) {
+    return v / k;
+  });
+}
+function getOrigin(matrix, n) {
+  if (n === void 0) {
+    n = Math.sqrt(matrix.length);
+  }
+
+  var originMatrix = [];
+
+  for (var i = 0; i < n - 1; ++i) {
+    originMatrix[i] = matrix[(i + 1) * n - 1];
+  }
+
+  originMatrix[n - 1] = 0;
+  return originMatrix;
+}
+function convertCSStoMatrix(a) {
+  if (a.length === 6) {
+    return [a[0], a[2], a[4], a[1], a[3], a[5], 0, 0, 1];
+  }
+
+  return transpose(a);
+}
+function convertMatrixtoCSS(a) {
+  if (a.length === 9) {
+    return [a[0], a[3], a[1], a[4], a[2], a[5]];
+  }
+
+  return transpose(a);
+}
+function getRotateMatrix(rad) {
+  var cos = Math.cos(rad);
+  var sin = Math.sin(rad);
+  return [cos, -sin, 0, sin, cos, 0, 0, 0, 1];
+}
+function rotate(pos, deg) {
+  return caculate(getRotateMatrix(deg * Math.PI / 180), convertPositionMatrix(pos, 3));
+}
+
+function prefix() {
+  var classNames = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    classNames[_i] = arguments[_i];
+  }
+
+  return prefixNames.apply(void 0, [PREFIX].concat(classNames));
+}
+function createIdentityMatrix3() {
+  return createIdentityMatrix(3);
+}
+function getTransformMatrix(transform) {
+  if (!transform || transform === "none") {
+    return [1, 0, 0, 1, 0, 0];
+  }
+
+  if (isObject(transform)) {
+    return transform;
+  }
+
+  var value = splitBracket(transform).value;
+  return value.split(/s*,\s*/g).map(function (v) {
+    return parseFloat(v);
+  });
+}
+function getAbsoluteMatrix(matrix, n, origin) {
+  return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) {
+    return -a;
+  }), n));
+}
+function measureSVGSize(el, unit, isHorizontal) {
+  if (unit === "%") {
+    var viewBox = el.ownerSVGElement.viewBox.baseVal;
+    return viewBox[isHorizontal ? "width" : "height"] / 100;
+  }
+
+  return 1;
+}
+function getBeforeTransformOrigin(el) {
+  var relativeOrigin = getTransformOrigin(window.getComputedStyle(el, ":before"));
+  return relativeOrigin.map(function (o, i) {
+    var _a = splitUnit(o),
+        value = _a.value,
+        unit = _a.unit;
+
+    return value * measureSVGSize(el, unit, i === 0);
+  });
+}
+function getTransformOrigin(style) {
+  var transformOrigin = style.transformOrigin;
+  return transformOrigin ? transformOrigin.split(" ") : ["0", "0"];
+}
+function caculateMatrixStack(target, container, prevMatrix, prevN) {
+  var _a;
+
+  var el = target;
+  var matrixes = [];
+  var isContainer = !!prevMatrix || target === container;
+  var isSVGGraphicElement = el.tagName.toLowerCase() !== "svg" || "ownerSVGElement" in el;
+  var is3d = false;
+  var n = 3;
+  var transformOrigin;
+  var targetMatrix;
+
+  while (el && (isContainer || el !== container)) {
+    var tagName = el.tagName.toLowerCase();
+    var style = window.getComputedStyle(el);
+    var matrix = convertCSStoMatrix(getTransformMatrix(style.transform));
+
+    if (!is3d && matrix.length === 16) {
+      is3d = true;
+      n = 4;
+      var matrixesLength = matrixes.length;
+
+      for (var i = 0; i < matrixesLength; ++i) {
+        matrixes[i] = convertDimension(matrixes[i], 3, 4);
+      }
+    }
+
+    if (is3d && matrix.length === 9) {
+      matrix = convertDimension(matrix, 3, 4);
+    }
+
+    var offsetLeft = el.offsetLeft;
+    var offsetTop = el.offsetTop; // svg
+
+    var hasNotOffset = isUndefined(offsetLeft);
+    var origin = void 0; // inner svg element
+
+    if (hasNotOffset && tagName !== "svg") {
+      origin = isNotSupportTransformOrigin ? getBeforeTransformOrigin(el) : getTransformOrigin(style).map(function (pos) {
+        return parseFloat(pos);
+      });
+      hasNotOffset = false;
+
+      if (tagName === "g") {
+        offsetLeft = 0;
+        offsetTop = 0;
+      } else {
+        _a = getSVGGraphicsOffset(el, origin), offsetLeft = _a[0], offsetTop = _a[1], origin[0] = _a[2], origin[1] = _a[3];
+      }
+    } else {
+      origin = getTransformOrigin(style).map(function (pos) {
+        return parseFloat(pos);
+      });
+    }
+
+    if (tagName === "svg" && targetMatrix) {
+      matrixes.push(getSVGMatrix(el, n), createIdentityMatrix(n));
+    }
+
+    matrixes.push(getAbsoluteMatrix(matrix, n, origin), createOriginMatrix([hasNotOffset ? el : offsetLeft, hasNotOffset ? origin : offsetTop], n));
+
+    if (!targetMatrix) {
+      targetMatrix = matrix;
+    }
+
+    if (!transformOrigin) {
+      transformOrigin = origin;
+    }
+
+    if (isContainer) {
+      break;
+    }
+
+    el = el.parentElement;
+  }
+
+  var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n);
+  var beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n);
+  var offsetMatrix = createIdentityMatrix(n);
+  var length = matrixes.length;
+  matrixes.reverse();
+  matrixes.forEach(function (matrix, i) {
+    var _a;
+
+    if (length - 2 === i) {
+      beforeMatrix = mat.slice();
+    }
+
+    if (length - 1 === i) {
+      offsetMatrix = mat.slice();
+    }
+
+    if (isObject(matrix[n - 1])) {
+      _a = getSVGOffset(matrix[n - 1], container, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1];
+    }
+
+    mat = multiply(mat, matrix, n);
+  });
+  var isMatrix3d = !isSVGGraphicElement && is3d;
+  var transform = (isMatrix3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(isSVGGraphicElement && targetMatrix.length === 16 ? convertDimension(targetMatrix, 4, 3) : targetMatrix) + ")";
+  return [beforeMatrix, offsetMatrix, mat, targetMatrix, transform, transformOrigin, is3d];
+}
+function getSVGMatrix(el, n) {
+  var clientWidth = el.clientWidth;
+  var clientHeight = el.clientHeight;
+  var viewBox = el.viewBox.baseVal;
+  var viewBoxWidth = viewBox.width || clientWidth;
+  var viewBoxHeight = viewBox.height || clientHeight;
+  var scaleX = clientWidth / viewBoxWidth;
+  var scaleY = clientHeight / viewBoxHeight;
+  var preserveAspectRatio = el.preserveAspectRatio.baseVal; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
+
+  var align = preserveAspectRatio.align; // 1 : meet 2: slice
+
+  var meetOrSlice = preserveAspectRatio.meetOrSlice;
+  var svgOrigin = [0, 0];
+  var scale = [scaleX, scaleY];
+  var translate = [0, 0];
+
+  if (align !== 1) {
+    var xAlign = (align - 2) % 3;
+    var yAlign = Math.floor((align - 2) / 3);
+    svgOrigin[0] = viewBoxWidth * xAlign / 2;
+    svgOrigin[1] = viewBoxHeight * yAlign / 2;
+    var scaleDimension = meetOrSlice === 2 ? Math.max(scaleY, scaleX) : Math.min(scaleX, scaleY);
+    scale[0] = scaleDimension;
+    scale[1] = scaleDimension;
+    translate[0] = (clientWidth - viewBoxWidth) / 2 * xAlign;
+    translate[1] = (clientHeight - viewBoxHeight) / 2 * yAlign;
+  }
+
+  var scaleMatrix = createScaleMatrix(scale, n);
+  scaleMatrix[n - 1] = translate[0], scaleMatrix[2 * n - 1] = translate[1];
+  return getAbsoluteMatrix(scaleMatrix, n, svgOrigin);
+}
+function getSVGGraphicsOffset(el, origin) {
+  if (!el.getBBox) {
+    return [0, 0];
+  }
+
+  var bbox = el.getBBox();
+  var svgElement = el.ownerSVGElement;
+  var viewBox = svgElement.viewBox.baseVal;
+  var left = bbox.x - viewBox.x;
+  var top = bbox.y - viewBox.y;
+  return [left, top, origin[0] - left, origin[1] - top];
+}
+function caculatePosition(matrix, pos, n) {
+  return caculate(matrix, convertPositionMatrix(pos, n), n);
+}
+function caculateRect(matrix, width, height, n) {
+  var pos1 = caculatePosition(matrix, [0, 0], n);
+  var pos2 = caculatePosition(matrix, [width, 0], n);
+  var pos3 = caculatePosition(matrix, [0, height], n);
+  var pos4 = caculatePosition(matrix, [width, height], n);
+  return [pos1, pos2, pos3, pos4];
+}
+function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) {
+  var _a;
+
+  var _b = getSize(el),
+      width = _b[0],
+      height = _b[1];
+
+  var containerRect = (container || document.documentElement).getBoundingClientRect();
+  var rect = el.getBoundingClientRect();
+  var rectLeft = rect.left - containerRect.left;
+  var rectTop = rect.top - containerRect.top;
+  var rectWidth = rect.width;
+  var rectHeight = rect.height;
+  var mat = multiplies(n, beforeMatrix, absoluteMatrix);
+  var poses = caculateRect(mat, width, height, n);
+  var posesX = poses.map(function (pos) {
+    return pos[0];
+  });
+  var posesY = poses.map(function (pos) {
+    return pos[1];
+  });
+  var posOrigin = caculatePosition(mat, origin, n);
+  var prevLeft = Math.min.apply(Math, posesX);
+  var prevTop = Math.min.apply(Math, posesY);
+  var prevOrigin = minus(posOrigin, [prevLeft, prevTop]);
+  var prevWidth = Math.max.apply(Math, posesX) - prevLeft;
+  var prevHeight = Math.max.apply(Math, posesY) - prevTop;
+  var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight];
+  var offset = [0, 0];
+  var count = 0;
+
+  while (++count < 10) {
+    var inverseBeforeMatrix = invert(beforeMatrix, n);
+    _a = minus(caculatePosition(inverseBeforeMatrix, rectOrigin, n), caculatePosition(inverseBeforeMatrix, posOrigin, n)), offset[0] = _a[0], offset[1] = _a[1];
+    var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix);
+    var nextPoses = caculateRect(mat2, width, height, n);
+    var nextLeft = Math.min.apply(Math, nextPoses.map(function (pos) {
+      return pos[0];
+    }));
+    var nextTop = Math.min.apply(Math, nextPoses.map(function (pos) {
+      return pos[1];
+    }));
+    var distLeft = nextLeft - rectLeft;
+    var distTop = nextTop - rectTop;
+
+    if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) {
+      break;
+    }
+
+    rectOrigin[0] -= distLeft;
+    rectOrigin[1] -= distTop;
+  }
+
+  return offset.map(function (p) {
+    return Math.round(p);
+  });
+}
+function caculateMoveablePosition(matrix, origin, width, height) {
+  var is3d = matrix.length === 16;
+  var n = is3d ? 4 : 3;
+
+  var _a = caculateRect(matrix, width, height, n),
+      _b = _a[0],
+      x1 = _b[0],
+      y1 = _b[1],
+      _c = _a[1],
+      x2 = _c[0],
+      y2 = _c[1],
+      _d = _a[2],
+      x3 = _d[0],
+      y3 = _d[1],
+      _e = _a[3],
+      x4 = _e[0],
+      y4 = _e[1];
+
+  var _f = caculatePosition(matrix, origin, n),
+      originX = _f[0],
+      originY = _f[1];
+
+  var minX = Math.min(x1, x2, x3, x4);
+  var minY = Math.min(y1, y2, y3, y4);
+  x1 = x1 - minX || 0;
+  x2 = x2 - minX || 0;
+  x3 = x3 - minX || 0;
+  x4 = x4 - minX || 0;
+  y1 = y1 - minY || 0;
+  y2 = y2 - minY || 0;
+  y3 = y3 - minY || 0;
+  y4 = y4 - minY || 0;
+  originX = originX - minX || 0;
+  originY = originY - minY || 0;
+  var center = [(x1 + x2 + x3 + x4) / 4, (y1 + y2 + y3 + y4) / 4];
+  var pos1Rad = getRad(center, [x1, y1]);
+  var pos2Rad = getRad(center, [x2, y2]);
+  var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1;
+  return [[minX, minY], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4], direction];
+}
+function getRad(pos1, pos2) {
+  var distX = pos2[0] - pos1[0];
+  var distY = pos2[1] - pos1[1];
+  var rad = Math.atan2(distY, distX);
+  return rad > 0 ? rad : rad + Math.PI * 2;
+}
+function getLineStyle(pos1, pos2) {
+  var distX = pos2[0] - pos1[0];
+  var distY = pos2[1] - pos1[1];
+  var width = Math.sqrt(distX * distX + distY * distY);
+  var rad = getRad(pos1, pos2);
+  return {
+    transform: "translate(" + pos1[0] + "px, " + pos1[1] + "px) rotate(" + rad + "rad)",
+    width: width + "px"
+  };
+}
+function getControlTransform() {
+  var poses = [];
+
+  for (var _i = 0; _i < arguments.length; _i++) {
+    poses[_i] = arguments[_i];
+  }
+
+  var length = poses.length;
+  var x = poses.reduce(function (prev, pos) {
+    return prev + pos[0];
+  }, 0) / length;
+  var y = poses.reduce(function (prev, pos) {
+    return prev + pos[1];
+  }, 0) / length;
+  return {
+    transform: "translate(" + x + "px, " + y + "px)"
+  };
+}
+function getSize(target, style, isOffset, isBoxSizing) {
+  if (style === void 0) {
+    style = window.getComputedStyle(target);
+  }
+
+  if (isBoxSizing === void 0) {
+    isBoxSizing = isOffset || style.boxSizing === "border-box";
+  }
+
+  var width = target.offsetWidth;
+  var height = target.offsetHeight;
+  var hasOffset = !isUndefined(width);
+
+  if ((isOffset || isBoxSizing) && hasOffset) {
+    return [width, height];
+  }
+
+  width = target.clientWidth;
+  height = target.clientHeight;
+
+  if (!hasOffset && !width && !height) {
+    var bbox = target.getBBox();
+    return [bbox.width, bbox.height];
+  }
+
+  if (isOffset || isBoxSizing) {
+    var borderLeft = parseFloat(style.borderLeftWidth) || 0;
+    var borderRight = parseFloat(style.borderRightWidth) || 0;
+    var borderTop = parseFloat(style.borderTopWidth) || 0;
+    var borderBottom = parseFloat(style.borderBottomWidth) || 0;
+    return [width + borderLeft + borderRight, height + borderTop + borderBottom];
+  } else {
+    var paddingLeft = parseFloat(style.paddingLeft) || 0;
+    var paddingRight = parseFloat(style.paddingRight) || 0;
+    var paddingTop = parseFloat(style.paddingTop) || 0;
+    var paddingBottom = parseFloat(style.paddingBottom) || 0;
+    return [width - paddingLeft - paddingRight, height - paddingTop - paddingBottom];
+  }
+}
+function getRotationInfo(pos1, pos2, direction) {
+  var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+  var relativeRotationPos = multiply(getRotateMatrix(rotationRad), [0, -40, 1], 3);
+  var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]];
+  return [rotationRad, rotationPos];
+}
+function getTargetInfo(target, container, state) {
+  var _a, _b, _c, _d, _e, _f;
+
+  var left = 0;
+  var top = 0;
+  var origin = [0, 0];
+  var pos1 = [0, 0];
+  var pos2 = [0, 0];
+  var pos3 = [0, 0];
+  var pos4 = [0, 0];
+  var beforeMatrix = createIdentityMatrix3();
+  var matrix = createIdentityMatrix3();
+  var targetMatrix = createIdentityMatrix3();
+  var width = 0;
+  var height = 0;
+  var transformOrigin = [0, 0];
+  var direction = 1;
+  var beforeDirection = 1;
+  var rotationPos = [0, 0];
+  var rotationRad = 0;
+  var is3d = false;
+  var targetTransform = "";
+  var beforeOrigin = [0, 0];
+  var prevMatrix = state ? state.beforeMatrix : undefined;
+  var prevN = state ? state.is3d ? 4 : 3 : undefined;
+
+  if (target) {
+    if (state) {
+      width = state.width;
+      height = state.height;
+    } else {
+      var style = window.getComputedStyle(target);
+      width = target.offsetWidth;
+      height = target.offsetHeight;
+
+      if (isUndefined(width)) {
+        _a = getSize(target, style, true), width = _a[0], height = _a[1];
+      }
+    }
+
+    var offsetMatrix = void 0;
+    _b = caculateMatrixStack(target, container, prevMatrix, prevN), beforeMatrix = _b[0], offsetMatrix = _b[1], matrix = _b[2], targetMatrix = _b[3], targetTransform = _b[4], transformOrigin = _b[5], is3d = _b[6];
+    _c = caculateMoveablePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5], direction = _c[6];
+    var n = is3d ? 4 : 3;
+    var beforePos = [0, 0];
+    _e = caculateMoveablePosition(offsetMatrix, sum(transformOrigin, getOrigin(targetMatrix, n)), width, height), beforePos = _e[0], beforeOrigin = _e[1], beforeDirection = _e[6];
+    beforeOrigin = [beforeOrigin[0] + beforePos[0] - left, beforeOrigin[1] + beforePos[1] - top]; // 1 : clockwise
+    // -1 : counterclockwise
+
+    _f = getRotationInfo(pos1, pos2, direction), rotationRad = _f[0], rotationPos = _f[1];
+  }
+
+  return {
+    beforeDirection: beforeDirection,
+    direction: direction,
+    rotationRad: rotationRad,
+    rotationPos: rotationPos,
+    target: target,
+    left: left,
+    top: top,
+    pos1: pos1,
+    pos2: pos2,
+    pos3: pos3,
+    pos4: pos4,
+    width: width,
+    height: height,
+    beforeMatrix: beforeMatrix,
+    matrix: matrix,
+    targetTransform: targetTransform,
+    targetMatrix: targetMatrix,
+    is3d: is3d,
+    beforeOrigin: beforeOrigin,
+    origin: origin,
+    transformOrigin: transformOrigin
+  };
+}
+function getDirection(target) {
+  if (!target) {
+    return;
+  }
+
+  var direciton = target.getAttribute("data-direction");
+
+  if (!direciton) {
+    return;
+  }
+
+  var dir = [0, 0];
+  direciton.indexOf("w") > -1 && (dir[0] = -1);
+  direciton.indexOf("e") > -1 && (dir[0] = 1);
+  direciton.indexOf("n") > -1 && (dir[1] = -1);
+  direciton.indexOf("s") > -1 && (dir[1] = 1);
+  return dir;
+}
+function throttle(num, unit) {
+  if (!unit) {
+    return num;
+  }
+
+  return Math.round(num / unit) * unit;
+}
+function throttleArray(nums, unit) {
+  nums.forEach(function (_, i) {
+    nums[i] = throttle(nums[i], unit);
+  });
+}
+function warp(pos0, pos1, pos2, pos3, nextPos0, nextPos1, nextPos2, nextPos3) {
+  var x0 = pos0[0],
+      y0 = pos0[1];
+  var x1 = pos1[0],
+      y1 = pos1[1];
+  var x2 = pos2[0],
+      y2 = pos2[1];
+  var x3 = pos3[0],
+      y3 = pos3[1];
+  var u0 = nextPos0[0],
+      v0 = nextPos0[1];
+  var u1 = nextPos1[0],
+      v1 = nextPos1[1];
+  var u2 = nextPos2[0],
+      v2 = nextPos2[1];
+  var u3 = nextPos3[0],
+      v3 = nextPos3[1];
+  var matrix = [x0, y0, 1, 0, 0, 0, -u0 * x0, -u0 * y0, 0, 0, 0, x0, y0, 1, -v0 * x0, -v0 * y0, x1, y1, 1, 0, 0, 0, -u1 * x1, -u1 * y1, 0, 0, 0, x1, y1, 1, -v1 * x1, -v1 * y1, x2, y2, 1, 0, 0, 0, -u2 * x2, -u2 * y2, 0, 0, 0, x2, y2, 1, -v2 * x2, -v2 * y2, x3, y3, 1, 0, 0, 0, -u3 * x3, -u3 * y3, 0, 0, 0, x3, y3, 1, -v3 * x3, -v3 * y3];
+  var inverseMatrix = invert(matrix, 8);
+
+  if (!inverseMatrix.length) {
+    return [];
+  }
+
+  var h = multiply(inverseMatrix, [u0, v0, u1, v1, u2, v2, u3, v3], 8);
+  h[8] = 1;
+  return convertDimension(h, 3, 4);
+}
+function unset(self, name) {
+  if (self[name]) {
+    self[name].unset();
+    self[name] = null;
+  }
+}
+function getOrientationDirection(pos, pos1, pos2) {
+  return (pos[0] - pos1[0]) * (pos2[1] - pos1[1]) - (pos[1] - pos1[1]) * (pos2[0] - pos1[0]);
+}
+function isInside(pos, pos1, pos2, pos3, pos4) {
+  var k1 = getOrientationDirection(pos, pos1, pos2);
+  var k2 = getOrientationDirection(pos, pos2, pos4);
+  var k3 = getOrientationDirection(pos, pos4, pos1);
+  var k4 = getOrientationDirection(pos, pos2, pos4);
+  var k5 = getOrientationDirection(pos, pos4, pos3);
+  var k6 = getOrientationDirection(pos, pos3, pos2);
+  var signs1 = [k1, k2, k3];
+  var signs2 = [k4, k5, k6];
+
+  if (signs1.every(function (sign) {
+    return sign >= 0;
+  }) || signs1.every(function (sign) {
+    return sign <= 0;
+  }) || signs2.every(function (sign) {
+    return sign >= 0;
+  }) || signs2.every(function (sign) {
+    return sign <= 0;
+  })) {
+    return true;
+  }
+
+  return false;
+}
+function triggerEvent(moveable, name, e) {
+  return moveable.triggerEvent(name, e);
+}
+
+function getRotatiion(touches) {
+  return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
+}
+
+var Pinchable = {
+  name: "pinchable",
+  updateRect: true,
+  pinchStart: function (moveable, _a) {
+    var _b;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        touches = _a.touches,
+        inputEvent = _a.inputEvent,
+        targets = _a.targets;
+    var _c = moveable.props,
+        pinchable = _c.pinchable,
+        ables = _c.ables;
+
+    if (!pinchable) {
+      return false;
+    }
+
+    var state = moveable.state;
+    var eventName = "onPinch" + (targets ? "Group" : "") + "Start";
+    var controlEventName = "drag" + (targets ? "Group" : "") + "ControlStart";
+    var pinchAbles = (pinchable === true ? moveable.controlAbles : ables.filter(function (able) {
+      return pinchable.indexOf(able.name) > -1;
+    })).filter(function (able) {
+      return able.canPinch && able[controlEventName];
+    });
+    datas.pinchableDatas = {};
+    var result = triggerEvent(moveable, eventName, (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : state.target, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b));
+    datas.isPinch = result !== false;
+    datas.ables = pinchAbles;
+    var isPinch = datas.isPinch;
+
+    if (!isPinch) {
+      return false;
+    }
+
+    var parentRotate = getRotatiion(touches);
+    pinchAbles.forEach(function (able) {
+      datas[able.name + "Datas"] = {};
+      var e = {
+        datas: datas[able.name + "Datas"],
+        clientX: clientX,
+        clientY: clientY,
+        inputEvent: inputEvent,
+        parentRotate: parentRotate,
+        pinchFlag: true
+      };
+      able[controlEventName](moveable, e);
+    });
+    return isPinch;
+  },
+  pinch: function (moveable, _a) {
+    var _b;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        pinchScale = _a.scale,
+        distance = _a.distance,
+        touches = _a.touches,
+        inputEvent = _a.inputEvent,
+        targets = _a.targets;
+
+    if (!datas.isPinch) {
+      return;
+    }
+
+    var parentRotate = getRotatiion(touches);
+    var parentDistance = distance * (1 - 1 / pinchScale);
+    var target = moveable.state.target;
+    inputEvent.preventDefault();
+    inputEvent.stopPropagation();
+    var params = (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : target, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b);
+    var eventName = "onPinch" + (targets ? "Group" : "");
+    triggerEvent(moveable, eventName, params);
+    var ables = datas.ables;
+    var controlEventName = "drag" + (targets ? "Group" : "") + "Control";
+    ables.forEach(function (able) {
+      able[controlEventName](moveable, {
+        clientX: clientX,
+        clientY: clientY,
+        datas: datas[able.name + "Datas"],
+        inputEvent: inputEvent,
+        parentDistance: parentDistance,
+        parentRotate: parentRotate,
+        pinchFlag: true
+      });
+    });
+    return params;
+  },
+  pinchEnd: function (moveable, _a) {
+    var _b;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        isPinch = _a.isPinch,
+        inputEvent = _a.inputEvent,
+        targets = _a.targets;
+
+    if (!datas.isPinch) {
+      return;
+    }
+
+    var target = moveable.state.target;
+    var eventName = "onPinch" + (targets ? "Group" : "") + "End";
+    triggerEvent(moveable, eventName, (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : target, _b.isDrag = isPinch, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b));
+    var ables = datas.ables;
+    var controlEventName = "drag" + (targets ? "Group" : "") + "ControlEnd";
+    ables.forEach(function (able) {
+      able[controlEventName](moveable, {
+        clientX: clientX,
+        clientY: clientY,
+        isDrag: isPinch,
+        datas: datas[able.name + "Datas"],
+        inputEvent: inputEvent,
+        pinchFlag: true
+      });
+    });
+    return isPinch;
+  },
+  pinchGroupStart: function (moveable, e) {
+    return this.pinchStart(moveable, __assign$2({}, e, {
+      targets: moveable.props.targets
+    }));
+  },
+  pinchGroup: function (moveable, e) {
+    return this.pinch(moveable, __assign$2({}, e, {
+      targets: moveable.props.targets
+    }));
+  },
+  pinchGroupEnd: function (moveable, e) {
+    return this.pinchEnd(moveable, __assign$2({}, e, {
+      targets: moveable.props.targets
+    }));
+  }
+};
+
+function setDragStart(moveable, _a) {
+  var datas = _a.datas;
+  var _b = moveable.state,
+      matrix = _b.matrix,
+      beforeMatrix = _b.beforeMatrix,
+      is3d = _b.is3d,
+      left = _b.left,
+      top = _b.top,
+      origin = _b.origin;
+  var n = is3d ? 4 : 3;
+  datas.is3d = is3d;
+  datas.matrix = matrix;
+  datas.inverseMatrix = invert(matrix, n);
+  datas.beforeMatrix = beforeMatrix;
+  datas.inverseBeforeMatrix = invert(beforeMatrix, n);
+  datas.absoluteOrigin = convertPositionMatrix(sum([left, top], origin), n);
+  datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n);
+  datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, n);
+}
+function getDragDist(_a, isBefore) {
+  var datas = _a.datas,
+      distX = _a.distX,
+      distY = _a.distY;
+  var inverseBeforeMatrix = datas.inverseBeforeMatrix,
+      inverseMatrix = datas.inverseMatrix,
+      is3d = datas.is3d,
+      startDragBeforeDist = datas.startDragBeforeDist,
+      startDragDist = datas.startDragDist,
+      absoluteOrigin = datas.absoluteOrigin;
+  var n = is3d ? 4 : 3;
+  return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, sum(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist);
+}
+
+function triggerChildAble(moveable, able, type, e, callback) {
+  var name = able.name;
+  var datas = e.datas;
+  var ableDatas = datas[name] || (datas[name] = []);
+  return moveable.moveables.map(function (child, i) {
+    var childDatas = ableDatas[i] || (ableDatas[i] = {});
+    var result = able[type](child, __assign$2({}, e, {
+      datas: childDatas,
+      parentFlag: true
+    }));
+    result && callback && callback(child, childDatas, result, i);
+    return result;
+  });
+}
+function getCustomEvent(datas) {
+  return datas.custom;
+}
+function setCustomEvent(clientX, clientY, datas, inputEvent) {
+  var e = datas.custom || (datas.custom = {
+    startX: clientX,
+    startY: clientY,
+    prevX: clientX,
+    prevY: clientY,
+    isDrag: false
+  });
+  var prevX = e.prevX,
+      prevY = e.prevY,
+      startX = e.startX,
+      startY = e.startY;
+  e.prevX = clientX;
+  e.prevY = clientY;
+
+  if (clientX !== prevX || clientY !== prevY) {
+    e.isDrag = true;
+  }
+
+  return {
+    clientX: clientX,
+    clientY: clientY,
+    distX: clientX - startX,
+    distY: clientY - startY,
+    deltaX: clientX - prevX,
+    deltaY: clientY - prevY,
+    isDrag: e.isDrag,
+    datas: datas,
+    inputEvent: inputEvent
+  };
+}
+function directionCondition(target) {
+  return hasClass(target, prefix("direction"));
+}
+
+var Draggable = {
+  name: "draggable",
+  dragStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+    var _b = moveable.state,
+        targetTransform = _b.targetTransform,
+        target = _b.target;
+    var style = window.getComputedStyle(target);
+    datas.datas = {};
+    datas.left = parseFloat(style.left || "") || 0;
+    datas.top = parseFloat(style.top || "") || 0;
+    datas.bottom = parseFloat(style.bottom || "") || 0;
+    datas.right = parseFloat(style.right || "") || 0;
+    datas.transform = targetTransform;
+    setDragStart(moveable, {
+      datas: datas
+    });
+    datas.prevDist = [0, 0];
+    datas.prevBeforeDist = [0, 0];
+    var result = triggerEvent(moveable, "onDragStart", {
+      datas: datas.datas,
+      target: target,
+      clientX: clientX,
+      clientY: clientY
+    });
+
+    if (result !== false) {
+      datas.isDrag = true;
+    } else {
+      datas.isPinch = false;
+    }
+
+    return datas.isDrag;
+  },
+  drag: function (moveable, _a) {
+    var datas = _a.datas,
+        distX = _a.distX,
+        distY = _a.distY,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        inputEvent = _a.inputEvent;
+    var isPinch = datas.isPinch,
+        isDrag = datas.isDrag,
+        prevDist = datas.prevDist,
+        prevBeforeDist = datas.prevBeforeDist,
+        transform = datas.transform;
+
+    if (!isDrag) {
+      return;
+    }
+
+    inputEvent.preventDefault();
+    inputEvent.stopPropagation();
+    var _b = moveable.props,
+        _c = _b.throttleDrag,
+        throttleDrag = _c === void 0 ? 0 : _c,
+        parentMoveable = _b.parentMoveable;
+    var target = moveable.state.target;
+    var beforeDist = getDragDist({
+      datas: datas,
+      distX: distX,
+      distY: distY
+    }, true);
+    var dist = getDragDist({
+      datas: datas,
+      distX: distX,
+      distY: distY
+    }, false);
+    throttleArray(dist, throttleDrag);
+    throttleArray(beforeDist, throttleDrag);
+    var delta = minus(dist, prevDist);
+    var beforeDelta = minus(beforeDist, prevBeforeDist);
+    datas.prevDist = dist;
+    datas.prevBeforeDist = beforeDist;
+    var left = datas.left + beforeDist[0];
+    var top = datas.top + beforeDist[1];
+    var right = datas.right - beforeDist[0];
+    var bottom = datas.bottom - beforeDist[1];
+    var nextTransform = transform + " translate(" + dist[0] + "px, " + dist[1] + "px)";
+
+    if (!parentMoveable && delta.every(function (num) {
+      return !num;
+    }) && beforeDelta.some(function (num) {
+      return !num;
+    })) {
+      return;
+    }
+
+    var params = {
+      datas: datas.datas,
+      target: target,
+      transform: nextTransform,
+      dist: dist,
+      delta: delta,
+      beforeDist: beforeDist,
+      beforeDelta: beforeDelta,
+      left: left,
+      top: top,
+      right: right,
+      bottom: bottom,
+      clientX: clientX,
+      clientY: clientY,
+      isPinch: isPinch
+    };
+    triggerEvent(moveable, "onDrag", params);
+    return params;
+  },
+  dragEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isDrag) {
+      return;
+    }
+
+    datas.isDrag = false;
+    triggerEvent(moveable, "onDragEnd", {
+      target: moveable.state.target,
+      isDrag: isDrag,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    return isDrag;
+  },
+  dragGroupCondition: function (target) {
+    return hasClass(target, prefix("group"));
+  },
+  dragGroupStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas;
+    triggerChildAble(moveable, this, "dragStart", e);
+    this.dragStart(moveable, e);
+    var result = triggerEvent(moveable, "onDragGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isDrag = result !== false;
+    return datas.isDrag;
+  },
+  dragGroup: function (moveable, e) {
+    if (!e.datas.isDrag) {
+      return;
+    }
+
+    var events = triggerChildAble(moveable, this, "drag", e);
+    var params = this.drag(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    triggerEvent(moveable, "onDragGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isDrag) {
+      return;
+    }
+
+    triggerChildAble(moveable, this, "dragEnd", e);
+    triggerEvent(moveable, "onDragGroupEnd", {
+      targets: moveable.props.targets,
+      isDrag: isDrag,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    return isDrag;
+  }
+};
+
+function setRotateStartInfo(datas, clientX, clientY, origin, rotationPos) {
+  datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]];
+  datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180;
+  datas.startDeg = datas.prevDeg;
+  datas.loop = 0;
+}
+
+function getDeg(datas, deg, direction, throttleRotate) {
+  var prevDeg = datas.prevDeg,
+      startDeg = datas.startDeg,
+      prevLoop = datas.loop;
+  deg = throttle(deg, throttleRotate);
+
+  if (prevDeg > deg && prevDeg > 270 && deg < 90) {
+    // 360 => 0
+    ++datas.loop;
+  } else if (prevDeg < deg && prevDeg < 90 && deg > 270) {
+    // 0 => 360
+    --datas.loop;
+  }
+
+  var absolutePrevDeg = prevLoop * 360 + prevDeg;
+  var absoluteDeg = datas.loop * 360 + deg;
+  var delta = direction * (absoluteDeg - absolutePrevDeg);
+  var dist = direction * (absoluteDeg - startDeg);
+  datas.prevDeg = deg;
+  return [delta, dist];
+}
+
+function getRotateInfo(datas, direction, clientX, clientY, throttleRotate) {
+  return getDeg(datas, getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, direction, throttleRotate);
+}
+
+function dragControlCondition(target) {
+  return hasClass(target, prefix("rotation"));
+}
+
+var Rotatable = {
+  name: "rotatable",
+  canPinch: true,
+  render: function (moveable) {
+    if (!moveable.props.rotatable) {
+      return null;
+    }
+
+    var _a = moveable.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        rotationRad = _a.rotationRad;
+    return createElement("div", {
+      className: prefix("line rotation-line"),
+      style: {
+        // tslint:disable-next-line: max-line-length
+        transform: "translate(" + (pos1[0] + pos2[0]) / 2 + "px, " + (pos1[1] + pos2[1]) / 2 + "px) translateY(-40px) rotate(" + rotationRad + "rad)"
+      }
+    }, createElement("div", {
+      className: prefix("control", "rotation")
+    }));
+  },
+  dragControlCondition: dragControlCondition,
+  dragControlStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        parentRotate = _a.parentRotate,
+        parentFlag = _a.parentFlag,
+        pinchFlag = _a.pinchFlag;
+    var _b = moveable.state,
+        target = _b.target,
+        left = _b.left,
+        top = _b.top,
+        origin = _b.origin,
+        beforeOrigin = _b.beforeOrigin,
+        rotationPos = _b.rotationPos,
+        direction = _b.direction,
+        beforeDirection = _b.beforeDirection,
+        targetTransform = _b.targetTransform;
+
+    if (!target) {
+      return false;
+    }
+
+    datas.transform = targetTransform;
+    datas.left = left;
+    datas.top = top;
+
+    if (pinchFlag || parentFlag) {
+      datas.beforeInfo = {
+        prevDeg: parentRotate,
+        startDeg: parentRotate,
+        loop: 0
+      };
+      datas.afterInfo = {
+        prevDeg: parentRotate,
+        startDeg: parentRotate,
+        loop: 0
+      };
+    } else {
+      datas.afterInfo = {};
+      datas.beforeInfo = {};
+      setRotateStartInfo(datas.afterInfo, clientX, clientY, origin, rotationPos);
+      setRotateStartInfo(datas.beforeInfo, clientX, clientY, beforeOrigin, rotationPos);
+    }
+
+    datas.direction = direction;
+    datas.beforeDirection = beforeDirection;
+    datas.datas = {};
+    var result = triggerEvent(moveable, "onRotateStart", {
+      datas: datas.datas,
+      target: target,
+      clientX: clientX,
+      clientY: clientY
+    });
+    datas.isRotate = result !== false;
+    return datas.isRotate;
+  },
+  dragControl: function (moveable, _a) {
+    var _b, _c, _d, _e;
+
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        parentRotate = _a.parentRotate,
+        parentFlag = _a.parentFlag,
+        pinchFlag = _a.pinchFlag;
+    var direction = datas.direction,
+        beforeDirection = datas.beforeDirection,
+        beforeInfo = datas.beforeInfo,
+        afterInfo = datas.afterInfo,
+        isRotate = datas.isRotate;
+
+    if (!isRotate) {
+      return;
+    }
+
+    var _f = moveable.props,
+        _g = _f.throttleRotate,
+        throttleRotate = _g === void 0 ? 0 : _g,
+        parentMoveable = _f.parentMoveable;
+    var delta;
+    var dist;
+    var beforeDelta;
+    var beforeDist;
+
+    if (pinchFlag || parentFlag) {
+      _b = getDeg(afterInfo, parentRotate, direction, throttleRotate), delta = _b[0], dist = _b[1];
+      _c = getDeg(beforeInfo, parentRotate, direction, throttleRotate), beforeDelta = _c[0], beforeDist = _c[1];
+    } else {
+      _d = getRotateInfo(afterInfo, direction, clientX, clientY, throttleRotate), delta = _d[0], dist = _d[1];
+      _e = getRotateInfo(beforeInfo, beforeDirection, clientX, clientY, throttleRotate), beforeDelta = _e[0], beforeDist = _e[1];
+    }
+
+    if (!delta && !beforeDelta && !parentMoveable) {
+      return;
+    }
+
+    var params = {
+      target: moveable.props.target,
+      datas: datas.datas,
+      delta: delta,
+      dist: dist,
+      clientX: clientX,
+      clientY: clientY,
+      beforeDist: beforeDist,
+      beforeDelta: beforeDelta,
+      transform: datas.transform + " rotate(" + dist + "deg)",
+      isPinch: !!pinchFlag
+    };
+    triggerEvent(moveable, "onRotate", params);
+    return params;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isRotate) {
+      return false;
+    }
+
+    datas.isRotate = false;
+    triggerEvent(moveable, "onRotateEnd", {
+      datas: datas.datas,
+      clientX: clientX,
+      clientY: clientY,
+      target: moveable.state.target,
+      isDrag: isDrag
+    });
+    return isDrag;
+  },
+  dragGroupControlCondition: dragControlCondition,
+  dragGroupControlStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas,
+        inputEvent = e.inputEvent;
+    var _a = moveable.state,
+        parentLeft = _a.left,
+        parentTop = _a.top,
+        parentBeforeOrigin = _a.beforeOrigin;
+    triggerChildAble(moveable, this, "dragControlStart", __assign$2({}, e, {
+      parentRotate: 0
+    }), function (child, childDatas) {
+      var _a = child.state,
+          left = _a.left,
+          top = _a.top,
+          beforeOrigin = _a.beforeOrigin;
+      var childClient = sum(minus([left, top], [parentLeft, parentTop]), minus(beforeOrigin, parentBeforeOrigin));
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+      Draggable.dragStart(child, setCustomEvent(childClient[0], childClient[1], dragDatas, inputEvent));
+    });
+    this.dragControlStart(moveable, e);
+    var result = triggerEvent(moveable, "onRotateGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isRotate = result !== false;
+    return datas.isDrag;
+  },
+  dragGroupControl: function (moveable, e) {
+    var inputEvent = e.inputEvent,
+        datas = e.datas;
+
+    if (!datas.isRotate) {
+      return;
+    }
+
+    var params = this.dragControl(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var parentRotate = params.beforeDist;
+    var deg = params.beforeDelta;
+    var events = triggerChildAble(moveable, this, "dragControl", __assign$2({}, e, {
+      parentRotate: parentRotate
+    }), function (child, childDatas, result, i) {
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+      var _a = getCustomEvent(dragDatas),
+          prevX = _a.prevX,
+          prevY = _a.prevY;
+
+      var _b = rotate([prevX, prevY], deg),
+          clientX = _b[0],
+          clientY = _b[1];
+
+      var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+      result.drag = dragResult;
+    });
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    moveable.rotation += params.beforeDelta;
+    triggerEvent(moveable, "onRotateGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupControlEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isRotate) {
+      return;
+    }
+
+    this.dragControlEnd(moveable, e);
+    triggerChildAble(moveable, this, "dragControlEnd", e);
+    var nextParams = {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    };
+    triggerEvent(moveable, "onRotateGroupEnd", nextParams);
+    return isDrag;
+  }
+};
+
+function renderAllDirection(moveable) {
+  return renderDiagonalDirection(moveable).concat(renderDirection(moveable));
+}
+function renderDiagonalDirection(moveable) {
+  var _a = moveable.props,
+      resizable = _a.resizable,
+      scalable = _a.scalable,
+      warpable = _a.warpable;
+
+  if (!resizable && !scalable && !warpable) {
+    return [];
+  }
+
+  var _b = moveable.state,
+      pos1 = _b.pos1,
+      pos2 = _b.pos2,
+      pos3 = _b.pos3,
+      pos4 = _b.pos4;
+  return [createElement("div", {
+    className: prefix("control", "direction", "nw"),
+    "data-direction": "nw",
+    key: "nw",
+    style: getControlTransform(pos1)
+  }), createElement("div", {
+    className: prefix("control", "direction", "ne"),
+    "data-direction": "ne",
+    key: "ne",
+    style: getControlTransform(pos2)
+  }), createElement("div", {
+    className: prefix("control", "direction", "sw"),
+    "data-direction": "sw",
+    key: "sw",
+    style: getControlTransform(pos3)
+  }), createElement("div", {
+    className: prefix("control", "direction", "se"),
+    "data-direction": "se",
+    key: "se",
+    style: getControlTransform(pos4)
+  })];
+}
+function renderDirection(moveable) {
+  var _a = moveable.props,
+      resizable = _a.resizable,
+      scalable = _a.scalable;
+
+  if (!resizable && !scalable) {
+    return [];
+  }
+
+  var _b = moveable.state,
+      pos1 = _b.pos1,
+      pos2 = _b.pos2,
+      pos3 = _b.pos3,
+      pos4 = _b.pos4;
+  return [createElement("div", {
+    className: prefix("control", "direction", "n"),
+    "data-direction": "n",
+    key: "n",
+    style: getControlTransform(pos1, pos2)
+  }), createElement("div", {
+    className: prefix("control", "direction", "w"),
+    "data-direction": "w",
+    key: "w",
+    style: getControlTransform(pos1, pos3)
+  }), createElement("div", {
+    className: prefix("control", "direction", "e"),
+    "data-direction": "e",
+    key: "e",
+    style: getControlTransform(pos2, pos4)
+  }), createElement("div", {
+    className: prefix("control", "direction", "s"),
+    "data-direction": "s",
+    key: "s",
+    style: getControlTransform(pos3, pos4)
+  })];
+}
+
+var Resizable = {
+  name: "resizable",
+  dragControlOnly: true,
+  updateRect: true,
+  canPinch: true,
+  render: function (moveable) {
+    var _a = moveable.props,
+        resizable = _a.resizable,
+        edge = _a.edge;
+
+    if (resizable) {
+      if (edge) {
+        return renderDiagonalDirection(moveable);
+      }
+
+      return renderAllDirection(moveable);
+    }
+  },
+  dragControlCondition: directionCondition,
+  dragControlStart: function (moveable, e) {
+    var inputTarget = e.inputEvent.target,
+        pinchFlag = e.pinchFlag;
+    var direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+    var _a = moveable.state,
+        target = _a.target,
+        width = _a.width,
+        height = _a.height;
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas;
+
+    if (!direction || !target) {
+      return false;
+    }
+
+    !pinchFlag && setDragStart(moveable, {
+      datas: datas
+    });
+    datas.datas = {};
+    datas.direction = direction;
+    datas.width = width;
+    datas.height = height;
+    datas.prevWidth = 0;
+    datas.prevHeight = 0;
+    var result = triggerEvent(moveable, "onResizeStart", {
+      datas: datas.datas,
+      target: target,
+      clientX: clientX,
+      clientY: clientY
+    });
+
+    if (result !== false) {
+      datas.isResize = true;
+    }
+
+    return datas.isResize;
+  },
+  dragControl: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        distX = _a.distX,
+        distY = _a.distY,
+        pinchFlag = _a.pinchFlag,
+        parentDistance = _a.parentDistance,
+        parentScale = _a.parentScale;
+    var direction = datas.direction,
+        width = datas.width,
+        height = datas.height,
+        prevWidth = datas.prevWidth,
+        prevHeight = datas.prevHeight,
+        isResize = datas.isResize;
+
+    if (!isResize) {
+      return;
+    }
+
+    var _b = moveable.props,
+        keepRatio = _b.keepRatio,
+        _c = _b.throttleResize,
+        throttleResize = _c === void 0 ? 0 : _c,
+        parentMoveable = _b.parentMoveable;
+    var target = moveable.state.target;
+    var distWidth = 0;
+    var distHeight = 0; // diagonal
+
+    if (parentScale) {
+      distWidth = (parentScale - 1) * width;
+      distHeight = (parentScale - 1) * height;
+    } else if (pinchFlag) {
+      if (parentDistance) {
+        distWidth = parentDistance;
+        distHeight = parentDistance * height / width;
+      }
+    } else {
+      var dist = getDragDist({
+        datas: datas,
+        distX: distX,
+        distY: distY
+      });
+      distWidth = direction[0] * dist[0];
+      distHeight = direction[1] * dist[1];
+
+      if (keepRatio && direction[0] && direction[1] && width && height) {
+        var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+        var rad = getRad([0, 0], dist);
+        var standardRad = getRad([0, 0], direction);
+        var distDiagonal = Math.cos(rad - standardRad) * size;
+        distWidth = distDiagonal;
+        distHeight = distDiagonal * height / width;
+      }
+    }
+
+    distWidth = throttle(distWidth, throttleResize);
+    distHeight = throttle(distHeight, throttleResize);
+    var nextWidth = width + distWidth;
+    var nextHeight = height + distHeight;
+    var delta = [distWidth - prevWidth, distHeight - prevHeight];
+    datas.prevWidth = distWidth;
+    datas.prevHeight = distHeight;
+
+    if (!parentMoveable && delta.every(function (num) {
+      return !num;
+    })) {
+      return;
+    }
+
+    var params = {
+      target: target,
+      width: nextWidth,
+      height: nextHeight,
+      direction: direction,
+      dist: [distWidth, distHeight],
+      datas: datas.datas,
+      delta: delta,
+      clientX: clientX,
+      clientY: clientY,
+      isPinch: !!pinchFlag
+    };
+    triggerEvent(moveable, "onResize", params);
+    return params;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isResize) {
+      return false;
+    }
+
+    datas.isResize = false;
+    triggerEvent(moveable, "onResizeEnd", {
+      target: moveable.state.target,
+      datas: datas.datas,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag
+    });
+    return isDrag;
+  },
+  dragGroupControlCondition: directionCondition,
+  dragGroupControlStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas,
+        inputEvent = e.inputEvent;
+    var _a = moveable.state,
+        parentLeft = _a.left,
+        parentTop = _a.top;
+    var enabledEvents = triggerChildAble(moveable, this, "dragControlStart", __assign$2({}, e, {
+      parentRotate: 0
+    }), function (child, childDatas) {
+      var _a = child.state,
+          left = _a.left,
+          top = _a.top;
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+      Draggable.dragStart(child, setCustomEvent(left - parentLeft, top - parentTop, dragDatas, inputEvent));
+    });
+
+    if (enabledEvents.every(function (ev) {
+      return !ev;
+    })) {
+      return false;
+    }
+
+    this.dragControlStart(moveable, e);
+    var result = triggerEvent(moveable, "onResizeGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isResize = result !== false;
+    return datas.isResize;
+  },
+  dragGroupControl: function (moveable, e) {
+    var inputEvent = e.inputEvent,
+        datas = e.datas;
+
+    if (!datas.isResize) {
+      return;
+    }
+
+    var params = this.dragControl(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var width = params.width,
+        height = params.height,
+        dist = params.dist;
+    var parentScale = [width / (width - dist[0]), height / (height - dist[1])];
+    var events = triggerChildAble(moveable, this, "dragControl", __assign$2({}, e, {
+      parentScale: parentScale
+    }), function (child, childDatas, result) {
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+      var _a = getCustomEvent(dragDatas),
+          startX = _a.startX,
+          startY = _a.startY;
+
+      var clientX = parentScale[0] * startX;
+      var clientY = parentScale[1] * startY;
+      var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+      result.drag = dragResult;
+    });
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    triggerEvent(moveable, "onResizeGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupControlEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isResize) {
+      return;
+    }
+
+    this.dragControlEnd(moveable, e);
+    triggerChildAble(moveable, this, "dragControlEnd", e);
+    var nextParams = {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    };
+    triggerEvent(moveable, "onResizeGroupEnd", nextParams);
+    return isDrag;
+  }
+};
+
+var Scalable = {
+  name: "scalable",
+  dragControlOnly: true,
+  canPinch: true,
+  render: function (moveable) {
+    var _a = moveable.props,
+        resizable = _a.resizable,
+        scalable = _a.scalable,
+        edge = _a.edge;
+
+    if (!resizable && scalable) {
+      if (edge) {
+        return renderDiagonalDirection(moveable);
+      }
+
+      return renderAllDirection(moveable);
+    }
+  },
+  dragControlCondition: directionCondition,
+  dragControlStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        pinchFlag = _a.pinchFlag,
+        inputTarget = _a.inputEvent.target;
+    var direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+    var _b = moveable.state,
+        width = _b.width,
+        height = _b.height,
+        targetTransform = _b.targetTransform,
+        target = _b.target;
+
+    if (!direction || !target) {
+      return false;
+    }
+
+    if (!pinchFlag) {
+      setDragStart(moveable, {
+        datas: datas
+      });
+    }
+
+    datas.datas = {};
+    datas.transform = targetTransform;
+    datas.prevDist = [1, 1];
+    datas.direction = direction;
+    datas.width = width;
+    datas.height = height;
+    var result = triggerEvent(moveable, "onScaleStart", {
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+
+    if (result !== false) {
+      datas.isScale = true;
+    }
+
+    return datas.isScale;
+  },
+  dragControl: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        distX = _a.distX,
+        distY = _a.distY,
+        parentScale = _a.parentScale,
+        parentDistance = _a.parentDistance,
+        pinchFlag = _a.pinchFlag;
+    var prevDist = datas.prevDist,
+        direction = datas.direction,
+        width = datas.width,
+        height = datas.height,
+        transform = datas.transform,
+        isScale = datas.isScale;
+
+    if (!isScale) {
+      return false;
+    }
+
+    var _b = moveable.props,
+        keepRatio = _b.keepRatio,
+        throttleScale = _b.throttleScale,
+        parentMoveable = _b.parentMoveable;
+    var target = moveable.state.target;
+    var scaleX = 1;
+    var scaleY = 1;
+
+    if (parentScale) {
+      scaleX = parentScale[0];
+      scaleY = parentScale[1];
+    } else if (pinchFlag) {
+      if (parentDistance) {
+        scaleX = (width + parentDistance) / width;
+        scaleY = (height + parentDistance * height / width) / height;
+      }
+    } else {
+      var dist = getDragDist({
+        datas: datas,
+        distX: distX,
+        distY: distY
+      });
+      var distWidth = direction[0] * dist[0];
+      var distHeight = direction[1] * dist[1]; // diagonal
+
+      if (keepRatio && direction[0] && direction[1] && width && height) {
+        var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+        var rad = getRad([0, 0], dist);
+        var standardRad = getRad([0, 0], direction);
+        var distDiagonal = Math.cos(rad - standardRad) * size;
+        distWidth = distDiagonal;
+        distHeight = distDiagonal * height / width;
+      }
+
+      var nextWidth = width + distWidth;
+      var nextHeight = height + distHeight;
+      scaleX = nextWidth / width;
+      scaleY = nextHeight / height;
+    }
+
+    scaleX = throttle(scaleX, throttleScale);
+    scaleY = throttle(scaleY, throttleScale);
+
+    if (scaleX === 0) {
+      scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE;
+    }
+
+    if (scaleY === 0) {
+      scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE;
+    }
+
+    var nowScale = [scaleX, scaleY];
+    datas.prevDist = nowScale;
+
+    if (scaleX === prevDist[0] && scaleY === prevDist[1] && !parentMoveable) {
+      return false;
+    }
+
+    var params = {
+      target: target,
+      scale: nowScale,
+      direction: direction,
+      dist: [scaleX - 1, scaleY - 1],
+      delta: [scaleX / prevDist[0], scaleY / prevDist[1]],
+      transform: transform + " scale(" + scaleX + ", " + scaleY + ")",
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas,
+      isPinch: !!pinchFlag
+    };
+    triggerEvent(moveable, "onScale", params);
+    return params;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        pinchFlag = _a.pinchFlag;
+
+    if (!datas.isScale) {
+      return false;
+    }
+
+    datas.isScale = false;
+    triggerEvent(moveable, "onScaleEnd", {
+      target: moveable.state.target,
+      isDrag: isDrag,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    return isDrag;
+  },
+  dragGroupControlCondition: directionCondition,
+  dragGroupControlStart: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        datas = e.datas,
+        inputEvent = e.inputEvent;
+    var _a = moveable.state,
+        parentLeft = _a.left,
+        parentTop = _a.top,
+        parentOrigin = _a.origin;
+    var parentAbsoluteOrigin = [parentLeft + parentOrigin[0], parentTop + parentOrigin[1]];
+    datas.rotation = moveable.rotation;
+    var enabledEvents = triggerChildAble(moveable, this, "dragControlStart", e, function (child, childDatas) {
+      var _a = child.state,
+          left = _a.left,
+          top = _a.top,
+          origin = _a.origin;
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+      Draggable.dragStart(child, setCustomEvent(left + origin[0] - parentAbsoluteOrigin[0], top + origin[1] - parentAbsoluteOrigin[1], dragDatas, inputEvent));
+    });
+
+    if (enabledEvents.every(function (ev) {
+      return !ev;
+    })) {
+      return false;
+    }
+
+    this.dragControlStart(moveable, e);
+    var result = triggerEvent(moveable, "onScaleGroupStart", {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+    datas.isScale = result !== false;
+    return datas.isScale;
+  },
+  dragGroupControl: function (moveable, e) {
+    var inputEvent = e.inputEvent,
+        datas = e.datas;
+
+    if (!datas.isScale) {
+      return;
+    }
+
+    var params = this.dragControl(moveable, e);
+
+    if (!params) {
+      return;
+    }
+
+    var scale = params.scale;
+    var events = triggerChildAble(moveable, this, "dragControl", __assign$2({}, e, {
+      parentScale: scale
+    }), function (child, childDatas, result) {
+      var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+      var _a = getCustomEvent(dragDatas),
+          startX = _a.startX,
+          startY = _a.startY;
+
+      var startPos = rotate([startX, startY], -datas.rotation);
+
+      var _b = rotate([startPos[0] * scale[0], startPos[1] * scale[1]], moveable.rotation),
+          clientX = _b[0],
+          clientY = _b[1];
+
+      var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+      result.drag = dragResult;
+    });
+
+    var nextParams = __assign$2({
+      targets: moveable.props.targets,
+      events: events
+    }, params);
+
+    triggerEvent(moveable, "onScaleGroup", nextParams);
+    return nextParams;
+  },
+  dragGroupControlEnd: function (moveable, e) {
+    var clientX = e.clientX,
+        clientY = e.clientY,
+        isDrag = e.isDrag,
+        datas = e.datas;
+
+    if (!datas.isScale) {
+      return;
+    }
+
+    this.dragControlEnd(moveable, e);
+    triggerChildAble(moveable, this, "dragControlEnd", e);
+    var nextParams = {
+      targets: moveable.props.targets,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    };
+    triggerEvent(moveable, "onScaleGroupEnd", nextParams);
+    return isDrag;
+  }
+};
+
+function getMiddleLinePos(pos1, pos2) {
+  return pos1.map(function (pos, i) {
+    return dot(pos, pos2[i], 1, 2);
+  });
+}
+
+function getTriangleRad(pos1, pos2, pos3) {
+  // pos1 Rad
+  var rad1 = getRad(pos1, pos2);
+  var rad2 = getRad(pos1, pos3);
+  var rad = rad2 - rad1;
+  return rad >= 0 ? rad : rad + 2 * Math.PI;
+}
+
+function isValidPos(poses1, poses2) {
+  var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]);
+  var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]);
+  var pi = Math.PI;
+
+  if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) {
+    return false;
+  }
+
+  return true;
+}
+
+var Warpable = {
+  name: "warpable",
+  dragControlOnly: true,
+  render: function (moveable) {
+    var _a = moveable.props,
+        resizable = _a.resizable,
+        scalable = _a.scalable,
+        warpable = _a.warpable;
+
+    if (resizable || scalable || !warpable) {
+      return;
+    }
+
+    var _b = moveable.state,
+        pos1 = _b.pos1,
+        pos2 = _b.pos2,
+        pos3 = _b.pos3,
+        pos4 = _b.pos4;
+    var linePosFrom1 = getMiddleLinePos(pos1, pos2);
+    var linePosFrom2 = getMiddleLinePos(pos2, pos1);
+    var linePosFrom3 = getMiddleLinePos(pos1, pos3);
+    var linePosFrom4 = getMiddleLinePos(pos3, pos1);
+    var linePosTo1 = getMiddleLinePos(pos3, pos4);
+    var linePosTo2 = getMiddleLinePos(pos4, pos3);
+    var linePosTo3 = getMiddleLinePos(pos2, pos4);
+    var linePosTo4 = getMiddleLinePos(pos4, pos2);
+    return [createElement("div", {
+      className: prefix("line"),
+      key: "middeLine1",
+      style: getLineStyle(linePosFrom1, linePosTo1)
+    }), createElement("div", {
+      className: prefix("line"),
+      key: "middeLine2",
+      style: getLineStyle(linePosFrom2, linePosTo2)
+    }), createElement("div", {
+      className: prefix("line"),
+      key: "middeLine3",
+      style: getLineStyle(linePosFrom3, linePosTo3)
+    }), createElement("div", {
+      className: prefix("line"),
+      key: "middeLine4",
+      style: getLineStyle(linePosFrom4, linePosTo4)
+    })].concat(renderDiagonalDirection(moveable));
+  },
+  dragControlCondition: function (target) {
+    return hasClass(target, prefix("direction"));
+  },
+  dragControlStart: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        inputTarget = _a.inputEvent.target;
+    var _b = moveable.props,
+        target = _b.target,
+        onWarpStart = _b.onWarpStart;
+    var direction = getDirection(inputTarget);
+
+    if (!direction || !target) {
+      return false;
+    }
+
+    var _c = moveable.state,
+        transformOrigin = _c.transformOrigin,
+        is3d = _c.is3d,
+        targetTransform = _c.targetTransform,
+        targetMatrix = _c.targetMatrix,
+        width = _c.width,
+        height = _c.height;
+    datas.datas = {};
+    datas.targetTransform = targetTransform;
+    datas.targetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4);
+    datas.targetInverseMatrix = ignoreDimension(invert(datas.targetMatrix, 4), 3, 4);
+    datas.direction = direction;
+    setDragStart(moveable, {
+      datas: datas
+    });
+    datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) {
+      return minus(p, transformOrigin);
+    });
+    datas.nextPoses = datas.poses.map(function (_a) {
+      var x = _a[0],
+          y = _a[1];
+      return caculate(datas.targetMatrix, [x, y, 0, 1], 4);
+    });
+    datas.posNum = (direction[0] === -1 ? 0 : 1) + (direction[1] === -1 ? 0 : 2);
+    datas.prevMatrix = createIdentityMatrix(4);
+    var result = onWarpStart && onWarpStart({
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      datas: datas.datas
+    });
+
+    if (result !== false) {
+      datas.isWarp = true;
+    }
+
+    return result;
+  },
+  dragControl: function (moveable, _a) {
+    var datas = _a.datas,
+        clientX = _a.clientX,
+        clientY = _a.clientY,
+        distX = _a.distX,
+        distY = _a.distY;
+    var posNum = datas.posNum,
+        poses = datas.poses,
+        targetInverseMatrix = datas.targetInverseMatrix,
+        prevMatrix = datas.prevMatrix,
+        isWarp = datas.isWarp;
+
+    if (!isWarp) {
+      return false;
+    }
+
+    var _b = moveable.props,
+        target = _b.target,
+        onWarp = _b.onWarp;
+    var dist = getDragDist({
+      datas: datas,
+      distX: distX,
+      distY: distY
+    }, true);
+    var nextPoses = datas.nextPoses.slice();
+    nextPoses[posNum] = [nextPoses[posNum][0] + dist[0], nextPoses[posNum][1] + dist[1]];
+
+    if (!NEARBY_POS.every(function (nearByPoses) {
+      return isValidPos(nearByPoses.map(function (i) {
+        return poses[i];
+      }), nearByPoses.map(function (i) {
+        return nextPoses[i];
+      }));
+    })) {
+      return false;
+    }
+
+    var h = warp(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]);
+
+    if (!h.length) {
+      return false;
+    }
+
+    var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4));
+    var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")";
+    var delta = multiply(invert(prevMatrix, 4), matrix, 4);
+    datas.prevMatrix = matrix;
+    onWarp && onWarp({
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      delta: delta,
+      multiply: multiplyCSS,
+      dist: matrix,
+      transform: transform,
+      datas: datas.datas
+    });
+    return true;
+  },
+  dragControlEnd: function (moveable, _a) {
+    var datas = _a.datas,
+        isDrag = _a.isDrag,
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+
+    if (!datas.isWarp) {
+      return false;
+    }
+
+    datas.isWarp = false;
+    var _b = moveable.props,
+        target = _b.target,
+        onWarpEnd = _b.onWarpEnd;
+    onWarpEnd && onWarpEnd({
+      target: target,
+      clientX: clientX,
+      clientY: clientY,
+      isDrag: isDrag,
+      datas: datas.datas
+    });
+    return isDrag;
+  }
+};
+
+var agent = getAgent();
+var isNotSupportTransformOrigin = agent.os.name.indexOf("ios") > -1 || agent.browser.name.indexOf("safari") > -1;
+var PREFIX = "moveable-";
+var MOVEABLE_CSS = prefixCSS(PREFIX, "\n{\n\tposition: fixed;\n\twidth: 0;\n\theight: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 3000;\n}\n.control-box {\n    z-index: 0;\n}\n.line, .control {\n\tleft: 0;\n\ttop: 0;\n}\n.control {\n\tposition: absolute;\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n\tbackground: #4af;\n\tmargin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n.line {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tbackground: #4af;\n\ttransform-origin: 0px 0.5px;\n}\n.line.rotation-line {\n\theight: 40px;\n\twidth: 1px;\n\ttransform-origin: 0.5px 39.5px;\n}\n.line.rotation-line .control {\n\tborder-color: #4af;\n\tbackground:#fff;\n\tcursor: alias;\n}\n.control.origin {\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n\tmargin-left: -6px;\n\tpointer-events: none;\n}\n.direction.e, .direction.w {\n\tcursor: ew-resize;\n}\n.direction.s, .direction.n {\n\tcursor: ns-resize;\n}\n.direction.nw, .direction.se, :host.reverse .direction.ne, :host.reverse .direction.sw {\n\tcursor: nwse-resize;\n}\n.direction.ne, .direction.sw, :host.reverse .direction.nw, :host.reverse .direction.se {\n\tcursor: nesw-resize;\n}\n.group {\n    z-index: -1;\n}\n" + (isNotSupportTransformOrigin ? ":global svg *:before {\n\tcontent:\"\";\n\ttransform-origin: inherit;\n}" : "") + "\n");
+var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]];
+var MIN_SCALE = 0.000000001;
+var MOVEABLE_ABLES = [Pinchable, Draggable, Rotatable, Resizable, Scalable, Warpable];
+var MAX_NUM = Math.pow(10, 10);
+var MIN_NUM = -MAX_NUM;
+
+var Origin = {
+  name: "origin",
+  render: function (moveable) {
+    if (!moveable.props.origin) {
+      return null;
+    }
+
+    var beforeOrigin = moveable.state.beforeOrigin;
+    return [// <div className={prefix("control", "origin")} style={getControlTransform(origin)} key="origin"></div>,
+    createElement("div", {
+      className: prefix("control", "origin"),
+      style: getControlTransform(beforeOrigin),
+      key: "beforeOrigin"
+    })];
+  }
+};
+
+function triggerAble(moveable, ableType, eventOperation, prefix, eventType, e) {
+  var eventName = "" + eventOperation + prefix + eventType;
+  var conditionName = "" + eventOperation + prefix + "Condition";
+  var isStart = eventType === "Start";
+  var isGroup = prefix.indexOf("Group") > -1;
+  var ables = moveable[ableType];
+  var results = ables.filter(function (able) {
+    var condition = isStart && able[conditionName];
+
+    if (able[eventName] && (!condition || condition(e.inputEvent.target))) {
+      return able[eventName](moveable, e);
+    }
+
+    return false;
+  });
+
+  if (!isStart && results.length) {
+    if (results.some(function (able) {
+      return able.updateRect;
+    }) && !isGroup) {
+      moveable.updateRect(eventType);
+    } else {
+      moveable.updateTarget(eventType);
+    }
+  }
+}
+
+function getAbleDragger(moveable, target, ableType, prefix) {
+  var options = {
+    container: window
+  };
+  ["drag", "pinch"].forEach(function (eventOperation) {
+    ["Start", "", "End"].forEach(function (eventType) {
+      options["" + eventOperation + eventType.toLowerCase()] = function (e) {
+        return triggerAble(moveable, ableType, eventOperation, prefix, eventType, e);
+      };
+    });
+  });
+  return new Dragger(target, options);
+}
+
+var ControlBoxElement = styled("div", MOVEABLE_CSS);
+
+function renderLine(direction, pos1, pos2) {
+  return createElement("div", {
+    className: prefix("line", "direction", direction),
+    "data-direction": direction,
+    style: getLineStyle(pos1, pos2)
+  });
+}
+
+var MoveableManager =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(MoveableManager, _super);
+
+  function MoveableManager() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      target: null,
+      beforeMatrix: createIdentityMatrix3(),
+      matrix: createIdentityMatrix3(),
+      targetMatrix: createIdentityMatrix3(),
+      targetTransform: "",
+      is3d: false,
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+      transformOrigin: [0, 0],
+      direction: 1,
+      beforeDirection: 1,
+      rotationRad: 0,
+      rotationPos: [0, 0],
+      beforeOrigin: [0, 0],
+      origin: [0, 0],
+      pos1: [0, 0],
+      pos2: [0, 0],
+      pos3: [0, 0],
+      pos4: [0, 0]
+    };
+    _this.targetAbles = [];
+    _this.controlAbles = [];
+    return _this;
+  }
+
+  var __proto = MoveableManager.prototype;
+
+  __proto.render = function () {
+    this.update(false);
+    var _a = this.props,
+        edge = _a.edge,
+        parentPosition = _a.parentPosition;
+
+    var _b = parentPosition || {
+      left: 0,
+      top: 0
+    },
+        parentLeft = _b.left,
+        parentTop = _b.top;
+
+    var _c = this.state,
+        left = _c.left,
+        top = _c.top,
+        pos1 = _c.pos1,
+        pos2 = _c.pos2,
+        pos3 = _c.pos3,
+        pos4 = _c.pos4,
+        target = _c.target,
+        direction = _c.direction;
+    return createElement(ControlBoxElement, {
+      ref: ref(this, "controlBox"),
+      className: prefix("control-box", direction === -1 ? "reverse" : ""),
+      style: {
+        position: "absolute",
+        display: target ? "block" : "none",
+        transform: "translate(" + (left - parentLeft) + "px, " + (top - parentTop) + "px) translateZ(50px)"
+      }
+    }, this.renderAbles(), renderLine(edge ? "n" : "", pos1, pos2), renderLine(edge ? "e" : "", pos2, pos4), renderLine(edge ? "w" : "", pos1, pos3), renderLine(edge ? "s" : "", pos3, pos4));
+  };
+
+  __proto.componentDidMount = function () {
+    this.controlBox.getElement();
+    this.update(true);
+  };
+
+  __proto.componentWillUnmount = function () {
+    unset(this, "targetDragger");
+    unset(this, "controlDragger");
+  };
+
+  __proto.getContainer = function () {
+    var _a = this.props,
+        parentMoveable = _a.parentMoveable,
+        container = _a.container;
+    return container || parentMoveable && parentMoveable.getContainer() || this.controlBox.getElement().offsetParent;
+  };
+
+  __proto.isMoveableElement = function (target) {
+    return target && (target.getAttribute("class") || "").indexOf(PREFIX) > -1;
+  };
+
+  __proto.dragStart = function (e) {
+    this.targetDragger.onDragStart(e);
+  };
+
+  __proto.isInside = function (clientX, clientY) {
+    var _a = this.state,
+        pos1 = _a.pos1,
+        pos2 = _a.pos2,
+        pos3 = _a.pos3,
+        pos4 = _a.pos4,
+        target = _a.target;
+
+    if (!target) {
+      return false;
+    }
+
+    var _b = target.getBoundingClientRect(),
+        left = _b.left,
+        top = _b.top;
+
+    var pos = [clientX - left, clientY - top];
+    return isInside(pos, pos1, pos2, pos3, pos4);
+  };
+
+  __proto.updateRect = function (type, isTarget, isSetState) {
+    if (isSetState === void 0) {
+      isSetState = true;
+    }
+
+    var parentMoveable = this.props.parentMoveable;
+    var state = this.state;
+    var target = state.target || this.props.target;
+    this.updateState(getTargetInfo(target, this.getContainer(), isTarget ? state : undefined), parentMoveable ? false : isSetState);
+  };
+
+  __proto.updateTarget = function (type) {
+    this.updateRect(type, true);
+  };
+
+  __proto.update = function (isSetState) {
+    var props = this.props;
+    var target = props.target,
+        parentMoveable = props.parentMoveable;
+    var stateTarget = this.state.target;
+    var controlBox = this.controlBox;
+
+    if (!controlBox || !stateTarget && !target) {
+      return;
+    }
+
+    this.updateAbles();
+    var controlBoxElement = controlBox.getElement();
+    var hasTargetAble = this.targetAbles.length;
+    var hasControlAble = this.controlAbles.length;
+    var isTargetChanged = stateTarget !== target;
+
+    if (isTargetChanged) {
+      this.updateState({
+        target: target
+      });
+    }
+
+    if (!hasTargetAble || isTargetChanged) {
+      unset(this, "targetDragger");
+    }
+
+    if (!hasControlAble) {
+      unset(this, "controlDragger");
+    }
+
+    if (target && (!this.targetDragger && hasTargetAble || isTargetChanged)) {
+      this.targetDragger = getAbleDragger(this, target, "targetAbles", "");
+    }
+
+    if (!this.controlDragger && hasControlAble) {
+      this.controlDragger = getAbleDragger(this, controlBoxElement, "controlAbles", "Control");
+    }
+
+    if (isTargetChanged && !parentMoveable) {
+      this.updateRect("End", false, isSetState);
+    }
+
+    return isTargetChanged;
+  };
+
+  __proto.triggerEvent = function (name, e) {
+    var callback = this.props[name];
+    return callback && callback(e);
+  };
+
+  __proto.updateAbles = function () {
+    var props = this.props;
+    var enabledAbles = props.ables.filter(function (able) {
+      return props[able.name];
+    });
+    var controlAbleOnly = false;
+    var targetAbles = enabledAbles.filter(function (able) {
+      return able.dragStart || able.pinchStart;
+    });
+    var controlAbles = enabledAbles.filter(function (_a) {
+      var dragControlStart = _a.dragControlStart,
+          dragControlOnly = _a.dragControlOnly;
+
+      if (!dragControlStart || dragControlOnly && controlAbleOnly) {
+        return false;
+      }
+
+      if (dragControlOnly) {
+        controlAbleOnly = true;
+      }
+
+      return true;
+    });
+    this.targetAbles = targetAbles;
+    this.controlAbles = controlAbles;
+  };
+
+  __proto.updateState = function (nextState, isSetState) {
+    if (isSetState) {
+      this.setState(nextState);
+    } else {
+      var state = this.state;
+
+      for (var name in nextState) {
+        state[name] = nextState[name];
+      }
+    }
+  };
+
+  __proto.renderAbles = function () {
+    var _this = this;
+
+    var ables = this.props.ables.concat([Origin]);
+    return ables.map(function (_a) {
+      var render = _a.render;
+      return render && render(_this);
+    });
+  };
+
+  MoveableManager.defaultProps = {
+    target: null,
+    container: null,
+    origin: true,
+    keepRatio: true,
+    edge: false,
+    parentMoveable: null,
+    parentPosition: null,
+    ables: []
+  };
+  return MoveableManager;
+}(PureComponent);
+
+var Groupable = {
+  name: "groupable",
+  render: function (moveable) {
+    var targets = moveable.props.targets || [];
+    moveable.moveables = [];
+    var _a = moveable.state,
+        left = _a.left,
+        top = _a.top;
+    var position = {
+      left: left,
+      top: top
+    };
+    return targets.map(function (target, i) {
+      return createElement(MoveableManager, {
+        key: i,
+        ref: refs(moveable, "moveables", i),
+        target: target,
+        origin: false,
+        parentMoveable: moveable,
+        parentPosition: position
+      });
+    }).concat([createElement("div", {
+      key: "groupTarget",
+      ref: ref(moveable, "groupTargetElement"),
+      className: prefix("group")
+    })]);
+  }
+};
+
+function getMaxPos(poses, index) {
+  return Math.max.apply(Math, poses.map(function (_a) {
+    var pos1 = _a[0],
+        pos2 = _a[1],
+        pos3 = _a[2],
+        pos4 = _a[3];
+    return Math.max(pos1[index], pos2[index], pos3[index], pos4[index]);
+  }));
+}
+
+function getMinPos(poses, index) {
+  return Math.min.apply(Math, poses.map(function (_a) {
+    var pos1 = _a[0],
+        pos2 = _a[1],
+        pos3 = _a[2],
+        pos4 = _a[3];
+    return Math.min(pos1[index], pos2[index], pos3[index], pos4[index]);
+  }));
+}
+
+function getGroupRect(moveables, rotation) {
+  if (!moveables.length) {
+    return [0, 0, 0, 0];
+  }
+
+  var moveablePoses = moveables.map(function (_a) {
+    var _b = _a.state,
+        left = _b.left,
+        top = _b.top,
+        pos1 = _b.pos1,
+        pos2 = _b.pos2,
+        pos3 = _b.pos3,
+        pos4 = _b.pos4;
+    var pos = [left, top];
+    return [sum(pos, pos1), sum(pos, pos2), sum(pos, pos3), sum(pos, pos4)];
+  });
+  var minX = MAX_NUM;
+  var minY = MAX_NUM;
+  var groupWidth = 0;
+  var groupHeight = 0;
+
+  if (rotation % 90) {
+    var rad = rotation / 180 * Math.PI;
+    var a1_1 = Math.tan(rad);
+    var a2_1 = -1 / a1_1;
+    var b1s_1 = [MIN_NUM, MAX_NUM];
+    var b2s_1 = [MIN_NUM, MAX_NUM];
+    moveablePoses.forEach(function (poses) {
+      poses.forEach(function (pos) {
+        // ax + b = y
+        // ㅠ = y - ax
+        var b1 = pos[1] - a1_1 * pos[0];
+        var b2 = pos[1] - a2_1 * pos[0];
+        b1s_1[0] = Math.max(b1s_1[0], b1);
+        b1s_1[1] = Math.min(b1s_1[1], b1);
+        b2s_1[0] = Math.max(b2s_1[0], b2);
+        b2s_1[1] = Math.min(b2s_1[1], b2);
+      });
+    });
+    b1s_1.forEach(function (b1) {
+      // a1x + b1 = a2x + b2
+      b2s_1.forEach(function (b2) {
+        // (a1 - a2)x = b2 - b1
+        var x = (b2 - b1) / (a1_1 - a2_1);
+        var y = a1_1 * x + b1;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+      });
+    });
+    var rotatePoses = moveablePoses.map(function (_a) {
+      var pos1 = _a[0],
+          pos2 = _a[1],
+          pos3 = _a[2],
+          pos4 = _a[3];
+      return [rotate(pos1, -rotation), rotate(pos2, -rotation), rotate(pos3, -rotation), rotate(pos4, -rotation)];
+    });
+    groupWidth = getMaxPos(rotatePoses, 0) - getMinPos(rotatePoses, 0);
+    groupHeight = getMaxPos(rotatePoses, 1) - getMinPos(rotatePoses, 1);
+  } else {
+    minX = getMinPos(moveablePoses, 0);
+    minY = getMinPos(moveablePoses, 1);
+    groupWidth = getMaxPos(moveablePoses, 0) - minX;
+    groupHeight = getMaxPos(moveablePoses, 1) - minY;
+  }
+
+  return [minX, minY, groupWidth, groupHeight];
+}
+
+var MoveableGroup =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(MoveableGroup, _super);
+
+  function MoveableGroup() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.differ = new ChildrenDiffer();
+    _this.moveables = [];
+    _this.rotation = 0;
+    return _this;
+  }
+
+  var __proto = MoveableGroup.prototype;
+
+  __proto.componentDidMount = function () {
+    _super.prototype.componentDidMount.call(this);
+  };
+
+  __proto.componentDidUpdate = function () {
+    this.update(true);
+  };
+
+  __proto.update = function (isSetState) {
+    if (!isSetState) {
+      return;
+    }
+
+    var state = this.state;
+
+    if (!state.target) {
+      state.target = this.groupTargetElement;
+      this.controlBox.getElement().style.display = "block";
+      this.targetDragger = getAbleDragger(this, state.target, "targetAbles", "Group");
+      this.controlDragger = getAbleDragger(this, this.controlBox.getElement(), "controlAbles", "GroupControl");
+    }
+
+    this.updateAbles();
+    this.moveables.forEach(function (moveable) {
+      return moveable.update(false);
+    });
+
+    var _a = this.differ.update(this.props.targets),
+        added = _a.added,
+        changed = _a.changed;
+
+    if (added.length || changed.length) {
+      this.updateRect();
+    }
+
+    return true;
+  };
+
+  __proto.updateRect = function (type, isTarget, isSetState) {
+
+    if (!this.controlBox) {
+      return;
+    }
+
+    this.moveables.forEach(function (moveable) {
+      moveable.updateRect(type, false, false);
+    });
+    var state = this.state;
+    var target = state.target || this.props.target;
+
+    if (!isTarget || type !== "" && this.props.updateGroup) {
+      // reset rotataion
+      this.rotation = 0;
+    }
+
+    var rotation = this.rotation;
+
+    var _a = getGroupRect(this.moveables, rotation),
+        left = _a[0],
+        top = _a[1],
+        width = _a[2],
+        height = _a[3];
+
+    target.style.cssText += "width:" + width + "px; height:" + height + "px;transform:rotate(" + rotation + "deg)";
+    state.width = width;
+    state.height = height;
+    var info = getTargetInfo(target, this.controlBox.getElement(), state);
+    target.style.cssText += "transform: translate(" + -info.left + "px, " + -info.top + "px) rotate(" + rotation + "deg)";
+    this.updateState(__assign$2({}, info, {
+      left: left,
+      top: top
+    }), true);
+  };
+
+  __proto.triggerEvent = function (name, e) {
+    if (name.indexOf("Group") > -1) {
+      return _super.prototype.triggerEvent.call(this, name, e);
+    }
+  };
+
+  __proto.renderAbles = function () {
+    var _this = this;
+
+    var ables = this.props.ables.concat([Groupable, Origin]);
+    return ables.map(function (_a) {
+      var render = _a.render;
+      return render && render(_this);
+    });
+  };
+
+  MoveableGroup.defaultProps = __assign$2({}, MoveableManager.defaultProps, {
+    groupable: true,
+    ables: MOVEABLE_ABLES,
+    targets: []
+  });
+  return MoveableGroup;
+}(MoveableManager);
+
+var Moveable =
+/*#__PURE__*/
+function (_super) {
+  __extends$3(Moveable, _super);
+
+  function Moveable() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  var __proto = Moveable.prototype;
+
+  __proto.render = function () {
+    var target = this.props.target || this.props.targets;
+    var isArr = isArray(target);
+    var isGroup = isArr && target.length > 1;
+
+    if (isGroup) {
+      return createElement(MoveableGroup, __assign$2({
+        key: "group",
+        ref: ref(this, "moveable")
+      }, __assign$2({}, this.props, {
+        target: null,
+        targets: target
+      })));
+    } else {
+      var moveableTarget = isArr ? target[0] : target;
+      return createElement(MoveableManager, __assign$2({
+        key: "single",
+        ref: ref(this, "moveable")
+      }, __assign$2({}, this.props, {
+        target: moveableTarget
+      })));
+    }
+  };
+
+  __proto.isMoveableElement = function (target) {
+    return this.moveable.isMoveableElement(target);
+  };
+
+  __proto.dragStart = function (e) {
+    this.moveable.dragStart(e);
+  };
+
+  __proto.isInside = function (clientX, clientY) {
+    return this.moveable.isInside(clientX, clientY);
+  };
+
+  __proto.updateRect = function () {
+    this.moveable.updateRect();
+  };
+
+  __proto.updateTarget = function () {
+    this.moveable.updateTarget();
+  };
+
+  Moveable.defaultProps = __assign$2({}, MoveableManager.defaultProps, {
+    ables: MOVEABLE_ABLES
+  });
+  return Moveable;
+}(PureComponent);
+
+var InnerMoveable =
+/*#__PURE__*/
+function (_super) {
+  __extends(InnerMoveable, _super);
+
+  function InnerMoveable(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = {};
+    _this.state = _this.props;
+    return _this;
+  }
+
+  var __proto = InnerMoveable.prototype;
+
+  __proto.render = function () {
+    return h(Moveable, __assign({
+      ref: ref(this, "preactMoveable")
+    }, this.state));
+  };
+
+  return InnerMoveable;
+}(Component);
+
+var PROPERTIES = ["draggable", "resizable", "scalable", "rotatable", "warpable", "pinchable", "origin", "target", "edge", "throttleDrag", "throttleResize", "throttleScale", "throttleRotate", "keepRatio"];
+var EVENTS = ["dragStart", "drag", "dragEnd", "resizeStart", "resize", "resizeEnd", "scaleStart", "scale", "scaleEnd", "rotateStart", "rotate", "rotateEnd", "warpStart", "warp", "warpEnd", "pinchStart", "pinch", "pinchEnd", "dragGroupStart", "dragGroup", "dragGroupEnd", "resizeGroupStart", "resizeGroup", "resizeGroupEnd", "scaleGroupStart", "scaleGroup", "scaleGroupEnd", "rotateGroupStart", "rotateGroup", "rotateGroupEnd", "pinchGroupStart", "pinchGroup", "pinchGroupEnd"];
+
+/**
+ * Moveable is Draggable! Resizable! Scalable! Rotatable!
+ * @sort 1
+ * @extends eg.Component
+ */
+
+var Moveable$1 =
+/*#__PURE__*/
+function (_super) {
+  __extends(Moveable, _super);
+  /**
+   *
+   */
+
+
+  function Moveable(parentElement, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var _this = _super.call(this) || this;
+
+    var element = document.createElement("div");
+
+    var nextOptions = __assign({
+      container: parentElement
+    }, options);
+
+    var events = {};
+    EVENTS.forEach(function (name) {
+      events[camelize("on " + name)] = function (e) {
+        return _this.trigger(name, e);
+      };
+    });
+    render(h(InnerMoveable, __assign({
+      ref: ref(_this, "innerMoveable")
+    }, nextOptions, events)), element);
+    parentElement.appendChild(element.children[0]);
+    var target = nextOptions.target;
+
+    if (isArray(target) && target.length > 1) {
+      _this.updateRect();
+    }
+
+    return _this;
+  }
+  /**
+   * Check if the target is an element included in the moveable.
+   * @param - the target
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * window.addEventListener("click", e => {
+   *     if (!moveable.isMoveableElement(e.target)) {
+   *         moveable.target = e.target;
+   *     }
+   * });
+   */
+
+
+  var __proto = Moveable.prototype;
+
+  __proto.isMoveableElement = function (target) {
+    return this.getMoveable().isMoveableElement(target);
+  };
+  /**
+   * If the width, height, left, and top of all elements change, update the shape of the moveable.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * window.addEventListener("resize", e => {
+   *     moveable.updateRect();
+   * });
+   */
+
+
+  __proto.updateRect = function () {
+    this.getMoveable().updateRect();
+  };
+  /**
+   * If the width, height, left, and top of the only target change, update the shape of the moveable.
+   * @param - the values of x and y to move moveable.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * moveable.updateTarget();
+   */
+
+
+  __proto.updateTarget = function () {
+    this.getMoveable().updateTarget();
+  };
+  /**
+   * Remove the Moveable object and the events.
+   * @example
+   * import Moveable from "moveable";
+   *
+   * const moveable = new Moveable(document.body);
+   *
+   * moveable.destroy();
+   */
+
+
+  __proto.destroy = function () {
+    var el = this.getMoveable().base;
+    el.remove ? el.remove() : el.parentElement.removeChild(el);
+    this.off();
+    this.getMoveable().componentWillUnmount();
+    this.innerMoveable = null;
+  };
+
+  __proto.getMoveable = function () {
+    return this.innerMoveable.preactMoveable;
+  };
+
+  Moveable = __decorate([Properties(PROPERTIES, function (prototype, property) {
+    Object.defineProperty(prototype, property, {
+      get: function () {
+        return this.getMoveable().props[property];
+      },
+      set: function (value) {
+        var _a;
+
+        this.innerMoveable.setState((_a = {}, _a[property] = value, _a));
+      },
+      enumerable: true,
+      configurable: true
+    });
+  })], Moveable);
+  return Moveable;
+}(EgComponent);
+
+export default Moveable$1;
+export { EVENTS, PROPERTIES };
+//# sourceMappingURL=moveable.esm.js.map
diff --git a/dist/moveable.esm.js.map b/dist/moveable.esm.js.map
new file mode 100644
index 000000000..835d1f4a1
--- /dev/null
+++ b/dist/moveable.esm.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.esm.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx"],"sourcesContent":["import { Component, h } from \"preact\";\nimport Moveable, { MoveableProps, MoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component<MoveableProps> {\n    public state: MoveableProps = {};\n    public preactMoveable: MoveableInterface;\n    constructor(props: MoveableProps) {\n        super(props);\n        this.state = this.props;\n    }\n    public render() {\n        return <Moveable ref={ref(this, \"preactMoveable\")} {...this.state} />;\n    }\n}\n","import { MoveableEvents } from \"./types\";\n\nexport const PROPERTIES = [\n  \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n  \"warpable\", \"pinchable\", \"origin\", \"target\", \"edge\",\n  \"throttleDrag\", \"throttleResize\", \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n];\nexport const EVENTS: Array<keyof MoveableEvents> = [\n  \"dragStart\",\n  \"drag\",\n  \"dragEnd\",\n  \"resizeStart\",\n  \"resize\",\n  \"resizeEnd\",\n  \"scaleStart\",\n  \"scale\",\n  \"scaleEnd\",\n  \"rotateStart\",\n  \"rotate\",\n  \"rotateEnd\",\n  \"warpStart\",\n  \"warp\",\n  \"warpEnd\",\n  \"pinchStart\",\n  \"pinch\",\n  \"pinchEnd\",\n\n  \"dragGroupStart\",\n  \"dragGroup\",\n  \"dragGroupEnd\",\n  \"resizeGroupStart\",\n  \"resizeGroup\",\n  \"resizeGroupEnd\",\n  \"scaleGroupStart\",\n  \"scaleGroup\",\n  \"scaleGroupEnd\",\n  \"rotateGroupStart\",\n  \"rotateGroup\",\n  \"rotateGroupEnd\",\n  \"pinchGroupStart\",\n  \"pinchGroup\",\n  \"pinchGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n    OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n    OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n    OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n    OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n    OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n    OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n    Object.defineProperty(prototype, property, {\n        get() {\n            return this.getMoveable().props[property];\n        },\n        set(value) {\n            this.innerMoveable.setState({\n                [property]: value,\n            });\n        },\n        enumerable: true,\n        configurable: true,\n    });\n})\nclass Moveable extends EgComponent {\n    private innerMoveable!: InnerMoveable;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n        const nextOptions = { container: parentElement, ...options };\n\n        const events: any = {};\n\n        EVENTS.forEach(name => {\n            events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n        });\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...nextOptions}\n                {...events}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n\n        const target = nextOptions.target!;\n        if (isArray(target) && target.length > 1) {\n            this.updateRect();\n        }\n    }\n    /**\n     * Check if the target is an element included in the moveable.\n     * @param - the target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"click\", e => {\n     *     if (!moveable.isMoveableElement(e.target)) {\n     *         moveable.target = e.target;\n     *     }\n     * });\n     */\n    public isMoveableElement(target: HTMLElement | SVGElement) {\n        return this.getMoveable().isMoveableElement(target);\n    }\n    /**\n     * If the width, height, left, and top of all elements change, update the shape of the moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"resize\", e => {\n     *     moveable.updateRect();\n     * });\n     */\n    public updateRect() {\n        this.getMoveable().updateRect();\n    }\n    /**\n     * If the width, height, left, and top of the only target change, update the shape of the moveable.\n     * @param - the values of x and y to move moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.updateTarget();\n     */\n    public updateTarget(): void {\n        this.getMoveable().updateTarget();\n    }\n    /**\n     * Remove the Moveable object and the events.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.destroy();\n     */\n    public destroy() {\n        const el = this.getMoveable().base;\n\n        el.remove ? el.remove() : el.parentElement.removeChild(el);\n        this.off();\n        this.getMoveable().componentWillUnmount();\n        this.innerMoveable = null;\n    }\n    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n}\n/**\n * Whether or not the origin controlbox will be visible or not\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged.\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized.\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled.\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated.\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped.\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height.\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * hrottle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n/**\n * When the drag starts, the dragStart event is called.\n * @memberof Moveable\n * @event dragStart\n * @param {Moveable.OnDragStart} - Parameters for the dragStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When dragging, the drag event is called.\n * @memberof Moveable\n * @event drag\n * @param {Moveable.OnDrag} - Parameters for the drag event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"drag\", ({ target, transform }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the drag finishes, the dragEnd event is called.\n * @memberof Moveable\n * @event dragEnd\n * @param {Moveable.OnDragEnd} - Parameters for the dragEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n *     target.style.width = `${e.width}px`;\n *     target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n*     console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n *  1, 0, 0, 0,\n *  0, 1, 0, 0,\n *  0, 0, 1, 0,\n *  0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n *    // target.style.transform = transform;\n *    matrix = multiply(matrix, delta);\n *    target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n *     console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n *     console.log(\"onDragGroup\", targets);\n *     events.forEach(ev => {\n *          // drag event\n *          console.log(\"onDrag left, top\", ev.left, ev.top);\n *          // ev.target!.style.left = `${ev.left}px`;\n *          // ev.target!.style.top = `${ev.top}px`;\n *          console.log(\"onDrag translate\", ev.dist);\n *          ev.target!.style.transform = ev.transform;)\n *     });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n *     console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n *     console.log(\"onResizeGroup\", targets);\n *     events.forEach(ev => {\n *         const offset = [\n *             direction[0] < 0 ? -ev.delta[0] : 0,\n *             direction[1] < 0 ? -ev.delta[1] : 0,\n *         ];\n *         // ev.drag is a drag event that occurs when the group resize.\n *         const left = offset[0] + ev.drag.beforeDist[0];\n *         const top = offset[1] + ev.drag.beforeDist[1];\n *         const width = ev.width;\n *         const top = ev.top;\n *     });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n *     console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n *     console.log(\"onScaleGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group scale.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[0];\n *         const scaleX = ev.scale[0];\n *         const scaleX = ev.scale[1];\n *     });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n *     console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n *     console.log(\"onRotateGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group rotate.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[1];\n *         const deg = ev.beforeDist;\n *     });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n *     console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n /**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n *     console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\ninterface Moveable extends MoveableGetterSetter {\n    on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n    on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n    on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n\n    on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n    on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n    on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n\n    on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n    on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n    on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n\n    on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n    on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n    on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n\n    on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n    on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n    on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n    on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n    on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n    on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n\n    on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n    on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n    on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n    on(eventName: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n    on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n    on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n    on(eventName: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n    on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n    on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n    on(eventName: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n    on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n    on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n    on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n    on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n    on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n    on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n    on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n"],"names":["tslib_1","props","_super","_this","state","h","Moveable","ref","Component","PROPERTIES","EVENTS","parentElement","options","element","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","appendChild","children","target","isArray","length","updateRect","getMoveable","isMoveableElement","updateTarget","el","base","remove","removeChild","off","componentWillUnmount","innerMoveable","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","setState","_a","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;EAA2CA,SAAA,cAAA,QAAA;;wBAGvC,CAAYC,KAAZ;gBACIC,WAAA,KAAA,EAAMD,KAAN,SADJ;;IAFOE,WAAA,GAAuB,EAAvB;IAIHA,KAAI,CAACC,KAAL,GAAaD,KAAI,CAACF,KAAlB;;;;;;gBAEG,GAAP;WACWI,EAACC;MAASC,GAAG,EAAEA,GAAG,CAAC,IAAD,EAAO,gBAAP;OAA8B,KAAKH,OAA5D;GADG;;sBAGX;EAV2CI,UAA3C;;ICFaC,UAAU,GAAG,CACxB,WADwB,EACX,WADW,EACE,UADF,EACc,WADd,EAExB,UAFwB,EAEZ,WAFY,EAEC,QAFD,EAEW,QAFX,EAEqB,MAFrB,EAGxB,cAHwB,EAGR,gBAHQ,EAGU,eAHV,EAG2B,gBAH3B,EAG6C,WAH7C,CAAnB;AAKP,IAAaC,MAAM,GAAgC,CACjD,WADiD,EAEjD,MAFiD,EAGjD,SAHiD,EAIjD,aAJiD,EAKjD,QALiD,EAMjD,WANiD,EAOjD,YAPiD,EAQjD,OARiD,EASjD,UATiD,EAUjD,aAViD,EAWjD,QAXiD,EAYjD,WAZiD,EAajD,WAbiD,EAcjD,MAdiD,EAejD,SAfiD,EAgBjD,YAhBiD,EAiBjD,OAjBiD,EAkBjD,UAlBiD,EAoBjD,gBApBiD,EAqBjD,WArBiD,EAsBjD,cAtBiD,EAuBjD,kBAvBiD,EAwBjD,aAxBiD,EAyBjD,gBAzBiD,EA0BjD,iBA1BiD,EA2BjD,YA3BiD,EA4BjD,eA5BiD,EA6BjD,kBA7BiD,EA8BjD,aA9BiD,EA+BjD,gBA/BiD,EAgCjD,iBAhCiD,EAiCjD,YAjCiD,EAkCjD,eAlCiD,CAA5C;;ACYP;;;;;;AAmBA;;;EAAuBV,SAAA,SAAA,QAAA;;;;;;mBAMnB,CAAYW,aAAZ,EAAqDC,OAArD;0BAAqD,EAAA;MAAAA,YAAA;;;gBACjDV,WAAA,KAAA,SADJ;;QAEUW,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;;QACMC,WAAW;MAAKC,SAAS,EAAEN;OAAkBC,QAAnD;;QAEMM,MAAM,GAAQ,EAApB;IAEAR,MAAM,CAACS,OAAP,CAAe,UAAAC,IAAA;MACXF,MAAM,CAACG,QAAQ,CAAC,QAAMD,IAAP,CAAT,CAAN,GAAiC,UAACE,CAAD;eAAYnB,KAAI,CAACoB,OAAL,CAAaH,IAAb,EAAmBE,CAAnB,CAAA;OAA7C;KADJ;IAIAE,MAAM,CACFnB,EAACoB;MACGlB,GAAG,EAAEA,GAAG,CAACJ,KAAD,EAAO,eAAP;OACJa,aACAE,QAJN,EAMFL,OANE,CAAN;IAQAF,aAAa,CAACe,WAAd,CAA0Bb,OAAO,CAACc,QAAR,CAAiB,CAAjB,CAA1B;QAEMC,MAAM,GAAGZ,WAAW,CAACY,MAA3B;;QACIC,OAAO,CAACD,MAAD,CAAP,IAAmBA,MAAM,CAACE,MAAP,GAAgB,CAAvC,EAA0C;MACtC3B,KAAI,CAAC4B,UAAL;;;;;;;;;;;;;;;;;;;;;;;2BAiBD,GAAP,UAAyBH,MAAzB;WACW,KAAKI,WAAL,GAAmBC,iBAAnB,CAAqCL,MAArC,CAAP;GADG;;;;;;;;;;;;;;oBAcA,GAAP;SACSI,WAAL,GAAmBD,UAAnB;GADG;;;;;;;;;;;;;sBAaA,GAAP;SACSC,WAAL,GAAmBE,YAAnB;GADG;;;;;;;;;;;;iBAYA,GAAP;QACUC,EAAE,GAAG,KAAKH,WAAL,GAAmBI,IAA9B;IAEAD,EAAE,CAACE,MAAH,GAAYF,EAAE,CAACE,MAAH,EAAZ,GAA0BF,EAAE,CAACxB,aAAH,CAAiB2B,WAAjB,CAA6BH,EAA7B,CAA1B;SACKI,GAAL;SACKP,WAAL,GAAmBQ,oBAAnB;SACKC,aAAL,GAAqB,IAArB;GANG;;qBAQC,GAAR;WACW,KAAKA,aAAL,CAAmBC,cAA1B;GADI;;EA7FNpC,QAAQ,eAdbqC,UAAU,CAAClC,UAAD,EAAa,UAACmC,SAAD,EAAYC,QAAZ;IACpBC,MAAM,CAACC,cAAP,CAAsBH,SAAtB,EAAiCC,QAAjC,EAA2C;MACvCG,GAAG;eACQ,KAAKhB,WAAL,GAAmB/B,KAAnB,CAAyB4C,QAAzB,CAAP;OAFmC;MAIvCI,GAAG,YAACC;;;aACKT,aAAL,CAAmBU,QAAnB,WACIC,GAACP,SAAD,GAAYK,SADhB;OALmC;MASvCG,UAAU,EAAE,IAT2B;MAUvCC,YAAY,EAAE;KAVlB;GADO,IAcLhD,SAAA;iBAgGN;EAhGuBiD,YAAvB;;;;;"}
\ No newline at end of file
diff --git a/dist/moveable.js b/dist/moveable.js
new file mode 100644
index 000000000..1ded5d2d0
--- /dev/null
+++ b/dist/moveable.js
@@ -0,0 +1,6486 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.7.2
+*/
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = global || self, global.Moveable = factory());
+}(this, function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    /*
+    Copyright (c) 2017 NAVER Corp.
+    @egjs/component project is licensed under the MIT license
+
+    @egjs/component JavaScript library
+    https://naver.github.io/egjs-component
+
+    @version 2.1.2
+    */
+    /**
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
+    function isUndefined(value) {
+      return typeof value === "undefined";
+    }
+    /**
+     * A class used to manage events in a component
+     * @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
+     * @alias eg.Component
+     */
+
+
+    var Component =
+    /*#__PURE__*/
+    function () {
+      var Component =
+      /*#__PURE__*/
+      function () {
+        /**
+        * Version info string
+        * @ko 버전정보 문자열
+        * @name VERSION
+        * @static
+        * @type {String}
+        * @example
+        * eg.Component.VERSION;  // ex) 2.0.0
+        * @memberof eg.Component
+        */
+
+        /**
+         * @support {"ie": "7+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
+         */
+        function Component() {
+          this._eventHandler = {};
+          this.options = {};
+        }
+        /**
+         * Triggers a custom event.
+         * @ko 커스텀 이벤트를 발생시킨다
+         * @param {String} eventName The name of the custom event to be triggered <ko>발생할 커스텀 이벤트의 이름</ko>
+         * @param {Object} customEvent Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
+         * @return {Boolean} Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">Ref</a> <ko>이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">참고</a></ko>
+         * @example
+        class Some extends eg.Component {
+         some(){
+         	if(this.trigger("beforeHi")){ // When event call to stop return false.
+        	this.trigger("hi");// fire hi event.
+         	}
+         }
+        }
+        const some = new Some();
+        some.on("beforeHi", (e) => {
+        if(condition){
+        	e.stop(); // When event call to stop, `hi` event not call.
+        }
+        });
+        some.on("hi", (e) => {
+        // `currentTarget` is component instance.
+        console.log(some === e.currentTarget); // true
+        });
+        // If you want to more know event design. You can see article.
+        // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
+         */
+
+
+        var _proto = Component.prototype;
+
+        _proto.trigger = function trigger(eventName, customEvent) {
+          if (customEvent === void 0) {
+            customEvent = {};
+          }
+
+          var handlerList = this._eventHandler[eventName] || [];
+          var hasHandlerList = handlerList.length > 0;
+
+          if (!hasHandlerList) {
+            return true;
+          } // If detach method call in handler in first time then handler list calls.
+
+
+          handlerList = handlerList.concat();
+          customEvent.eventType = eventName;
+          var isCanceled = false;
+          var arg = [customEvent];
+          var i = 0;
+
+          customEvent.stop = function () {
+            isCanceled = true;
+          };
+
+          customEvent.currentTarget = this;
+
+          for (var _len = arguments.length, restParam = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+            restParam[_key - 2] = arguments[_key];
+          }
+
+          if (restParam.length >= 1) {
+            arg = arg.concat(restParam);
+          }
+
+          for (i = 0; handlerList[i]; i++) {
+            handlerList[i].apply(this, arg);
+          }
+
+          return !isCanceled;
+        };
+        /**
+         * Executed event just one time.
+         * @ko 이벤트가 한번만 실행된다.
+         * @param {eventName} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
+         * @param {Function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
+         * @return {eg.Component} An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
+         * @example
+        class Some extends eg.Component {
+         hi() {
+           alert("hi");
+         }
+         thing() {
+           this.once("hi", this.hi);
+         }
+        }
+        var some = new Some();
+        some.thing();
+        some.trigger("hi");
+        // fire alert("hi");
+        some.trigger("hi");
+        // Nothing happens
+         */
+
+
+        _proto.once = function once(eventName, handlerToAttach) {
+          if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
+            var eventHash = eventName;
+            var i;
+
+            for (i in eventHash) {
+              this.once(i, eventHash[i]);
+            }
+
+            return this;
+          } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
+            var self = this;
+            this.on(eventName, function listener() {
+              for (var _len2 = arguments.length, arg = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                arg[_key2] = arguments[_key2];
+              }
+
+              handlerToAttach.apply(self, arg);
+              self.off(eventName, listener);
+            });
+          }
+
+          return this;
+        };
+        /**
+         * Checks whether an event has been attached to a component.
+         * @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
+         * @param {String} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
+         * @return {Boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
+         * @example
+        class Some extends eg.Component {
+         some() {
+           this.hasOn("hi");// check hi event.
+         }
+        }
+         */
+
+
+        _proto.hasOn = function hasOn(eventName) {
+          return !!this._eventHandler[eventName];
+        };
+        /**
+         * Attaches an event to a component.
+         * @ko 컴포넌트에 이벤트를 등록한다.
+         * @param {eventName} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
+         * @param {Function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
+         * @return {eg.Component} An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
+         * @example
+        class Some extends eg.Component {
+         hi() {
+           console.log("hi");
+         }
+         some() {
+           this.on("hi",this.hi); //attach event
+         }
+        }
+        */
+
+
+        _proto.on = function on(eventName, handlerToAttach) {
+          if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
+            var eventHash = eventName;
+            var name;
+
+            for (name in eventHash) {
+              this.on(name, eventHash[name]);
+            }
+
+            return this;
+          } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
+            var handlerList = this._eventHandler[eventName];
+
+            if (isUndefined(handlerList)) {
+              this._eventHandler[eventName] = [];
+              handlerList = this._eventHandler[eventName];
+            }
+
+            handlerList.push(handlerToAttach);
+          }
+
+          return this;
+        };
+        /**
+         * Detaches an event from the component.
+         * @ko 컴포넌트에 등록된 이벤트를 해제한다
+         * @param {eventName} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
+         * @param {Function} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
+         * @return {eg.Component} An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
+         * @example
+        class Some extends eg.Component {
+         hi() {
+           console.log("hi");
+         }
+         some() {
+           this.off("hi",this.hi); //detach event
+         }
+        }
+         */
+
+
+        _proto.off = function off(eventName, handlerToDetach) {
+          // All event detach.
+          if (isUndefined(eventName)) {
+            this._eventHandler = {};
+            return this;
+          } // All handler of specific event detach.
+
+
+          if (isUndefined(handlerToDetach)) {
+            if (typeof eventName === "string") {
+              this._eventHandler[eventName] = undefined;
+              return this;
+            } else {
+              var eventHash = eventName;
+              var name;
+
+              for (name in eventHash) {
+                this.off(name, eventHash[name]);
+              }
+
+              return this;
+            }
+          } // The handler of specific event detach.
+
+
+          var handlerList = this._eventHandler[eventName];
+
+          if (handlerList) {
+            var k;
+            var handlerFunction;
+
+            for (k = 0; (handlerFunction = handlerList[k]) !== undefined; k++) {
+              if (handlerFunction === handlerToDetach) {
+                handlerList = handlerList.splice(k, 1);
+                break;
+              }
+            }
+          }
+
+          return this;
+        };
+
+        return Component;
+      }();
+
+      Component.VERSION = "2.1.2";
+      return Component;
+    }();
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: framework-utils
+    license: MIT
+    author: Daybrush
+    repository: git+https://github.com/daybrush/framework-utils.git
+    version: 0.2.0
+    */
+    /* react */
+
+    function ref(target, name) {
+      return function (e) {
+        e && (target[name] = e);
+      };
+    }
+    /* Class Decorator */
+
+    function Properties(properties, action) {
+      return function (component) {
+        var prototype = component.prototype;
+        properties.forEach(function (property) {
+          action(prototype, property);
+        });
+      };
+    }
+
+    var VNode = function VNode() {};
+
+    var options = {};
+
+    var stack = [];
+
+    var EMPTY_CHILDREN = [];
+
+    function h(nodeName, attributes) {
+    	var children = EMPTY_CHILDREN,
+    	    lastSimple,
+    	    child,
+    	    simple,
+    	    i;
+    	for (i = arguments.length; i-- > 2;) {
+    		stack.push(arguments[i]);
+    	}
+    	if (attributes && attributes.children != null) {
+    		if (!stack.length) stack.push(attributes.children);
+    		delete attributes.children;
+    	}
+    	while (stack.length) {
+    		if ((child = stack.pop()) && child.pop !== undefined) {
+    			for (i = child.length; i--;) {
+    				stack.push(child[i]);
+    			}
+    		} else {
+    			if (typeof child === 'boolean') child = null;
+
+    			if (simple = typeof nodeName !== 'function') {
+    				if (child == null) child = '';else if (typeof child === 'number') child = String(child);else if (typeof child !== 'string') simple = false;
+    			}
+
+    			if (simple && lastSimple) {
+    				children[children.length - 1] += child;
+    			} else if (children === EMPTY_CHILDREN) {
+    				children = [child];
+    			} else {
+    				children.push(child);
+    			}
+
+    			lastSimple = simple;
+    		}
+    	}
+
+    	var p = new VNode();
+    	p.nodeName = nodeName;
+    	p.children = children;
+    	p.attributes = attributes == null ? undefined : attributes;
+    	p.key = attributes == null ? undefined : attributes.key;
+
+    	if (options.vnode !== undefined) options.vnode(p);
+
+    	return p;
+    }
+
+    function extend(obj, props) {
+      for (var i in props) {
+        obj[i] = props[i];
+      }return obj;
+    }
+
+    function applyRef(ref, value) {
+      if (ref) {
+        if (typeof ref == 'function') ref(value);else ref.current = value;
+      }
+    }
+
+    var defer = typeof Promise == 'function' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout;
+
+    var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
+
+    var items = [];
+
+    function enqueueRender(component) {
+    	if (!component._dirty && (component._dirty = true) && items.push(component) == 1) {
+    		( defer)(rerender);
+    	}
+    }
+
+    function rerender() {
+    	var p;
+    	while (p = items.pop()) {
+    		if (p._dirty) renderComponent(p);
+    	}
+    }
+
+    function isSameNodeType(node, vnode, hydrating) {
+    	if (typeof vnode === 'string' || typeof vnode === 'number') {
+    		return node.splitText !== undefined;
+    	}
+    	if (typeof vnode.nodeName === 'string') {
+    		return !node._componentConstructor && isNamedNode(node, vnode.nodeName);
+    	}
+    	return hydrating || node._componentConstructor === vnode.nodeName;
+    }
+
+    function isNamedNode(node, nodeName) {
+    	return node.normalizedNodeName === nodeName || node.nodeName.toLowerCase() === nodeName.toLowerCase();
+    }
+
+    function getNodeProps(vnode) {
+    	var props = extend({}, vnode.attributes);
+    	props.children = vnode.children;
+
+    	var defaultProps = vnode.nodeName.defaultProps;
+    	if (defaultProps !== undefined) {
+    		for (var i in defaultProps) {
+    			if (props[i] === undefined) {
+    				props[i] = defaultProps[i];
+    			}
+    		}
+    	}
+
+    	return props;
+    }
+
+    function createNode(nodeName, isSvg) {
+    	var node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName);
+    	node.normalizedNodeName = nodeName;
+    	return node;
+    }
+
+    function removeNode(node) {
+    	var parentNode = node.parentNode;
+    	if (parentNode) parentNode.removeChild(node);
+    }
+
+    function setAccessor(node, name, old, value, isSvg) {
+    	if (name === 'className') name = 'class';
+
+    	if (name === 'key') ; else if (name === 'ref') {
+    		applyRef(old, null);
+    		applyRef(value, node);
+    	} else if (name === 'class' && !isSvg) {
+    		node.className = value || '';
+    	} else if (name === 'style') {
+    		if (!value || typeof value === 'string' || typeof old === 'string') {
+    			node.style.cssText = value || '';
+    		}
+    		if (value && typeof value === 'object') {
+    			if (typeof old !== 'string') {
+    				for (var i in old) {
+    					if (!(i in value)) node.style[i] = '';
+    				}
+    			}
+    			for (var i in value) {
+    				node.style[i] = typeof value[i] === 'number' && IS_NON_DIMENSIONAL.test(i) === false ? value[i] + 'px' : value[i];
+    			}
+    		}
+    	} else if (name === 'dangerouslySetInnerHTML') {
+    		if (value) node.innerHTML = value.__html || '';
+    	} else if (name[0] == 'o' && name[1] == 'n') {
+    		var useCapture = name !== (name = name.replace(/Capture$/, ''));
+    		name = name.toLowerCase().substring(2);
+    		if (value) {
+    			if (!old) node.addEventListener(name, eventProxy, useCapture);
+    		} else {
+    			node.removeEventListener(name, eventProxy, useCapture);
+    		}
+    		(node._listeners || (node._listeners = {}))[name] = value;
+    	} else if (name !== 'list' && name !== 'type' && !isSvg && name in node) {
+    		try {
+    			node[name] = value == null ? '' : value;
+    		} catch (e) {}
+    		if ((value == null || value === false) && name != 'spellcheck') node.removeAttribute(name);
+    	} else {
+    		var ns = isSvg && name !== (name = name.replace(/^xlink:?/, ''));
+
+    		if (value == null || value === false) {
+    			if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());else node.removeAttribute(name);
+    		} else if (typeof value !== 'function') {
+    			if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value);
+    		}
+    	}
+    }
+
+    function eventProxy(e) {
+    	return this._listeners[e.type](options.event && options.event(e) || e);
+    }
+
+    var mounts = [];
+
+    var diffLevel = 0;
+
+    var isSvgMode = false;
+
+    var hydrating = false;
+
+    function flushMounts() {
+    	var c;
+    	while (c = mounts.shift()) {
+    		if (c.componentDidMount) c.componentDidMount();
+    	}
+    }
+
+    function diff(dom, vnode, context, mountAll, parent, componentRoot) {
+    	if (!diffLevel++) {
+    		isSvgMode = parent != null && parent.ownerSVGElement !== undefined;
+
+    		hydrating = dom != null && !('__preactattr_' in dom);
+    	}
+
+    	var ret = idiff(dom, vnode, context, mountAll, componentRoot);
+
+    	if (parent && ret.parentNode !== parent) parent.appendChild(ret);
+
+    	if (! --diffLevel) {
+    		hydrating = false;
+
+    		if (!componentRoot) flushMounts();
+    	}
+
+    	return ret;
+    }
+
+    function idiff(dom, vnode, context, mountAll, componentRoot) {
+    	var out = dom,
+    	    prevSvgMode = isSvgMode;
+
+    	if (vnode == null || typeof vnode === 'boolean') vnode = '';
+
+    	if (typeof vnode === 'string' || typeof vnode === 'number') {
+    		if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) {
+    			if (dom.nodeValue != vnode) {
+    				dom.nodeValue = vnode;
+    			}
+    		} else {
+    			out = document.createTextNode(vnode);
+    			if (dom) {
+    				if (dom.parentNode) dom.parentNode.replaceChild(out, dom);
+    				recollectNodeTree(dom, true);
+    			}
+    		}
+
+    		out['__preactattr_'] = true;
+
+    		return out;
+    	}
+
+    	var vnodeName = vnode.nodeName;
+    	if (typeof vnodeName === 'function') {
+    		return buildComponentFromVNode(dom, vnode, context, mountAll);
+    	}
+
+    	isSvgMode = vnodeName === 'svg' ? true : vnodeName === 'foreignObject' ? false : isSvgMode;
+
+    	vnodeName = String(vnodeName);
+    	if (!dom || !isNamedNode(dom, vnodeName)) {
+    		out = createNode(vnodeName, isSvgMode);
+
+    		if (dom) {
+    			while (dom.firstChild) {
+    				out.appendChild(dom.firstChild);
+    			}
+    			if (dom.parentNode) dom.parentNode.replaceChild(out, dom);
+
+    			recollectNodeTree(dom, true);
+    		}
+    	}
+
+    	var fc = out.firstChild,
+    	    props = out['__preactattr_'],
+    	    vchildren = vnode.children;
+
+    	if (props == null) {
+    		props = out['__preactattr_'] = {};
+    		for (var a = out.attributes, i = a.length; i--;) {
+    			props[a[i].name] = a[i].value;
+    		}
+    	}
+
+    	if (!hydrating && vchildren && vchildren.length === 1 && typeof vchildren[0] === 'string' && fc != null && fc.splitText !== undefined && fc.nextSibling == null) {
+    		if (fc.nodeValue != vchildren[0]) {
+    			fc.nodeValue = vchildren[0];
+    		}
+    	} else if (vchildren && vchildren.length || fc != null) {
+    			innerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML != null);
+    		}
+
+    	diffAttributes(out, vnode.attributes, props);
+
+    	isSvgMode = prevSvgMode;
+
+    	return out;
+    }
+
+    function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {
+    	var originalChildren = dom.childNodes,
+    	    children = [],
+    	    keyed = {},
+    	    keyedLen = 0,
+    	    min = 0,
+    	    len = originalChildren.length,
+    	    childrenLen = 0,
+    	    vlen = vchildren ? vchildren.length : 0,
+    	    j,
+    	    c,
+    	    f,
+    	    vchild,
+    	    child;
+
+    	if (len !== 0) {
+    		for (var i = 0; i < len; i++) {
+    			var _child = originalChildren[i],
+    			    props = _child['__preactattr_'],
+    			    key = vlen && props ? _child._component ? _child._component.__key : props.key : null;
+    			if (key != null) {
+    				keyedLen++;
+    				keyed[key] = _child;
+    			} else if (props || (_child.splitText !== undefined ? isHydrating ? _child.nodeValue.trim() : true : isHydrating)) {
+    				children[childrenLen++] = _child;
+    			}
+    		}
+    	}
+
+    	if (vlen !== 0) {
+    		for (var i = 0; i < vlen; i++) {
+    			vchild = vchildren[i];
+    			child = null;
+
+    			var key = vchild.key;
+    			if (key != null) {
+    				if (keyedLen && keyed[key] !== undefined) {
+    					child = keyed[key];
+    					keyed[key] = undefined;
+    					keyedLen--;
+    				}
+    			} else if (min < childrenLen) {
+    					for (j = min; j < childrenLen; j++) {
+    						if (children[j] !== undefined && isSameNodeType(c = children[j], vchild, isHydrating)) {
+    							child = c;
+    							children[j] = undefined;
+    							if (j === childrenLen - 1) childrenLen--;
+    							if (j === min) min++;
+    							break;
+    						}
+    					}
+    				}
+
+    			child = idiff(child, vchild, context, mountAll);
+
+    			f = originalChildren[i];
+    			if (child && child !== dom && child !== f) {
+    				if (f == null) {
+    					dom.appendChild(child);
+    				} else if (child === f.nextSibling) {
+    					removeNode(f);
+    				} else {
+    					dom.insertBefore(child, f);
+    				}
+    			}
+    		}
+    	}
+
+    	if (keyedLen) {
+    		for (var i in keyed) {
+    			if (keyed[i] !== undefined) recollectNodeTree(keyed[i], false);
+    		}
+    	}
+
+    	while (min <= childrenLen) {
+    		if ((child = children[childrenLen--]) !== undefined) recollectNodeTree(child, false);
+    	}
+    }
+
+    function recollectNodeTree(node, unmountOnly) {
+    	var component = node._component;
+    	if (component) {
+    		unmountComponent(component);
+    	} else {
+    		if (node['__preactattr_'] != null) applyRef(node['__preactattr_'].ref, null);
+
+    		if (unmountOnly === false || node['__preactattr_'] == null) {
+    			removeNode(node);
+    		}
+
+    		removeChildren(node);
+    	}
+    }
+
+    function removeChildren(node) {
+    	node = node.lastChild;
+    	while (node) {
+    		var next = node.previousSibling;
+    		recollectNodeTree(node, true);
+    		node = next;
+    	}
+    }
+
+    function diffAttributes(dom, attrs, old) {
+    	var name;
+
+    	for (name in old) {
+    		if (!(attrs && attrs[name] != null) && old[name] != null) {
+    			setAccessor(dom, name, old[name], old[name] = undefined, isSvgMode);
+    		}
+    	}
+
+    	for (name in attrs) {
+    		if (name !== 'children' && name !== 'innerHTML' && (!(name in old) || attrs[name] !== (name === 'value' || name === 'checked' ? dom[name] : old[name]))) {
+    			setAccessor(dom, name, old[name], old[name] = attrs[name], isSvgMode);
+    		}
+    	}
+    }
+
+    var recyclerComponents = [];
+
+    function createComponent(Ctor, props, context) {
+    	var inst,
+    	    i = recyclerComponents.length;
+
+    	if (Ctor.prototype && Ctor.prototype.render) {
+    		inst = new Ctor(props, context);
+    		Component$1.call(inst, props, context);
+    	} else {
+    		inst = new Component$1(props, context);
+    		inst.constructor = Ctor;
+    		inst.render = doRender;
+    	}
+
+    	while (i--) {
+    		if (recyclerComponents[i].constructor === Ctor) {
+    			inst.nextBase = recyclerComponents[i].nextBase;
+    			recyclerComponents.splice(i, 1);
+    			return inst;
+    		}
+    	}
+
+    	return inst;
+    }
+
+    function doRender(props, state, context) {
+    	return this.constructor(props, context);
+    }
+
+    function setComponentProps(component, props, renderMode, context, mountAll) {
+    	if (component._disable) return;
+    	component._disable = true;
+
+    	component.__ref = props.ref;
+    	component.__key = props.key;
+    	delete props.ref;
+    	delete props.key;
+
+    	if (typeof component.constructor.getDerivedStateFromProps === 'undefined') {
+    		if (!component.base || mountAll) {
+    			if (component.componentWillMount) component.componentWillMount();
+    		} else if (component.componentWillReceiveProps) {
+    			component.componentWillReceiveProps(props, context);
+    		}
+    	}
+
+    	if (context && context !== component.context) {
+    		if (!component.prevContext) component.prevContext = component.context;
+    		component.context = context;
+    	}
+
+    	if (!component.prevProps) component.prevProps = component.props;
+    	component.props = props;
+
+    	component._disable = false;
+
+    	if (renderMode !== 0) {
+    		if (renderMode === 1 || options.syncComponentUpdates !== false || !component.base) {
+    			renderComponent(component, 1, mountAll);
+    		} else {
+    			enqueueRender(component);
+    		}
+    	}
+
+    	applyRef(component.__ref, component);
+    }
+
+    function renderComponent(component, renderMode, mountAll, isChild) {
+    	if (component._disable) return;
+
+    	var props = component.props,
+    	    state = component.state,
+    	    context = component.context,
+    	    previousProps = component.prevProps || props,
+    	    previousState = component.prevState || state,
+    	    previousContext = component.prevContext || context,
+    	    isUpdate = component.base,
+    	    nextBase = component.nextBase,
+    	    initialBase = isUpdate || nextBase,
+    	    initialChildComponent = component._component,
+    	    skip = false,
+    	    snapshot = previousContext,
+    	    rendered,
+    	    inst,
+    	    cbase;
+
+    	if (component.constructor.getDerivedStateFromProps) {
+    		state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
+    		component.state = state;
+    	}
+
+    	if (isUpdate) {
+    		component.props = previousProps;
+    		component.state = previousState;
+    		component.context = previousContext;
+    		if (renderMode !== 2 && component.shouldComponentUpdate && component.shouldComponentUpdate(props, state, context) === false) {
+    			skip = true;
+    		} else if (component.componentWillUpdate) {
+    			component.componentWillUpdate(props, state, context);
+    		}
+    		component.props = props;
+    		component.state = state;
+    		component.context = context;
+    	}
+
+    	component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
+    	component._dirty = false;
+
+    	if (!skip) {
+    		rendered = component.render(props, state, context);
+
+    		if (component.getChildContext) {
+    			context = extend(extend({}, context), component.getChildContext());
+    		}
+
+    		if (isUpdate && component.getSnapshotBeforeUpdate) {
+    			snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
+    		}
+
+    		var childComponent = rendered && rendered.nodeName,
+    		    toUnmount,
+    		    base;
+
+    		if (typeof childComponent === 'function') {
+
+    			var childProps = getNodeProps(rendered);
+    			inst = initialChildComponent;
+
+    			if (inst && inst.constructor === childComponent && childProps.key == inst.__key) {
+    				setComponentProps(inst, childProps, 1, context, false);
+    			} else {
+    				toUnmount = inst;
+
+    				component._component = inst = createComponent(childComponent, childProps, context);
+    				inst.nextBase = inst.nextBase || nextBase;
+    				inst._parentComponent = component;
+    				setComponentProps(inst, childProps, 0, context, false);
+    				renderComponent(inst, 1, mountAll, true);
+    			}
+
+    			base = inst.base;
+    		} else {
+    			cbase = initialBase;
+
+    			toUnmount = initialChildComponent;
+    			if (toUnmount) {
+    				cbase = component._component = null;
+    			}
+
+    			if (initialBase || renderMode === 1) {
+    				if (cbase) cbase._component = null;
+    				base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, true);
+    			}
+    		}
+
+    		if (initialBase && base !== initialBase && inst !== initialChildComponent) {
+    			var baseParent = initialBase.parentNode;
+    			if (baseParent && base !== baseParent) {
+    				baseParent.replaceChild(base, initialBase);
+
+    				if (!toUnmount) {
+    					initialBase._component = null;
+    					recollectNodeTree(initialBase, false);
+    				}
+    			}
+    		}
+
+    		if (toUnmount) {
+    			unmountComponent(toUnmount);
+    		}
+
+    		component.base = base;
+    		if (base && !isChild) {
+    			var componentRef = component,
+    			    t = component;
+    			while (t = t._parentComponent) {
+    				(componentRef = t).base = base;
+    			}
+    			base._component = componentRef;
+    			base._componentConstructor = componentRef.constructor;
+    		}
+    	}
+
+    	if (!isUpdate || mountAll) {
+    		mounts.push(component);
+    	} else if (!skip) {
+
+    		if (component.componentDidUpdate) {
+    			component.componentDidUpdate(previousProps, previousState, snapshot);
+    		}
+    	}
+
+    	while (component._renderCallbacks.length) {
+    		component._renderCallbacks.pop().call(component);
+    	}if (!diffLevel && !isChild) flushMounts();
+    }
+
+    function buildComponentFromVNode(dom, vnode, context, mountAll) {
+    	var c = dom && dom._component,
+    	    originalComponent = c,
+    	    oldDom = dom,
+    	    isDirectOwner = c && dom._componentConstructor === vnode.nodeName,
+    	    isOwner = isDirectOwner,
+    	    props = getNodeProps(vnode);
+    	while (c && !isOwner && (c = c._parentComponent)) {
+    		isOwner = c.constructor === vnode.nodeName;
+    	}
+
+    	if (c && isOwner && (!mountAll || c._component)) {
+    		setComponentProps(c, props, 3, context, mountAll);
+    		dom = c.base;
+    	} else {
+    		if (originalComponent && !isDirectOwner) {
+    			unmountComponent(originalComponent);
+    			dom = oldDom = null;
+    		}
+
+    		c = createComponent(vnode.nodeName, props, context);
+    		if (dom && !c.nextBase) {
+    			c.nextBase = dom;
+
+    			oldDom = null;
+    		}
+    		setComponentProps(c, props, 1, context, mountAll);
+    		dom = c.base;
+
+    		if (oldDom && dom !== oldDom) {
+    			oldDom._component = null;
+    			recollectNodeTree(oldDom, false);
+    		}
+    	}
+
+    	return dom;
+    }
+
+    function unmountComponent(component) {
+
+    	var base = component.base;
+
+    	component._disable = true;
+
+    	if (component.componentWillUnmount) component.componentWillUnmount();
+
+    	component.base = null;
+
+    	var inner = component._component;
+    	if (inner) {
+    		unmountComponent(inner);
+    	} else if (base) {
+    		if (base['__preactattr_'] != null) applyRef(base['__preactattr_'].ref, null);
+
+    		component.nextBase = base;
+
+    		removeNode(base);
+    		recyclerComponents.push(component);
+
+    		removeChildren(base);
+    	}
+
+    	applyRef(component.__ref, null);
+    }
+
+    function Component$1(props, context) {
+    	this._dirty = true;
+
+    	this.context = context;
+
+    	this.props = props;
+
+    	this.state = this.state || {};
+
+    	this._renderCallbacks = [];
+    }
+
+    extend(Component$1.prototype, {
+    	setState: function setState(state, callback) {
+    		if (!this.prevState) this.prevState = this.state;
+    		this.state = extend(extend({}, this.state), typeof state === 'function' ? state(this.state, this.props) : state);
+    		if (callback) this._renderCallbacks.push(callback);
+    		enqueueRender(this);
+    	},
+    	forceUpdate: function forceUpdate(callback) {
+    		if (callback) this._renderCallbacks.push(callback);
+    		renderComponent(this, 2);
+    	},
+    	render: function render() {}
+    });
+
+    function render(vnode, parent, merge) {
+      return diff(merge, vnode, {}, false, parent, false);
+    }
+
+    var __extends$1 = (undefined && undefined.__extends) || (function () {
+        var extendStatics = function (d, b) {
+            extendStatics = Object.setPrototypeOf ||
+                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            return extendStatics(d, b);
+        };
+        return function (d, b) {
+            extendStatics(d, b);
+            function __() { this.constructor = d; }
+            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+        };
+    })();
+
+    var ELEMENTS = 'a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr circle clipPath defs ellipse g image line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan'.split(
+    	' '
+    );
+
+    var REACT_ELEMENT_TYPE = (typeof Symbol !== 'undefined' && Symbol.for && Symbol.for('react.element')) || 0xeac7;
+
+    var COMPONENT_WRAPPER_KEY =
+    	typeof Symbol !== 'undefined' && Symbol.for ? Symbol.for('__preactCompatWrapper') : '__preactCompatWrapper';
+
+    // don't autobind these methods since they already have guaranteed context.
+    var AUTOBIND_BLACKLIST = {
+    	constructor: 1,
+    	render: 1,
+    	shouldComponentUpdate: 1,
+    	componentWillReceiveProps: 1,
+    	componentWillUpdate: 1,
+    	componentDidUpdate: 1,
+    	componentWillMount: 1,
+    	componentDidMount: 1,
+    	componentWillUnmount: 1,
+    	componentDidUnmount: 1
+    };
+
+    var CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/;
+
+    var BYPASS_HOOK = {};
+
+    /*global process*/
+    var DEV = false;
+    try {
+    	DEV = process.env.NODE_ENV !== 'production';
+    }
+    catch (e) { }
+
+    // make react think we're react.
+    var VNode$1 = h('a', null).constructor;
+    VNode$1.prototype.$$typeof = REACT_ELEMENT_TYPE;
+    VNode$1.prototype.preactCompatUpgraded = false;
+    VNode$1.prototype.preactCompatNormalized = false;
+
+    Object.defineProperty(VNode$1.prototype, 'type', {
+    	get: function() {
+    		return this.nodeName;
+    	},
+    	set: function(v) {
+    		this.nodeName = v;
+    	},
+    	configurable: true
+    });
+
+    Object.defineProperty(VNode$1.prototype, 'props', {
+    	get: function() {
+    		return this.attributes;
+    	},
+    	set: function(v) {
+    		this.attributes = v;
+    	},
+    	configurable: true
+    });
+
+    var oldEventHook = options.event;
+    options.event = function (e) {
+    	if (oldEventHook) { e = oldEventHook(e); }
+    	e.persist = Object;
+    	e.nativeEvent = e;
+    	return e;
+    };
+
+    var oldVnodeHook = options.vnode;
+    options.vnode = function (vnode) {
+    	if (!vnode.preactCompatUpgraded) {
+    		vnode.preactCompatUpgraded = true;
+
+    		var tag = vnode.nodeName,
+    			attrs = (vnode.attributes = vnode.attributes == null ? {} : extend$1({}, vnode.attributes));
+
+    		if (typeof tag === 'function') {
+    			if (tag[COMPONENT_WRAPPER_KEY] === true || (tag.prototype && 'isReactComponent' in tag.prototype)) {
+    				if (vnode.children && String(vnode.children) === '') { vnode.children = undefined; }
+    				if (vnode.children) { attrs.children = vnode.children; }
+
+    				if (!vnode.preactCompatNormalized) {
+    					normalizeVNode(vnode);
+    				}
+    				handleComponentVNode(vnode);
+    			}
+    		}
+    		else {
+    			if (vnode.children && String(vnode.children) === '') { vnode.children = undefined; }
+    			if (vnode.children) { attrs.children = vnode.children; }
+
+    			if (attrs.defaultValue) {
+    				if (!attrs.value && attrs.value !== 0) {
+    					attrs.value = attrs.defaultValue;
+    				}
+    				delete attrs.defaultValue;
+    			}
+
+    			handleElementVNode(vnode, attrs);
+    		}
+    	}
+
+    	if (oldVnodeHook) { oldVnodeHook(vnode); }
+    };
+
+    function handleComponentVNode(vnode) {
+    	var tag = vnode.nodeName,
+    		a = vnode.attributes;
+
+    	vnode.attributes = {};
+    	if (tag.defaultProps) { extend$1(vnode.attributes, tag.defaultProps); }
+    	if (a) { extend$1(vnode.attributes, a); }
+    }
+
+    function handleElementVNode(vnode, a) {
+    	var shouldSanitize, attrs, i;
+    	if (a) {
+    		for (i in a) { if ((shouldSanitize = CAMEL_PROPS.test(i))) { break; } }
+    		if (shouldSanitize) {
+    			attrs = vnode.attributes = {};
+    			for (i in a) {
+    				if (a.hasOwnProperty(i)) {
+    					attrs[CAMEL_PROPS.test(i) ? i.replace(/([A-Z0-9])/, '-$1').toLowerCase() : i] = a[i];
+    				}
+    			}
+    		}
+    	}
+    }
+
+    var ContextProvider = function () {};
+
+    ContextProvider.prototype.getChildContext = function () {
+    	return this.props.context;
+    };
+    ContextProvider.prototype.render = function (props) {
+    	return props.children[0];
+    };
+
+    var ARR = [];
+
+    /** Track current render() component for ref assignment */
+    var currentComponent;
+
+    function createFactory(type) {
+    	return createElement.bind(null, type);
+    }
+
+    var DOM = {};
+    for (var i = ELEMENTS.length; i--;) {
+    	DOM[ELEMENTS[i]] = createFactory(ELEMENTS[i]);
+    }
+
+    function upgradeToVNodes(arr, offset) {
+    	for (var i = offset || 0; i < arr.length; i++) {
+    		var obj = arr[i];
+    		if (Array.isArray(obj)) {
+    			upgradeToVNodes(obj);
+    		}
+    		else if (
+    			obj &&
+    			typeof obj === 'object' &&
+    			!isValidElement(obj) &&
+    			((obj.props && obj.type) || (obj.attributes && obj.nodeName) || obj.children)
+    		) {
+    			arr[i] = createElement(obj.type || obj.nodeName, obj.props || obj.attributes, obj.children);
+    		}
+    	}
+    }
+
+    function isStatelessComponent(c) {
+    	return typeof c === 'function' && !(c.prototype && c.prototype.render);
+    }
+
+    // wraps stateless functional components in a PropTypes validator
+    function wrapStatelessComponent(WrappedComponent) {
+    	return createClass({
+    		displayName: WrappedComponent.displayName || WrappedComponent.name,
+    		render: function() {
+    			return WrappedComponent(this.props, this.context);
+    		}
+    	});
+    }
+
+    function statelessComponentHook(Ctor) {
+    	var Wrapped = Ctor[COMPONENT_WRAPPER_KEY];
+    	if (Wrapped) { return Wrapped === true ? Ctor : Wrapped; }
+
+    	Wrapped = wrapStatelessComponent(Ctor);
+
+    	Object.defineProperty(Wrapped, COMPONENT_WRAPPER_KEY, { configurable: true, value: true });
+    	Wrapped.displayName = Ctor.displayName;
+    	Wrapped.propTypes = Ctor.propTypes;
+    	Wrapped.defaultProps = Ctor.defaultProps;
+
+    	Object.defineProperty(Ctor, COMPONENT_WRAPPER_KEY, { configurable: true, value: Wrapped });
+
+    	return Wrapped;
+    }
+
+    function createElement() {
+    	var args = [], len = arguments.length;
+    	while ( len-- ) args[ len ] = arguments[ len ];
+
+    	upgradeToVNodes(args, 2);
+    	return normalizeVNode(h.apply(void 0, args));
+    }
+
+    function normalizeVNode(vnode) {
+    	vnode.preactCompatNormalized = true;
+
+    	applyClassName(vnode);
+
+    	if (isStatelessComponent(vnode.nodeName)) {
+    		vnode.nodeName = statelessComponentHook(vnode.nodeName);
+    	}
+
+    	var ref = vnode.attributes.ref,
+    		type = ref && typeof ref;
+    	if (currentComponent && (type === 'string' || type === 'number')) {
+    		vnode.attributes.ref = createStringRefProxy(ref, currentComponent);
+    	}
+
+    	applyEventNormalization(vnode);
+
+    	return vnode;
+    }
+
+    function isValidElement(element) {
+    	return element && (element instanceof VNode$1 || element.$$typeof === REACT_ELEMENT_TYPE);
+    }
+
+    function createStringRefProxy(name, component) {
+    	return (
+    		component._refProxies[name] ||
+    		(component._refProxies[name] = function (resolved) {
+    			if (component && component.refs) {
+    				component.refs[name] = resolved;
+    				if (resolved === null) {
+    					delete component._refProxies[name];
+    					component = null;
+    				}
+    			}
+    		})
+    	);
+    }
+
+    function applyEventNormalization(ref) {
+    	var nodeName = ref.nodeName;
+    	var attributes = ref.attributes;
+
+    	if (!attributes || typeof nodeName !== 'string') { return; }
+    	var props = {};
+    	for (var i in attributes) {
+    		props[i.toLowerCase()] = i;
+    	}
+    	if (props.ondoubleclick) {
+    		attributes.ondblclick = attributes[props.ondoubleclick];
+    		delete attributes[props.ondoubleclick];
+    	}
+    	// for *textual inputs* (incl textarea), normalize `onChange` -> `onInput`:
+    	if (
+    		props.onchange &&
+    		(nodeName === 'textarea' || (nodeName.toLowerCase() === 'input' && !/^fil|che|rad/i.test(attributes.type)))
+    	) {
+    		var normalized = props.oninput || 'oninput';
+    		if (!attributes[normalized]) {
+    			attributes[normalized] = multihook([attributes[normalized], attributes[props.onchange]]);
+    			delete attributes[props.onchange];
+    		}
+    	}
+    }
+
+    function applyClassName(vnode) {
+    	var a = vnode.attributes || (vnode.attributes = {});
+    	classNameDescriptor.enumerable = 'className' in a;
+    	if (a.className) { a.class = a.className; }
+    	Object.defineProperty(a, 'className', classNameDescriptor);
+    }
+
+    var classNameDescriptor = {
+    	configurable: true,
+    	get: function() {
+    		return this.class;
+    	},
+    	set: function(v) {
+    		this.class = v;
+    	}
+    };
+
+    function extend$1(base, props) {
+    	var arguments$1 = arguments;
+
+    	for (var i = 1, obj = (void 0); i < arguments.length; i++) {
+    		if ((obj = arguments$1[i])) {
+    			for (var key in obj) {
+    				if (obj.hasOwnProperty(key)) {
+    					base[key] = obj[key];
+    				}
+    			}
+    		}
+    	}
+    	return base;
+    }
+
+    function shallowDiffers(a, b) {
+    	for (var i in a) { if (!(i in b)) { return true; } }
+    	for (var i$1 in b) { if (a[i$1] !== b[i$1]) { return true; } }
+    	return false;
+    }
+
+    function findDOMNode(component) {
+    	return (component && (component.base || (component.nodeType === 1 && component))) || null;
+    }
+
+    function F() { }
+
+    function createClass(obj) {
+    	function cl(props, context) {
+    		bindAll(this);
+    		Component$1$1.call(this, props, context, BYPASS_HOOK);
+    		newComponentHook.call(this, props, context);
+    	}
+
+    	obj = extend$1({ constructor: cl }, obj);
+
+    	// We need to apply mixins here so that getDefaultProps is correctly mixed
+    	if (obj.mixins) {
+    		applyMixins(obj, collateMixins(obj.mixins));
+    	}
+    	if (obj.statics) {
+    		extend$1(cl, obj.statics);
+    	}
+    	if (obj.propTypes) {
+    		cl.propTypes = obj.propTypes;
+    	}
+    	if (obj.defaultProps) {
+    		cl.defaultProps = obj.defaultProps;
+    	}
+    	if (obj.getDefaultProps) {
+    		cl.defaultProps = obj.getDefaultProps.call(cl);
+    	}
+
+    	F.prototype = Component$1$1.prototype;
+    	cl.prototype = extend$1(new F(), obj);
+
+    	cl.displayName = obj.displayName || 'Component';
+
+    	return cl;
+    }
+
+    // Flatten an Array of mixins to a map of method name to mixin implementations
+    function collateMixins(mixins) {
+    	var keyed = {};
+    	for (var i = 0; i < mixins.length; i++) {
+    		var mixin = mixins[i];
+    		for (var key in mixin) {
+    			if (mixin.hasOwnProperty(key) && typeof mixin[key] === 'function') {
+    				(keyed[key] || (keyed[key] = [])).push(mixin[key]);
+    			}
+    		}
+    	}
+    	return keyed;
+    }
+
+    // apply a mapping of Arrays of mixin methods to a component prototype
+    function applyMixins(proto, mixins) {
+    	for (var key in mixins)
+    		{ if (mixins.hasOwnProperty(key)) {
+    			proto[key] = multihook(
+    				mixins[key].concat(proto[key] || ARR),
+    				key === 'getDefaultProps' || key === 'getInitialState' || key === 'getChildContext'
+    			);
+    		} }
+    }
+
+    function bindAll(ctx) {
+    	for (var i in ctx) {
+    		var v = ctx[i];
+    		if (typeof v === 'function' && !v.__bound && !AUTOBIND_BLACKLIST.hasOwnProperty(i)) {
+    			(ctx[i] = v.bind(ctx)).__bound = true;
+    		}
+    	}
+    }
+
+    function callMethod(ctx, m, args) {
+    	if (typeof m === 'string') {
+    		m = ctx.constructor.prototype[m];
+    	}
+    	if (typeof m === 'function') {
+    		return m.apply(ctx, args);
+    	}
+    }
+
+    function multihook(hooks, skipDuplicates) {
+    	return function () {
+    		var arguments$1 = arguments;
+    		var this$1 = this;
+
+    		var ret;
+    		for (var i = 0; i < hooks.length; i++) {
+    			var r = callMethod(this$1, hooks[i], arguments$1);
+
+    			if (skipDuplicates && r != null) {
+    				if (!ret) { ret = {}; }
+    				for (var key in r)
+    					{ if (r.hasOwnProperty(key)) {
+    						ret[key] = r[key];
+    					} }
+    			}
+    			else if (typeof r !== 'undefined') { ret = r; }
+    		}
+    		return ret;
+    	};
+    }
+
+    function newComponentHook(props, context) {
+    	propsHook.call(this, props, context);
+    	this.componentWillReceiveProps = multihook([
+    		propsHook,
+    		this.componentWillReceiveProps || 'componentWillReceiveProps'
+    	]);
+    	this.render = multihook([propsHook, beforeRender, this.render || 'render', afterRender]);
+    }
+
+    function propsHook(props, context) {
+    	if (!props) { return; }
+
+    	// React annoyingly special-cases single children, and some react components are ridiculously strict about this.
+    	var c = props.children;
+    	if (
+    		c &&
+    		Array.isArray(c) &&
+    		c.length === 1 &&
+    		(typeof c[0] === 'string' || typeof c[0] === 'function' || c[0] instanceof VNode$1)
+    	) {
+    		props.children = c[0];
+
+    		// but its totally still going to be an Array.
+    		if (props.children && typeof props.children === 'object') {
+    			props.children.length = 1;
+    			props.children[0] = props.children;
+    		}
+    	}
+
+    	// add proptype checking
+    	if (DEV) {
+    		var ctor = typeof this === 'function' ? this : this.constructor,
+    			propTypes = this.propTypes || ctor.propTypes;
+    		var displayName = this.displayName || ctor.name;
+    	}
+    }
+
+    function beforeRender(props) {
+    	currentComponent = this;
+    }
+
+    function afterRender() {
+    	if (currentComponent === this) {
+    		currentComponent = null;
+    	}
+    }
+
+    function Component$1$1(props, context, opts) {
+    	Component$1.call(this, props, context);
+    	this.state = this.getInitialState ? this.getInitialState() : {};
+    	this.refs = {};
+    	this._refProxies = {};
+    	if (opts !== BYPASS_HOOK) {
+    		newComponentHook.call(this, props, context);
+    	}
+    }
+    extend$1((Component$1$1.prototype = new Component$1()), {
+    	constructor: Component$1$1,
+
+    	isReactComponent: {},
+
+    	replaceState: function(state, callback) {
+    		var this$1 = this;
+
+    		this.setState(state, callback);
+    		for (var i in this$1.state) {
+    			if (!(i in state)) {
+    				delete this$1.state[i];
+    			}
+    		}
+    	},
+
+    	getDOMNode: function() {
+    		return this.base;
+    	},
+
+    	isMounted: function() {
+    		return !!this.base;
+    	}
+    });
+
+    function PureComponent(props, context) {
+    	Component$1$1.call(this, props, context);
+    }
+    F.prototype = Component$1$1.prototype;
+    PureComponent.prototype = new F();
+    PureComponent.prototype.isPureReactComponent = true;
+    PureComponent.prototype.shouldComponentUpdate = function (props, state) {
+    	return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
+    };
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: framework-utils
+    license: MIT
+    author: Daybrush
+    repository: git+https://github.com/daybrush/framework-utils.git
+    version: 0.2.1
+    */
+    function prefixNames(prefix) {
+      var classNames = [];
+
+      for (var _i = 1; _i < arguments.length; _i++) {
+        classNames[_i - 1] = arguments[_i];
+      }
+
+      return classNames.map(function (className) {
+        return className.split(" ").map(function (name) {
+          return name ? "" + prefix + name : "";
+        }).join(" ");
+      }).join(" ");
+    }
+    function prefixCSS(prefix, css) {
+      return css.replace(/\.([^{,\s\d.]+)/g, "." + prefix + "$1");
+    }
+    /* react */
+
+    function ref$1(target, name) {
+      return function (e) {
+        e && (target[name] = e);
+      };
+    }
+    function refs(target, name, i) {
+      return function (e) {
+        e && (target[name][i] = e);
+      };
+    }
+
+    /*
+    Copyright (c) 2017 NAVER Corp.
+    @egjs/agent project is licensed under the MIT license
+
+    @egjs/agent JavaScript library
+
+
+    @version 2.1.5
+    */
+    var win = typeof window !== "undefined" && window || {};
+    var RegExp$1 = win.RegExp;
+    var navigator = win.navigator;
+
+    var parseRules = {
+    	browser: [{
+    		criteria: "PhantomJS",
+    		identity: "PhantomJS"
+    	}, {
+    		criteria: /Whale/,
+    		identity: "Whale",
+    		versionSearch: "Whale"
+    	}, {
+    		criteria: /Edge/,
+    		identity: "Edge",
+    		versionSearch: "Edge"
+    	}, {
+    		criteria: /MSIE|Trident|Windows Phone/,
+    		identity: "IE",
+    		versionSearch: "IEMobile|MSIE|rv"
+    	}, {
+    		criteria: /MiuiBrowser/,
+    		identity: "MIUI Browser",
+    		versionSearch: "MiuiBrowser"
+    	}, {
+    		criteria: /SamsungBrowser/,
+    		identity: "Samsung Internet",
+    		versionSearch: "SamsungBrowser"
+    	}, {
+    		criteria: /SAMSUNG /,
+    		identity: "Samsung Internet",
+    		versionSearch: "Version"
+    	}, {
+    		criteria: /Chrome|CriOS/,
+    		identity: "Chrome"
+    	}, {
+    		criteria: /Android/,
+    		identity: "Android Browser",
+    		versionSearch: "Version"
+    	}, {
+    		criteria: /iPhone|iPad/,
+    		identity: "Safari",
+    		versionSearch: "Version"
+    	}, {
+    		criteria: "Apple",
+    		identity: "Safari",
+    		versionSearch: "Version"
+    	}, {
+    		criteria: "Firefox",
+    		identity: "Firefox"
+    	}],
+    	os: [{
+    		criteria: /Windows Phone/,
+    		identity: "Windows Phone",
+    		versionSearch: "Windows Phone"
+    	}, {
+    		criteria: "Windows 2000",
+    		identity: "Window",
+    		versionAlias: "5.0"
+    	}, {
+    		criteria: /Windows NT/,
+    		identity: "Window",
+    		versionSearch: "Windows NT"
+    	}, {
+    		criteria: /iPhone|iPad/,
+    		identity: "iOS",
+    		versionSearch: "iPhone OS|CPU OS"
+    	}, {
+    		criteria: "Mac",
+    		versionSearch: "OS X",
+    		identity: "MAC"
+    	}, {
+    		criteria: /Android/,
+    		identity: "Android"
+    	}, {
+    		criteria: /Tizen/,
+    		identity: "Tizen"
+    	}, {
+    		criteria: /Web0S/,
+    		identity: "WebOS"
+    	}],
+
+    	// Webview check condition
+    	// ios: If has no version information
+    	// Android 5.0 && chrome 40+: Presence of "; wv" in userAgent
+    	// Under android 5.0: Presence of "NAVER" or "Daum" in userAgent
+    	webview: [{
+    		criteria: /iPhone|iPad/,
+    		browserVersionSearch: "Version",
+    		webviewBrowserVersion: /-1/
+    	}, {
+    		criteria: /iPhone|iPad|Android/,
+    		webviewToken: /NAVER|DAUM|; wv/
+
+    	}],
+    	defaultString: {
+    		browser: {
+    			version: "-1",
+    			name: "unknown"
+    		},
+    		os: {
+    			version: "-1",
+    			name: "unknown"
+    		}
+    	}
+    };
+
+    function filter(arr, compare) {
+    	var result = [];
+
+    	for (var i = 0; i < arr.length; i++) {
+    		compare(arr[i]) && result.push(arr[i]);
+    	}
+    	return result;
+    }
+
+    function some(arr, compare) {
+    	for (var i = 0; i < arr.length; i++) {
+    		if (compare(arr[i])) {
+    			return true;
+    		}
+    	}
+    	return false;
+    }
+
+    var UA = void 0;
+
+    function setUa(ua) {
+    	UA = ua;
+    }
+
+    function isMatched(base, target) {
+    	return target && target.test ? !!target.test(base) : base.indexOf(target) > -1;
+    }
+
+    function getIdentityStringFromArray(rules, defaultStrings) {
+    	var matchedRule = filter(rules, function (rule) {
+    		return isMatched(UA, rule.criteria);
+    	})[0];
+
+    	return matchedRule && matchedRule.identity || defaultStrings.name;
+    }
+
+    function getRule(rules, targetIdentity) {
+    	return filter(rules, function (rule) {
+    		var criteria = rule.criteria;
+    		var identityMatched = new RegExp(rule.identity, "i").test(targetIdentity);
+
+    		if (criteria ? identityMatched && isMatched(UA, criteria) : identityMatched) {
+    			return true;
+    		} else {
+    			return false;
+    		}
+    	})[0];
+    }
+
+    function getBrowserName() {
+    	return getIdentityStringFromArray(parseRules.browser, parseRules.defaultString.browser);
+    }
+
+    function getBrowserRule(browserName) {
+    	var rule = getRule(parseRules.browser, browserName);
+
+    	if (!rule) {
+    		rule = {
+    			criteria: browserName,
+    			versionSearch: browserName,
+    			identity: browserName
+    		};
+    	}
+
+    	return rule;
+    }
+
+    function extractBrowserVersion(versionToken, ua) {
+    	var browserVersion = parseRules.defaultString.browser.version;
+    	var versionRegexResult = new RegExp("(" + versionToken + ")", "i").exec(ua);
+
+    	if (!versionRegexResult) {
+    		return browserVersion;
+    	}
+
+    	var versionTokenIndex = versionRegexResult.index;
+    	var verTkn = versionRegexResult[0];
+
+    	if (versionTokenIndex > -1) {
+    		var versionIndex = versionTokenIndex + verTkn.length + 1;
+
+    		browserVersion = ua.substring(versionIndex).split(" ")[0].replace(/_/g, ".").replace(/;|\)/g, "");
+    	}
+    	return browserVersion;
+    }
+
+    function getBrowserVersion(browserName) {
+    	if (!browserName) {
+    		return undefined;
+    	}
+
+    	// console.log(browserRule);
+    	// const versionToken = browserRule ? browserRule.versionSearch : browserName;
+    	var browserRule = getBrowserRule(browserName);
+    	var versionToken = browserRule.versionSearch || browserName;
+    	var browserVersion = extractBrowserVersion(versionToken, UA);
+
+    	return browserVersion;
+    }
+
+    function isWebview() {
+    	var webviewRules = parseRules.webview;
+    	var browserVersion = void 0;
+
+    	return some(filter(webviewRules, function (rule) {
+    		return isMatched(UA, rule.criteria);
+    	}), function (rule) {
+    		browserVersion = extractBrowserVersion(rule.browserVersionSearch, UA);
+    		if (isMatched(UA, rule.webviewToken) || isMatched(browserVersion, rule.webviewBrowserVersion)) {
+    			return true;
+    		} else {
+    			return false;
+    		}
+    	});
+    }
+
+    function getOSRule(osName) {
+    	return getRule(parseRules.os, osName);
+    }
+
+    function getOsName() {
+    	return getIdentityStringFromArray(parseRules.os, parseRules.defaultString.os);
+    }
+
+    function getOsVersion(osName) {
+    	var osRule = getOSRule(osName) || {};
+    	var defaultOSVersion = parseRules.defaultString.os.version;
+    	var osVersion = void 0;
+
+    	if (!osName) {
+    		return undefined;
+    	}
+    	if (osRule.versionAlias) {
+    		return osRule.versionAlias;
+    	}
+    	var osVersionToken = osRule.versionSearch || osName;
+    	var osVersionRegex = new RegExp("(" + osVersionToken + ")\\s([\\d_\\.]+|\\d_0)", "i");
+    	var osVersionRegexResult = osVersionRegex.exec(UA);
+
+    	if (osVersionRegexResult) {
+    		osVersion = osVersionRegex.exec(UA)[2].replace(/_/g, ".").replace(/;|\)/g, "");
+    	}
+    	return osVersion || defaultOSVersion;
+    }
+
+    function getOs() {
+    	var name = getOsName();
+    	var version = getOsVersion(name);
+
+    	return { name: name, version: version };
+    }
+
+    function getBrowser() {
+    	var name = getBrowserName();
+    	var version = getBrowserVersion(name);
+
+    	return { name: name, version: version, webview: isWebview() };
+    }
+
+    function getIsMobile() {
+    	return UA.indexOf("Mobi") !== -1;
+    }
+
+    /**
+     * Copyright (c) NAVER Corp.
+     * egjs-agent projects are licensed under the MIT license
+     */
+
+    /**
+     * @namespace eg.agent
+     */
+    /**
+     * Extracts browser and operating system information from the user agent string.
+     * @ko 유저 에이전트 문자열에서 브라우저와 운영체제 정보를 추출한다.
+     * @function eg.agent#agent
+     * @param {String} [userAgent=navigator.userAgent] user agent string to parse <ko>파싱할 유저에이전트 문자열</ko>
+     * @return {Object} agentInfo
+     * @return {Object} agentInfo.os os Operating system information <ko>운영체제 정보</ko>
+     * @return {String} agentInfo.os.name Operating system name (android, ios, window, mac, unknown) <ko>운영체제 이름 (android, ios, window, mac, unknown)</ko>
+     * @return {String} agentInfo.os.version Operating system version <ko>운영체제 버전</ko>
+     * @return {String} agentInfo.browser Browser information <ko>브라우저 정보</ko>
+     * @return {String} agentInfo.browser.name Browser name (safari, chrome, sbrowser, ie, firefox, unknown) <ko>브라우저 이름 (safari, chrome, sbrowser, ie, firefox, unknown)</ko>
+     * @return {String} agentInfo.browser.version Browser version <ko>브라우저 버전 </ko>
+     * @return {Boolean} agentInfo.browser.webview Indicates whether the browser is inapp<ko>웹뷰 브라우저 여부</ko>
+     * @return {Boolean} agentInfo.isMobile Indicates whether the browser is for mobile<ko>모바일 브라우저 여부</ko>
+     * @example
+    import agent from "@egjs/agent";
+
+    const {os, browser, isMobile} = agent();
+     */
+    function agent() {
+      var ua = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : navigator.userAgent;
+
+      setUa(ua);
+
+      var agentInfo = {
+        os: getOs(),
+        browser: getBrowser(),
+        isMobile: getIsMobile()
+      };
+
+      agentInfo.browser.name = agentInfo.browser.name.toLowerCase();
+      agentInfo.os.name = agentInfo.os.name.toLowerCase();
+      agentInfo.os.version = agentInfo.os.version.toLowerCase();
+
+      if (agentInfo.os.name === "ios" && agentInfo.browser.webview) {
+        agentInfo.browser.version = "-1";
+      }
+
+      return agentInfo;
+    }
+    /**
+     * Version info string
+     * @ko 버전정보 문자열
+     * @name VERSION
+     * @static
+     * @type {String}
+     * @example
+     * eg.agent.VERSION;  // ex) 2.2.0
+     * @memberof eg.agent
+     */
+    agent.VERSION = "2.1.5";
+
+    /*
+    Copyright (c) 2018 Daybrush
+    @name: @daybrush/utils
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/utils
+    @version 0.10.0
+    */
+    /**
+    * get string "object"
+    * @memberof Consts
+    * @example
+    import {OBJECT} from "@daybrush/utils";
+
+    console.log(OBJECT); // "object"
+    */
+
+    var OBJECT = "object";
+    /**
+    * get string "undefined"
+    * @memberof Consts
+    * @example
+    import {UNDEFINED} from "@daybrush/utils";
+
+    console.log(UNDEFINED); // "undefined"
+    */
+
+    var UNDEFINED = "undefined";
+
+    /**
+    * @namespace
+    * @name Utils
+    */
+
+    /**
+     * Returns the inner product of two numbers(`a1`, `a2`) by two criteria(`b1`, `b2`).
+     * @memberof Utils
+     * @param - The first number
+     * @param - The second number
+     * @param - The first number to base on the inner product
+     * @param - The second number to base on the inner product
+     * @return - Returns the inner product
+    import { dot } from "@daybrush/utils";
+
+    console.log(dot(0, 15, 2, 3)); // 6
+    console.log(dot(5, 15, 2, 3)); // 9
+    console.log(dot(5, 15, 1, 1)); // 10
+     */
+
+    function dot(a1, a2, b1, b2) {
+      return (a1 * b2 + a2 * b1) / (b1 + b2);
+    }
+    /**
+    * Check the type that the value is undefined.
+    * @memberof Utils
+    * @param {string} value - Value to check the type
+    * @return {boolean} true if the type is correct, false otherwise
+    * @example
+    import {isUndefined} from "@daybrush/utils";
+
+    console.log(isUndefined(undefined)); // true
+    console.log(isUndefined("")); // false
+    console.log(isUndefined(1)); // false
+    console.log(isUndefined(null)); // false
+    */
+
+    function isUndefined$1(value) {
+      return typeof value === UNDEFINED;
+    }
+    /**
+    * Check the type that the value is object.
+    * @memberof Utils
+    * @param {string} value - Value to check the type
+    * @return {} true if the type is correct, false otherwise
+    * @example
+    import {isObject} from "@daybrush/utils";
+
+    console.log(isObject({})); // true
+    console.log(isObject(undefined)); // false
+    console.log(isObject("")); // false
+    console.log(isObject(null)); // false
+    */
+
+    function isObject(value) {
+      return value && typeof value === OBJECT;
+    }
+    /**
+    * Check the type that the value is isArray.
+    * @memberof Utils
+    * @param {string} value - Value to check the type
+    * @return {} true if the type is correct, false otherwise
+    * @example
+    import {isArray} from "@daybrush/utils";
+
+    console.log(isArray([])); // true
+    console.log(isArray({})); // false
+    console.log(isArray(undefined)); // false
+    console.log(isArray(null)); // false
+    */
+
+    function isArray(value) {
+      return Array.isArray(value);
+    }
+    /**
+    * divide text by bracket "(", ")".
+    * @memberof Utils
+    * @param {string} text - text to divide
+    * @return {object} divided texts
+    * @example
+    import {splitBracket} from "@daybrush/utils";
+
+    console.log(splitBracket("a(1, 2)"));
+    // {prefix: "a", value: "1, 2", suffix: ""}
+    console.log(splitBracket("a(1, 2)b"));
+    // {prefix: "a", value: "1, 2", suffix: "b"}
+    */
+
+    function splitBracket(text) {
+      var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);
+
+      if (!matches || matches.length < 4) {
+        return {};
+      } else {
+        return {
+          prefix: matches[1],
+          value: matches[2],
+          suffix: matches[3]
+        };
+      }
+    }
+    /**
+    * divide text by number and unit.
+    * @memberof Utils
+    * @param {string} text - text to divide
+    * @return {} divided texts
+    * @example
+    import {splitUnit} from "@daybrush/utils";
+
+    console.log(splitUnit("10px"));
+    // {prefix: "", value: 10, unit: "px"}
+    console.log(splitUnit("-10px"));
+    // {prefix: "", value: -10, unit: "px"}
+    console.log(splitUnit("a10%"));
+    // {prefix: "a", value: 10, unit: "%"}
+    */
+
+    function splitUnit(text) {
+      var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
+
+      if (!matches) {
+        return {
+          prefix: "",
+          unit: "",
+          value: NaN
+        };
+      }
+
+      var prefix = matches[1];
+      var value = matches[2];
+      var unit = matches[3];
+      return {
+        prefix: prefix,
+        unit: unit,
+        value: parseFloat(value)
+      };
+    }
+    /**
+    * transform strings to camel-case
+    * @memberof Utils
+    * @param {String} text - string
+    * @return {String} camel-case string
+    * @example
+    import {camelize} from "@daybrush/utils";
+
+    console.log(camelize("transform-origin")); // transformOrigin
+    console.log(camelize("abcd_efg")); // abcdEfg
+    console.log(camelize("abcd efg")); // abcdEfg
+    */
+
+    function camelize(str) {
+      return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
+        return letter.toUpperCase();
+      });
+    }
+    /**
+    * Checks if the specified class value exists in the element's class attribute.
+    * @memberof DOM
+    * @param element - target
+    * @param className - the class name to search
+    * @return {boolean} return false if the class is not found.
+    * @example
+    import {hasClass} from "@daybrush/utils";
+
+    console.log(hasClass(element, "start")); // true or false
+    */
+
+    function hasClass(element, className) {
+      if (element.classList) {
+        return element.classList.contains(className);
+      }
+
+      return !!element.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
+    }
+    /**
+    * Sets up a function that will be called whenever the specified event is delivered to the target
+    * @memberof DOM
+    * @param - event target
+    * @param - A case-sensitive string representing the event type to listen for.
+    * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
+    * @param - An options object that specifies characteristics about the event listener. The available options are:
+    * @example
+    import {addEvent} from "@daybrush/utils";
+
+    addEvent(el, "click", e => {
+      console.log(e);
+    });
+    */
+
+    function addEvent(el, type, listener, options) {
+      el.addEventListener(type, listener, options);
+    }
+    /**
+    * removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
+    * @memberof DOM
+    * @param - event target
+    * @param - A case-sensitive string representing the event type to listen for.
+    * @param - The EventListener function of the event handler to remove from the event target.
+    * @example
+    import {addEvent, removeEvent} from "@daybrush/utils";
+    const listener = e => {
+      console.log(e);
+    };
+    addEvent(el, "click", listener);
+    removeEvent(el, "click", listener);
+    */
+
+    function removeEvent(el, type, listener) {
+      el.removeEventListener(type, listener);
+    }
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: preact-css-styler
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/css-styler/tree/master/preact-css-styler
+    version: 0.4.1
+    */
+
+    /*
+    Copyright (c) 2018 Daybrush
+    @name: @daybrush/utils
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/utils
+    @version 0.10.0
+    */
+    /**
+    * divide text by comma.
+    * @memberof Utils
+    * @param {string} text - text to divide
+    * @return {Array} divided texts
+    * @example
+    import {splitComma} from "@daybrush/utils";
+
+    console.log(splitComma("a,b,c,d,e,f,g"));
+    // ["a", "b", "c", "d", "e", "f", "g"]
+    console.log(splitComma("'a,b',c,'d,e',f,g"));
+    // ["'a,b'", "c", "'d,e'", "f", "g"]
+    */
+
+    function splitComma(text) {
+      // divide comma(,)
+      // "[^"]*"|'[^']*'
+      var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
+      return matches ? matches.map(function (str) {
+        return str.trim();
+      }) : [];
+    }
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: react-css-styler
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/css-styler/tree/master/react-css-styler
+    version: 0.4.0
+    */
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+
+    /* global Reflect, Promise */
+    var extendStatics$1 = function (d, b) {
+      extendStatics$1 = Object.setPrototypeOf || {
+        __proto__: []
+      } instanceof Array && function (d, b) {
+        d.__proto__ = b;
+      } || function (d, b) {
+        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+      };
+
+      return extendStatics$1(d, b);
+    };
+
+    function __extends$2(d, b) {
+      extendStatics$1(d, b);
+
+      function __() {
+        this.constructor = d;
+      }
+
+      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign$1 = function () {
+      __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+
+        return t;
+      };
+
+      return __assign$1.apply(this, arguments);
+    };
+    function __rest(s, e) {
+      var t = {};
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+      }
+      return t;
+    }
+
+    function hash(str) {
+      var hash = 5381,
+          i    = str.length;
+
+      while(i) {
+        hash = (hash * 33) ^ str.charCodeAt(--i);
+      }
+
+      /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+       * integers. Since we want the results to be always positive, convert the
+       * signed int to an unsigned by doing an unsigned bitshift. */
+      return hash >>> 0;
+    }
+
+    var stringHash = hash;
+
+    function getHash(str) {
+      return stringHash(str).toString(36);
+    }
+    function injectStyle(className, css) {
+      var style = document.createElement("style");
+      style.setAttribute("type", "text/css");
+      style.innerHTML = css.replace(/([^}{]*){/mg, function (all, selector) {
+        return splitComma(selector).map(function (subSelector) {
+          if (subSelector.indexOf(":global") > -1) {
+            return subSelector.replace(/\:global/g, "");
+          } else if (subSelector.indexOf(":host") > -1) {
+            return "" + subSelector.replace(/\:host/g, "." + className);
+          }
+
+          return "." + className + " " + subSelector;
+        }).join(", ") + "{";
+      });
+      (document.head || document.body).appendChild(style);
+      return style;
+    }
+
+    function styled(Tag, css) {
+      var injectClassName = "rCS" + getHash(css);
+      var injectCount = 0;
+      var injectElement;
+      return (
+        /*#__PURE__*/
+        function (_super) {
+          __extends$2(Styler, _super);
+
+          function Styler(props) {
+            return _super.call(this, props) || this;
+          }
+
+          Styler.prototype.render = function () {
+            var _a = this.props,
+                className = _a.className,
+                attributes = __rest(_a, ["className"]);
+
+            return createElement(Tag, __assign$1({
+              className: className + " " + injectClassName
+            }, attributes));
+          };
+
+          Styler.prototype.componentDidMount = function () {
+            if (injectCount === 0) {
+              injectElement = injectStyle(injectClassName, css);
+            }
+
+            ++injectCount;
+          };
+
+          Styler.prototype.componentWillUnmount = function () {
+            --injectCount;
+
+            if (injectCount === 0 && injectElement) {
+              injectElement.parentNode.removeChild(injectElement);
+            }
+          };
+
+          Styler.prototype.getElement = function () {
+            return this.element || (this.element = findDOMNode(this));
+          };
+
+          return Styler;
+        }(Component$1$1)
+      );
+    }
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: @daybrush/drag
+    license: MIT
+    author: Daybrush
+    repository: git+https://github.com/daybrush/drag.git
+    version: 0.8.1
+    */
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    var __assign$2 = function () {
+      __assign$2 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+
+        return t;
+      };
+
+      return __assign$2.apply(this, arguments);
+    };
+
+    function getPinchDragPosition(clients, prevClients, startClients) {
+      var nowCenter = getAverageClient(clients);
+      var prevCenter = getAverageClient(prevClients);
+      var startCenter = getAverageClient(startClients);
+      var pinchClient = getAddClient(startClients[0], getMinusClient(nowCenter, startCenter));
+      var pinchPrevClient = getAddClient(startClients[0], getMinusClient(prevCenter, startCenter));
+      return getPosition(pinchClient, pinchPrevClient, startClients[0]);
+    }
+    function isMultiTouch(e) {
+      return e.touches && e.touches.length >= 2;
+    }
+    function getPositionEvent(e) {
+      if (e.touches) {
+        return getClients(e.touches);
+      } else {
+        return [getClient(e)];
+      }
+    }
+    function getPosition(client, prevClient, startClient) {
+      var clientX = client.clientX,
+          clientY = client.clientY;
+      var prevX = prevClient.clientX,
+          prevY = prevClient.clientY;
+      var startX = startClient.clientX,
+          startY = startClient.clientY;
+      var deltaX = clientX - prevX;
+      var deltaY = clientY - prevY;
+      var distX = clientX - startX;
+      var distY = clientY - startY;
+      return {
+        clientX: clientX,
+        clientY: clientY,
+        deltaX: deltaX,
+        deltaY: deltaY,
+        distX: distX,
+        distY: distY
+      };
+    }
+    function getDist(clients) {
+      return Math.sqrt(Math.pow(clients[0].clientX - clients[1].clientX, 2) + Math.pow(clients[0].clientY - clients[1].clientY, 2));
+    }
+    function getPositions(clients, prevClients, startClients) {
+      return clients.map(function (client, i) {
+        return getPosition(client, prevClients[i], startClients[i]);
+      });
+    }
+    function getClients(touches) {
+      var length = Math.min(touches.length, 2);
+      var clients = [];
+
+      for (var i = 0; i < length; ++i) {
+        clients.push(getClient(touches[i]));
+      }
+
+      return clients;
+    }
+    function getClient(e) {
+      return {
+        clientX: e.clientX,
+        clientY: e.clientY
+      };
+    }
+    function getAverageClient(clients) {
+      return {
+        clientX: (clients[0].clientX + clients[1].clientX) / 2,
+        clientY: (clients[0].clientY + clients[1].clientY) / 2
+      };
+    }
+    function getAddClient(client1, client2) {
+      return {
+        clientX: client1.clientX + client2.clientX,
+        clientY: client1.clientY + client2.clientY
+      };
+    }
+    function getMinusClient(client1, client2) {
+      return {
+        clientX: client1.clientX - client2.clientX,
+        clientY: client1.clientY - client2.clientY
+      };
+    }
+
+    var Dragger =
+    /*#__PURE__*/
+    function () {
+      function Dragger(el, options) {
+        var _this = this;
+
+        if (options === void 0) {
+          options = {};
+        }
+
+        this.el = el;
+        this.options = {};
+        this.flag = false;
+        this.pinchFlag = false;
+        this.datas = {};
+        this.isDrag = false;
+        this.isPinch = false;
+        this.isMouse = false;
+        this.isTouch = false;
+        this.prevClients = [];
+        this.startClients = [];
+
+        this.onDragStart = function (e) {
+          if (!_this.isDrag && isMultiTouch(e) && !_this.pinchFlag) {
+            _this.onPinchStart(e);
+          }
+
+          if (_this.flag) {
+            return;
+          }
+
+          var clients = _this.startClients[0] ? _this.startClients : getPositionEvent(e);
+          _this.flag = true;
+          _this.isDrag = false;
+          _this.startClients = clients;
+          _this.prevClients = clients;
+          _this.datas = {};
+          var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
+          var _a = _this.options,
+              dragstart = _a.dragstart,
+              preventRightClick = _a.preventRightClick;
+
+          if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign$2({
+            datas: _this.datas,
+            inputEvent: e
+          }, position))) === false) {
+            _this.flag = false;
+          }
+
+          _this.flag && e.preventDefault();
+        };
+
+        this.onDrag = function (e) {
+          if (!_this.flag) {
+            return;
+          }
+
+          var clients = getPositionEvent(e);
+
+          if (_this.pinchFlag) {
+            _this.onPinch(e, clients);
+          }
+
+          var prevClients = _this.prevClients;
+          var startClients = _this.startClients;
+          var position = _this.pinchFlag ? getPinchDragPosition(clients, prevClients, startClients) : getPosition(clients[0], prevClients[0], startClients[0]);
+
+          if (!position.deltaX && !position.deltaY) {
+            return;
+          }
+
+          _this.isDrag = true;
+          var drag = _this.options.drag;
+          drag && drag(__assign$2({
+            datas: _this.datas
+          }, position, {
+            inputEvent: e
+          }));
+          _this.prevClients = clients;
+        };
+
+        this.onDragEnd = function (e) {
+          if (!_this.flag) {
+            return;
+          }
+
+          if (_this.pinchFlag) {
+            _this.onPinchEnd(e);
+          }
+
+          _this.flag = false;
+          var dragend = _this.options.dragend;
+          var prevClients = _this.prevClients;
+          var startClients = _this.startClients;
+          var position = _this.pinchFlag ? getPinchDragPosition(prevClients, prevClients, startClients) : getPosition(prevClients[0], prevClients[0], startClients[0]);
+          _this.startClients = [];
+          _this.prevClients = [];
+          dragend && dragend(__assign$2({
+            datas: _this.datas,
+            isDrag: _this.isDrag,
+            inputEvent: e
+          }, position));
+        };
+
+        this.options = __assign$2({
+          container: el,
+          preventRightClick: true,
+          events: ["touch", "mouse"]
+        }, options);
+        var _a = this.options,
+            container = _a.container,
+            events = _a.events;
+        this.isTouch = events.indexOf("touch") > -1;
+        this.isMouse = events.indexOf("mouse") > -1;
+
+        if (this.isMouse) {
+          addEvent(el, "mousedown", this.onDragStart);
+          addEvent(container, "mousemove", this.onDrag);
+          addEvent(container, "mouseup", this.onDragEnd);
+        }
+
+        if (this.isTouch) {
+          addEvent(el, "touchstart", this.onDragStart);
+          addEvent(container, "touchmove", this.onDrag);
+          addEvent(container, "touchend", this.onDragEnd);
+        }
+      }
+
+      var __proto = Dragger.prototype;
+
+      __proto.isDragging = function () {
+        return this.isDrag;
+      };
+
+      __proto.isPinching = function () {
+        return this.isPinch;
+      };
+
+      __proto.onPinchStart = function (e) {
+        var _a, _b;
+
+        if (!this.flag) {
+          return;
+        }
+
+        this.pinchFlag = true;
+        var pinchstart = this.options.pinchstart;
+        var pinchClients = getClients(e.changedTouches);
+
+        (_a = this.startClients).push.apply(_a, pinchClients);
+
+        (_b = this.prevClients).push.apply(_b, pinchClients);
+
+        if (!pinchstart) {
+          return;
+        }
+
+        var startClients = this.startClients;
+        var startAverageClient = getAverageClient(startClients);
+        var centerPosition = getPosition(startAverageClient, startAverageClient, startAverageClient);
+        pinchstart(__assign$2({
+          datas: this.datas,
+          touches: getPositions(startClients, startClients, startClients)
+        }, centerPosition, {
+          inputEvent: e
+        }));
+      };
+
+      __proto.onPinch = function (e, clients) {
+        if (!this.flag || !this.pinchFlag) {
+          return;
+        }
+
+        this.isPinch = true;
+        var pinch = this.options.pinch;
+
+        if (!pinch) {
+          return;
+        }
+
+        var prevClients = this.prevClients;
+        var startClients = this.startClients;
+        var centerPosition = getPosition(getAverageClient(clients), getAverageClient(prevClients), getAverageClient(startClients));
+        var distance = getDist(clients);
+        var startDistance = getDist(startClients);
+        pinch(__assign$2({
+          datas: this.datas,
+          touches: getPositions(clients, prevClients, startClients),
+          scale: distance / startDistance,
+          distance: distance
+        }, centerPosition, {
+          inputEvent: e
+        }));
+      };
+
+      __proto.onPinchEnd = function (e) {
+        if (!this.flag || !this.pinchFlag) {
+          return;
+        }
+
+        var isPinch = this.isPinch;
+        this.isPinch = false;
+        this.pinchFlag = false;
+        var pinchend = this.options.pinchend;
+
+        if (!pinchend) {
+          return;
+        }
+
+        var prevClients = this.prevClients;
+        var startClients = this.startClients;
+        var centerPosition = getPosition(getAverageClient(prevClients), getAverageClient(prevClients), getAverageClient(startClients));
+        pinchend(__assign$2({
+          datas: this.datas,
+          isPinch: isPinch,
+          touches: getPositions(prevClients, prevClients, startClients)
+        }, centerPosition, {
+          inputEvent: e
+        }));
+        this.isPinch = false;
+        this.pinchFlag = false;
+      };
+
+      __proto.unset = function () {
+        var el = this.el;
+        var container = this.options.container;
+
+        if (this.isMouse) {
+          removeEvent(el, "mousedown", this.onDragStart);
+          removeEvent(container, "mousemove", this.onDrag);
+          removeEvent(container, "mouseup", this.onDragEnd);
+        }
+
+        if (this.isTouch) {
+          removeEvent(el, "touchstart", this.onDragStart);
+          removeEvent(container, "touchmove", this.onDrag);
+          removeEvent(container, "touchend", this.onDragEnd);
+        }
+      };
+
+      return Dragger;
+    }();
+
+    /*
+    Copyright (c) 2019-present NAVER Corp.
+    name: @egjs/list-differ
+    license: MIT
+    author: NAVER Corp.
+    repository: https://github.com/naver/egjs-list-differ
+    version: 1.0.0
+    */
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+    var PolyMap =
+    /*#__PURE__*/
+    function () {
+      function PolyMap() {
+        this.keys = [];
+        this.values = [];
+      }
+
+      var __proto = PolyMap.prototype;
+
+      __proto.get = function (key) {
+        return this.values[this.keys.indexOf(key)];
+      };
+
+      __proto.set = function (key, value) {
+        var keys = this.keys;
+        var values = this.values;
+        var prevIndex = keys.indexOf(key);
+        var index = prevIndex === -1 ? keys.length : prevIndex;
+        keys[index] = key;
+        values[index] = value;
+      };
+
+      return PolyMap;
+    }();
+
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+    var HashMap =
+    /*#__PURE__*/
+    function () {
+      function HashMap() {
+        this.object = {};
+      }
+
+      var __proto = HashMap.prototype;
+
+      __proto.get = function (key) {
+        return this.object[key];
+      };
+
+      __proto.set = function (key, value) {
+        this.object[key] = value;
+      };
+
+      return HashMap;
+    }();
+
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+    var SUPPORT_MAP = typeof Map === "function";
+
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+    var Link =
+    /*#__PURE__*/
+    function () {
+      function Link() {}
+
+      var __proto = Link.prototype;
+
+      __proto.connect = function (prevLink, nextLink) {
+        this.prev = prevLink;
+        this.next = nextLink;
+        prevLink && (prevLink.next = this);
+        nextLink && (nextLink.prev = this);
+      };
+
+      __proto.disconnect = function () {
+        // In double linked list, diconnect the interconnected relationship.
+        var prevLink = this.prev;
+        var nextLink = this.next;
+        prevLink && (prevLink.next = nextLink);
+        nextLink && (nextLink.prev = prevLink);
+      };
+
+      __proto.getIndex = function () {
+        var link = this;
+        var index = -1;
+
+        while (link) {
+          link = link.prev;
+          ++index;
+        }
+
+        return index;
+      };
+
+      return Link;
+    }();
+
+    /*
+    egjs-list-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+
+    function orderChanged(changed, fixed) {
+      // It is roughly in the order of these examples.
+      // 4, 6, 0, 2, 1, 3, 5, 7
+      var fromLinks = []; // 0, 1, 2, 3, 4, 5, 6, 7
+
+      var toLinks = [];
+      changed.forEach(function (_a) {
+        var from = _a[0],
+            to = _a[1];
+        var link = new Link();
+        fromLinks[from] = link;
+        toLinks[to] = link;
+      }); // `fromLinks` are connected to each other by double linked list.
+
+      fromLinks.forEach(function (link, i) {
+        link.connect(fromLinks[i - 1]);
+      });
+      return changed.filter(function (_, i) {
+        return !fixed[i];
+      }).map(function (_a, i) {
+        var from = _a[0],
+            to = _a[1];
+
+        if (from === to) {
+          return [0, 0];
+        }
+
+        var fromLink = fromLinks[from];
+        var toLink = toLinks[to - 1];
+        var fromIndex = fromLink.getIndex(); // Disconnect the link connected to `fromLink`.
+
+        fromLink.disconnect(); // Connect `fromLink` to the right of `toLink`.
+
+        if (!toLink) {
+          fromLink.connect(undefined, fromLinks[0]);
+        } else {
+          fromLink.connect(toLink, toLink.next);
+        }
+
+        var toIndex = fromLink.getIndex();
+        return [fromIndex, toIndex];
+      });
+    }
+
+    var Result =
+    /*#__PURE__*/
+    function () {
+      function Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed) {
+        this.prevList = prevList;
+        this.list = list;
+        this.added = added;
+        this.removed = removed;
+        this.changed = changed;
+        this.maintained = maintained;
+        this.changedBeforeAdded = changedBeforeAdded;
+        this.fixed = fixed;
+      }
+
+      var __proto = Result.prototype;
+      Object.defineProperty(__proto, "ordered", {
+        get: function () {
+          if (!this.cacheOrdered) {
+            this.caculateOrdered();
+          }
+
+          return this.cacheOrdered;
+        },
+        enumerable: true,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "pureChanged", {
+        get: function () {
+          if (!this.cachePureChanged) {
+            this.caculateOrdered();
+          }
+
+          return this.cachePureChanged;
+        },
+        enumerable: true,
+        configurable: true
+      });
+
+      __proto.caculateOrdered = function () {
+        var ordered = orderChanged(this.changedBeforeAdded, this.fixed);
+        var changed = this.changed;
+        var pureChanged = [];
+        this.cacheOrdered = ordered.filter(function (_a, i) {
+          var from = _a[0],
+              to = _a[1];
+          var _b = changed[i],
+              fromBefore = _b[0],
+              toBefore = _b[1];
+
+          if (from !== to) {
+            pureChanged.push([fromBefore, toBefore]);
+            return true;
+          }
+        });
+        this.cachePureChanged = pureChanged;
+      };
+
+      return Result;
+    }();
+
+    /**
+     *
+     * @memberof eg.ListDiffer
+     * @static
+     * @function
+     * @param - Previous List <ko> 이전 목록 </ko>
+     * @param - List to Update <ko> 업데이트 할 목록 </ko>
+     * @param - This callback function returns the key of the item. <ko> 아이템의 키를 반환하는 콜백 함수입니다.</ko>
+     * @return - Returns the diff between `prevList` and `list` <ko> `prevList`와 `list`의 다른 점을 반환한다.</ko>
+     * @example
+     * import { diff } from "@egjs/list-differ";
+     * // script => eg.ListDiffer.diff
+     * const result = diff([0, 1, 2, 3, 4, 5], [7, 8, 0, 4, 3, 6, 2, 1], e => e);
+     * // List before update
+     * // [1, 2, 3, 4, 5]
+     * console.log(result.prevList);
+     * // Updated list
+     * // [4, 3, 6, 2, 1]
+     * console.log(result.list);
+     * // Index array of values added to `list`
+     * // [0, 1, 5]
+     * console.log(result.added);
+     * // Index array of values removed in `prevList`
+     * // [5]
+     * console.log(result.removed);
+     * // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`
+     * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+     * console.log(result.changed);
+     * // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>)
+     * // [[4, 3], [3, 4], [2, 6]]
+     * console.log(result.pureChanged);
+     * // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>)
+     * // [[4, 1], [4, 2], [4, 3]]
+     * console.log(result.ordered);
+     * // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved
+     * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+     * console.log(result.maintained);
+     */
+
+    function diff$1(prevList, list, findKeyCallback) {
+      var mapClass = SUPPORT_MAP ? Map : findKeyCallback ? HashMap : PolyMap;
+
+      var callback = findKeyCallback || function (e) {
+        return e;
+      };
+
+      var added = [];
+      var removed = [];
+      var maintained = [];
+      var prevKeys = prevList.map(callback);
+      var keys = list.map(callback);
+      var prevKeyMap = new mapClass();
+      var keyMap = new mapClass();
+      var changedBeforeAdded = [];
+      var fixed = [];
+      var removedMap = {};
+      var changed = [];
+      var addedCount = 0;
+      var removedCount = 0; // Add prevKeys and keys to the hashmap.
+
+      prevKeys.forEach(function (key, prevListIndex) {
+        prevKeyMap.set(key, prevListIndex);
+      });
+      keys.forEach(function (key, listIndex) {
+        keyMap.set(key, listIndex);
+      }); // Compare `prevKeys` and `keys` and add them to `removed` if they are not in `keys`.
+
+      prevKeys.forEach(function (key, prevListIndex) {
+        var listIndex = keyMap.get(key); // In prevList, but not in list, it is removed.
+
+        if (typeof listIndex === "undefined") {
+          ++removedCount;
+          removed.push(prevListIndex);
+        } else {
+          removedMap[listIndex] = removedCount;
+        }
+      }); // Compare `prevKeys` and `keys` and add them to `added` if they are not in `prevKeys`.
+
+      keys.forEach(function (key, listIndex) {
+        var prevListIndex = prevKeyMap.get(key); // In list, but not in prevList, it is added.
+
+        if (typeof prevListIndex === "undefined") {
+          added.push(listIndex);
+          ++addedCount;
+        } else {
+          maintained.push([prevListIndex, listIndex]);
+          removedCount = removedMap[listIndex] || 0;
+          changedBeforeAdded.push([prevListIndex - removedCount, listIndex - addedCount]);
+          fixed.push(listIndex === prevListIndex);
+
+          if (prevListIndex !== listIndex) {
+            changed.push([prevListIndex, listIndex]);
+          }
+        }
+      }); // Sort by ascending order of 'to(list's index).
+
+      removed.reverse();
+      return new Result(prevList, list, added, removed, changed, maintained, changedBeforeAdded, fixed);
+    }
+
+    /**
+     * A module that checks diff when values are added, removed, or changed in an array.
+     * @ko 배열 또는 오브젝트에서 값이 추가되거나 삭제되거나 순서가 변경사항을 체크하는 모듈입니다.
+     * @memberof eg
+     */
+
+    var ListDiffer =
+    /*#__PURE__*/
+    function () {
+      /**
+       * @param - Initializing Data Array. <ko> 초기 설정할 데이터 배열.</ko>
+       * @param - This callback function returns the key of the item. <ko> 아이템의 키를 반환하는 콜백 함수입니다.</ko>
+       * @example
+       * import ListDiffer from "@egjs/list-differ";
+       * // script => eg.ListDiffer
+       * const differ = new ListDiffer([0, 1, 2, 3, 4, 5], e => e);
+       * const result = differ.update([7, 8, 0, 4, 3, 6, 2, 1]);
+       * // List before update
+       * // [1, 2, 3, 4, 5]
+       * console.log(result.prevList);
+       * // Updated list
+       * // [4, 3, 6, 2, 1]
+       * console.log(result.list);
+       * // Index array of values added to `list`.
+       * // [0, 1, 5]
+       * console.log(result.added);
+       * // Index array of values removed in `prevList`.
+       * // [5]
+       * console.log(result.removed);
+       * // An array of index pairs of `prevList` and `list` with different indexes from `prevList` and `list`.
+       * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+       * console.log(result.changed);
+       * // The subset of `changed` and an array of index pairs that moved data directly. Indicate an array of absolute index pairs of `ordered`.(Formatted by: Array<[index of prevList, index of list]>)
+       * // [[4, 3], [3, 4], [2, 6]]
+       * console.log(result.pureChanged);
+       * // An array of index pairs to be `ordered` that can synchronize `list` before adding data. (Formatted by: Array<[prevIndex, nextIndex]>)
+       * // [[4, 1], [4, 2], [4, 3]]
+       * console.log(result.ordered);
+       * // An array of index pairs of `prevList` and `list` that have not been added/removed so data is preserved.
+       * // [[0, 2], [4, 3], [3, 4], [2, 6], [1, 7]]
+       * console.log(result.maintained);
+       */
+      function ListDiffer(list, findKeyCallback) {
+        if (list === void 0) {
+          list = [];
+        }
+
+        this.findKeyCallback = findKeyCallback;
+        this.list = [].slice.call(list);
+      }
+      /**
+       * Update list.
+       * @ko 리스트를 업데이트를 합니다.
+       * @param - List to update <ko> 업데이트할 리스트 </ko>
+       * @return - Returns the results of an update from `prevList` to `list`.<ko> `prevList`에서 `list`로 업데이트한 결과를 반환한다. </ko>
+       */
+
+
+      var __proto = ListDiffer.prototype;
+
+      __proto.update = function (list) {
+        var newData = [].slice.call(list);
+        var result = diff$1(this.list, newData, this.findKeyCallback);
+        this.list = newData;
+        return result;
+      };
+
+      return ListDiffer;
+    }();
+
+    /*
+    Copyright (c) 2019-present NAVER Corp.
+    name: @egjs/children-differ
+    license: MIT
+    author: NAVER Corp.
+    repository: https://github.com/naver/egjs-children-differ
+    version: 1.0.0
+    */
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+
+    /* global Reflect, Promise */
+    var extendStatics$2 = function (d, b) {
+      extendStatics$2 = Object.setPrototypeOf || {
+        __proto__: []
+      } instanceof Array && function (d, b) {
+        d.__proto__ = b;
+      } || function (d, b) {
+        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+      };
+
+      return extendStatics$2(d, b);
+    };
+
+    function __extends$3(d, b) {
+      extendStatics$2(d, b);
+
+      function __() {
+        this.constructor = d;
+      }
+
+      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    /*
+    egjs-children-differ
+    Copyright (c) 2019-present NAVER Corp.
+    MIT license
+    */
+    var findKeyCallback = typeof Map === "function" ? undefined : function () {
+      var childrenCount = 0;
+      return function (el) {
+        return el.__DIFF_KEY__ || (el.__DIFF_KEY__ = ++childrenCount);
+      };
+    }();
+
+    /**
+     * A module that checks diff when child are added, removed, or changed .
+     * @ko 자식 노드들에서 자식 노드가 추가되거나 삭제되거나 순서가 변경된 사항을 체크하는 모듈입니다.
+     * @memberof eg
+     * @extends eg.ListDiffer
+     */
+
+    var ChildrenDiffer =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$3(ChildrenDiffer, _super);
+      /**
+       * @param - Initializing Children <ko> 초기 설정할 자식 노드들</ko>
+       */
+
+
+      function ChildrenDiffer(list) {
+        if (list === void 0) {
+          list = [];
+        }
+
+        return _super.call(this, list, findKeyCallback) || this;
+      }
+
+      return ChildrenDiffer;
+    }(ListDiffer);
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: preact-moveable
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable
+    version: 0.9.6
+    */
+
+    /*
+    Copyright (c) 2019 Daybrush
+    name: react-moveable
+    license: MIT
+    author: Daybrush
+    repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
+    version: 0.10.6
+    */
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+
+    /* global Reflect, Promise */
+    var extendStatics$3 = function (d, b) {
+      extendStatics$3 = Object.setPrototypeOf || {
+        __proto__: []
+      } instanceof Array && function (d, b) {
+        d.__proto__ = b;
+      } || function (d, b) {
+        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+      };
+
+      return extendStatics$3(d, b);
+    };
+
+    function __extends$4(d, b) {
+      extendStatics$3(d, b);
+
+      function __() {
+        this.constructor = d;
+      }
+
+      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign$3 = function () {
+      __assign$3 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+
+        return t;
+      };
+
+      return __assign$3.apply(this, arguments);
+    };
+
+    function add(matrix, inverseMatrix, startIndex, endIndex, fromStart, k) {
+      for (var i = startIndex; i < endIndex; ++i) {
+        matrix[i] += matrix[fromStart + i - startIndex] * k;
+        inverseMatrix[i] += inverseMatrix[fromStart + i - startIndex] * k;
+      }
+    }
+
+    function swap(matrix, inverseMatrix, startIndex, endIndex, fromStart) {
+      for (var i = startIndex; i < endIndex; ++i) {
+        var v = matrix[i];
+        var iv = inverseMatrix[i];
+        matrix[i] = matrix[fromStart + i - startIndex];
+        matrix[fromStart + i - startIndex] = v;
+        inverseMatrix[i] = inverseMatrix[fromStart + i - startIndex];
+        inverseMatrix[fromStart + i - startIndex] = iv;
+      }
+    }
+
+    function divide(matrix, inverseMatrix, startIndex, endIndex, k) {
+      for (var i = startIndex; i < endIndex; ++i) {
+        matrix[i] /= k;
+        inverseMatrix[i] /= k;
+      }
+    }
+
+    function createIdentityMatrix(n) {
+      var length = n * n;
+      var matrix = [];
+
+      for (var i = 0; i < length; ++i) {
+        matrix[i] = i % (n + 1) ? 0 : 1;
+      }
+
+      return matrix;
+    }
+    function createScaleMatrix(scale, n) {
+      var m = createIdentityMatrix(n);
+      var length = Math.min(scale.length, n - 1);
+
+      for (var i = 0; i < length; ++i) {
+        m[(n + 1) * i] = scale[i];
+      }
+
+      return m;
+    }
+    function createOriginMatrix(origin, n) {
+      var m = createIdentityMatrix(n);
+      var length = Math.min(origin.length, n - 1);
+
+      for (var i = 0; i < length; ++i) {
+        m[n * (i + 1) - 1] = origin[i];
+      }
+
+      return m;
+    }
+    function ignoreDimension(matrix, m, n) {
+      if (n === void 0) {
+        n = Math.sqrt(matrix.length);
+      }
+
+      var newMatrix = matrix.slice();
+
+      for (var i = 0; i < n; ++i) {
+        newMatrix[i * n + m - 1] = 0;
+        newMatrix[(m - 1) * n + i] = 0;
+      }
+
+      newMatrix[(m - 1) * (n + 1)] = 1;
+      return newMatrix;
+    }
+    function invert(matrix, n) {
+      if (n === void 0) {
+        n = Math.sqrt(matrix.length);
+      }
+
+      var newMatrix = matrix.slice();
+      var inverseMatrix = createIdentityMatrix(n);
+
+      for (var i = 0; i < n; ++i) {
+        var startIndex = n * i;
+        var endIndex = n * (i + 1);
+        var identityIndex = startIndex + i;
+
+        if (newMatrix[identityIndex] === 0) {
+          for (var j = i + 1; j < n; ++j) {
+            if (newMatrix[n * j + i]) {
+              swap(newMatrix, inverseMatrix, startIndex, endIndex, n * j);
+              break;
+            }
+          }
+        }
+
+        if (newMatrix[identityIndex]) {
+          divide(newMatrix, inverseMatrix, startIndex, endIndex, newMatrix[identityIndex]);
+        } else {
+          // no inverse matrix
+          return [];
+        }
+
+        for (var j = 0; j < n; ++j) {
+          var targetStartIndex = n * j;
+          var targetEndIndex = targetStartIndex + n;
+          var targetIndex = targetStartIndex + i;
+          var target = newMatrix[targetIndex];
+
+          if (target === 0 || i === j) {
+            continue;
+          }
+
+          add(newMatrix, inverseMatrix, targetStartIndex, targetEndIndex, startIndex, -target);
+        }
+      }
+
+      return inverseMatrix;
+    }
+    function transpose(matrix, n) {
+      if (n === void 0) {
+        n = Math.sqrt(matrix.length);
+      }
+
+      var newMatrix = [];
+
+      for (var i = 0; i < n; ++i) {
+        for (var j = 0; j < n; ++j) {
+          newMatrix[j * n + i] = matrix[n * i + j];
+        }
+      }
+
+      return newMatrix;
+    }
+    function convertPositionMatrix(matrix, n) {
+      var newMatrix = matrix.slice();
+
+      for (var i = matrix.length; i < n - 1; ++i) {
+        newMatrix[i] = 0;
+      }
+
+      newMatrix[n - 1] = 1;
+      return newMatrix;
+    }
+    function convertDimension(matrix, n, m) {
+      if (n === void 0) {
+        n = Math.sqrt(matrix.length);
+      } // n < m
+
+
+      if (n === m) {
+        return matrix;
+      }
+
+      var newMatrix = createIdentityMatrix(m);
+      var length = Math.min(n, m);
+
+      for (var i = 0; i < length - 1; ++i) {
+        for (var j = 0; j < length - 1; ++j) {
+          newMatrix[i * m + j] = matrix[i * n + j];
+        }
+
+        newMatrix[(i + 1) * m - 1] = matrix[(i + 1) * n - 1];
+        newMatrix[(m - 1) * m + i] = matrix[(n - 1) * n + i];
+      }
+
+      newMatrix[m * m - 1] = matrix[n * n - 1];
+      return newMatrix;
+    }
+    window.b = convertDimension;
+    function multiplies(n) {
+      var matrixes = [];
+
+      for (var _i = 1; _i < arguments.length; _i++) {
+        matrixes[_i - 1] = arguments[_i];
+      }
+
+      var m = createIdentityMatrix(n);
+      matrixes.forEach(function (matrix) {
+        m = multiply(m, matrix, n);
+      });
+      return m;
+    }
+    function multiply(matrix, matrix2, n) {
+      var newMatrix = []; // n * m X m * k
+
+      var m = matrix.length / n;
+      var k = matrix2.length / m;
+
+      if (!m) {
+        return matrix2;
+      } else if (!k) {
+        return matrix;
+      }
+
+      for (var i = 0; i < n; ++i) {
+        for (var j = 0; j < k; ++j) {
+          newMatrix[i * k + j] = 0;
+
+          for (var l = 0; l < m; ++l) {
+            newMatrix[i * k + j] += matrix[i * m + l] * matrix2[l * k + j];
+          }
+        }
+      } // n * k
+
+
+      return newMatrix;
+    }
+    function multiplyCSS(matrix, matrix2, n) {
+      if (n === void 0) {
+        n = Math.sqrt(matrix.length);
+      }
+
+      var newMatrix = []; // n(y) * m(x) X m(y) * k(x)
+
+      var m = matrix.length / n;
+      var k = matrix2.length / m;
+
+      for (var i = 0; i < n; ++i) {
+        for (var j = 0; j < k; ++j) {
+          newMatrix[i + j * k] = 0;
+
+          for (var l = 0; l < m; ++l) {
+            newMatrix[i + j * k] += matrix[i + l * m] * matrix2[l + j * k];
+          }
+        }
+      } // n * k
+
+
+      return newMatrix;
+    }
+    function sum(pos1, pos2) {
+      var length = Math.min(pos1.length, pos2.length);
+      var nextPos = pos1.slice();
+
+      for (var i = 0; i < length; ++i) {
+        nextPos[i] = nextPos[i] + pos2[i];
+      }
+
+      return nextPos;
+    }
+    function minus(pos1, pos2) {
+      var length = Math.min(pos1.length, pos2.length);
+      var nextPos = pos1.slice();
+
+      for (var i = 0; i < length; ++i) {
+        nextPos[i] = nextPos[i] - pos2[i];
+      }
+
+      return nextPos;
+    }
+    function caculate(matrix, matrix2, n) {
+      if (n === void 0) {
+        n = matrix2.length;
+      }
+
+      var result = multiply(matrix, matrix2, n);
+      var k = result[n - 1];
+      return result.map(function (v) {
+        return v / k;
+      });
+    }
+    function getOrigin(matrix, n) {
+      if (n === void 0) {
+        n = Math.sqrt(matrix.length);
+      }
+
+      var originMatrix = [];
+
+      for (var i = 0; i < n - 1; ++i) {
+        originMatrix[i] = matrix[(i + 1) * n - 1];
+      }
+
+      originMatrix[n - 1] = 0;
+      return originMatrix;
+    }
+    function convertCSStoMatrix(a) {
+      if (a.length === 6) {
+        return [a[0], a[2], a[4], a[1], a[3], a[5], 0, 0, 1];
+      }
+
+      return transpose(a);
+    }
+    function convertMatrixtoCSS(a) {
+      if (a.length === 9) {
+        return [a[0], a[3], a[1], a[4], a[2], a[5]];
+      }
+
+      return transpose(a);
+    }
+    function getRotateMatrix(rad) {
+      var cos = Math.cos(rad);
+      var sin = Math.sin(rad);
+      return [cos, -sin, 0, sin, cos, 0, 0, 0, 1];
+    }
+    function rotate(pos, deg) {
+      return caculate(getRotateMatrix(deg * Math.PI / 180), convertPositionMatrix(pos, 3));
+    }
+
+    function prefix() {
+      var classNames = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        classNames[_i] = arguments[_i];
+      }
+
+      return prefixNames.apply(void 0, [PREFIX].concat(classNames));
+    }
+    function createIdentityMatrix3() {
+      return createIdentityMatrix(3);
+    }
+    function getTransformMatrix(transform) {
+      if (!transform || transform === "none") {
+        return [1, 0, 0, 1, 0, 0];
+      }
+
+      if (isObject(transform)) {
+        return transform;
+      }
+
+      var value = splitBracket(transform).value;
+      return value.split(/s*,\s*/g).map(function (v) {
+        return parseFloat(v);
+      });
+    }
+    function getAbsoluteMatrix(matrix, n, origin) {
+      return multiplies(n, createOriginMatrix(origin, n), matrix, createOriginMatrix(origin.map(function (a) {
+        return -a;
+      }), n));
+    }
+    function measureSVGSize(el, unit, isHorizontal) {
+      if (unit === "%") {
+        var viewBox = el.ownerSVGElement.viewBox.baseVal;
+        return viewBox[isHorizontal ? "width" : "height"] / 100;
+      }
+
+      return 1;
+    }
+    function getBeforeTransformOrigin(el) {
+      var relativeOrigin = getTransformOrigin(window.getComputedStyle(el, ":before"));
+      return relativeOrigin.map(function (o, i) {
+        var _a = splitUnit(o),
+            value = _a.value,
+            unit = _a.unit;
+
+        return value * measureSVGSize(el, unit, i === 0);
+      });
+    }
+    function getTransformOrigin(style) {
+      var transformOrigin = style.transformOrigin;
+      return transformOrigin ? transformOrigin.split(" ") : ["0", "0"];
+    }
+    function caculateMatrixStack(target, container, prevMatrix, prevN) {
+      var _a;
+
+      var el = target;
+      var matrixes = [];
+      var isContainer = !!prevMatrix || target === container;
+      var isSVGGraphicElement = el.tagName.toLowerCase() !== "svg" || "ownerSVGElement" in el;
+      var is3d = false;
+      var n = 3;
+      var transformOrigin;
+      var targetMatrix;
+
+      while (el && (isContainer || el !== container)) {
+        var tagName = el.tagName.toLowerCase();
+        var style = window.getComputedStyle(el);
+        var matrix = convertCSStoMatrix(getTransformMatrix(style.transform));
+
+        if (!is3d && matrix.length === 16) {
+          is3d = true;
+          n = 4;
+          var matrixesLength = matrixes.length;
+
+          for (var i = 0; i < matrixesLength; ++i) {
+            matrixes[i] = convertDimension(matrixes[i], 3, 4);
+          }
+        }
+
+        if (is3d && matrix.length === 9) {
+          matrix = convertDimension(matrix, 3, 4);
+        }
+
+        var offsetLeft = el.offsetLeft;
+        var offsetTop = el.offsetTop; // svg
+
+        var hasNotOffset = isUndefined$1(offsetLeft);
+        var origin = void 0; // inner svg element
+
+        if (hasNotOffset && tagName !== "svg") {
+          origin = isNotSupportTransformOrigin ? getBeforeTransformOrigin(el) : getTransformOrigin(style).map(function (pos) {
+            return parseFloat(pos);
+          });
+          hasNotOffset = false;
+
+          if (tagName === "g") {
+            offsetLeft = 0;
+            offsetTop = 0;
+          } else {
+            _a = getSVGGraphicsOffset(el, origin), offsetLeft = _a[0], offsetTop = _a[1], origin[0] = _a[2], origin[1] = _a[3];
+          }
+        } else {
+          origin = getTransformOrigin(style).map(function (pos) {
+            return parseFloat(pos);
+          });
+        }
+
+        if (tagName === "svg" && targetMatrix) {
+          matrixes.push(getSVGMatrix(el, n), createIdentityMatrix(n));
+        }
+
+        matrixes.push(getAbsoluteMatrix(matrix, n, origin), createOriginMatrix([hasNotOffset ? el : offsetLeft, hasNotOffset ? origin : offsetTop], n));
+
+        if (!targetMatrix) {
+          targetMatrix = matrix;
+        }
+
+        if (!transformOrigin) {
+          transformOrigin = origin;
+        }
+
+        if (isContainer) {
+          break;
+        }
+
+        el = el.parentElement;
+      }
+
+      var mat = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n);
+      var beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN, n) : createIdentityMatrix(n);
+      var offsetMatrix = createIdentityMatrix(n);
+      var length = matrixes.length;
+      matrixes.reverse();
+      matrixes.forEach(function (matrix, i) {
+        var _a;
+
+        if (length - 2 === i) {
+          beforeMatrix = mat.slice();
+        }
+
+        if (length - 1 === i) {
+          offsetMatrix = mat.slice();
+        }
+
+        if (isObject(matrix[n - 1])) {
+          _a = getSVGOffset(matrix[n - 1], container, n, matrix[2 * n - 1], mat, matrixes[i + 1]), matrix[n - 1] = _a[0], matrix[2 * n - 1] = _a[1];
+        }
+
+        mat = multiply(mat, matrix, n);
+      });
+      var isMatrix3d = !isSVGGraphicElement && is3d;
+      var transform = (isMatrix3d ? "matrix3d" : "matrix") + "(" + convertMatrixtoCSS(isSVGGraphicElement && targetMatrix.length === 16 ? convertDimension(targetMatrix, 4, 3) : targetMatrix) + ")";
+      return [beforeMatrix, offsetMatrix, mat, targetMatrix, transform, transformOrigin, is3d];
+    }
+    function getSVGMatrix(el, n) {
+      var clientWidth = el.clientWidth;
+      var clientHeight = el.clientHeight;
+      var viewBox = el.viewBox.baseVal;
+      var viewBoxWidth = viewBox.width || clientWidth;
+      var viewBoxHeight = viewBox.height || clientHeight;
+      var scaleX = clientWidth / viewBoxWidth;
+      var scaleY = clientHeight / viewBoxHeight;
+      var preserveAspectRatio = el.preserveAspectRatio.baseVal; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
+
+      var align = preserveAspectRatio.align; // 1 : meet 2: slice
+
+      var meetOrSlice = preserveAspectRatio.meetOrSlice;
+      var svgOrigin = [0, 0];
+      var scale = [scaleX, scaleY];
+      var translate = [0, 0];
+
+      if (align !== 1) {
+        var xAlign = (align - 2) % 3;
+        var yAlign = Math.floor((align - 2) / 3);
+        svgOrigin[0] = viewBoxWidth * xAlign / 2;
+        svgOrigin[1] = viewBoxHeight * yAlign / 2;
+        var scaleDimension = meetOrSlice === 2 ? Math.max(scaleY, scaleX) : Math.min(scaleX, scaleY);
+        scale[0] = scaleDimension;
+        scale[1] = scaleDimension;
+        translate[0] = (clientWidth - viewBoxWidth) / 2 * xAlign;
+        translate[1] = (clientHeight - viewBoxHeight) / 2 * yAlign;
+      }
+
+      var scaleMatrix = createScaleMatrix(scale, n);
+      scaleMatrix[n - 1] = translate[0], scaleMatrix[2 * n - 1] = translate[1];
+      return getAbsoluteMatrix(scaleMatrix, n, svgOrigin);
+    }
+    function getSVGGraphicsOffset(el, origin) {
+      if (!el.getBBox) {
+        return [0, 0];
+      }
+
+      var bbox = el.getBBox();
+      var svgElement = el.ownerSVGElement;
+      var viewBox = svgElement.viewBox.baseVal;
+      var left = bbox.x - viewBox.x;
+      var top = bbox.y - viewBox.y;
+      return [left, top, origin[0] - left, origin[1] - top];
+    }
+    function caculatePosition(matrix, pos, n) {
+      return caculate(matrix, convertPositionMatrix(pos, n), n);
+    }
+    function caculateRect(matrix, width, height, n) {
+      var pos1 = caculatePosition(matrix, [0, 0], n);
+      var pos2 = caculatePosition(matrix, [width, 0], n);
+      var pos3 = caculatePosition(matrix, [0, height], n);
+      var pos4 = caculatePosition(matrix, [width, height], n);
+      return [pos1, pos2, pos3, pos4];
+    }
+    function getSVGOffset(el, container, n, origin, beforeMatrix, absoluteMatrix) {
+      var _a;
+
+      var _b = getSize(el),
+          width = _b[0],
+          height = _b[1];
+
+      var containerRect = (container || document.documentElement).getBoundingClientRect();
+      var rect = el.getBoundingClientRect();
+      var rectLeft = rect.left - containerRect.left;
+      var rectTop = rect.top - containerRect.top;
+      var rectWidth = rect.width;
+      var rectHeight = rect.height;
+      var mat = multiplies(n, beforeMatrix, absoluteMatrix);
+      var poses = caculateRect(mat, width, height, n);
+      var posesX = poses.map(function (pos) {
+        return pos[0];
+      });
+      var posesY = poses.map(function (pos) {
+        return pos[1];
+      });
+      var posOrigin = caculatePosition(mat, origin, n);
+      var prevLeft = Math.min.apply(Math, posesX);
+      var prevTop = Math.min.apply(Math, posesY);
+      var prevOrigin = minus(posOrigin, [prevLeft, prevTop]);
+      var prevWidth = Math.max.apply(Math, posesX) - prevLeft;
+      var prevHeight = Math.max.apply(Math, posesY) - prevTop;
+      var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight];
+      var offset = [0, 0];
+      var count = 0;
+
+      while (++count < 10) {
+        var inverseBeforeMatrix = invert(beforeMatrix, n);
+        _a = minus(caculatePosition(inverseBeforeMatrix, rectOrigin, n), caculatePosition(inverseBeforeMatrix, posOrigin, n)), offset[0] = _a[0], offset[1] = _a[1];
+        var mat2 = multiplies(n, beforeMatrix, createOriginMatrix(offset, n), absoluteMatrix);
+        var nextPoses = caculateRect(mat2, width, height, n);
+        var nextLeft = Math.min.apply(Math, nextPoses.map(function (pos) {
+          return pos[0];
+        }));
+        var nextTop = Math.min.apply(Math, nextPoses.map(function (pos) {
+          return pos[1];
+        }));
+        var distLeft = nextLeft - rectLeft;
+        var distTop = nextTop - rectTop;
+
+        if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) {
+          break;
+        }
+
+        rectOrigin[0] -= distLeft;
+        rectOrigin[1] -= distTop;
+      }
+
+      return offset.map(function (p) {
+        return Math.round(p);
+      });
+    }
+    function caculateMoveablePosition(matrix, origin, width, height) {
+      var is3d = matrix.length === 16;
+      var n = is3d ? 4 : 3;
+
+      var _a = caculateRect(matrix, width, height, n),
+          _b = _a[0],
+          x1 = _b[0],
+          y1 = _b[1],
+          _c = _a[1],
+          x2 = _c[0],
+          y2 = _c[1],
+          _d = _a[2],
+          x3 = _d[0],
+          y3 = _d[1],
+          _e = _a[3],
+          x4 = _e[0],
+          y4 = _e[1];
+
+      var _f = caculatePosition(matrix, origin, n),
+          originX = _f[0],
+          originY = _f[1];
+
+      var minX = Math.min(x1, x2, x3, x4);
+      var minY = Math.min(y1, y2, y3, y4);
+      x1 = x1 - minX || 0;
+      x2 = x2 - minX || 0;
+      x3 = x3 - minX || 0;
+      x4 = x4 - minX || 0;
+      y1 = y1 - minY || 0;
+      y2 = y2 - minY || 0;
+      y3 = y3 - minY || 0;
+      y4 = y4 - minY || 0;
+      originX = originX - minX || 0;
+      originY = originY - minY || 0;
+      var center = [(x1 + x2 + x3 + x4) / 4, (y1 + y2 + y3 + y4) / 4];
+      var pos1Rad = getRad(center, [x1, y1]);
+      var pos2Rad = getRad(center, [x2, y2]);
+      var direction = pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI || pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI ? 1 : -1;
+      return [[minX, minY], [originX, originY], [x1, y1], [x2, y2], [x3, y3], [x4, y4], direction];
+    }
+    function getRad(pos1, pos2) {
+      var distX = pos2[0] - pos1[0];
+      var distY = pos2[1] - pos1[1];
+      var rad = Math.atan2(distY, distX);
+      return rad > 0 ? rad : rad + Math.PI * 2;
+    }
+    function getLineStyle(pos1, pos2) {
+      var distX = pos2[0] - pos1[0];
+      var distY = pos2[1] - pos1[1];
+      var width = Math.sqrt(distX * distX + distY * distY);
+      var rad = getRad(pos1, pos2);
+      return {
+        transform: "translate(" + pos1[0] + "px, " + pos1[1] + "px) rotate(" + rad + "rad)",
+        width: width + "px"
+      };
+    }
+    function getControlTransform() {
+      var poses = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        poses[_i] = arguments[_i];
+      }
+
+      var length = poses.length;
+      var x = poses.reduce(function (prev, pos) {
+        return prev + pos[0];
+      }, 0) / length;
+      var y = poses.reduce(function (prev, pos) {
+        return prev + pos[1];
+      }, 0) / length;
+      return {
+        transform: "translate(" + x + "px, " + y + "px)"
+      };
+    }
+    function getSize(target, style, isOffset, isBoxSizing) {
+      if (style === void 0) {
+        style = window.getComputedStyle(target);
+      }
+
+      if (isBoxSizing === void 0) {
+        isBoxSizing = isOffset || style.boxSizing === "border-box";
+      }
+
+      var width = target.offsetWidth;
+      var height = target.offsetHeight;
+      var hasOffset = !isUndefined$1(width);
+
+      if ((isOffset || isBoxSizing) && hasOffset) {
+        return [width, height];
+      }
+
+      width = target.clientWidth;
+      height = target.clientHeight;
+
+      if (!hasOffset && !width && !height) {
+        var bbox = target.getBBox();
+        return [bbox.width, bbox.height];
+      }
+
+      if (isOffset || isBoxSizing) {
+        var borderLeft = parseFloat(style.borderLeftWidth) || 0;
+        var borderRight = parseFloat(style.borderRightWidth) || 0;
+        var borderTop = parseFloat(style.borderTopWidth) || 0;
+        var borderBottom = parseFloat(style.borderBottomWidth) || 0;
+        return [width + borderLeft + borderRight, height + borderTop + borderBottom];
+      } else {
+        var paddingLeft = parseFloat(style.paddingLeft) || 0;
+        var paddingRight = parseFloat(style.paddingRight) || 0;
+        var paddingTop = parseFloat(style.paddingTop) || 0;
+        var paddingBottom = parseFloat(style.paddingBottom) || 0;
+        return [width - paddingLeft - paddingRight, height - paddingTop - paddingBottom];
+      }
+    }
+    function getRotationInfo(pos1, pos2, direction) {
+      var rotationRad = getRad(direction > 0 ? pos1 : pos2, direction > 0 ? pos2 : pos1);
+      var relativeRotationPos = multiply(getRotateMatrix(rotationRad), [0, -40, 1], 3);
+      var rotationPos = [(pos1[0] + pos2[0]) / 2 + relativeRotationPos[0], (pos1[1] + pos2[1]) / 2 + relativeRotationPos[1]];
+      return [rotationRad, rotationPos];
+    }
+    function getTargetInfo(target, container, state) {
+      var _a, _b, _c, _d, _e, _f;
+
+      var left = 0;
+      var top = 0;
+      var origin = [0, 0];
+      var pos1 = [0, 0];
+      var pos2 = [0, 0];
+      var pos3 = [0, 0];
+      var pos4 = [0, 0];
+      var beforeMatrix = createIdentityMatrix3();
+      var matrix = createIdentityMatrix3();
+      var targetMatrix = createIdentityMatrix3();
+      var width = 0;
+      var height = 0;
+      var transformOrigin = [0, 0];
+      var direction = 1;
+      var beforeDirection = 1;
+      var rotationPos = [0, 0];
+      var rotationRad = 0;
+      var is3d = false;
+      var targetTransform = "";
+      var beforeOrigin = [0, 0];
+      var prevMatrix = state ? state.beforeMatrix : undefined;
+      var prevN = state ? state.is3d ? 4 : 3 : undefined;
+
+      if (target) {
+        if (state) {
+          width = state.width;
+          height = state.height;
+        } else {
+          var style = window.getComputedStyle(target);
+          width = target.offsetWidth;
+          height = target.offsetHeight;
+
+          if (isUndefined$1(width)) {
+            _a = getSize(target, style, true), width = _a[0], height = _a[1];
+          }
+        }
+
+        var offsetMatrix = void 0;
+        _b = caculateMatrixStack(target, container, prevMatrix, prevN), beforeMatrix = _b[0], offsetMatrix = _b[1], matrix = _b[2], targetMatrix = _b[3], targetTransform = _b[4], transformOrigin = _b[5], is3d = _b[6];
+        _c = caculateMoveablePosition(matrix, transformOrigin, width, height), _d = _c[0], left = _d[0], top = _d[1], origin = _c[1], pos1 = _c[2], pos2 = _c[3], pos3 = _c[4], pos4 = _c[5], direction = _c[6];
+        var n = is3d ? 4 : 3;
+        var beforePos = [0, 0];
+        _e = caculateMoveablePosition(offsetMatrix, sum(transformOrigin, getOrigin(targetMatrix, n)), width, height), beforePos = _e[0], beforeOrigin = _e[1], beforeDirection = _e[6];
+        beforeOrigin = [beforeOrigin[0] + beforePos[0] - left, beforeOrigin[1] + beforePos[1] - top]; // 1 : clockwise
+        // -1 : counterclockwise
+
+        _f = getRotationInfo(pos1, pos2, direction), rotationRad = _f[0], rotationPos = _f[1];
+      }
+
+      return {
+        beforeDirection: beforeDirection,
+        direction: direction,
+        rotationRad: rotationRad,
+        rotationPos: rotationPos,
+        target: target,
+        left: left,
+        top: top,
+        pos1: pos1,
+        pos2: pos2,
+        pos3: pos3,
+        pos4: pos4,
+        width: width,
+        height: height,
+        beforeMatrix: beforeMatrix,
+        matrix: matrix,
+        targetTransform: targetTransform,
+        targetMatrix: targetMatrix,
+        is3d: is3d,
+        beforeOrigin: beforeOrigin,
+        origin: origin,
+        transformOrigin: transformOrigin
+      };
+    }
+    function getDirection(target) {
+      if (!target) {
+        return;
+      }
+
+      var direciton = target.getAttribute("data-direction");
+
+      if (!direciton) {
+        return;
+      }
+
+      var dir = [0, 0];
+      direciton.indexOf("w") > -1 && (dir[0] = -1);
+      direciton.indexOf("e") > -1 && (dir[0] = 1);
+      direciton.indexOf("n") > -1 && (dir[1] = -1);
+      direciton.indexOf("s") > -1 && (dir[1] = 1);
+      return dir;
+    }
+    function throttle(num, unit) {
+      if (!unit) {
+        return num;
+      }
+
+      return Math.round(num / unit) * unit;
+    }
+    function throttleArray(nums, unit) {
+      nums.forEach(function (_, i) {
+        nums[i] = throttle(nums[i], unit);
+      });
+    }
+    function warp(pos0, pos1, pos2, pos3, nextPos0, nextPos1, nextPos2, nextPos3) {
+      var x0 = pos0[0],
+          y0 = pos0[1];
+      var x1 = pos1[0],
+          y1 = pos1[1];
+      var x2 = pos2[0],
+          y2 = pos2[1];
+      var x3 = pos3[0],
+          y3 = pos3[1];
+      var u0 = nextPos0[0],
+          v0 = nextPos0[1];
+      var u1 = nextPos1[0],
+          v1 = nextPos1[1];
+      var u2 = nextPos2[0],
+          v2 = nextPos2[1];
+      var u3 = nextPos3[0],
+          v3 = nextPos3[1];
+      var matrix = [x0, y0, 1, 0, 0, 0, -u0 * x0, -u0 * y0, 0, 0, 0, x0, y0, 1, -v0 * x0, -v0 * y0, x1, y1, 1, 0, 0, 0, -u1 * x1, -u1 * y1, 0, 0, 0, x1, y1, 1, -v1 * x1, -v1 * y1, x2, y2, 1, 0, 0, 0, -u2 * x2, -u2 * y2, 0, 0, 0, x2, y2, 1, -v2 * x2, -v2 * y2, x3, y3, 1, 0, 0, 0, -u3 * x3, -u3 * y3, 0, 0, 0, x3, y3, 1, -v3 * x3, -v3 * y3];
+      var inverseMatrix = invert(matrix, 8);
+
+      if (!inverseMatrix.length) {
+        return [];
+      }
+
+      var h = multiply(inverseMatrix, [u0, v0, u1, v1, u2, v2, u3, v3], 8);
+      h[8] = 1;
+      return convertDimension(h, 3, 4);
+    }
+    function unset(self, name) {
+      if (self[name]) {
+        self[name].unset();
+        self[name] = null;
+      }
+    }
+    function getOrientationDirection(pos, pos1, pos2) {
+      return (pos[0] - pos1[0]) * (pos2[1] - pos1[1]) - (pos[1] - pos1[1]) * (pos2[0] - pos1[0]);
+    }
+    function isInside(pos, pos1, pos2, pos3, pos4) {
+      var k1 = getOrientationDirection(pos, pos1, pos2);
+      var k2 = getOrientationDirection(pos, pos2, pos4);
+      var k3 = getOrientationDirection(pos, pos4, pos1);
+      var k4 = getOrientationDirection(pos, pos2, pos4);
+      var k5 = getOrientationDirection(pos, pos4, pos3);
+      var k6 = getOrientationDirection(pos, pos3, pos2);
+      var signs1 = [k1, k2, k3];
+      var signs2 = [k4, k5, k6];
+
+      if (signs1.every(function (sign) {
+        return sign >= 0;
+      }) || signs1.every(function (sign) {
+        return sign <= 0;
+      }) || signs2.every(function (sign) {
+        return sign >= 0;
+      }) || signs2.every(function (sign) {
+        return sign <= 0;
+      })) {
+        return true;
+      }
+
+      return false;
+    }
+    function triggerEvent(moveable, name, e) {
+      return moveable.triggerEvent(name, e);
+    }
+
+    function getRotatiion(touches) {
+      return getRad([touches[0].clientX, touches[0].clientY], [touches[1].clientX, touches[1].clientY]) / Math.PI * 180;
+    }
+
+    var Pinchable = {
+      name: "pinchable",
+      updateRect: true,
+      pinchStart: function (moveable, _a) {
+        var _b;
+
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            touches = _a.touches,
+            inputEvent = _a.inputEvent,
+            targets = _a.targets;
+        var _c = moveable.props,
+            pinchable = _c.pinchable,
+            ables = _c.ables;
+
+        if (!pinchable) {
+          return false;
+        }
+
+        var state = moveable.state;
+        var eventName = "onPinch" + (targets ? "Group" : "") + "Start";
+        var controlEventName = "drag" + (targets ? "Group" : "") + "ControlStart";
+        var pinchAbles = (pinchable === true ? moveable.controlAbles : ables.filter(function (able) {
+          return pinchable.indexOf(able.name) > -1;
+        })).filter(function (able) {
+          return able.canPinch && able[controlEventName];
+        });
+        datas.pinchableDatas = {};
+        var result = triggerEvent(moveable, eventName, (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : state.target, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b));
+        datas.isPinch = result !== false;
+        datas.ables = pinchAbles;
+        var isPinch = datas.isPinch;
+
+        if (!isPinch) {
+          return false;
+        }
+
+        var parentRotate = getRotatiion(touches);
+        pinchAbles.forEach(function (able) {
+          datas[able.name + "Datas"] = {};
+          var e = {
+            datas: datas[able.name + "Datas"],
+            clientX: clientX,
+            clientY: clientY,
+            inputEvent: inputEvent,
+            parentRotate: parentRotate,
+            pinchFlag: true
+          };
+          able[controlEventName](moveable, e);
+        });
+        return isPinch;
+      },
+      pinch: function (moveable, _a) {
+        var _b;
+
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            pinchScale = _a.scale,
+            distance = _a.distance,
+            touches = _a.touches,
+            inputEvent = _a.inputEvent,
+            targets = _a.targets;
+
+        if (!datas.isPinch) {
+          return;
+        }
+
+        var parentRotate = getRotatiion(touches);
+        var parentDistance = distance * (1 - 1 / pinchScale);
+        var target = moveable.state.target;
+        inputEvent.preventDefault();
+        inputEvent.stopPropagation();
+        var params = (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : target, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b);
+        var eventName = "onPinch" + (targets ? "Group" : "");
+        triggerEvent(moveable, eventName, params);
+        var ables = datas.ables;
+        var controlEventName = "drag" + (targets ? "Group" : "") + "Control";
+        ables.forEach(function (able) {
+          able[controlEventName](moveable, {
+            clientX: clientX,
+            clientY: clientY,
+            datas: datas[able.name + "Datas"],
+            inputEvent: inputEvent,
+            parentDistance: parentDistance,
+            parentRotate: parentRotate,
+            pinchFlag: true
+          });
+        });
+        return params;
+      },
+      pinchEnd: function (moveable, _a) {
+        var _b;
+
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            isPinch = _a.isPinch,
+            inputEvent = _a.inputEvent,
+            targets = _a.targets;
+
+        if (!datas.isPinch) {
+          return;
+        }
+
+        var target = moveable.state.target;
+        var eventName = "onPinch" + (targets ? "Group" : "") + "End";
+        triggerEvent(moveable, eventName, (_b = {}, _b[targets ? "targets" : "target"] = targets ? targets : target, _b.isDrag = isPinch, _b.clientX = clientX, _b.clientY = clientY, _b.datas = datas.pinchableDatas, _b));
+        var ables = datas.ables;
+        var controlEventName = "drag" + (targets ? "Group" : "") + "ControlEnd";
+        ables.forEach(function (able) {
+          able[controlEventName](moveable, {
+            clientX: clientX,
+            clientY: clientY,
+            isDrag: isPinch,
+            datas: datas[able.name + "Datas"],
+            inputEvent: inputEvent,
+            pinchFlag: true
+          });
+        });
+        return isPinch;
+      },
+      pinchGroupStart: function (moveable, e) {
+        return this.pinchStart(moveable, __assign$3({}, e, {
+          targets: moveable.props.targets
+        }));
+      },
+      pinchGroup: function (moveable, e) {
+        return this.pinch(moveable, __assign$3({}, e, {
+          targets: moveable.props.targets
+        }));
+      },
+      pinchGroupEnd: function (moveable, e) {
+        return this.pinchEnd(moveable, __assign$3({}, e, {
+          targets: moveable.props.targets
+        }));
+      }
+    };
+
+    function setDragStart(moveable, _a) {
+      var datas = _a.datas;
+      var _b = moveable.state,
+          matrix = _b.matrix,
+          beforeMatrix = _b.beforeMatrix,
+          is3d = _b.is3d,
+          left = _b.left,
+          top = _b.top,
+          origin = _b.origin;
+      var n = is3d ? 4 : 3;
+      datas.is3d = is3d;
+      datas.matrix = matrix;
+      datas.inverseMatrix = invert(matrix, n);
+      datas.beforeMatrix = beforeMatrix;
+      datas.inverseBeforeMatrix = invert(beforeMatrix, n);
+      datas.absoluteOrigin = convertPositionMatrix(sum([left, top], origin), n);
+      datas.startDragBeforeDist = caculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n);
+      datas.startDragDist = caculate(datas.inverseMatrix, datas.absoluteOrigin, n);
+    }
+    function getDragDist(_a, isBefore) {
+      var datas = _a.datas,
+          distX = _a.distX,
+          distY = _a.distY;
+      var inverseBeforeMatrix = datas.inverseBeforeMatrix,
+          inverseMatrix = datas.inverseMatrix,
+          is3d = datas.is3d,
+          startDragBeforeDist = datas.startDragBeforeDist,
+          startDragDist = datas.startDragDist,
+          absoluteOrigin = datas.absoluteOrigin;
+      var n = is3d ? 4 : 3;
+      return minus(caculate(isBefore ? inverseBeforeMatrix : inverseMatrix, sum(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist);
+    }
+
+    function triggerChildAble(moveable, able, type, e, callback) {
+      var name = able.name;
+      var datas = e.datas;
+      var ableDatas = datas[name] || (datas[name] = []);
+      return moveable.moveables.map(function (child, i) {
+        var childDatas = ableDatas[i] || (ableDatas[i] = {});
+        var result = able[type](child, __assign$3({}, e, {
+          datas: childDatas,
+          parentFlag: true
+        }));
+        result && callback && callback(child, childDatas, result, i);
+        return result;
+      });
+    }
+    function getCustomEvent(datas) {
+      return datas.custom;
+    }
+    function setCustomEvent(clientX, clientY, datas, inputEvent) {
+      var e = datas.custom || (datas.custom = {
+        startX: clientX,
+        startY: clientY,
+        prevX: clientX,
+        prevY: clientY,
+        isDrag: false
+      });
+      var prevX = e.prevX,
+          prevY = e.prevY,
+          startX = e.startX,
+          startY = e.startY;
+      e.prevX = clientX;
+      e.prevY = clientY;
+
+      if (clientX !== prevX || clientY !== prevY) {
+        e.isDrag = true;
+      }
+
+      return {
+        clientX: clientX,
+        clientY: clientY,
+        distX: clientX - startX,
+        distY: clientY - startY,
+        deltaX: clientX - prevX,
+        deltaY: clientY - prevY,
+        isDrag: e.isDrag,
+        datas: datas,
+        inputEvent: inputEvent
+      };
+    }
+    function directionCondition(target) {
+      return hasClass(target, prefix("direction"));
+    }
+
+    var Draggable = {
+      name: "draggable",
+      dragStart: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+        var _b = moveable.state,
+            targetTransform = _b.targetTransform,
+            target = _b.target;
+        var style = window.getComputedStyle(target);
+        datas.datas = {};
+        datas.left = parseFloat(style.left || "") || 0;
+        datas.top = parseFloat(style.top || "") || 0;
+        datas.bottom = parseFloat(style.bottom || "") || 0;
+        datas.right = parseFloat(style.right || "") || 0;
+        datas.transform = targetTransform;
+        setDragStart(moveable, {
+          datas: datas
+        });
+        datas.prevDist = [0, 0];
+        datas.prevBeforeDist = [0, 0];
+        var result = triggerEvent(moveable, "onDragStart", {
+          datas: datas.datas,
+          target: target,
+          clientX: clientX,
+          clientY: clientY
+        });
+
+        if (result !== false) {
+          datas.isDrag = true;
+        } else {
+          datas.isPinch = false;
+        }
+
+        return datas.isDrag;
+      },
+      drag: function (moveable, _a) {
+        var datas = _a.datas,
+            distX = _a.distX,
+            distY = _a.distY,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            inputEvent = _a.inputEvent;
+        var isPinch = datas.isPinch,
+            isDrag = datas.isDrag,
+            prevDist = datas.prevDist,
+            prevBeforeDist = datas.prevBeforeDist,
+            transform = datas.transform;
+
+        if (!isDrag) {
+          return;
+        }
+
+        inputEvent.preventDefault();
+        inputEvent.stopPropagation();
+        var _b = moveable.props,
+            _c = _b.throttleDrag,
+            throttleDrag = _c === void 0 ? 0 : _c,
+            parentMoveable = _b.parentMoveable;
+        var target = moveable.state.target;
+        var beforeDist = getDragDist({
+          datas: datas,
+          distX: distX,
+          distY: distY
+        }, true);
+        var dist = getDragDist({
+          datas: datas,
+          distX: distX,
+          distY: distY
+        }, false);
+        throttleArray(dist, throttleDrag);
+        throttleArray(beforeDist, throttleDrag);
+        var delta = minus(dist, prevDist);
+        var beforeDelta = minus(beforeDist, prevBeforeDist);
+        datas.prevDist = dist;
+        datas.prevBeforeDist = beforeDist;
+        var left = datas.left + beforeDist[0];
+        var top = datas.top + beforeDist[1];
+        var right = datas.right - beforeDist[0];
+        var bottom = datas.bottom - beforeDist[1];
+        var nextTransform = transform + " translate(" + dist[0] + "px, " + dist[1] + "px)";
+
+        if (!parentMoveable && delta.every(function (num) {
+          return !num;
+        }) && beforeDelta.some(function (num) {
+          return !num;
+        })) {
+          return;
+        }
+
+        var params = {
+          datas: datas.datas,
+          target: target,
+          transform: nextTransform,
+          dist: dist,
+          delta: delta,
+          beforeDist: beforeDist,
+          beforeDelta: beforeDelta,
+          left: left,
+          top: top,
+          right: right,
+          bottom: bottom,
+          clientX: clientX,
+          clientY: clientY,
+          isPinch: isPinch
+        };
+        triggerEvent(moveable, "onDrag", params);
+        return params;
+      },
+      dragEnd: function (moveable, _a) {
+        var datas = _a.datas,
+            isDrag = _a.isDrag,
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        if (!datas.isDrag) {
+          return;
+        }
+
+        datas.isDrag = false;
+        triggerEvent(moveable, "onDragEnd", {
+          target: moveable.state.target,
+          isDrag: isDrag,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        return isDrag;
+      },
+      dragGroupCondition: function (target) {
+        return hasClass(target, prefix("group"));
+      },
+      dragGroupStart: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            datas = e.datas;
+        triggerChildAble(moveable, this, "dragStart", e);
+        this.dragStart(moveable, e);
+        var result = triggerEvent(moveable, "onDragGroupStart", {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        datas.isDrag = result !== false;
+        return datas.isDrag;
+      },
+      dragGroup: function (moveable, e) {
+        if (!e.datas.isDrag) {
+          return;
+        }
+
+        var events = triggerChildAble(moveable, this, "drag", e);
+        var params = this.drag(moveable, e);
+
+        if (!params) {
+          return;
+        }
+
+        var nextParams = __assign$3({
+          targets: moveable.props.targets,
+          events: events
+        }, params);
+
+        triggerEvent(moveable, "onDragGroup", nextParams);
+        return nextParams;
+      },
+      dragGroupEnd: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            isDrag = e.isDrag,
+            datas = e.datas;
+
+        if (!datas.isDrag) {
+          return;
+        }
+
+        triggerChildAble(moveable, this, "dragEnd", e);
+        triggerEvent(moveable, "onDragGroupEnd", {
+          targets: moveable.props.targets,
+          isDrag: isDrag,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        return isDrag;
+      }
+    };
+
+    function setRotateStartInfo(datas, clientX, clientY, origin, rotationPos) {
+      datas.startAbsoluteOrigin = [clientX - rotationPos[0] + origin[0], clientY - rotationPos[1] + origin[1]];
+      datas.prevDeg = getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180;
+      datas.startDeg = datas.prevDeg;
+      datas.loop = 0;
+    }
+
+    function getDeg(datas, deg, direction, throttleRotate) {
+      var prevDeg = datas.prevDeg,
+          startDeg = datas.startDeg,
+          prevLoop = datas.loop;
+      deg = throttle(deg, throttleRotate);
+
+      if (prevDeg > deg && prevDeg > 270 && deg < 90) {
+        // 360 => 0
+        ++datas.loop;
+      } else if (prevDeg < deg && prevDeg < 90 && deg > 270) {
+        // 0 => 360
+        --datas.loop;
+      }
+
+      var absolutePrevDeg = prevLoop * 360 + prevDeg;
+      var absoluteDeg = datas.loop * 360 + deg;
+      var delta = direction * (absoluteDeg - absolutePrevDeg);
+      var dist = direction * (absoluteDeg - startDeg);
+      datas.prevDeg = deg;
+      return [delta, dist];
+    }
+
+    function getRotateInfo(datas, direction, clientX, clientY, throttleRotate) {
+      return getDeg(datas, getRad(datas.startAbsoluteOrigin, [clientX, clientY]) / Math.PI * 180, direction, throttleRotate);
+    }
+
+    function dragControlCondition(target) {
+      return hasClass(target, prefix("rotation"));
+    }
+
+    var Rotatable = {
+      name: "rotatable",
+      canPinch: true,
+      render: function (moveable) {
+        if (!moveable.props.rotatable) {
+          return null;
+        }
+
+        var _a = moveable.state,
+            pos1 = _a.pos1,
+            pos2 = _a.pos2,
+            rotationRad = _a.rotationRad;
+        return createElement("div", {
+          className: prefix("line rotation-line"),
+          style: {
+            // tslint:disable-next-line: max-line-length
+            transform: "translate(" + (pos1[0] + pos2[0]) / 2 + "px, " + (pos1[1] + pos2[1]) / 2 + "px) translateY(-40px) rotate(" + rotationRad + "rad)"
+          }
+        }, createElement("div", {
+          className: prefix("control", "rotation")
+        }));
+      },
+      dragControlCondition: dragControlCondition,
+      dragControlStart: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            parentRotate = _a.parentRotate,
+            parentFlag = _a.parentFlag,
+            pinchFlag = _a.pinchFlag;
+        var _b = moveable.state,
+            target = _b.target,
+            left = _b.left,
+            top = _b.top,
+            origin = _b.origin,
+            beforeOrigin = _b.beforeOrigin,
+            rotationPos = _b.rotationPos,
+            direction = _b.direction,
+            beforeDirection = _b.beforeDirection,
+            targetTransform = _b.targetTransform;
+
+        if (!target) {
+          return false;
+        }
+
+        datas.transform = targetTransform;
+        datas.left = left;
+        datas.top = top;
+
+        if (pinchFlag || parentFlag) {
+          datas.beforeInfo = {
+            prevDeg: parentRotate,
+            startDeg: parentRotate,
+            loop: 0
+          };
+          datas.afterInfo = {
+            prevDeg: parentRotate,
+            startDeg: parentRotate,
+            loop: 0
+          };
+        } else {
+          datas.afterInfo = {};
+          datas.beforeInfo = {};
+          setRotateStartInfo(datas.afterInfo, clientX, clientY, origin, rotationPos);
+          setRotateStartInfo(datas.beforeInfo, clientX, clientY, beforeOrigin, rotationPos);
+        }
+
+        datas.direction = direction;
+        datas.beforeDirection = beforeDirection;
+        datas.datas = {};
+        var result = triggerEvent(moveable, "onRotateStart", {
+          datas: datas.datas,
+          target: target,
+          clientX: clientX,
+          clientY: clientY
+        });
+        datas.isRotate = result !== false;
+        return datas.isRotate;
+      },
+      dragControl: function (moveable, _a) {
+        var _b, _c, _d, _e;
+
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            parentRotate = _a.parentRotate,
+            parentFlag = _a.parentFlag,
+            pinchFlag = _a.pinchFlag;
+        var direction = datas.direction,
+            beforeDirection = datas.beforeDirection,
+            beforeInfo = datas.beforeInfo,
+            afterInfo = datas.afterInfo,
+            isRotate = datas.isRotate;
+
+        if (!isRotate) {
+          return;
+        }
+
+        var _f = moveable.props,
+            _g = _f.throttleRotate,
+            throttleRotate = _g === void 0 ? 0 : _g,
+            parentMoveable = _f.parentMoveable;
+        var delta;
+        var dist;
+        var beforeDelta;
+        var beforeDist;
+
+        if (pinchFlag || parentFlag) {
+          _b = getDeg(afterInfo, parentRotate, direction, throttleRotate), delta = _b[0], dist = _b[1];
+          _c = getDeg(beforeInfo, parentRotate, direction, throttleRotate), beforeDelta = _c[0], beforeDist = _c[1];
+        } else {
+          _d = getRotateInfo(afterInfo, direction, clientX, clientY, throttleRotate), delta = _d[0], dist = _d[1];
+          _e = getRotateInfo(beforeInfo, beforeDirection, clientX, clientY, throttleRotate), beforeDelta = _e[0], beforeDist = _e[1];
+        }
+
+        if (!delta && !beforeDelta && !parentMoveable) {
+          return;
+        }
+
+        var params = {
+          target: moveable.props.target,
+          datas: datas.datas,
+          delta: delta,
+          dist: dist,
+          clientX: clientX,
+          clientY: clientY,
+          beforeDist: beforeDist,
+          beforeDelta: beforeDelta,
+          transform: datas.transform + " rotate(" + dist + "deg)",
+          isPinch: !!pinchFlag
+        };
+        triggerEvent(moveable, "onRotate", params);
+        return params;
+      },
+      dragControlEnd: function (moveable, _a) {
+        var datas = _a.datas,
+            isDrag = _a.isDrag,
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        if (!datas.isRotate) {
+          return false;
+        }
+
+        datas.isRotate = false;
+        triggerEvent(moveable, "onRotateEnd", {
+          datas: datas.datas,
+          clientX: clientX,
+          clientY: clientY,
+          target: moveable.state.target,
+          isDrag: isDrag
+        });
+        return isDrag;
+      },
+      dragGroupControlCondition: dragControlCondition,
+      dragGroupControlStart: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            datas = e.datas,
+            inputEvent = e.inputEvent;
+        var _a = moveable.state,
+            parentLeft = _a.left,
+            parentTop = _a.top,
+            parentBeforeOrigin = _a.beforeOrigin;
+        triggerChildAble(moveable, this, "dragControlStart", __assign$3({}, e, {
+          parentRotate: 0
+        }), function (child, childDatas) {
+          var _a = child.state,
+              left = _a.left,
+              top = _a.top,
+              beforeOrigin = _a.beforeOrigin;
+          var childClient = sum(minus([left, top], [parentLeft, parentTop]), minus(beforeOrigin, parentBeforeOrigin));
+          var dragDatas = childDatas.drag || (childDatas.drag = {});
+          Draggable.dragStart(child, setCustomEvent(childClient[0], childClient[1], dragDatas, inputEvent));
+        });
+        this.dragControlStart(moveable, e);
+        var result = triggerEvent(moveable, "onRotateGroupStart", {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        datas.isRotate = result !== false;
+        return datas.isDrag;
+      },
+      dragGroupControl: function (moveable, e) {
+        var inputEvent = e.inputEvent,
+            datas = e.datas;
+
+        if (!datas.isRotate) {
+          return;
+        }
+
+        var params = this.dragControl(moveable, e);
+
+        if (!params) {
+          return;
+        }
+
+        var parentRotate = params.beforeDist;
+        var deg = params.beforeDelta;
+        var events = triggerChildAble(moveable, this, "dragControl", __assign$3({}, e, {
+          parentRotate: parentRotate
+        }), function (child, childDatas, result, i) {
+          var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+          var _a = getCustomEvent(dragDatas),
+              prevX = _a.prevX,
+              prevY = _a.prevY;
+
+          var _b = rotate([prevX, prevY], deg),
+              clientX = _b[0],
+              clientY = _b[1];
+
+          var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+          result.drag = dragResult;
+        });
+
+        var nextParams = __assign$3({
+          targets: moveable.props.targets,
+          events: events
+        }, params);
+
+        moveable.rotation += params.beforeDelta;
+        triggerEvent(moveable, "onRotateGroup", nextParams);
+        return nextParams;
+      },
+      dragGroupControlEnd: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            isDrag = e.isDrag,
+            datas = e.datas;
+
+        if (!datas.isRotate) {
+          return;
+        }
+
+        this.dragControlEnd(moveable, e);
+        triggerChildAble(moveable, this, "dragControlEnd", e);
+        var nextParams = {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          isDrag: isDrag,
+          datas: datas.datas
+        };
+        triggerEvent(moveable, "onRotateGroupEnd", nextParams);
+        return isDrag;
+      }
+    };
+
+    function renderAllDirection(moveable) {
+      return renderDiagonalDirection(moveable).concat(renderDirection(moveable));
+    }
+    function renderDiagonalDirection(moveable) {
+      var _a = moveable.props,
+          resizable = _a.resizable,
+          scalable = _a.scalable,
+          warpable = _a.warpable;
+
+      if (!resizable && !scalable && !warpable) {
+        return [];
+      }
+
+      var _b = moveable.state,
+          pos1 = _b.pos1,
+          pos2 = _b.pos2,
+          pos3 = _b.pos3,
+          pos4 = _b.pos4;
+      return [createElement("div", {
+        className: prefix("control", "direction", "nw"),
+        "data-direction": "nw",
+        key: "nw",
+        style: getControlTransform(pos1)
+      }), createElement("div", {
+        className: prefix("control", "direction", "ne"),
+        "data-direction": "ne",
+        key: "ne",
+        style: getControlTransform(pos2)
+      }), createElement("div", {
+        className: prefix("control", "direction", "sw"),
+        "data-direction": "sw",
+        key: "sw",
+        style: getControlTransform(pos3)
+      }), createElement("div", {
+        className: prefix("control", "direction", "se"),
+        "data-direction": "se",
+        key: "se",
+        style: getControlTransform(pos4)
+      })];
+    }
+    function renderDirection(moveable) {
+      var _a = moveable.props,
+          resizable = _a.resizable,
+          scalable = _a.scalable;
+
+      if (!resizable && !scalable) {
+        return [];
+      }
+
+      var _b = moveable.state,
+          pos1 = _b.pos1,
+          pos2 = _b.pos2,
+          pos3 = _b.pos3,
+          pos4 = _b.pos4;
+      return [createElement("div", {
+        className: prefix("control", "direction", "n"),
+        "data-direction": "n",
+        key: "n",
+        style: getControlTransform(pos1, pos2)
+      }), createElement("div", {
+        className: prefix("control", "direction", "w"),
+        "data-direction": "w",
+        key: "w",
+        style: getControlTransform(pos1, pos3)
+      }), createElement("div", {
+        className: prefix("control", "direction", "e"),
+        "data-direction": "e",
+        key: "e",
+        style: getControlTransform(pos2, pos4)
+      }), createElement("div", {
+        className: prefix("control", "direction", "s"),
+        "data-direction": "s",
+        key: "s",
+        style: getControlTransform(pos3, pos4)
+      })];
+    }
+
+    var Resizable = {
+      name: "resizable",
+      dragControlOnly: true,
+      updateRect: true,
+      canPinch: true,
+      render: function (moveable) {
+        var _a = moveable.props,
+            resizable = _a.resizable,
+            edge = _a.edge;
+
+        if (resizable) {
+          if (edge) {
+            return renderDiagonalDirection(moveable);
+          }
+
+          return renderAllDirection(moveable);
+        }
+      },
+      dragControlCondition: directionCondition,
+      dragControlStart: function (moveable, e) {
+        var inputTarget = e.inputEvent.target,
+            pinchFlag = e.pinchFlag;
+        var direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+        var _a = moveable.state,
+            target = _a.target,
+            width = _a.width,
+            height = _a.height;
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            datas = e.datas;
+
+        if (!direction || !target) {
+          return false;
+        }
+
+        !pinchFlag && setDragStart(moveable, {
+          datas: datas
+        });
+        datas.datas = {};
+        datas.direction = direction;
+        datas.width = width;
+        datas.height = height;
+        datas.prevWidth = 0;
+        datas.prevHeight = 0;
+        var result = triggerEvent(moveable, "onResizeStart", {
+          datas: datas.datas,
+          target: target,
+          clientX: clientX,
+          clientY: clientY
+        });
+
+        if (result !== false) {
+          datas.isResize = true;
+        }
+
+        return datas.isResize;
+      },
+      dragControl: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            distX = _a.distX,
+            distY = _a.distY,
+            pinchFlag = _a.pinchFlag,
+            parentDistance = _a.parentDistance,
+            parentScale = _a.parentScale;
+        var direction = datas.direction,
+            width = datas.width,
+            height = datas.height,
+            prevWidth = datas.prevWidth,
+            prevHeight = datas.prevHeight,
+            isResize = datas.isResize;
+
+        if (!isResize) {
+          return;
+        }
+
+        var _b = moveable.props,
+            keepRatio = _b.keepRatio,
+            _c = _b.throttleResize,
+            throttleResize = _c === void 0 ? 0 : _c,
+            parentMoveable = _b.parentMoveable;
+        var target = moveable.state.target;
+        var distWidth = 0;
+        var distHeight = 0; // diagonal
+
+        if (parentScale) {
+          distWidth = (parentScale - 1) * width;
+          distHeight = (parentScale - 1) * height;
+        } else if (pinchFlag) {
+          if (parentDistance) {
+            distWidth = parentDistance;
+            distHeight = parentDistance * height / width;
+          }
+        } else {
+          var dist = getDragDist({
+            datas: datas,
+            distX: distX,
+            distY: distY
+          });
+          distWidth = direction[0] * dist[0];
+          distHeight = direction[1] * dist[1];
+
+          if (keepRatio && direction[0] && direction[1] && width && height) {
+            var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+            var rad = getRad([0, 0], dist);
+            var standardRad = getRad([0, 0], direction);
+            var distDiagonal = Math.cos(rad - standardRad) * size;
+            distWidth = distDiagonal;
+            distHeight = distDiagonal * height / width;
+          }
+        }
+
+        distWidth = throttle(distWidth, throttleResize);
+        distHeight = throttle(distHeight, throttleResize);
+        var nextWidth = width + distWidth;
+        var nextHeight = height + distHeight;
+        var delta = [distWidth - prevWidth, distHeight - prevHeight];
+        datas.prevWidth = distWidth;
+        datas.prevHeight = distHeight;
+
+        if (!parentMoveable && delta.every(function (num) {
+          return !num;
+        })) {
+          return;
+        }
+
+        var params = {
+          target: target,
+          width: nextWidth,
+          height: nextHeight,
+          direction: direction,
+          dist: [distWidth, distHeight],
+          datas: datas.datas,
+          delta: delta,
+          clientX: clientX,
+          clientY: clientY,
+          isPinch: !!pinchFlag
+        };
+        triggerEvent(moveable, "onResize", params);
+        return params;
+      },
+      dragControlEnd: function (moveable, _a) {
+        var datas = _a.datas,
+            isDrag = _a.isDrag,
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        if (!datas.isResize) {
+          return false;
+        }
+
+        datas.isResize = false;
+        triggerEvent(moveable, "onResizeEnd", {
+          target: moveable.state.target,
+          datas: datas.datas,
+          clientX: clientX,
+          clientY: clientY,
+          isDrag: isDrag
+        });
+        return isDrag;
+      },
+      dragGroupControlCondition: directionCondition,
+      dragGroupControlStart: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            datas = e.datas,
+            inputEvent = e.inputEvent;
+        var _a = moveable.state,
+            parentLeft = _a.left,
+            parentTop = _a.top;
+        var enabledEvents = triggerChildAble(moveable, this, "dragControlStart", __assign$3({}, e, {
+          parentRotate: 0
+        }), function (child, childDatas) {
+          var _a = child.state,
+              left = _a.left,
+              top = _a.top;
+          var dragDatas = childDatas.drag || (childDatas.drag = {});
+          Draggable.dragStart(child, setCustomEvent(left - parentLeft, top - parentTop, dragDatas, inputEvent));
+        });
+
+        if (enabledEvents.every(function (ev) {
+          return !ev;
+        })) {
+          return false;
+        }
+
+        this.dragControlStart(moveable, e);
+        var result = triggerEvent(moveable, "onResizeGroupStart", {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        datas.isResize = result !== false;
+        return datas.isResize;
+      },
+      dragGroupControl: function (moveable, e) {
+        var inputEvent = e.inputEvent,
+            datas = e.datas;
+
+        if (!datas.isResize) {
+          return;
+        }
+
+        var params = this.dragControl(moveable, e);
+
+        if (!params) {
+          return;
+        }
+
+        var width = params.width,
+            height = params.height,
+            dist = params.dist;
+        var parentScale = [width / (width - dist[0]), height / (height - dist[1])];
+        var events = triggerChildAble(moveable, this, "dragControl", __assign$3({}, e, {
+          parentScale: parentScale
+        }), function (child, childDatas, result) {
+          var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+          var _a = getCustomEvent(dragDatas),
+              startX = _a.startX,
+              startY = _a.startY;
+
+          var clientX = parentScale[0] * startX;
+          var clientY = parentScale[1] * startY;
+          var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+          result.drag = dragResult;
+        });
+
+        var nextParams = __assign$3({
+          targets: moveable.props.targets,
+          events: events
+        }, params);
+
+        triggerEvent(moveable, "onResizeGroup", nextParams);
+        return nextParams;
+      },
+      dragGroupControlEnd: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            isDrag = e.isDrag,
+            datas = e.datas;
+
+        if (!datas.isResize) {
+          return;
+        }
+
+        this.dragControlEnd(moveable, e);
+        triggerChildAble(moveable, this, "dragControlEnd", e);
+        var nextParams = {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          isDrag: isDrag,
+          datas: datas.datas
+        };
+        triggerEvent(moveable, "onResizeGroupEnd", nextParams);
+        return isDrag;
+      }
+    };
+
+    var Scalable = {
+      name: "scalable",
+      dragControlOnly: true,
+      canPinch: true,
+      render: function (moveable) {
+        var _a = moveable.props,
+            resizable = _a.resizable,
+            scalable = _a.scalable,
+            edge = _a.edge;
+
+        if (!resizable && scalable) {
+          if (edge) {
+            return renderDiagonalDirection(moveable);
+          }
+
+          return renderAllDirection(moveable);
+        }
+      },
+      dragControlCondition: directionCondition,
+      dragControlStart: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            pinchFlag = _a.pinchFlag,
+            inputTarget = _a.inputEvent.target;
+        var direction = pinchFlag ? [1, 1] : getDirection(inputTarget);
+        var _b = moveable.state,
+            width = _b.width,
+            height = _b.height,
+            targetTransform = _b.targetTransform,
+            target = _b.target;
+
+        if (!direction || !target) {
+          return false;
+        }
+
+        if (!pinchFlag) {
+          setDragStart(moveable, {
+            datas: datas
+          });
+        }
+
+        datas.datas = {};
+        datas.transform = targetTransform;
+        datas.prevDist = [1, 1];
+        datas.direction = direction;
+        datas.width = width;
+        datas.height = height;
+        var result = triggerEvent(moveable, "onScaleStart", {
+          target: target,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+
+        if (result !== false) {
+          datas.isScale = true;
+        }
+
+        return datas.isScale;
+      },
+      dragControl: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            distX = _a.distX,
+            distY = _a.distY,
+            parentScale = _a.parentScale,
+            parentDistance = _a.parentDistance,
+            pinchFlag = _a.pinchFlag;
+        var prevDist = datas.prevDist,
+            direction = datas.direction,
+            width = datas.width,
+            height = datas.height,
+            transform = datas.transform,
+            isScale = datas.isScale;
+
+        if (!isScale) {
+          return false;
+        }
+
+        var _b = moveable.props,
+            keepRatio = _b.keepRatio,
+            throttleScale = _b.throttleScale,
+            parentMoveable = _b.parentMoveable;
+        var target = moveable.state.target;
+        var scaleX = 1;
+        var scaleY = 1;
+
+        if (parentScale) {
+          scaleX = parentScale[0];
+          scaleY = parentScale[1];
+        } else if (pinchFlag) {
+          if (parentDistance) {
+            scaleX = (width + parentDistance) / width;
+            scaleY = (height + parentDistance * height / width) / height;
+          }
+        } else {
+          var dist = getDragDist({
+            datas: datas,
+            distX: distX,
+            distY: distY
+          });
+          var distWidth = direction[0] * dist[0];
+          var distHeight = direction[1] * dist[1]; // diagonal
+
+          if (keepRatio && direction[0] && direction[1] && width && height) {
+            var size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
+            var rad = getRad([0, 0], dist);
+            var standardRad = getRad([0, 0], direction);
+            var distDiagonal = Math.cos(rad - standardRad) * size;
+            distWidth = distDiagonal;
+            distHeight = distDiagonal * height / width;
+          }
+
+          var nextWidth = width + distWidth;
+          var nextHeight = height + distHeight;
+          scaleX = nextWidth / width;
+          scaleY = nextHeight / height;
+        }
+
+        scaleX = throttle(scaleX, throttleScale);
+        scaleY = throttle(scaleY, throttleScale);
+
+        if (scaleX === 0) {
+          scaleX = (prevDist[0] > 0 ? 1 : -1) * MIN_SCALE;
+        }
+
+        if (scaleY === 0) {
+          scaleY = (prevDist[1] > 0 ? 1 : -1) * MIN_SCALE;
+        }
+
+        var nowScale = [scaleX, scaleY];
+        datas.prevDist = nowScale;
+
+        if (scaleX === prevDist[0] && scaleY === prevDist[1] && !parentMoveable) {
+          return false;
+        }
+
+        var params = {
+          target: target,
+          scale: nowScale,
+          direction: direction,
+          dist: [scaleX - 1, scaleY - 1],
+          delta: [scaleX / prevDist[0], scaleY / prevDist[1]],
+          transform: transform + " scale(" + scaleX + ", " + scaleY + ")",
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas,
+          isPinch: !!pinchFlag
+        };
+        triggerEvent(moveable, "onScale", params);
+        return params;
+      },
+      dragControlEnd: function (moveable, _a) {
+        var datas = _a.datas,
+            isDrag = _a.isDrag,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            pinchFlag = _a.pinchFlag;
+
+        if (!datas.isScale) {
+          return false;
+        }
+
+        datas.isScale = false;
+        triggerEvent(moveable, "onScaleEnd", {
+          target: moveable.state.target,
+          isDrag: isDrag,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        return isDrag;
+      },
+      dragGroupControlCondition: directionCondition,
+      dragGroupControlStart: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            datas = e.datas,
+            inputEvent = e.inputEvent;
+        var _a = moveable.state,
+            parentLeft = _a.left,
+            parentTop = _a.top,
+            parentOrigin = _a.origin;
+        var parentAbsoluteOrigin = [parentLeft + parentOrigin[0], parentTop + parentOrigin[1]];
+        datas.rotation = moveable.rotation;
+        var enabledEvents = triggerChildAble(moveable, this, "dragControlStart", e, function (child, childDatas) {
+          var _a = child.state,
+              left = _a.left,
+              top = _a.top,
+              origin = _a.origin;
+          var dragDatas = childDatas.drag || (childDatas.drag = {});
+          Draggable.dragStart(child, setCustomEvent(left + origin[0] - parentAbsoluteOrigin[0], top + origin[1] - parentAbsoluteOrigin[1], dragDatas, inputEvent));
+        });
+
+        if (enabledEvents.every(function (ev) {
+          return !ev;
+        })) {
+          return false;
+        }
+
+        this.dragControlStart(moveable, e);
+        var result = triggerEvent(moveable, "onScaleGroupStart", {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+        datas.isScale = result !== false;
+        return datas.isScale;
+      },
+      dragGroupControl: function (moveable, e) {
+        var inputEvent = e.inputEvent,
+            datas = e.datas;
+
+        if (!datas.isScale) {
+          return;
+        }
+
+        var params = this.dragControl(moveable, e);
+
+        if (!params) {
+          return;
+        }
+
+        var scale = params.scale;
+        var events = triggerChildAble(moveable, this, "dragControl", __assign$3({}, e, {
+          parentScale: scale
+        }), function (child, childDatas, result) {
+          var dragDatas = childDatas.drag || (childDatas.drag = {});
+
+          var _a = getCustomEvent(dragDatas),
+              startX = _a.startX,
+              startY = _a.startY;
+
+          var startPos = rotate([startX, startY], -datas.rotation);
+
+          var _b = rotate([startPos[0] * scale[0], startPos[1] * scale[1]], moveable.rotation),
+              clientX = _b[0],
+              clientY = _b[1];
+
+          var dragResult = Draggable.drag(child, setCustomEvent(clientX, clientY, dragDatas, inputEvent));
+          result.drag = dragResult;
+        });
+
+        var nextParams = __assign$3({
+          targets: moveable.props.targets,
+          events: events
+        }, params);
+
+        triggerEvent(moveable, "onScaleGroup", nextParams);
+        return nextParams;
+      },
+      dragGroupControlEnd: function (moveable, e) {
+        var clientX = e.clientX,
+            clientY = e.clientY,
+            isDrag = e.isDrag,
+            datas = e.datas;
+
+        if (!datas.isScale) {
+          return;
+        }
+
+        this.dragControlEnd(moveable, e);
+        triggerChildAble(moveable, this, "dragControlEnd", e);
+        var nextParams = {
+          targets: moveable.props.targets,
+          clientX: clientX,
+          clientY: clientY,
+          isDrag: isDrag,
+          datas: datas.datas
+        };
+        triggerEvent(moveable, "onScaleGroupEnd", nextParams);
+        return isDrag;
+      }
+    };
+
+    function getMiddleLinePos(pos1, pos2) {
+      return pos1.map(function (pos, i) {
+        return dot(pos, pos2[i], 1, 2);
+      });
+    }
+
+    function getTriangleRad(pos1, pos2, pos3) {
+      // pos1 Rad
+      var rad1 = getRad(pos1, pos2);
+      var rad2 = getRad(pos1, pos3);
+      var rad = rad2 - rad1;
+      return rad >= 0 ? rad : rad + 2 * Math.PI;
+    }
+
+    function isValidPos(poses1, poses2) {
+      var rad1 = getTriangleRad(poses1[0], poses1[1], poses1[2]);
+      var rad2 = getTriangleRad(poses2[0], poses2[1], poses2[2]);
+      var pi = Math.PI;
+
+      if (rad1 >= pi && rad2 <= pi || rad1 <= pi && rad2 >= pi) {
+        return false;
+      }
+
+      return true;
+    }
+
+    var Warpable = {
+      name: "warpable",
+      dragControlOnly: true,
+      render: function (moveable) {
+        var _a = moveable.props,
+            resizable = _a.resizable,
+            scalable = _a.scalable,
+            warpable = _a.warpable;
+
+        if (resizable || scalable || !warpable) {
+          return;
+        }
+
+        var _b = moveable.state,
+            pos1 = _b.pos1,
+            pos2 = _b.pos2,
+            pos3 = _b.pos3,
+            pos4 = _b.pos4;
+        var linePosFrom1 = getMiddleLinePos(pos1, pos2);
+        var linePosFrom2 = getMiddleLinePos(pos2, pos1);
+        var linePosFrom3 = getMiddleLinePos(pos1, pos3);
+        var linePosFrom4 = getMiddleLinePos(pos3, pos1);
+        var linePosTo1 = getMiddleLinePos(pos3, pos4);
+        var linePosTo2 = getMiddleLinePos(pos4, pos3);
+        var linePosTo3 = getMiddleLinePos(pos2, pos4);
+        var linePosTo4 = getMiddleLinePos(pos4, pos2);
+        return [createElement("div", {
+          className: prefix("line"),
+          key: "middeLine1",
+          style: getLineStyle(linePosFrom1, linePosTo1)
+        }), createElement("div", {
+          className: prefix("line"),
+          key: "middeLine2",
+          style: getLineStyle(linePosFrom2, linePosTo2)
+        }), createElement("div", {
+          className: prefix("line"),
+          key: "middeLine3",
+          style: getLineStyle(linePosFrom3, linePosTo3)
+        }), createElement("div", {
+          className: prefix("line"),
+          key: "middeLine4",
+          style: getLineStyle(linePosFrom4, linePosTo4)
+        })].concat(renderDiagonalDirection(moveable));
+      },
+      dragControlCondition: function (target) {
+        return hasClass(target, prefix("direction"));
+      },
+      dragControlStart: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            inputTarget = _a.inputEvent.target;
+        var _b = moveable.props,
+            target = _b.target,
+            onWarpStart = _b.onWarpStart;
+        var direction = getDirection(inputTarget);
+
+        if (!direction || !target) {
+          return false;
+        }
+
+        var _c = moveable.state,
+            transformOrigin = _c.transformOrigin,
+            is3d = _c.is3d,
+            targetTransform = _c.targetTransform,
+            targetMatrix = _c.targetMatrix,
+            width = _c.width,
+            height = _c.height;
+        datas.datas = {};
+        datas.targetTransform = targetTransform;
+        datas.targetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4);
+        datas.targetInverseMatrix = ignoreDimension(invert(datas.targetMatrix, 4), 3, 4);
+        datas.direction = direction;
+        setDragStart(moveable, {
+          datas: datas
+        });
+        datas.poses = [[0, 0], [width, 0], [0, height], [width, height]].map(function (p, i) {
+          return minus(p, transformOrigin);
+        });
+        datas.nextPoses = datas.poses.map(function (_a) {
+          var x = _a[0],
+              y = _a[1];
+          return caculate(datas.targetMatrix, [x, y, 0, 1], 4);
+        });
+        datas.posNum = (direction[0] === -1 ? 0 : 1) + (direction[1] === -1 ? 0 : 2);
+        datas.prevMatrix = createIdentityMatrix(4);
+        var result = onWarpStart && onWarpStart({
+          target: target,
+          clientX: clientX,
+          clientY: clientY,
+          datas: datas.datas
+        });
+
+        if (result !== false) {
+          datas.isWarp = true;
+        }
+
+        return result;
+      },
+      dragControl: function (moveable, _a) {
+        var datas = _a.datas,
+            clientX = _a.clientX,
+            clientY = _a.clientY,
+            distX = _a.distX,
+            distY = _a.distY;
+        var posNum = datas.posNum,
+            poses = datas.poses,
+            targetInverseMatrix = datas.targetInverseMatrix,
+            prevMatrix = datas.prevMatrix,
+            isWarp = datas.isWarp;
+
+        if (!isWarp) {
+          return false;
+        }
+
+        var _b = moveable.props,
+            target = _b.target,
+            onWarp = _b.onWarp;
+        var dist = getDragDist({
+          datas: datas,
+          distX: distX,
+          distY: distY
+        }, true);
+        var nextPoses = datas.nextPoses.slice();
+        nextPoses[posNum] = [nextPoses[posNum][0] + dist[0], nextPoses[posNum][1] + dist[1]];
+
+        if (!NEARBY_POS.every(function (nearByPoses) {
+          return isValidPos(nearByPoses.map(function (i) {
+            return poses[i];
+          }), nearByPoses.map(function (i) {
+            return nextPoses[i];
+          }));
+        })) {
+          return false;
+        }
+
+        var h = warp(poses[0], poses[1], poses[2], poses[3], nextPoses[0], nextPoses[1], nextPoses[2], nextPoses[3]);
+
+        if (!h.length) {
+          return false;
+        }
+
+        var matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4));
+        var transform = datas.targetTransform + " matrix3d(" + matrix.join(",") + ")";
+        var delta = multiply(invert(prevMatrix, 4), matrix, 4);
+        datas.prevMatrix = matrix;
+        onWarp && onWarp({
+          target: target,
+          clientX: clientX,
+          clientY: clientY,
+          delta: delta,
+          multiply: multiplyCSS,
+          dist: matrix,
+          transform: transform,
+          datas: datas.datas
+        });
+        return true;
+      },
+      dragControlEnd: function (moveable, _a) {
+        var datas = _a.datas,
+            isDrag = _a.isDrag,
+            clientX = _a.clientX,
+            clientY = _a.clientY;
+
+        if (!datas.isWarp) {
+          return false;
+        }
+
+        datas.isWarp = false;
+        var _b = moveable.props,
+            target = _b.target,
+            onWarpEnd = _b.onWarpEnd;
+        onWarpEnd && onWarpEnd({
+          target: target,
+          clientX: clientX,
+          clientY: clientY,
+          isDrag: isDrag,
+          datas: datas.datas
+        });
+        return isDrag;
+      }
+    };
+
+    var agent$1 = agent();
+    var isNotSupportTransformOrigin = agent$1.os.name.indexOf("ios") > -1 || agent$1.browser.name.indexOf("safari") > -1;
+    var PREFIX = "moveable-";
+    var MOVEABLE_CSS = prefixCSS(PREFIX, "\n{\n\tposition: fixed;\n\twidth: 0;\n\theight: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 3000;\n}\n.control-box {\n    z-index: 0;\n}\n.line, .control {\n\tleft: 0;\n\ttop: 0;\n}\n.control {\n\tposition: absolute;\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n\tbackground: #4af;\n\tmargin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n.line {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tbackground: #4af;\n\ttransform-origin: 0px 0.5px;\n}\n.line.rotation-line {\n\theight: 40px;\n\twidth: 1px;\n\ttransform-origin: 0.5px 39.5px;\n}\n.line.rotation-line .control {\n\tborder-color: #4af;\n\tbackground:#fff;\n\tcursor: alias;\n}\n.control.origin {\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n\tmargin-left: -6px;\n\tpointer-events: none;\n}\n.direction.e, .direction.w {\n\tcursor: ew-resize;\n}\n.direction.s, .direction.n {\n\tcursor: ns-resize;\n}\n.direction.nw, .direction.se, :host.reverse .direction.ne, :host.reverse .direction.sw {\n\tcursor: nwse-resize;\n}\n.direction.ne, .direction.sw, :host.reverse .direction.nw, :host.reverse .direction.se {\n\tcursor: nesw-resize;\n}\n.group {\n    z-index: -1;\n}\n" + (isNotSupportTransformOrigin ? ":global svg *:before {\n\tcontent:\"\";\n\ttransform-origin: inherit;\n}" : "") + "\n");
+    var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]];
+    var MIN_SCALE = 0.000000001;
+    var MOVEABLE_ABLES = [Pinchable, Draggable, Rotatable, Resizable, Scalable, Warpable];
+    var MAX_NUM = Math.pow(10, 10);
+    var MIN_NUM = -MAX_NUM;
+
+    var Origin = {
+      name: "origin",
+      render: function (moveable) {
+        if (!moveable.props.origin) {
+          return null;
+        }
+
+        var beforeOrigin = moveable.state.beforeOrigin;
+        return [// <div className={prefix("control", "origin")} style={getControlTransform(origin)} key="origin"></div>,
+        createElement("div", {
+          className: prefix("control", "origin"),
+          style: getControlTransform(beforeOrigin),
+          key: "beforeOrigin"
+        })];
+      }
+    };
+
+    function triggerAble(moveable, ableType, eventOperation, prefix, eventType, e) {
+      var eventName = "" + eventOperation + prefix + eventType;
+      var conditionName = "" + eventOperation + prefix + "Condition";
+      var isStart = eventType === "Start";
+      var isGroup = prefix.indexOf("Group") > -1;
+      var ables = moveable[ableType];
+      var results = ables.filter(function (able) {
+        var condition = isStart && able[conditionName];
+
+        if (able[eventName] && (!condition || condition(e.inputEvent.target))) {
+          return able[eventName](moveable, e);
+        }
+
+        return false;
+      });
+
+      if (!isStart && results.length) {
+        if (results.some(function (able) {
+          return able.updateRect;
+        }) && !isGroup) {
+          moveable.updateRect(eventType);
+        } else {
+          moveable.updateTarget(eventType);
+        }
+      }
+    }
+
+    function getAbleDragger(moveable, target, ableType, prefix) {
+      var options = {
+        container: window
+      };
+      ["drag", "pinch"].forEach(function (eventOperation) {
+        ["Start", "", "End"].forEach(function (eventType) {
+          options["" + eventOperation + eventType.toLowerCase()] = function (e) {
+            return triggerAble(moveable, ableType, eventOperation, prefix, eventType, e);
+          };
+        });
+      });
+      return new Dragger(target, options);
+    }
+
+    var ControlBoxElement = styled("div", MOVEABLE_CSS);
+
+    function renderLine(direction, pos1, pos2) {
+      return createElement("div", {
+        className: prefix("line", "direction", direction),
+        "data-direction": direction,
+        style: getLineStyle(pos1, pos2)
+      });
+    }
+
+    var MoveableManager =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$4(MoveableManager, _super);
+
+      function MoveableManager() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+
+        _this.state = {
+          target: null,
+          beforeMatrix: createIdentityMatrix3(),
+          matrix: createIdentityMatrix3(),
+          targetMatrix: createIdentityMatrix3(),
+          targetTransform: "",
+          is3d: false,
+          left: 0,
+          top: 0,
+          width: 0,
+          height: 0,
+          transformOrigin: [0, 0],
+          direction: 1,
+          beforeDirection: 1,
+          rotationRad: 0,
+          rotationPos: [0, 0],
+          beforeOrigin: [0, 0],
+          origin: [0, 0],
+          pos1: [0, 0],
+          pos2: [0, 0],
+          pos3: [0, 0],
+          pos4: [0, 0]
+        };
+        _this.targetAbles = [];
+        _this.controlAbles = [];
+        return _this;
+      }
+
+      var __proto = MoveableManager.prototype;
+
+      __proto.render = function () {
+        this.update(false);
+        var _a = this.props,
+            edge = _a.edge,
+            parentPosition = _a.parentPosition;
+
+        var _b = parentPosition || {
+          left: 0,
+          top: 0
+        },
+            parentLeft = _b.left,
+            parentTop = _b.top;
+
+        var _c = this.state,
+            left = _c.left,
+            top = _c.top,
+            pos1 = _c.pos1,
+            pos2 = _c.pos2,
+            pos3 = _c.pos3,
+            pos4 = _c.pos4,
+            target = _c.target,
+            direction = _c.direction;
+        return createElement(ControlBoxElement, {
+          ref: ref$1(this, "controlBox"),
+          className: prefix("control-box", direction === -1 ? "reverse" : ""),
+          style: {
+            position: "absolute",
+            display: target ? "block" : "none",
+            transform: "translate(" + (left - parentLeft) + "px, " + (top - parentTop) + "px) translateZ(50px)"
+          }
+        }, this.renderAbles(), renderLine(edge ? "n" : "", pos1, pos2), renderLine(edge ? "e" : "", pos2, pos4), renderLine(edge ? "w" : "", pos1, pos3), renderLine(edge ? "s" : "", pos3, pos4));
+      };
+
+      __proto.componentDidMount = function () {
+        this.controlBox.getElement();
+        this.update(true);
+      };
+
+      __proto.componentWillUnmount = function () {
+        unset(this, "targetDragger");
+        unset(this, "controlDragger");
+      };
+
+      __proto.getContainer = function () {
+        var _a = this.props,
+            parentMoveable = _a.parentMoveable,
+            container = _a.container;
+        return container || parentMoveable && parentMoveable.getContainer() || this.controlBox.getElement().offsetParent;
+      };
+
+      __proto.isMoveableElement = function (target) {
+        return target && (target.getAttribute("class") || "").indexOf(PREFIX) > -1;
+      };
+
+      __proto.dragStart = function (e) {
+        this.targetDragger.onDragStart(e);
+      };
+
+      __proto.isInside = function (clientX, clientY) {
+        var _a = this.state,
+            pos1 = _a.pos1,
+            pos2 = _a.pos2,
+            pos3 = _a.pos3,
+            pos4 = _a.pos4,
+            target = _a.target;
+
+        if (!target) {
+          return false;
+        }
+
+        var _b = target.getBoundingClientRect(),
+            left = _b.left,
+            top = _b.top;
+
+        var pos = [clientX - left, clientY - top];
+        return isInside(pos, pos1, pos2, pos3, pos4);
+      };
+
+      __proto.updateRect = function (type, isTarget, isSetState) {
+        if (isSetState === void 0) {
+          isSetState = true;
+        }
+
+        var parentMoveable = this.props.parentMoveable;
+        var state = this.state;
+        var target = state.target || this.props.target;
+        this.updateState(getTargetInfo(target, this.getContainer(), isTarget ? state : undefined), parentMoveable ? false : isSetState);
+      };
+
+      __proto.updateTarget = function (type) {
+        this.updateRect(type, true);
+      };
+
+      __proto.update = function (isSetState) {
+        var props = this.props;
+        var target = props.target,
+            parentMoveable = props.parentMoveable;
+        var stateTarget = this.state.target;
+        var controlBox = this.controlBox;
+
+        if (!controlBox || !stateTarget && !target) {
+          return;
+        }
+
+        this.updateAbles();
+        var controlBoxElement = controlBox.getElement();
+        var hasTargetAble = this.targetAbles.length;
+        var hasControlAble = this.controlAbles.length;
+        var isTargetChanged = stateTarget !== target;
+
+        if (isTargetChanged) {
+          this.updateState({
+            target: target
+          });
+        }
+
+        if (!hasTargetAble || isTargetChanged) {
+          unset(this, "targetDragger");
+        }
+
+        if (!hasControlAble) {
+          unset(this, "controlDragger");
+        }
+
+        if (target && (!this.targetDragger && hasTargetAble || isTargetChanged)) {
+          this.targetDragger = getAbleDragger(this, target, "targetAbles", "");
+        }
+
+        if (!this.controlDragger && hasControlAble) {
+          this.controlDragger = getAbleDragger(this, controlBoxElement, "controlAbles", "Control");
+        }
+
+        if (isTargetChanged && !parentMoveable) {
+          this.updateRect("End", false, isSetState);
+        }
+
+        return isTargetChanged;
+      };
+
+      __proto.triggerEvent = function (name, e) {
+        var callback = this.props[name];
+        return callback && callback(e);
+      };
+
+      __proto.updateAbles = function () {
+        var props = this.props;
+        var enabledAbles = props.ables.filter(function (able) {
+          return props[able.name];
+        });
+        var controlAbleOnly = false;
+        var targetAbles = enabledAbles.filter(function (able) {
+          return able.dragStart || able.pinchStart;
+        });
+        var controlAbles = enabledAbles.filter(function (_a) {
+          var dragControlStart = _a.dragControlStart,
+              dragControlOnly = _a.dragControlOnly;
+
+          if (!dragControlStart || dragControlOnly && controlAbleOnly) {
+            return false;
+          }
+
+          if (dragControlOnly) {
+            controlAbleOnly = true;
+          }
+
+          return true;
+        });
+        this.targetAbles = targetAbles;
+        this.controlAbles = controlAbles;
+      };
+
+      __proto.updateState = function (nextState, isSetState) {
+        if (isSetState) {
+          this.setState(nextState);
+        } else {
+          var state = this.state;
+
+          for (var name in nextState) {
+            state[name] = nextState[name];
+          }
+        }
+      };
+
+      __proto.renderAbles = function () {
+        var _this = this;
+
+        var ables = this.props.ables.concat([Origin]);
+        return ables.map(function (_a) {
+          var render = _a.render;
+          return render && render(_this);
+        });
+      };
+
+      MoveableManager.defaultProps = {
+        target: null,
+        container: null,
+        origin: true,
+        keepRatio: true,
+        edge: false,
+        parentMoveable: null,
+        parentPosition: null,
+        ables: []
+      };
+      return MoveableManager;
+    }(PureComponent);
+
+    var Groupable = {
+      name: "groupable",
+      render: function (moveable) {
+        var targets = moveable.props.targets || [];
+        moveable.moveables = [];
+        var _a = moveable.state,
+            left = _a.left,
+            top = _a.top;
+        var position = {
+          left: left,
+          top: top
+        };
+        return targets.map(function (target, i) {
+          return createElement(MoveableManager, {
+            key: i,
+            ref: refs(moveable, "moveables", i),
+            target: target,
+            origin: false,
+            parentMoveable: moveable,
+            parentPosition: position
+          });
+        }).concat([createElement("div", {
+          key: "groupTarget",
+          ref: ref$1(moveable, "groupTargetElement"),
+          className: prefix("group")
+        })]);
+      }
+    };
+
+    function getMaxPos(poses, index) {
+      return Math.max.apply(Math, poses.map(function (_a) {
+        var pos1 = _a[0],
+            pos2 = _a[1],
+            pos3 = _a[2],
+            pos4 = _a[3];
+        return Math.max(pos1[index], pos2[index], pos3[index], pos4[index]);
+      }));
+    }
+
+    function getMinPos(poses, index) {
+      return Math.min.apply(Math, poses.map(function (_a) {
+        var pos1 = _a[0],
+            pos2 = _a[1],
+            pos3 = _a[2],
+            pos4 = _a[3];
+        return Math.min(pos1[index], pos2[index], pos3[index], pos4[index]);
+      }));
+    }
+
+    function getGroupRect(moveables, rotation) {
+      if (!moveables.length) {
+        return [0, 0, 0, 0];
+      }
+
+      var moveablePoses = moveables.map(function (_a) {
+        var _b = _a.state,
+            left = _b.left,
+            top = _b.top,
+            pos1 = _b.pos1,
+            pos2 = _b.pos2,
+            pos3 = _b.pos3,
+            pos4 = _b.pos4;
+        var pos = [left, top];
+        return [sum(pos, pos1), sum(pos, pos2), sum(pos, pos3), sum(pos, pos4)];
+      });
+      var minX = MAX_NUM;
+      var minY = MAX_NUM;
+      var groupWidth = 0;
+      var groupHeight = 0;
+
+      if (rotation % 90) {
+        var rad = rotation / 180 * Math.PI;
+        var a1_1 = Math.tan(rad);
+        var a2_1 = -1 / a1_1;
+        var b1s_1 = [MIN_NUM, MAX_NUM];
+        var b2s_1 = [MIN_NUM, MAX_NUM];
+        moveablePoses.forEach(function (poses) {
+          poses.forEach(function (pos) {
+            // ax + b = y
+            // ㅠ = y - ax
+            var b1 = pos[1] - a1_1 * pos[0];
+            var b2 = pos[1] - a2_1 * pos[0];
+            b1s_1[0] = Math.max(b1s_1[0], b1);
+            b1s_1[1] = Math.min(b1s_1[1], b1);
+            b2s_1[0] = Math.max(b2s_1[0], b2);
+            b2s_1[1] = Math.min(b2s_1[1], b2);
+          });
+        });
+        b1s_1.forEach(function (b1) {
+          // a1x + b1 = a2x + b2
+          b2s_1.forEach(function (b2) {
+            // (a1 - a2)x = b2 - b1
+            var x = (b2 - b1) / (a1_1 - a2_1);
+            var y = a1_1 * x + b1;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+          });
+        });
+        var rotatePoses = moveablePoses.map(function (_a) {
+          var pos1 = _a[0],
+              pos2 = _a[1],
+              pos3 = _a[2],
+              pos4 = _a[3];
+          return [rotate(pos1, -rotation), rotate(pos2, -rotation), rotate(pos3, -rotation), rotate(pos4, -rotation)];
+        });
+        groupWidth = getMaxPos(rotatePoses, 0) - getMinPos(rotatePoses, 0);
+        groupHeight = getMaxPos(rotatePoses, 1) - getMinPos(rotatePoses, 1);
+      } else {
+        minX = getMinPos(moveablePoses, 0);
+        minY = getMinPos(moveablePoses, 1);
+        groupWidth = getMaxPos(moveablePoses, 0) - minX;
+        groupHeight = getMaxPos(moveablePoses, 1) - minY;
+      }
+
+      return [minX, minY, groupWidth, groupHeight];
+    }
+
+    var MoveableGroup =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$4(MoveableGroup, _super);
+
+      function MoveableGroup() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+
+        _this.differ = new ChildrenDiffer();
+        _this.moveables = [];
+        _this.rotation = 0;
+        return _this;
+      }
+
+      var __proto = MoveableGroup.prototype;
+
+      __proto.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+      };
+
+      __proto.componentDidUpdate = function () {
+        this.update(true);
+      };
+
+      __proto.update = function (isSetState) {
+        if (!isSetState) {
+          return;
+        }
+
+        var state = this.state;
+
+        if (!state.target) {
+          state.target = this.groupTargetElement;
+          this.controlBox.getElement().style.display = "block";
+          this.targetDragger = getAbleDragger(this, state.target, "targetAbles", "Group");
+          this.controlDragger = getAbleDragger(this, this.controlBox.getElement(), "controlAbles", "GroupControl");
+        }
+
+        this.updateAbles();
+        this.moveables.forEach(function (moveable) {
+          return moveable.update(false);
+        });
+
+        var _a = this.differ.update(this.props.targets),
+            added = _a.added,
+            changed = _a.changed;
+
+        if (added.length || changed.length) {
+          this.updateRect();
+        }
+
+        return true;
+      };
+
+      __proto.updateRect = function (type, isTarget, isSetState) {
+
+        if (!this.controlBox) {
+          return;
+        }
+
+        this.moveables.forEach(function (moveable) {
+          moveable.updateRect(type, false, false);
+        });
+        var state = this.state;
+        var target = state.target || this.props.target;
+
+        if (!isTarget || type !== "" && this.props.updateGroup) {
+          // reset rotataion
+          this.rotation = 0;
+        }
+
+        var rotation = this.rotation;
+
+        var _a = getGroupRect(this.moveables, rotation),
+            left = _a[0],
+            top = _a[1],
+            width = _a[2],
+            height = _a[3];
+
+        target.style.cssText += "width:" + width + "px; height:" + height + "px;transform:rotate(" + rotation + "deg)";
+        state.width = width;
+        state.height = height;
+        var info = getTargetInfo(target, this.controlBox.getElement(), state);
+        target.style.cssText += "transform: translate(" + -info.left + "px, " + -info.top + "px) rotate(" + rotation + "deg)";
+        this.updateState(__assign$3({}, info, {
+          left: left,
+          top: top
+        }), true);
+      };
+
+      __proto.triggerEvent = function (name, e) {
+        if (name.indexOf("Group") > -1) {
+          return _super.prototype.triggerEvent.call(this, name, e);
+        }
+      };
+
+      __proto.renderAbles = function () {
+        var _this = this;
+
+        var ables = this.props.ables.concat([Groupable, Origin]);
+        return ables.map(function (_a) {
+          var render = _a.render;
+          return render && render(_this);
+        });
+      };
+
+      MoveableGroup.defaultProps = __assign$3({}, MoveableManager.defaultProps, {
+        groupable: true,
+        ables: MOVEABLE_ABLES,
+        targets: []
+      });
+      return MoveableGroup;
+    }(MoveableManager);
+
+    var Moveable =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$4(Moveable, _super);
+
+      function Moveable() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
+
+      var __proto = Moveable.prototype;
+
+      __proto.render = function () {
+        var target = this.props.target || this.props.targets;
+        var isArr = isArray(target);
+        var isGroup = isArr && target.length > 1;
+
+        if (isGroup) {
+          return createElement(MoveableGroup, __assign$3({
+            key: "group",
+            ref: ref$1(this, "moveable")
+          }, __assign$3({}, this.props, {
+            target: null,
+            targets: target
+          })));
+        } else {
+          var moveableTarget = isArr ? target[0] : target;
+          return createElement(MoveableManager, __assign$3({
+            key: "single",
+            ref: ref$1(this, "moveable")
+          }, __assign$3({}, this.props, {
+            target: moveableTarget
+          })));
+        }
+      };
+
+      __proto.isMoveableElement = function (target) {
+        return this.moveable.isMoveableElement(target);
+      };
+
+      __proto.dragStart = function (e) {
+        this.moveable.dragStart(e);
+      };
+
+      __proto.isInside = function (clientX, clientY) {
+        return this.moveable.isInside(clientX, clientY);
+      };
+
+      __proto.updateRect = function () {
+        this.moveable.updateRect();
+      };
+
+      __proto.updateTarget = function () {
+        this.moveable.updateTarget();
+      };
+
+      Moveable.defaultProps = __assign$3({}, MoveableManager.defaultProps, {
+        ables: MOVEABLE_ABLES
+      });
+      return Moveable;
+    }(PureComponent);
+
+    var InnerMoveable =
+    /*#__PURE__*/
+    function (_super) {
+      __extends(InnerMoveable, _super);
+
+      function InnerMoveable(props) {
+        var _this = _super.call(this, props) || this;
+
+        _this.state = {};
+        _this.state = _this.props;
+        return _this;
+      }
+
+      var __proto = InnerMoveable.prototype;
+
+      __proto.render = function () {
+        return h(Moveable, __assign({
+          ref: ref(this, "preactMoveable")
+        }, this.state));
+      };
+
+      return InnerMoveable;
+    }(Component$1);
+
+    var PROPERTIES = ["draggable", "resizable", "scalable", "rotatable", "warpable", "pinchable", "origin", "target", "edge", "throttleDrag", "throttleResize", "throttleScale", "throttleRotate", "keepRatio"];
+    var EVENTS = ["dragStart", "drag", "dragEnd", "resizeStart", "resize", "resizeEnd", "scaleStart", "scale", "scaleEnd", "rotateStart", "rotate", "rotateEnd", "warpStart", "warp", "warpEnd", "pinchStart", "pinch", "pinchEnd", "dragGroupStart", "dragGroup", "dragGroupEnd", "resizeGroupStart", "resizeGroup", "resizeGroupEnd", "scaleGroupStart", "scaleGroup", "scaleGroupEnd", "rotateGroupStart", "rotateGroup", "rotateGroupEnd", "pinchGroupStart", "pinchGroup", "pinchGroupEnd"];
+
+    /**
+     * Moveable is Draggable! Resizable! Scalable! Rotatable!
+     * @sort 1
+     * @extends eg.Component
+     */
+
+    var Moveable$1 =
+    /*#__PURE__*/
+    function (_super) {
+      __extends(Moveable, _super);
+      /**
+       *
+       */
+
+
+      function Moveable(parentElement, options) {
+        if (options === void 0) {
+          options = {};
+        }
+
+        var _this = _super.call(this) || this;
+
+        var element = document.createElement("div");
+
+        var nextOptions = __assign({
+          container: parentElement
+        }, options);
+
+        var events = {};
+        EVENTS.forEach(function (name) {
+          events[camelize("on " + name)] = function (e) {
+            return _this.trigger(name, e);
+          };
+        });
+        render(h(InnerMoveable, __assign({
+          ref: ref(_this, "innerMoveable")
+        }, nextOptions, events)), element);
+        parentElement.appendChild(element.children[0]);
+        var target = nextOptions.target;
+
+        if (isArray(target) && target.length > 1) {
+          _this.updateRect();
+        }
+
+        return _this;
+      }
+      /**
+       * Check if the target is an element included in the moveable.
+       * @param - the target
+       * @example
+       * import Moveable from "moveable";
+       *
+       * const moveable = new Moveable(document.body);
+       *
+       * window.addEventListener("click", e => {
+       *     if (!moveable.isMoveableElement(e.target)) {
+       *         moveable.target = e.target;
+       *     }
+       * });
+       */
+
+
+      var __proto = Moveable.prototype;
+
+      __proto.isMoveableElement = function (target) {
+        return this.getMoveable().isMoveableElement(target);
+      };
+      /**
+       * If the width, height, left, and top of all elements change, update the shape of the moveable.
+       * @example
+       * import Moveable from "moveable";
+       *
+       * const moveable = new Moveable(document.body);
+       *
+       * window.addEventListener("resize", e => {
+       *     moveable.updateRect();
+       * });
+       */
+
+
+      __proto.updateRect = function () {
+        this.getMoveable().updateRect();
+      };
+      /**
+       * If the width, height, left, and top of the only target change, update the shape of the moveable.
+       * @param - the values of x and y to move moveable.
+       * @example
+       * import Moveable from "moveable";
+       *
+       * const moveable = new Moveable(document.body);
+       *
+       * moveable.updateTarget();
+       */
+
+
+      __proto.updateTarget = function () {
+        this.getMoveable().updateTarget();
+      };
+      /**
+       * Remove the Moveable object and the events.
+       * @example
+       * import Moveable from "moveable";
+       *
+       * const moveable = new Moveable(document.body);
+       *
+       * moveable.destroy();
+       */
+
+
+      __proto.destroy = function () {
+        var el = this.getMoveable().base;
+        el.remove ? el.remove() : el.parentElement.removeChild(el);
+        this.off();
+        this.getMoveable().componentWillUnmount();
+        this.innerMoveable = null;
+      };
+
+      __proto.getMoveable = function () {
+        return this.innerMoveable.preactMoveable;
+      };
+
+      Moveable = __decorate([Properties(PROPERTIES, function (prototype, property) {
+        Object.defineProperty(prototype, property, {
+          get: function () {
+            return this.getMoveable().props[property];
+          },
+          set: function (value) {
+            var _a;
+
+            this.innerMoveable.setState((_a = {}, _a[property] = value, _a));
+          },
+          enumerable: true,
+          configurable: true
+        });
+      })], Moveable);
+      return Moveable;
+    }(Component);
+
+    Moveable$1.PROPERTIES = PROPERTIES;
+    Moveable$1.EVENTS = EVENTS;
+
+    return Moveable$1;
+
+}));
+//# sourceMappingURL=moveable.js.map
diff --git a/dist/moveable.js.map b/dist/moveable.js.map
new file mode 100644
index 000000000..357fb452c
--- /dev/null
+++ b/dist/moveable.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx","../src/index.umd.ts"],"sourcesContent":["import { Component, h } from \"preact\";\nimport Moveable, { MoveableProps, MoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component<MoveableProps> {\n    public state: MoveableProps = {};\n    public preactMoveable: MoveableInterface;\n    constructor(props: MoveableProps) {\n        super(props);\n        this.state = this.props;\n    }\n    public render() {\n        return <Moveable ref={ref(this, \"preactMoveable\")} {...this.state} />;\n    }\n}\n","import { MoveableEvents } from \"./types\";\n\nexport const PROPERTIES = [\n  \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n  \"warpable\", \"pinchable\", \"origin\", \"target\", \"edge\",\n  \"throttleDrag\", \"throttleResize\", \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n];\nexport const EVENTS: Array<keyof MoveableEvents> = [\n  \"dragStart\",\n  \"drag\",\n  \"dragEnd\",\n  \"resizeStart\",\n  \"resize\",\n  \"resizeEnd\",\n  \"scaleStart\",\n  \"scale\",\n  \"scaleEnd\",\n  \"rotateStart\",\n  \"rotate\",\n  \"rotateEnd\",\n  \"warpStart\",\n  \"warp\",\n  \"warpEnd\",\n  \"pinchStart\",\n  \"pinch\",\n  \"pinchEnd\",\n\n  \"dragGroupStart\",\n  \"dragGroup\",\n  \"dragGroupEnd\",\n  \"resizeGroupStart\",\n  \"resizeGroup\",\n  \"resizeGroupEnd\",\n  \"scaleGroupStart\",\n  \"scaleGroup\",\n  \"scaleGroupEnd\",\n  \"rotateGroupStart\",\n  \"rotateGroup\",\n  \"rotateGroupEnd\",\n  \"pinchGroupStart\",\n  \"pinchGroup\",\n  \"pinchGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n    OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n    OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n    OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n    OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n    OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n    OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n    Object.defineProperty(prototype, property, {\n        get() {\n            return this.getMoveable().props[property];\n        },\n        set(value) {\n            this.innerMoveable.setState({\n                [property]: value,\n            });\n        },\n        enumerable: true,\n        configurable: true,\n    });\n})\nclass Moveable extends EgComponent {\n    private innerMoveable!: InnerMoveable;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n        const nextOptions = { container: parentElement, ...options };\n\n        const events: any = {};\n\n        EVENTS.forEach(name => {\n            events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n        });\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...nextOptions}\n                {...events}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n\n        const target = nextOptions.target!;\n        if (isArray(target) && target.length > 1) {\n            this.updateRect();\n        }\n    }\n    /**\n     * Check if the target is an element included in the moveable.\n     * @param - the target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"click\", e => {\n     *     if (!moveable.isMoveableElement(e.target)) {\n     *         moveable.target = e.target;\n     *     }\n     * });\n     */\n    public isMoveableElement(target: HTMLElement | SVGElement) {\n        return this.getMoveable().isMoveableElement(target);\n    }\n    /**\n     * If the width, height, left, and top of all elements change, update the shape of the moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"resize\", e => {\n     *     moveable.updateRect();\n     * });\n     */\n    public updateRect() {\n        this.getMoveable().updateRect();\n    }\n    /**\n     * If the width, height, left, and top of the only target change, update the shape of the moveable.\n     * @param - the values of x and y to move moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.updateTarget();\n     */\n    public updateTarget(): void {\n        this.getMoveable().updateTarget();\n    }\n    /**\n     * Remove the Moveable object and the events.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.destroy();\n     */\n    public destroy() {\n        const el = this.getMoveable().base;\n\n        el.remove ? el.remove() : el.parentElement.removeChild(el);\n        this.off();\n        this.getMoveable().componentWillUnmount();\n        this.innerMoveable = null;\n    }\n    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n}\n/**\n * Whether or not the origin controlbox will be visible or not\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged.\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized.\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled.\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated.\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped.\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height.\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * hrottle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n/**\n * When the drag starts, the dragStart event is called.\n * @memberof Moveable\n * @event dragStart\n * @param {Moveable.OnDragStart} - Parameters for the dragStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When dragging, the drag event is called.\n * @memberof Moveable\n * @event drag\n * @param {Moveable.OnDrag} - Parameters for the drag event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"drag\", ({ target, transform }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the drag finishes, the dragEnd event is called.\n * @memberof Moveable\n * @event dragEnd\n * @param {Moveable.OnDragEnd} - Parameters for the dragEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n *     target.style.width = `${e.width}px`;\n *     target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n*     console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n *  1, 0, 0, 0,\n *  0, 1, 0, 0,\n *  0, 0, 1, 0,\n *  0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n *    // target.style.transform = transform;\n *    matrix = multiply(matrix, delta);\n *    target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n *     console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n *     console.log(\"onDragGroup\", targets);\n *     events.forEach(ev => {\n *          // drag event\n *          console.log(\"onDrag left, top\", ev.left, ev.top);\n *          // ev.target!.style.left = `${ev.left}px`;\n *          // ev.target!.style.top = `${ev.top}px`;\n *          console.log(\"onDrag translate\", ev.dist);\n *          ev.target!.style.transform = ev.transform;)\n *     });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n *     console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n *     console.log(\"onResizeGroup\", targets);\n *     events.forEach(ev => {\n *         const offset = [\n *             direction[0] < 0 ? -ev.delta[0] : 0,\n *             direction[1] < 0 ? -ev.delta[1] : 0,\n *         ];\n *         // ev.drag is a drag event that occurs when the group resize.\n *         const left = offset[0] + ev.drag.beforeDist[0];\n *         const top = offset[1] + ev.drag.beforeDist[1];\n *         const width = ev.width;\n *         const top = ev.top;\n *     });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n *     console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n *     console.log(\"onScaleGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group scale.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[0];\n *         const scaleX = ev.scale[0];\n *         const scaleX = ev.scale[1];\n *     });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n *     console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n *     console.log(\"onRotateGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group rotate.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[1];\n *         const deg = ev.beforeDist;\n *     });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n *     console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n /**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n *     console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\ninterface Moveable extends MoveableGetterSetter {\n    on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n    on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n    on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n\n    on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n    on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n    on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n\n    on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n    on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n    on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n\n    on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n    on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n    on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n\n    on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n    on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n    on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n    on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n    on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n    on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n\n    on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n    on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n    on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n    on(eventName: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n    on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n    on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n    on(eventName: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n    on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n    on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n    on(eventName: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n    on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n    on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n    on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n    on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n    on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n    on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n    on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n","import Moveable from \"./Moveable\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\n\n(Moveable as any).PROPERTIES = PROPERTIES;\n(Moveable as any).EVENTS = EVENTS;\n\nexport default Moveable;\n"],"names":["tslib_1","props","_super","_this","state","h","Moveable","ref","Component","PROPERTIES","EVENTS","parentElement","options","element","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","appendChild","children","target","isArray","length","updateRect","getMoveable","isMoveableElement","updateTarget","el","base","remove","removeChild","off","componentWillUnmount","innerMoveable","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","setState","_a","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIA;;;IAA2CA,EAAAA,SAAA,cAAA,QAAA;;IAGvC,wBAAA,CAAYC,KAAZ;IAAA,gBACIC,WAAA,KAAA,EAAMD,KAAN,SADJ;;IAFOE,IAAAA,WAAA,GAAuB,EAAvB;IAIHA,IAAAA,KAAI,CAACC,KAAL,GAAaD,KAAI,CAACF,KAAlB;;IACH;;;;IACM,gBAAA,GAAP;IACI,WAAOI,EAACC;IAASC,MAAAA,GAAG,EAAEA,GAAG,CAAC,IAAD,EAAO,gBAAP;WAA8B,KAAKH,OAA5D;IACH,GAFM;;IAGX,sBAAA;IAVA,EAA2CI,YAA3C;;ICFO,IAAMC,UAAU,GAAG,CACxB,WADwB,EACX,WADW,EACE,UADF,EACc,WADd,EAExB,UAFwB,EAEZ,WAFY,EAEC,QAFD,EAEW,QAFX,EAEqB,MAFrB,EAGxB,cAHwB,EAGR,gBAHQ,EAGU,eAHV,EAG2B,gBAH3B,EAG6C,WAH7C,CAAnB;AAKP,IAAO,IAAMC,MAAM,GAAgC,CACjD,WADiD,EAEjD,MAFiD,EAGjD,SAHiD,EAIjD,aAJiD,EAKjD,QALiD,EAMjD,WANiD,EAOjD,YAPiD,EAQjD,OARiD,EASjD,UATiD,EAUjD,aAViD,EAWjD,QAXiD,EAYjD,WAZiD,EAajD,WAbiD,EAcjD,MAdiD,EAejD,SAfiD,EAgBjD,YAhBiD,EAiBjD,OAjBiD,EAkBjD,UAlBiD,EAoBjD,gBApBiD,EAqBjD,WArBiD,EAsBjD,cAtBiD,EAuBjD,kBAvBiD,EAwBjD,aAxBiD,EAyBjD,gBAzBiD,EA0BjD,iBA1BiD,EA2BjD,YA3BiD,EA4BjD,eA5BiD,EA6BjD,kBA7BiD,EA8BjD,aA9BiD,EA+BjD,gBA/BiD,EAgCjD,iBAhCiD,EAiCjD,YAjCiD,EAkCjD,eAlCiD,CAA5C;;ICYP;;;;;;IAmBA;;;IAAuBV,EAAAA,SAAA,SAAA,QAAA;IAGnB;;;;;IAGA,mBAAA,CAAYW,aAAZ,EAAqDC,OAArD;IAAqD,0BAAA,EAAA;IAAAA,MAAAA,YAAA;;;IAArD,gBACIV,WAAA,KAAA,SADJ;;IAEI,QAAMW,OAAO,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAhB;;IACA,QAAMC,WAAW;IAAKC,MAAAA,SAAS,EAAEN;WAAkBC,QAAnD;;IAEA,QAAMM,MAAM,GAAQ,EAApB;IAEAR,IAAAA,MAAM,CAACS,OAAP,CAAe,UAAAC,IAAA;IACXF,MAAAA,MAAM,CAACG,QAAQ,CAAC,QAAMD,IAAP,CAAT,CAAN,GAAiC,UAACE,CAAD;IAAY,eAAAnB,KAAI,CAACoB,OAAL,CAAaH,IAAb,EAAmBE,CAAnB,CAAA;IAAqB,OAAlE;IACH,KAFD;IAIAE,IAAAA,MAAM,CACFnB,EAACoB;IACGlB,MAAAA,GAAG,EAAEA,GAAG,CAACJ,KAAD,EAAO,eAAP;WACJa,aACAE,QAJN,EAMFL,OANE,CAAN;IAQAF,IAAAA,aAAa,CAACe,WAAd,CAA0Bb,OAAO,CAACc,QAAR,CAAiB,CAAjB,CAA1B;IAEA,QAAMC,MAAM,GAAGZ,WAAW,CAACY,MAA3B;;IACA,QAAIC,OAAO,CAACD,MAAD,CAAP,IAAmBA,MAAM,CAACE,MAAP,GAAgB,CAAvC,EAA0C;IACtC3B,MAAAA,KAAI,CAAC4B,UAAL;IACH;;;IACJ;IACD;;;;;;;;;;;;;;;;;;IAcO,2BAAA,GAAP,UAAyBH,MAAzB;IACI,WAAO,KAAKI,WAAL,GAAmBC,iBAAnB,CAAqCL,MAArC,CAAP;IACH,GAFM;IAGP;;;;;;;;;;;;;IAWO,oBAAA,GAAP;IACI,SAAKI,WAAL,GAAmBD,UAAnB;IACH,GAFM;IAGP;;;;;;;;;;;;IAUO,sBAAA,GAAP;IACI,SAAKC,WAAL,GAAmBE,YAAnB;IACH,GAFM;IAGP;;;;;;;;;;;IASO,iBAAA,GAAP;IACI,QAAMC,EAAE,GAAG,KAAKH,WAAL,GAAmBI,IAA9B;IAEAD,IAAAA,EAAE,CAACE,MAAH,GAAYF,EAAE,CAACE,MAAH,EAAZ,GAA0BF,EAAE,CAACxB,aAAH,CAAiB2B,WAAjB,CAA6BH,EAA7B,CAA1B;IACA,SAAKI,GAAL;IACA,SAAKP,WAAL,GAAmBQ,oBAAnB;IACA,SAAKC,aAAL,GAAqB,IAArB;IACH,GAPM;;IAQC,qBAAA,GAAR;IACI,WAAO,KAAKA,aAAL,CAAmBC,cAA1B;IACH,GAFO;;IA7FNpC,EAAAA,QAAQ,eAdbqC,UAAU,CAAClC,UAAD,EAAa,UAACmC,SAAD,EAAYC,QAAZ;IACpBC,IAAAA,MAAM,CAACC,cAAP,CAAsBH,SAAtB,EAAiCC,QAAjC,EAA2C;IACvCG,MAAAA,GAAG;IACC,eAAO,KAAKhB,WAAL,GAAmB/B,KAAnB,CAAyB4C,QAAzB,CAAP;IACH,OAHsC;IAIvCI,MAAAA,GAAG,YAACC;;;IACA,aAAKT,aAAL,CAAmBU,QAAnB,WACIC,GAACP,SAAD,GAAYK,SADhB;IAGH,OARsC;IASvCG,MAAAA,UAAU,EAAE,IAT2B;IAUvCC,MAAAA,YAAY,EAAE;IAVyB,KAA3C;IAYH,GAbU,IAcLhD,SAAA;IAgGN,iBAAA;IAAC,EAhGsBiD,UAAvB;;ACnCCjD,cAAgB,CAACG,UAAjB,GAA8BA,UAA9B;AACAH,cAAgB,CAACI,MAAjB,GAA0BA,MAA1B;;;;;;;;"}
\ No newline at end of file
diff --git a/dist/moveable.min.js b/dist/moveable.min.js
new file mode 100644
index 000000000..e6fdae9f4
--- /dev/null
+++ b/dist/moveable.min.js
@@ -0,0 +1,10 @@
+/*
+Copyright (c) 2019 Daybrush
+name: moveable
+license: MIT
+author: Daybrush
+repository: git+https://github.com/daybrush/moveable.git
+version: 0.7.2
+*/
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Moveable=e()}(this,function(){"use strict";var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};function i(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var c=function(){return(c=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function s(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var r=this._eventHandler[t]||[];if(!(0<r.length))return!0;r=r.concat(),e.eventType=t;var n=!1,i=[e],o=0;e.stop=function(){n=!0},e.currentTarget=this;for(var a=arguments.length,s=new Array(2<a?a-2:0),c=2;c<a;c++)s[c-2]=arguments[c];for(1<=s.length&&(i=i.concat(s)),o=0;r[o];o++)r[o].apply(this,i);return!n},e.once=function(i,o){if("object"==typeof i&&s(o)){var t,e=i;for(t in e)this.once(t,e[t]);return this}if("string"==typeof i&&"function"==typeof o){var a=this;this.on(i,function t(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];o.apply(a,r),a.off(i,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&s(e)){var r,n=t;for(r in n)this.on(r,n[r]);return this}if("string"==typeof t&&"function"==typeof e){var i=this._eventHandler[t];s(i)&&(this._eventHandler[t]=[],i=this._eventHandler[t]),i.push(e)}return this},e.off=function(t,e){if(s(t))return this._eventHandler={},this;if(s(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var r,n=t;for(r in n)this.off(r,n[r]);return this}var i,o,a=this._eventHandler[t];if(a)for(i=0;void 0!==(o=a[i]);i++)if(o===e){a=a.splice(i,1);break}return this},t}();return t.VERSION="2.1.2",t}();function u(e,r){return function(t){t&&(e[r]=t)}}var l=function(){},p={},f=[],d=[];function h(t,e){var r,n,i,o,a=d;for(o=arguments.length;2<o--;)f.push(arguments[o]);for(e&&null!=e.children&&(f.length||f.push(e.children),delete e.children);f.length;)if((n=f.pop())&&void 0!==n.pop)for(o=n.length;o--;)f.push(n[o]);else"boolean"==typeof n&&(n=null),(i="function"!=typeof t)&&(null==n?n="":"number"==typeof n?n=String(n):"string"!=typeof n&&(i=!1)),i&&r?a[a.length-1]+=n:a===d?a=[n]:a.push(n),r=i;var s=new l;return s.nodeName=t,s.children=a,s.attributes=null==e?void 0:e,s.key=null==e?void 0:e.key,void 0!==p.vnode&&p.vnode(s),s}function E(t,e){for(var r in e)t[r]=e[r];return t}function v(t,e){t&&("function"==typeof t?t(e):t.current=e)}var e="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout,g=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,r=[];function o(t){!t._dirty&&(t._dirty=!0)&&1==r.push(t)&&e(a)}function a(){for(var t;t=r.pop();)t._dirty&&T(t)}function D(t,e){return t.normalizedNodeName===e||t.nodeName.toLowerCase()===e.toLowerCase()}function M(t){var e=E({},t.attributes);e.children=t.children;var r=t.nodeName.defaultProps;if(void 0!==r)for(var n in r)void 0===e[n]&&(e[n]=r[n]);return e}function P(t){var e=t.parentNode;e&&e.removeChild(t)}function m(t,e,r,n,i){if("className"===e&&(e="class"),"key"===e);else if("ref"===e)v(r,null),v(n,t);else if("class"!==e||i)if("style"===e){if(n&&"string"!=typeof n&&"string"!=typeof r||(t.style.cssText=n||""),n&&"object"==typeof n){if("string"!=typeof r)for(var o in r)o in n||(t.style[o]="");for(var o in n)t.style[o]="number"==typeof n[o]&&!1===g.test(o)?n[o]+"px":n[o]}}else if("dangerouslySetInnerHTML"===e)n&&(t.innerHTML=n.__html||"");else if("o"==e[0]&&"n"==e[1]){var a=e!==(e=e.replace(/Capture$/,""));e=e.toLowerCase().substring(2),n?r||t.addEventListener(e,b,a):t.removeEventListener(e,b,a),(t._listeners||(t._listeners={}))[e]=n}else if("list"!==e&&"type"!==e&&!i&&e in t){try{t[e]=null==n?"":n}catch(t){}null!=n&&!1!==n||"spellcheck"==e||t.removeAttribute(e)}else{var s=i&&e!==(e=e.replace(/^xlink:?/,""));null==n||!1===n?s?t.removeAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase()):t.removeAttribute(e):"function"!=typeof n&&(s?t.setAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase(),n):t.setAttribute(e,n))}else t.className=n||""}function b(t){return this._listeners[t.type](p.event&&p.event(t)||t)}var O=[],Y=0,y=!1,w=!1;function X(){for(var t;t=O.shift();)t.componentDidMount&&t.componentDidMount()}function N(t,e,r,n,i,o){Y++||(y=null!=i&&void 0!==i.ownerSVGElement,w=null!=t&&!("__preactattr_"in t));var a=R(t,e,r,n,o);return i&&a.parentNode!==i&&i.appendChild(a),--Y||(w=!1,o||X()),a}function R(t,e,r,n,i){var o=t,a=y;if(null!=e&&"boolean"!=typeof e||(e=""),"string"==typeof e||"number"==typeof e)return t&&void 0!==t.splitText&&t.parentNode&&(!t._component||i)?t.nodeValue!=e&&(t.nodeValue=e):(o=document.createTextNode(e),t&&(t.parentNode&&t.parentNode.replaceChild(o,t),k(t,!0))),o.__preactattr_=!0,o;var s=e.nodeName;if("function"==typeof s)return function(t,e,r,n){var i=t&&t._component,o=i,a=t,s=i&&t._componentConstructor===e.nodeName,c=s,u=M(e);for(;i&&!c&&(i=i._parentComponent);)c=i.constructor===e.nodeName;i&&c&&(!n||i._component)?(A(i,u,3,r,n),t=i.base):(o&&!s&&(B(o),t=a=null),i=G(e.nodeName,u,r),t&&!i.nextBase&&(i.nextBase=t,a=null),A(i,u,1,r,n),t=i.base,a&&t!==a&&(a._component=null,k(a,!1)));return t}(t,e,r,n);if(y="svg"===s||"foreignObject"!==s&&y,s=String(s),(!t||!D(t,s))&&(o=function(t,e){var r=e?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t);return r.normalizedNodeName=t,r}(s,y),t)){for(;t.firstChild;)o.appendChild(t.firstChild);t.parentNode&&t.parentNode.replaceChild(o,t),k(t,!0)}var c=o.firstChild,u=o.__preactattr_,l=e.children;if(null==u){u=o.__preactattr_={};for(var p=o.attributes,f=p.length;f--;)u[p[f].name]=p[f].value}return!w&&l&&1===l.length&&"string"==typeof l[0]&&null!=c&&void 0!==c.splitText&&null==c.nextSibling?c.nodeValue!=l[0]&&(c.nodeValue=l[0]):(l&&l.length||null!=c)&&function(t,e,r,n,i){var o,a,s,c,u,l=t.childNodes,p=[],f={},d=0,h=0,v=l.length,g=0,m=e?e.length:0;if(0!==v)for(var b=0;b<v;b++){var y=l[b],w=y.__preactattr_;null!=(x=m&&w?y._component?y._component.__key:w.key:null)?(d++,f[x]=y):(w||(void 0!==y.splitText?!i||y.nodeValue.trim():i))&&(p[g++]=y)}if(0!==m)for(b=0;b<m;b++){var x;if(c=e[b],(u=null)!=(x=c.key))d&&void 0!==f[x]&&(u=f[x],f[x]=void 0,d--);else if(h<g)for(o=h;o<g;o++)if(void 0!==p[o]&&(S=a=p[o],_=i,"string"==typeof(C=c)||"number"==typeof C?void 0!==S.splitText:"string"==typeof C.nodeName?!S._componentConstructor&&D(S,C.nodeName):_||S._componentConstructor===C.nodeName)){u=a,p[o]=void 0,o===g-1&&g--,o===h&&h++;break}u=R(u,c,r,n),s=l[b],u&&u!==t&&u!==s&&(null==s?t.appendChild(u):u===s.nextSibling?P(s):t.insertBefore(u,s))}var S,C,_;if(d)for(var b in f)void 0!==f[b]&&k(f[b],!1);for(;h<=g;)void 0!==(u=p[g--])&&k(u,!1)}(o,l,r,n,w||null!=u.dangerouslySetInnerHTML),function(t,e,r){var n;for(n in r)e&&null!=e[n]||null==r[n]||m(t,n,r[n],r[n]=void 0,y);for(n in e)"children"===n||"innerHTML"===n||n in r&&e[n]===("value"===n||"checked"===n?t[n]:r[n])||m(t,n,r[n],r[n]=e[n],y)}(o,e.attributes,u),y=a,o}function k(t,e){var r=t._component;r?B(r):(null!=t.__preactattr_&&v(t.__preactattr_.ref,null),!1!==e&&null!=t.__preactattr_||P(t),x(t))}function x(t){for(t=t.lastChild;t;){var e=t.previousSibling;k(t,!0),t=e}}var S=[];function G(t,e,r){var n,i=S.length;for(t.prototype&&t.prototype.render?(n=new t(e,r),_.call(n,e,r)):((n=new _(e,r)).constructor=t,n.render=C);i--;)if(S[i].constructor===t)return n.nextBase=S[i].nextBase,S.splice(i,1),n;return n}function C(t,e,r){return this.constructor(t,r)}function A(t,e,r,n,i){t._disable||(t._disable=!0,t.__ref=e.ref,t.__key=e.key,delete e.ref,delete e.key,void 0===t.constructor.getDerivedStateFromProps&&(!t.base||i?t.componentWillMount&&t.componentWillMount():t.componentWillReceiveProps&&t.componentWillReceiveProps(e,n)),n&&n!==t.context&&(t.prevContext||(t.prevContext=t.context),t.context=n),t.prevProps||(t.prevProps=t.props),t.props=e,t._disable=!1,0!==r&&(1!==r&&!1===p.syncComponentUpdates&&t.base?o(t):T(t,1,i)),v(t.__ref,t))}function T(t,e,r,n){if(!t._disable){var i,o,a,s=t.props,c=t.state,u=t.context,l=t.prevProps||s,p=t.prevState||c,f=t.prevContext||u,d=t.base,h=t.nextBase,v=d||h,g=t._component,m=!1,b=f;if(t.constructor.getDerivedStateFromProps&&(c=E(E({},c),t.constructor.getDerivedStateFromProps(s,c)),t.state=c),d&&(t.props=l,t.state=p,t.context=f,2!==e&&t.shouldComponentUpdate&&!1===t.shouldComponentUpdate(s,c,u)?m=!0:t.componentWillUpdate&&t.componentWillUpdate(s,c,u),t.props=s,t.state=c,t.context=u),t.prevProps=t.prevState=t.prevContext=t.nextBase=null,t._dirty=!1,!m){i=t.render(s,c,u),t.getChildContext&&(u=E(E({},u),t.getChildContext())),d&&t.getSnapshotBeforeUpdate&&(b=t.getSnapshotBeforeUpdate(l,p));var y,w,x=i&&i.nodeName;if("function"==typeof x){var S=M(i);(o=g)&&o.constructor===x&&S.key==o.__key?A(o,S,1,u,!1):(y=o,t._component=o=G(x,S,u),o.nextBase=o.nextBase||h,o._parentComponent=t,A(o,S,0,u,!1),T(o,1,r,!0)),w=o.base}else a=v,(y=g)&&(a=t._component=null),!v&&1!==e||(a&&(a._component=null),w=N(a,i,u,r||!d,v&&v.parentNode,!0));if(v&&w!==v&&o!==g){var C=v.parentNode;C&&w!==C&&(C.replaceChild(w,v),y||(v._component=null,k(v,!1)))}if(y&&B(y),(t.base=w)&&!n){for(var _=t,D=t;D=D._parentComponent;)(_=D).base=w;w._component=_,w._componentConstructor=_.constructor}}for(!d||r?O.push(t):m||t.componentDidUpdate&&t.componentDidUpdate(l,p,b);t._renderCallbacks.length;)t._renderCallbacks.pop().call(t);Y||n||X()}}function B(t){var e=t.base;t._disable=!0,t.componentWillUnmount&&t.componentWillUnmount(),t.base=null;var r=t._component;r?B(r):e&&(null!=e.__preactattr_&&v(e.__preactattr_.ref,null),P(t.nextBase=e),S.push(t),x(e)),v(t.__ref,null)}function _(t,e){this._dirty=!0,this.context=e,this.props=t,this.state=this.state||{},this._renderCallbacks=[]}E(_.prototype,{setState:function(t,e){this.prevState||(this.prevState=this.state),this.state=E(E({},this.state),"function"==typeof t?t(this.state,this.props):t),e&&this._renderCallbacks.push(e),o(this)},forceUpdate:function(t){t&&this._renderCallbacks.push(t),T(this,2)},render:function(){}});W=function(t,e){return(W=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};var W,z="a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td textarea tfoot th thead time title tr track u ul var video wbr circle clipPath defs ellipse g image line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan".split(" "),j="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,F="undefined"!=typeof Symbol&&Symbol.for?Symbol.for("__preactCompatWrapper"):"__preactCompatWrapper",I={constructor:1,render:1,shouldComponentUpdate:1,componentWillReceiveProps:1,componentWillUpdate:1,componentDidUpdate:1,componentWillMount:1,componentDidMount:1,componentWillUnmount:1,componentDidUnmount:1},L=/^(?:accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/,U={},V=!1;try{V="production"!==process.env.NODE_ENV}catch(t){}var H=h("a",null).constructor;H.prototype.$$typeof=j,H.prototype.preactCompatUpgraded=!1,H.prototype.preactCompatNormalized=!1,Object.defineProperty(H.prototype,"type",{get:function(){return this.nodeName},set:function(t){this.nodeName=t},configurable:!0}),Object.defineProperty(H.prototype,"props",{get:function(){return this.attributes},set:function(t){this.attributes=t},configurable:!0});var q=p.event;p.event=function(t){return q&&(t=q(t)),t.persist=Object,t.nativeEvent=t};var $=p.vnode;p.vnode=function(t){if(!t.preactCompatUpgraded){t.preactCompatUpgraded=!0;var e=t.nodeName,r=t.attributes=null==t.attributes?{}:ot({},t.attributes);"function"==typeof e?(!0===e[F]||e.prototype&&"isReactComponent"in e.prototype)&&(t.children&&""===String(t.children)&&(t.children=void 0),t.children&&(r.children=t.children),t.preactCompatNormalized||nt(t),function(t){var e=t.nodeName,r=t.attributes;t.attributes={},e.defaultProps&&ot(t.attributes,e.defaultProps);r&&ot(t.attributes,r)}(t)):(t.children&&""===String(t.children)&&(t.children=void 0),t.children&&(r.children=t.children),r.defaultValue&&(r.value||0===r.value||(r.value=r.defaultValue),delete r.defaultValue),function(t,e){var r,n,i;if(e){for(i in e)if(r=L.test(i))break;if(r)for(i in n=t.attributes={},e)e.hasOwnProperty(i)&&(n[L.test(i)?i.replace(/([A-Z0-9])/,"-$1").toLowerCase():i]=e[i])}}(t,r))}$&&$(t)};var K,Z=[];for(var J,Q={},tt=z.length;tt--;)Q[z[tt]]=(J=z[tt],rt.bind(null,J));function et(t){return function(t){function e(t,e){!function(t){for(var e in t){var r=t[e];"function"!=typeof r||r.__bound||I.hasOwnProperty(e)||((t[e]=r.bind(t)).__bound=!0)}}(this),ht.call(this,t,e,U),lt.call(this,t,e)}(t=ot({constructor:e},t)).mixins&&function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=ut(e[r].concat(t[r]||Z),"getDefaultProps"===r||"getInitialState"===r||"getChildContext"===r))}(t,function(t){for(var e={},r=0;r<t.length;r++){var n=t[r];for(var i in n)n.hasOwnProperty(i)&&"function"==typeof n[i]&&(e[i]||(e[i]=[])).push(n[i])}return e}(t.mixins));t.statics&&ot(e,t.statics);t.propTypes&&(e.propTypes=t.propTypes);t.defaultProps&&(e.defaultProps=t.defaultProps);t.getDefaultProps&&(e.defaultProps=t.getDefaultProps.call(e));return st.prototype=ht.prototype,e.prototype=ot(new st,t),e.displayName=t.displayName||"Component",e}({displayName:t.displayName||t.name,render:function(){return t(this.props,this.context)}})}function rt(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return function t(e,r){for(var n=r||0;n<e.length;n++){var i=e[n];Array.isArray(i)?t(i):!i||"object"!=typeof i||(o=i)&&(o instanceof H||o.$$typeof===j)||!(i.props&&i.type||i.attributes&&i.nodeName||i.children)||(e[n]=rt(i.type||i.nodeName,i.props||i.attributes,i.children))}var o}(t,2),nt(h.apply(void 0,t))}function nt(t){t.preactCompatNormalized=!0,function(t){var e=t.attributes||(t.attributes={});it.enumerable="className"in e,e.className&&(e.class=e.className);Object.defineProperty(e,"className",it)}(t),function(t){return"function"==typeof t&&!(t.prototype&&t.prototype.render)}(t.nodeName)&&(t.nodeName=function(t){var e=t[F];return e?!0===e?t:e:(e=et(t),Object.defineProperty(e,F,{configurable:!0,value:!0}),e.displayName=t.displayName,e.propTypes=t.propTypes,e.defaultProps=t.defaultProps,Object.defineProperty(t,F,{configurable:!0,value:e}),e)}(t.nodeName));var e=t.attributes.ref,r=e&&typeof e;return!K||"string"!==r&&"number"!==r||(t.attributes.ref=function(e,r){return r._refProxies[e]||(r._refProxies[e]=function(t){r&&r.refs&&null===(r.refs[e]=t)&&(delete r._refProxies[e],r=null)})}(e,K)),function(t){var e=t.nodeName,r=t.attributes;if(!r||"string"!=typeof e)return;var n={};for(var i in r)n[i.toLowerCase()]=i;n.ondoubleclick&&(r.ondblclick=r[n.ondoubleclick],delete r[n.ondoubleclick]);if(n.onchange&&("textarea"===e||"input"===e.toLowerCase()&&!/^fil|che|rad/i.test(r.type))){var o=n.oninput||"oninput";r[o]||(r[o]=ut([r[o],r[n.onchange]]),delete r[n.onchange])}}(t),t}var it={configurable:!0,get:function(){return this.class},set:function(t){this.class=t}};function ot(t){for(var e=arguments,r=1,n=void 0;r<arguments.length;r++)if(n=e[r])for(var i in n)n.hasOwnProperty(i)&&(t[i]=n[i]);return t}function at(t,e){for(var r in t)if(!(r in e))return!0;for(var n in e)if(t[n]!==e[n])return!0;return!1}function st(){}function ct(t,e,r){if("string"==typeof e&&(e=t.constructor.prototype[e]),"function"==typeof e)return e.apply(t,r)}function ut(o,a){return function(){for(var t,e=arguments,r=0;r<o.length;r++){var n=ct(this,o[r],e);if(a&&null!=n)for(var i in t=t||{},n)n.hasOwnProperty(i)&&(t[i]=n[i]);else void 0!==n&&(t=n)}return t}}function lt(t,e){pt.call(this,t,e),this.componentWillReceiveProps=ut([pt,this.componentWillReceiveProps||"componentWillReceiveProps"]),this.render=ut([pt,ft,this.render||"render",dt])}function pt(t,e){if(t){var r=t.children;if(r&&Array.isArray(r)&&1===r.length&&("string"==typeof r[0]||"function"==typeof r[0]||r[0]instanceof H)&&(t.children=r[0],t.children&&"object"==typeof t.children&&(t.children.length=1,t.children[0]=t.children)),V){var n="function"==typeof this?this:this.constructor;this.propTypes||n.propTypes,this.displayName||n.name}}}function ft(t){K=this}function dt(){K===this&&(K=null)}function ht(t,e,r){_.call(this,t,e),this.state=this.getInitialState?this.getInitialState():{},this.refs={},this._refProxies={},r!==U&&lt.call(this,t,e)}function vt(t,e){ht.call(this,t,e)}function gt(e,r){return function(t){t&&(e[r]=t)}}ot(ht.prototype=new _,{constructor:ht,isReactComponent:{},replaceState:function(t,e){for(var r in this.setState(t,e),this.state)r in t||delete this.state[r]},getDOMNode:function(){return this.base},isMounted:function(){return!!this.base}}),st.prototype=ht.prototype,(vt.prototype=new st).isPureReactComponent=!0,vt.prototype.shouldComponentUpdate=function(t,e){return at(this.props,t)||at(this.state,e)};var mt="undefined"!=typeof window&&window||{},bt=(mt.RegExp,mt.navigator),yt={browser:[{criteria:"PhantomJS",identity:"PhantomJS"},{criteria:/Whale/,identity:"Whale",versionSearch:"Whale"},{criteria:/Edge/,identity:"Edge",versionSearch:"Edge"},{criteria:/MSIE|Trident|Windows Phone/,identity:"IE",versionSearch:"IEMobile|MSIE|rv"},{criteria:/MiuiBrowser/,identity:"MIUI Browser",versionSearch:"MiuiBrowser"},{criteria:/SamsungBrowser/,identity:"Samsung Internet",versionSearch:"SamsungBrowser"},{criteria:/SAMSUNG /,identity:"Samsung Internet",versionSearch:"Version"},{criteria:/Chrome|CriOS/,identity:"Chrome"},{criteria:/Android/,identity:"Android Browser",versionSearch:"Version"},{criteria:/iPhone|iPad/,identity:"Safari",versionSearch:"Version"},{criteria:"Apple",identity:"Safari",versionSearch:"Version"},{criteria:"Firefox",identity:"Firefox"}],os:[{criteria:/Windows Phone/,identity:"Windows Phone",versionSearch:"Windows Phone"},{criteria:"Windows 2000",identity:"Window",versionAlias:"5.0"},{criteria:/Windows NT/,identity:"Window",versionSearch:"Windows NT"},{criteria:/iPhone|iPad/,identity:"iOS",versionSearch:"iPhone OS|CPU OS"},{criteria:"Mac",versionSearch:"OS X",identity:"MAC"},{criteria:/Android/,identity:"Android"},{criteria:/Tizen/,identity:"Tizen"},{criteria:/Web0S/,identity:"WebOS"}],webview:[{criteria:/iPhone|iPad/,browserVersionSearch:"Version",webviewBrowserVersion:/-1/},{criteria:/iPhone|iPad|Android/,webviewToken:/NAVER|DAUM|; wv/}],defaultString:{browser:{version:"-1",name:"unknown"},os:{version:"-1",name:"unknown"}}};function wt(t,e){for(var r=[],n=0;n<t.length;n++)e(t[n])&&r.push(t[n]);return r}var xt=void 0;function St(t,e){return e&&e.test?!!e.test(t):-1<t.indexOf(e)}function Ct(t,e){var r=wt(t,function(t){return St(xt,t.criteria)})[0];return r&&r.identity||e.name}function _t(t,n){return wt(t,function(t){var e=t.criteria,r=new RegExp(t.identity,"i").test(n);return!!(e?r&&St(xt,e):r)})[0]}function Dt(t,e){var r=yt.defaultString.browser.version,n=new RegExp("("+t+")","i").exec(e);if(!n)return r;var i=n.index,o=n[0];if(-1<i){var a=i+o.length+1;r=e.substring(a).split(" ")[0].replace(/_/g,".").replace(/;|\)/g,"")}return r}function Et(t){if(t)return Dt(function(t){var e=_t(yt.browser,t);return e=e||{criteria:t,versionSearch:t,identity:t}}(t).versionSearch||t,xt)}function Mt(t){var e=function(t){return _t(yt.os,t)}(t)||{},r=yt.defaultString.os.version,n=void 0;if(t){if(e.versionAlias)return e.versionAlias;var i=e.versionSearch||t,o=new RegExp("("+i+")\\s([\\d_\\.]+|\\d_0)","i");return o.exec(xt)&&(n=o.exec(xt)[2].replace(/_/g,".").replace(/;|\)/g,"")),n||r}}function Pt(){var t=Ct(yt.os,yt.defaultString.os);return{name:t,version:Mt(t)}}function Ot(){var t=Ct(yt.browser,yt.defaultString.browser);return{name:t,version:Et(t),webview:function(){var t=yt.webview,e=void 0;return function(t,e){for(var r=0;r<t.length;r++)if(e(t[r]))return!0;return!1}(wt(t,function(t){return St(xt,t.criteria)}),function(t){return e=Dt(t.browserVersionSearch,xt),!(!St(xt,t.webviewToken)&&!St(e,t.webviewBrowserVersion))})}()}}function Yt(){!function(t){xt=t}(0<arguments.length&&void 0!==arguments[0]?arguments[0]:bt.userAgent);var t={os:Pt(),browser:Ot(),isMobile:-1!==xt.indexOf("Mobi")};return t.browser.name=t.browser.name.toLowerCase(),t.os.name=t.os.name.toLowerCase(),t.os.version=t.os.version.toLowerCase(),"ios"===t.os.name&&t.browser.webview&&(t.browser.version="-1"),t}Yt.VERSION="2.1.5";var Xt="object",Nt="undefined";function Rt(t){return typeof t===Nt}function kt(t){return t&&typeof t===Xt}function Gt(t){return Array.isArray(t)}function At(t,e){return t.classList?t.classList.contains(e):!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))}function Tt(t,e,r,n){t.addEventListener(e,r,n)}function Bt(t,e,r){t.removeEventListener(e,r)}var Wt=function(t,e){return(Wt=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};var zt=function(){return(zt=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};var jt=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0};var Ft=function(){return(Ft=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function It(t,e,r){var n=Kt(t),i=Kt(e),o=Kt(r);return Ut(Zt(r[0],Jt(n,o)),Zt(r[0],Jt(i,o)),r[0])}function Lt(t){return t.touches?qt(t.touches):[$t(t)]}function Ut(t,e,r){var n=t.clientX,i=t.clientY;return{clientX:n,clientY:i,deltaX:n-e.clientX,deltaY:i-e.clientY,distX:n-r.clientX,distY:i-r.clientY}}function Vt(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function Ht(t,r,n){return t.map(function(t,e){return Ut(t,r[e],n[e])})}function qt(t){for(var e=Math.min(t.length,2),r=[],n=0;n<e;++n)r.push($t(t[n]));return r}function $t(t){return{clientX:t.clientX,clientY:t.clientY}}function Kt(t){return{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function Zt(t,e){return{clientX:t.clientX+e.clientX,clientY:t.clientY+e.clientY}}function Jt(t,e){return{clientX:t.clientX-e.clientX,clientY:t.clientY-e.clientY}}var Qt=function(){function t(t,e){var a=this;void 0===e&&(e={}),this.el=t,this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.onDragStart=function(t){if(a.isDrag||!function(t){return t.touches&&2<=t.touches.length}(t)||a.pinchFlag||a.onPinchStart(t),!a.flag){var e=a.startClients[0]?a.startClients:Lt(t);a.flag=!0,a.isDrag=!1,a.startClients=e,a.prevClients=e,a.datas={};var r=Ut(e[0],a.prevClients[0],a.startClients[0]),n=a.options,i=n.dragstart;(n.preventRightClick&&3===t.which||!1===(i&&i(Ft({datas:a.datas,inputEvent:t},r))))&&(a.flag=!1),a.flag&&t.preventDefault()}},this.onDrag=function(t){if(a.flag){var e=Lt(t);a.pinchFlag&&a.onPinch(t,e);var r=a.prevClients,n=a.startClients,i=a.pinchFlag?It(e,r,n):Ut(e[0],r[0],n[0]);if(i.deltaX||i.deltaY){a.isDrag=!0;var o=a.options.drag;o&&o(Ft({datas:a.datas},i,{inputEvent:t})),a.prevClients=e}}},this.onDragEnd=function(t){if(a.flag){a.pinchFlag&&a.onPinchEnd(t),a.flag=!1;var e=a.options.dragend,r=a.prevClients,n=a.startClients,i=a.pinchFlag?It(r,r,n):Ut(r[0],r[0],n[0]);a.startClients=[],a.prevClients=[],e&&e(Ft({datas:a.datas,isDrag:a.isDrag,inputEvent:t},i))}},this.options=Ft({container:t,preventRightClick:!0,events:["touch","mouse"]},e);var r=this.options,n=r.container,i=r.events;this.isTouch=-1<i.indexOf("touch"),this.isMouse=-1<i.indexOf("mouse"),this.isMouse&&(Tt(t,"mousedown",this.onDragStart),Tt(n,"mousemove",this.onDrag),Tt(n,"mouseup",this.onDragEnd)),this.isTouch&&(Tt(t,"touchstart",this.onDragStart),Tt(n,"touchmove",this.onDrag),Tt(n,"touchend",this.onDragEnd))}var e=t.prototype;return e.isDragging=function(){return this.isDrag},e.isPinching=function(){return this.isPinch},e.onPinchStart=function(t){var e,r;if(this.flag){this.pinchFlag=!0;var n=this.options.pinchstart,i=qt(t.changedTouches);if((e=this.startClients).push.apply(e,i),(r=this.prevClients).push.apply(r,i),n){var o=this.startClients,a=Kt(o),s=Ut(a,a,a);n(Ft({datas:this.datas,touches:Ht(o,o,o)},s,{inputEvent:t}))}}},e.onPinch=function(t,e){if(this.flag&&this.pinchFlag){this.isPinch=!0;var r=this.options.pinch;if(r){var n=this.prevClients,i=this.startClients,o=Ut(Kt(e),Kt(n),Kt(i)),a=Vt(e),s=Vt(i);r(Ft({datas:this.datas,touches:Ht(e,n,i),scale:a/s,distance:a},o,{inputEvent:t}))}}},e.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var e=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var r=this.options.pinchend;if(r){var n=this.prevClients,i=this.startClients,o=Ut(Kt(n),Kt(n),Kt(i));r(Ft({datas:this.datas,isPinch:e,touches:Ht(n,n,i)},o,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},e.unset=function(){var t=this.el,e=this.options.container;this.isMouse&&(Bt(t,"mousedown",this.onDragStart),Bt(e,"mousemove",this.onDrag),Bt(e,"mouseup",this.onDragEnd)),this.isTouch&&(Bt(t,"touchstart",this.onDragStart),Bt(e,"touchmove",this.onDrag),Bt(e,"touchend",this.onDragEnd))},t}(),te=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var r=this.keys,n=this.values,i=r.indexOf(t),o=-1===i?r.length:i;r[o]=t,n[o]=e},t}(),ee=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),re="function"==typeof Map,ne=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var ie=function(){function t(t,e,r,n,i,o,a,s){this.prevList=t,this.list=e,this.added=r,this.removed=n,this.changed=i,this.maintained=o,this.changedBeforeAdded=a,this.fixed=s}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t=function(t,r){var s=[],c=[];return t.forEach(function(t){var e=t[0],r=t[1],n=new ne;s[e]=n,c[r]=n}),s.forEach(function(t,e){t.connect(s[e-1])}),t.filter(function(t,e){return!r[e]}).map(function(t,e){var r=t[0],n=t[1];if(r===n)return[0,0];var i=s[r],o=c[n-1],a=i.getIndex();return i.disconnect(),o?i.connect(o,o.next):i.connect(void 0,s[0]),[a,i.getIndex()]})}(this.changedBeforeAdded,this.fixed),s=this.changed,c=[];this.cacheOrdered=t.filter(function(t,e){var r=t[0],n=t[1],i=s[e],o=i[0],a=i[1];if(r!==n)return c.push([o,a]),!0}),this.cachePureChanged=c},t}();var oe=function(t,e){return(oe=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};var ae,se="function"==typeof Map?void 0:(ae=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++ae)}),ce=function(e){function t(t){return void 0===t&&(t=[]),e.call(this,t,se)||this}return function(t,e){function r(){this.constructor=t}oe(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}(t,e),t}(function(){function t(t,e){void 0===t&&(t=[]),this.findKeyCallback=e,this.list=[].slice.call(t)}return t.prototype.update=function(t){var e=[].slice.call(t),r=function(t,e,r){var n=re?Map:r?ee:te,i=r||function(t){return t},o=[],a=[],s=[],c=t.map(i),u=e.map(i),l=new n,p=new n,f=[],d=[],h={},v=[],g=0,m=0;return c.forEach(function(t,e){l.set(t,e)}),u.forEach(function(t,e){p.set(t,e)}),c.forEach(function(t,e){var r=p.get(t);void 0===r?(++m,a.push(e)):h[r]=m}),u.forEach(function(t,e){var r=l.get(t);void 0===r?(o.push(e),++g):(s.push([r,e]),m=h[e]||0,f.push([r-m,e-g]),d.push(e===r),r!==e&&v.push([r,e]))}),a.reverse(),new ie(t,e,o,a,v,s,f,d)}(this.list,e,this.findKeyCallback);return this.list=e,r},t}()),ue=function(t,e){return(ue=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};function le(t,e){function r(){this.constructor=t}ue(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var pe=function(){return(pe=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function fe(t,e,r,n,i,o){for(var a=r;a<n;++a)t[a]+=t[i+a-r]*o,e[a]+=e[i+a-r]*o}function de(t,e,r,n,i){for(var o=r;o<n;++o){var a=t[o],s=e[o];t[o]=t[i+o-r],t[i+o-r]=a,e[o]=e[i+o-r],e[i+o-r]=s}}function he(t,e,r,n,i){for(var o=r;o<n;++o)t[o]/=i,e[o]/=i}function ve(t){for(var e=t*t,r=[],n=0;n<e;++n)r[n]=n%(t+1)?0:1;return r}function ge(t,e){for(var r=ve(e),n=Math.min(t.length,e-1),i=0;i<n;++i)r[e*(i+1)-1]=t[i];return r}function me(t,e){void 0===e&&(e=Math.sqrt(t.length));for(var r=t.slice(),n=ve(e),i=0;i<e;++i){var o=e*i,a=e*(i+1),s=o+i;if(0===r[s])for(var c=i+1;c<e;++c)if(r[e*c+i]){de(r,n,o,a,e*c);break}if(!r[s])return[];he(r,n,o,a,r[s]);for(c=0;c<e;++c){var u=e*c,l=u+e,p=r[u+i];0!==p&&i!==c&&fe(r,n,u,l,o,-p)}}return n}function be(t,e){void 0===e&&(e=Math.sqrt(t.length));for(var r=[],n=0;n<e;++n)for(var i=0;i<e;++i)r[i*e+n]=t[e*n+i];return r}function ye(t,e){for(var r=t.slice(),n=t.length;n<e-1;++n)r[n]=0;return r[e-1]=1,r}function we(t,e,r){if(void 0===e&&(e=Math.sqrt(t.length)),e===r)return t;for(var n=ve(r),i=Math.min(e,r),o=0;o<i-1;++o){for(var a=0;a<i-1;++a)n[o*r+a]=t[o*e+a];n[(o+1)*r-1]=t[(o+1)*e-1],n[(r-1)*r+o]=t[(e-1)*e+o]}return n[r*r-1]=t[e*e-1],n}function xe(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];var n=ve(e);return t.forEach(function(t){n=Se(n,t,e)}),n}function Se(t,e,r){var n=[],i=t.length/r,o=e.length/i;if(!i)return e;if(!o)return t;for(var a=0;a<r;++a)for(var s=0;s<o;++s)for(var c=n[a*o+s]=0;c<i;++c)n[a*o+s]+=t[a*i+c]*e[c*o+s];return n}function Ce(t,e,r){void 0===r&&(r=Math.sqrt(t.length));for(var n=[],i=t.length/r,o=e.length/i,a=0;a<r;++a)for(var s=0;s<o;++s)for(var c=n[a+s*o]=0;c<i;++c)n[a+s*o]+=t[a+c*i]*e[c+s*o];return n}function _e(t,e){for(var r=Math.min(t.length,e.length),n=t.slice(),i=0;i<r;++i)n[i]=n[i]+e[i];return n}function De(t,e){for(var r=Math.min(t.length,e.length),n=t.slice(),i=0;i<r;++i)n[i]=n[i]-e[i];return n}function Ee(t,e,r){void 0===r&&(r=e.length);var n=Se(t,e,r),i=n[r-1];return n.map(function(t){return t/i})}function Me(t){return 9===t.length?[t[0],t[3],t[1],t[4],t[2],t[5]]:be(t)}function Pe(t){var e=Math.cos(t),r=Math.sin(t);return[e,-r,0,r,e,0,0,0,1]}function Oe(t,e){return Ee(Pe(e*Math.PI/180),ye(t,3))}function Ye(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return function(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];return t.map(function(t){return t.split(" ").map(function(t){return t?""+e+t:""}).join(" ")}).join(" ")}.apply(void 0,[xr].concat(t))}function Xe(){return ve(3)}function Ne(t,e,r){return xe(e,ge(r,e),t,ge(r.map(function(t){return-t}),e))}function Re(o){return ke(window.getComputedStyle(o,":before")).map(function(t,e){var r=function(t){var e=/^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(t);if(!e)return{prefix:"",unit:"",value:NaN};var r=e[1],n=e[2];return{prefix:r,unit:e[3],value:parseFloat(n)}}(t),n=r.value,i=r.unit;return n*function(t,e,r){return"%"!==e?1:t.ownerSVGElement.viewBox.baseVal[r?"width":"height"]/100}(o,i,0===e)})}function ke(t){var e=t.transformOrigin;return e?e.split(" "):["0","0"]}function Ge(t,n,e,r){for(var i,o,a,s,c,u=t,l=[],p=!!e||t===n,f=("svg"!==u.tagName.toLowerCase()||"ownerSVGElement"in u),d=!1,h=3;u&&(p||u!==n);){var v=u.tagName.toLowerCase(),g=window.getComputedStyle(u),m=(c=g.transform,6===(s=c&&"none"!==c?kt(c)?c:function(t){var e=/([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(t);return!e||e.length<4?{}:{prefix:e[1],value:e[2],suffix:e[3]}}(c).value.split(/s*,\s*/g).map(function(t){return parseFloat(t)}):[1,0,0,1,0,0]).length?[s[0],s[2],s[4],s[1],s[3],s[5],0,0,1]:be(s));if(!d&&16===m.length){d=!0,h=4;for(var b=l.length,y=0;y<b;++y)l[y]=we(l[y],3,4)}d&&9===m.length&&(m=we(m,3,4));var w=u.offsetLeft,x=u.offsetTop,S=Rt(w),C=void 0;if(S&&"svg"!==v?(C=wr?Re(u):ke(g).map(function(t){return parseFloat(t)}),S=!1,"g"===v?x=w=0:(w=(i=Te(u,C))[0],x=i[1],C[0]=i[2],C[1]=i[3])):C=ke(g).map(function(t){return parseFloat(t)}),"svg"===v&&a&&l.push(Ae(u,h),ve(h)),l.push(Ne(m,h,C),ge([S?u:w,S?C:x],h)),a=a||m,o=o||C,p)break;u=u.parentElement}var _=e?we(e,r,h):ve(h),D=e?we(e,r,h):ve(h),E=ve(h),M=l.length;l.reverse(),l.forEach(function(t,e){var r;M-2===e&&(D=_.slice()),M-1===e&&(E=_.slice()),kt(t[h-1])&&(r=function(t,e,r,n,i,o){var a,s=Le(t),c=s[0],u=s[1],l=(e||document.documentElement).getBoundingClientRect(),p=t.getBoundingClientRect(),f=p.left-l.left,d=p.top-l.top,h=p.width,v=p.height,g=xe(r,i,o),m=We(g,c,u,r),b=m.map(function(t){return t[0]}),y=m.map(function(t){return t[1]}),w=Be(g,n,r),x=Math.min.apply(Math,b),S=Math.min.apply(Math,y),C=De(w,[x,S]),_=Math.max.apply(Math,b)-x,D=Math.max.apply(Math,y)-S,E=[f+C[0]*h/_,d+C[1]*v/D],M=[0,0],P=0;for(;++P<10;){var O=me(i,r);a=De(Be(O,E,r),Be(O,w,r)),M[0]=a[0],M[1]=a[1];var Y=We(xe(r,i,ge(M,r),o),c,u,r),X=Math.min.apply(Math,Y.map(function(t){return t[0]})),N=Math.min.apply(Math,Y.map(function(t){return t[1]})),R=X-f,k=N-d;if(Math.abs(R)<2&&Math.abs(k)<2)break;E[0]-=R,E[1]-=k}return M.map(function(t){return Math.round(t)})}(t[h-1],n,h,t[2*h-1],_,l[e+1]),t[h-1]=r[0],t[2*h-1]=r[1]),_=Se(_,t,h)});var P=(!f&&d?"matrix3d":"matrix")+"("+Me(f&&16===a.length?we(a,4,3):a)+")";return[D,E,_,a,P,o,d]}function Ae(t,e){var r=t.clientWidth,n=t.clientHeight,i=t.viewBox.baseVal,o=i.width||r,a=i.height||n,s=r/o,c=n/a,u=t.preserveAspectRatio.baseVal,l=u.align,p=u.meetOrSlice,f=[0,0],d=[s,c],h=[0,0];if(1!==l){var v=(l-2)%3,g=Math.floor((l-2)/3);f[0]=o*v/2,f[1]=a*g/2;var m=2===p?Math.max(c,s):Math.min(s,c);d[0]=m,d[1]=m,h[0]=(r-o)/2*v,h[1]=(n-a)/2*g}var b=function(t,e){for(var r=ve(e),n=Math.min(t.length,e-1),i=0;i<n;++i)r[(e+1)*i]=t[i];return r}(d,e);return b[e-1]=h[0],b[2*e-1]=h[1],Ne(b,e,f)}function Te(t,e){if(!t.getBBox)return[0,0];var r=t.getBBox(),n=t.ownerSVGElement.viewBox.baseVal,i=r.x-n.x,o=r.y-n.y;return[i,o,e[0]-i,e[1]-o]}function Be(t,e,r){return Ee(t,ye(e,r),r)}function We(t,e,r,n){return[Be(t,[0,0],n),Be(t,[e,0],n),Be(t,[0,r],n),Be(t,[e,r],n)]}function ze(t,e,r,n){var i=16===t.length?4:3,o=We(t,r,n,i),a=o[0],s=a[0],c=a[1],u=o[1],l=u[0],p=u[1],f=o[2],d=f[0],h=f[1],v=o[3],g=v[0],m=v[1],b=Be(t,e,i),y=b[0],w=b[1],x=Math.min(s,l,d,g),S=Math.min(c,p,h,m);y=y-x||0,w=w-S||0;var C=[((s=s-x||0)+(l=l-x||0)+(d=d-x||0)+(g=g-x||0))/4,((c=c-S||0)+(p=p-S||0)+(h=h-S||0)+(m=m-S||0))/4],_=je(C,[s,c]),D=je(C,[l,p]);return[[x,S],[y,w],[s,c],[l,p],[d,h],[g,m],_<D&&D-_<Math.PI||D<_&&D-_<-Math.PI?1:-1]}function je(t,e){var r=e[0]-t[0],n=e[1]-t[1],i=Math.atan2(n,r);return 0<i?i:i+2*Math.PI}function Fe(t,e){var r=e[0]-t[0],n=e[1]-t[1],i=Math.sqrt(r*r+n*n),o=je(t,e);return{transform:"translate("+t[0]+"px, "+t[1]+"px) rotate("+o+"rad)",width:i+"px"}}function Ie(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var r=t.length;return{transform:"translate("+t.reduce(function(t,e){return t+e[0]},0)/r+"px, "+t.reduce(function(t,e){return t+e[1]},0)/r+"px)"}}function Le(t,e,r,n){void 0===e&&(e=window.getComputedStyle(t)),void 0===n&&(n=r||"border-box"===e.boxSizing);var i=t.offsetWidth,o=t.offsetHeight,a=!Rt(i);if((r||n)&&a)return[i,o];if(i=t.clientWidth,o=t.clientHeight,a||i||o)return r||n?[i+(parseFloat(e.borderLeftWidth)||0)+(parseFloat(e.borderRightWidth)||0),o+(parseFloat(e.borderTopWidth)||0)+(parseFloat(e.borderBottomWidth)||0)]:[i-(parseFloat(e.paddingLeft)||0)-(parseFloat(e.paddingRight)||0),o-(parseFloat(e.paddingTop)||0)-(parseFloat(e.paddingBottom)||0)];var s=t.getBBox();return[s.width,s.height]}function Ue(t,e,r){var n,i,o,a,s,c,u=0,l=0,p=[0,0],f=[0,0],d=[0,0],h=[0,0],v=[0,0],g=Xe(),m=Xe(),b=Xe(),y=0,w=0,x=[0,0],S=1,C=1,_=[0,0],D=0,E=!1,M="",P=[0,0],O=r?r.beforeMatrix:void 0,Y=r?r.is3d?4:3:void 0;if(t){if(r)y=r.width,w=r.height;else{var X=window.getComputedStyle(t);y=t.offsetWidth,w=t.offsetHeight,Rt(y)&&(y=(n=Le(t,X,!0))[0],w=n[1])}var N;g=(i=Ge(t,e,O,Y))[0],N=i[1],m=i[2],b=i[3],M=i[4],x=i[5],E=i[6],u=(a=(o=ze(m,x,y,w))[0])[0],l=a[1],p=o[1],f=o[2],d=o[3],h=o[4],v=o[5],S=o[6];var R;R=(s=ze(N,_e(x,function(t,e){void 0===e&&(e=Math.sqrt(t.length));for(var r=[],n=0;n<e-1;++n)r[n]=t[(n+1)*e-1];return r[e-1]=0,r}(b,E?4:3)),y,w))[0],P=s[1],C=s[6],P=[P[0]+R[0]-u,P[1]+R[1]-l],D=(c=function(t,e,r){var n=je(0<r?t:e,0<r?e:t),i=Se(Pe(n),[0,-40,1],3);return[n,[(t[0]+e[0])/2+i[0],(t[1]+e[1])/2+i[1]]]}(f,d,S))[0],_=c[1]}return{beforeDirection:C,direction:S,rotationRad:D,rotationPos:_,target:t,left:u,top:l,pos1:f,pos2:d,pos3:h,pos4:v,width:y,height:w,beforeMatrix:g,matrix:m,targetTransform:M,targetMatrix:b,is3d:E,beforeOrigin:P,origin:p,transformOrigin:x}}function Ve(t){if(t){var e=t.getAttribute("data-direction");if(e){var r=[0,0];return-1<e.indexOf("w")&&(r[0]=-1),-1<e.indexOf("e")&&(r[0]=1),-1<e.indexOf("n")&&(r[1]=-1),-1<e.indexOf("s")&&(r[1]=1),r}}}function He(t,e){return e?Math.round(t/e)*e:t}function qe(r,n){r.forEach(function(t,e){r[e]=He(r[e],n)})}function $e(t,e){t[e]&&(t[e].unset(),t[e]=null)}function Ke(t,e,r){return(t[0]-e[0])*(r[1]-e[1])-(t[1]-e[1])*(r[0]-e[0])}function Ze(t,e,r){return t.triggerEvent(e,r)}function Je(t){return je([t[0].clientX,t[0].clientY],[t[1].clientX,t[1].clientY])/Math.PI*180}window.b=we;var Qe={name:"pinchable",updateRect:!0,pinchStart:function(r,t){var e,n=t.datas,i=t.clientX,o=t.clientY,a=t.touches,s=t.inputEvent,c=t.targets,u=r.props,l=u.pinchable,p=u.ables;if(!l)return!1;var f=r.state,d="onPinch"+(c?"Group":"")+"Start",h="drag"+(c?"Group":"")+"ControlStart",v=(!0===l?r.controlAbles:p.filter(function(t){return-1<l.indexOf(t.name)})).filter(function(t){return t.canPinch&&t[h]});n.pinchableDatas={};var g=Ze(r,d,((e={})[c?"targets":"target"]=c||f.target,e.clientX=i,e.clientY=o,e.datas=n.pinchableDatas,e));n.isPinch=!1!==g,n.ables=v;var m=n.isPinch;if(!m)return!1;var b=Je(a);return v.forEach(function(t){n[t.name+"Datas"]={};var e={datas:n[t.name+"Datas"],clientX:i,clientY:o,inputEvent:s,parentRotate:b,pinchFlag:!0};t[h](r,e)}),m},pinch:function(e,t){var r,n=t.datas,i=t.clientX,o=t.clientY,a=t.scale,s=t.distance,c=t.touches,u=t.inputEvent,l=t.targets;if(n.isPinch){var p=Je(c),f=s*(1-1/a),d=e.state.target;u.preventDefault(),u.stopPropagation();var h=((r={})[l?"targets":"target"]=l||d,r.clientX=i,r.clientY=o,r.datas=n.pinchableDatas,r);Ze(e,"onPinch"+(l?"Group":""),h);var v=n.ables,g="drag"+(l?"Group":"")+"Control";return v.forEach(function(t){t[g](e,{clientX:i,clientY:o,datas:n[t.name+"Datas"],inputEvent:u,parentDistance:f,parentRotate:p,pinchFlag:!0})}),h}},pinchEnd:function(e,t){var r,n=t.datas,i=t.clientX,o=t.clientY,a=t.isPinch,s=t.inputEvent,c=t.targets;if(n.isPinch){var u=e.state.target;Ze(e,"onPinch"+(c?"Group":"")+"End",((r={})[c?"targets":"target"]=c||u,r.isDrag=a,r.clientX=i,r.clientY=o,r.datas=n.pinchableDatas,r));var l=n.ables,p="drag"+(c?"Group":"")+"ControlEnd";return l.forEach(function(t){t[p](e,{clientX:i,clientY:o,isDrag:a,datas:n[t.name+"Datas"],inputEvent:s,pinchFlag:!0})}),a}},pinchGroupStart:function(t,e){return this.pinchStart(t,pe({},e,{targets:t.props.targets}))},pinchGroup:function(t,e){return this.pinch(t,pe({},e,{targets:t.props.targets}))},pinchGroupEnd:function(t,e){return this.pinchEnd(t,pe({},e,{targets:t.props.targets}))}};function tr(t,e){var r=e.datas,n=t.state,i=n.matrix,o=n.beforeMatrix,a=n.is3d,s=n.left,c=n.top,u=n.origin,l=a?4:3;r.is3d=a,r.matrix=i,r.inverseMatrix=me(i,l),r.beforeMatrix=o,r.inverseBeforeMatrix=me(o,l),r.absoluteOrigin=ye(_e([s,c],u),l),r.startDragBeforeDist=Ee(r.inverseBeforeMatrix,r.absoluteOrigin,l),r.startDragDist=Ee(r.inverseMatrix,r.absoluteOrigin,l)}function er(t,e){var r=t.datas,n=t.distX,i=t.distY,o=r.inverseBeforeMatrix,a=r.inverseMatrix,s=r.is3d,c=r.startDragBeforeDist,u=r.startDragDist,l=s?4:3;return De(Ee(e?o:a,_e(r.absoluteOrigin,[n,i]),l),e?c:u)}function rr(t,i,o,a,s){var e=i.name,r=a.datas,c=r[e]||(r[e]=[]);return t.moveables.map(function(t,e){var r=c[e]||(c[e]={}),n=i[o](t,pe({},a,{datas:r,parentFlag:!0}));return n&&s&&s(t,r,n,e),n})}function nr(t){return t.custom}function ir(t,e,r,n){var i=r.custom||(r.custom={startX:t,startY:e,prevX:t,prevY:e,isDrag:!1}),o=i.prevX,a=i.prevY,s=i.startX,c=i.startY;return i.prevX=t,i.prevY=e,t===o&&e===a||(i.isDrag=!0),{clientX:t,clientY:e,distX:t-s,distY:e-c,deltaX:t-o,deltaY:e-a,isDrag:i.isDrag,datas:r,inputEvent:n}}function or(t){return At(t,Ye("direction"))}var ar={name:"draggable",dragStart:function(t,e){var r=e.datas,n=e.clientX,i=e.clientY,o=t.state,a=o.targetTransform,s=o.target,c=window.getComputedStyle(s);return r.datas={},r.left=parseFloat(c.left||"")||0,r.top=parseFloat(c.top||"")||0,r.bottom=parseFloat(c.bottom||"")||0,r.right=parseFloat(c.right||"")||0,r.transform=a,tr(t,{datas:r}),r.prevDist=[0,0],!(r.prevBeforeDist=[0,0])!==Ze(t,"onDragStart",{datas:r.datas,target:s,clientX:n,clientY:i})?r.isDrag=!0:r.isPinch=!1,r.isDrag},drag:function(t,e){var r=e.datas,n=e.distX,i=e.distY,o=e.clientX,a=e.clientY,s=e.inputEvent,c=r.isPinch,u=r.isDrag,l=r.prevDist,p=r.prevBeforeDist,f=r.transform;if(u){s.preventDefault(),s.stopPropagation();var d=t.props,h=d.throttleDrag,v=void 0===h?0:h,g=d.parentMoveable,m=t.state.target,b=er({datas:r,distX:n,distY:i},!0),y=er({datas:r,distX:n,distY:i},!1);qe(y,v),qe(b,v);var w=De(y,l),x=De(b,p);r.prevDist=y,r.prevBeforeDist=b;var S=r.left+b[0],C=r.top+b[1],_=r.right-b[0],D=r.bottom-b[1],E=f+" translate("+y[0]+"px, "+y[1]+"px)";if(g||!w.every(function(t){return!t})||!x.some(function(t){return!t})){var M={datas:r.datas,target:m,transform:E,dist:y,delta:w,beforeDist:b,beforeDelta:x,left:S,top:C,right:_,bottom:D,clientX:o,clientY:a,isPinch:c};return Ze(t,"onDrag",M),M}}},dragEnd:function(t,e){var r=e.datas,n=e.isDrag,i=e.clientX,o=e.clientY;if(r.isDrag)return r.isDrag=!1,Ze(t,"onDragEnd",{target:t.state.target,isDrag:n,clientX:i,clientY:o,datas:r.datas}),n},dragGroupCondition:function(t){return At(t,Ye("group"))},dragGroupStart:function(t,e){var r=e.clientX,n=e.clientY,i=e.datas;rr(t,this,"dragStart",e),this.dragStart(t,e);var o=Ze(t,"onDragGroupStart",{targets:t.props.targets,clientX:r,clientY:n,datas:i.datas});return i.isDrag=!1!==o,i.isDrag},dragGroup:function(t,e){if(e.datas.isDrag){var r=rr(t,this,"drag",e),n=this.drag(t,e);if(n){var i=pe({targets:t.props.targets,events:r},n);return Ze(t,"onDragGroup",i),i}}},dragGroupEnd:function(t,e){var r=e.clientX,n=e.clientY,i=e.isDrag,o=e.datas;if(o.isDrag)return rr(t,this,"dragEnd",e),Ze(t,"onDragGroupEnd",{targets:t.props.targets,isDrag:i,clientX:r,clientY:n,datas:o.datas}),i}};function sr(t,e,r,n,i){t.startAbsoluteOrigin=[e-i[0]+n[0],r-i[1]+n[1]],t.prevDeg=je(t.startAbsoluteOrigin,[e,r])/Math.PI*180,t.startDeg=t.prevDeg,t.loop=0}function cr(t,e,r,n){var i=t.prevDeg,o=t.startDeg,a=t.loop;(e=He(e,n))<i&&270<i&&e<90?++t.loop:i<e&&i<90&&270<e&&--t.loop;var s=360*a+i,c=360*t.loop+e,u=r*(c-s),l=r*(c-o);return t.prevDeg=e,[u,l]}function ur(t,e,r,n,i){return cr(t,je(t.startAbsoluteOrigin,[r,n])/Math.PI*180,e,i)}function lr(t){return At(t,Ye("rotation"))}var pr={name:"rotatable",canPinch:!0,render:function(t){if(!t.props.rotatable)return null;var e=t.state,r=e.pos1,n=e.pos2,i=e.rotationRad;return rt("div",{className:Ye("line rotation-line"),style:{transform:"translate("+(r[0]+n[0])/2+"px, "+(r[1]+n[1])/2+"px) translateY(-40px) rotate("+i+"rad)"}},rt("div",{className:Ye("control","rotation")}))},dragControlCondition:lr,dragControlStart:function(t,e){var r=e.datas,n=e.clientX,i=e.clientY,o=e.parentRotate,a=e.parentFlag,s=e.pinchFlag,c=t.state,u=c.target,l=c.left,p=c.top,f=c.origin,d=c.beforeOrigin,h=c.rotationPos,v=c.direction,g=c.beforeDirection,m=c.targetTransform;if(!u)return!1;r.transform=m,r.left=l,r.top=p,s||a?(r.beforeInfo={prevDeg:o,startDeg:o,loop:0},r.afterInfo={prevDeg:o,startDeg:o,loop:0}):(r.afterInfo={},r.beforeInfo={},sr(r.afterInfo,n,i,f,h),sr(r.beforeInfo,n,i,d,h)),r.direction=v,r.beforeDirection=g,r.datas={};var b=Ze(t,"onRotateStart",{datas:r.datas,target:u,clientX:n,clientY:i});return r.isRotate=!1!==b,r.isRotate},dragControl:function(t,e){var r,n,i,o,a=e.datas,s=e.clientX,c=e.clientY,u=e.parentRotate,l=e.parentFlag,p=e.pinchFlag,f=a.direction,d=a.beforeDirection,h=a.beforeInfo,v=a.afterInfo;if(a.isRotate){var g,m,b,y,w=t.props,x=w.throttleRotate,S=void 0===x?0:x,C=w.parentMoveable;if(y=p||l?(g=(r=cr(v,u,f,S))[0],m=r[1],b=(n=cr(h,u,f,S))[0],n[1]):(g=(i=ur(v,f,s,c,S))[0],m=i[1],b=(o=ur(h,d,s,c,S))[0],o[1]),g||b||C){var _={target:t.props.target,datas:a.datas,delta:g,dist:m,clientX:s,clientY:c,beforeDist:y,beforeDelta:b,transform:a.transform+" rotate("+m+"deg)",isPinch:!!p};return Ze(t,"onRotate",_),_}}},dragControlEnd:function(t,e){var r=e.datas,n=e.isDrag,i=e.clientX,o=e.clientY;return!!r.isRotate&&(r.isRotate=!1,Ze(t,"onRotateEnd",{datas:r.datas,clientX:i,clientY:o,target:t.state.target,isDrag:n}),n)},dragGroupControlCondition:lr,dragGroupControlStart:function(t,e){var r=e.clientX,n=e.clientY,i=e.datas,c=e.inputEvent,o=t.state,u=o.left,l=o.top,p=o.beforeOrigin;rr(t,this,"dragControlStart",pe({},e,{parentRotate:0}),function(t,e){var r=t.state,n=r.left,i=r.top,o=r.beforeOrigin,a=_e(De([n,i],[u,l]),De(o,p)),s=e.drag||(e.drag={});ar.dragStart(t,ir(a[0],a[1],s,c))}),this.dragControlStart(t,e);var a=Ze(t,"onRotateGroupStart",{targets:t.props.targets,clientX:r,clientY:n,datas:i.datas});return i.isRotate=!1!==a,i.isDrag},dragGroupControl:function(t,e){var l=e.inputEvent;if(e.datas.isRotate){var r=this.dragControl(t,e);if(r){var n=r.beforeDist,p=r.beforeDelta,i=rr(t,this,"dragControl",pe({},e,{parentRotate:n}),function(t,e,r,n){var i=e.drag||(e.drag={}),o=nr(i),a=Oe([o.prevX,o.prevY],p),s=a[0],c=a[1],u=ar.drag(t,ir(s,c,i,l));r.drag=u}),o=pe({targets:t.props.targets,events:i},r);return t.rotation+=r.beforeDelta,Ze(t,"onRotateGroup",o),o}}},dragGroupControlEnd:function(t,e){var r=e.clientX,n=e.clientY,i=e.isDrag,o=e.datas;if(o.isRotate)return this.dragControlEnd(t,e),rr(t,this,"dragControlEnd",e),Ze(t,"onRotateGroupEnd",{targets:t.props.targets,clientX:r,clientY:n,isDrag:i,datas:o.datas}),i}};function fr(t){return dr(t).concat(function(t){var e=t.props,r=e.resizable,n=e.scalable;if(!r&&!n)return[];var i=t.state,o=i.pos1,a=i.pos2,s=i.pos3,c=i.pos4;return[rt("div",{className:Ye("control","direction","n"),"data-direction":"n",key:"n",style:Ie(o,a)}),rt("div",{className:Ye("control","direction","w"),"data-direction":"w",key:"w",style:Ie(o,s)}),rt("div",{className:Ye("control","direction","e"),"data-direction":"e",key:"e",style:Ie(a,c)}),rt("div",{className:Ye("control","direction","s"),"data-direction":"s",key:"s",style:Ie(s,c)})]}(t))}function dr(t){var e=t.props,r=e.resizable,n=e.scalable,i=e.warpable;if(!r&&!n&&!i)return[];var o=t.state,a=o.pos1,s=o.pos2,c=o.pos3,u=o.pos4;return[rt("div",{className:Ye("control","direction","nw"),"data-direction":"nw",key:"nw",style:Ie(a)}),rt("div",{className:Ye("control","direction","ne"),"data-direction":"ne",key:"ne",style:Ie(s)}),rt("div",{className:Ye("control","direction","sw"),"data-direction":"sw",key:"sw",style:Ie(c)}),rt("div",{className:Ye("control","direction","se"),"data-direction":"se",key:"se",style:Ie(u)})]}var hr={name:"resizable",dragControlOnly:!0,updateRect:!0,canPinch:!0,render:function(t){var e=t.props,r=e.resizable,n=e.edge;if(r)return n?dr(t):fr(t)},dragControlCondition:or,dragControlStart:function(t,e){var r=e.inputEvent.target,n=e.pinchFlag,i=n?[1,1]:Ve(r),o=t.state,a=o.target,s=o.width,c=o.height,u=e.clientX,l=e.clientY,p=e.datas;return!(!i||!a)&&(n||tr(t,{datas:p}),p.datas={},p.direction=i,p.width=s,p.height=c,p.prevWidth=0,p.prevHeight=0,!1!==Ze(t,"onResizeStart",{datas:p.datas,target:a,clientX:u,clientY:l})&&(p.isResize=!0),p.isResize)},dragControl:function(t,e){var r=e.datas,n=e.clientX,i=e.clientY,o=e.distX,a=e.distY,s=e.pinchFlag,c=e.parentDistance,u=e.parentScale,l=r.direction,p=r.width,f=r.height,d=r.prevWidth,h=r.prevHeight;if(r.isResize){var v=t.props,g=v.keepRatio,m=v.throttleResize,b=void 0===m?0:m,y=v.parentMoveable,w=t.state.target,x=0,S=0;if(u)x=(u-1)*p,S=(u-1)*f;else if(s)c&&(S=(x=c)*f/p);else{var C=er({datas:r,distX:o,distY:a});if(x=l[0]*C[0],S=l[1]*C[1],g&&l[0]&&l[1]&&p&&f){var _=Math.sqrt(x*x+S*S),D=je([0,0],C),E=je([0,0],l),M=Math.cos(D-E)*_;S=(x=M)*f/p}}var P=p+(x=He(x,b)),O=f+(S=He(S,b)),Y=[x-d,S-h];if(r.prevWidth=x,r.prevHeight=S,y||!Y.every(function(t){return!t})){var X={target:w,width:P,height:O,direction:l,dist:[x,S],datas:r.datas,delta:Y,clientX:n,clientY:i,isPinch:!!s};return Ze(t,"onResize",X),X}}},dragControlEnd:function(t,e){var r=e.datas,n=e.isDrag,i=e.clientX,o=e.clientY;return!!r.isResize&&(r.isResize=!1,Ze(t,"onResizeEnd",{target:t.state.target,datas:r.datas,clientX:i,clientY:o,isDrag:n}),n)},dragGroupControlCondition:or,dragGroupControlStart:function(t,e){var r=e.clientX,n=e.clientY,i=e.datas,a=e.inputEvent,o=t.state,s=o.left,c=o.top;if(rr(t,this,"dragControlStart",pe({},e,{parentRotate:0}),function(t,e){var r=t.state,n=r.left,i=r.top,o=e.drag||(e.drag={});ar.dragStart(t,ir(n-s,i-c,o,a))}).every(function(t){return!t}))return!1;this.dragControlStart(t,e);var u=Ze(t,"onResizeGroupStart",{targets:t.props.targets,clientX:r,clientY:n,datas:i.datas});return i.isResize=!1!==u,i.isResize},dragGroupControl:function(t,e){var c=e.inputEvent;if(e.datas.isResize){var r=this.dragControl(t,e);if(r){var n=r.width,i=r.height,o=r.dist,u=[n/(n-o[0]),i/(i-o[1])],a=rr(t,this,"dragControl",pe({},e,{parentScale:u}),function(t,e,r){var n=e.drag||(e.drag={}),i=nr(n),o=i.startX,a=i.startY,s=ar.drag(t,ir(u[0]*o,u[1]*a,n,c));r.drag=s}),s=pe({targets:t.props.targets,events:a},r);return Ze(t,"onResizeGroup",s),s}}},dragGroupControlEnd:function(t,e){var r=e.clientX,n=e.clientY,i=e.isDrag,o=e.datas;if(o.isResize)return this.dragControlEnd(t,e),rr(t,this,"dragControlEnd",e),Ze(t,"onResizeGroupEnd",{targets:t.props.targets,clientX:r,clientY:n,isDrag:i,datas:o.datas}),i}},vr={name:"scalable",dragControlOnly:!0,canPinch:!0,render:function(t){var e=t.props,r=e.resizable,n=e.scalable,i=e.edge;if(!r&&n)return i?dr(t):fr(t)},dragControlCondition:or,dragControlStart:function(t,e){var r=e.datas,n=e.clientX,i=e.clientY,o=e.pinchFlag,a=e.inputEvent.target,s=o?[1,1]:Ve(a),c=t.state,u=c.width,l=c.height,p=c.targetTransform,f=c.target;return!(!s||!f)&&(o||tr(t,{datas:r}),r.datas={},r.transform=p,r.prevDist=[1,1],r.direction=s,r.width=u,r.height=l,!1!==Ze(t,"onScaleStart",{target:f,clientX:n,clientY:i,datas:r.datas})&&(r.isScale=!0),r.isScale)},dragControl:function(t,e){var r=e.datas,n=e.clientX,i=e.clientY,o=e.distX,a=e.distY,s=e.parentScale,c=e.parentDistance,u=e.pinchFlag,l=r.prevDist,p=r.direction,f=r.width,d=r.height,h=r.transform;if(!r.isScale)return!1;var v=t.props,g=v.keepRatio,m=v.throttleScale,b=v.parentMoveable,y=t.state.target,w=1,x=1;if(s)w=s[0],x=s[1];else if(u)c&&(w=(f+c)/f,x=(d+c*d/f)/d);else{var S=er({datas:r,distX:o,distY:a}),C=p[0]*S[0],_=p[1]*S[1];if(g&&p[0]&&p[1]&&f&&d){var D=Math.sqrt(C*C+_*_),E=je([0,0],S),M=je([0,0],p),P=Math.cos(E-M)*D;_=(C=P)*d/f}w=(f+C)/f,x=(d+_)/d}w=He(w,m),x=He(x,m),0===w&&(w=(0<l[0]?1:-1)*_r),0===x&&(x=(0<l[1]?1:-1)*_r);var O=[w,x];if(r.prevDist=O,w===l[0]&&x===l[1]&&!b)return!1;var Y={target:y,scale:O,direction:p,dist:[w-1,x-1],delta:[w/l[0],x/l[1]],transform:h+" scale("+w+", "+x+")",clientX:n,clientY:i,datas:r.datas,isPinch:!!u};return Ze(t,"onScale",Y),Y},dragControlEnd:function(t,e){var r=e.datas,n=e.isDrag,i=e.clientX,o=e.clientY;e.pinchFlag;return!!r.isScale&&(r.isScale=!1,Ze(t,"onScaleEnd",{target:t.state.target,isDrag:n,clientX:i,clientY:o,datas:r.datas}),n)},dragGroupControlCondition:or,dragGroupControlStart:function(t,e){var r=e.clientX,n=e.clientY,i=e.datas,s=e.inputEvent,o=t.state,a=o.left,c=o.top,u=o.origin,l=[a+u[0],c+u[1]];if(i.rotation=t.rotation,rr(t,this,"dragControlStart",e,function(t,e){var r=t.state,n=r.left,i=r.top,o=r.origin,a=e.drag||(e.drag={});ar.dragStart(t,ir(n+o[0]-l[0],i+o[1]-l[1],a,s))}).every(function(t){return!t}))return!1;this.dragControlStart(t,e);var p=Ze(t,"onScaleGroupStart",{targets:t.props.targets,clientX:r,clientY:n,datas:i.datas});return i.isScale=!1!==p,i.isScale},dragGroupControl:function(l,t){var p=t.inputEvent,f=t.datas;if(f.isScale){var e=this.dragControl(l,t);if(e){var d=e.scale,r=rr(l,this,"dragControl",pe({},t,{parentScale:d}),function(t,e,r){var n=e.drag||(e.drag={}),i=nr(n),o=Oe([i.startX,i.startY],-f.rotation),a=Oe([o[0]*d[0],o[1]*d[1]],l.rotation),s=a[0],c=a[1],u=ar.drag(t,ir(s,c,n,p));r.drag=u}),n=pe({targets:l.props.targets,events:r},e);return Ze(l,"onScaleGroup",n),n}}},dragGroupControlEnd:function(t,e){var r=e.clientX,n=e.clientY,i=e.isDrag,o=e.datas;if(o.isScale)return this.dragControlEnd(t,e),rr(t,this,"dragControlEnd",e),Ze(t,"onScaleGroupEnd",{targets:t.props.targets,clientX:r,clientY:n,isDrag:i,datas:o.datas}),i}};function gr(t,r){return t.map(function(t,e){return function(t,e,r,n){return(t*n+e*r)/(r+n)}(t,r[e],1,2)})}function mr(t,e,r){var n=je(t,e),i=je(t,r)-n;return 0<=i?i:i+2*Math.PI}var br={name:"warpable",dragControlOnly:!0,render:function(t){var e=t.props,r=e.resizable,n=e.scalable,i=e.warpable;if(!r&&!n&&i){var o=t.state,a=o.pos1,s=o.pos2,c=o.pos3,u=o.pos4,l=gr(a,s),p=gr(s,a),f=gr(a,c),d=gr(c,a),h=gr(c,u),v=gr(u,c),g=gr(s,u),m=gr(u,s);return[rt("div",{className:Ye("line"),key:"middeLine1",style:Fe(l,h)}),rt("div",{className:Ye("line"),key:"middeLine2",style:Fe(p,v)}),rt("div",{className:Ye("line"),key:"middeLine3",style:Fe(f,g)}),rt("div",{className:Ye("line"),key:"middeLine4",style:Fe(d,m)})].concat(dr(t))}},dragControlCondition:function(t){return At(t,Ye("direction"))},dragControlStart:function(t,e){var n=e.datas,r=e.clientX,i=e.clientY,o=e.inputEvent.target,a=t.props,s=a.target,c=a.onWarpStart,u=Ve(o);if(!u||!s)return!1;var l=t.state,p=l.transformOrigin,f=l.is3d,d=l.targetTransform,h=l.targetMatrix,v=l.width,g=l.height;n.datas={},n.targetTransform=d,n.targetMatrix=f?h:we(h,3,4),n.targetInverseMatrix=function(t,e,r){void 0===r&&(r=Math.sqrt(t.length));for(var n=t.slice(),i=0;i<r;++i)n[i*r+e-1]=0,n[(e-1)*r+i]=0;return n[(e-1)*(r+1)]=1,n}(me(n.targetMatrix,4),3,4),n.direction=u,tr(t,{datas:n}),n.poses=[[0,0],[v,0],[0,g],[v,g]].map(function(t,e){return De(t,p)}),n.nextPoses=n.poses.map(function(t){var e=t[0],r=t[1];return Ee(n.targetMatrix,[e,r,0,1],4)}),n.posNum=(-1===u[0]?0:1)+(-1===u[1]?0:2),n.prevMatrix=ve(4);var m=c&&c({target:s,clientX:r,clientY:i,datas:n.datas});return!1!==m&&(n.isWarp=!0),m},dragControl:function(t,e){var r=e.datas,n=e.clientX,i=e.clientY,o=e.distX,a=e.distY,s=r.posNum,c=r.poses,u=r.targetInverseMatrix,l=r.prevMatrix;if(!r.isWarp)return!1;var p=t.props,f=p.target,d=p.onWarp,h=er({datas:r,distX:o,distY:a},!0),v=r.nextPoses.slice();if(v[s]=[v[s][0]+h[0],v[s][1]+h[1]],!Cr.every(function(t){return function(t,e){var r=mr(t[0],t[1],t[2]),n=mr(e[0],e[1],e[2]),i=Math.PI;return!(i<=r&&n<=i||r<=i&&i<=n)}(t.map(function(t){return c[t]}),t.map(function(t){return v[t]}))}))return!1;var g=function(t,e,r,n,i,o,a,s){var c=t[0],u=t[1],l=e[0],p=e[1],f=r[0],d=r[1],h=n[0],v=n[1],g=i[0],m=i[1],b=o[0],y=o[1],w=a[0],x=a[1],S=s[0],C=s[1],_=me([c,u,1,0,0,0,-g*c,-g*u,0,0,0,c,u,1,-m*c,-m*u,l,p,1,0,0,0,-b*l,-b*p,0,0,0,l,p,1,-y*l,-y*p,f,d,1,0,0,0,-w*f,-w*d,0,0,0,f,d,1,-x*f,-x*d,h,v,1,0,0,0,-S*h,-S*v,0,0,0,h,v,1,-C*h,-C*v],8);if(!_.length)return[];var D=Se(_,[g,m,b,y,w,x,S,C],8);return D[8]=1,we(D,3,4)}(c[0],c[1],c[2],c[3],v[0],v[1],v[2],v[3]);if(!g.length)return!1;var m=Me(Se(u,g,4)),b=r.targetTransform+" matrix3d("+m.join(",")+")",y=Se(me(l,4),m,4);return r.prevMatrix=m,d&&d({target:f,clientX:n,clientY:i,delta:y,multiply:Ce,dist:m,transform:b,datas:r.datas}),!0},dragControlEnd:function(t,e){var r=e.datas,n=e.isDrag,i=e.clientX,o=e.clientY;if(!r.isWarp)return!1;r.isWarp=!1;var a=t.props,s=a.target,c=a.onWarpEnd;return c&&c({target:s,clientX:i,clientY:o,isDrag:n,datas:r.datas}),n}},yr=Yt(),wr=-1<yr.os.name.indexOf("ios")||-1<yr.browser.name.indexOf("safari"),xr="moveable-",Sr=("\n{\n\tposition: fixed;\n\twidth: 0;\n\theight: 0;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 3000;\n}\n.control-box {\n    z-index: 0;\n}\n.line, .control {\n\tleft: 0;\n\ttop: 0;\n}\n.control {\n\tposition: absolute;\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n\tbackground: #4af;\n\tmargin-top: -7px;\n    margin-left: -7px;\n    z-index: 10;\n}\n.line {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tbackground: #4af;\n\ttransform-origin: 0px 0.5px;\n}\n.line.rotation-line {\n\theight: 40px;\n\twidth: 1px;\n\ttransform-origin: 0.5px 39.5px;\n}\n.line.rotation-line .control {\n\tborder-color: #4af;\n\tbackground:#fff;\n\tcursor: alias;\n}\n.control.origin {\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n\tmargin-left: -6px;\n\tpointer-events: none;\n}\n.direction.e, .direction.w {\n\tcursor: ew-resize;\n}\n.direction.s, .direction.n {\n\tcursor: ns-resize;\n}\n.direction.nw, .direction.se, :host.reverse .direction.ne, :host.reverse .direction.sw {\n\tcursor: nwse-resize;\n}\n.direction.ne, .direction.sw, :host.reverse .direction.nw, :host.reverse .direction.se {\n\tcursor: nesw-resize;\n}\n.group {\n    z-index: -1;\n}\n"+(wr?':global svg *:before {\n\tcontent:"";\n\ttransform-origin: inherit;\n}':"")+"\n").replace(/\.([^{,\s\d.]+)/g,"."+xr+"$1"),Cr=[[0,1,2],[1,0,3],[2,0,3],[3,1,2]],_r=1e-9,Dr=[Qe,ar,pr,hr,vr,br],Er=Math.pow(10,10),Mr=-Er,Pr={name:"origin",render:function(t){if(!t.props.origin)return null;var e=t.state.beforeOrigin;return[rt("div",{className:Ye("control","origin"),style:Ie(e),key:"beforeOrigin"})]}};function Or(n,t,i,o){var a={container:window};return["drag","pinch"].forEach(function(r){["Start","","End"].forEach(function(e){a[""+r+e.toLowerCase()]=function(t){return function(r,t,e,n,i,o){var a=""+e+n+i,s=""+e+n+"Condition",c="Start"===i,u=-1<n.indexOf("Group"),l=r[t].filter(function(t){var e=c&&t[s];return!(!t[a]||e&&!e(o.inputEvent.target))&&t[a](r,o)});!c&&l.length&&(l.some(function(t){return t.updateRect})&&!u?r.updateRect(i):r.updateTarget(i))}(n,i,r,o,e,t)}})}),new Qt(t,a)}var Yr,Xr,Nr,Rr,kr,Gr=(Yr="div",Rr="rCS"+function(t){return jt(t).toString(36)}(Xr=Sr),kr=0,function(e){function t(t){return e.call(this,t)||this}return function(t,e){function r(){this.constructor=t}Wt(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}(t,e),t.prototype.render=function(){var t=this.props,e=t.className,r=function(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i<n.length;i++)e.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(t,n[i])&&(r[n[i]]=t[n[i]])}return r}(t,["className"]);return rt(Yr,zt({className:e+" "+Rr},r))},t.prototype.componentDidMount=function(){0===kr&&(Nr=function(r,t){var e=document.createElement("style");return e.setAttribute("type","text/css"),e.innerHTML=t.replace(/([^}{]*){/gm,function(t,e){return function(t){var e=t.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);return e?e.map(function(t){return t.trim()}):[]}(e).map(function(t){return-1<t.indexOf(":global")?t.replace(/\:global/g,""):-1<t.indexOf(":host")?""+t.replace(/\:host/g,"."+r):"."+r+" "+t}).join(", ")+"{"}),(document.head||document.body).appendChild(e),e}(Rr,Xr)),++kr},t.prototype.componentWillUnmount=function(){0==--kr&&Nr&&Nr.parentNode.removeChild(Nr)},t.prototype.getElement=function(){return this.element||(this.element=function(t){return t&&(t.base||1===t.nodeType&&t)||null}(this))},t}(ht));function Ar(t,e,r){return rt("div",{className:Ye("line","direction",t),"data-direction":t,style:Fe(e,r)})}var Tr=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={target:null,beforeMatrix:Xe(),matrix:Xe(),targetMatrix:Xe(),targetTransform:"",is3d:!1,left:0,top:0,width:0,height:0,transformOrigin:[0,0],direction:1,beforeDirection:1,rotationRad:0,rotationPos:[0,0],beforeOrigin:[0,0],origin:[0,0],pos1:[0,0],pos2:[0,0],pos3:[0,0],pos4:[0,0]},t.targetAbles=[],t.controlAbles=[],t}le(t,e);var r=t.prototype;return r.render=function(){this.update(!1);var t=this.props,e=t.edge,r=t.parentPosition||{left:0,top:0},n=r.left,i=r.top,o=this.state,a=o.left,s=o.top,c=o.pos1,u=o.pos2,l=o.pos3,p=o.pos4,f=o.target,d=o.direction;return rt(Gr,{ref:gt(this,"controlBox"),className:Ye("control-box",-1===d?"reverse":""),style:{position:"absolute",display:f?"block":"none",transform:"translate("+(a-n)+"px, "+(s-i)+"px) translateZ(50px)"}},this.renderAbles(),Ar(e?"n":"",c,u),Ar(e?"e":"",u,p),Ar(e?"w":"",c,l),Ar(e?"s":"",l,p))},r.componentDidMount=function(){this.controlBox.getElement(),this.update(!0)},r.componentWillUnmount=function(){$e(this,"targetDragger"),$e(this,"controlDragger")},r.getContainer=function(){var t=this.props,e=t.parentMoveable;return t.container||e&&e.getContainer()||this.controlBox.getElement().offsetParent},r.isMoveableElement=function(t){return t&&-1<(t.getAttribute("class")||"").indexOf(xr)},r.dragStart=function(t){this.targetDragger.onDragStart(t)},r.isInside=function(t,e){var r=this.state,n=r.pos1,i=r.pos2,o=r.pos3,a=r.pos4,s=r.target;if(!s)return!1;var c=s.getBoundingClientRect();return function(t,e,r,n,i){var o=[Ke(t,e,r),Ke(t,r,i),Ke(t,i,e)],a=[Ke(t,r,i),Ke(t,i,n),Ke(t,n,r)];return!!(o.every(function(t){return 0<=t})||o.every(function(t){return t<=0})||a.every(function(t){return 0<=t})||a.every(function(t){return t<=0}))}([t-c.left,e-c.top],n,i,o,a)},r.updateRect=function(t,e,r){void 0===r&&(r=!0);var n=this.props.parentMoveable,i=this.state,o=i.target||this.props.target;this.updateState(Ue(o,this.getContainer(),e?i:void 0),!n&&r)},r.updateTarget=function(t){this.updateRect(t,!0)},r.update=function(t){var e=this.props,r=e.target,n=e.parentMoveable,i=this.state.target,o=this.controlBox;if(o&&(i||r)){this.updateAbles();var a=o.getElement(),s=this.targetAbles.length,c=this.controlAbles.length,u=i!==r;return u&&this.updateState({target:r}),s&&!u||$e(this,"targetDragger"),c||$e(this,"controlDragger"),r&&(!this.targetDragger&&s||u)&&(this.targetDragger=Or(this,r,"targetAbles","")),!this.controlDragger&&c&&(this.controlDragger=Or(this,a,"controlAbles","Control")),u&&!n&&this.updateRect("End",!1,t),u}},r.triggerEvent=function(t,e){var r=this.props[t];return r&&r(e)},r.updateAbles=function(){var e=this.props,t=e.ables.filter(function(t){return e[t.name]}),n=!1,r=t.filter(function(t){return t.dragStart||t.pinchStart}),i=t.filter(function(t){var e=t.dragControlStart,r=t.dragControlOnly;return!(!e||r&&n)&&(r&&(n=!0),!0)});this.targetAbles=r,this.controlAbles=i},r.updateState=function(t,e){if(e)this.setState(t);else{var r=this.state;for(var n in t)r[n]=t[n]}},r.renderAbles=function(){var r=this;return this.props.ables.concat([Pr]).map(function(t){var e=t.render;return e&&e(r)})},t.defaultProps={target:null,container:null,origin:!0,keepRatio:!0,edge:!1,parentMoveable:null,parentPosition:null,ables:[]},t}(vt),Br={name:"groupable",render:function(r){var t=r.props.targets||[];r.moveables=[];var e=r.state,n={left:e.left,top:e.top};return t.map(function(t,e){return rt(Tr,{key:e,ref:function(e,r,n){return function(t){t&&(e[r][n]=t)}}(r,"moveables",e),target:t,origin:!1,parentMoveable:r,parentPosition:n})}).concat([rt("div",{key:"groupTarget",ref:gt(r,"groupTargetElement"),className:Ye("group")})])}};function Wr(t,o){return Math.max.apply(Math,t.map(function(t){var e=t[0],r=t[1],n=t[2],i=t[3];return Math.max(e[o],r[o],n[o],i[o])}))}function zr(t,o){return Math.min.apply(Math,t.map(function(t){var e=t[0],r=t[1],n=t[2],i=t[3];return Math.min(e[o],r[o],n[o],i[o])}))}var jr=function(r){function t(){var t=null!==r&&r.apply(this,arguments)||this;return t.differ=new ce,t.moveables=[],t.rotation=0,t}le(t,r);var e=t.prototype;return e.componentDidMount=function(){r.prototype.componentDidMount.call(this)},e.componentDidUpdate=function(){this.update(!0)},e.update=function(t){if(t){var e=this.state;e.target||(e.target=this.groupTargetElement,this.controlBox.getElement().style.display="block",this.targetDragger=Or(this,e.target,"targetAbles","Group"),this.controlDragger=Or(this,this.controlBox.getElement(),"controlAbles","GroupControl")),this.updateAbles(),this.moveables.forEach(function(t){return t.update(!1)});var r=this.differ.update(this.props.targets),n=r.added,i=r.changed;return(n.length||i.length)&&this.updateRect(),!0}},e.updateRect=function(e,t,r){if(this.controlBox){this.moveables.forEach(function(t){t.updateRect(e,!1,!1)});var n=this.state,i=n.target||this.props.target;(!t||""!==e&&this.props.updateGroup)&&(this.rotation=0);var o=this.rotation,a=function(t,o){if(!t.length)return[0,0,0,0];var e=t.map(function(t){var e=t.state,r=e.left,n=e.top,i=e.pos1,o=e.pos2,a=e.pos3,s=e.pos4,c=[r,n];return[_e(c,i),_e(c,o),_e(c,a),_e(c,s)]}),i=Er,a=Er,r=0,n=0;if(o%90){var s=o/180*Math.PI,c=Math.tan(s),u=-1/c,l=[Mr,Er],p=[Mr,Er];e.forEach(function(t){t.forEach(function(t){var e=t[1]-c*t[0],r=t[1]-u*t[0];l[0]=Math.max(l[0],e),l[1]=Math.min(l[1],e),p[0]=Math.max(p[0],r),p[1]=Math.min(p[1],r)})}),l.forEach(function(n){p.forEach(function(t){var e=(t-n)/(c-u),r=c*e+n;i=Math.min(i,e),a=Math.min(a,r)})});var f=e.map(function(t){var e=t[0],r=t[1],n=t[2],i=t[3];return[Oe(e,-o),Oe(r,-o),Oe(n,-o),Oe(i,-o)]});r=Wr(f,0)-zr(f,0),n=Wr(f,1)-zr(f,1)}else i=zr(e,0),a=zr(e,1),r=Wr(e,0)-i,n=Wr(e,1)-a;return[i,a,r,n]}(this.moveables,o),s=a[0],c=a[1],u=a[2],l=a[3];i.style.cssText+="width:"+u+"px; height:"+l+"px;transform:rotate("+o+"deg)",n.width=u,n.height=l;var p=Ue(i,this.controlBox.getElement(),n);i.style.cssText+="transform: translate("+-p.left+"px, "+-p.top+"px) rotate("+o+"deg)",this.updateState(pe({},p,{left:s,top:c}),!0)}},e.triggerEvent=function(t,e){if(-1<t.indexOf("Group"))return r.prototype.triggerEvent.call(this,t,e)},e.renderAbles=function(){var r=this;return this.props.ables.concat([Br,Pr]).map(function(t){var e=t.render;return e&&e(r)})},t.defaultProps=pe({},Tr.defaultProps,{groupable:!0,ables:Dr,targets:[]}),t}(Tr),Fr=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}le(e,t);var r=e.prototype;return r.render=function(){var t=this.props.target||this.props.targets,e=Gt(t);if(e&&1<t.length)return rt(jr,pe({key:"group",ref:gt(this,"moveable")},pe({},this.props,{target:null,targets:t})));var r=e?t[0]:t;return rt(Tr,pe({key:"single",ref:gt(this,"moveable")},pe({},this.props,{target:r})))},r.isMoveableElement=function(t){return this.moveable.isMoveableElement(t)},r.dragStart=function(t){this.moveable.dragStart(t)},r.isInside=function(t,e){return this.moveable.isInside(t,e)},r.updateRect=function(){this.moveable.updateRect()},r.updateTarget=function(){this.moveable.updateTarget()},e.defaultProps=pe({},Tr.defaultProps,{ables:Dr}),e}(vt),Ir=function(r){function t(t){var e=r.call(this,t)||this;return e.state={},e.state=e.props,e}return i(t,r),t.prototype.render=function(){return h(Fr,c({ref:u(this,"preactMoveable")},this.state))},t}(_),Lr=["draggable","resizable","scalable","rotatable","warpable","pinchable","origin","target","edge","throttleDrag","throttleResize","throttleScale","throttleRotate","keepRatio"],Ur=["dragStart","drag","dragEnd","resizeStart","resize","resizeEnd","scaleStart","scale","scaleEnd","rotateStart","rotate","rotateEnd","warpStart","warp","warpEnd","pinchStart","pinch","pinchEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeGroupStart","resizeGroup","resizeGroupEnd","scaleGroupStart","scaleGroup","scaleGroupEnd","rotateGroupStart","rotateGroup","rotateGroupEnd","pinchGroupStart","pinchGroup","pinchGroupEnd"],Vr=function(s){function t(t,e){void 0===e&&(e={});var r=s.call(this)||this,n=document.createElement("div"),i=c({container:t},e),o={};Ur.forEach(function(e){o[function(t){return t.replace(/[\s-_]([a-z])/g,function(t,e){return e.toUpperCase()})}("on "+e)]=function(t){return r.trigger(e,t)}}),function(t,e,r){N(r,t,{},!1,e,!1)}(h(Ir,c({ref:u(r,"innerMoveable")},i,o)),n),t.appendChild(n.children[0]);var a=i.target;return Gt(a)&&1<a.length&&r.updateRect(),r}i(t,s);var e=t.prototype;return e.isMoveableElement=function(t){return this.getMoveable().isMoveableElement(t)},e.updateRect=function(){this.getMoveable().updateRect()},e.updateTarget=function(){this.getMoveable().updateTarget()},e.destroy=function(){var t=this.getMoveable().base;t.remove?t.remove():t.parentElement.removeChild(t),this.off(),this.getMoveable().componentWillUnmount(),this.innerMoveable=null},e.getMoveable=function(){return this.innerMoveable.preactMoveable},t=function(t,e,r,n){var i,o=arguments.length,a=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,r,n);else for(var s=t.length-1;0<=s;s--)(i=t[s])&&(a=(o<3?i(a):3<o?i(e,r,a):i(e,r))||a);return 3<o&&a&&Object.defineProperty(e,r,a),a}([function(r,n){return function(t){var e=t.prototype;r.forEach(function(t){n(e,t)})}}(Lr,function(t,r){Object.defineProperty(t,r,{get:function(){return this.getMoveable().props[r]},set:function(t){var e;this.innerMoveable.setState(((e={})[r]=t,e))},enumerable:!0,configurable:!0})})],t)}(t);return Vr.PROPERTIES=Lr,Vr.EVENTS=Ur,Vr});
+//# sourceMappingURL=moveable.min.js.map
diff --git a/dist/moveable.min.js.map b/dist/moveable.min.js.map
new file mode 100644
index 000000000..5fc1c7037
--- /dev/null
+++ b/dist/moveable.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"moveable.min.js","sources":["../src/InnerMoveable.tsx","../src/consts.ts","../src/Moveable.tsx","../src/index.umd.ts"],"sourcesContent":["import { Component, h } from \"preact\";\nimport Moveable, { MoveableProps, MoveableInterface } from \"preact-moveable\";\nimport { ref } from \"framework-utils\";\n\nexport default class InnerMoveable extends Component<MoveableProps> {\n    public state: MoveableProps = {};\n    public preactMoveable: MoveableInterface;\n    constructor(props: MoveableProps) {\n        super(props);\n        this.state = this.props;\n    }\n    public render() {\n        return <Moveable ref={ref(this, \"preactMoveable\")} {...this.state} />;\n    }\n}\n","import { MoveableEvents } from \"./types\";\n\nexport const PROPERTIES = [\n  \"draggable\", \"resizable\", \"scalable\", \"rotatable\",\n  \"warpable\", \"pinchable\", \"origin\", \"target\", \"edge\",\n  \"throttleDrag\", \"throttleResize\", \"throttleScale\", \"throttleRotate\", \"keepRatio\",\n];\nexport const EVENTS: Array<keyof MoveableEvents> = [\n  \"dragStart\",\n  \"drag\",\n  \"dragEnd\",\n  \"resizeStart\",\n  \"resize\",\n  \"resizeEnd\",\n  \"scaleStart\",\n  \"scale\",\n  \"scaleEnd\",\n  \"rotateStart\",\n  \"rotate\",\n  \"rotateEnd\",\n  \"warpStart\",\n  \"warp\",\n  \"warpEnd\",\n  \"pinchStart\",\n  \"pinch\",\n  \"pinchEnd\",\n\n  \"dragGroupStart\",\n  \"dragGroup\",\n  \"dragGroupEnd\",\n  \"resizeGroupStart\",\n  \"resizeGroup\",\n  \"resizeGroupEnd\",\n  \"scaleGroupStart\",\n  \"scaleGroup\",\n  \"scaleGroupEnd\",\n  \"rotateGroupStart\",\n  \"rotateGroup\",\n  \"rotateGroupEnd\",\n  \"pinchGroupStart\",\n  \"pinchGroup\",\n  \"pinchGroupEnd\",\n];\n","import EgComponent from \"@egjs/component\";\nimport { ref, Properties } from \"framework-utils\";\nimport { h, render } from \"preact\";\nimport InnerMoveable from \"./InnerMoveable\";\nimport { MoveableOptions, MoveableGetterSetter } from \"./types\";\nimport {\n    OnDragStart, OnDrag, OnResize, OnResizeStart,\n    OnResizeEnd, OnScaleStart, OnScaleEnd, OnRotateStart,\n    OnRotateEnd, OnDragEnd, OnRotate, OnScale,\n    OnWarpStart, OnWarpEnd, OnWarp, OnPinchStart,\n    OnPinch, OnPinchEnd, OnDragGroup, OnDragGroupStart,\n    OnDragGroupEnd, OnResizeGroup, OnResizeGroupStart,\n    OnResizeGroupEnd, OnScaleGroup, OnScaleGroupEnd,\n    OnRotateGroup, OnRotateGroupStart, OnRotateGroupEnd,\n    OnPinchGroup, OnPinchGroupStart, OnPinchGroupEnd, OnScaleGroupStart,\n} from \"react-moveable/declaration/types\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\nimport { camelize, isArray } from \"@daybrush/utils\";\n\n/**\n * Moveable is Draggable! Resizable! Scalable! Rotatable!\n * @sort 1\n * @extends eg.Component\n */\n@Properties(PROPERTIES, (prototype, property) => {\n    Object.defineProperty(prototype, property, {\n        get() {\n            return this.getMoveable().props[property];\n        },\n        set(value) {\n            this.innerMoveable.setState({\n                [property]: value,\n            });\n        },\n        enumerable: true,\n        configurable: true,\n    });\n})\nclass Moveable extends EgComponent {\n    private innerMoveable!: InnerMoveable;\n\n    /**\n     *\n     */\n    constructor(parentElement: HTMLElement | SVGElement, options: MoveableOptions = {}) {\n        super();\n        const element = document.createElement(\"div\");\n        const nextOptions = { container: parentElement, ...options };\n\n        const events: any = {};\n\n        EVENTS.forEach(name => {\n            events[camelize(`on ${name}`)] = (e: any) => this.trigger(name, e);\n        });\n\n        render(\n            <InnerMoveable\n                ref={ref(this, \"innerMoveable\")}\n                {...nextOptions}\n                {...events}\n            />,\n            element,\n        );\n        parentElement.appendChild(element.children[0]);\n\n        const target = nextOptions.target!;\n        if (isArray(target) && target.length > 1) {\n            this.updateRect();\n        }\n    }\n    /**\n     * Check if the target is an element included in the moveable.\n     * @param - the target\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"click\", e => {\n     *     if (!moveable.isMoveableElement(e.target)) {\n     *         moveable.target = e.target;\n     *     }\n     * });\n     */\n    public isMoveableElement(target: HTMLElement | SVGElement) {\n        return this.getMoveable().isMoveableElement(target);\n    }\n    /**\n     * If the width, height, left, and top of all elements change, update the shape of the moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * window.addEventListener(\"resize\", e => {\n     *     moveable.updateRect();\n     * });\n     */\n    public updateRect() {\n        this.getMoveable().updateRect();\n    }\n    /**\n     * If the width, height, left, and top of the only target change, update the shape of the moveable.\n     * @param - the values of x and y to move moveable.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.updateTarget();\n     */\n    public updateTarget(): void {\n        this.getMoveable().updateTarget();\n    }\n    /**\n     * Remove the Moveable object and the events.\n     * @example\n     * import Moveable from \"moveable\";\n     *\n     * const moveable = new Moveable(document.body);\n     *\n     * moveable.destroy();\n     */\n    public destroy() {\n        const el = this.getMoveable().base;\n\n        el.remove ? el.remove() : el.parentElement.removeChild(el);\n        this.off();\n        this.getMoveable().componentWillUnmount();\n        this.innerMoveable = null;\n    }\n    private getMoveable() {\n        return this.innerMoveable.preactMoveable;\n    }\n}\n/**\n * Whether or not the origin controlbox will be visible or not\n * @name Moveable#origin\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.origin = true;\n */\n/**\n * The target to indicate Moveable Control Box.\n * @name Moveable#target\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.target = document.querySelector(\".target\");\n */\n/**\n * Whether or not target can be dragged.\n * @name Moveable#draggable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.draggable = true;\n */\n/**\n * Whether or not target can be resized.\n * @name Moveable#resizable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.resizable = true;\n */\n/**\n * Whether or not target can scaled.\n * @name Moveable#scalable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.scalable = true;\n */\n/**\n * Whether or not target can be rotated.\n * @name Moveable#rotatable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.rotatable = true;\n */\n/**\n * Whether or not target can be warped.\n * @name Moveable#warpable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.warpable = true;\n */\n/**\n * Whether or not target can be pinched with draggable, resizable, scalable, rotatable\n * @name Moveable#pinchable\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.pinchable = true;\n */\n/**\n * When resize or scale, keeps a ratio of the width, height.\n * @name Moveable#keepRatio\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.keepRatio = true;\n */\n/**\n * Resize, Scale Events at edges\n * @name Moveable#edge\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n * moveable.edge = true;\n */\n/**\n * throttle of x, y when drag.\n * @name Moveable#throttleDrag\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleDrag = 1;\n */\n/**\n * throttle of width, height when resize.\n * @name Moveable#throttleResize\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleResize = 1;\n */\n/**\n * throttle of scaleX, scaleY when scale.\n * @name Moveable#throttleScale\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleScale = 0.1;\n */\n/**\n * hrottle of angle(degree) when rotate.\n * @name Moveable#throttleRotate\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body);\n *\n * moveable.throttleRotate = 1;\n */\n/**\n * When the drag starts, the dragStart event is called.\n * @memberof Moveable\n * @event dragStart\n * @param {Moveable.OnDragStart} - Parameters for the dragStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When dragging, the drag event is called.\n * @memberof Moveable\n * @event drag\n * @param {Moveable.OnDrag} - Parameters for the drag event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"drag\", ({ target, transform }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the drag finishes, the dragEnd event is called.\n * @memberof Moveable\n * @event dragEnd\n * @param {Moveable.OnDragEnd} - Parameters for the dragEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { draggable: true });\n * moveable.on(\"dragEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the resize starts, the resizeStart event is called.\n * @memberof Moveable\n * @event resizeStart\n * @param {Moveable.OnResizeStart} - Parameters for the resizeStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When resizing, the resize event is called.\n * @memberof Moveable\n * @event resize\n * @param {Moveable.OnResize} - Parameters for the resize event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resize\", ({ target, width, height }) => {\n *     target.style.width = `${e.width}px`;\n *     target.style.height = `${e.height}px`;\n * });\n */\n/**\n * When the resize finishes, the resizeEnd event is called.\n * @memberof Moveable\n * @event resizeEnd\n * @param {Moveable.OnResizeEnd} - Parameters for the resizeEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { resizable: true });\n * moveable.on(\"resizeEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the scale starts, the scaleStart event is called.\n * @memberof Moveable\n * @event scaleStart\n * @param {Moveable.OnScaleStart} - Parameters for the scaleStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When scaling, the scale event is called.\n * @memberof Moveable\n * @event scale\n * @param {Moveable.OnScale} - Parameters for the scale event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scale\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the scale finishes, the scaleEnd event is called.\n * @memberof Moveable\n * @event scaleEnd\n * @param {Moveable.OnScaleEnd} - Parameters for the scaleEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { scalable: true });\n * moveable.on(\"scaleEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the rotate starts, the rotateStart event is called.\n * @memberof Moveable\n * @event rotateStart\n * @param {Moveable.OnRotateStart} - Parameters for the rotateStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When rotating, the rotate event is called.\n * @memberof Moveable\n * @event rotate\n * @param {Moveable.OnRotate} - Parameters for the rotate event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotate\", ({ target, transform, dist }) => {\n *     target.style.transform = transform;\n * });\n */\n/**\n * When the rotate finishes, the rotateEnd event is called.\n * @memberof Moveable\n * @event rotateEnd\n * @param {Moveable.OnRotateEnd} - Parameters for the rotateEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { rotatable: true });\n * moveable.on(\"rotateEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n\n/**\n* When the warp starts, the warpStart event is called.\n* @memberof Moveable\n* @event warpStart\n* @param {Moveable.OnWarpStart} - Parameters for the warpStart event\n* @example\n* import Moveable from \"moveable\";\n*\n* const moveable = new Moveable(document.body, { warpable: true });\n* moveable.on(\"warpStart\", ({ target }) => {\n*     console.log(target);\n* });\n*/\n/**\n * When warping, the warp event is called.\n * @memberof Moveable\n * @event warp\n * @param {Moveable.OnWarp} - Parameters for the warp event\n * @example\n * import Moveable from \"moveable\";\n * let matrix = [\n *  1, 0, 0, 0,\n *  0, 1, 0, 0,\n *  0, 0, 1, 0,\n *  0, 0, 0, 1,\n * ];\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warp\", ({ target, transform, delta, multiply }) => {\n *    // target.style.transform = transform;\n *    matrix = multiply(matrix, delta);\n *    target.style.transform = `matrix3d(${matrix.join(\",\")})`;\n * });\n */\n/**\n * When the warp finishes, the warpEnd event is called.\n * @memberof Moveable\n * @event warpEnd\n * @param {Moveable.OnWarpEnd} - Parameters for the warpEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, { warpable: true });\n * moveable.on(\"warpEnd\", ({ target, isDrag }) => {\n *     console.log(target, isDrag);\n * });\n */\n/**\n * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart\n * @memberof Moveable\n * @event pinchStart\n * @param {Moveable.OnPinchStart} - Parameters for the pinchStart event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateStart\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleStart\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When pinching, the pinch event is called with part of scale, rotate, resize\n * @memberof Moveable\n * @event pinch\n * @param {Moveable.OnPinch} - Parameters for the pinch event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinch\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotate\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scale\", ({ target }) => {\n *     console.log(target);\n * });\n */\n/**\n * When the pinch finishes, the pinchEnd event is called.\n * @memberof Moveable\n * @event pinchEnd\n * @param {Moveable.OnPinchEnd} - Parameters for the pinchEnd event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     rotatable: true,\n *     scalable: true,\n *     pinchable: true, // [\"rotatable\", \"scalable\"]\n * });\n * moveable.on(\"pinchEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"rotateEnd\", ({ target }) => {\n *     console.log(target);\n * });\n * moveable.on(\"scaleEnd\", ({ target }) => {\n *     console.log(target);\n * });\n */\n\n /**\n * When the group drag starts, the `dragGroupStart` event is called.\n * @memberof Moveable\n * @event dragGroupStart\n * @param {Moveable.OnDragGroupStart} - Parameters for the `dragGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupStart\", ({ targets }) => {\n *     console.log(\"onDragGroupStart\", targets);\n * });\n */\n\n /**\n * When the group drag, the `dragGroup` event is called.\n * @memberof Moveable\n * @event dragGroup\n * @param {Moveable.onDragGroup} - Parameters for the `dragGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroup\", ({ targets, events }) => {\n *     console.log(\"onDragGroup\", targets);\n *     events.forEach(ev => {\n *          // drag event\n *          console.log(\"onDrag left, top\", ev.left, ev.top);\n *          // ev.target!.style.left = `${ev.left}px`;\n *          // ev.target!.style.top = `${ev.top}px`;\n *          console.log(\"onDrag translate\", ev.dist);\n *          ev.target!.style.transform = ev.transform;)\n *     });\n * });\n */\n\n/**\n * When the group drag finishes, the `dragGroupEnd` event is called.\n * @memberof Moveable\n * @event dragGroupEnd\n * @param {Moveable.OnDragGroupEnd} - Parameters for the `dragGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     draggable: true\n * });\n * moveable.on(\"dragGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onDragGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group resize starts, the `resizeGroupStart` event is called.\n * @memberof Moveable\n * @event resizeGroupStart\n * @param {Moveable.OnResizeGroupStart} - Parameters for the `resizeGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupStart\", ({ targets }) => {\n *     console.log(\"onResizeGroupStart\", targets);\n * });\n */\n\n /**\n * When the group resize, the `resizeGroup` event is called.\n * @memberof Moveable\n * @event resizeGroup\n * @param {Moveable.onResizeGroup} - Parameters for the `resizeGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroup\", ({ targets, events }) => {\n *     console.log(\"onResizeGroup\", targets);\n *     events.forEach(ev => {\n *         const offset = [\n *             direction[0] < 0 ? -ev.delta[0] : 0,\n *             direction[1] < 0 ? -ev.delta[1] : 0,\n *         ];\n *         // ev.drag is a drag event that occurs when the group resize.\n *         const left = offset[0] + ev.drag.beforeDist[0];\n *         const top = offset[1] + ev.drag.beforeDist[1];\n *         const width = ev.width;\n *         const top = ev.top;\n *     });\n * });\n */\n\n/**\n * When the group resize finishes, the `resizeGroupEnd` event is called.\n * @memberof Moveable\n * @event resizeGroupEnd\n * @param {Moveable.OnResizeGroupEnd} - Parameters for the `resizeGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     resizable: true\n * });\n * moveable.on(\"resizeGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onResizeGroupEnd\", targets, isDrag);\n * });\n */\n\n /**\n * When the group scale starts, the `scaleGroupStart` event is called.\n * @memberof Moveable\n * @event scaleGroupStart\n * @param {Moveable.OnScaleGroupStart} - Parameters for the `scaleGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupStart\", ({ targets }) => {\n *     console.log(\"onScaleGroupStart\", targets);\n * });\n */\n\n /**\n * When the group scale, the `scaleGroup` event is called.\n * @memberof Moveable\n * @event scaleGroup\n * @param {Moveable.OnScaleGroup} - Parameters for the `scaleGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroup\", ({ targets, events }) => {\n *     console.log(\"onScaleGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group scale.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[0];\n *         const scaleX = ev.scale[0];\n *         const scaleX = ev.scale[1];\n *     });\n * });\n */\n\n/**\n * When the group scale finishes, the `scaleGroupEnd` event is called.\n * @memberof Moveable\n * @event scaleGroupEnd\n * @param {Moveable.OnScaleGroupEnd} - Parameters for the `scaleGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     scalable: true\n * });\n * moveable.on(\"scaleGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onScaleGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group rotate starts, the `rotateGroupStart` event is called.\n * @memberof Moveable\n * @event rotateGroupStart\n * @param {Moveable.OnRotateGroupStart} - Parameters for the `rotateGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupStart\", ({ targets }) => {\n *     console.log(\"onRotateGroupStart\", targets);\n * });\n */\n\n /**\n * When the group rotate, the `rotateGroup` event is called.\n * @memberof Moveable\n * @event rotateGroup\n * @param {Moveable.OnRotateGroup} - Parameters for the `rotateGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroup\", ({ targets, events }) => {\n *     console.log(\"onRotateGroup\", targets);\n *     events.forEach(ev => {\n *         const target = ev.target;\n *         // ev.drag is a drag event that occurs when the group rotate.\n *         const left = ev.drag.beforeDist[0];\n *         const top = ev.drag.beforeDist[1];\n *         const deg = ev.beforeDist;\n *     });\n * });\n */\n\n/**\n * When the group rotate finishes, the `rotateGroupEnd` event is called.\n * @memberof Moveable\n * @event rotateGroupEnd\n * @param {Moveable.OnRotateGroupEnd} - Parameters for the `rotateGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     rotatable: true\n * });\n * moveable.on(\"rotateGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onRotateGroupEnd\", targets, isDrag);\n * });\n */\n\n/**\n * When the group pinch starts, the `pinchGroupStart` event is called.\n * @memberof Moveable\n * @event pinchGroupStart\n * @param {Moveable.OnPinchGroupStart} - Parameters for the `pinchGroupStart` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupStart\", ({ targets }) => {\n *     console.log(\"onPinchGroupStart\", targets);\n * });\n */\n\n /**\n * When the group pinch, the `pinchGroup` event is called.\n * @memberof Moveable\n * @event pinchGroup\n * @param {Moveable.OnPinchGroup} - Parameters for the `pinchGroup` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroup\", ({ targets, events }) => {\n *     console.log(\"onPinchGroup\", targets);\n * });\n */\n\n/**\n * When the group pinch finishes, the `pinchGroupEnd` event is called.\n * @memberof Moveable\n * @event pinchGroupEnd\n * @param {Moveable.OnPinchGroupEnd} - Parameters for the `pinchGroupEnd` event\n * @example\n * import Moveable from \"moveable\";\n *\n * const moveable = new Moveable(document.body, {\n *     target: [].slice.call(document.querySelectorAll(\".target\")),\n *     pinchable: true\n * });\n * moveable.on(\"pinchGroupEnd\", ({ targets, isDrag }) => {\n *     console.log(\"onPinchGroupEnd\", targets, isDrag);\n * });\n */\ninterface Moveable extends MoveableGetterSetter {\n    on(eventName: \"drag\", handlerToAttach: (event: OnDrag) => any): this;\n    on(eventName: \"dragStart\", handlerToAttach: (event: OnDragStart) => any): this;\n    on(eventName: \"dragEnd\", handlerToAttach: (event: OnDragEnd) => any): this;\n\n    on(eventName: \"resize\", handlerToAttach: (event: OnResize) => any): this;\n    on(eventName: \"resizeStart\", handlerToAttach: (event: OnResizeStart) => any): this;\n    on(eventName: \"resizeEnd\", handlerToAttach: (event: OnResizeEnd) => any): this;\n\n    on(eventName: \"scale\", handlerToAttach: (event: OnScale) => any): this;\n    on(eventName: \"scaleStart\", handlerToAttach: (event: OnScaleStart) => any): this;\n    on(eventName: \"scaleEnd\", handlerToAttach: (event: OnScaleEnd) => any): this;\n\n    on(eventName: \"rotate\", handlerToAttach: (event: OnRotate) => any): this;\n    on(eventName: \"rotateStart\", handlerToAttach: (event: OnRotateStart) => any): this;\n    on(eventName: \"rotateEnd\", handlerToAttach: (event: OnRotateEnd) => any): this;\n\n    on(eventName: \"warp\", handlerToAttach: (event: OnWarp) => any): this;\n    on(eventName: \"warpStart\", handlerToAttach: (event: OnWarpStart) => any): this;\n    on(eventName: \"warpEnd\", handlerToAttach: (event: OnWarpEnd) => any): this;\n\n    on(eventName: \"pinch\", handlerToAttach: (event: OnPinch) => any): this;\n    on(eventName: \"pinchStart\", handlerToAttach: (event: OnPinchStart) => any): this;\n    on(eventName: \"pinchEnd\", handlerToAttach: (event: OnPinchEnd) => any): this;\n\n    on(eventName: \"dragGroup\", handlerToAttach: (event: OnDragGroup) => any): this;\n    on(eventName: \"dragGroupStart\", handlerToAttach: (event: OnDragGroupStart) => any): this;\n    on(eventName: \"dragGroupEnd\", handlerToAttach: (event: OnDragGroupEnd) => any): this;\n\n    on(eventName: \"resizeGroup\", handlerToAttach: (event: OnResizeGroup) => any): this;\n    on(eventName: \"resizeGroupStart\", handlerToAttach: (event: OnResizeGroupStart) => any): this;\n    on(eventName: \"resizeGroupEnd\", handlerToAttach: (event: OnResizeGroupEnd) => any): this;\n\n    on(eventName: \"scaleGroup\", handlerToAttach: (event: OnScaleGroup) => any): this;\n    on(eventName: \"scaleGroupStart\", handlerToAttach: (event: OnScaleGroupStart) => any): this;\n    on(eventName: \"scaleGroupEnd\", handlerToAttach: (event: OnScaleGroupEnd) => any): this;\n\n    on(eventName: \"rotateGroup\", handlerToAttach: (event: OnRotateGroup) => any): this;\n    on(eventName: \"rotateGroupStart\", handlerToAttach: (event: OnRotateGroupStart) => any): this;\n    on(eventName: \"rotateGroupEnd\", handlerToAttach: (event: OnRotateGroupEnd) => any): this;\n\n    on(eventName: \"pinchGroup\", handlerToAttach: (event: OnPinchGroup) => any): this;\n    on(eventName: \"pinchGroupStart\", handlerToAttach: (event: OnPinchGroupStart) => any): this;\n    on(eventName: \"pinchGroupEnd\", handlerToAttach: (event: OnPinchGroupEnd) => any): this;\n\n    on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;\n    on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;\n}\n\nexport default Moveable;\n","import Moveable from \"./Moveable\";\nimport { PROPERTIES, EVENTS } from \"./consts\";\n\n(Moveable as any).PROPERTIES = PROPERTIES;\n(Moveable as any).EVENTS = EVENTS;\n\nexport default Moveable;\n"],"names":["props","_super","_this","state","tslib_1","h","Moveable","ref","this","Component","PROPERTIES","EVENTS","parentElement","options","element","document","createElement","nextOptions","container","events","forEach","name","camelize","e","trigger","render","InnerMoveable","appendChild","children","target","isArray","length","updateRect","getMoveable","isMoveableElement","updateTarget","el","base","remove","removeChild","off","componentWillUnmount","innerMoveable","preactMoveable","Properties","prototype","property","Object","defineProperty","get","set","value","setState","enumerable","configurable","EgComponent"],"mappings":";;;;;;;;8mlEAOgBA,SACRC,YAAMD,gBAHHE,QAAuB,GAI1BA,EAAKC,MAAQD,EAAKF,eALiBI,0BAOvC,kBACWC,EAACC,MAASC,IAAKA,EAAIC,KAAM,mBAAuBA,KAAKL,YARzBM,GCF9BC,GAAa,CACxB,YAAa,YAAa,WAAY,YACtC,WAAY,YAAa,SAAU,SAAU,OAC7C,eAAgB,iBAAkB,gBAAiB,iBAAkB,aAE1DC,GAAsC,CACjD,YACA,OACA,UACA,cACA,SACA,YACA,aACA,QACA,WACA,cACA,SACA,YACA,YACA,OACA,UACA,aACA,QACA,WAEA,iBACA,YACA,eACA,mBACA,cACA,iBACA,kBACA,aACA,gBACA,mBACA,cACA,iBACA,kBACA,aACA,2CCGcC,EAAyCC,gBAAAA,YACjDZ,mBACMa,EAAUC,SAASC,cAAc,OACjCC,KAAgBC,UAAWN,GAAkBC,GAE7CM,EAAc,GAEpBR,GAAOS,QAAQ,SAAAC,GACXF,uFAAOG,CAAS,MAAMD,IAAW,SAACE,UAAWrB,EAAKsB,QAAQH,EAAME,wCAGpEE,CACIpB,EAACqB,MACGnB,IAAKA,EAAIL,EAAM,kBACXe,EACAE,IAERL,GAEJF,EAAce,YAAYb,EAAQc,SAAS,QAErCC,EAASZ,EAAYY,cACvBC,GAAQD,IAA2B,EAAhBA,EAAOE,QAC1B7B,EAAK8B,eA7BM5B,oDA8CnB,SAAyByB,UACdrB,KAAKyB,cAAcC,kBAAkBL,iBAahD,gBACSI,cAAcD,6BAYvB,gBACSC,cAAcE,0BAWvB,eACUC,EAAK5B,KAAKyB,cAAcI,KAE9BD,EAAGE,OAASF,EAAGE,SAAWF,EAAGxB,cAAc2B,YAAYH,QAClDI,WACAP,cAAcQ,4BACdC,cAAgB,oBAEzB,kBACWlC,KAAKkC,cAAcC,gBA9F5BrC,0ZAdLsC,CAAWlC,GAAY,SAACmC,EAAWC,GAChCC,OAAOC,eAAeH,EAAWC,EAAU,CACvCG,sBACWzC,KAAKyB,cAAcjC,MAAM8C,IAEpCI,aAAIC,cACKT,cAAcU,iBACdN,GAAWK,OAGpBE,YAAY,EACZC,cAAc,OAGhBhD,IAAiBiD,aCnCL7C,WAAaA,MACbC,OAASA"}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1fec50ce4..27c93cf29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -985,17 +985,24 @@
       }
     },
     "preact-moveable": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.9.5.tgz",
-      "integrity": "sha512-r/JI+NmIlIU0mARqlcrKJF6rF0vnm7R5jCb3OFjYA4Z+hb6bAZ2sfv2gVPEDQa/Z6sxiSNHiSXFQdjKTlv3eXA==",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/preact-moveable/-/preact-moveable-0.9.6.tgz",
+      "integrity": "sha512-nd2CB1tXqTH2Fs+wF6Imx3Bq1xptgwkgwyn7GiIMUZha5Vwv5sBNI15lTYdUFgdUxMI7vNGYomsOIVN9nNPnAw==",
       "requires": {
         "@daybrush/drag": "^0.8.1",
         "@daybrush/utils": "^0.10.0",
         "@egjs/agent": "^2.1.5",
-        "framework-utils": "^0.2.0",
+        "framework-utils": "^0.2.1",
         "preact-compat": "^3.19.0",
         "preact-css-styler": "^0.4.1",
-        "react-moveable": "^0.10.5"
+        "react-moveable": "^0.10.6"
+      },
+      "dependencies": {
+        "framework-utils": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-0.2.1.tgz",
+          "integrity": "sha512-KSB3kl/hlR4LiKBbK3hEydNFgj1fM3ymmxTmT9doeUVaMr7mTpIRmeTJ3/aCMl52Z0/It8Fm5pEJBQRLcb/yCw=="
+        }
       }
     },
     "preact-render-to-string": {
@@ -1083,9 +1090,9 @@
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
     "react-moveable": {
-      "version": "0.10.5",
-      "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.10.5.tgz",
-      "integrity": "sha512-Ox/YygWhl3xw0bGLw5AD9xaOs6pTP998lEjYz9Po/rikwnkZOeRj0kcI1xb7mVrehobLO0MG82woPImX+Rn3FA==",
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.10.6.tgz",
+      "integrity": "sha512-+ya2JjaPP3+kHk78OzbBm35DCtM7ZA/9W5u0Pc5KDy9T6nMGIxgJlS8V1u15DYRRG+w9NIbG+Fh6ScWTOHrzQQ==",
       "requires": {
         "@daybrush/drag": "^0.8.1",
         "@daybrush/utils": "^0.10.0",
diff --git a/package.json b/package.json
index 679833558..2c9ce6e47 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@egjs/children-differ": "^1.0.0",
     "@egjs/component": "^2.1.2",
     "framework-utils": "^0.2.0",
-    "preact-moveable": "^0.9.5"
+    "preact-moveable": "^0.9.6"
   },
   "devDependencies": {
     "@daybrush/builder": "^0.1.1",
diff --git a/packages/preact-moveable/package-lock.json b/packages/preact-moveable/package-lock.json
index 242b4d96d..f269c1bd2 100644
--- a/packages/preact-moveable/package-lock.json
+++ b/packages/preact-moveable/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "preact-moveable",
-    "version": "0.9.5",
+    "version": "0.9.6",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -342,9 +342,9 @@
             "dev": true
         },
         "framework-utils": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-0.2.0.tgz",
-            "integrity": "sha512-HEoIJI1/ONLUQ5RPTUY6R4CZl9kIQXBY9uMI5csQtnBp0argLRxdJXDHkIRfi7E0FP9fXPzYWx3pFimYgHHeTg=="
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-0.2.1.tgz",
+            "integrity": "sha512-KSB3kl/hlR4LiKBbK3hEydNFgj1fM3ymmxTmT9doeUVaMr7mTpIRmeTJ3/aCMl52Z0/It8Fm5pEJBQRLcb/yCw=="
         },
         "fs-extra": {
             "version": "5.0.0",
@@ -747,9 +747,9 @@
             "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
         },
         "react-moveable": {
-            "version": "0.10.5",
-            "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.10.5.tgz",
-            "integrity": "sha512-Ox/YygWhl3xw0bGLw5AD9xaOs6pTP998lEjYz9Po/rikwnkZOeRj0kcI1xb7mVrehobLO0MG82woPImX+Rn3FA==",
+            "version": "0.10.6",
+            "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.10.6.tgz",
+            "integrity": "sha512-+ya2JjaPP3+kHk78OzbBm35DCtM7ZA/9W5u0Pc5KDy9T6nMGIxgJlS8V1u15DYRRG+w9NIbG+Fh6ScWTOHrzQQ==",
             "requires": {
                 "@daybrush/drag": "^0.8.1",
                 "@daybrush/utils": "^0.10.0",
diff --git a/packages/preact-moveable/package.json b/packages/preact-moveable/package.json
index f306d400a..29695de7f 100644
--- a/packages/preact-moveable/package.json
+++ b/packages/preact-moveable/package.json
@@ -1,6 +1,6 @@
 {
     "name": "preact-moveable",
-    "version": "0.9.5",
+    "version": "0.9.6",
     "description": "A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Pinchable, Groupable.",
     "main": "./dist/moveable.cjs.js",
     "module": "./dist/moveable.esm.js",
@@ -61,9 +61,9 @@
         "@daybrush/drag": "^0.8.1",
         "@daybrush/utils": "^0.10.0",
         "@egjs/agent": "^2.1.5",
-        "framework-utils": "^0.2.0",
+        "framework-utils": "^0.2.1",
         "preact-compat": "^3.19.0",
         "preact-css-styler": "^0.4.1",
-        "react-moveable": "^0.10.5"
+        "react-moveable": "^0.10.6"
     }
 }
diff --git a/packages/react-moveable/package.json b/packages/react-moveable/package.json
index 3ef690db0..7c981881e 100644
--- a/packages/react-moveable/package.json
+++ b/packages/react-moveable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-moveable",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.",
   "main": "./dist/moveable.cjs.js",
   "module": "./dist/moveable.esm.js",
diff --git a/packages/react-moveable/src/react-moveable/matrix.ts b/packages/react-moveable/src/react-moveable/matrix.ts
index 82d41f59b..aacf149b8 100644
--- a/packages/react-moveable/src/react-moveable/matrix.ts
+++ b/packages/react-moveable/src/react-moveable/matrix.ts
@@ -181,6 +181,11 @@ export function multiply(matrix: number[], matrix2: number[], n: number) {
     const m = matrix.length / n;
     const k = matrix2.length / m;
 
+    if (!m) {
+        return matrix2;
+    } else if (!k) {
+        return matrix;
+    }
     for (let i = 0; i < n; ++i) {
         for (let j = 0; j < k; ++j) {
             newMatrix[i * k + j] = 0;
diff --git a/packages/react-moveable/src/react-moveable/utils.ts b/packages/react-moveable/src/react-moveable/utils.ts
index a8b03ed58..bdc739ead 100644
--- a/packages/react-moveable/src/react-moveable/utils.ts
+++ b/packages/react-moveable/src/react-moveable/utils.ts
@@ -1,7 +1,7 @@
 import { PREFIX, isNotSupportTransformOrigin } from "./consts";
 import { prefixNames } from "framework-utils";
 import { splitBracket, isUndefined, isObject, splitUnit, IObject } from "@daybrush/utils";
-import { MoveableState, MoveableProps } from "./types";
+import { MoveableState } from "./types";
 import {
     multiply, invert,
     convertCSStoMatrix, convertMatrixtoCSS,
@@ -72,7 +72,9 @@ export function getBeforeTransformOrigin(el: SVGElement) {
     });
 }
 export function getTransformOrigin(style: CSSStyleDeclaration, ) {
-    return style.transformOrigin!.split(" ");
+    const transformOrigin = style.transformOrigin;
+
+    return transformOrigin ? transformOrigin.split(" ") : ["0", "0"];
 }
 export function caculateMatrixStack(
     target: SVGElement | HTMLElement,